@internetarchive/elements 0.2.10 → 0.2.12-alpha-webdev8888.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.
package/README.md CHANGED
@@ -87,9 +87,15 @@ Add to Jest config:
87
87
 
88
88
  ## Development
89
89
 
90
+ Requires Node 24+ and pnpm 11+. `engine-strict=true` in `.npmrc` makes an older
91
+ Node fail the install instead of warning, but nothing hard-blocks `npm install`:
92
+ npm ignores `engines.pnpm`, and there's deliberately no preinstall guard since it
93
+ would run for consumers too. Use pnpm. `packageManager` and the committed
94
+ `pnpm-lock.yaml` are what point you at it.
95
+
90
96
  ```zsh
91
- npm i
92
- npm run dev
97
+ pnpm install
98
+ pnpm run dev
93
99
  ```
94
100
 
95
101
  ## Versioning and Publishing
@@ -97,10 +103,10 @@ npm run dev
97
103
  ### Prerelease Version
98
104
 
99
105
  1. Create prerelease version on your branch:
100
- 1. `npm version prerelease --preid=<some_prefix>`
106
+ 1. `pnpm version prerelease --preid=<some_prefix>`
101
107
  2. If you use JIRA, recommend using the ticket number, ie `--preid=webdev-1234`
102
108
  3. This will also create a `git` tag
103
- 2. Push the tag that was created in the `npm version` step
109
+ 2. Push the tag that was created in the `pnpm version` step
104
110
  3. Publish prerelease to npm:
