compositionContactSearch.html

<template>
    <lightning-card
        title="CompositionContactSearch"
        icon-name="custom:custom57"
    >
        <div class="slds-var-m-around_medium">
            <fieldset class="slds-var-p-around_x-small">
                <legend>lightning-input</legend>
                <lightning-input
                    type="search"
                    onchange={handleKeyChange}
                    class="slds-show slds-is-relative"
                    label="Search"
                ></lightning-input>
            </fieldset>
            <template lwc:if={contacts}>
                <template for:each={contacts} for:item="contact">
                    <fieldset
                        key={contact.Id}
                        class="slds-var-p-horizontal_x-small"
                    >
                        <legend>c-contact-tile</legend>
                        <c-contact-tile contact={contact}></c-contact-tile>
                    </fieldset>
                </template>
            </template>
            <template lwc:elseif={error}>
                <c-error-panel errors={error}></c-error-panel>
            </template>
        </div>
        <c-view-source source="lwc/compositionContactSearch" slot="footer">
            Create an experience component by assembling multiple child
            components. Type a few characters in the search bar to experience
            the recipe.
        </c-view-source>
    </lightning-card>
</template>