npm - @tmorrow/cre8-wc - Versions diffs - 1.2.6 → 2.0.0 - Mend

@tmorrow/cre8-wc 1.2.6 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (190) hide show

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

	@@ -1 +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"]}
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/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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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/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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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/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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
1	+ {"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"]}