@tmorrow/cre8-wc 1.2.7 → 2.0.0

package/lib/components/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../components/pagination/pagination.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/prefer-default-export */\n/* eslint-disable lit/no-template-map */\nimport {\n    html, HTMLTemplateResult, nothing,\n} from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, queryAll, state } from 'lit/decorators.js';\nimport svgCaretLeft from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Left.svg?raw';\nimport svgFirstPage from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Double_Left.svg?raw';\nimport svgLastPage from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Double_Right.svg?raw';\nimport svgCaretRight from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Right.svg?raw';\nimport svgEllipsis from '@tmorrow/cre8-wc/icons/System/Regular/Ellipsis.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport { Cre8Button } from '../button/button';\nimport { isMobile, screenSizes } from '../../utilities/is-mobile';\nimport './page-counter/page-counter';\nimport styles from './pagination.styles.js';\n\n/**\n * The Pagination component is used to split up a large amount of results\n *  by showing only a certain amount on each page. You can cycle through\n *  the pages using Page Numbers, Next and Previous Buttons, or optional\n *  First Page and Last Page Buttons. This component is also used by Table\n *  to cycle through rows of results. Pagination has 3 display options:\n *\n * **default**:  Can contain up to seven Page Numbers (ellipses included)\n *  at a time flanked by Next and Previous Buttons. When there are more than\n *  seven pages, numbers start getting replaced by ellipses. Use this option\n *  when you have a lot of horizontal space in a layout. It should not be used\n *  for mobile web layouts since its buttons are smaller than the minimum touch target of 44px.\n *  The component has built in responsivity to mobile page size so you dont have tohandle this\n *  seperately\n *\n *\n * **compact** : Best used as a summary of where you are among pages or table rows flanked by\n * Previous and Next Buttons. Use this option when you have limited horizontal space but still\n * need to show where users are among results. Great for mobile layouts.\n *\n *\n * **icon-only** : Use this option in very tight spaces when it’s not required to show users\n * where they are among results. Great for mobile layouts.\n *\n *\n * ## HOW TO USE\n *\n * Select an option from the “display” dropdown depending on layout width\n * Select where your current page is from the “Page” dropdown\n * To show less pages when using Full Numbers, use the \"visiblePages” toggles\n * To hide the First Page and Last Page Buttons, turn on the “hideFirstLastButton” toggle\n * To change the states of page numbers or buttons, interact with the buttond to invoke each “State”\n * When using Compact Numbers, you can choose between “compact” and “icon-only” formats\n *\n *\n * ## ACCESSIBILITY NOTE\n *\n * To best orient people using screen readers, push focus to the top of\n * the list of results after any of the pagination buttons have been triggered,\n * **except for the currently selected one**. Focus target could be a visual results heading,\n * or the top heading of the results container of the page selected\n * via a programmatic selector, e.g. < section id=“results” aria-label=\"results-section\" > or\n * < div role= “group” aria-label=“results” >.\n *\n * @dependency cre8-button, cre8-icon, cre8-pagination-counter\n * @csspart icon - distinguishes the page buttons from the icon buttons\n * @cssproperty \"--pagination-display\" - controls the display css property\n * @cssproperty \"--pagination-justify-content\" - controls horizontal alignment of pagination\n * @cssproperty \"--pagination-align-items\" - controls vertical alignment of pagination\n */\n\nexport class Cre8Pagination extends Cre8Element {\n    static styles = [styles];\n\n    static elementDefinitions = {\n        'cre8-button': Cre8Button,\n    };\n\n    @state()\n    _currentPage: number = 99;\n\n    /**\n     * Input the total number of elements are returned from consuming app e.g. search results\n     * @attr number\n     * @required\n     */\n    @property({ reflect: true, type: Number })\n    totalResults!: number;\n\n\n    /**\n     * how many elements will displayVariant per page, indicated by business to typically be 20\n     * @attr number\n     */\n    @property({ type: Number, reflect: true })\n    get pageSize() {\n        return this._pageSize;\n    }\n\n    set pageSize(newSize: number) {\n        const oldSize = this._pageSize;\n        this._pageSize = newSize;\n        this.requestUpdate('pageSize', oldSize);\n    }\n\n    @state()\n    _pageSize = 10;\n\n\n    /**\n     * Controls how many page buttons are displayVarianted on the page\n     * at once, if container size permits. recommended max = 5 pages\n     *\n     * @attr number\n     */\n    @property({ reflect: true, type: Number })\n    visiblePages?: number = 5;\n\n    /**\n     * (optional) prop that allows for a compact and icon-only variant both\n     * for mobile screen-sizes and for use in certain contexts as guided by design,\n     * the component size will show 'default' in the absence of a value on desktop and\n     * 'compact' on smaller views.\n     *\n     * @attr 'compact' | 'icon-only' | 'default'\n     * @optional\n     */\n    @property({ type: String, reflect: true })\n    display?: 'compact' | 'icon-only' | 'default';\n\n    /**\n     *\n     *@state watches the width of the window and responds to show the accessibility approved variant.\n     */\n    @state()\n    windowWidth!: number;\n\n    @queryAll('cre8-button')\n    buttons: typeof Cre8Button[];\n\n    /**\n    *\n    * @optional\n    */\n    @property({ type: Boolean, reflect: true })\n    hideLastAndFirstButtons?: boolean;\n\n    @property({ reflect: true, type: Number })\n    get currentPage() {\n        return this._currentPage;\n    }\n\n    set currentPage(newPage: number) {\n        const oldPage = this._currentPage;\n        this._currentPage = newPage;\n        this.requestUpdate('currentPage', oldPage);\n    }\n\n    connectedCallBack() {\n        super.connectedCallback();\n    }\n\n    get maxVisiblePages() {\n        const allowedVisiblePages = {\n            md: 5,\n        };\n\n        // lg and up\n\n        if (!isMobile(screenSizes.lg.toString())) {\n            return this.visiblePages;\n        }\n\n        if (!isMobile(screenSizes.md.toString())) {\n            return Math.min(allowedVisiblePages.md, this.visiblePages);\n        }\n        return 0;\n    }\n\n\n    private get totalPages(): number {\n        return Math.ceil(this.totalResults / this.pageSize);\n    }\n\n    private get hasNoPreviousPage() {\n        return this._currentPage <= 1;\n    }\n\n    private get hasNoNextPage() {\n        return this._currentPage >= this.totalPages;\n    }\n\n    private _onHandleResize() {\n        this.requestUpdate();\n    }\n\n    handleResize() {\n        this._onHandleResize.bind(this);\n    }\n\n    // get range of pages to display [3, 4, 5], [2, 3, 4, 5]\n    protected get pageRange(): number[] {\n        const left = Math.floor(this.maxVisiblePages / 2);\n        let startPage = this.currentPage - left;\n        startPage = Math.min(startPage, this.totalPages - this.maxVisiblePages + 1);\n        startPage = Math.max(startPage, 1);\n        const endPage = Math.min(startPage + this.maxVisiblePages - 1, this.totalPages);\n        return [...Array(this.totalPages)].map((_, index) => index + 1).slice(startPage - 1, endPage);\n    }\n\n    protected async firstUpdated() {\n        await this.updateComplete;\n        if (this._pageSize !== this.pageSize) {\n            const old = this._pageSize;\n            this._pageSize = this.pageSize;\n            this.requestUpdate('pageSize', old);\n        }\n        this.windowWidth = window.innerWidth;\n        window.addEventListener('resize', () => {\n            if (this.windowWidth !== window.innerWidth) {\n                const oldWidth = this.windowWidth;\n                this.windowWidth = window.innerWidth;\n                this.handleResize();\n                this.requestUpdate('isResponsive', oldWidth);\n            }\n        });\n        if (this._currentPage !== this.currentPage) {\n            const old = this._currentPage;\n            this._currentPage = this.currentPage;\n            this.requestUpdate('currentPage', old);\n        }\n    }\n\n    disconnectedCallback() {\n        window.removeEventListener('resize', this.handleResize);\n        super.disconnectedCallback();\n    }\n\n    displayTypes(): HTMLTemplateResult {\n        return html`<cre8-page-counter\n              currentPage=${this.currentPage}\n              style=\"display:${this.display === 'compact' ? 'flex' : 'none'};\"\n              totalResults=${this.totalResults}\n              pageSize=${this._pageSize}\n              display=${this.display}>\n              </cre8-page-counter>`;\n    }\n\n    private _handleKeydown = (page: number, _buttonName?: string) => (e: KeyboardEvent) => {\n        if (e.code === 'Enter') {\n            this._goToPage(page, _buttonName); /* 2 */\n        }\n    };\n\n    private _goToPage = (page: number, _buttonName?: string) => () => {\n        const old = this._currentPage;\n        let focusButton: Cre8Button;\n        this.buttons.forEach((_: typeof Cre8Button) => {\n            const b = new Cre8Button();\n            if (b.hideText && (b.text === _buttonName)) {\n                focusButton = b;\n                (focusButton.shadowRoot!.querySelector('.cre8-c-button') as HTMLButtonElement).blur();\n            }\n            return null;\n        });\n        this._currentPage = page;\n        this.currentPage = this._currentPage;\n        this.requestUpdate('currentPage', old);\n        this.dispatchEvent(new CustomEvent(\n            'pagination.click',\n            { detail: { buttonName: _buttonName ?? this.currentPage.toString(), value: this.currentPage } }\n        ));\n    };\n\n    public goToPage(page: number, buttonName?: string) {\n        return this._goToPage(page, buttonName).bind(this);\n    }\n\n    public handleKeydown(page: number, buttonName?: string) {\n        return this._handleKeydown(page, buttonName);\n    }\n\n    render() {\n        const classNames = this.componentClassNames('cre8-c-pagination', {\n            'cre8-c-pagination--compact': this.display !== undefined && this.display === 'compact',\n            'cre8-c-pagination--icon-only': this.display !== undefined && this.display === 'icon-only',\n        });\n\n\n        return html`<nav\n      aria-label=\"pagination\"\n      class=${classNames}>\n        <slot></slot>\n        ${!this.hideLastAndFirstButtons ? html` <cre8-button\n              variant=\"tertiary\"\n              size=\"sm\"\n              text=\"\"\n              hideText\n              part=\"icon\"\n              aria-disabled=\"${ifDefined(this.hasNoPreviousPage)}\"\n              ?disabled=${this.hasNoPreviousPage}\n              @click=${this.goToPage(1, 'First Page')}\n              @keydown=${this.handleKeydown(1, 'First Page')}\n\n            >\n        <span slot=\"before\">\n          <cre8-icon\n            className=\"cre8-c-pagination__icon\"\n            aria-label=\"First Page\"\n            svg=${svgFirstPage}\n            size=\"24\">\n          </cre8-icon>\n        </span>\n            </cre8-button>` : nothing}\n        <cre8-button\n          variant=\"tertiary\"\n          size=\"sm\"\n          hideText\n          text=\"\"\n          part=\"icon\"\n          aria-disabled=\"${ifDefined(this.hasNoPreviousPage)}\"\n          ?disabled=${this.hasNoPreviousPage}\n          @click=${this.goToPage(this._currentPage - 1, 'Previous Page')}\n          @keydown=${this.handleKeydown(this.currentPage - 1, 'Previous Page')}\n\n        >\n          <span slot=\"before\">\n            <cre8-icon\n            className=\"cre8-c-pagination__icon\"\n            aria-label=\"Previous Page\"\n            slot=\"before\"\n            svg=${svgCaretLeft}\n            size=\"24\"\n\n            >\n            </cre8-icon>\n          </span>\n        </cre8-button>\n\n      ${this.displayTypes()}\n        ${!this.display || this.display === 'default'\n                ? html`${this.pageRange[this.pageRange.length - 1] > 1 && this.pageRange[0] !== 1\n                    ? html` <cre8-icon\n            aria-label=\"ellipsis\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgEllipsis}\n            size=\"24\">\n            </cre8-icon>`\n                    : nothing}\n            ${this.pageRange.map((page) => (page === this.currentPage\n                        ? html`<cre8-button variant=\"tertiary\" tab-index=\"-1\" text=\"${page}\"  class=\"icon-only\" size=\"sm\" id=\"current\"></cre8-button>`\n                        : html`<cre8-button\n                      variant=\"tertiary\"\n                      size=\"sm\"\n                      text=\"${page}\"\n                      class=\"icon-only\"\n                      id=\"${page}\"\n                      @click=${this.goToPage(page, page.toString())}\n                      @keydown=${this.handleKeydown(page, page.toString())}>\n                      </cre8-button>`\n                    ))}\n            ${this.pageRange[this.pageRange.length - 1] < this.totalPages\n                        ? html` <cre8-icon\n            aria-label=\"ellipsis\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgEllipsis}\n            size=\"24\">\n            </cre8-icon>`\n                        : nothing}`\n                : nothing}\n        <cre8-button\n          variant=\"tertiary\"\n          size=\"sm\"\n          part=\"icon\"\n          hideText\n          text=\"\"\n          aria-disabled=\"${ifDefined(this.hasNoNextPage)}\"\n          ?disabled=${this.hasNoNextPage}\n          @click=${this.goToPage(this.currentPage + 1, 'Next Page')}\n          @keydown=${this.handleKeydown(this.currentPage + 1, 'Next Page')}\n\n        >\n          <span slot=\"before\">\n            <cre8-icon\n            aria-label=\"Next Page\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgCaretRight}\n            size=\"24\">\n            </cre8-icon>\n          </span>\n        </cre8-button>\n\n        ${!this.hideLastAndFirstButtons\n                ? html` <cre8-button\n              variant=\"tertiary\"\n              size=\"sm\"\n              hideText\n              text=\"\"\n              part=\"icon\"\n              aria-disabled=\"${ifDefined(this.hasNoNextPage)}\"\n              ?disabled=${this.hasNoNextPage}\n              @click=${this.goToPage(this.totalPages, 'Last Page')}\n              @keydown=${this.handleKeydown(this.totalPages, 'Last Page')}\n\n            >\n              <span slot=\"before\">\n                <cre8-icon\n                aria-label=\"Last Page\"\n                className=\"cre8-c-pagination__icon\"\n                slot=\"before\"\n                svg=${svgLastPage}\n                size=\"24\"\n                >\n                </cre8-icon>\n              </span>\n            </cre8-button>`\n                : nothing}\n\n      </nav>`;\n    }\n}\n\nif (customElements.get('cre8-pagination') === undefined) {\n    customElements.define('cre8-pagination', Cre8Pagination);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-pagination': Cre8Pagination;\n    }\n}\n"]}
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../components/pagination/pagination.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/prefer-default-export */\n/* eslint-disable lit/no-template-map */\nimport {\n    html, HTMLTemplateResult, nothing,\n} from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, queryAll, state } from 'lit/decorators.js';\nimport svgCaretLeft from '@tmorrow/cre8-wc/icons/Caret_Left.svg?raw';\nimport svgFirstPage from '@tmorrow/cre8-wc/icons/Caret_Double_Left.svg?raw';\nimport svgLastPage from '@tmorrow/cre8-wc/icons/Caret_Double_Right.svg?raw';\nimport svgCaretRight from '@tmorrow/cre8-wc/icons/Caret_Right.svg?raw';\nimport svgEllipsis from '@tmorrow/cre8-wc/icons/Ellipsis.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport { Cre8Button } from '../button/button';\nimport { isMobile, screenSizes } from '../../utilities/is-mobile';\nimport './page-counter/page-counter';\nimport styles from './pagination.styles.js';\n\n/**\n * The Pagination component is used to split up a large amount of results\n *  by showing only a certain amount on each page. You can cycle through\n *  the pages using Page Numbers, Next and Previous Buttons, or optional\n *  First Page and Last Page Buttons. This component is also used by Table\n *  to cycle through rows of results. Pagination has 3 display options:\n *\n * **default**:  Can contain up to seven Page Numbers (ellipses included)\n *  at a time flanked by Next and Previous Buttons. When there are more than\n *  seven pages, numbers start getting replaced by ellipses. Use this option\n *  when you have a lot of horizontal space in a layout. It should not be used\n *  for mobile web layouts since its buttons are smaller than the minimum touch target of 44px.\n *  The component has built in responsivity to mobile page size so you dont have tohandle this\n *  seperately\n *\n *\n * **compact** : Best used as a summary of where you are among pages or table rows flanked by\n * Previous and Next Buttons. Use this option when you have limited horizontal space but still\n * need to show where users are among results. Great for mobile layouts.\n *\n *\n * **icon-only** : Use this option in very tight spaces when it’s not required to show users\n * where they are among results. Great for mobile layouts.\n *\n *\n * ## HOW TO USE\n *\n * Select an option from the “display” dropdown depending on layout width\n * Select where your current page is from the “Page” dropdown\n * To show less pages when using Full Numbers, use the \"visiblePages” toggles\n * To hide the First Page and Last Page Buttons, turn on the “hideFirstLastButton” toggle\n * To change the states of page numbers or buttons, interact with the buttond to invoke each “State”\n * When using Compact Numbers, you can choose between “compact” and “icon-only” formats\n *\n *\n * ## ACCESSIBILITY NOTE\n *\n * To best orient people using screen readers, push focus to the top of\n * the list of results after any of the pagination buttons have been triggered,\n * **except for the currently selected one**. Focus target could be a visual results heading,\n * or the top heading of the results container of the page selected\n * via a programmatic selector, e.g. < section id=“results” aria-label=\"results-section\" > or\n * < div role= “group” aria-label=“results” >.\n *\n * @dependency cre8-button, cre8-icon, cre8-pagination-counter\n * @csspart icon - distinguishes the page buttons from the icon buttons\n * @cssproperty \"--pagination-display\" - controls the display css property\n * @cssproperty \"--pagination-justify-content\" - controls horizontal alignment of pagination\n * @cssproperty \"--pagination-align-items\" - controls vertical alignment of pagination\n */\n\nexport class Cre8Pagination extends Cre8Element {\n    static styles = [styles];\n\n    static elementDefinitions = {\n        'cre8-button': Cre8Button,\n    };\n\n    @state()\n    _currentPage: number = 99;\n\n    /**\n     * Input the total number of elements are returned from consuming app e.g. search results\n     * @attr number\n     * @required\n     */\n    @property({ reflect: true, type: Number })\n    totalResults!: number;\n\n\n    /**\n     * how many elements will displayVariant per page, indicated by business to typically be 20\n     * @attr number\n     */\n    @property({ type: Number, reflect: true })\n    get pageSize() {\n        return this._pageSize;\n    }\n\n    set pageSize(newSize: number) {\n        const oldSize = this._pageSize;\n        this._pageSize = newSize;\n        this.requestUpdate('pageSize', oldSize);\n    }\n\n    @state()\n    _pageSize = 10;\n\n\n    /**\n     * Controls how many page buttons are displayVarianted on the page\n     * at once, if container size permits. recommended max = 5 pages\n     *\n     * @attr number\n     */\n    @property({ reflect: true, type: Number })\n    visiblePages?: number = 5;\n\n    /**\n     * (optional) prop that allows for a compact and icon-only variant both\n     * for mobile screen-sizes and for use in certain contexts as guided by design,\n     * the component size will show 'default' in the absence of a value on desktop and\n     * 'compact' on smaller views.\n     *\n     * @attr 'compact' | 'icon-only' | 'default'\n     * @optional\n     */\n    @property({ type: String, reflect: true })\n    display?: 'compact' | 'icon-only' | 'default';\n\n    /**\n     *\n     *@state watches the width of the window and responds to show the accessibility approved variant.\n     */\n    @state()\n    windowWidth!: number;\n\n    @queryAll('cre8-button')\n    buttons: typeof Cre8Button[];\n\n    /**\n    *\n    * @optional\n    */\n    @property({ type: Boolean, reflect: true })\n    hideLastAndFirstButtons?: boolean;\n\n    @property({ reflect: true, type: Number })\n    get currentPage() {\n        return this._currentPage;\n    }\n\n    set currentPage(newPage: number) {\n        const oldPage = this._currentPage;\n        this._currentPage = newPage;\n        this.requestUpdate('currentPage', oldPage);\n    }\n\n    connectedCallBack() {\n        super.connectedCallback();\n    }\n\n    get maxVisiblePages() {\n        const allowedVisiblePages = {\n            md: 5,\n        };\n\n        // lg and up\n\n        if (!isMobile(screenSizes.lg.toString())) {\n            return this.visiblePages;\n        }\n\n        if (!isMobile(screenSizes.md.toString())) {\n            return Math.min(allowedVisiblePages.md, this.visiblePages);\n        }\n        return 0;\n    }\n\n\n    private get totalPages(): number {\n        return Math.ceil(this.totalResults / this.pageSize);\n    }\n\n    private get hasNoPreviousPage() {\n        return this._currentPage <= 1;\n    }\n\n    private get hasNoNextPage() {\n        return this._currentPage >= this.totalPages;\n    }\n\n    private _onHandleResize() {\n        this.requestUpdate();\n    }\n\n    handleResize() {\n        this._onHandleResize.bind(this);\n    }\n\n    // get range of pages to display [3, 4, 5], [2, 3, 4, 5]\n    protected get pageRange(): number[] {\n        const left = Math.floor(this.maxVisiblePages / 2);\n        let startPage = this.currentPage - left;\n        startPage = Math.min(startPage, this.totalPages - this.maxVisiblePages + 1);\n        startPage = Math.max(startPage, 1);\n        const endPage = Math.min(startPage + this.maxVisiblePages - 1, this.totalPages);\n        return [...Array(this.totalPages)].map((_, index) => index + 1).slice(startPage - 1, endPage);\n    }\n\n    protected async firstUpdated() {\n        await this.updateComplete;\n        if (this._pageSize !== this.pageSize) {\n            const old = this._pageSize;\n            this._pageSize = this.pageSize;\n            this.requestUpdate('pageSize', old);\n        }\n        this.windowWidth = window.innerWidth;\n        window.addEventListener('resize', () => {\n            if (this.windowWidth !== window.innerWidth) {\n                const oldWidth = this.windowWidth;\n                this.windowWidth = window.innerWidth;\n                this.handleResize();\n                this.requestUpdate('isResponsive', oldWidth);\n            }\n        });\n        if (this._currentPage !== this.currentPage) {\n            const old = this._currentPage;\n            this._currentPage = this.currentPage;\n            this.requestUpdate('currentPage', old);\n        }\n    }\n\n    disconnectedCallback() {\n        window.removeEventListener('resize', this.handleResize);\n        super.disconnectedCallback();\n    }\n\n    displayTypes(): HTMLTemplateResult {\n        return html`<cre8-page-counter\n              currentPage=${this.currentPage}\n              style=\"display:${this.display === 'compact' ? 'flex' : 'none'};\"\n              totalResults=${this.totalResults}\n              pageSize=${this._pageSize}\n              display=${this.display}>\n              </cre8-page-counter>`;\n    }\n\n    private _handleKeydown = (page: number, _buttonName?: string) => (e: KeyboardEvent) => {\n        if (e.code === 'Enter') {\n            this._goToPage(page, _buttonName); /* 2 */\n        }\n    };\n\n    private _goToPage = (page: number, _buttonName?: string) => () => {\n        const old = this._currentPage;\n        let focusButton: Cre8Button;\n        this.buttons.forEach((_: typeof Cre8Button) => {\n            const b = new Cre8Button();\n            if (b.hideText && (b.text === _buttonName)) {\n                focusButton = b;\n                (focusButton.shadowRoot!.querySelector('.cre8-c-button') as HTMLButtonElement).blur();\n            }\n            return null;\n        });\n        this._currentPage = page;\n        this.currentPage = this._currentPage;\n        this.requestUpdate('currentPage', old);\n        this.dispatchEvent(new CustomEvent(\n            'pagination.click',\n            { detail: { buttonName: _buttonName ?? this.currentPage.toString(), value: this.currentPage } }\n        ));\n    };\n\n    public goToPage(page: number, buttonName?: string) {\n        return this._goToPage(page, buttonName).bind(this);\n    }\n\n    public handleKeydown(page: number, buttonName?: string) {\n        return this._handleKeydown(page, buttonName);\n    }\n\n    render() {\n        const classNames = this.componentClassNames('cre8-c-pagination', {\n            'cre8-c-pagination--compact': this.display !== undefined && this.display === 'compact',\n            'cre8-c-pagination--icon-only': this.display !== undefined && this.display === 'icon-only',\n        });\n\n\n        return html`<nav\n      aria-label=\"pagination\"\n      class=${classNames}>\n        <slot></slot>\n        ${!this.hideLastAndFirstButtons ? html` <cre8-button\n              variant=\"tertiary\"\n              size=\"sm\"\n              text=\"\"\n              hideText\n              part=\"icon\"\n              aria-disabled=\"${ifDefined(this.hasNoPreviousPage)}\"\n              ?disabled=${this.hasNoPreviousPage}\n              @click=${this.goToPage(1, 'First Page')}\n              @keydown=${this.handleKeydown(1, 'First Page')}\n\n            >\n        <span slot=\"before\">\n          <cre8-icon\n            className=\"cre8-c-pagination__icon\"\n            aria-label=\"First Page\"\n            svg=${svgFirstPage}\n            size=\"24\">\n          </cre8-icon>\n        </span>\n            </cre8-button>` : nothing}\n        <cre8-button\n          variant=\"tertiary\"\n          size=\"sm\"\n          hideText\n          text=\"\"\n          part=\"icon\"\n          aria-disabled=\"${ifDefined(this.hasNoPreviousPage)}\"\n          ?disabled=${this.hasNoPreviousPage}\n          @click=${this.goToPage(this._currentPage - 1, 'Previous Page')}\n          @keydown=${this.handleKeydown(this.currentPage - 1, 'Previous Page')}\n\n        >\n          <span slot=\"before\">\n            <cre8-icon\n            className=\"cre8-c-pagination__icon\"\n            aria-label=\"Previous Page\"\n            slot=\"before\"\n            svg=${svgCaretLeft}\n            size=\"24\"\n\n            >\n            </cre8-icon>\n          </span>\n        </cre8-button>\n\n      ${this.displayTypes()}\n        ${!this.display || this.display === 'default'\n                ? html`${this.pageRange[this.pageRange.length - 1] > 1 && this.pageRange[0] !== 1\n                    ? html` <cre8-icon\n            aria-label=\"ellipsis\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgEllipsis}\n            size=\"24\">\n            </cre8-icon>`\n                    : nothing}\n            ${this.pageRange.map((page) => (page === this.currentPage\n                        ? html`<cre8-button variant=\"tertiary\" tab-index=\"-1\" text=\"${page}\"  class=\"icon-only\" size=\"sm\" id=\"current\"></cre8-button>`\n                        : html`<cre8-button\n                      variant=\"tertiary\"\n                      size=\"sm\"\n                      text=\"${page}\"\n                      class=\"icon-only\"\n                      id=\"${page}\"\n                      @click=${this.goToPage(page, page.toString())}\n                      @keydown=${this.handleKeydown(page, page.toString())}>\n                      </cre8-button>`\n                    ))}\n            ${this.pageRange[this.pageRange.length - 1] < this.totalPages\n                        ? html` <cre8-icon\n            aria-label=\"ellipsis\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgEllipsis}\n            size=\"24\">\n            </cre8-icon>`\n                        : nothing}`\n                : nothing}\n        <cre8-button\n          variant=\"tertiary\"\n          size=\"sm\"\n          part=\"icon\"\n          hideText\n          text=\"\"\n          aria-disabled=\"${ifDefined(this.hasNoNextPage)}\"\n          ?disabled=${this.hasNoNextPage}\n          @click=${this.goToPage(this.currentPage + 1, 'Next Page')}\n          @keydown=${this.handleKeydown(this.currentPage + 1, 'Next Page')}\n\n        >\n          <span slot=\"before\">\n            <cre8-icon\n            aria-label=\"Next Page\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgCaretRight}\n            size=\"24\">\n            </cre8-icon>\n          </span>\n        </cre8-button>\n\n        ${!this.hideLastAndFirstButtons\n                ? html` <cre8-button\n              variant=\"tertiary\"\n              size=\"sm\"\n              hideText\n              text=\"\"\n              part=\"icon\"\n              aria-disabled=\"${ifDefined(this.hasNoNextPage)}\"\n              ?disabled=${this.hasNoNextPage}\n              @click=${this.goToPage(this.totalPages, 'Last Page')}\n              @keydown=${this.handleKeydown(this.totalPages, 'Last Page')}\n\n            >\n              <span slot=\"before\">\n                <cre8-icon\n                aria-label=\"Last Page\"\n                className=\"cre8-c-pagination__icon\"\n                slot=\"before\"\n                svg=${svgLastPage}\n                size=\"24\"\n                >\n                </cre8-icon>\n              </span>\n            </cre8-button>`\n                : nothing}\n\n      </nav>`;\n    }\n}\n\nif (customElements.get('cre8-pagination') === undefined) {\n    customElements.define('cre8-pagination', Cre8Pagination);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-pagination': Cre8Pagination;\n    }\n}\n"]}

