@tmorrow/cre8-wc 1.2.7 → 2.0.1

package/lib/components/select-tile/select-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-tile.js","sourceRoot":"","sources":["../../../components/select-tile/select-tile.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,EACH,UAAU,EAAkB,IAAI,GACnC,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,cAAc,CAAC;AAEtB,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAEjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;AACF,MAAM,OAAO,cAAe,SAAQ,eAAe;IAAnD;;QAGY,gBAAW,GAAyE,SAAS,CAAC;QAEtG;;WAEG;QAEH,SAAI,GAAyB,OAAO,CAAC;QAoBrC;;;WAGG;QAEH,2BAAsB,GAAwD,IAAI,CAAC;QAEnF;;;WAGG;QAEH,kBAAa,GAA4C,OAAO,CAAC;QAEjE;;WAEG;QAEH,iBAAY,GAAoB,KAAK,CAAC;IA6N1C,CAAC;IA3JG;;;;OAIG;IACH,IAAI,IAAI;QACJ,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACH,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC,CAAC,OAAO;QAChD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO;YACpC,CAAC,CAAC,IAAI,yBAAyB,CAAC,IAAI,CAAC;YACrC,CAAC,CAAC,IAAI,4BAA4B,CAAC,IAAI,CAAC,CAAC;QAC7C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,MAAM,CAAC;QAC1C,CAAC;IACL,CAAC;IAED;;;;;OAKG;IACH,iBAAiB;QACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;QACnC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;IAC7C,CAAC;IAGD;;;;OAIG;IACH,OAAO,CAAC,YAA4B;QAChC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAE5B,IAAI,YAAY,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC9B,qCAAqC;YACrC,8GAA8G;YAC9G,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACvE,CAAC;QACD,IAAI,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE,CAAC;YACpC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,CAAC,CAAC,IAAI,yBAAyB,CAAC,IAAI,CAAC;gBACrC,CAAC,CAAC,IAAI,4BAA4B,CAAC,IAAI,CAAC,CAAC;QACjD,CAAC;QACD,IAAI,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YAC/B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAChB,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,MAAM,CAAC;YAC1C,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,OAAO,CAAC;YAC3C,CAAC;QACL,CAAC;IACL,CAAC;IAGD,WAAW;QACP,OAAO,IAAI,CAAA;;;mBAGA,IAAI,CAAC,IAAI;iBACX,IAAI,CAAC,OAAO;gCACG,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;wBACvC,IAAI,CAAC,QAAQ;mBAClB,IAAI,CAAC,IAAI;qBACP,IAAI,CAAC,KAAK;yBACN,IAAI,CAAC,QAAQ;wBACd,IAAI,CAAC,OAAO;;SAE3B,CAAC;IACN,CAAC;IAED,kBAAkB;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC3B,OAAO,IAAI,CAAA;8BACO,QAAQ,mDAAmD,CAAC,IAAI,CAAC,OAAO;SAC7F,CAAC;QACF,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE;YACvE,0BAA0B,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACnD,gCAAgC,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;YAC/D,qCAAqC,EAAE,IAAI,CAAC,OAAO,KAAK,iBAAiB;YACzE,oCAAoC,EAAE,IAAI,CAAC,sBAAsB,KAAK,IAAI;YAC1E,sCAAsC,EAAE,IAAI,CAAC,sBAAsB,KAAK,MAAM;YAC9E,oCAAoC,EAAE,IAAI,CAAC,sBAAsB,KAAK,IAAI;YAC1E,oCAAoC,EAAE,IAAI,CAAC,sBAAsB,KAAK,IAAI;YAC1E,oCAAoC,EAAE,IAAI,CAAC,sBAAsB,KAAK,IAAI;YAC1E,qCAAqC,EAAE,IAAI,CAAC,sBAAsB,KAAK,KAAK;YAC5E,kCAAkC,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;YAC3D,2BAA2B,EAAE,IAAI,CAAC,OAAO;YACzC,6BAA6B,EAAE,IAAI,CAAC,SAAS;YAC7C,8BAA8B,EAAE,IAAI,CAAC,QAAQ;SAChD,CAAC,CAAC;QAEH,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAC/C,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,qCAAqC,EAClG;YACI,4CAA4C,EAAE,CAAC,IAAI,CAAC,OAAO;mBACpD,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,aAAa,KAAK,WAAW;YACpE,uCAAuC,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;YACtE,uCAAuC,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;YACtE,wCAAwC,EAAE,IAAI,CAAC,YAAY,KAAK,OAAO;SAC1E,CACJ,CAAC;QAEF,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC;QAEtD,OAAO,IAAI,CAAA;;UAET,IAAI,CAAC,WAAW,EAAE;wBACJ,mBAAmB,4BAA4B,IAAI,CAAC,OAAO,aAAa,aAAa;cAC/F,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAA;;;;aAIpC;;;kBAGK,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAA;;;;iBAInC;kBACC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,IAAI,CAAA;;;;iBAIlC;;;;;0BAKS,kBAAkB;kBAC1B,IAAI,CAAC,kBAAkB,EAAE;;sCAEL,QAAQ;;;;eAI/B,CAAC;IACZ,CAAC;;AA1QM,gCAAiB,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,AAA5D,CAA6D;AAgB9E,qBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AARzB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACS;AAMrC;IADC,KAAK,CAAC,OAAO,CAAC;6CACU;AAYzB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACwB;AAOpD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8DACuD;AAOnF;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACqC;AAMjE;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACU;AAWtC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACX;AAMjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACzB;AAMlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACxB;AAMnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACxB;AAQnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACzB;AASlB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDACzC;AAMxB;IADC,QAAQ,EAAE;+CACM;AAMT;IADP,QAAQ,EAAE;uDACsB;AAMjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACvB;AA+JxB,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACvD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAC9D,CAAC;AAQD,eAAe,cAAc,CAAC","sourcesContent":["import svgCheck from '@tmorrow/cre8-wc/icons/System/Regular/Check.svg?raw';\nimport {\n    LitElement, PropertyValues, html,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { nanoid } from 'nanoid';\n\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../icon/icon';\n\nimport styles from './select-tile.styles.js';\nimport { SelectTileRadioController } from './select-tile-radio-controller';\nimport { SelectTileCheckboxController } from './select-tile-checkbox-controller';\n\n/**\n * The Select Tile component is a short block of content inside a visual\n * container that can be used in place of checkboxes, radio buttons, and\n * links.  It allows you to add more descriptive and visually appealing\n * content for these actions while letting you compare different choices\n * either side-by-side or on top of each other.\n *\n * Typically you could use the \"header\" slot for an icon, and the \"title\"\n * and \"body\" slots for a content title and body text below it.\n *\n * The css parts are shown here wrapped in ::part() because otherwise Storybook\n * won't render them and the slots if they have the same name.\n * See https://developer.mozilla.org/en-US/docs/Web/CSS/::part\n *\n * @fires change\n * @fires input\n * @slot \"\" - The default slot goes into the center, main part of the Select Tile.\n *         Consider using title and body instead.\n * @slot \"header\" - The top or left part of the Select Tile\n * @slot footer - The bottom or right part of the Select Tile\n * @slot title - The title part of the Select Tile, use with body slot and\n *               instead of the default slot for appropriate typography.\n * @slot \"body\" - The \"body\" part of the Select Tile, which appears under\n *                the title slot and receives apporpriate typography.\n *\n * @csspart ::part(select-tile) - The main wrapping element\n * @csspart ::part(header) - The header element wrapping the left or top element\n * @csspart ::part(footer) - The footer element wrapping the right element\n * @csspart ::part(body) - The main body of the select-tile, wrapper around the default slot\n * @csspart ::part(body-title) - The element that wraps the \"title\" slot\n * @csspart ::part(body-body) - The element that wraps the \"body\" slot\n *\n*/\nexport class Cre8SelectTile extends Cre8FormElement {\n    static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n    private _controller: SelectTileRadioController | SelectTileCheckboxController | undefined = undefined;\n\n    /**\n     * Should this Select Tile behave as a radio button or a checkbox?\n     */\n    @property({ reflect: true })\n    type: 'radio' | 'checkbox' = 'radio';\n\n    /**\n     * Get the radio field item input\n     */\n    @query('input')\n    field!: HTMLInputElement;\n\n    static styles = [styles];\n\n    /**\n     * Style variants\n     * - **bare** renders a select-tile without a border and without padding around the content\n     * - **horizontal** renders a select-tile with header, body, footer oriented in a row rather than a column\n     * - **horizontal-bare** renders a select-tile with header, body, footer\n     *   oriented in a row rather than a column without a border and without padding around the content\n     */\n    @property({ reflect: true })\n    variant?: 'bare' | 'horizontal' | 'horizontal-bare';\n\n    /**\n     * Which breakpoint, if any, to switch to verticial.\n     * Only useful for horizontal variants. Defaults to 'sm'.\n     */\n    @property({ reflect: true })\n    variantBreakToVertical: 'sm' | 'sm-2' | 'md' | 'lg' | 'xl' | 'xxl' | 'none' = 'sm';\n\n    /**\n     * Where does the checkmark or radio button go?\n     * It disappears on 'none'. Only top-right is supported for vertical variants.\n     */\n    @property({ reflect: true })\n    checkPosition: 'left' | 'right' | 'top-right' | 'none' = 'right';\n\n    /**\n     * In radio mode, whether to use the circle with the dot, or the rounded check.\n     */\n    @property({ reflect: true })\n    radioVariant: 'dot' | 'check' = 'dot';\n\n    /**\n     * Align variants\n     * <cre8-text-passage size=\"sm\">\n     * <ul>\n     * <li>**center** renders a select-tile that has center aligned content/text</li>\n     * </ul>\n     * </cre8-text-passage>\n     */\n    @property({ reflect: true })\n    align?: 'center';\n\n    /**\n     * Error State\n     */\n    @property({ type: Boolean, reflect: true })\n    isError?: boolean;\n\n    /**\n     * Disabled State\n     */\n    @property({ type: Boolean, reflect: true })\n    disabled?: boolean;\n\n    /**\n     * Required attribute\n     */\n    @property({ type: Boolean, reflect: true })\n    required?: boolean;\n\n    /**\n     * Checked State.\n     * Note: the `checked` attribute sets the `defaultChecked` property, as well\n     * as sets the initial value for the `checked` property.\n     */\n    @property({ type: Boolean, reflect: true })\n    checked?: boolean;\n\n    /**\n     * The default checked state when the element first renders or is reset.\n     *\n     * Note: the attribute is named `checked` and the property is\n     * named `defaultChecked`. This is the same as a regular radio button.\n     */\n    @property({ attribute: 'checked', type: Boolean, reflect: true })\n    defaultChecked: boolean;\n\n    /**\n     * Select Tile FieldId\n     */\n    @property()\n    fieldId?: string;\n\n    /**\n     * Radio item fieldnote aria describe by\n     */\n    @property()\n    private ariaDescribedBy?: string;\n\n    /**\n     * Radio item fieldnote isSuccess\n     */\n    @property({ type: Boolean, reflect: true })\n    isSuccess?: boolean;\n\n    /**\n     * The form associated with this field\n     *\n     * TOOD: maybe this goes on Cre8FormElement\n     */\n    get form() {\n        return this._internals.form;\n    }\n\n    /**\n     * Connected callback lifecycle\n     * 1) Auto-generate the fieldId if a user doesn't provided so that the form field is accessible\n     * 2) Initialize the correct controller\n     */\n    connectedCallback() {\n        super.connectedCallback();\n        this.fieldId = this.fieldId || nanoid(); /* 1 */\n        this._controller = this.type === 'radio'\n            ? new SelectTileRadioController(this)\n            : new SelectTileCheckboxController(this);\n        if (this.disabled) {\n            this._internals.ariaDisabled = 'true';\n        }\n    }\n\n    /**\n     * Reset form callback\n     * 1) Remove the checked state from all radio elements\n     * 2) Set the checked state to the initial checked state\n     * 3) Set the radio field input checked attribute to the initial checked state\n     */\n    formResetCallback(): void {\n        this.checked = this.defaultChecked;\n        this.field.checked = this.defaultChecked;\n    }\n\n\n    /**\n     * Whenever the \"checked\" property changes, update our form value, aria-checked,\n     * and the checked property of `this.field`.\n     *\n     */\n    updated(changedProps: PropertyValues) {\n        super.updated(changedProps);\n\n        if (changedProps.has('checked')) {\n            // this.field.checked = this.checked;\n            // this.field.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null);\n            this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n        }\n        if (changedProps.has('type')) {\n            this._controller.hostDisconnected();\n            this._controller = this.type === 'radio'\n                ? new SelectTileRadioController(this)\n                : new SelectTileCheckboxController(this);\n        }\n        if (changedProps.has('disabled')) {\n            if (this.disabled) {\n                this._internals.ariaDisabled = 'true';\n            } else {\n                this._internals.ariaDisabled = 'false';\n            }\n        }\n    }\n\n\n    renderInput() {\n        return html`\n        <input\n            class=\"cre8-c-select-tile__input\"\n            type=${this.type}\n            id=${this.fieldId}\n            aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n            ?required=${this.required}\n            name=${this.name}\n            .value=${this.value}\n            ?disabled=\"${this.disabled}\"\n            .checked=\"${this.checked}\"\n        />\n        `;\n    }\n\n    renderCheckboxIcon() {\n        if (this.type === 'checkbox') {\n            return html`\n            <cre8-icon svg=\"${svgCheck}\" class=\"cre8-c-select-tile__icon\" aria-hidden=\"${!this.checked}\"></cre8-icon>\n        `;\n        }\n        return null;\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-select-tile', {\n            'cre8-c-select-tile--bare': this.variant === 'bare',\n            'cre8-c-select-tile--horizontal': this.variant === 'horizontal',\n            'cre8-c-select-tile--horizontal-bare': this.variant === 'horizontal-bare',\n            'cre8-c-select-tile--vertical-at-sm': this.variantBreakToVertical === 'sm',\n            'cre8-c-select-tile--vertical-at-sm-2': this.variantBreakToVertical === 'sm-2',\n            'cre8-c-select-tile--vertical-at-md': this.variantBreakToVertical === 'md',\n            'cre8-c-select-tile--vertical-at-lg': this.variantBreakToVertical === 'lg',\n            'cre8-c-select-tile--vertical-at-xl': this.variantBreakToVertical === 'xl',\n            'cre8-c-select-tile--vertical-at-xxl': this.variantBreakToVertical === 'xxl',\n            'cre8-c-select-tile--align-center': this.align === 'center',\n            'cre8-c-select-tile--error': this.isError,\n            'cre8-c-select-tile--success': this.isSuccess,\n            'cre8-c-select-tile--disabled': this.disabled,\n        });\n\n        const checkboxClassNames = this.componentClassNames(\n            this.type === 'radio' ? 'cre8-c-select-tile__custom-radio' : 'cre8-c-select-tile__custom-checkbox',\n            {\n                'cre8-c-select-tile__custom-radio-top-right': !this.variant\n                    || this.variant === 'bare' || this.checkPosition === 'top-right',\n                'cre8-c-select-tile__custom-radio-left': this.checkPosition === 'left',\n                'cre8-c-select-tile__custom-radio-none': this.checkPosition === 'none',\n                'cre8-c-select-tile__custom-radio-check': this.radioVariant === 'check',\n            }\n        );\n\n        const labelTabIndex = this.disabled ? undefined : '0';\n\n        return html`\n        <div class=\"cre8-c-select-tile__container\" part=\"container\">\n        ${this.renderInput()}\n        <label class=\"${componentClassNames}\" part=\"select-tile\" for=${this.fieldId} tabindex=${labelTabIndex}>\n            ${this.slotNotEmpty('header') && html`\n                <div class=\"cre8-c-select-tile__header\" part=\"header\">\n                    <slot name=\"header\"></slot>\n                </div>\n            `}\n            <div part=\"body\" class=\"cre8-c-select-tile__body\">\n                <slot></slot>\n                ${this.slotNotEmpty('title') && html`\n                    <div part=\"body-title\" class=\"cre8-c-select-tile__body_title\">\n                        <slot name=\"title\"></slot>\n                    </div>\n                `}\n                ${this.slotNotEmpty('body') && html`\n                    <div part=\"body-body\" class=\"cre8-c-select-tile__body_body\">\n                        <slot name=\"body\"></slot>\n                    </div>\n                `}\n            </div>\n            <div part=\"footer\" class=\"cre8-c-select-tile__footer\">\n                <slot name=\"footer\"></slot>\n            </div>\n            <div class=\"${checkboxClassNames}\">\n                ${this.renderCheckboxIcon()}\n                <div class=\"cre8-c-select-tile__inner-circle\">\n                    <cre8-icon svg=\"${svgCheck}\" class=\"cre8-c-select-tile__icon\"></cre8-icon>\n                </div>\n            </div>\n        </label>\n        </div>`;\n    }\n}\n\nif (customElements.get('cre8-select-tile') === undefined) {\n    customElements.define('cre8-select-tile', Cre8SelectTile);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-select-tile': Cre8SelectTile;\n    }\n}\n\nexport default Cre8SelectTile;\n"]}
+{"version":3,"file":"select-tile.js","sourceRoot":"","sources":["../../../components/select-tile/select-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import svgCheck from '@tmorrow/cre8-wc/icons/Check.svg?raw';\nimport {\n    LitElement, PropertyValues, html,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { nanoid } from 'nanoid';\n\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../icon/icon';\n\nimport styles from './select-tile.styles.js';\nimport { SelectTileRadioController } from './select-tile-radio-controller';\nimport { SelectTileCheckboxController } from './select-tile-checkbox-controller';\n\n/**\n * The Select Tile component is a short block of content inside a visual\n * container that can be used in place of checkboxes, radio buttons, and\n * links.  It allows you to add more descriptive and visually appealing\n * content for these actions while letting you compare different choices\n * either side-by-side or on top of each other.\n *\n * Typically you could use the \"header\" slot for an icon, and the \"title\"\n * and \"body\" slots for a content title and body text below it.\n *\n * The css parts are shown here wrapped in ::part() because otherwise Storybook\n * won't render them and the slots if they have the same name.\n * See https://developer.mozilla.org/en-US/docs/Web/CSS/::part\n *\n * @fires change\n * @fires input\n * @slot \"\" - The default slot goes into the center, main part of the Select Tile.\n *         Consider using title and body instead.\n * @slot \"header\" - The top or left part of the Select Tile\n * @slot footer - The bottom or right part of the Select Tile\n * @slot title - The title part of the Select Tile, use with body slot and\n *               instead of the default slot for appropriate typography.\n * @slot \"body\" - The \"body\" part of the Select Tile, which appears under\n *                the title slot and receives apporpriate typography.\n *\n * @csspart ::part(select-tile) - The main wrapping element\n * @csspart ::part(header) - The header element wrapping the left or top element\n * @csspart ::part(footer) - The footer element wrapping the right element\n * @csspart ::part(body) - The main body of the select-tile, wrapper around the default slot\n * @csspart ::part(body-title) - The element that wraps the \"title\" slot\n * @csspart ::part(body-body) - The element that wraps the \"body\" slot\n *\n*/\nexport class Cre8SelectTile extends Cre8FormElement {\n    static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n    private _controller: SelectTileRadioController | SelectTileCheckboxController | undefined = undefined;\n\n    /**\n     * Should this Select Tile behave as a radio button or a checkbox?\n     */\n    @property({ reflect: true })\n    type: 'radio' | 'checkbox' = 'radio';\n\n    /**\n     * Get the radio field item input\n     */\n    @query('input')\n    field!: HTMLInputElement;\n\n    static styles = [styles];\n\n    /**\n     * Style variants\n     * - **bare** renders a select-tile without a border and without padding around the content\n     * - **horizontal** renders a select-tile with header, body, footer oriented in a row rather than a column\n     * - **horizontal-bare** renders a select-tile with header, body, footer\n     *   oriented in a row rather than a column without a border and without padding around the content\n     */\n    @property({ reflect: true })\n    variant?: 'bare' | 'horizontal' | 'horizontal-bare';\n\n    /**\n     * Which breakpoint, if any, to switch to verticial.\n     * Only useful for horizontal variants. Defaults to 'sm'.\n     */\n    @property({ reflect: true })\n    variantBreakToVertical: 'sm' | 'sm-2' | 'md' | 'lg' | 'xl' | 'xxl' | 'none' = 'sm';\n\n    /**\n     * Where does the checkmark or radio button go?\n     * It disappears on 'none'. Only top-right is supported for vertical variants.\n     */\n    @property({ reflect: true })\n    checkPosition: 'left' | 'right' | 'top-right' | 'none' = 'right';\n\n    /**\n     * In radio mode, whether to use the circle with the dot, or the rounded check.\n     */\n    @property({ reflect: true })\n    radioVariant: 'dot' | 'check' = 'dot';\n\n    /**\n     * Align variants\n     * <cre8-text-passage size=\"sm\">\n     * <ul>\n     * <li>**center** renders a select-tile that has center aligned content/text</li>\n     * </ul>\n     * </cre8-text-passage>\n     */\n    @property({ reflect: true })\n    align?: 'center';\n\n    /**\n     * Error State\n     */\n    @property({ type: Boolean, reflect: true })\n    isError?: boolean;\n\n    /**\n     * Disabled State\n     */\n    @property({ type: Boolean, reflect: true })\n    disabled?: boolean;\n\n    /**\n     * Required attribute\n     */\n    @property({ type: Boolean, reflect: true })\n    required?: boolean;\n\n    /**\n     * Checked State.\n     * Note: the `checked` attribute sets the `defaultChecked` property, as well\n     * as sets the initial value for the `checked` property.\n     */\n    @property({ type: Boolean, reflect: true })\n    checked?: boolean;\n\n    /**\n     * The default checked state when the element first renders or is reset.\n     *\n     * Note: the attribute is named `checked` and the property is\n     * named `defaultChecked`. This is the same as a regular radio button.\n     */\n    @property({ attribute: 'checked', type: Boolean, reflect: true })\n    defaultChecked: boolean;\n\n    /**\n     * Select Tile FieldId\n     */\n    @property()\n    fieldId?: string;\n\n    /**\n     * Radio item fieldnote aria describe by\n     */\n    @property()\n    private ariaDescribedBy?: string;\n\n    /**\n     * Radio item fieldnote isSuccess\n     */\n    @property({ type: Boolean, reflect: true })\n    isSuccess?: boolean;\n\n    /**\n     * The form associated with this field\n     *\n     * TOOD: maybe this goes on Cre8FormElement\n     */\n    get form() {\n        return this._internals.form;\n    }\n\n    /**\n     * Connected callback lifecycle\n     * 1) Auto-generate the fieldId if a user doesn't provided so that the form field is accessible\n     * 2) Initialize the correct controller\n     */\n    connectedCallback() {\n        super.connectedCallback();\n        this.fieldId = this.fieldId || nanoid(); /* 1 */\n        this._controller = this.type === 'radio'\n            ? new SelectTileRadioController(this)\n            : new SelectTileCheckboxController(this);\n        if (this.disabled) {\n            this._internals.ariaDisabled = 'true';\n        }\n    }\n\n    /**\n     * Reset form callback\n     * 1) Remove the checked state from all radio elements\n     * 2) Set the checked state to the initial checked state\n     * 3) Set the radio field input checked attribute to the initial checked state\n     */\n    formResetCallback(): void {\n        this.checked = this.defaultChecked;\n        this.field.checked = this.defaultChecked;\n    }\n\n\n    /**\n     * Whenever the \"checked\" property changes, update our form value, aria-checked,\n     * and the checked property of `this.field`.\n     *\n     */\n    updated(changedProps: PropertyValues) {\n        super.updated(changedProps);\n\n        if (changedProps.has('checked')) {\n            // this.field.checked = this.checked;\n            // this.field.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null);\n            this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n        }\n        if (changedProps.has('type')) {\n            this._controller.hostDisconnected();\n            this._controller = this.type === 'radio'\n                ? new SelectTileRadioController(this)\n                : new SelectTileCheckboxController(this);\n        }\n        if (changedProps.has('disabled')) {\n            if (this.disabled) {\n                this._internals.ariaDisabled = 'true';\n            } else {\n                this._internals.ariaDisabled = 'false';\n            }\n        }\n    }\n\n\n    renderInput() {\n        return html`\n        <input\n            class=\"cre8-c-select-tile__input\"\n            type=${this.type}\n            id=${this.fieldId}\n            aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n            ?required=${this.required}\n            name=${this.name}\n            .value=${this.value}\n            ?disabled=\"${this.disabled}\"\n            .checked=\"${this.checked}\"\n        />\n        `;\n    }\n\n    renderCheckboxIcon() {\n        if (this.type === 'checkbox') {\n            return html`\n            <cre8-icon svg=\"${svgCheck}\" class=\"cre8-c-select-tile__icon\" aria-hidden=\"${!this.checked}\"></cre8-icon>\n        `;\n        }\n        return null;\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-select-tile', {\n            'cre8-c-select-tile--bare': this.variant === 'bare',\n            'cre8-c-select-tile--horizontal': this.variant === 'horizontal',\n            'cre8-c-select-tile--horizontal-bare': this.variant === 'horizontal-bare',\n            'cre8-c-select-tile--vertical-at-sm': this.variantBreakToVertical === 'sm',\n            'cre8-c-select-tile--vertical-at-sm-2': this.variantBreakToVertical === 'sm-2',\n            'cre8-c-select-tile--vertical-at-md': this.variantBreakToVertical === 'md',\n            'cre8-c-select-tile--vertical-at-lg': this.variantBreakToVertical === 'lg',\n            'cre8-c-select-tile--vertical-at-xl': this.variantBreakToVertical === 'xl',\n            'cre8-c-select-tile--vertical-at-xxl': this.variantBreakToVertical === 'xxl',\n            'cre8-c-select-tile--align-center': this.align === 'center',\n            'cre8-c-select-tile--error': this.isError,\n            'cre8-c-select-tile--success': this.isSuccess,\n            'cre8-c-select-tile--disabled': this.disabled,\n        });\n\n        const checkboxClassNames = this.componentClassNames(\n            this.type === 'radio' ? 'cre8-c-select-tile__custom-radio' : 'cre8-c-select-tile__custom-checkbox',\n            {\n                'cre8-c-select-tile__custom-radio-top-right': !this.variant\n                    || this.variant === 'bare' || this.checkPosition === 'top-right',\n                'cre8-c-select-tile__custom-radio-left': this.checkPosition === 'left',\n                'cre8-c-select-tile__custom-radio-none': this.checkPosition === 'none',\n                'cre8-c-select-tile__custom-radio-check': this.radioVariant === 'check',\n            }\n        );\n\n        const labelTabIndex = this.disabled ? undefined : '0';\n\n        return html`\n        <div class=\"cre8-c-select-tile__container\" part=\"container\">\n        ${this.renderInput()}\n        <label class=\"${componentClassNames}\" part=\"select-tile\" for=${this.fieldId} tabindex=${labelTabIndex}>\n            ${this.slotNotEmpty('header') && html`\n                <div class=\"cre8-c-select-tile__header\" part=\"header\">\n                    <slot name=\"header\"></slot>\n                </div>\n            `}\n            <div part=\"body\" class=\"cre8-c-select-tile__body\">\n                <slot></slot>\n                ${this.slotNotEmpty('title') && html`\n                    <div part=\"body-title\" class=\"cre8-c-select-tile__body_title\">\n                        <slot name=\"title\"></slot>\n                    </div>\n                `}\n                ${this.slotNotEmpty('body') && html`\n                    <div part=\"body-body\" class=\"cre8-c-select-tile__body_body\">\n                        <slot name=\"body\"></slot>\n                    </div>\n                `}\n            </div>\n            <div part=\"footer\" class=\"cre8-c-select-tile__footer\">\n                <slot name=\"footer\"></slot>\n            </div>\n            <div class=\"${checkboxClassNames}\">\n                ${this.renderCheckboxIcon()}\n                <div class=\"cre8-c-select-tile__inner-circle\">\n                    <cre8-icon svg=\"${svgCheck}\" class=\"cre8-c-select-tile__icon\"></cre8-icon>\n                </div>\n            </div>\n        </label>\n        </div>`;\n    }\n}\n\nif (customElements.get('cre8-select-tile') === undefined) {\n    customElements.define('cre8-select-tile', Cre8SelectTile);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-select-tile': Cre8SelectTile;\n    }\n}\n\nexport default Cre8SelectTile;\n"]}

package/lib/components/select-tile/select-tile.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-tile.styles.d.ts","sourceRoot":"","sources":["../../../components/select-tile/select-tile.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAqjV,CAAC;AAClkV,eAAe,MAAM,CAAC"}
+{"version":3,"file":"select-tile.styles.d.ts","sourceRoot":"","sources":["../../../components/select-tile/select-tile.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA8hCV,CAAC;AACH,eAAe,MAAM,CAAC"}