@internetarchive/elements 0.2.9 → 0.2.11
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.
- package/dist/src/elements/ia-button/ia-button.js +1 -1
- package/dist/src/elements/ia-button/ia-button.js.map +1 -1
- package/dist/src/elements/ia-otp-form/ia-otp-form.d.ts +1 -0
- package/dist/src/elements/ia-otp-form/ia-otp-form.d.ts.map +1 -1
- package/dist/src/elements/ia-otp-form/ia-otp-form.js +5 -23
- package/dist/src/elements/ia-otp-form/ia-otp-form.js.map +1 -1
- package/dist/src/elements/ia-sr-only-text/ia-sr-only-text.d.ts +10 -0
- package/dist/src/elements/ia-sr-only-text/ia-sr-only-text.d.ts.map +1 -0
- package/dist/src/elements/ia-sr-only-text/ia-sr-only-text.js +43 -0
- package/dist/src/elements/ia-sr-only-text/ia-sr-only-text.js.map +1 -0
- package/package.json +1 -1
|
@@ -300,7 +300,7 @@ let IAButton = class IAButton extends LitElement {
|
|
|
300
300
|
border-color: var(--ia-button-custom-border--);
|
|
301
301
|
}
|
|
302
302
|
|
|
303
|
-
button.custom:enabled:is(:hover, :focus, :active) {
|
|
303
|
+
button.custom:enabled:is(:hover, :focus, :active, .active) {
|
|
304
304
|
color: var(--ia-button-custom-active-text-color--);
|
|
305
305
|
background-color: var(--ia-button-custom-active-fill--);
|
|
306
306
|
border-color: var(--ia-button-custom-active-border--);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-button.js","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n html,\n LitElement,\n TemplateResult,\n CSSResultGroup,\n css,\n PropertyValues,\n render,\n} from 'lit';\nimport { msg } from '@lit/localize';\nimport { property, customElement } from 'lit/decorators.js';\nimport themeStyles from '@src/themes/theme-styles';\n\nimport '../ia-status-indicator/ia-status-indicator';\n\n/**\n * Renders a standardized button built off the ia-button styling and the activity indicator, with the option to show\n * a loading indicator instead of the text or to customize the text, and the ability to pass in any\n * function to run on click.\n *\n * Designed to behave exactly like a native type=\"submit\" or type=\"reset\" button if either type is supplied,\n * i.e. for an <ia-button type=\"submit\" @click=${doSideEffects}></ia-button>,\n * whether the form is submitted via enter or by clicking the button directly, the button will always\n * run doSideEffects() and then submit the form.\n */\n@customElement('ia-button')\nexport class IAButton extends LitElement {\n /* Which version of the button to display */\n @property({ type: String }) mode:\n | 'primary'\n | 'secondary'\n | 'danger'\n | 'warning'\n | 'disabled'\n | 'transparent'\n | 'custom'\n | 'link'\n | 'danger-link' = 'primary';\n\n /* Whether to show a loading indicator instead of the button */\n @property({ type: Boolean }) loading: boolean = false;\n\n /* Whether the button should be disabled, regardless of submission status */\n @property({ type: Boolean }) disabled: boolean = false;\n\n /* Optional text to include next to the loading indicator */\n @property({ type: String }) loadingText: string = '';\n\n /* Type of the button - defaults to 'button' to prevent form submission */\n @property({ type: String, reflect: true }) type:\n | 'button'\n | 'submit'\n | 'reset' = 'button';\n\n /* An optional href to wrap around the button */\n @property({ type: String }) href?: string;\n\n /* Whether to add a target=\"_blank\" to any wrapping link */\n @property({ type: Boolean }) openLinksNewTab: boolean = false;\n\n render(): TemplateResult {\n return html`\n ${this.href\n ? html`<a\n href=${this.href}\n target=${this.openLinksNewTab ? '_blank' : '_self'}\n >${this.buttonTemplate}</a\n >`\n : this.buttonTemplate}\n <slot name=\"hidden-button\"></slot>\n `;\n }\n\n protected willUpdate(changed: PropertyValues): void {\n if (changed.has('type')) {\n this.setButtonTypeEmulation();\n }\n }\n\n /* The native button to render */\n private get buttonTemplate(): TemplateResult {\n return html`\n <button\n part=\"button\"\n class=${this.mode}\n ?disabled=${this.disabled || this.loading}\n >\n ${this.buttonTextTemplate}\n </button>\n `;\n }\n\n /* The text to render within the button */\n private get buttonTextTemplate(): TemplateResult {\n return this.loading ? this.loadingStateTemplate : html`<slot></slot>`;\n }\n\n /* Content to render while button is loading */\n private get loadingStateTemplate(): TemplateResult {\n return html`\n <span class=\"loading-indicator\" alt=\"Loading indicator\">\n <ia-status-indicator mode=\"loading\"></ia-status-indicator> ${msg(\n this.loadingText,\n )}\n </span>\n `;\n }\n\n /** Sets up or removes button type emulation as needed */\n private setButtonTypeEmulation(): void {\n const hiddenButton: HTMLInputElement | null = this.querySelector(\n 'input.hidden-button',\n );\n\n if (hiddenButton) {\n hiddenButton.type = this.type;\n return;\n }\n\n this.addHiddenButton();\n this.addEventListener('click', this.handleComponentClick);\n }\n\n /**\n * Triggers form actions (submit/reset) on click, if desired\n * and if actions not already in progress\n */\n private handleComponentClick(e: Event): void {\n if (this.type === 'button') return;\n\n // No need to submit/reset the form if it's already submitting/resetting\n const formActionsInProgress =\n e instanceof CustomEvent && e.detail.formActionsInProgress;\n if (formActionsInProgress) return;\n\n // Request form submission/reset by clicking the hidden native submit/reset button we added earlier\n const hiddenButton = this.querySelector(\n 'input.hidden-button',\n ) as HTMLInputElement;\n hiddenButton.dispatchEvent(new PointerEvent('click'));\n }\n\n /**\n * Adds a hidden button to the light DOM to\n * emulate native reset/submit button behavior.\n *\n * Used for:\n * - Submitting/resetting the form (on behalf of handleComponentClick)\n * - Activating any component click events if form is submitted with the enter key\n * (via handleFormActions)\n */\n private addHiddenButton(): void {\n if (this.type === 'button') return;\n\n render(\n html`<input\n type=${this.type}\n class=\"hidden-button\"\n style=\"display:none\"\n slot=\"hidden-button\"\n @click=${(e: Event) => this.handleFormActions(e)}\n />`,\n this,\n );\n }\n\n /** Triggers the component's click event manually to prevent extra submission/reset */\n private handleFormActions(e: Event): void {\n /**\n * Prevents the event from bubbling up to the ia-button component itself.\n * This way, if the click on this button is triggered by a click on the component,\n * we don't accidentally bubble up a second click and end up in an infinite loop.\n *\n * And if the click was triggered by form submission (via the enter key), we can hijack the click\n * event to pass that info to the component, so it knows not to\n * re-attempt submission.\n */\n e.stopPropagation();\n\n // Detect if click comes from the parent component,\n // in which case there's no need to trigger a second click on it\n const triggeredByComponentClick = !e.isTrusted;\n if (triggeredByComponentClick) return;\n\n // Trigger parent component click events manually,\n // so it knows not to try to re-submit/re-reset the form\n this.dispatchEvent(\n new CustomEvent('click', { detail: { formActionsInProgress: true } }),\n );\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --primary-cta-text-color--: var(--primary-cta-text-color);\n --primary-cta-fill--: var(--primary-cta-fill);\n --primary-cta-border--: var(--primary-cta-border);\n\n --secondary-cta-text-color--: var(--secondary-cta-text-color);\n --secondary-cta-fill--: var(--secondary-cta-fill);\n --secondary-cta-border--: var(--secondary-cta-border);\n\n --danger-cta-text-color--: var(--danger-cta-text-color);\n --danger-cta-fill--: var(--danger-cta-fill);\n --danger-cta-border--: var(--danger-cta-border);\n\n --warning-cta-text-color--: var(--warning-cta-text-color);\n --warning-cta-fill--: var(--warning-cta-fill);\n --warning-cta-border--: var(--warning-cta-border);\n\n --disabled-cta-text-color--: var(--disabled-cta-text-color);\n --disabled-cta-fill--: var(--disabled-cta-fill);\n --disabled-cta-border--: var(--disabled-cta-border);\n\n --link-color--: var(--link-color);\n --color-danger--: var(--color-danger);\n\n --button-padding--: var(--button-padding);\n --button-width--: var(--button-width);\n --button-height--: var(--button-height);\n --button-border-width--: var(--button-border-width);\n --button-border-radius--: var(--button-border-radius);\n --base-font-family--: var(--base-font-family);\n --font-size-standard--: var(--font-size-standard);\n\n --ia-button-transition--: var(\n --ia-button-transition,\n all 0.1s ease 0s\n );\n\n --ia-button-custom-text-color--: var(\n --ia-button-custom-text-color,\n var(--primary-cta-text-color--)\n );\n --ia-button-custom-fill--: var(\n --ia-button-custom-fill,\n var(--primary-cta-fill--)\n );\n --ia-button-custom-border--: var(\n --ia-button-custom-border,\n var(--primary-cta-border--)\n );\n --ia-button-custom-active-text-color--: var(\n --ia-button-custom-active-text-color,\n var(--ia-button-custom-text-color--)\n );\n --ia-button-custom-active-fill--: var(\n --ia-button-custom-active-fill,\n var(--ia-button-custom-fill--)\n );\n --ia-button-custom-active-border--: var(\n --ia-button-custom-active-border,\n var(--ia-button-custom-border--)\n );\n\n display: inline-block; /* keeps host sized to button */\n }\n\n button {\n font-family: var(--base-font-family--);\n font-size: var(--font-size-standard--);\n height: var(--button-height--);\n min-height: var(--button-height--);\n width: var(--button-width--);\n padding: var(--button-padding--);\n border-width: var(--button-border-width--);\n border-radius: var(--button-border-radius--);\n transition: var(--ia-button-transition--);\n\n outline-color: currentColor;\n cursor: pointer;\n line-height: normal;\n border-style: solid;\n white-space: nowrap;\n appearance: auto;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n outline-offset: -4px;\n user-select: none;\n text-decoration: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n -o-user-select: none;\n }\n\n a {\n text-decoration: none;\n }\n\n button:disabled,\n button.disabled {\n cursor: not-allowed;\n color: var(--disabled-cta-text-color--);\n background-color: var(--disabled-cta-fill--);\n border: 1px solid var(--disabled-cta-border--);\n opacity: 0.5;\n }\n\n button:enabled:hover {\n opacity: 0.9;\n }\n\n button:focus-visible {\n opacity: 0.8;\n outline-style: double;\n }\n\n button:active {\n opacity: 0.7;\n }\n\n button.primary {\n color: var(--primary-cta-text-color--);\n background-color: var(--primary-cta-fill--);\n border-color: var(--primary-cta-border--);\n }\n\n button.secondary {\n color: var(--secondary-cta-text-color--);\n background-color: var(--secondary-cta-fill--);\n border-color: var(--secondary-cta-border--);\n }\n\n button.danger {\n color: var(--danger-cta-text-color--);\n background-color: var(--danger-cta-fill--);\n border-color: var(--danger-cta-border--);\n }\n\n button.warning {\n color: var(--warning-cta-text-color--);\n background-color: var(--warning-cta-fill--);\n border-color: var(--warning-cta-border--);\n }\n\n button.transparent {\n color: inherit;\n border-width: 0;\n background-color: transparent;\n border-color: transparent;\n }\n\n button.custom {\n color: var(--ia-button-custom-text-color--);\n background-color: var(--ia-button-custom-fill--);\n border-color: var(--ia-button-custom-border--);\n }\n\n button.custom:enabled:is(:hover, :focus, :active) {\n color: var(--ia-button-custom-active-text-color--);\n background-color: var(--ia-button-custom-active-fill--);\n border-color: var(--ia-button-custom-active-border--);\n }\n\n :host(.fit-content) button {\n padding: 0;\n height: fit-content;\n }\n\n button.link:enabled:hover,\n button.danger-link:enabled:hover {\n text-decoration: underline;\n }\n\n button.link,\n button.danger-link {\n margin: 0;\n border: 0;\n appearance: none;\n background: none;\n text-decoration: none;\n cursor: pointer;\n padding: 0;\n }\n\n button.link {\n color: var(--link-color--);\n }\n\n button.danger-link {\n color: var(--color-danger--);\n }\n\n .loading-indicator {\n display: flex;\n flex-direction: row;\n gap: 0.5rem;\n align-items: center;\n }\n\n ia-status-indicator {\n --ia-theme-primary-text-color: currentColor;\n }\n `,\n ];\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ia-button.js","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,IAAI,EACJ,UAAU,EAGV,GAAG,EAEH,MAAM,GACP,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD,OAAO,4CAA4C,CAAC;AAEpD;;;;;;;;;GASG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QACL,4CAA4C;QAChB,SAAI,GASZ,SAAS,CAAC;QAE9B,+DAA+D;QAClC,YAAO,GAAY,KAAK,CAAC;QAEtD,4EAA4E;QAC/C,aAAQ,GAAY,KAAK,CAAC;QAEvD,4DAA4D;QAChC,gBAAW,GAAW,EAAE,CAAC;QAErD,0EAA0E;QAC/B,SAAI,GAGjC,QAAQ,CAAC;QAKvB,2DAA2D;QAC9B,oBAAe,GAAY,KAAK,CAAC;IAwVhE,CAAC;IAtVC,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,IAAI;YACT,CAAC,CAAC,IAAI,CAAA;mBACK,IAAI,CAAC,IAAI;qBACP,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;eAC/C,IAAI,CAAC,cAAc;YACtB;YACJ,CAAC,CAAC,IAAI,CAAC,cAAc;;KAExB,CAAC;IACJ,CAAC;IAES,UAAU,CAAC,OAAuB;QAC1C,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAED,iCAAiC;IACjC,IAAY,cAAc;QACxB,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,IAAI;oBACL,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;;UAEvC,IAAI,CAAC,kBAAkB;;KAE5B,CAAC;IACJ,CAAC;IAED,0CAA0C;IAC1C,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,CAAC;IACxE,CAAC;IAED,+CAA+C;IAC/C,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAA;;qEAEsD,GAAG,CAC9D,IAAI,CAAC,WAAW,CACjB;;KAEJ,CAAC;IACJ,CAAC;IAED,yDAAyD;IACjD,sBAAsB;QAC5B,MAAM,YAAY,GAA4B,IAAI,CAAC,aAAa,CAC9D,qBAAqB,CACtB,CAAC;QAEF,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YAC9B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC5D,CAAC;IAED;;;OAGG;IACK,oBAAoB,CAAC,CAAQ;QACnC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE,OAAO;QAEnC,wEAAwE;QACxE,MAAM,qBAAqB,GACzB,CAAC,YAAY,WAAW,IAAI,CAAC,CAAC,MAAM,CAAC,qBAAqB,CAAC;QAC7D,IAAI,qBAAqB;YAAE,OAAO;QAElC,mGAAmG;QACnG,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CACrC,qBAAqB,CACF,CAAC;QACtB,YAAY,CAAC,aAAa,CAAC,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;IACxD,CAAC;IAED;;;;;;;;OAQG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE,OAAO;QAEnC,MAAM,CACJ,IAAI,CAAA;eACK,IAAI,CAAC,IAAI;;;;iBAIP,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;SAC/C,EACH,IAAI,CACL,CAAC;IACJ,CAAC;IAED,sFAAsF;IAC9E,iBAAiB,CAAC,CAAQ;QAChC;;;;;;;;WAQG;QACH,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,mDAAmD;QACnD,gEAAgE;QAChE,MAAM,yBAAyB,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;QAC/C,IAAI,yBAAyB;YAAE,OAAO;QAEtC,kDAAkD;QAClD,wDAAwD;QACxD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,EAAE,CAAC,CACtE,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6MF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAtX6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCASG;AAGD;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCAA0B;AAGzB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAA2B;AAG3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAA0B;AAGV;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAGnB;AAGK;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAe;AAGb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAkC;AAhCnD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAwXpB","sourcesContent":["import {\n html,\n LitElement,\n TemplateResult,\n CSSResultGroup,\n css,\n PropertyValues,\n render,\n} from 'lit';\nimport { msg } from '@lit/localize';\nimport { property, customElement } from 'lit/decorators.js';\nimport themeStyles from '@src/themes/theme-styles';\n\nimport '../ia-status-indicator/ia-status-indicator';\n\n/**\n * Renders a standardized button built off the ia-button styling and the activity indicator, with the option to show\n * a loading indicator instead of the text or to customize the text, and the ability to pass in any\n * function to run on click.\n *\n * Designed to behave exactly like a native type=\"submit\" or type=\"reset\" button if either type is supplied,\n * i.e. for an <ia-button type=\"submit\" @click=${doSideEffects}></ia-button>,\n * whether the form is submitted via enter or by clicking the button directly, the button will always\n * run doSideEffects() and then submit the form.\n */\n@customElement('ia-button')\nexport class IAButton extends LitElement {\n /* Which version of the button to display */\n @property({ type: String }) mode:\n | 'primary'\n | 'secondary'\n | 'danger'\n | 'warning'\n | 'disabled'\n | 'transparent'\n | 'custom'\n | 'link'\n | 'danger-link' = 'primary';\n\n /* Whether to show a loading indicator instead of the button */\n @property({ type: Boolean }) loading: boolean = false;\n\n /* Whether the button should be disabled, regardless of submission status */\n @property({ type: Boolean }) disabled: boolean = false;\n\n /* Optional text to include next to the loading indicator */\n @property({ type: String }) loadingText: string = '';\n\n /* Type of the button - defaults to 'button' to prevent form submission */\n @property({ type: String, reflect: true }) type:\n | 'button'\n | 'submit'\n | 'reset' = 'button';\n\n /* An optional href to wrap around the button */\n @property({ type: String }) href?: string;\n\n /* Whether to add a target=\"_blank\" to any wrapping link */\n @property({ type: Boolean }) openLinksNewTab: boolean = false;\n\n render(): TemplateResult {\n return html`\n ${this.href\n ? html`<a\n href=${this.href}\n target=${this.openLinksNewTab ? '_blank' : '_self'}\n >${this.buttonTemplate}</a\n >`\n : this.buttonTemplate}\n <slot name=\"hidden-button\"></slot>\n `;\n }\n\n protected willUpdate(changed: PropertyValues): void {\n if (changed.has('type')) {\n this.setButtonTypeEmulation();\n }\n }\n\n /* The native button to render */\n private get buttonTemplate(): TemplateResult {\n return html`\n <button\n part=\"button\"\n class=${this.mode}\n ?disabled=${this.disabled || this.loading}\n >\n ${this.buttonTextTemplate}\n </button>\n `;\n }\n\n /* The text to render within the button */\n private get buttonTextTemplate(): TemplateResult {\n return this.loading ? this.loadingStateTemplate : html`<slot></slot>`;\n }\n\n /* Content to render while button is loading */\n private get loadingStateTemplate(): TemplateResult {\n return html`\n <span class=\"loading-indicator\" alt=\"Loading indicator\">\n <ia-status-indicator mode=\"loading\"></ia-status-indicator> ${msg(\n this.loadingText,\n )}\n </span>\n `;\n }\n\n /** Sets up or removes button type emulation as needed */\n private setButtonTypeEmulation(): void {\n const hiddenButton: HTMLInputElement | null = this.querySelector(\n 'input.hidden-button',\n );\n\n if (hiddenButton) {\n hiddenButton.type = this.type;\n return;\n }\n\n this.addHiddenButton();\n this.addEventListener('click', this.handleComponentClick);\n }\n\n /**\n * Triggers form actions (submit/reset) on click, if desired\n * and if actions not already in progress\n */\n private handleComponentClick(e: Event): void {\n if (this.type === 'button') return;\n\n // No need to submit/reset the form if it's already submitting/resetting\n const formActionsInProgress =\n e instanceof CustomEvent && e.detail.formActionsInProgress;\n if (formActionsInProgress) return;\n\n // Request form submission/reset by clicking the hidden native submit/reset button we added earlier\n const hiddenButton = this.querySelector(\n 'input.hidden-button',\n ) as HTMLInputElement;\n hiddenButton.dispatchEvent(new PointerEvent('click'));\n }\n\n /**\n * Adds a hidden button to the light DOM to\n * emulate native reset/submit button behavior.\n *\n * Used for:\n * - Submitting/resetting the form (on behalf of handleComponentClick)\n * - Activating any component click events if form is submitted with the enter key\n * (via handleFormActions)\n */\n private addHiddenButton(): void {\n if (this.type === 'button') return;\n\n render(\n html`<input\n type=${this.type}\n class=\"hidden-button\"\n style=\"display:none\"\n slot=\"hidden-button\"\n @click=${(e: Event) => this.handleFormActions(e)}\n />`,\n this,\n );\n }\n\n /** Triggers the component's click event manually to prevent extra submission/reset */\n private handleFormActions(e: Event): void {\n /**\n * Prevents the event from bubbling up to the ia-button component itself.\n * This way, if the click on this button is triggered by a click on the component,\n * we don't accidentally bubble up a second click and end up in an infinite loop.\n *\n * And if the click was triggered by form submission (via the enter key), we can hijack the click\n * event to pass that info to the component, so it knows not to\n * re-attempt submission.\n */\n e.stopPropagation();\n\n // Detect if click comes from the parent component,\n // in which case there's no need to trigger a second click on it\n const triggeredByComponentClick = !e.isTrusted;\n if (triggeredByComponentClick) return;\n\n // Trigger parent component click events manually,\n // so it knows not to try to re-submit/re-reset the form\n this.dispatchEvent(\n new CustomEvent('click', { detail: { formActionsInProgress: true } }),\n );\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --primary-cta-text-color--: var(--primary-cta-text-color);\n --primary-cta-fill--: var(--primary-cta-fill);\n --primary-cta-border--: var(--primary-cta-border);\n\n --secondary-cta-text-color--: var(--secondary-cta-text-color);\n --secondary-cta-fill--: var(--secondary-cta-fill);\n --secondary-cta-border--: var(--secondary-cta-border);\n\n --danger-cta-text-color--: var(--danger-cta-text-color);\n --danger-cta-fill--: var(--danger-cta-fill);\n --danger-cta-border--: var(--danger-cta-border);\n\n --warning-cta-text-color--: var(--warning-cta-text-color);\n --warning-cta-fill--: var(--warning-cta-fill);\n --warning-cta-border--: var(--warning-cta-border);\n\n --disabled-cta-text-color--: var(--disabled-cta-text-color);\n --disabled-cta-fill--: var(--disabled-cta-fill);\n --disabled-cta-border--: var(--disabled-cta-border);\n\n --link-color--: var(--link-color);\n --color-danger--: var(--color-danger);\n\n --button-padding--: var(--button-padding);\n --button-width--: var(--button-width);\n --button-height--: var(--button-height);\n --button-border-width--: var(--button-border-width);\n --button-border-radius--: var(--button-border-radius);\n --base-font-family--: var(--base-font-family);\n --font-size-standard--: var(--font-size-standard);\n\n --ia-button-transition--: var(\n --ia-button-transition,\n all 0.1s ease 0s\n );\n\n --ia-button-custom-text-color--: var(\n --ia-button-custom-text-color,\n var(--primary-cta-text-color--)\n );\n --ia-button-custom-fill--: var(\n --ia-button-custom-fill,\n var(--primary-cta-fill--)\n );\n --ia-button-custom-border--: var(\n --ia-button-custom-border,\n var(--primary-cta-border--)\n );\n --ia-button-custom-active-text-color--: var(\n --ia-button-custom-active-text-color,\n var(--ia-button-custom-text-color--)\n );\n --ia-button-custom-active-fill--: var(\n --ia-button-custom-active-fill,\n var(--ia-button-custom-fill--)\n );\n --ia-button-custom-active-border--: var(\n --ia-button-custom-active-border,\n var(--ia-button-custom-border--)\n );\n\n display: inline-block; /* keeps host sized to button */\n }\n\n button {\n font-family: var(--base-font-family--);\n font-size: var(--font-size-standard--);\n height: var(--button-height--);\n min-height: var(--button-height--);\n width: var(--button-width--);\n padding: var(--button-padding--);\n border-width: var(--button-border-width--);\n border-radius: var(--button-border-radius--);\n transition: var(--ia-button-transition--);\n\n outline-color: currentColor;\n cursor: pointer;\n line-height: normal;\n border-style: solid;\n white-space: nowrap;\n appearance: auto;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n outline-offset: -4px;\n user-select: none;\n text-decoration: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n -o-user-select: none;\n }\n\n a {\n text-decoration: none;\n }\n\n button:disabled,\n button.disabled {\n cursor: not-allowed;\n color: var(--disabled-cta-text-color--);\n background-color: var(--disabled-cta-fill--);\n border: 1px solid var(--disabled-cta-border--);\n opacity: 0.5;\n }\n\n button:enabled:hover {\n opacity: 0.9;\n }\n\n button:focus-visible {\n opacity: 0.8;\n outline-style: double;\n }\n\n button:active {\n opacity: 0.7;\n }\n\n button.primary {\n color: var(--primary-cta-text-color--);\n background-color: var(--primary-cta-fill--);\n border-color: var(--primary-cta-border--);\n }\n\n button.secondary {\n color: var(--secondary-cta-text-color--);\n background-color: var(--secondary-cta-fill--);\n border-color: var(--secondary-cta-border--);\n }\n\n button.danger {\n color: var(--danger-cta-text-color--);\n background-color: var(--danger-cta-fill--);\n border-color: var(--danger-cta-border--);\n }\n\n button.warning {\n color: var(--warning-cta-text-color--);\n background-color: var(--warning-cta-fill--);\n border-color: var(--warning-cta-border--);\n }\n\n button.transparent {\n color: inherit;\n border-width: 0;\n background-color: transparent;\n border-color: transparent;\n }\n\n button.custom {\n color: var(--ia-button-custom-text-color--);\n background-color: var(--ia-button-custom-fill--);\n border-color: var(--ia-button-custom-border--);\n }\n\n button.custom:enabled:is(:hover, :focus, :active, .active) {\n color: var(--ia-button-custom-active-text-color--);\n background-color: var(--ia-button-custom-active-fill--);\n border-color: var(--ia-button-custom-active-border--);\n }\n\n :host(.fit-content) button {\n padding: 0;\n height: fit-content;\n }\n\n button.link:enabled:hover,\n button.danger-link:enabled:hover {\n text-decoration: underline;\n }\n\n button.link,\n button.danger-link {\n margin: 0;\n border: 0;\n appearance: none;\n background: none;\n text-decoration: none;\n cursor: pointer;\n padding: 0;\n }\n\n button.link {\n color: var(--link-color--);\n }\n\n button.danger-link {\n color: var(--color-danger--);\n }\n\n .loading-indicator {\n display: flex;\n flex-direction: row;\n gap: 0.5rem;\n align-items: center;\n }\n\n ia-status-indicator {\n --ia-theme-primary-text-color: currentColor;\n }\n `,\n ];\n }\n}\n"]}
|
|
@@ -2,6 +2,7 @@ import { LitElement, TemplateResult, CSSResultGroup, PropertyValues } from 'lit'
|
|
|
2
2
|
import type { LoadingStatus } from '../../elements/ia-status-indicator/ia-status-indicator.js';
|
|
3
3
|
import '../../elements/ia-status-indicator/ia-status-indicator.js';
|
|
4
4
|
import '../../elements/ia-otp-input/ia-otp-input.js';
|
|
5
|
+
import '../../elements/ia-button/ia-button.js';
|
|
5
6
|
/**
|
|
6
7
|
* Form for entering OTP codes, including success/loading/error states and a request new code button
|
|
7
8
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-otp-form.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-otp-form/ia-otp-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,cAAc,EACd,cAAc,EAGd,cAAc,EACf,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAC;AAE3F,OAAO,uDAAuD,CAAC;AAC/D,OAAO,yCAAyC,CAAC;
|
|
1
|
+
{"version":3,"file":"ia-otp-form.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-otp-form/ia-otp-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,cAAc,EACd,cAAc,EAGd,cAAc,EACf,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAC;AAE3F,OAAO,uDAAuD,CAAC;AAC/D,OAAO,yCAAyC,CAAC;AACjD,OAAO,mCAAmC,CAAC;AAU3C;;GAEG;AACH,qBACa,SAAU,SAAQ,UAAU;IAGvC,gBAAgB,EAAE,aAAa,CAAW;IAI1C,cAAc,EAAE,OAAO,CAAS;IAIhC,gBAAgB,EAAE,MAAM,CAAK;IAI7B,WAAW,EAAE,OAAO,CAAQ;IAG5B,OAAO,CAAC,QAAQ,CAAc;IAE9B,MAAM,IAAI,cAAc;IAuBxB,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAenD,OAAO,KAAK,wBAAwB,GAiBnC;YAGa,sBAAsB;IAUpC,MAAM,KAAK,MAAM,IAAI,cAAc,CA8ClC;CACF"}
|
|
@@ -5,6 +5,7 @@ import { property, customElement, query } from 'lit/decorators.js';
|
|
|
5
5
|
import themeStyles from '../../themes/theme-styles.js';
|
|
6
6
|
import '../../elements/ia-status-indicator/ia-status-indicator.js';
|
|
7
7
|
import '../../elements/ia-otp-input/ia-otp-input.js';
|
|
8
|
+
import '../../elements/ia-button/ia-button.js';
|
|
8
9
|
/**
|
|
9
10
|
* Custom events fired by the component
|
|
10
11
|
*/
|
|
@@ -66,15 +67,16 @@ let IAOTPForm = class IAOTPForm extends LitElement {
|
|
|
66
67
|
>${msg('Emailing...')}</span
|
|
67
68
|
>`
|
|
68
69
|
: html `
|
|
69
|
-
<button
|
|
70
|
-
|
|
70
|
+
<ia-button
|
|
71
|
+
mode="link"
|
|
72
|
+
class="new-code-btn"
|
|
71
73
|
part="new-code-button"
|
|
72
74
|
.disabled=${this.validationStatus === 'loading' ||
|
|
73
75
|
this.validationStatus === 'success'}
|
|
74
76
|
@click=${this.handleNewCodeRequested}
|
|
75
77
|
>
|
|
76
78
|
${msg('Email me another code')}
|
|
77
|
-
</button>
|
|
79
|
+
</ia-button>
|
|
78
80
|
`;
|
|
79
81
|
}
|
|
80
82
|
/* Emits an event to request the new code */
|
|
@@ -121,26 +123,6 @@ let IAOTPForm = class IAOTPForm extends LitElement {
|
|
|
121
123
|
margin-bottom: -10px;
|
|
122
124
|
}
|
|
123
125
|
|
|
124
|
-
.new-code-btn {
|
|
125
|
-
font-family: inherit;
|
|
126
|
-
font-size: var(--font-size-standard--);
|
|
127
|
-
display: block;
|
|
128
|
-
width: fit-content;
|
|
129
|
-
margin-top: 10px;
|
|
130
|
-
border: 0;
|
|
131
|
-
padding: 0;
|
|
132
|
-
appearance: none;
|
|
133
|
-
background: none;
|
|
134
|
-
color: var(--link-color--);
|
|
135
|
-
text-decoration: none;
|
|
136
|
-
cursor: pointer;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.new-code-btn:hover,
|
|
140
|
-
.new-code-btn:focus {
|
|
141
|
-
text-decoration: underline;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
126
|
.new-code-msg {
|
|
145
127
|
margin-top: 10px;
|
|
146
128
|
font-size: var(--font-size-standard--);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-otp-form.js","sourceRoot":"","sources":["../../../../src/elements/ia-otp-form/ia-otp-form.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,IAAI,EACJ,UAAU,EAGV,GAAG,EACH,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAKnD,OAAO,uDAAuD,CAAC;AAC/D,OAAO,yCAAyC,CAAC;
|
|
1
|
+
{"version":3,"file":"ia-otp-form.js","sourceRoot":"","sources":["../../../../src/elements/ia-otp-form/ia-otp-form.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n html,\n LitElement,\n TemplateResult,\n CSSResultGroup,\n css,\n nothing,\n PropertyValues,\n} from 'lit';\nimport { msg } from '@lit/localize';\nimport { property, customElement, query } from 'lit/decorators.js';\n\nimport themeStyles from '@src/themes/theme-styles';\n\nimport type { IAOTPInput } from '@src/elements/ia-otp-input/ia-otp-input';\nimport type { LoadingStatus } from '@src/elements/ia-status-indicator/ia-status-indicator';\n\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\nimport '@src/elements/ia-otp-input/ia-otp-input';\nimport '@src/elements/ia-button/ia-button';\n\n/**\n * Custom events fired by the component\n */\nconst Events = {\n NewCodeRequested: 'newCodeRequested',\n CodeSubmitted: 'codeSubmitted', // Bubbles up from ia-otp-input\n};\n\n/**\n * Form for entering OTP codes, including success/loading/error states and a request new code button\n */\n@customElement('ia-otp-form')\nexport class IAOTPForm extends LitElement {\n /* The state of the validation process */\n @property({ type: String })\n validationStatus: LoadingStatus = 'ready';\n\n /* Whether to display a loading indicator instead of the button text */\n @property({ type: Boolean })\n newCodeSending: boolean = false;\n\n /* Number of characters to expect for the passcode */\n @property({ type: Number })\n numPasscodeChars: number = 6;\n\n /* Whether to restrict entry to numeric characters */\n @property({ type: Boolean })\n numericOnly: boolean = true;\n\n @query('ia-otp-input')\n private OTPInput!: IAOTPInput;\n\n render(): TemplateResult {\n return html`\n <div class=\"input-section\">\n <ia-otp-input\n .numChars=${this.numPasscodeChars}\n ?numericOnly=${this.numericOnly}\n ?disabled=${this.validationStatus === 'loading' ||\n this.validationStatus === 'success'}\n ></ia-otp-input>\n <ia-status-indicator\n part=\"status-indicator\"\n .mode=${this.validationStatus}\n ></ia-status-indicator>\n </div>\n ${this.validationStatus === 'error'\n ? html`<p class=\"error-msg\">\n ${msg('The code entered is invalid or expired')}\n </p>`\n : nothing}\n ${this.resendCodeButtonTemplate}\n `;\n }\n\n protected willUpdate(changed: PropertyValues): void {\n if (\n changed.has('validationStatus') &&\n this.OTPInput &&\n this.validationStatus === 'error'\n ) {\n this.OTPInput.prefillValue = '';\n }\n\n if (changed.has('newCodeSending') && this.newCodeSending && this.OTPInput) {\n this.OTPInput.prefillValue = '';\n }\n }\n\n /* The button to display to send a new code */\n private get resendCodeButtonTemplate(): TemplateResult {\n return this.newCodeSending\n ? html`<span part=\"new-code-message\" class=\"new-code-msg\"\n >${msg('Emailing...')}</span\n >`\n : html`\n <ia-button\n mode=\"link\"\n class=\"new-code-btn\"\n part=\"new-code-button\"\n .disabled=${this.validationStatus === 'loading' ||\n this.validationStatus === 'success'}\n @click=${this.handleNewCodeRequested}\n >\n ${msg('Email me another code')}\n </ia-button>\n `;\n }\n\n /* Emits an event to request the new code */\n private async handleNewCodeRequested(): Promise<void> {\n this.dispatchEvent(\n new CustomEvent(Events.NewCodeRequested, {\n bubbles: true,\n composed: true,\n }),\n );\n this.OTPInput.prefillValue = '';\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --font-size-standard--: var(--font-size-standard);\n --font-size-lg--: var(--font-size-lg);\n --color-success--: var(--color-success);\n --color-danger--: var(--color-danger);\n --link-color--: var(--link-color);\n\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .input-section {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n ia-status-indicator {\n --icon-width: calc(var(--font-size-lg--) * 1.33);\n }\n\n .error-msg {\n margin-top: 10px;\n font-size: var(--font-size-standard--);\n color: var(--color-danger--);\n margin-bottom: -10px;\n }\n\n .new-code-msg {\n margin-top: 10px;\n font-size: var(--font-size-standard--);\n color: var(--link-color--);\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n `,\n ];\n }\n}\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* Wraps any slotted elements in a `span` element that hides them visually but keeps them available for screen readers.
|
|
4
|
+
* Useful for rendering any additional explanatory text that is only necessary for screen readers.
|
|
5
|
+
*/
|
|
6
|
+
export declare class IASrOnlyText extends LitElement {
|
|
7
|
+
render(): TemplateResult;
|
|
8
|
+
static get styles(): CSSResultGroup;
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=ia-sr-only-text.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ia-sr-only-text.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-sr-only-text/ia-sr-only-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5E;;;GAGG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,IAAI,cAAc;IAQxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAoBlC;CACF"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { css, html, LitElement } from 'lit';
|
|
3
|
+
import { customElement } from 'lit/decorators.js';
|
|
4
|
+
import themeStyles from '../../themes/theme-styles.js';
|
|
5
|
+
/**
|
|
6
|
+
* Wraps any slotted elements in a `span` element that hides them visually but keeps them available for screen readers.
|
|
7
|
+
* Useful for rendering any additional explanatory text that is only necessary for screen readers.
|
|
8
|
+
*/
|
|
9
|
+
let IASrOnlyText = class IASrOnlyText extends LitElement {
|
|
10
|
+
render() {
|
|
11
|
+
return html `
|
|
12
|
+
<span class="sr-only">
|
|
13
|
+
<slot></slot>
|
|
14
|
+
</span>
|
|
15
|
+
`;
|
|
16
|
+
}
|
|
17
|
+
static get styles() {
|
|
18
|
+
return [
|
|
19
|
+
themeStyles,
|
|
20
|
+
css `
|
|
21
|
+
.sr-only {
|
|
22
|
+
position: absolute !important;
|
|
23
|
+
width: 1px !important;
|
|
24
|
+
height: 1px !important;
|
|
25
|
+
margin: -1px !important;
|
|
26
|
+
padding: 0 !important;
|
|
27
|
+
border: 0 !important;
|
|
28
|
+
overflow: hidden !important;
|
|
29
|
+
white-space: nowrap !important;
|
|
30
|
+
clip: rect(1px, 1px, 1px, 1px) !important;
|
|
31
|
+
-webkit-clip-path: inset(50%) !important;
|
|
32
|
+
clip-path: inset(50%) !important;
|
|
33
|
+
user-select: none !important;
|
|
34
|
+
}
|
|
35
|
+
`,
|
|
36
|
+
];
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
IASrOnlyText = __decorate([
|
|
40
|
+
customElement('ia-sr-only-text')
|
|
41
|
+
], IASrOnlyText);
|
|
42
|
+
export { IASrOnlyText };
|
|
43
|
+
//# sourceMappingURL=ia-sr-only-text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ia-sr-only-text.js","sourceRoot":"","sources":["../../../../src/elements/ia-sr-only-text/ia-sr-only-text.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;GAGG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAC1C,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;OAeF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA9BY,YAAY;IADxB,aAAa,CAAC,iBAAiB,CAAC;GACpB,YAAY,CA8BxB","sourcesContent":["import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n/**\n * Wraps any slotted elements in a `span` element that hides them visually but keeps them available for screen readers.\n * Useful for rendering any additional explanatory text that is only necessary for screen readers.\n */\n@customElement('ia-sr-only-text')\nexport class IASrOnlyText extends LitElement {\n render(): TemplateResult {\n return html`\n <span class=\"sr-only\">\n <slot></slot>\n </span>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n .sr-only {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n margin: -1px !important;\n padding: 0 !important;\n border: 0 !important;\n overflow: hidden !important;\n white-space: nowrap !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n user-select: none !important;\n }\n `,\n ];\n }\n}\n"]}
|