package/lib/components/percent-bar/percent-bar.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 /* eslint-disable indent */
 import { html, nothing, } from 'lit';
-import svgCaretUp from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';
+import svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';
 import { property } from 'lit/decorators.js';
 import { Cre8Element } from '../cre8-element';
 import '../button/button';

package/lib/components/percent-bar/percent-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"percent-bar.js","sourceRoot":"","sources":["../../../components/percent-bar/percent-bar.ts"],"names":[],"mappings":";;;;;;AAAA,2BAA2B;AAC3B,OAAO,EAAE,IAAI,EAAE,OAAO,GAAI,MAAM,KAAK,CAAC;AACtC,OAAO,UAAU,MAAM,wDAAwD,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,OAAO,cAAe,SAAQ,WAAW;IAsBrC,YAAY,CAAC,CAAa;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5D,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;IACnD,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAE/E,OAAO,IAAI,CAAA;oBACK,mBAAmB;;;kBAGrB,IAAI,CAAC,WAAW,EAAE;YAClB,CAAC,CAAC,IAAI,CAAA;kCACU,IAAI;6BACT,UAAU;;;kCAGL,IAAI,CAAC,iBAAiB;gCACxB,IAAI,CAAC,YAAY;;mCAEd;YACjB,CAAC,CAAC,OAAO;;;;;;;oBAOP,IAAI,CAAC,iBAAiB,EAAE;;;;;mBAKzB,IAAI,CAAC,KAAK;iBACZ,IAAI,CAAC,GAAG;;;KAGpB,CAAC;IACJ,CAAC;;AAnEM,qBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOzB;IADC,QAAQ,EAAE;6CACG;AAMd;IADC,QAAQ,EAAE;2CACC;AAMZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACf;AAmD9B,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACzD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,cAAc,CAAC","sourcesContent":["/* eslint-disable indent */\nimport { html, nothing,  } from 'lit';\nimport svgCaretUp from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../button/button';\nimport '../text-passage/text-passage';\nimport '../progress-meter/progress-meter';\nimport styles from './percent-bar.styles.js';\n\n/**\n * The percent bar visually indicates a user's current progress and has a few features: a basic display bar with\n * a percentage, an actionable icon that allows a user to revisit a prior step and an actionable link that\n * allows a user save their progress before exiting.\n */\nexport class Cre8PercentBar extends Cre8Element {\n  static styles = [styles];\n\n\n  /*\n   * The current step the user is on.\n   */\n  @property()\n  value: number;\n\n  /*\n   * The total number of steps in the multistep process.\n   */\n  @property()\n  max: number;\n\n  /*\n   * The action-left icon-only tertiary button in the percent bar controls can be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disableActionLeft?: boolean;\n\n  private _handleClick(e: MouseEvent) {\n    this.dispatchEvent(new Event('leftActionButtonClick', e));\n  }\n\n  private fractionAsPercent(): number {\n    return Math.round((this.value / this.max) * 100);\n  }\n\n  private isFirstStep(): boolean {\n    return this.value > 1;\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames('cre8-c-percent-bar', {});\n\n    return html`\n      <div class=\"${componentClassNames}\">\n          <div class=\"cre8-c-percent-bar__controls\">\n              <div lass=\"cre8-c-percent-bar__left-controls\">\n                ${this.isFirstStep()\n                  ? html` <cre8-button\n                      ?hideText=${true}\n                      svg=\"${svgCaretUp}\"\n                      iconRotateDegree=\"-90\"\n                      variant=\"tertiary\"\n                      ?disabled=${this.disableActionLeft}\n                      @click=\"${this._handleClick}\"\n                    >\n                    </cre8-button>`\n                  : nothing}\n              </div>\n              <div class=\"cre8-c-percent-bar__right-controls\">\n                <cre8-text-passage\n                  size=\"small\"\n                  class=\"cre8-c-percent-bar__text-passage\"\n                >\n                  ${this.fractionAsPercent()}%\n                </cre8-text-passage>\n              </div>\n            </div>\n        <cre8-progress-meter\n          value=\"${this.value}\"\n          max=\"${this.max}\"\n        ></cre8-progress-meter>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-percent-bar') === undefined) {\n  customElements.define('cre8-percent-bar', Cre8PercentBar);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-percent-bar': Cre8PercentBar;\n  }\n}\n\nexport default Cre8PercentBar;\n"]}
+{"version":3,"file":"percent-bar.js","sourceRoot":"","sources":["../../../components/percent-bar/percent-bar.ts"],"names":[],"mappings":";;;;;;AAAA,2BAA2B;AAC3B,OAAO,EAAE,IAAI,EAAE,OAAO,GAAI,MAAM,KAAK,CAAC;AACtC,OAAO,UAAU,MAAM,yCAAyC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,OAAO,cAAe,SAAQ,WAAW;IAsBrC,YAAY,CAAC,CAAa;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5D,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;IACnD,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAE/E,OAAO,IAAI,CAAA;oBACK,mBAAmB;;;kBAGrB,IAAI,CAAC,WAAW,EAAE;YAClB,CAAC,CAAC,IAAI,CAAA;kCACU,IAAI;6BACT,UAAU;;;kCAGL,IAAI,CAAC,iBAAiB;gCACxB,IAAI,CAAC,YAAY;;mCAEd;YACjB,CAAC,CAAC,OAAO;;;;;;;oBAOP,IAAI,CAAC,iBAAiB,EAAE;;;;;mBAKzB,IAAI,CAAC,KAAK;iBACZ,IAAI,CAAC,GAAG;;;KAGpB,CAAC;IACJ,CAAC;;AAnEM,qBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOzB;IADC,QAAQ,EAAE;6CACG;AAMd;IADC,QAAQ,EAAE;2CACC;AAMZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACf;AAmD9B,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACzD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,cAAc,CAAC","sourcesContent":["/* eslint-disable indent */\nimport { html, nothing,  } from 'lit';\nimport svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../button/button';\nimport '../text-passage/text-passage';\nimport '../progress-meter/progress-meter';\nimport styles from './percent-bar.styles.js';\n\n/**\n * The percent bar visually indicates a user's current progress and has a few features: a basic display bar with\n * a percentage, an actionable icon that allows a user to revisit a prior step and an actionable link that\n * allows a user save their progress before exiting.\n */\nexport class Cre8PercentBar extends Cre8Element {\n  static styles = [styles];\n\n\n  /*\n   * The current step the user is on.\n   */\n  @property()\n  value: number;\n\n  /*\n   * The total number of steps in the multistep process.\n   */\n  @property()\n  max: number;\n\n  /*\n   * The action-left icon-only tertiary button in the percent bar controls can be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disableActionLeft?: boolean;\n\n  private _handleClick(e: MouseEvent) {\n    this.dispatchEvent(new Event('leftActionButtonClick', e));\n  }\n\n  private fractionAsPercent(): number {\n    return Math.round((this.value / this.max) * 100);\n  }\n\n  private isFirstStep(): boolean {\n    return this.value > 1;\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames('cre8-c-percent-bar', {});\n\n    return html`\n      <div class=\"${componentClassNames}\">\n          <div class=\"cre8-c-percent-bar__controls\">\n              <div lass=\"cre8-c-percent-bar__left-controls\">\n                ${this.isFirstStep()\n                  ? html` <cre8-button\n                      ?hideText=${true}\n                      svg=\"${svgCaretUp}\"\n                      iconRotateDegree=\"-90\"\n                      variant=\"tertiary\"\n                      ?disabled=${this.disableActionLeft}\n                      @click=\"${this._handleClick}\"\n                    >\n                    </cre8-button>`\n                  : nothing}\n              </div>\n              <div class=\"cre8-c-percent-bar__right-controls\">\n                <cre8-text-passage\n                  size=\"small\"\n                  class=\"cre8-c-percent-bar__text-passage\"\n                >\n                  ${this.fractionAsPercent()}%\n                </cre8-text-passage>\n              </div>\n            </div>\n        <cre8-progress-meter\n          value=\"${this.value}\"\n          max=\"${this.max}\"\n        ></cre8-progress-meter>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-percent-bar') === undefined) {\n  customElements.define('cre8-percent-bar', Cre8PercentBar);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-percent-bar': Cre8PercentBar;\n  }\n}\n\nexport default Cre8PercentBar;\n"]}