105
111
  1. Go to the [Element release page](https://github.com/internetarchive/elements/releases)
106
112
  2. Tap `Draft a new release` button
@@ -113,7 +119,7 @@ npm run dev
113
119
 
114
120
  1. Use [Semantic Versioning](https://semver.org) to determine release number
115
121
  2. On the `main` branch:
116
- 1. Run `npm version [major | minor | patch]`
122
+ 1. Run `pnpm version [major | minor | patch]`
117
123
  2. `git push && git push --tags`
118
124
  3. Publish release to npm:
119
125
  1. Go to the [Element release page](https://github.com/internetarchive/elements/releases)
@@ -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":";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) {\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":"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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, .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,8 +1,8 @@
1
- <svg
2
- viewBox="0 0 8 4"
3
- xmlns="http://www.w3.org/2000/svg"
4
- >
5
- <path
6
- d="m6.7226499.58397485c.22976435-.15317623.54019902-.09108929.69337525.13867505.13615665.20423498.10222882.47220947-.06836249.63681849l-.07031256.05655676-3.2773501 2.18490006-3.2773501-2.18490006c-.22976434-.15317623-.29185128-.4636109-.13867505-.69337525.13615665-.20423497.39656688-.27598409.61412572-.18182636l.07924953.04315131 2.7226499 1.81402515z"
7
- ></path>
8
- </svg>
1
+ <svg
2
+ viewBox="0 0 8 4"
3
+ xmlns="http://www.w3.org/2000/svg"
4
+ >
5
+ <path
6
+ d="m6.7226499.58397485c.22976435-.15317623.54019902-.09108929.69337525.13867505.13615665.20423498.10222882.47220947-.06836249.63681849l-.07031256.05655676-3.2773501 2.18490006-3.2773501-2.18490006c-.22976434-.15317623-.29185128-.4636109-.13867505-.69337525.13615665-.20423497.39656688-.27598409.61412572-.18182636l.07924953.04315131 2.7226499 1.81402515z"
7
+ ></path>
8
+ </svg>
@@ -1,8 +1,8 @@
1
- <svg
2
- viewBox="0 0 8 4"
3
- xmlns="http://www.w3.org/2000/svg"
4
- >
5
- <path
6
- d="m6.7226499 3.51689722c.22976435.15317623.54019902.0910893.69337525-.13867505.13615665-.20423497.10222882-.47220946-.06836249-.63681849l-.07031256-.05655675-3.2773501-2.18490007-3.2773501 2.18490007c-.22976434.15317623-.29185128.4636109-.13867505.69337524.13615665.20423498.39656688.27598409.61412572.18182636l.07924953-.04315131 2.7226499-1.81402514z"
7
- ></path>
8
- </svg>
1
+ <svg
2
+ viewBox="0 0 8 4"
3
+ xmlns="http://www.w3.org/2000/svg"
4
+ >
5
+ <path
6
+ d="m6.7226499 3.51689722c.22976435.15317623.54019902.0910893.69337525-.13867505.13615665-.20423497.10222882-.47220946-.06836249-.63681849l-.07031256-.05655675-3.2773501-2.18490007-3.2773501 2.18490007c-.22976434.15317623-.29185128.4636109-.13867505.69337524.13615665.20423498.39656688.27598409.61412572.18182636l.07924953-.04315131 2.7226499-1.81402514z"
7
+ ></path>
8
+ </svg>
@@ -1,9 +1,9 @@
1
- <svg
2
- viewBox="0 0 100 100"
3
- xmlns="http://www.w3.org/2000/svg"
4
- >
5
- <path
6
- d="m50 0c27.6142375 0 50 22.3857625 50 50s-22.3857625 50-50 50-50-22.3857625-50-50 22.3857625-50 50-50zm23.8159475 26.1840525c-1.4033215-1.4033215-3.5816761-1.5592461-5.1572272-.4677738l-.5598841.4677738-18.0988362 18.0989475-18.0988362-18.0989475-.5598841-.4677738c-1.5755511-1.0914723-3.7539057-.9355477-5.1572272.4677738-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113l18.0989475 18.0988362-18.0989475 18.0988362c-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113 1.4033215 1.4033215 3.5816761 1.5592461 5.1572272.4677738l.5598841-.4677738 18.0988362-18.0989475 18.0988362 18.0989475.5598841.4677738c1.5755511 1.0914723 3.7539057.9355477 5.1572272-.4677738 1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113l-18.0989475-18.0988362 18.0989475-18.0988362c1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113z"
7
- fill-rule="evenodd"
8
- ></path>
1
+ <svg
2
+ viewBox="0 0 100 100"
3
+ xmlns="http://www.w3.org/2000/svg"
4
+ >
5
+ <path
6
+ d="m50 0c27.6142375 0 50 22.3857625 50 50s-22.3857625 50-50 50-50-22.3857625-50-50 22.3857625-50 50-50zm23.8159475 26.1840525c-1.4033215-1.4033215-3.5816761-1.5592461-5.1572272-.4677738l-.5598841.4677738-18.0988362 18.0989475-18.0988362-18.0989475-.5598841-.4677738c-1.5755511-1.0914723-3.7539057-.9355477-5.1572272.4677738-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113l18.0989475 18.0988362-18.0989475 18.0988362c-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113 1.4033215 1.4033215 3.5816761 1.5592461 5.1572272.4677738l.5598841-.4677738 18.0988362-18.0989475 18.0988362 18.0989475.5598841.4677738c1.5755511 1.0914723 3.7539057.9355477 5.1572272-.4677738 1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113l-18.0989475-18.0988362 18.0989475-18.0988362c1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113z"
7
+ fill-rule="evenodd"
8
+ ></path>
9
9
  </svg>
@@ -1 +1 @@
1
- {"version":3,"file":"ia-dropdown-search-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,UAAU,EAEV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAIb,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,UAAU,CAAC;AAKtE,OAAO,0CAA0C,CAAC;AAClD,OAAO,8BAA8B,CAAC;AACtC,OAAO,uDAAuD,CAAC;AAU/D,qBACa,mBAAoB,SAAQ,UAAU;IACjD,+CAA+C;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAE3C,+CAA+C;IACpB,UAAU,EAAE,cAAc,EAAE,CAAM;IAE7D,kDAAkD;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEtD,4CAA4C;IAChB,WAAW,SAAiB;IAExD,uCAAuC;IACV,aAAa,UAAS;IAEnD,0EAA0E;IAC7C,YAAY,UAAS;IAElD,8DAA8D;IACjC,OAAO,UAAS;IAG7C,OAAO,CAAC,WAAW,CAAwB;IAG3C,OAAO,CAAC,gBAAgB,CAAC,CAAa;IAEtC,8EAA8E;IAC9E,OAAO,KAAK,gBAAgB,GAE3B;IAED,MAAM,IAAI,cAAc;IAexB,UAAU,CAAC,OAAO,EAAE,cAAc;IAelC;;OAEG;IACH,OAAO,KAAK,gBAAgB,GAoB3B;IAED;;OAEG;IACH,OAAO,KAAK,eAAe,GAe1B;IAED;;OAEG;IACH,OAAO,KAAK,oBAAoB,GAkB/B;IAED;;OAEG;IACH,OAAO,KAAK,qBAAqB,GAGhC;IAED;;OAEG;IACH,OAAO,KAAK,WAAW,GAEtB;IAED;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB;IAkB9B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAW3B,MAAM,KAAK,MAAM,8BAqHhB;CACF"}
1
+ {"version":3,"file":"ia-dropdown-search-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,UAAU,EAEV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAIb,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,UAAU,CAAC;AAKtE,OAAO,0CAA0C,CAAC;AAClD,OAAO,8BAA8B,CAAC;AACtC,OAAO,uDAAuD,CAAC;AAU/D,qBACa,mBAAoB,SAAQ,UAAU;IACjD,+CAA+C;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAE3C,+CAA+C;IACpB,UAAU,EAAE,cAAc,EAAE,CAAM;IAE7D,kDAAkD;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEtD,4CAA4C;IAChB,WAAW,SAAiB;IAExD,uCAAuC;IACV,aAAa,UAAS;IAEnD,0EAA0E;IAC7C,YAAY,UAAS;IAElD,8DAA8D;IACjC,OAAO,UAAS;IAG7C,OAAO,CAAC,WAAW,CAAwB;IAG3C,OAAO,CAAC,gBAAgB,CAAC,CAAa;IAEtC,8EAA8E;IAC9E,OAAO,KAAK,gBAAgB,GAE3B;IAED,MAAM,IAAI,cAAc;IAexB,UAAU,CAAC,OAAO,EAAE,cAAc;IAelC;;OAEG;IACH,OAAO,KAAK,gBAAgB,GAoB3B;IAED;;OAEG;IACH,OAAO,KAAK,eAAe,GAe1B;IAED;;OAEG;IACH,OAAO,KAAK,oBAAoB,GAkB/B;IAED;;OAEG;IACH,OAAO,KAAK,qBAAqB,GAGhC;IAED;;OAEG;IACH,OAAO,KAAK,WAAW,GAEtB;IAED;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB;IAkB9B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAW3B,MAAM,KAAK,MAAM,8BAwHhB;CACF"}
@@ -183,7 +183,10 @@ let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
183
183
  --search-bar-width--: var(--search-bar-width, 300px);
184
184
  --search-bar-internal-padding--: var(--padding-sm, 5px);
185
185
  --clear-button-offset--: var(--clear-button-offset, 0);
186
- --dropdown-z-index--: var(--dropdown-z-index, initial);
186
+ /* While it would be nice to fall back to ia-dropdown's own default here by making this var
187
+ fall back to "initial", older Safari versions don't support that keyword in a var() fallback.
188
+ So instead we just restate ia-dropdown's current default 2 here as the fallback. */
189
+ --dropdown-z-index--: var(--dropdown-z-index, 2);
187
190
  }
188
191
 
189
192
  #container {
@@ -1 +1 @@
1
- {"version":3,"file":"ia-dropdown-search-bar.js","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { msg } from '@lit/localize';\nimport {\n css,\n html,\n LitElement,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { IaClearableTextInput } from '@internetarchive/ia-clearable-text-input';\nimport type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';\nimport type { SearchCategory, SearchRequestedDetail } from './models';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport searchIcon from './search.svg';\n\nimport '@internetarchive/ia-clearable-text-input';\nimport '@internetarchive/ia-dropdown';\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n CategoryChanged: 'categoryChanged',\n SearchRequested: 'searchRequested',\n};\n\n@customElement('ia-dropdown-search-bar')\nexport class IADropdownSearchBar extends LitElement {\n /** The query that appears in the search bar */\n @property({ type: String }) query?: string;\n\n /** Dropdown menu options (tab IDs + labels) */\n @property({ type: Array }) categories: SearchCategory[] = [];\n\n /** The currently selected dropdown category ID */\n @property({ type: String }) selectedCategory?: string;\n\n /** Placeholder text for the search input */\n @property({ type: String }) placeholder = msg('Search');\n\n /** Whether to use the mobile layout */\n @property({ type: Boolean }) useMobileView = false;\n\n /** Whether to hide the category dropdown to the left of the search bar */\n @property({ type: Boolean }) hideDropdown = false;\n\n /** Whether the search button should show its loading state */\n @property({ type: Boolean }) loading = false;\n\n @query('#search-input')\n private searchInput!: IaClearableTextInput;\n\n @query('#category-dropdown')\n private categoryDropdown?: IaDropdown;\n\n /** The effective selected category, falling back to the first in the list. */\n private get resolvedCategory(): string {\n return this.selectedCategory ?? this.categories?.[0]?.id ?? '';\n }\n\n render(): TemplateResult {\n return html`\n <div id=\"container\" part=\"container\" role=\"search\">\n <div\n id=\"main-bar\"\n part=\"main-bar\"\n class=${this.hideDropdown ? 'no-dropdown' : nothing}\n >\n ${this.hideDropdown ? nothing : this.dropdownTemplate}\n ${this.textBoxTemplate} ${this.searchButtonTemplate}\n </div>\n </div>\n `;\n }\n\n willUpdate(changed: PropertyValues) {\n // Push new categories down to the inner dropdown immediately, since ia-dropdown\n // mutates its own selected option on interaction which can cause Lit's\n // property-binding diff to miss the change in certain cases.\n if (changed.has('selectedCategory') || changed.has('categories')) {\n const resolved = this.resolvedCategory;\n if (\n this.categoryDropdown &&\n this.categoryDropdown.selectedOption !== resolved\n ) {\n this.categoryDropdown.selectedOption = resolved;\n }\n }\n }\n\n /**\n * Template for the category dropdown on the left side of the search bar.\n */\n private get dropdownTemplate(): TemplateResult {\n return html`\n <ia-dropdown\n id=\"category-dropdown\"\n part=\"category-dropdown\"\n displayCaret\n includeSelectedOption\n closeOnSelect\n closeOnEscape\n closeOnBackdropClick\n openViaButton\n .selectedOption=${this.resolvedCategory}\n .options=${this.categories}\n @optionSelected=${this.handleCategorySelected}\n >\n <span slot=\"dropdown-label\" part=\"category-dropdown-label\"\n >${this.selectedCategoryLabel}</span\n >\n </ia-dropdown>\n `;\n }\n\n /**\n * Template for the main text entry box of the search bar.\n */\n private get textBoxTemplate(): TemplateResult {\n return html`\n <ia-clearable-text-input\n id=\"search-input\"\n part=\"search-input\"\n .value=${this.spacedQuery}\n placeholder=${this.placeholder}\n clearButtonScreenReaderLabel=${msg('Clear search query')}\n screenReaderLabel=${msg(\n 'Search the Archive. Filters and Advanced Search available below.',\n )}\n @clear=${this.searchFieldCleared}\n @submit=${this.handleSubmit}\n ></ia-clearable-text-input>\n `;\n }\n\n /**\n * Template for the \"magnifying glass\" search button to the right of the search bar.\n */\n private get searchButtonTemplate(): TemplateResult {\n return html`\n <button\n id=\"search-button\"\n part=\"search-button\"\n class=${this.loading ? 'loading' : nothing}\n type=\"button\"\n aria-label=${msg('Search')}\n @click=${this.handleSubmit}\n >\n ${this.loading\n ? html`<ia-status-indicator\n mode=\"loading\"\n class=\"search-button-loading-icon\"\n ></ia-status-indicator>`\n : html`<img src=${searchIcon} alt=\"\" />`}\n </button>\n `;\n }\n\n /**\n * The display label for the currently selected category.\n */\n private get selectedCategoryLabel(): string | TemplateResult {\n const match = this.categories.find((c) => c.id === this.resolvedCategory);\n return match?.label ?? this.resolvedCategory;\n }\n\n /**\n * The current search query with +'s replaced by spaces.\n */\n private get spacedQuery(): string {\n return this.query?.replace(/\\+/g, ' ') ?? '';\n }\n\n /**\n * Handler for when the search bar's clear button is pressed.\n */\n private searchFieldCleared(): void {\n if (this.query) {\n this.emitSearchRequested();\n }\n }\n\n /**\n * Handler for Enter key or search button click.\n */\n private handleSubmit(): void {\n this.emitSearchRequested();\n }\n\n /**\n * Handler for when the user selects a category from the dropdown.\n *\n * Sets `selectedCategory` locally for immediate visual feedback (semi-controlled\n * pattern). The parent also binds this property and may re-set it on re-render.\n */\n private handleCategorySelected(\n e: CustomEvent<{ option: optionInterface }>,\n ): void {\n const newCategoryId = e.detail.option.id;\n if (newCategoryId === this.resolvedCategory) return;\n\n this.selectedCategory = newCategoryId;\n\n // On next tick, focus the text input bar (seemingly fails in Safari without the delay)\n setTimeout(() => this.searchInput.focus());\n\n this.dispatchEvent(\n new CustomEvent<string>(Events.CategoryChanged, {\n detail: newCategoryId,\n }),\n );\n }\n\n /**\n * Emits a `searchRequested` event with the current query and category.\n */\n private emitSearchRequested(): void {\n this.dispatchEvent(\n new CustomEvent<SearchRequestedDetail>(Events.SearchRequested, {\n detail: {\n query: this.searchInput.value,\n category: this.resolvedCategory,\n },\n }),\n );\n }\n\n static get styles() {\n const ownStyles = css`\n :host {\n --search-bar-height--: var(--search-bar-height, 30px);\n --search-bar-width--: var(--search-bar-width, 300px);\n --search-bar-internal-padding--: var(--padding-sm, 5px);\n --clear-button-offset--: var(--clear-button-offset, 0);\n --dropdown-z-index--: var(--dropdown-z-index, initial);\n }\n\n #container {\n display: inline-block;\n width: var(--search-bar-width--);\n }\n\n #main-bar {\n display: flex;\n height: var(--search-bar-height--, 30px);\n flex: 1;\n }\n\n #category-dropdown {\n display: flex;\n flex-shrink: 0;\n height: 100%;\n box-sizing: border-box;\n\n background-color: #f5f5f7;\n border: 1px solid #999;\n border-radius: 5px 0 0 5px;\n\n --dropdownMainButtonPadding: 0 var(--search-bar-internal-padding--, 5px);\n --dropdownBgColor: #2c2c2c;\n --dropdownTextColor: #fff;\n --dropdownBorderColor: #ddd;\n --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\n --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\n --dropdownHoverTextColor: #fff;\n --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\n --dropdownSelectedTextColor: #fff;\n --dropdownWhiteSpace: nowrap;\n --dropdownOffsetTop: 2px;\n --caretHeight: 8px;\n --caretWidth: 12px;\n --caretPadding: 0 0 0 5px;\n --dropdownFontSize: inherit;\n --dropdownBorderRadius: 4px;\n --buttonSlotPaddingRight: 0;\n --dropdownTextAlign: left;\n --dropdownListZIndex: var(--dropdown-z-index--);\n }\n\n #category-dropdown [slot='dropdown-label'] {\n color: var(--ia-theme-primary-text-color, #2c2c2c);\n font-size: 1.4rem;\n font-family: inherit;\n white-space: nowrap;\n }\n\n .no-dropdown #search-input {\n border-left: 1px solid #999;\n border-radius: 5px 0 0 5px;\n overflow: hidden;\n }\n\n #search-input {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border-top: 1px solid #999;\n border-bottom: 1px solid #999;\n font-size: inherit;\n\n --input-height: calc(var(--search-bar-height--) - 2px);\n --input-padding: 0 var(--search-bar-internal-padding--, 5px);\n --input-background-color: var(\n --ia-theme-secondary-background-color,\n #fff\n );\n --input-border-radius: 0;\n --input-border-width: 0;\n --input-box-shadow: none;\n --input-focused-box-shadow: none;\n --input-font-size: auto;\n --clear-button-top: var(--clear-button-offset--, 0);\n --clear-button-right: 2px;\n }\n\n #search-button {\n appearance: none;\n box-sizing: border-box;\n border-radius: 0 5px 5px 0;\n background-color: var(--ia-theme-secondary-background-color, #fff);\n border: 1px solid #999;\n border-left: 0;\n padding: 0 var(--search-bar-internal-padding--, 5px) 0 5px;\n min-width: 30px;\n height: 100%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n #search-button img {\n width: 18px;\n height: 18px;\n }\n\n .search-button-loading-icon {\n --icon-width: 20px;\n margin-top: 2px;\n }\n `;\n\n return [themeStyles, ownStyles];\n }\n}\n"]}
1
+ {"version":3,"file":"ia-dropdown-search-bar.js","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { msg } from '@lit/localize';\nimport {\n css,\n html,\n LitElement,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { IaClearableTextInput } from '@internetarchive/ia-clearable-text-input';\nimport type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';\nimport type { SearchCategory, SearchRequestedDetail } from './models';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport searchIcon from './search.svg';\n\nimport '@internetarchive/ia-clearable-text-input';\nimport '@internetarchive/ia-dropdown';\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n CategoryChanged: 'categoryChanged',\n SearchRequested: 'searchRequested',\n};\n\n@customElement('ia-dropdown-search-bar')\nexport class IADropdownSearchBar extends LitElement {\n /** The query that appears in the search bar */\n @property({ type: String }) query?: string;\n\n /** Dropdown menu options (tab IDs + labels) */\n @property({ type: Array }) categories: SearchCategory[] = [];\n\n /** The currently selected dropdown category ID */\n @property({ type: String }) selectedCategory?: string;\n\n /** Placeholder text for the search input */\n @property({ type: String }) placeholder = msg('Search');\n\n /** Whether to use the mobile layout */\n @property({ type: Boolean }) useMobileView = false;\n\n /** Whether to hide the category dropdown to the left of the search bar */\n @property({ type: Boolean }) hideDropdown = false;\n\n /** Whether the search button should show its loading state */\n @property({ type: Boolean }) loading = false;\n\n @query('#search-input')\n private searchInput!: IaClearableTextInput;\n\n @query('#category-dropdown')\n private categoryDropdown?: IaDropdown;\n\n /** The effective selected category, falling back to the first in the list. */\n private get resolvedCategory(): string {\n return this.selectedCategory ?? this.categories?.[0]?.id ?? '';\n }\n\n render(): TemplateResult {\n return html`\n <div id=\"container\" part=\"container\" role=\"search\">\n <div\n id=\"main-bar\"\n part=\"main-bar\"\n class=${this.hideDropdown ? 'no-dropdown' : nothing}\n >\n ${this.hideDropdown ? nothing : this.dropdownTemplate}\n ${this.textBoxTemplate} ${this.searchButtonTemplate}\n </div>\n </div>\n `;\n }\n\n willUpdate(changed: PropertyValues) {\n // Push new categories down to the inner dropdown immediately, since ia-dropdown\n // mutates its own selected option on interaction which can cause Lit's\n // property-binding diff to miss the change in certain cases.\n if (changed.has('selectedCategory') || changed.has('categories')) {\n const resolved = this.resolvedCategory;\n if (\n this.categoryDropdown &&\n this.categoryDropdown.selectedOption !== resolved\n ) {\n this.categoryDropdown.selectedOption = resolved;\n }\n }\n }\n\n /**\n * Template for the category dropdown on the left side of the search bar.\n */\n private get dropdownTemplate(): TemplateResult {\n return html`\n <ia-dropdown\n id=\"category-dropdown\"\n part=\"category-dropdown\"\n displayCaret\n includeSelectedOption\n closeOnSelect\n closeOnEscape\n closeOnBackdropClick\n openViaButton\n .selectedOption=${this.resolvedCategory}\n .options=${this.categories}\n @optionSelected=${this.handleCategorySelected}\n >\n <span slot=\"dropdown-label\" part=\"category-dropdown-label\"\n >${this.selectedCategoryLabel}</span\n >\n </ia-dropdown>\n `;\n }\n\n /**\n * Template for the main text entry box of the search bar.\n */\n private get textBoxTemplate(): TemplateResult {\n return html`\n <ia-clearable-text-input\n id=\"search-input\"\n part=\"search-input\"\n .value=${this.spacedQuery}\n placeholder=${this.placeholder}\n clearButtonScreenReaderLabel=${msg('Clear search query')}\n screenReaderLabel=${msg(\n 'Search the Archive. Filters and Advanced Search available below.',\n )}\n @clear=${this.searchFieldCleared}\n @submit=${this.handleSubmit}\n ></ia-clearable-text-input>\n `;\n }\n\n /**\n * Template for the \"magnifying glass\" search button to the right of the search bar.\n */\n private get searchButtonTemplate(): TemplateResult {\n return html`\n <button\n id=\"search-button\"\n part=\"search-button\"\n class=${this.loading ? 'loading' : nothing}\n type=\"button\"\n aria-label=${msg('Search')}\n @click=${this.handleSubmit}\n >\n ${this.loading\n ? html`<ia-status-indicator\n mode=\"loading\"\n class=\"search-button-loading-icon\"\n ></ia-status-indicator>`\n : html`<img src=${searchIcon} alt=\"\" />`}\n </button>\n `;\n }\n\n /**\n * The display label for the currently selected category.\n */\n private get selectedCategoryLabel(): string | TemplateResult {\n const match = this.categories.find((c) => c.id === this.resolvedCategory);\n return match?.label ?? this.resolvedCategory;\n }\n\n /**\n * The current search query with +'s replaced by spaces.\n */\n private get spacedQuery(): string {\n return this.query?.replace(/\\+/g, ' ') ?? '';\n }\n\n /**\n * Handler for when the search bar's clear button is pressed.\n */\n private searchFieldCleared(): void {\n if (this.query) {\n this.emitSearchRequested();\n }\n }\n\n /**\n * Handler for Enter key or search button click.\n */\n private handleSubmit(): void {\n this.emitSearchRequested();\n }\n\n /**\n * Handler for when the user selects a category from the dropdown.\n *\n * Sets `selectedCategory` locally for immediate visual feedback (semi-controlled\n * pattern). The parent also binds this property and may re-set it on re-render.\n */\n private handleCategorySelected(\n e: CustomEvent<{ option: optionInterface }>,\n ): void {\n const newCategoryId = e.detail.option.id;\n if (newCategoryId === this.resolvedCategory) return;\n\n this.selectedCategory = newCategoryId;\n\n // On next tick, focus the text input bar (seemingly fails in Safari without the delay)\n setTimeout(() => this.searchInput.focus());\n\n this.dispatchEvent(\n new CustomEvent<string>(Events.CategoryChanged, {\n detail: newCategoryId,\n }),\n );\n }\n\n /**\n * Emits a `searchRequested` event with the current query and category.\n */\n private emitSearchRequested(): void {\n this.dispatchEvent(\n new CustomEvent<SearchRequestedDetail>(Events.SearchRequested, {\n detail: {\n query: this.searchInput.value,\n category: this.resolvedCategory,\n },\n }),\n );\n }\n\n static get styles() {\n const ownStyles = css`\n :host {\n --search-bar-height--: var(--search-bar-height, 30px);\n --search-bar-width--: var(--search-bar-width, 300px);\n --search-bar-internal-padding--: var(--padding-sm, 5px);\n --clear-button-offset--: var(--clear-button-offset, 0);\n /* While it would be nice to fall back to ia-dropdown's own default here by making this var\n fall back to \"initial\", older Safari versions don't support that keyword in a var() fallback.\n So instead we just restate ia-dropdown's current default 2 here as the fallback. */\n --dropdown-z-index--: var(--dropdown-z-index, 2);\n }\n\n #container {\n display: inline-block;\n width: var(--search-bar-width--);\n }\n\n #main-bar {\n display: flex;\n height: var(--search-bar-height--, 30px);\n flex: 1;\n }\n\n #category-dropdown {\n display: flex;\n flex-shrink: 0;\n height: 100%;\n box-sizing: border-box;\n\n background-color: #f5f5f7;\n border: 1px solid #999;\n border-radius: 5px 0 0 5px;\n\n --dropdownMainButtonPadding: 0 var(--search-bar-internal-padding--, 5px);\n --dropdownBgColor: #2c2c2c;\n --dropdownTextColor: #fff;\n --dropdownBorderColor: #ddd;\n --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\n --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\n --dropdownHoverTextColor: #fff;\n --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\n --dropdownSelectedTextColor: #fff;\n --dropdownWhiteSpace: nowrap;\n --dropdownOffsetTop: 2px;\n --caretHeight: 8px;\n --caretWidth: 12px;\n --caretPadding: 0 0 0 5px;\n --dropdownFontSize: inherit;\n --dropdownBorderRadius: 4px;\n --buttonSlotPaddingRight: 0;\n --dropdownTextAlign: left;\n --dropdownListZIndex: var(--dropdown-z-index--);\n }\n\n #category-dropdown [slot='dropdown-label'] {\n color: var(--ia-theme-primary-text-color, #2c2c2c);\n font-size: 1.4rem;\n font-family: inherit;\n white-space: nowrap;\n }\n\n .no-dropdown #search-input {\n border-left: 1px solid #999;\n border-radius: 5px 0 0 5px;\n overflow: hidden;\n }\n\n #search-input {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border-top: 1px solid #999;\n border-bottom: 1px solid #999;\n font-size: inherit;\n\n --input-height: calc(var(--search-bar-height--) - 2px);\n --input-padding: 0 var(--search-bar-internal-padding--, 5px);\n --input-background-color: var(\n --ia-theme-secondary-background-color,\n #fff\n );\n --input-border-radius: 0;\n --input-border-width: 0;\n --input-box-shadow: none;\n --input-focused-box-shadow: none;\n --input-font-size: auto;\n --clear-button-top: var(--clear-button-offset--, 0);\n --clear-button-right: 2px;\n }\n\n #search-button {\n appearance: none;\n box-sizing: border-box;\n border-radius: 0 5px 5px 0;\n background-color: var(--ia-theme-secondary-background-color, #fff);\n border: 1px solid #999;\n border-left: 0;\n padding: 0 var(--search-bar-internal-padding--, 5px) 0 5px;\n min-width: 30px;\n height: 100%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n #search-button img {\n width: 18px;\n height: 18px;\n }\n\n .search-button-loading-icon {\n --icon-width: 20px;\n margin-top: 2px;\n }\n `;\n\n return [themeStyles, ownStyles];\n }\n}\n"]}
@@ -1,10 +1,10 @@
1
- <svg
2
- viewBox="0 0 100 100"
3
- xmlns="http://www.w3.org/2000/svg">
4
- <path
5
- class="fill-color"
6
- d="m17.0555551 41.3194459c0-12.7430552 10.3541664-23.1027772 23.0847216-23.1027772 12.7166664 0 23.0777773 10.359722 23.0777773 23.1027772 0 12.7361108-10.3611109 23.0986106-23.0777773 23.0986106-12.7305552 0-23.0847216-10.3624998-23.0847216-23.0986106zm-17.24305512 0c0 22.2916661 18.04583292 40.3472213 40.32777672 40.3472213 8.9208332 0 17.145833-2.9319449 23.8194439-7.8527776l24.1513883 24.0777771c1.2125 1.1402778 2.8430555 1.8430556 4.6374999 1.8430556 3.7444443 0 6.7805554-3.0361111 6.7805554-6.7791665 0-2.0652778-.9222222-3.9069444-2.3736111-5.1499999l-23.718055-23.7458328c4.4152777-6.4791665 7.0152776-14.3055552 7.0152776-22.7402772 0-22.2791661-18.0458328-40.34861006-40.312499-40.34861006-22.2819438 0-40.32777672 18.06944396-40.32777672 40.34861006z"
7
- fill="#2c2c2c"
8
- fill-rule="evenodd"
9
- />
10
- </svg>
1
+ <svg
2
+ viewBox="0 0 100 100"
3
+ xmlns="http://www.w3.org/2000/svg">
4
+ <path
5
+ class="fill-color"
6
+ d="m17.0555551 41.3194459c0-12.7430552 10.3541664-23.1027772 23.0847216-23.1027772 12.7166664 0 23.0777773 10.359722 23.0777773 23.1027772 0 12.7361108-10.3611109 23.0986106-23.0777773 23.0986106-12.7305552 0-23.0847216-10.3624998-23.0847216-23.0986106zm-17.24305512 0c0 22.2916661 18.04583292 40.3472213 40.32777672 40.3472213 8.9208332 0 17.145833-2.9319449 23.8194439-7.8527776l24.1513883 24.0777771c1.2125 1.1402778 2.8430555 1.8430556 4.6374999 1.8430556 3.7444443 0 6.7805554-3.0361111 6.7805554-6.7791665 0-2.0652778-.9222222-3.9069444-2.3736111-5.1499999l-23.718055-23.7458328c4.4152777-6.4791665 7.0152776-14.3055552 7.0152776-22.7402772 0-22.2791661-18.0458328-40.34861006-40.312499-40.34861006-22.2819438 0-40.32777672 18.06944396-40.32777672 40.34861006z"
7
+ fill="#2c2c2c"
8
+ fill-rule="evenodd"
9
+ />
10
+ </svg>
@@ -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;AAUjD;;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,GAgBnC;YAGa,sBAAsB;IAUpC,MAAM,KAAK,MAAM,IAAI,cAAc,CAkElC;CACF"}
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
- class="new-code-btn link"
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":"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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';\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 <button\n class=\"new-code-btn link\"\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 </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-btn {\n font-family: inherit;\n font-size: var(--font-size-standard--);\n display: block;\n width: fit-content;\n margin-top: 10px;\n border: 0;\n padding: 0;\n appearance: none;\n background: none;\n color: var(--link-color--);\n text-decoration: none;\n cursor: pointer;\n }\n\n .new-code-btn:hover,\n .new-code-btn:focus {\n text-decoration: underline;\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"]}
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"]}
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="36.283" height="36.283"><path d="M35.531 17.391h-3.09l.845-1.464a.748.748 0 1 0-1.297-.75l-1.276 2.214H28.61l2.515-4.354a.751.751 0 0 0-.272-1.024.75.75 0 0 0-1.024.274l-2.948 5.104h-2.023a6.751 6.751 0 0 0-2.713-4.684l1.019-1.76 5.896-.002a.75.75 0 0 0 0-1.5l-5.029.002 1.051-1.82 2.557.002a.75.75 0 0 0 0-1.5l-1.689-.002 1.545-2.676a.75.75 0 1 0-1.302-.75l-1.547 2.676-.844-1.463a.749.749 0 1 0-1.297.75l1.278 2.213-1.051 1.818-2.514-4.354a.75.75 0 0 0-1.298.75l2.946 5.104-1.016 1.758a6.692 6.692 0 0 0-2.706-.57 6.74 6.74 0 0 0-2.707.568l-1.013-1.754 2.946-5.105a.75.75 0 0 0-1.298-.75L13.56 8.697l-1.05-1.818 1.278-2.217a.749.749 0 0 0-1.298-.75l-.845 1.465-1.551-2.678a.75.75 0 0 0-1.024-.273.748.748 0 0 0-.274 1.023l1.545 2.678H8.652a.75.75 0 0 0 0 1.5h2.556l1.05 1.818H7.231a.75.75 0 0 0 0 1.5h5.894l1.017 1.762a6.755 6.755 0 0 0-2.712 4.684H9.406l-2.95-5.104a.75.75 0 1 0-1.299.75l2.516 4.354H5.569l-1.277-2.213a.75.75 0 0 0-1.298.75l.845 1.463H.75a.75.75 0 0 0 0 1.5h3.09l-.845 1.465a.747.747 0 0 0 .275 1.022.75.75 0 0 0 .374.103.75.75 0 0 0 .65-.375l1.277-2.215h2.103l-2.516 4.354a.75.75 0 0 0 1.299.75l2.949-5.104h2.024a6.761 6.761 0 0 0 2.712 4.685l-1.017 1.762H7.232a.75.75 0 0 0 0 1.5h5.026l-1.05 1.818H8.651a.75.75 0 0 0 0 1.5h1.69l-1.545 2.676a.75.75 0 0 0 1.299.75l1.546-2.676.846 1.465a.755.755 0 0 0 .65.375.737.737 0 0 0 .375-.103.747.747 0 0 0 .274-1.022l-1.279-2.215 1.05-1.82 2.515 4.354a.75.75 0 0 0 1.299-.75l-2.947-5.104 1.013-1.756a6.72 6.72 0 0 0 5.415 0l1.014 1.756-2.947 5.104a.75.75 0 0 0 1.298.75l2.515-4.354 1.053 1.82-1.277 2.213a.75.75 0 0 0 1.298.75l.844-1.463 1.545 2.678c.141.24.393.375.65.375a.75.75 0 0 0 .649-1.125l-1.548-2.678h1.689a.75.75 0 0 0 0-1.5h-2.557l-1.051-1.82 5.029.002a.75.75 0 0 0 0-1.5l-5.896-.002-1.019-1.76a6.75 6.75 0 0 0 2.711-4.685h2.023l2.947 5.104a.753.753 0 0 0 1.025.273.749.749 0 0 0 .272-1.023l-2.515-4.354h2.104l1.279 2.215a.75.75 0 0 0 .649.375c.127 0 .256-.03.375-.103a.748.748 0 0 0 .273-1.022l-.848-1.465h3.092a.75.75 0 0 0 .003-1.5zm-12.136.75c0 .257-.041.502-.076.75a5.223 5.223 0 0 1-1.943 3.358 5.242 5.242 0 0 1-1.291.766 5.224 5.224 0 0 1-1.949.384 5.157 5.157 0 0 1-3.239-1.15 5.22 5.22 0 0 1-1.943-3.358c-.036-.247-.076-.493-.076-.75s.04-.503.076-.75a5.22 5.22 0 0 1 1.944-3.359c.393-.312.82-.576 1.291-.765a5.219 5.219 0 0 1 1.948-.384c.69 0 1.344.142 1.948.384.471.188.898.454 1.291.765a5.222 5.222 0 0 1 1.943 3.359c.035.247.076.493.076.75z" fill=":color:"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="36.283" height="36.283"><path d="M35.531 17.391h-3.09l.845-1.464a.748.748 0 1 0-1.297-.75l-1.276 2.214H28.61l2.515-4.354a.751.751 0 0 0-.272-1.024.75.75 0 0 0-1.024.274l-2.948 5.104h-2.023a6.751 6.751 0 0 0-2.713-4.684l1.019-1.76 5.896-.002a.75.75 0 0 0 0-1.5l-5.029.002 1.051-1.82 2.557.002a.75.75 0 0 0 0-1.5l-1.689-.002 1.545-2.676a.75.75 0 1 0-1.302-.75l-1.547 2.676-.844-1.463a.749.749 0 1 0-1.297.75l1.278 2.213-1.051 1.818-2.514-4.354a.75.75 0 0 0-1.298.75l2.946 5.104-1.016 1.758a6.692 6.692 0 0 0-2.706-.57 6.74 6.74 0 0 0-2.707.568l-1.013-1.754 2.946-5.105a.75.75 0 0 0-1.298-.75L13.56 8.697l-1.05-1.818 1.278-2.217a.749.749 0 0 0-1.298-.75l-.845 1.465-1.551-2.678a.75.75 0 0 0-1.024-.273.748.748 0 0 0-.274 1.023l1.545 2.678H8.652a.75.75 0 0 0 0 1.5h2.556l1.05 1.818H7.231a.75.75 0 0 0 0 1.5h5.894l1.017 1.762a6.755 6.755 0 0 0-2.712 4.684H9.406l-2.95-5.104a.75.75 0 1 0-1.299.75l2.516 4.354H5.569l-1.277-2.213a.75.75 0 0 0-1.298.75l.845 1.463H.75a.75.75 0 0 0 0 1.5h3.09l-.845 1.465a.747.747 0 0 0 .275 1.022.75.75 0 0 0 .374.103.75.75 0 0 0 .65-.375l1.277-2.215h2.103l-2.516 4.354a.75.75 0 0 0 1.299.75l2.949-5.104h2.024a6.761 6.761 0 0 0 2.712 4.685l-1.017 1.762H7.232a.75.75 0 0 0 0 1.5h5.026l-1.05 1.818H8.651a.75.75 0 0 0 0 1.5h1.69l-1.545 2.676a.75.75 0 0 0 1.299.75l1.546-2.676.846 1.465a.755.755 0 0 0 .65.375.737.737 0 0 0 .375-.103.747.747 0 0 0 .274-1.022l-1.279-2.215 1.05-1.82 2.515 4.354a.75.75 0 0 0 1.299-.75l-2.947-5.104 1.013-1.756a6.72 6.72 0 0 0 5.415 0l1.014 1.756-2.947 5.104a.75.75 0 0 0 1.298.75l2.515-4.354 1.053 1.82-1.277 2.213a.75.75 0 0 0 1.298.75l.844-1.463 1.545 2.678c.141.24.393.375.65.375a.75.75 0 0 0 .649-1.125l-1.548-2.678h1.689a.75.75 0 0 0 0-1.5h-2.557l-1.051-1.82 5.029.002a.75.75 0 0 0 0-1.5l-5.896-.002-1.019-1.76a6.75 6.75 0 0 0 2.711-4.685h2.023l2.947 5.104a.753.753 0 0 0 1.025.273.749.749 0 0 0 .272-1.023l-2.515-4.354h2.104l1.279 2.215a.75.75 0 0 0 .649.375c.127 0 .256-.03.375-.103a.748.748 0 0 0 .273-1.022l-.848-1.465h3.092a.75.75 0 0 0 .003-1.5zm-12.136.75c0 .257-.041.502-.076.75a5.223 5.223 0 0 1-1.943 3.358 5.242 5.242 0 0 1-1.291.766 5.224 5.224 0 0 1-1.949.384 5.157 5.157 0 0 1-3.239-1.15 5.22 5.22 0 0 1-1.943-3.358c-.036-.247-.076-.493-.076-.75s.04-.503.076-.75a5.22 5.22 0 0 1 1.944-3.359c.393-.312.82-.576 1.291-.765a5.219 5.219 0 0 1 1.948-.384c.69 0 1.344.142 1.948.384.471.188.898.454 1.291.765a5.222 5.222 0 0 1 1.943 3.359c.035.247.076.493.076.75z" fill=":color:"/></svg>
@@ -7,7 +7,7 @@ export declare class IASnow extends LitElement {
7
7
  snowConfig?: SnowflakesParams;
8
8
  private snowing;
9
9
  private snowflakes?;
10
- render(): import("lit-html").TemplateResult<1>;
10
+ render(): import("lit").TemplateResult<1>;
11
11
  protected willUpdate(_changedProperties: PropertyValues): void;
12
12
  private get startButtonTemplate();
13
13
  private get clearButtonTemplate();
package/package.json CHANGED
@@ -1,10 +1,15 @@
1
1
  {
2
2
  "name": "@internetarchive/elements",
3
- "version": "0.2.10",
3
+ "version": "0.2.12-alpha-webdev8888.0",
4
4
  "description": "A web component library from the Internet Archive.",
5
5
  "license": "AGPL-3.0-only",
6
6
  "types": "./dist/src/elements/index.d.ts",
7
7
  "type": "module",
8
+ "packageManager": "pnpm@11.13.0",
9
+ "engines": {
10
+ "node": ">=24",
11
+ "pnpm": ">=11"
12
+ },
8
13
  "publishConfig": {
9
14
  "access": "public"
10
15
  },
@@ -35,8 +40,11 @@
35
40
  "tslib": "^2.8.1"
36
41
  },
37
42
  "devDependencies": {
43
+ "@eslint/eslintrc": "^3.3.5",
44
+ "@eslint/js": "^9.39.1",
38
45
  "@open-wc/testing-helpers": "^3.0.1",
39
46
  "@typescript-eslint/eslint-plugin": "^8.46.4",
47
+ "@typescript-eslint/parser": "^8.46.4",
40
48
  "@vitest/browser": "^4.0.8",
41
49
  "@vitest/browser-playwright": "^4.0.8",
42
50
  "@vitest/coverage-v8": "^4.0.8",
@@ -51,7 +59,7 @@
51
59
  "highlight.js": "^11.11.1",
52
60
  "madge": "^8.0.0",
53
61
  "playwright": "^1.60.0",
54
- "prettier": "^3.6.2",
62
+ "prettier": "3.6.2",
55
63
  "ts-lit-plugin": "^2.0.2",
56
64
  "tsc-alias": "^1.8.16",
57
65
  "typescript": "^5.9.3",