package/lib/components/remove-tag/remove-tag.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import classnames from 'classnames';
 import { html, } from 'lit';
 import { property } from 'lit/decorators.js';
-import svgClose from '@tmorrow/cre8-wc/icons/System/Regular/Close.svg?raw';
+import svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';
 import { Cre8Element } from '../cre8-element';
 import '../icon/icon';
 import styles from './remove-tag.styles.js';

package/lib/components/remove-tag/remove-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"remove-tag.js","sourceRoot":"","sources":["../../../components/remove-tag/remove-tag.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C,MAAM,CAAN,IAAY,KAGX;AAHD,WAAY,KAAK;IACf,wBAAe,CAAA;IACf,0BAAiB,CAAA;AACnB,CAAC,EAHW,KAAK,KAAL,KAAK,QAGhB;AAED,MAAM,CAAN,IAAY,KAIX;AAJD,WAAY,KAAK;IACf,4BAAmB,CAAA;IACnB,4BAAmB,CAAA;IACnB,yCAAgC,CAAA;AAClC,CAAC,EAJW,KAAK,KAAL,KAAK,QAIhB;AAED;;;GAGG;AACH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAA9C;;QASE;;;;;;WAMG;QAEC,UAAK,GAAwD,KAAK,CAAC,OAAO,CAAC;QAE/E;;;;;WAKG;QAEC,UAAK,GAA+B,KAAK,CAAC,KAAK,CAAC;IA6CtD,CAAC;IArCC;;OAEG;IACK,uBAAuB;QAC3B,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,kBAAkB,EAAE;YACpD,MAAM,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;YAC1C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC;IAED,MAAM;QACF,MAAM,kBAAkB,GAAG,UAAU,CAAC,mBAAmB,EAAE;YACvD,4BAA4B,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YACtD,4BAA4B,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YACtD,mCAAmC,EAAE,IAAI,CAAC,KAAK,KAAK,gBAAgB;YACpE,0BAA0B,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;YAClD,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;SACvD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;eACF,kBAAkB;gBACjB,IAAI,CAAC,uBAAuB;kBAC1B,IAAI,CAAC,QAAQ;;cAEjB,IAAI,CAAC,IAAI;;;;;iBAKN,QAAQ;;;;cAIX,CAAC;IACb,CAAC;;AArEQ,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACT;AAUd;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACoD;AAS3E;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACyB;AAMhD;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACL;AAyCzB,IAAI,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,SAAS,EAAE,CAAC;IACtD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,aAAa,CAAC","sourcesContent":["import classnames from 'classnames';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport svgClose from '@tmorrow/cre8-wc/icons/System/Regular/Close.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport styles from './remove-tag.styles.js';\n\nexport enum Shape {\n  Round = 'round',\n  Square = 'square',\n}\n\nexport enum Color {\n  Neutral = 'neutral',\n  Branded = 'branded',\n  NeutralHybrid = 'neutral-hybrid',\n}\n\n/**\n * Clicking a Remove Tag causes it to disappear from the page or field (in the case of Multi-Select).\n * These tags always display a \"Close\" icon.\n */\nexport class Cre8RemoveTag extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The tag text\n   */\n  @property({ type: String })\n      text?: string;\n\n  /**\n   * The tag color scheme\n   *\n   *  - **neutral** should be used when doing non-link actions such as filters or multi-select, within forms, etc.\n   *  - **neutral-hybrid** should be used for when tags are doing an action like a button or a link\n   *  - **branded** should be used like Neutral, but for marketing / actionable items\n   */\n  @property({ type: String })\n      color: Color.Neutral | Color.Branded | Color.NeutralHybrid = Color.Neutral;\n\n  /**\n   * The tag shape\n   *\n   * - **round** will give the tag a rounded border\n   * - **square** will give the tag a squared border\n   */\n  @property({ type: String })\n      shape: Shape.Round | Shape.Square = Shape.Round;\n\n  /**\n   * Disabled state for remove tag\n   */\n  @property({ type: Boolean })\n      disabled?: boolean;\n\n  /**\n   * Dispatches an event when the tag is clicked\n   */\n  private _handleRemoveTagClicked() {\n      const customEvent = new CustomEvent('removeTagClicked', {\n          detail: { message: 'Remove Tag clicked.' },\n          bubbles: true,\n          composed: true,\n      });\n      this.dispatchEvent(customEvent);\n  }\n\n  render() {\n      const componentClassName = classnames('cre8-c-remove-tag', {\n          'cre8-c-remove-tag--neutral': this.color === 'neutral',\n          'cre8-c-remove-tag--branded': this.color === 'branded',\n          'cre8-c-remove-tag--neutral-hybrid': this.color === 'neutral-hybrid',\n          'cre8-c-remove-tag--round': this.shape === 'round',\n          'cre8-c-remove-tag--square': this.shape === 'square',\n      });\n\n      return html` <button\n      class=\"${componentClassName}\"\n      @click=\"${this._handleRemoveTagClicked}\"\n      ?disabled=${this.disabled}\n    >\n      <span>${this.text}</span>\n      <div class=\"cre8-c-remove-tag-item__icon\">\n        <cre8-icon\n          width=\"16\"\n          height=\"16\"\n          svg=\"${svgClose}\"\n          aria-label=\"remove\"\n        ></cre8-icon>\n      </div>\n    </button>`;\n  }\n}\n\nif (customElements.get('cre8-remove-tag') === undefined) {\n    customElements.define('cre8-remove-tag', Cre8RemoveTag);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-remove-tag': Cre8RemoveTag;\n  }\n}\n\nexport default Cre8RemoveTag;\n"]}
+{"version":3,"file":"remove-tag.js","sourceRoot":"","sources":["../../../components/remove-tag/remove-tag.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,QAAQ,MAAM,sCAAsC,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C,MAAM,CAAN,IAAY,KAGX;AAHD,WAAY,KAAK;IACf,wBAAe,CAAA;IACf,0BAAiB,CAAA;AACnB,CAAC,EAHW,KAAK,KAAL,KAAK,QAGhB;AAED,MAAM,CAAN,IAAY,KAIX;AAJD,WAAY,KAAK;IACf,4BAAmB,CAAA;IACnB,4BAAmB,CAAA;IACnB,yCAAgC,CAAA;AAClC,CAAC,EAJW,KAAK,KAAL,KAAK,QAIhB;AAED;;;GAGG;AACH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAA9C;;QASE;;;;;;WAMG;QAEC,UAAK,GAAwD,KAAK,CAAC,OAAO,CAAC;QAE/E;;;;;WAKG;QAEC,UAAK,GAA+B,KAAK,CAAC,KAAK,CAAC;IA6CtD,CAAC;IArCC;;OAEG;IACK,uBAAuB;QAC3B,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,kBAAkB,EAAE;YACpD,MAAM,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;YAC1C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC;IAED,MAAM;QACF,MAAM,kBAAkB,GAAG,UAAU,CAAC,mBAAmB,EAAE;YACvD,4BAA4B,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YACtD,4BAA4B,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YACtD,mCAAmC,EAAE,IAAI,CAAC,KAAK,KAAK,gBAAgB;YACpE,0BAA0B,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;YAClD,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;SACvD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;eACF,kBAAkB;gBACjB,IAAI,CAAC,uBAAuB;kBAC1B,IAAI,CAAC,QAAQ;;cAEjB,IAAI,CAAC,IAAI;;;;;iBAKN,QAAQ;;;;cAIX,CAAC;IACb,CAAC;;AArEQ,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACT;AAUd;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACoD;AAS3E;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACyB;AAMhD;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACL;AAyCzB,IAAI,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,SAAS,EAAE,CAAC;IACtD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,aAAa,CAAC","sourcesContent":["import classnames from 'classnames';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport styles from './remove-tag.styles.js';\n\nexport enum Shape {\n  Round = 'round',\n  Square = 'square',\n}\n\nexport enum Color {\n  Neutral = 'neutral',\n  Branded = 'branded',\n  NeutralHybrid = 'neutral-hybrid',\n}\n\n/**\n * Clicking a Remove Tag causes it to disappear from the page or field (in the case of Multi-Select).\n * These tags always display a \"Close\" icon.\n */\nexport class Cre8RemoveTag extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The tag text\n   */\n  @property({ type: String })\n      text?: string;\n\n  /**\n   * The tag color scheme\n   *\n   *  - **neutral** should be used when doing non-link actions such as filters or multi-select, within forms, etc.\n   *  - **neutral-hybrid** should be used for when tags are doing an action like a button or a link\n   *  - **branded** should be used like Neutral, but for marketing / actionable items\n   */\n  @property({ type: String })\n      color: Color.Neutral | Color.Branded | Color.NeutralHybrid = Color.Neutral;\n\n  /**\n   * The tag shape\n   *\n   * - **round** will give the tag a rounded border\n   * - **square** will give the tag a squared border\n   */\n  @property({ type: String })\n      shape: Shape.Round | Shape.Square = Shape.Round;\n\n  /**\n   * Disabled state for remove tag\n   */\n  @property({ type: Boolean })\n      disabled?: boolean;\n\n  /**\n   * Dispatches an event when the tag is clicked\n   */\n  private _handleRemoveTagClicked() {\n      const customEvent = new CustomEvent('removeTagClicked', {\n          detail: { message: 'Remove Tag clicked.' },\n          bubbles: true,\n          composed: true,\n      });\n      this.dispatchEvent(customEvent);\n  }\n\n  render() {\n      const componentClassName = classnames('cre8-c-remove-tag', {\n          'cre8-c-remove-tag--neutral': this.color === 'neutral',\n          'cre8-c-remove-tag--branded': this.color === 'branded',\n          'cre8-c-remove-tag--neutral-hybrid': this.color === 'neutral-hybrid',\n          'cre8-c-remove-tag--round': this.shape === 'round',\n          'cre8-c-remove-tag--square': this.shape === 'square',\n      });\n\n      return html` <button\n      class=\"${componentClassName}\"\n      @click=\"${this._handleRemoveTagClicked}\"\n      ?disabled=${this.disabled}\n    >\n      <span>${this.text}</span>\n      <div class=\"cre8-c-remove-tag-item__icon\">\n        <cre8-icon\n          width=\"16\"\n          height=\"16\"\n          svg=\"${svgClose}\"\n          aria-label=\"remove\"\n        ></cre8-icon>\n      </div>\n    </button>`;\n  }\n}\n\nif (customElements.get('cre8-remove-tag') === undefined) {\n    customElements.define('cre8-remove-tag', Cre8RemoveTag);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-remove-tag': Cre8RemoveTag;\n  }\n}\n\nexport default Cre8RemoveTag;\n"]}

package/lib/components/select/select.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import svgCaretUp from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';
+import svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';
 import { html, nothing, } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { property, queryAll } from 'lit/decorators.js';

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

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../components/select/select.ts"],"names":[],"mappings":"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","sourcesContent":["import svgCaretUp from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';\nimport { html, nothing, } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport '../field-note/field-note';\nimport styles from './select.styles.js';\nimport Cre8FormElement from '../cre8-form-element.js';\n\nexport interface Cre8SelectOption {\n  label: string;\n  value: number | string;\n}\n\nexport interface Cre8SelectOptionGroup {\n  optGroupLabel: string;\n  options: Cre8SelectOption[];\n}\n\n/**\n * The Select control is designed and built to be used for selecting between choices in a form.\n * It is not a Dropdown control which is generally used for displaying lists of choices\n * that act as links or actions, like filter options.\n *\n * Consider the use of a Select control carefully.\n * When you have less than 5 options for the user to choose from,\n * Radio or Checkbox inputs may be a better choice to display all of the options at once.\n * Users have to slow down to scan a list with more than 15 options,\n * so using an option group to give the options hierarchy may help users find their choice faster.\n * Alternately, a text input field might be a more appropriate control to use when there are too many options,\n * especially when used with typeahead/auto-complete.\n *\n * ## How to use\n * 1. The collapsed default state always shows a default placeholder value or a selected value.\n * 2. Sort list items in a logical order, such as grouping highly related options together,\n *    placing most common options first, using alphabetical or numeric orders or dates in chronological order.\n * 3. A list that includes 6+ items should show a scrollbar.\n * 4. Users should be able to use a keystroke to quickly jump\n *    to selecting an option that begins with the entered letter.\n * 5. Utilize appropriate native controls for when a user is on a mobile device rather than our custom Select.\n * 6. Adhere to our common form field conventions and always include a Label,\n *    provide short and clear error messages in context, avoid using the Read-only\n *    and Disabled states as much as possible, and utilize the info/formatting tip\n *    or helpful link rather than placeholder text.\n *\n * @slot fieldNote - Container for optional field note content\n */\n\nexport class Cre8Select extends Cre8FormElement {\n\n  readonly type = 'select';\n  static styles = [styles];\n\n  /**\n   * A mix of Cre8SelectOption and Cre8SelectOptionGroup definitions:\n   * - Cre8SelectOption\n   *   - label: option label text - `string`\n   *   - value: option value - `number | string`\n   * - Cre8SelectOptionGroup\n   *  - optGroupLabel: optgroup label text - `string`\n   *  - options: Array of multiple Cre8SelectOption items - `Cre8SelectOption[]`\n   */\n  @property({ type: Array })\n  items: Array<Cre8SelectOption | Cre8SelectOptionGroup> = [];\n\n  /**\n   * The required label that appears above the select\n   * @attr {string}\n   */\n  @property()\n  label: string = 'Label';\n\n\n  /**\n  * The unique id of the select\n  * @attr {string}\n  */\n  @property()\n  fieldId?: string;\n\n  /**\n   * Optional field note text can be added to provide additional field guidance.\n   * @attr {string}\n   */\n  @property()\n  fieldNote?: string;\n\n  /**\n   * Used to connect the field note in text field to the text menu for accessibility\n   * @attr {string}\n   */\n  @property()\n  ariaDescribedBy?: string;\n\n  /**\n   * Additional aria-describedby connection to id for additional success and error notes to be accessible\n   * @attr {string}\n   */\n  @property()\n  validationAriaDescribedBy?: string;\n\n  /**\n   * The required attribute on the select\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\n\n  /**\n   * The disabled attribute on the select\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  /**\n   * Changes the component's treatment to represent an error state\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isError?: boolean;\n\n  /**\n   * The error field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  errorNote?: string;\n\n  /**\n   * Changes the component's treatment to represent a success state\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isSuccess?: boolean;\n\n  /**\n   * The success field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  successNote?: string;\n\n  /**\n   * Select input querySelector\n   */\n\n\n\n  /**\n   * Get all select option elements\n   */\n  @queryAll('option')\n  _selectOptions: HTMLOptionsCollection;\n\n\n  /**\n   * Selected item value\n   */\n  private selectedItem: string;\n\n  /**\n   * Initialize aria attributes\n   */\n  private _initializeAria() {\n    this.fieldId = this.fieldId || nanoid();\n    if (this.fieldNote || this.slotNotEmpty('fieldNote')) {\n      this.ariaDescribedBy = this.ariaDescribedBy || nanoid();\n    }\n    if (this.successNote || this.errorNote) {\n      this.validationAriaDescribedBy = this.validationAriaDescribedBy || nanoid();\n    }\n  }\n\n  /**\n   * Aria describedby string based on field notes and error/success notes\n   * 1) If both validationAriaDescribedBy (error/success note) and field note exists,\n   * render both in the input's `aria-describedby` attribute\n   * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as\n   * the `aria-describedby` attribute (input without field note initially, but then error/success is added).\n   * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)\n   */\n  private _fieldNoteAria() {\n    if (this.validationAriaDescribedBy && this.ariaDescribedBy) {\n      return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */\n    }\n    if (this.validationAriaDescribedBy && (!this.ariaDescribedBy)) {\n      return this.validationAriaDescribedBy; /* 2 */\n    }\n    return this.ariaDescribedBy; /* 3 */\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.field.setAttribute('name', this.name ?? '')\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n  /**\n   * First updatedLifecycle\n   * 1) Get the option in the items array with selected set to true. Set that as the selected item\n   * 2) The default value is set to the `option` with the `selected` if one exists. Otherwise, use the\n   * select the first item value like the native select.\n   */\n  firstUpdated() {\n    super.firstUpdated();\n    [...this._selectOptions].forEach((item: { selected: boolean; value: string; }) => { /* 1 */\n      if (item.selected === true) {\n        this.selectedItem = item.value; /* 1 */\n      }\n    });\n    this.defaultValue = this.selectedItem ? this.selectedItem : (this._selectOptions[0].value ?? 'Select An Option'); /* 2 */\n    this._setFormData();\n    this._initializeAria();\n    this.updateField();\n  }\n\n  /**\n * Set form data\n * 1) Set the element internals to the selected item value if it exists,\n *    otherwise the default selected item is the first one\n */\n  private _setFormData() {\n    if (this.selectedItem) {\n      return this._internals?.setFormValue(this.selectedItem);\n    }\n    return this._internals?.setFormValue(this.defaultValue.toString());\n  }\n\n  /**\n   * Handle On Change\n   * 1. Set the value when the select is changed.\n   * 2. Fire the custom event with the current value.\n   */\n  private _handleOnChange(e: Event) {\n    /* 1 */\n    const target = e.target as HTMLSelectElement;\n    this.value = target.options[target.selectedIndex].value;\n    this._internals.setFormValue(this.value);\n\n\n    /* 2 */\n    const customEvent = new CustomEvent('change', {\n      detail: {\n        name: this.name,\n        value: this.value,\n      },\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(customEvent);\n  }\n\n  /**\n   * Render the select options\n   */\n  private _renderSelectOptions() {\n    return this.items.map((item: Cre8SelectOption | Cre8SelectOptionGroup) => {\n      if ('options' in item) {\n        const selectedGroup = item.options.map((option: Cre8SelectOption) => html`\n                  <option value=\"${option.value}\">${option.label}</option>\n              `);\n        return html`<optgroup label=\"${item.optGroupLabel}\">\n          ${selectedGroup}\n        </optgroup>`;\n      }\n      return html`<option value=\"${item.value}\">${item.label}</option>`;\n    });\n  }\n\n  /**\n   * Render the success or error field notes\n   * 1. If there is a successNote, then return the field note with the success message and state.\n   * 2. If there is a errorNote, then return the field note with the error message and state.\n   */\n  private _renderSuccessErrorFieldNote() {\n    if (this.successNote) {\n      /* 1 */\n      return html`\n        <cre8-field-note\n          ?isSuccess=${this.isSuccess}\n          id=${this.validationAriaDescribedBy}\n          class=\"cre8-c-select__field-note-success\"\n          iconName=\"success\"\n        >\n          ${this.successNote}\n        </cre8-field-note>`;\n    }\n    if (this.errorNote) {\n      /* 2 */\n      return html`\n        <cre8-field-note\n          ?isError=${this.isError}\n          id=${this.validationAriaDescribedBy}\n          class=\"cre8-c-select__field-note-error\"\n          iconName=\"error-alt\"\n        >\n          ${this.errorNote}\n        </cre8-field-note>`;\n    }\n    return null;\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames('cre8-c-select', {\n      'cre8-is-error': this.isError,\n      'cre8-is-success': this.isSuccess,\n    });\n\n    return html`\n      <div class=\"${componentClassNames}\">\n        <label class=\"cre8-c-select__label\" for=\"${this.fieldId}\">${this.label}</label>\n        <div class=\"cre8-c-select__body\">\n          <select\n            class=\"cre8-c-select__input\"\n            id=${this.fieldId}\n            name=${ifDefined(this.name)}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            aria-describedby=\"${ifDefined(this._fieldNoteAria())}\"\n            @change=${this._handleOnChange}\n          >\n            ${this._renderSelectOptions()}\n          </select>\n          <div class=\"cre8-c-select__icons\">\n            <cre8-icon svg='${svgCaretUp}' rotate=\"180\" class=\"cre8-c-select__icon-arrow\" aria-hidden='true'>\n          </div>\n        </div>\n      </div>\n      ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`\n          <cre8-field-note\n            id=${this.ariaDescribedBy}\n            class=\"cre8-c-select__field-note\"\n          ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note>`\n        : nothing}\n      ${this._renderSuccessErrorFieldNote()}\n    `;\n  }\n}\n\nif (customElements.get('cre8-select') === undefined) {\n  customElements.define('cre8-select', Cre8Select);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-select': Cre8Select;\n  }\n}\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../components/select/select.ts"],"names":[],"mappings":"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","sourcesContent":["import svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';\nimport { html, nothing, } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport '../field-note/field-note';\nimport styles from './select.styles.js';\nimport Cre8FormElement from '../cre8-form-element.js';\n\nexport interface Cre8SelectOption {\n  label: string;\n  value: number | string;\n}\n\nexport interface Cre8SelectOptionGroup {\n  optGroupLabel: string;\n  options: Cre8SelectOption[];\n}\n\n/**\n * The Select control is designed and built to be used for selecting between choices in a form.\n * It is not a Dropdown control which is generally used for displaying lists of choices\n * that act as links or actions, like filter options.\n *\n * Consider the use of a Select control carefully.\n * When you have less than 5 options for the user to choose from,\n * Radio or Checkbox inputs may be a better choice to display all of the options at once.\n * Users have to slow down to scan a list with more than 15 options,\n * so using an option group to give the options hierarchy may help users find their choice faster.\n * Alternately, a text input field might be a more appropriate control to use when there are too many options,\n * especially when used with typeahead/auto-complete.\n *\n * ## How to use\n * 1. The collapsed default state always shows a default placeholder value or a selected value.\n * 2. Sort list items in a logical order, such as grouping highly related options together,\n *    placing most common options first, using alphabetical or numeric orders or dates in chronological order.\n * 3. A list that includes 6+ items should show a scrollbar.\n * 4. Users should be able to use a keystroke to quickly jump\n *    to selecting an option that begins with the entered letter.\n * 5. Utilize appropriate native controls for when a user is on a mobile device rather than our custom Select.\n * 6. Adhere to our common form field conventions and always include a Label,\n *    provide short and clear error messages in context, avoid using the Read-only\n *    and Disabled states as much as possible, and utilize the info/formatting tip\n *    or helpful link rather than placeholder text.\n *\n * @slot fieldNote - Container for optional field note content\n */\n\nexport class Cre8Select extends Cre8FormElement {\n\n  readonly type = 'select';\n  static styles = [styles];\n\n  /**\n   * A mix of Cre8SelectOption and Cre8SelectOptionGroup definitions:\n   * - Cre8SelectOption\n   *   - label: option label text - `string`\n   *   - value: option value - `number | string`\n   * - Cre8SelectOptionGroup\n   *  - optGroupLabel: optgroup label text - `string`\n   *  - options: Array of multiple Cre8SelectOption items - `Cre8SelectOption[]`\n   */\n  @property({ type: Array })\n  items: Array<Cre8SelectOption | Cre8SelectOptionGroup> = [];\n\n  /**\n   * The required label that appears above the select\n   * @attr {string}\n   */\n  @property()\n  label: string = 'Label';\n\n\n  /**\n  * The unique id of the select\n  * @attr {string}\n  */\n  @property()\n  fieldId?: string;\n\n  /**\n   * Optional field note text can be added to provide additional field guidance.\n   * @attr {string}\n   */\n  @property()\n  fieldNote?: string;\n\n  /**\n   * Used to connect the field note in text field to the text menu for accessibility\n   * @attr {string}\n   */\n  @property()\n  ariaDescribedBy?: string;\n\n  /**\n   * Additional aria-describedby connection to id for additional success and error notes to be accessible\n   * @attr {string}\n   */\n  @property()\n  validationAriaDescribedBy?: string;\n\n  /**\n   * The required attribute on the select\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\n\n  /**\n   * The disabled attribute on the select\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  /**\n   * Changes the component's treatment to represent an error state\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isError?: boolean;\n\n  /**\n   * The error field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  errorNote?: string;\n\n  /**\n   * Changes the component's treatment to represent a success state\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isSuccess?: boolean;\n\n  /**\n   * The success field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  successNote?: string;\n\n  /**\n   * Select input querySelector\n   */\n\n\n\n  /**\n   * Get all select option elements\n   */\n  @queryAll('option')\n  _selectOptions: HTMLOptionsCollection;\n\n\n  /**\n   * Selected item value\n   */\n  private selectedItem: string;\n\n  /**\n   * Initialize aria attributes\n   */\n  private _initializeAria() {\n    this.fieldId = this.fieldId || nanoid();\n    if (this.fieldNote || this.slotNotEmpty('fieldNote')) {\n      this.ariaDescribedBy = this.ariaDescribedBy || nanoid();\n    }\n    if (this.successNote || this.errorNote) {\n      this.validationAriaDescribedBy = this.validationAriaDescribedBy || nanoid();\n    }\n  }\n\n  /**\n   * Aria describedby string based on field notes and error/success notes\n   * 1) If both validationAriaDescribedBy (error/success note) and field note exists,\n   * render both in the input's `aria-describedby` attribute\n   * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as\n   * the `aria-describedby` attribute (input without field note initially, but then error/success is added).\n   * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)\n   */\n  private _fieldNoteAria() {\n    if (this.validationAriaDescribedBy && this.ariaDescribedBy) {\n      return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */\n    }\n    if (this.validationAriaDescribedBy && (!this.ariaDescribedBy)) {\n      return this.validationAriaDescribedBy; /* 2 */\n    }\n    return this.ariaDescribedBy; /* 3 */\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.field.setAttribute('name', this.name ?? '')\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n  /**\n   * First updatedLifecycle\n   * 1) Get the option in the items array with selected set to true. Set that as the selected item\n   * 2) The default value is set to the `option` with the `selected` if one exists. Otherwise, use the\n   * select the first item value like the native select.\n   */\n  firstUpdated() {\n    super.firstUpdated();\n    [...this._selectOptions].forEach((item: { selected: boolean; value: string; }) => { /* 1 */\n      if (item.selected === true) {\n        this.selectedItem = item.value; /* 1 */\n      }\n    });\n    this.defaultValue = this.selectedItem ? this.selectedItem : (this._selectOptions[0].value ?? 'Select An Option'); /* 2 */\n    this._setFormData();\n    this._initializeAria();\n    this.updateField();\n  }\n\n  /**\n * Set form data\n * 1) Set the element internals to the selected item value if it exists,\n *    otherwise the default selected item is the first one\n */\n  private _setFormData() {\n    if (this.selectedItem) {\n      return this._internals?.setFormValue(this.selectedItem);\n    }\n    return this._internals?.setFormValue(this.defaultValue.toString());\n  }\n\n  /**\n   * Handle On Change\n   * 1. Set the value when the select is changed.\n   * 2. Fire the custom event with the current value.\n   */\n  private _handleOnChange(e: Event) {\n    /* 1 */\n    const target = e.target as HTMLSelectElement;\n    this.value = target.options[target.selectedIndex].value;\n    this._internals.setFormValue(this.value);\n\n\n    /* 2 */\n    const customEvent = new CustomEvent('change', {\n      detail: {\n        name: this.name,\n        value: this.value,\n      },\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(customEvent);\n  }\n\n  /**\n   * Render the select options\n   */\n  private _renderSelectOptions() {\n    return this.items.map((item: Cre8SelectOption | Cre8SelectOptionGroup) => {\n      if ('options' in item) {\n        const selectedGroup = item.options.map((option: Cre8SelectOption) => html`\n                  <option value=\"${option.value}\">${option.label}</option>\n              `);\n        return html`<optgroup label=\"${item.optGroupLabel}\">\n          ${selectedGroup}\n        </optgroup>`;\n      }\n      return html`<option value=\"${item.value}\">${item.label}</option>`;\n    });\n  }\n\n  /**\n   * Render the success or error field notes\n   * 1. If there is a successNote, then return the field note with the success message and state.\n   * 2. If there is a errorNote, then return the field note with the error message and state.\n   */\n  private _renderSuccessErrorFieldNote() {\n    if (this.successNote) {\n      /* 1 */\n      return html`\n        <cre8-field-note\n          ?isSuccess=${this.isSuccess}\n          id=${this.validationAriaDescribedBy}\n          class=\"cre8-c-select__field-note-success\"\n          iconName=\"success\"\n        >\n          ${this.successNote}\n        </cre8-field-note>`;\n    }\n    if (this.errorNote) {\n      /* 2 */\n      return html`\n        <cre8-field-note\n          ?isError=${this.isError}\n          id=${this.validationAriaDescribedBy}\n          class=\"cre8-c-select__field-note-error\"\n          iconName=\"error-alt\"\n        >\n          ${this.errorNote}\n        </cre8-field-note>`;\n    }\n    return null;\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames('cre8-c-select', {\n      'cre8-is-error': this.isError,\n      'cre8-is-success': this.isSuccess,\n    });\n\n    return html`\n      <div class=\"${componentClassNames}\">\n        <label class=\"cre8-c-select__label\" for=\"${this.fieldId}\">${this.label}</label>\n        <div class=\"cre8-c-select__body\">\n          <select\n            class=\"cre8-c-select__input\"\n            id=${this.fieldId}\n            name=${ifDefined(this.name)}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            aria-describedby=\"${ifDefined(this._fieldNoteAria())}\"\n            @change=${this._handleOnChange}\n          >\n            ${this._renderSelectOptions()}\n          </select>\n          <div class=\"cre8-c-select__icons\">\n            <cre8-icon svg='${svgCaretUp}' rotate=\"180\" class=\"cre8-c-select__icon-arrow\" aria-hidden='true'>\n          </div>\n        </div>\n      </div>\n      ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`\n          <cre8-field-note\n            id=${this.ariaDescribedBy}\n            class=\"cre8-c-select__field-note\"\n          ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note>`\n        : nothing}\n      ${this._renderSuccessErrorFieldNote()}\n    `;\n  }\n}\n\nif (customElements.get('cre8-select') === undefined) {\n  customElements.define('cre8-select', Cre8Select);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-select': Cre8Select;\n  }\n}\n"]}

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import svgCheck from '@tmorrow/cre8-wc/icons/System/Regular/Check.svg?raw';
+import svgCheck from '@tmorrow/cre8-wc/icons/Check.svg?raw';
 import { LitElement, html, } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';

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":"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","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/table-row/table-row.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import svgCaretUp from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';
+import svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';
 import { html, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Cre8Element } from '../cre8-element';

package/lib/components/table-row/table-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-row.js","sourceRoot":"","sources":["../../../components/table-row/table-row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,wDAAwD,CAAC;AAChF,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAC;AAElC;;GAEG;AAEH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QAmCE;;WAEG;QAEC,uBAAkB,GAAW,oBAAoB,CAAC;QAEtD;;WAEG;QAEC,wBAAmB,GAAW,kBAAkB,CAAC;IAgCvD,CAAC;IA1EG,gBAAgB;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;QACnC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAC3C,CAAC;IACL,CAAC;IAqCH,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE;YACtE,+BAA+B,EAAE,IAAI,CAAC,YAAY;YAClD,yBAAyB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAClD,kBAAkB,EAAE,IAAI,CAAC,UAAU;SACtC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;8BACa,mBAAmB;UACvC,IAAI,CAAC,YAAY;YACnB,CAAC,CAAC,IAAI,CAAA;;;gCAGkB,CAAC,CAAC,IAAI,CAAC,UAAU;yBACxB,IAAI,CAAC,gBAAgB;;;oBAG1B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB;;kCAEtD,UAAU;;+BAEb;YACvB,CAAC,CAAC,EAAE;UACF,IAAI,CAAA,eAAe;;QAErB,IAAI,CAAC,YAAY;YACjB,CAAC,CAAC,IAAI,CAAA,+FAA+F;YACrG,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;;AA3EQ,mBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAevB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAClB;AAMrB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAChB;AAWvB;IADH,QAAQ,EAAE;6CACU;AAMjB;IADH,QAAQ,EAAE;wDAC2C;AAMlD;IADH,QAAQ,EAAE;yDAC0C;AAkCvD,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAC1D,CAAC;AAQD,eAAe,YAAY,CAAC","sourcesContent":["import svgCaretUp from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './table-row.styles.js';\nimport '../button/button';\nimport '../table-cell/table-cell';\n\n/**\n * @slot - The component content\n */\n\nexport class Cre8TableRow extends Cre8Element {\n    static styles = [styles];\n\n    toggleIsExpanded() {\n        this.isExpanded = !this.isExpanded;\n        if (this.classList.contains('cre8-is-expanded')) {\n            this.classList.remove('cre8-is-expanded');\n        } else {\n            this.classList.add('cre8-is-expanded');\n        }\n    }\n\n  /**\n   * Visually show additional expandable content\n   */\n  @property({ type: Boolean, reflect: true })\n      isExpanded?: boolean;\n\n  /**\n   * Indicates row has additional visually hidden related content\n   */\n  @property({ type: Boolean, reflect: true })\n      isExpandable?: boolean;\n\n  /**\n   * Style variants\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**bare** renders a table row without a border</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      variant?: 'bare';\n\n  /**\n   * Expanded button text\n   */\n  @property()\n      expandedButtonText: string = 'Collapse Table Row';\n\n  /**\n   * Expand button text\n   */\n  @property()\n      collapsedButtonText: string = 'Expand Table Row';\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-table__row', {\n          'cre8-c-table__row--expandable': this.isExpandable,\n          'cre8-c-table__row--bare': this.variant === 'bare',\n          'cre8-is-expanded': this.isExpanded,\n      });\n\n      return html`\n      <tr role=\"row\" class=\"${componentClassNames}\">\n        ${this.isExpandable\n        ? html`<cre8-table-cell>\n              <button\n                class=\"cre8-c-table__expand-button\" \n                aria-expanded=${!!this.isExpanded}\n                @click=${this.toggleIsExpanded}\n              >\n                <span class=\"cre8-c-table__expand-button-text\">\n                  ${this.isExpanded ? this.expandedButtonText : this.collapsedButtonText}\n                </span>\n                <cre8-icon svg='${svgCaretUp}' rotate=\"90\" class=\"cre8-c-table__expand-button-icon\"></cre8-icon>\n              </button>\n            </cre8-table-cell>`\n        : ''}\n        ${html`<slot></slot>`}\n      </tr>\n      ${this.isExpandable\n        ? html` <slot class=\"cre8-c-table__expandable-content\" name=\"expandableContent\"><slot></slot></slot>`\n        : ''}\n    `;\n  }\n}\n\nif (customElements.get('cre8-table-row') === undefined) {\n    customElements.define('cre8-table-row', Cre8TableRow);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-table-row': Cre8TableRow;\n  }\n}\n\nexport default Cre8TableRow;\n"]}
+{"version":3,"file":"table-row.js","sourceRoot":"","sources":["../../../components/table-row/table-row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,yCAAyC,CAAC;AACjE,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAC;AAElC;;GAEG;AAEH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QAmCE;;WAEG;QAEC,uBAAkB,GAAW,oBAAoB,CAAC;QAEtD;;WAEG;QAEC,wBAAmB,GAAW,kBAAkB,CAAC;IAgCvD,CAAC;IA1EG,gBAAgB;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;QACnC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAC3C,CAAC;IACL,CAAC;IAqCH,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE;YACtE,+BAA+B,EAAE,IAAI,CAAC,YAAY;YAClD,yBAAyB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAClD,kBAAkB,EAAE,IAAI,CAAC,UAAU;SACtC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;8BACa,mBAAmB;UACvC,IAAI,CAAC,YAAY;YACnB,CAAC,CAAC,IAAI,CAAA;;;gCAGkB,CAAC,CAAC,IAAI,CAAC,UAAU;yBACxB,IAAI,CAAC,gBAAgB;;;oBAG1B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB;;kCAEtD,UAAU;;+BAEb;YACvB,CAAC,CAAC,EAAE;UACF,IAAI,CAAA,eAAe;;QAErB,IAAI,CAAC,YAAY;YACjB,CAAC,CAAC,IAAI,CAAA,+FAA+F;YACrG,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;;AA3EQ,mBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAevB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAClB;AAMrB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAChB;AAWvB;IADH,QAAQ,EAAE;6CACU;AAMjB;IADH,QAAQ,EAAE;wDAC2C;AAMlD;IADH,QAAQ,EAAE;yDAC0C;AAkCvD,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAC1D,CAAC;AAQD,eAAe,YAAY,CAAC","sourcesContent":["import svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './table-row.styles.js';\nimport '../button/button';\nimport '../table-cell/table-cell';\n\n/**\n * @slot - The component content\n */\n\nexport class Cre8TableRow extends Cre8Element {\n    static styles = [styles];\n\n    toggleIsExpanded() {\n        this.isExpanded = !this.isExpanded;\n        if (this.classList.contains('cre8-is-expanded')) {\n            this.classList.remove('cre8-is-expanded');\n        } else {\n            this.classList.add('cre8-is-expanded');\n        }\n    }\n\n  /**\n   * Visually show additional expandable content\n   */\n  @property({ type: Boolean, reflect: true })\n      isExpanded?: boolean;\n\n  /**\n   * Indicates row has additional visually hidden related content\n   */\n  @property({ type: Boolean, reflect: true })\n      isExpandable?: boolean;\n\n  /**\n   * Style variants\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**bare** renders a table row without a border</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      variant?: 'bare';\n\n  /**\n   * Expanded button text\n   */\n  @property()\n      expandedButtonText: string = 'Collapse Table Row';\n\n  /**\n   * Expand button text\n   */\n  @property()\n      collapsedButtonText: string = 'Expand Table Row';\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-table__row', {\n          'cre8-c-table__row--expandable': this.isExpandable,\n          'cre8-c-table__row--bare': this.variant === 'bare',\n          'cre8-is-expanded': this.isExpanded,\n      });\n\n      return html`\n      <tr role=\"row\" class=\"${componentClassNames}\">\n        ${this.isExpandable\n        ? html`<cre8-table-cell>\n              <button\n                class=\"cre8-c-table__expand-button\" \n                aria-expanded=${!!this.isExpanded}\n                @click=${this.toggleIsExpanded}\n              >\n                <span class=\"cre8-c-table__expand-button-text\">\n                  ${this.isExpanded ? this.expandedButtonText : this.collapsedButtonText}\n                </span>\n                <cre8-icon svg='${svgCaretUp}' rotate=\"90\" class=\"cre8-c-table__expand-button-icon\"></cre8-icon>\n              </button>\n            </cre8-table-cell>`\n        : ''}\n        ${html`<slot></slot>`}\n      </tr>\n      ${this.isExpandable\n        ? html` <slot class=\"cre8-c-table__expandable-content\" name=\"expandableContent\"><slot></slot></slot>`\n        : ''}\n    `;\n  }\n}\n\nif (customElements.get('cre8-table-row') === undefined) {\n    customElements.define('cre8-table-row', Cre8TableRow);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-table-row': Cre8TableRow;\n  }\n}\n\nexport default Cre8TableRow;\n"]}

package/lib/components/tag/tag.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import svgCheck from '@tmorrow/cre8-wc/icons/System/Regular/Check.svg?raw';
+import svgCheck from '@tmorrow/cre8-wc/icons/Check.svg?raw';
 import { html, } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { nanoid } from 'nanoid';

package/lib/components/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../components/tag/tag.ts"],"names":[],"mappings":"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","sourcesContent":["import svgCheck from '@tmorrow/cre8-wc/icons/System/Regular/Check.svg?raw';\nimport { html,  } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../icon/icon';\nimport styles from './tag.styles.js';\n\n/**\n * The tag component allows you to make selections, filter content, or trigger actions. While buttons are\n * expected to appear consistently and with familiar calls to actions, tags should appear dynamically\n * as a group of multiple interactions elements. It is a flexible\n * component that comes in the following types:\n *  - **radio**  Clicking a Radio Button causes it to change color. These tags only allow\n * one option to be chosen and can be used in place of radio button when they need to be listed\n * horizontally\n *\n *  - **checkbox** It allows for selecting options, It can be toggled on and off.\n */\n\nexport class Cre8Tag extends Cre8FormElement {\n    static styles = [styles];\n\n  @property()\n      text: string;\n\n  /**\n   * Type of tag\n   * **checkbox** renders a checkbox tag\n   ***radio** renders a radio tag\n   */\n\n  @property()\n      type: 'checkbox'| 'radio';\n\n  /**\n   * Color variant\n   * **neutral** renders the default, unselected tag\n   * **branded** renders a selected tag\n   * **neutral-hybrid** renders a tag when mouse is hovering tag\n   */\n\n  @property()\n      variant: 'neutral' | 'branded' | 'neutral-hybrid' = 'neutral';\n\n  /**\n   * shape of the tag, supports square and round, and default not mentioned its a square\n   */\n  @property()\n      shape: 'square' | 'round' = 'square';\n\n  /*\n  * Disabled attribute\n  * renders a greyed out tag that the user cannot interact with\n  */\n  @property({ type: Boolean })\n      isDisabled?: boolean;\n\n  /*\n  * Selected attribute\n  * renders a selected tag\n  */\n  @property({ type: Boolean })\n      isSelected?: boolean;\n\n  /**\n  * Get the radio field item input\n  */\n  @query('input')\n      field!: HTMLInputElement;\n\n  /**\n   * The fieldId attribute is assigned to the HTML input element of the radio button and the for attribute of the\n   * corresponding label.\n   */\n  @property()\n      fieldId?: string;\n\n  /**\n  * Initial checked for initial checked state\n  */\n  private initialSelected?: boolean;\n\n  connectedCallback() {\n      super.connectedCallback();\n      this.fieldId = this.fieldId || nanoid();\n      window.addEventListener('click', this._clickCheckHandler, false);\n      window.addEventListener('click', this._clickRadioHandler, false);\n      window.addEventListener('keydown', this._handleCheckKeyDown, false);\n      window.addEventListener('keydown', this.handleRadioKeyDown, false);\n  }\n\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      window.removeEventListener('click', this._clickCheckHandler, false);\n      window.removeEventListener('click', this._clickRadioHandler, false);\n      window.removeEventListener('keydown', this._handleCheckKeyDown, false);\n      window.removeEventListener('keydown', this.handleRadioKeyDown, false);\n  }\n\n  renderCheckboxIcon() {\n      if (this.type === 'checkbox' && this.isSelected) {\n          return html`\n    <cre8-icon svg=\"${svgCheck}\" class=\"cre8-tag-icon\" aria-hidden=\"true\"></cre8-icon>\n     `;\n      }\n      return null;\n  }\n\n  private _clickCheckHandler() {\n      if (!this.isDisabled) {\n          if (this.type === 'checkbox') {\n              this.isSelected = !this.isSelected;\n          }\n          this.dispatchEvent(new CustomEvent('change', { detail: { isSelected: this.isSelected, type: this.type } }));\n      }\n  }\n\n  private _handleCheckKeyDown(event: KeyboardEvent) {\n      if (event.key === ' ' || event.key === 'Enter') {\n          event.preventDefault();\n          this._clickCheckHandler();\n      }\n  }\n\n/**\n* Reset the radio tag field\n*/\n  public resetField() {\n      this._internals.setFormValue(null);\n  }\n\n/**\n* Reset the radio field tags tab indeces\n*/\n  resetTabIndeces(tags: Cre8Tag[]) {\n      tags.forEach((element: HTMLElement) => {\n          element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '0');\n      });\n  }\n\n/**\n* Remove checked\n* 1) Remove checked property from all tags and set tabindex to -1\n* 2) Reset the form field to not checked\n*/\n  private _removeChecked() {\n      if (this.parentNode) {\n      /* 1 */\n          const tags = this.parentNode.querySelectorAll('cre8-tag');\n          tags.forEach((element: Cre8Tag) => {\n              element.isSelected = false;\n              element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '-1');\n              element.resetField();\n          });\n      }\n  }\n\n/**\n* Reset form callback\n* 1) Remove the checked state from all radio tags\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._removeChecked();\n      this.isSelected = this.initialSelected;\n      this.field.checked = this.initialSelected;\n  }\n\n  private _clickRadioHandler() {\n      this._removeChecked();\n      this.isSelected = !this.isSelected;\n      const tagInput = this.shadowRoot?.querySelector<HTMLInputElement>('.cre8-c-tag');\n      if (tagInput) {\n          tagInput.setAttribute('tabindex', '0');\n      }\n      if (this.isSelected) {\n          this._internals.setFormValue(this.value || 'on');\n      } else {\n          this._internals.setFormValue(null);\n      }\n  }\n\n  private _updateSibling(event: KeyboardEvent, sibling: Element, element: HTMLElement) {\n      event.preventDefault();\n      this._removeChecked();\n      element.focus();\n      element.setAttribute('tabindex', '0');\n      sibling.setAttribute('isSelected', '');\n  }\n\n  private _checkPreviousTag(event: KeyboardEvent) {\n      let previous = this.previousElementSibling;\n      while (previous) {\n          const previousElement = previous?.shadowRoot?.querySelector<HTMLInputElement>(\n              '.cre8-c-tag:not([aria-disabled=\"true\"])'\n          );\n\n          if (previousElement) {\n              this._updateSibling(event, previous, previousElement);\n              return;\n          }\n\n          previous = previous.previousElementSibling;\n      }\n  }\n\n  private _checkNextTag(event: KeyboardEvent) {\n      let next = this.nextElementSibling;\n      while (next) {\n          const nextElement = next?.shadowRoot?.querySelector<HTMLInputElement>(\n              '.cre8-c-tag:not([aria-disabled=\"true\"])'\n          );\n\n          if (nextElement) {\n              this._updateSibling(event, next, nextElement);\n              return;\n          }\n\n          next = next.nextElementSibling;\n      }\n  }\n\n  handleRadioKeyDown(event: KeyboardEvent) {\n      if (event.code === 'ArrowLeft' || event.code === 'ArrowUp') {\n          this._checkPreviousTag(event);\n      } else if (event.code === 'ArrowRight' || event.code === 'ArrowDown') {\n          this._checkNextTag(event);\n      } else if (event.code === 'Tab' && !this.isSelected) {\n          const tags = this.parentNode.querySelectorAll('cre8-tag');\n          tags.forEach((element: HTMLElement) => {\n              element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '-1');\n          });\n\n      // After making tabbing away from the fieldset,\n      // reset the items to be tabbable again so the user can come back to the fieldset\n          setTimeout(this.resetTabIndeces, 100, tags);\n      }\n  }\n\n  /**\n  * access role when tag embedded in tag-list\n  */\n  private _getRole(): 'listitem' | undefined {\n      const tagContainer = this.closest('cre8-tag-list');\n      if (tagContainer) {\n          return 'listitem';\n      }\n      return undefined;\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tag', {\n          [`cre8-c-tag--${this.type}`]: true,\n          [`cre8-c-tag--${this.shape}`]: true,\n          [`cre8-c-tag--${this.variant}`]: true,\n          [`cre8-c-tag--${this.variant}-selected`]: this.isSelected,\n          'cre8-c-tag--disabled': this.isDisabled,\n      });\n\n      const isSelected = this.isSelected === true || this.initialSelected === true;\n\n      return html` \n        <div role=\"${ifDefined(this._getRole())}\">\n            <div role=\"${ifDefined(this.type)}\" aria-checked=\"${isSelected}\" class=\"${componentClassNames}\"\n                aria-disabled=\"${ifDefined(this.isDisabled)}\"\n                @click=\"${this.type === 'radio' ? this._clickRadioHandler : this._clickCheckHandler}\"\n                @keydown=\"${this.type === 'radio' ? this.handleRadioKeyDown : this._handleCheckKeyDown}\"\n                tabindex=\"0\"\n            >\n                ${this.renderCheckboxIcon()}\n                <label \n                    @input=\"${this.type === 'radio' ? this._clickRadioHandler : this._clickCheckHandler}\"\n                    for=\"${this.fieldId}\" class=\"cre8-tag-text\">${this.text}\n                </label>\n            </div>\n            <input\n                class=\"cre8-c-tag__input\" \n                type=\"${this.type}\"\n                id=\"${this.fieldId}\"\n                name=${this.text}\n                .value=\"${this.text}\"\n                ?disabled=\"${this.isDisabled}\"\n                .checked = \"${isSelected}\"\n            />\n        </div>\n  `;\n  }\n}\n\nif (customElements.get('cre8-tag') === undefined) {\n    customElements.define('cre8-tag', Cre8Tag);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tag': Cre8Tag;\n  }\n}\n\nexport default Cre8Tag;\n"]}
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../components/tag/tag.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAQ,MAAM,sCAAsC,CAAC;AAC5D,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;;;;;;;;;GAUG;AAEH,MAAM,OAAO,OAAQ,SAAQ,eAAe;IAA5C;;QAeE;;;;;WAKG;QAGC,YAAO,GAA6C,SAAS,CAAC;QAElE;;WAEG;QAEC,UAAK,GAAuB,QAAQ,CAAC;IAgP3C,CAAC;IA9MC,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;QACxC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;QACjE,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;QACjE,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;QACpE,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;IACvE,CAAC;IAED,oBAAoB;QAChB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;QACpE,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;QACpE,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;QACvE,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;IAC1E,CAAC;IAED,kBAAkB;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAC9C,OAAO,IAAI,CAAA;sBACC,QAAQ;MACxB,CAAC;QACD,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAEO,kBAAkB;QACtB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;gBAC3B,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;YACvC,CAAC;YACD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;QAChH,CAAC;IACL,CAAC;IAEO,mBAAmB,CAAC,KAAoB;QAC5C,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC9B,CAAC;IACL,CAAC;IAEH;;MAEE;IACO,UAAU;QACb,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC;IAEH;;MAEE;IACA,eAAe,CAAC,IAAe;QAC3B,IAAI,CAAC,OAAO,CAAC,CAAC,OAAoB,EAAE,EAAE;YAClC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAClF,CAAC,CAAC,CAAC;IACP,CAAC;IAEH;;;;MAIE;IACQ,cAAc;QAClB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACtB,OAAO;YACH,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;YAC1D,IAAI,CAAC,OAAO,CAAC,CAAC,OAAgB,EAAE,EAAE;gBAC9B,OAAO,CAAC,UAAU,GAAG,KAAK,CAAC;gBAC3B,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;gBAC/E,OAAO,CAAC,UAAU,EAAE,CAAC;YACzB,CAAC,CAAC,CAAC;QACP,CAAC;IACL,CAAC;IAEH;;;;;MAKE;IACA,iBAAiB;QACb,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC;QACvC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;IAC9C,CAAC;IAEO,kBAAkB;QACtB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAmB,aAAa,CAAC,CAAC;QACjF,IAAI,QAAQ,EAAE,CAAC;YACX,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAC3C,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;QACrD,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACvC,CAAC;IACL,CAAC;IAEO,cAAc,CAAC,KAAoB,EAAE,OAAgB,EAAE,OAAoB;QAC/E,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,OAAO,CAAC,KAAK,EAAE,CAAC;QAChB,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACtC,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;IAC3C,CAAC;IAEO,iBAAiB,CAAC,KAAoB;QAC1C,IAAI,QAAQ,GAAG,IAAI,CAAC,sBAAsB,CAAC;QAC3C,OAAO,QAAQ,EAAE,CAAC;YACd,MAAM,eAAe,GAAG,QAAQ,EAAE,UAAU,EAAE,aAAa,CACvD,yCAAyC,CAC5C,CAAC;YAEF,IAAI,eAAe,EAAE,CAAC;gBAClB,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;gBACtD,OAAO;YACX,CAAC;YAED,QAAQ,GAAG,QAAQ,CAAC,sBAAsB,CAAC;QAC/C,CAAC;IACL,CAAC;IAEO,aAAa,CAAC,KAAoB;QACtC,IAAI,IAAI,GAAG,IAAI,CAAC,kBAAkB,CAAC;QACnC,OAAO,IAAI,EAAE,CAAC;YACV,MAAM,WAAW,GAAG,IAAI,EAAE,UAAU,EAAE,aAAa,CAC/C,yCAAyC,CAC5C,CAAC;YAEF,IAAI,WAAW,EAAE,CAAC;gBACd,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC;gBAC9C,OAAO;YACX,CAAC;YAED,IAAI,GAAG,IAAI,CAAC,kBAAkB,CAAC;QACnC,CAAC;IACL,CAAC;IAED,kBAAkB,CAAC,KAAoB;QACnC,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YACzD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;aAAM,IAAI,KAAK,CAAC,IAAI,KAAK,YAAY,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;YACnE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;aAAM,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YAClD,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;YAC1D,IAAI,CAAC,OAAO,CAAC,CAAC,OAAoB,EAAE,EAAE;gBAClC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;YACnF,CAAC,CAAC,CAAC;YAEP,+CAA+C;YAC/C,iFAAiF;YAC7E,UAAU,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;QAChD,CAAC;IACL,CAAC;IAED;;MAEE;IACM,QAAQ;QACZ,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACnD,IAAI,YAAY,EAAE,CAAC;YACf,OAAO,UAAU,CAAC;QACtB,CAAC;QACD,OAAO,SAAS,CAAC;IACrB,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE;YAC/D,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAClC,CAAC,eAAe,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;YACnC,CAAC,eAAe,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,eAAe,IAAI,CAAC,OAAO,WAAW,CAAC,EAAE,IAAI,CAAC,UAAU;YACzD,sBAAsB,EAAE,IAAI,CAAC,UAAU;SAC1C,CAAC,CAAC;QAEH,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC;QAE7E,OAAO,IAAI,CAAA;qBACI,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;yBACtB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,UAAU,YAAY,mBAAmB;iCACxE,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;0BACjC,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB;4BACvE,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB;;;kBAGpF,IAAI,CAAC,kBAAkB,EAAE;;8BAEb,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB;2BAC5E,IAAI,CAAC,OAAO,2BAA2B,IAAI,CAAC,IAAI;;;;;wBAKnD,IAAI,CAAC,IAAI;sBACX,IAAI,CAAC,OAAO;uBACX,IAAI,CAAC,IAAI;0BACN,IAAI,CAAC,IAAI;6BACN,IAAI,CAAC,UAAU;8BACd,UAAU;;;GAGrC,CAAC;IACF,CAAC;;AA3QQ,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGvB;IADH,QAAQ,EAAE;qCACM;AASb;IADH,QAAQ,EAAE;qCACmB;AAU1B;IADH,QAAQ,EAAE;wCACuD;AAM9D;IADH,QAAQ,EAAE;sCAC8B;AAOrC;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACH;AAOrB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACH;AAMrB;IADH,KAAK,CAAC,OAAO,CAAC;sCACc;AAOzB;IADH,QAAQ,EAAE;wCACU;AAuNvB,IAAI,cAAc,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,SAAS,EAAE,CAAC;IAC/C,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAC/C,CAAC;AAQD,eAAe,OAAO,CAAC","sourcesContent":["import svgCheck from '@tmorrow/cre8-wc/icons/Check.svg?raw';\nimport { html,  } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../icon/icon';\nimport styles from './tag.styles.js';\n\n/**\n * The tag component allows you to make selections, filter content, or trigger actions. While buttons are\n * expected to appear consistently and with familiar calls to actions, tags should appear dynamically\n * as a group of multiple interactions elements. It is a flexible\n * component that comes in the following types:\n *  - **radio**  Clicking a Radio Button causes it to change color. These tags only allow\n * one option to be chosen and can be used in place of radio button when they need to be listed\n * horizontally\n *\n *  - **checkbox** It allows for selecting options, It can be toggled on and off.\n */\n\nexport class Cre8Tag extends Cre8FormElement {\n    static styles = [styles];\n\n  @property()\n      text: string;\n\n  /**\n   * Type of tag\n   * **checkbox** renders a checkbox tag\n   ***radio** renders a radio tag\n   */\n\n  @property()\n      type: 'checkbox'| 'radio';\n\n  /**\n   * Color variant\n   * **neutral** renders the default, unselected tag\n   * **branded** renders a selected tag\n   * **neutral-hybrid** renders a tag when mouse is hovering tag\n   */\n\n  @property()\n      variant: 'neutral' | 'branded' | 'neutral-hybrid' = 'neutral';\n\n  /**\n   * shape of the tag, supports square and round, and default not mentioned its a square\n   */\n  @property()\n      shape: 'square' | 'round' = 'square';\n\n  /*\n  * Disabled attribute\n  * renders a greyed out tag that the user cannot interact with\n  */\n  @property({ type: Boolean })\n      isDisabled?: boolean;\n\n  /*\n  * Selected attribute\n  * renders a selected tag\n  */\n  @property({ type: Boolean })\n      isSelected?: boolean;\n\n  /**\n  * Get the radio field item input\n  */\n  @query('input')\n      field!: HTMLInputElement;\n\n  /**\n   * The fieldId attribute is assigned to the HTML input element of the radio button and the for attribute of the\n   * corresponding label.\n   */\n  @property()\n      fieldId?: string;\n\n  /**\n  * Initial checked for initial checked state\n  */\n  private initialSelected?: boolean;\n\n  connectedCallback() {\n      super.connectedCallback();\n      this.fieldId = this.fieldId || nanoid();\n      window.addEventListener('click', this._clickCheckHandler, false);\n      window.addEventListener('click', this._clickRadioHandler, false);\n      window.addEventListener('keydown', this._handleCheckKeyDown, false);\n      window.addEventListener('keydown', this.handleRadioKeyDown, false);\n  }\n\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      window.removeEventListener('click', this._clickCheckHandler, false);\n      window.removeEventListener('click', this._clickRadioHandler, false);\n      window.removeEventListener('keydown', this._handleCheckKeyDown, false);\n      window.removeEventListener('keydown', this.handleRadioKeyDown, false);\n  }\n\n  renderCheckboxIcon() {\n      if (this.type === 'checkbox' && this.isSelected) {\n          return html`\n    <cre8-icon svg=\"${svgCheck}\" class=\"cre8-tag-icon\" aria-hidden=\"true\"></cre8-icon>\n     `;\n      }\n      return null;\n  }\n\n  private _clickCheckHandler() {\n      if (!this.isDisabled) {\n          if (this.type === 'checkbox') {\n              this.isSelected = !this.isSelected;\n          }\n          this.dispatchEvent(new CustomEvent('change', { detail: { isSelected: this.isSelected, type: this.type } }));\n      }\n  }\n\n  private _handleCheckKeyDown(event: KeyboardEvent) {\n      if (event.key === ' ' || event.key === 'Enter') {\n          event.preventDefault();\n          this._clickCheckHandler();\n      }\n  }\n\n/**\n* Reset the radio tag field\n*/\n  public resetField() {\n      this._internals.setFormValue(null);\n  }\n\n/**\n* Reset the radio field tags tab indeces\n*/\n  resetTabIndeces(tags: Cre8Tag[]) {\n      tags.forEach((element: HTMLElement) => {\n          element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '0');\n      });\n  }\n\n/**\n* Remove checked\n* 1) Remove checked property from all tags and set tabindex to -1\n* 2) Reset the form field to not checked\n*/\n  private _removeChecked() {\n      if (this.parentNode) {\n      /* 1 */\n          const tags = this.parentNode.querySelectorAll('cre8-tag');\n          tags.forEach((element: Cre8Tag) => {\n              element.isSelected = false;\n              element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '-1');\n              element.resetField();\n          });\n      }\n  }\n\n/**\n* Reset form callback\n* 1) Remove the checked state from all radio tags\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._removeChecked();\n      this.isSelected = this.initialSelected;\n      this.field.checked = this.initialSelected;\n  }\n\n  private _clickRadioHandler() {\n      this._removeChecked();\n      this.isSelected = !this.isSelected;\n      const tagInput = this.shadowRoot?.querySelector<HTMLInputElement>('.cre8-c-tag');\n      if (tagInput) {\n          tagInput.setAttribute('tabindex', '0');\n      }\n      if (this.isSelected) {\n          this._internals.setFormValue(this.value || 'on');\n      } else {\n          this._internals.setFormValue(null);\n      }\n  }\n\n  private _updateSibling(event: KeyboardEvent, sibling: Element, element: HTMLElement) {\n      event.preventDefault();\n      this._removeChecked();\n      element.focus();\n      element.setAttribute('tabindex', '0');\n      sibling.setAttribute('isSelected', '');\n  }\n\n  private _checkPreviousTag(event: KeyboardEvent) {\n      let previous = this.previousElementSibling;\n      while (previous) {\n          const previousElement = previous?.shadowRoot?.querySelector<HTMLInputElement>(\n              '.cre8-c-tag:not([aria-disabled=\"true\"])'\n          );\n\n          if (previousElement) {\n              this._updateSibling(event, previous, previousElement);\n              return;\n          }\n\n          previous = previous.previousElementSibling;\n      }\n  }\n\n  private _checkNextTag(event: KeyboardEvent) {\n      let next = this.nextElementSibling;\n      while (next) {\n          const nextElement = next?.shadowRoot?.querySelector<HTMLInputElement>(\n              '.cre8-c-tag:not([aria-disabled=\"true\"])'\n          );\n\n          if (nextElement) {\n              this._updateSibling(event, next, nextElement);\n              return;\n          }\n\n          next = next.nextElementSibling;\n      }\n  }\n\n  handleRadioKeyDown(event: KeyboardEvent) {\n      if (event.code === 'ArrowLeft' || event.code === 'ArrowUp') {\n          this._checkPreviousTag(event);\n      } else if (event.code === 'ArrowRight' || event.code === 'ArrowDown') {\n          this._checkNextTag(event);\n      } else if (event.code === 'Tab' && !this.isSelected) {\n          const tags = this.parentNode.querySelectorAll('cre8-tag');\n          tags.forEach((element: HTMLElement) => {\n              element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '-1');\n          });\n\n      // After making tabbing away from the fieldset,\n      // reset the items to be tabbable again so the user can come back to the fieldset\n          setTimeout(this.resetTabIndeces, 100, tags);\n      }\n  }\n\n  /**\n  * access role when tag embedded in tag-list\n  */\n  private _getRole(): 'listitem' | undefined {\n      const tagContainer = this.closest('cre8-tag-list');\n      if (tagContainer) {\n          return 'listitem';\n      }\n      return undefined;\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tag', {\n          [`cre8-c-tag--${this.type}`]: true,\n          [`cre8-c-tag--${this.shape}`]: true,\n          [`cre8-c-tag--${this.variant}`]: true,\n          [`cre8-c-tag--${this.variant}-selected`]: this.isSelected,\n          'cre8-c-tag--disabled': this.isDisabled,\n      });\n\n      const isSelected = this.isSelected === true || this.initialSelected === true;\n\n      return html` \n        <div role=\"${ifDefined(this._getRole())}\">\n            <div role=\"${ifDefined(this.type)}\" aria-checked=\"${isSelected}\" class=\"${componentClassNames}\"\n                aria-disabled=\"${ifDefined(this.isDisabled)}\"\n                @click=\"${this.type === 'radio' ? this._clickRadioHandler : this._clickCheckHandler}\"\n                @keydown=\"${this.type === 'radio' ? this.handleRadioKeyDown : this._handleCheckKeyDown}\"\n                tabindex=\"0\"\n            >\n                ${this.renderCheckboxIcon()}\n                <label \n                    @input=\"${this.type === 'radio' ? this._clickRadioHandler : this._clickCheckHandler}\"\n                    for=\"${this.fieldId}\" class=\"cre8-tag-text\">${this.text}\n                </label>\n            </div>\n            <input\n                class=\"cre8-c-tag__input\" \n                type=\"${this.type}\"\n                id=\"${this.fieldId}\"\n                name=${this.text}\n                .value=\"${this.text}\"\n                ?disabled=\"${this.isDisabled}\"\n                .checked = \"${isSelected}\"\n            />\n        </div>\n  `;\n  }\n}\n\nif (customElements.get('cre8-tag') === undefined) {\n    customElements.define('cre8-tag', Cre8Tag);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tag': Cre8Tag;\n  }\n}\n\nexport default Cre8Tag;\n"]}

package/lib/icons/Account.svg

@@ -0,0 +1,3 @@
+<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9093 14.4497C14.7389 12.4263 12.9352 10.9753 10.8303 10.2875C11.8715 9.66773 12.6804 8.72327 13.1329 7.59922C13.5854 6.47516 13.6563 5.23366 13.3349 4.06537C13.0135 2.89708 12.3174 1.86659 11.3537 1.13217C10.3899 0.397752 9.2117 0 8 0C6.7883 0 5.6101 0.397752 4.64633 1.13217C3.68257 1.86659 2.98653 2.89708 2.6651 4.06537C2.34368 5.23366 2.41464 6.47516 2.8671 7.59922C3.31955 8.72327 4.12848 9.66773 5.16965 10.2875C3.06476 10.9746 1.26112 12.4255 0.0907097 14.4497C0.0477887 14.5197 0.0193195 14.5975 0.00698187 14.6787C-0.00535579 14.7599 -0.00131202 14.8427 0.0188746 14.9223C0.0390612 15.0018 0.0749818 15.0766 0.124517 15.142C0.174052 15.2075 0.236198 15.2624 0.307289 15.3035C0.37838 15.3445 0.456975 15.3709 0.538437 15.3811C0.6199 15.3913 0.702579 15.3851 0.781598 15.3628C0.860616 15.3406 0.934373 15.3027 0.998516 15.2514C1.06266 15.2002 1.11589 15.1366 1.15507 15.0645C2.6029 12.5623 5.16197 11.0683 8 11.0683C10.838 11.0683 13.3971 12.5623 14.8449 15.0645C14.8841 15.1366 14.9373 15.2002 15.0015 15.2514C15.0656 15.3027 15.1394 15.3406 15.2184 15.3628C15.2974 15.3851 15.3801 15.3913 15.4616 15.3811C15.543 15.3709 15.6216 15.3445 15.6927 15.3035C15.7638 15.2624 15.8259 15.2075 15.8755 15.142C15.925 15.0766 15.9609 15.0018 15.9811 14.9223C16.0013 14.8427 16.0054 14.7599 15.993 14.6787C15.9807 14.5975 15.9522 14.5197 15.9093 14.4497ZM3.69646 5.53521C3.69646 4.68405 3.94886 3.85201 4.42174 3.14429C4.89462 2.43658 5.56674 1.88499 6.35311 1.55926C7.13948 1.23354 8.00478 1.14831 8.83958 1.31436C9.67438 1.48042 10.4412 1.89029 11.0431 2.49215C11.6449 3.09401 12.0548 3.86083 12.2208 4.69563C12.3869 5.53044 12.3017 6.39574 11.976 7.18211C11.6502 7.96848 11.0986 8.6406 10.3909 9.11347C9.6832 9.58635 8.85116 9.83875 8 9.83875C6.85901 9.83753 5.76509 9.38373 4.95829 8.57693C4.15148 7.77012 3.69768 6.67621 3.69646 5.53521Z"/>
+</svg>

package/lib/icons/Account_Filled.svg

@@ -0,0 +1,3 @@
+<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9179 15.386C15.8639 15.4796 15.7862 15.5573 15.6926 15.6113C15.599 15.6653 15.4929 15.6937 15.3848 15.6937H0.614787C0.506812 15.6936 0.400767 15.6651 0.307299 15.611C0.213832 15.557 0.136232 15.4793 0.0822927 15.3857C0.0283531 15.2922 -2.77002e-05 15.1861 2.02871e-08 15.0781C2.77407e-05 14.9702 0.028463 14.8641 0.0824506 14.7706C1.25405 12.7451 3.05954 11.2927 5.16657 10.6042C4.12434 9.98374 3.31459 9.03832 2.86167 7.91312C2.40875 6.78792 2.33772 5.54515 2.65947 4.37567C2.98122 3.20618 3.67797 2.17465 4.64272 1.43948C5.60747 0.70431 6.78687 0.306152 7.99981 0.306152C9.21274 0.306152 10.3921 0.70431 11.3569 1.43948C12.3216 2.17465 13.0184 3.20618 13.3401 4.37567C13.6619 5.54515 13.5909 6.78792 13.1379 7.91312C12.685 9.03832 11.8753 9.98374 10.833 10.6042C12.9401 11.2927 14.7456 12.7451 15.9172 14.7706C15.9713 14.8641 15.9999 14.9702 16 15.0782C16.0001 15.1862 15.9718 15.2924 15.9179 15.386Z"/>
+</svg>

package/lib/icons/Arrow_-_Left.svg

@@ -0,0 +1,3 @@
+<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 8.00007C16 8.17688 15.9298 8.34644 15.8047 8.47146C15.6797 8.59648 15.5102 8.66672 15.3334 8.66672H2.27628L7.13862 13.5282C7.20056 13.5902 7.24969 13.6637 7.28322 13.7446C7.31674 13.8255 7.33399 13.9123 7.33399 13.9999C7.33399 14.0875 7.31674 14.1742 7.28322 14.2551C7.24969 14.3361 7.20056 14.4096 7.13862 14.4715C7.07669 14.5335 7.00315 14.5826 6.92223 14.6161C6.8413 14.6496 6.75457 14.6669 6.66697 14.6669C6.57938 14.6669 6.49264 14.6496 6.41172 14.6161C6.33079 14.5826 6.25726 14.5335 6.19532 14.4715L0.195518 8.47172C0.133536 8.40981 0.0843647 8.33629 0.0508163 8.25536C0.0172679 8.17443 0 8.08768 0 8.00007C0 7.91246 0.0172679 7.82572 0.0508163 7.74479C0.0843647 7.66386 0.133536 7.59033 0.195518 7.52842L6.19532 1.52862C6.32041 1.40353 6.49007 1.33325 6.66697 1.33325C6.84388 1.33325 7.01353 1.40353 7.13862 1.52862C7.26371 1.65371 7.33399 1.82336 7.33399 2.00027C7.33399 2.17717 7.26371 2.34683 7.13862 2.47192L2.27628 7.33343H15.3334C15.5102 7.33343 15.6797 7.40366 15.8047 7.52868C15.9298 7.6537 16 7.82327 16 8.00007Z"/>
+</svg>

package/lib/icons/Arrow_-_Left_Filled.svg

@@ -0,0 +1,3 @@
+<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346628 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9978 5.87895 15.1542 3.84542 13.6544 2.34562C12.1546 0.845814 10.121 0.00223986 8 0ZM11.0769 8.61538H6.40846L7.82 10.0262C7.87718 10.0833 7.92253 10.1512 7.95347 10.2259C7.98442 10.3006 8.00034 10.3807 8.00034 10.4615C8.00034 10.5424 7.98442 10.6225 7.95347 10.6972C7.92253 10.7719 7.87718 10.8397 7.82 10.8969C7.76283 10.9541 7.69495 10.9994 7.62025 11.0304C7.54554 11.0613 7.46548 11.0773 7.38462 11.0773C7.30376 11.0773 7.22369 11.0613 7.14899 11.0304C7.07429 10.9994 7.00641 10.9541 6.94923 10.8969L4.48769 8.43538C4.43048 8.37823 4.38509 8.31036 4.35412 8.23565C4.32315 8.16095 4.30721 8.08087 4.30721 8C4.30721 7.91913 4.32315 7.83905 4.35412 7.76434C4.38509 7.68964 4.43048 7.62177 4.48769 7.56461L6.94923 5.10308C7.0647 4.9876 7.22132 4.92273 7.38462 4.92273C7.54792 4.92273 7.70453 4.9876 7.82 5.10308C7.93547 5.21855 8.00034 5.37516 8.00034 5.53846C8.00034 5.70176 7.93547 5.85837 7.82 5.97385L6.40846 7.38461H11.0769C11.2401 7.38461 11.3967 7.44945 11.5121 7.56486C11.6275 7.68026 11.6923 7.83679 11.6923 8C11.6923 8.16321 11.6275 8.31973 11.5121 8.43514C11.3967 8.55055 11.2401 8.61538 11.0769 8.61538Z"/>
+</svg>

package/lib/icons/Caret_Double_Left.svg

@@ -0,0 +1,3 @@
+<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7869 14.7577C15.8544 14.8253 15.908 14.9055 15.9446 14.9937C15.9812 15.082 16 15.1766 16 15.2722C16 15.3678 15.9812 15.4624 15.9446 15.5507C15.908 15.6389 15.8544 15.7191 15.7869 15.7867C15.7193 15.8543 15.6391 15.9079 15.5508 15.9444C15.4625 15.981 15.3679 15.9998 15.2724 15.9998C15.1768 15.9998 15.0822 15.981 14.9939 15.9444C14.9056 15.9079 14.8254 15.8543 14.7579 15.7867L7.48557 8.51443C7.41795 8.44689 7.36432 8.36669 7.32772 8.2784C7.29112 8.19012 7.27228 8.09549 7.27228 7.99992C7.27228 7.90435 7.29112 7.80972 7.32772 7.72143C7.36432 7.63315 7.41795 7.55294 7.48557 7.4854L14.7579 0.213119C14.8943 0.076661 15.0794 -3.8041e-09 15.2724 0C15.4653 3.8041e-09 15.6504 0.076661 15.7869 0.213119C15.9233 0.349576 16 0.534653 16 0.727633C16 0.920613 15.9233 1.10569 15.7869 1.24215L9.0282 7.99992L15.7869 14.7577ZM1.75592 7.99992L8.5146 1.24215C8.65106 1.10569 8.72772 0.920613 8.72772 0.727633C8.72772 0.534653 8.65106 0.349576 8.5146 0.213119C8.37814 0.076661 8.19306 1.43782e-09 8.00008 0C7.8071 -1.43781e-09 7.62203 0.076661 7.48557 0.213119L0.213286 7.4854C0.145671 7.55294 0.0920317 7.63315 0.0554344 7.72143C0.0188371 7.80972 0 7.90435 0 7.99992C0 8.09549 0.0188371 8.19012 0.0554344 8.2784C0.0920317 8.36669 0.145671 8.44689 0.213286 8.51443L7.48557 15.7867C7.55314 15.8543 7.63335 15.9079 7.72163 15.9444C7.80991 15.981 7.90453 15.9998 8.00008 15.9998C8.09564 15.9998 8.19026 15.981 8.27854 15.9444C8.36682 15.9079 8.44703 15.8543 8.5146 15.7867C8.58217 15.7191 8.63576 15.6389 8.67233 15.5507C8.7089 15.4624 8.72772 15.3678 8.72772 15.2722C8.72772 15.1766 8.7089 15.082 8.67233 14.9937C8.63576 14.9055 8.58217 14.8253 8.5146 14.7577L1.75592 7.99992Z"/>
+</svg>

package/lib/icons/Caret_Double_Right.svg

@@ -0,0 +1,3 @@
+<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.51443 8.51443L1.24215 15.7867C1.10569 15.9232 0.920613 15.9998 0.727633 15.9998C0.534653 15.9998 0.349576 15.9232 0.213119 15.7867C0.076661 15.6503 3.8041e-09 15.4652 0 15.2722C-3.8041e-09 15.0792 0.076661 14.8941 0.213119 14.7577L6.9718 7.99992L0.213119 1.24215C0.076661 1.10569 0 0.920613 0 0.727633C0 0.534653 0.076661 0.349576 0.213119 0.213119C0.349576 0.076661 0.534653 0 0.727633 0C0.920613 0 1.10569 0.076661 1.24215 0.213119L8.51443 7.4854C8.58205 7.55294 8.63569 7.63315 8.67228 7.72143C8.70888 7.80972 8.72772 7.90435 8.72772 7.99992C8.72772 8.09549 8.70888 8.19012 8.67228 8.2784C8.63569 8.36669 8.58205 8.44689 8.51443 8.51443ZM15.7867 7.4854L8.51443 0.213119C8.37797 0.076661 8.1929 0 7.99992 0C7.80694 0 7.62186 0.076661 7.4854 0.213119C7.34894 0.349576 7.27228 0.534653 7.27228 0.727633C7.27228 0.920613 7.34894 1.10569 7.4854 1.24215L14.2441 7.99992L7.4854 14.7577C7.34894 14.8941 7.27228 15.0792 7.27228 15.2722C7.27228 15.4652 7.34894 15.6503 7.4854 15.7867C7.62186 15.9232 7.80694 15.9998 7.99992 15.9998C8.1929 15.9998 8.37797 15.9232 8.51443 15.7867L15.7867 8.51443C15.8543 8.44689 15.908 8.36669 15.9446 8.2784C15.9812 8.19012 16 8.09549 16 7.99992C16 7.90435 15.9812 7.80972 15.9446 7.72143C15.908 7.63315 15.8543 7.55294 15.7867 7.4854Z"/>
+</svg>

package/lib/icons/Caret_Down.svg

@@ -0,0 +1,3 @@
+<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7869 4.87827L8.51452 12.1506C8.44698 12.2182 8.36677 12.2719 8.27849 12.3085C8.1902 12.3451 8.09557 12.3639 8 12.3639C7.90443 12.3639 7.8098 12.3451 7.72151 12.3085C7.63323 12.2719 7.55302 12.2182 7.48548 12.1506L0.213121 4.87827C0.0766618 4.74181 0 4.55673 0 4.36375C0 4.17077 0.0766618 3.98569 0.213121 3.84923C0.34958 3.71277 0.534658 3.63611 0.72764 3.63611C0.920622 3.63611 1.1057 3.71277 1.24216 3.84923L8 10.608L14.7578 3.84923C14.8254 3.78166 14.9056 3.72806 14.9939 3.6915C15.0822 3.65493 15.1768 3.63611 15.2724 3.63611C15.3679 3.63611 15.4625 3.65493 15.5508 3.6915C15.6391 3.72806 15.7193 3.78166 15.7869 3.84923C15.8544 3.9168 15.908 3.99701 15.9446 4.08529C15.9812 4.17357 16 4.26819 16 4.36375C16 4.4593 15.9812 4.55392 15.9446 4.6422C15.908 4.73049 15.8544 4.8107 15.7869 4.87827Z"/>
+</svg>