@internetarchive/elements 0.2.3-alpha-webdev8378.2 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/LICENSE +661 -661
  2. package/README.md +320 -320
  3. package/dist/src/elements/ia-combo-box/caret-closed.svg +8 -8
  4. package/dist/src/elements/ia-combo-box/caret-open.svg +8 -8
  5. package/dist/src/elements/ia-combo-box/clear.svg +8 -8
  6. package/dist/src/elements/ia-otp-form/ia-otp-form.js +88 -88
  7. package/dist/src/elements/ia-otp-form/ia-otp-form.js.map +1 -1
  8. package/dist/src/elements/ia-status-indicator/ia-status-indicator.js +149 -149
  9. package/dist/src/elements/ia-status-indicator/ia-status-indicator.js.map +1 -1
  10. package/dist/src/labs/ia-snow/flake.svg +1 -1
  11. package/dist/src/themes/theme-styles.d.ts.map +1 -1
  12. package/dist/src/themes/theme-styles.js +77 -87
  13. package/dist/src/themes/theme-styles.js.map +1 -1
  14. package/package.json +118 -120
  15. package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.d.ts +0 -71
  16. package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.d.ts.map +0 -1
  17. package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.js +0 -319
  18. package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.js.map +0 -1
  19. package/dist/src/elements/ia-dropdown-search-bar/models.d.ts +0 -16
  20. package/dist/src/elements/ia-dropdown-search-bar/models.d.ts.map +0 -1
  21. package/dist/src/elements/ia-dropdown-search-bar/models.js +0 -2
  22. package/dist/src/elements/ia-dropdown-search-bar/models.js.map +0 -1
  23. package/dist/src/elements/ia-dropdown-search-bar/search.svg +0 -10
package/dist/src/elements/ia-status-indicator/ia-status-indicator.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ia-status-indicator.js","sourceRoot":"","sources":["../../../../src/elements/ia-status-indicator/ia-status-indicator.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { msg } from '@lit/localize';\r\nimport { choose } from 'lit/directives/choose.js';\r\n\r\nimport themeStyles from '@src/themes/theme-styles';\r\n\r\nexport type LoadingStatus = 'ready' | 'loading' | 'success' | 'error';\r\n\r\n/**\r\n * Renders an SVG indicator, which defualts to an animated circular indicator\r\n */\r\n@customElement('ia-status-indicator')\r\nexport class IAStatusIndicator extends LitElement {\r\n /* An optional title to use for the loading state of the indicator. Will be used for screen readers. */\r\n @property({ type: String }) loadingTitle = msg('Loading...');\r\n\r\n /* An optional title to use for the success state of the indicator. Will be used for screen readers. */\r\n @property({ type: String }) successTitle = msg('Success');\r\n\r\n /* An optional title to use for the error state of the indicator. Will be used for screen readers. */\r\n @property({ type: String }) errorTitle = msg('Error');\r\n\r\n /* Which type of loading indicator to display */\r\n @property({ type: String }) loadingStyle: 'ring' | 'ring-dots' = 'ring-dots';\r\n\r\n /* The state of the indicator that should be shown */\r\n @property({ type: String }) mode: LoadingStatus = 'loading';\r\n\r\n render(): TemplateResult {\r\n return html`${choose(this.mode, [\r\n ['ready', () => this.placeholderTemplate],\r\n ['loading', () => this.loadingIndicatorTemplate],\r\n ['success', () => this.successIndicatorTemplate],\r\n ['error', () => this.errorIndicatorTemplate],\r\n ])}`;\r\n }\r\n\r\n /** A placeholder to render before loading begins, if desired */\r\n private get placeholderTemplate(): TemplateResult {\r\n return html`<div class=\"placeholder\"></div>`;\r\n }\r\n\r\n /** A circular loading indicator to render when processing */\r\n private get loadingIndicatorTemplate(): TemplateResult {\r\n return html`\r\n <svg\r\n class=\"loading-indicator\"\r\n viewBox=\"0 0 120 120\"\r\n preserveAspectRatio=\"none\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n role=\"status\"\r\n >\r\n <title>${this.loadingTitle}</title>\r\n <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\r\n <path\r\n class=\"loading-ring\"\r\n d=\"M60,10 C69.8019971,10 78.9452178,12.8205573 86.6623125,17.6943223 L76.4086287,27.9484118 C71.4880919,25.4243078 65.9103784,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 C96,53.3014663 94.1704984,47.0302355 90.9839104,41.6587228 L101.110332,31.5326452 C106.715332,39.6116982 110,49.4222615 110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z\"\r\n ></path>\r\n <g\r\n class=\"loading-dots ${!this.shouldShowLoadingDots ? 'hidden' : ''}\"\r\n transform=\"translate(40.000000, 55.000000)\"\r\n >\r\n <circle id=\"left-dot\" cx=\"5\" cy=\"5\" r=\"5\"></circle>\r\n <circle id=\"middle-dot\" cx=\"20\" cy=\"5\" r=\"5\"></circle>\r\n <circle id=\"right-dot\" cx=\"35\" cy=\"5\" r=\"5\"></circle>\r\n </g>\r\n </g>\r\n </svg>\r\n `;\r\n }\r\n\r\n /** A check mark to render on success */\r\n private get successIndicatorTemplate(): TemplateResult {\r\n return html`\r\n <svg\r\n class=\"success-indicator\"\r\n viewBox=\"0 0 120 120\"\r\n preserveAspectRatio=\"none\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n role=\"status\"\r\n >\r\n <title>${this.successTitle}</title>\r\n <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\r\n <path\r\n class=\"success-icon\"\r\n d=\"M60,10 C70.5816709,10 80.3955961,13.2871104 88.4763646,18.8959201 L78.3502633,29.0214223 C72.9767592,25.8315427 66.7022695,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 L95.995,59.46 L108.327675,47.128668 C109.350926,50.9806166 109.925886,55.015198 109.993301,59.1731586 L110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z\"\r\n ></path>\r\n <polygon\r\n class=\"success-icon\"\r\n transform=\"translate(75.000000, 41.500000) rotate(44.000000) translate(-75.000000, -41.500000) \"\r\n points=\"96 85 54 85 54 65 76 64.999 76 -2 96 -2\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n `;\r\n }\r\n\r\n /** An \"!\" to render on error */\r\n private get errorIndicatorTemplate(): TemplateResult {\r\n return html`\r\n <svg\r\n class=\"error-indicator\"\r\n viewBox=\"0 0 120 120\"\r\n preserveAspectRatio=\"none\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n role=\"status\"\r\n >\r\n <title>${this.errorTitle}</title>\r\n <path\r\n class=\"error-icon\"\r\n d=\"m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714zm28.5387507 75.19549646-35.037482-62-34.962518 62zm-31-34.7484359v-10.2515641h-8v10.2515641l2.089172 14.7484359h3.8184713zm-8 19.7484359v8h8v-8z\"\r\n />\r\n </svg>\r\n `;\r\n }\r\n\r\n /* Whether to include the dots in the loading indicator */\r\n private get shouldShowLoadingDots(): boolean {\r\n if (this.loadingStyle === 'ring') return false;\r\n\r\n return true;\r\n }\r\n\r\n static get styles(): CSSResultGroup {\r\n return [\r\n themeStyles,\r\n css`\r\n :host {\r\n --indicator-width--: var(--icon-width);\r\n\r\n /* Loading */\r\n --loading-ring-color--: var(--primary-text-color);\r\n --loading-dot-color--: var(--primary-text-color);\r\n\r\n /* Success */\r\n --success-icon-color--: var(--color-success);\r\n\r\n /* Error */\r\n --error-icon-color--: var(--color-danger);\r\n\r\n display: inline-block;\r\n width: var(--indicator-width--);\r\n }\r\n\r\n .placeholder {\r\n height: var(--indicator-width--);\r\n }\r\n\r\n .success-icon {\r\n fill: var(--success-icon-color--);\r\n }\r\n\r\n .error-icon {\r\n fill: var(--error-icon-color--);\r\n }\r\n\r\n .loading-ring {\r\n fill: var(--loading-ring-color--);\r\n animation: rotate 1.3s infinite linear;\r\n transform-origin: 50px 50px;\r\n transform-box: fill-box;\r\n }\r\n\r\n .loading-dots {\r\n fill: var(--loading-dot-color--);\r\n transition: opacity 0.25s ease-out;\r\n }\r\n\r\n .loading-dots.hidden {\r\n display: none;\r\n }\r\n\r\n .loading-dots > * {\r\n opacity: 0;\r\n animation: dot 1.3s infinite;\r\n }\r\n\r\n .loading-dots #left-dot {\r\n animation-delay: 0.2s;\r\n }\r\n\r\n .loading-dots #middle-dot {\r\n animation-delay: 0.4s;\r\n }\r\n\r\n .loading-dots #right-dot {\r\n animation-delay: 0.6s;\r\n }\r\n\r\n @keyframes rotate {\r\n 0% {\r\n transform: rotate(-360deg);\r\n }\r\n 100% {\r\n /* This frame is supposed to be inferred, but Safari doesn't rotate it unless we're explicit */\r\n transform: rotate(0deg);\r\n }\r\n }\r\n\r\n @keyframes dot {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 25% {\r\n opacity: 1;\r\n }\r\n 100% {\r\n opacity: 0;\r\n }\r\n }\r\n `,\r\n ];\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"ia-status-indicator.js","sourceRoot":"","sources":["../../../../src/elements/ia-status-indicator/ia-status-indicator.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport { choose } from 'lit/directives/choose.js';\n\nimport themeStyles from '@src/themes/theme-styles';\n\nexport type LoadingStatus = 'ready' | 'loading' | 'success' | 'error';\n\n/**\n * Renders an SVG indicator, which defualts to an animated circular indicator\n */\n@customElement('ia-status-indicator')\nexport class IAStatusIndicator extends LitElement {\n /* An optional title to use for the loading state of the indicator. Will be used for screen readers. */\n @property({ type: String }) loadingTitle = msg('Loading...');\n\n /* An optional title to use for the success state of the indicator. Will be used for screen readers. */\n @property({ type: String }) successTitle = msg('Success');\n\n /* An optional title to use for the error state of the indicator. Will be used for screen readers. */\n @property({ type: String }) errorTitle = msg('Error');\n\n /* Which type of loading indicator to display */\n @property({ type: String }) loadingStyle: 'ring' | 'ring-dots' = 'ring-dots';\n\n /* The state of the indicator that should be shown */\n @property({ type: String }) mode: LoadingStatus = 'loading';\n\n render(): TemplateResult {\n return html`${choose(this.mode, [\n ['ready', () => this.placeholderTemplate],\n ['loading', () => this.loadingIndicatorTemplate],\n ['success', () => this.successIndicatorTemplate],\n ['error', () => this.errorIndicatorTemplate],\n ])}`;\n }\n\n /** A placeholder to render before loading begins, if desired */\n private get placeholderTemplate(): TemplateResult {\n return html`<div class=\"placeholder\"></div>`;\n }\n\n /** A circular loading indicator to render when processing */\n private get loadingIndicatorTemplate(): TemplateResult {\n return html`\n <svg\n class=\"loading-indicator\"\n viewBox=\"0 0 120 120\"\n preserveAspectRatio=\"none\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n role=\"status\"\n >\n <title>${this.loadingTitle}</title>\n <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n <path\n class=\"loading-ring\"\n d=\"M60,10 C69.8019971,10 78.9452178,12.8205573 86.6623125,17.6943223 L76.4086287,27.9484118 C71.4880919,25.4243078 65.9103784,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 C96,53.3014663 94.1704984,47.0302355 90.9839104,41.6587228 L101.110332,31.5326452 C106.715332,39.6116982 110,49.4222615 110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z\"\n ></path>\n <g\n class=\"loading-dots ${!this.shouldShowLoadingDots ? 'hidden' : ''}\"\n transform=\"translate(40.000000, 55.000000)\"\n >\n <circle id=\"left-dot\" cx=\"5\" cy=\"5\" r=\"5\"></circle>\n <circle id=\"middle-dot\" cx=\"20\" cy=\"5\" r=\"5\"></circle>\n <circle id=\"right-dot\" cx=\"35\" cy=\"5\" r=\"5\"></circle>\n </g>\n </g>\n </svg>\n `;\n }\n\n /** A check mark to render on success */\n private get successIndicatorTemplate(): TemplateResult {\n return html`\n <svg\n class=\"success-indicator\"\n viewBox=\"0 0 120 120\"\n preserveAspectRatio=\"none\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n role=\"status\"\n >\n <title>${this.successTitle}</title>\n <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n <path\n class=\"success-icon\"\n d=\"M60,10 C70.5816709,10 80.3955961,13.2871104 88.4763646,18.8959201 L78.3502633,29.0214223 C72.9767592,25.8315427 66.7022695,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 L95.995,59.46 L108.327675,47.128668 C109.350926,50.9806166 109.925886,55.015198 109.993301,59.1731586 L110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z\"\n ></path>\n <polygon\n class=\"success-icon\"\n transform=\"translate(75.000000, 41.500000) rotate(44.000000) translate(-75.000000, -41.500000) \"\n points=\"96 85 54 85 54 65 76 64.999 76 -2 96 -2\"\n ></polygon>\n </g>\n </svg>\n `;\n }\n\n /** An \"!\" to render on error */\n private get errorIndicatorTemplate(): TemplateResult {\n return html`\n <svg\n class=\"error-indicator\"\n viewBox=\"0 0 120 120\"\n preserveAspectRatio=\"none\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n role=\"status\"\n >\n <title>${this.errorTitle}</title>\n <path\n class=\"error-icon\"\n d=\"m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714zm28.5387507 75.19549646-35.037482-62-34.962518 62zm-31-34.7484359v-10.2515641h-8v10.2515641l2.089172 14.7484359h3.8184713zm-8 19.7484359v8h8v-8z\"\n />\n </svg>\n `;\n }\n\n /* Whether to include the dots in the loading indicator */\n private get shouldShowLoadingDots(): boolean {\n if (this.loadingStyle === 'ring') return false;\n\n return true;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --indicator-width--: var(--icon-width);\n\n /* Loading */\n --loading-ring-color--: var(--primary-text-color);\n --loading-dot-color--: var(--primary-text-color);\n\n /* Success */\n --success-icon-color--: var(--color-success);\n\n /* Error */\n --error-icon-color--: var(--color-danger);\n\n display: inline-block;\n width: var(--indicator-width--);\n }\n\n .placeholder {\n height: var(--indicator-width--);\n }\n\n .success-icon {\n fill: var(--success-icon-color--);\n }\n\n .error-icon {\n fill: var(--error-icon-color--);\n }\n\n .loading-ring {\n fill: var(--loading-ring-color--);\n animation: rotate 1.3s infinite linear;\n transform-origin: 50px 50px;\n transform-box: fill-box;\n }\n\n .loading-dots {\n fill: var(--loading-dot-color--);\n transition: opacity 0.25s ease-out;\n }\n\n .loading-dots.hidden {\n display: none;\n }\n\n .loading-dots > * {\n opacity: 0;\n animation: dot 1.3s infinite;\n }\n\n .loading-dots #left-dot {\n animation-delay: 0.2s;\n }\n\n .loading-dots #middle-dot {\n animation-delay: 0.4s;\n }\n\n .loading-dots #right-dot {\n animation-delay: 0.6s;\n }\n\n @keyframes rotate {\n 0% {\n transform: rotate(-360deg);\n }\n 100% {\n /* This frame is supposed to be inferred, but Safari doesn't rotate it unless we're explicit */\n transform: rotate(0deg);\n }\n }\n\n @keyframes dot {\n 0% {\n opacity: 0;\n }\n 25% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n `,\n ];\n }\n}\n"]}
package/dist/src/labs/ia-snow/flake.svg CHANGED
@@ -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>
package/dist/src/themes/theme-styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme-styles.d.ts","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,yBAuFhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"theme-styles.d.ts","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,yBA6EhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
package/dist/src/themes/theme-styles.js CHANGED
@@ -1,91 +1,81 @@
1
1
  import { css } from 'lit';
2
- const themeStyles = css `
3
- :host {
4
- /*
5
- BASE STYLES
6
- Default fallback values for theme styles. Assumes 16px root font size.
7
- To adjust values, use theme styles below.
8
- */
9
-
10
- /* Typography */
11
- --default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
12
-
13
- /* Sizing */
14
- --default-icon-width: 1.25rem;
15
- --default-padding-sm: 5px;
16
- --default-combo-box-width: auto;
17
- --default-search-bar-width: auto;
18
- --default-search-bar-height: 30px;
19
- --default-font-size-standard: 0.875rem; /* 14px with 16px root font size */
20
- --default-font-size-lg: 2.25rem; /* 36px with 16px root font size */
21
-
22
- /* Colors */
23
- --true-white: #fff;
24
- --off-white: #fbfbfd;
25
- --dark-gray: #2c2c2c;
26
- --light-gray: #666;
27
- --classic-red: #e51c23;
28
- --mint-green: #31a481;
29
- --navy-blue: #194880;
30
- --bright-blue: #4b64ff;
31
-
32
- /*
33
- ADJUSTABLE STYLES
34
- To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.
35
- */
36
-
37
- /* Text */
38
- --base-font-family: var(
39
- --ia-theme-base-font-family,
40
- var(--default-font-family)
41
- );
42
- --primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));
43
- --secondary-text-color: var(
44
- --ia-theme-secondary-text-color,
45
- var(--light-gray)
46
- );
47
- --link-color: var(--ia-theme-link-color, var(--bright-blue));
48
-
49
- /* Sizing */
50
- --icon-width: var(--ia-theme-icon-width, var(--default-icon-width));
51
- --padding-sm: var(--ia-theme-padding-sm, var(--default-padding-sm));
52
- --search-bar-height: var(
53
- --ia-theme-search-bar-height,
54
- var(--default-search-bar-height)
55
- );
56
- --search-bar-width: var(
57
- --ia-theme-search-bar-width,
58
- var(--default-search-bar-width)
59
- );
60
- --combo-box-width: var(
61
- --ia-theme-combo-box-width,
62
- var(--default-combo-box-width)
63
- );
64
- --font-size-standard: var(
65
- --ia-theme-font-size-standard,
66
- var(--default-font-size-standard)
67
- );
68
- --font-size-lg: var(--ia-theme-font-size-lg, var(--default-font-size-lg));
69
-
70
- /* Backgrounds and fills */
71
- --primary-background-color: var(
72
- --ia-theme-primary-background-color,
73
- var(--off-white)
74
- );
75
- --secondary-background-color: var(
76
- --ia-theme-secondary-background-color,
77
- var(--true-white)
78
- );
79
-
80
- /* State colors */
81
- --primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));
82
- --primary-cta-text-color: var(
83
- --ia-theme-primary-cta-text-color,
84
- var(--true-white)
85
- );
86
- --color-success: var(--ia-theme-color-success, var(--mint-green));
87
- --color-danger: var(--ia-theme-color-danger, var(--classic-red));
88
- }
2
+ const themeStyles = css `
3
+ :host {
4
+ /*
5
+ BASE STYLES
6
+ Default fallback values for theme styles. Assumes 16px root font size.
7
+ To adjust values, use theme styles below.
8
+ */
9
+
10
+ /* Typography */
11
+ --default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
12
+
13
+ /* Sizing */
14
+ --default-icon-width: 1.25rem;
15
+ --default-padding-sm: 5px;
16
+ --default-combo-box-width: auto;
17
+ --default-font-size-standard: 0.875rem; /* 14px with 16px root font size */
18
+ --default-font-size-lg: 2.25rem; /* 36px with 16px root font size */
19
+
20
+ /* Colors */
21
+ --true-white: #fff;
22
+ --off-white: #fbfbfd;
23
+ --dark-gray: #2c2c2c;
24
+ --light-gray: #666;
25
+ --classic-red: #e51c23;
26
+ --mint-green: #31a481;
27
+ --navy-blue: #194880;
28
+ --bright-blue: #4b64ff;
29
+
30
+ /*
31
+ ADJUSTABLE STYLES
32
+ To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.
33
+ */
34
+
35
+ /* Text */
36
+ --base-font-family: var(
37
+ --ia-theme-base-font-family,
38
+ var(--default-font-family)
39
+ );
40
+ --primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));
41
+ --secondary-text-color: var(
42
+ --ia-theme-secondary-text-color,
43
+ var(--light-gray)
44
+ );
45
+ --link-color: var(--ia-theme-link-color, var(--bright-blue));
46
+
47
+ /* Sizing */
48
+ --icon-width: var(--ia-theme-icon-width, var(--default-icon-width));
49
+ --padding-sm: var(--ia-theme-padding-sm, var(--default-padding-sm));
50
+ --combo-box-width: var(
51
+ --ia-theme-combo-box-width,
52
+ var(--default-combo-box-width)
53
+ );
54
+ --font-size-standard: var(
55
+ --ia-theme-font-size-standard,
56
+ var(--default-font-size-standard)
57
+ );
58
+ --font-size-lg: var(--ia-theme-font-size-lg, var(--default-font-size-lg));
59
+
60
+ /* Backgrounds and fills */
61
+ --primary-background-color: var(
62
+ --ia-theme-primary-background-color,
63
+ var(--off-white)
64
+ );
65
+ --secondary-background-color: var(
66
+ --ia-theme-secondary-background-color,
67
+ var(--true-white)
68
+ );
69
+
70
+ /* State colors */
71
+ --primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));
72
+ --primary-cta-text-color: var(
73
+ --ia-theme-primary-cta-text-color,
74
+ var(--true-white)
75
+ );
76
+ --color-success: var(--ia-theme-color-success, var(--mint-green));
77
+ --color-danger: var(--ia-theme-color-danger, var(--classic-red));
78
+ }
89
79
  `;
90
80
  export default themeStyles;
91
81
  //# sourceMappingURL=theme-styles.js.map
package/dist/src/themes/theme-styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme-styles.js","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFtB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { css } from 'lit';\r\n\r\nconst themeStyles = css`\r\n :host {\r\n /*\r\n BASE STYLES\r\n Default fallback values for theme styles. Assumes 16px root font size.\r\n To adjust values, use theme styles below.\r\n */\r\n\r\n /* Typography */\r\n --default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n\r\n /* Sizing */\r\n --default-icon-width: 1.25rem;\r\n --default-padding-sm: 5px;\r\n --default-combo-box-width: auto;\r\n --default-search-bar-width: auto;\r\n --default-search-bar-height: 30px;\r\n --default-font-size-standard: 0.875rem; /* 14px with 16px root font size */\r\n --default-font-size-lg: 2.25rem; /* 36px with 16px root font size */\r\n\r\n /* Colors */\r\n --true-white: #fff;\r\n --off-white: #fbfbfd;\r\n --dark-gray: #2c2c2c;\r\n --light-gray: #666;\r\n --classic-red: #e51c23;\r\n --mint-green: #31a481;\r\n --navy-blue: #194880;\r\n --bright-blue: #4b64ff;\r\n\r\n /*\r\n ADJUSTABLE STYLES\r\n To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.\r\n */\r\n\r\n /* Text */\r\n --base-font-family: var(\r\n --ia-theme-base-font-family,\r\n var(--default-font-family)\r\n );\r\n --primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));\r\n --secondary-text-color: var(\r\n --ia-theme-secondary-text-color,\r\n var(--light-gray)\r\n );\r\n --link-color: var(--ia-theme-link-color, var(--bright-blue));\r\n\r\n /* Sizing */\r\n --icon-width: var(--ia-theme-icon-width, var(--default-icon-width));\r\n --padding-sm: var(--ia-theme-padding-sm, var(--default-padding-sm));\r\n --search-bar-height: var(\r\n --ia-theme-search-bar-height,\r\n var(--default-search-bar-height)\r\n );\r\n --search-bar-width: var(\r\n --ia-theme-search-bar-width,\r\n var(--default-search-bar-width)\r\n );\r\n --combo-box-width: var(\r\n --ia-theme-combo-box-width,\r\n var(--default-combo-box-width)\r\n );\r\n --font-size-standard: var(\r\n --ia-theme-font-size-standard,\r\n var(--default-font-size-standard)\r\n );\r\n --font-size-lg: var(--ia-theme-font-size-lg, var(--default-font-size-lg));\r\n\r\n /* Backgrounds and fills */\r\n --primary-background-color: var(\r\n --ia-theme-primary-background-color,\r\n var(--off-white)\r\n );\r\n --secondary-background-color: var(\r\n --ia-theme-secondary-background-color,\r\n var(--true-white)\r\n );\r\n\r\n /* State colors */\r\n --primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));\r\n --primary-cta-text-color: var(\r\n --ia-theme-primary-cta-text-color,\r\n var(--true-white)\r\n );\r\n --color-success: var(--ia-theme-color-success, var(--mint-green));\r\n --color-danger: var(--ia-theme-color-danger, var(--classic-red));\r\n }\r\n`;\r\n\r\nexport default themeStyles;\r\n"]}
1
+ {"version":3,"file":"theme-styles.js","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EtB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst themeStyles = css`\n :host {\n /*\n BASE STYLES\n Default fallback values for theme styles. Assumes 16px root font size.\n To adjust values, use theme styles below.\n */\n\n /* Typography */\n --default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\n /* Sizing */\n --default-icon-width: 1.25rem;\n --default-padding-sm: 5px;\n --default-combo-box-width: auto;\n --default-font-size-standard: 0.875rem; /* 14px with 16px root font size */\n --default-font-size-lg: 2.25rem; /* 36px with 16px root font size */\n\n /* Colors */\n --true-white: #fff;\n --off-white: #fbfbfd;\n --dark-gray: #2c2c2c;\n --light-gray: #666;\n --classic-red: #e51c23;\n --mint-green: #31a481;\n --navy-blue: #194880;\n --bright-blue: #4b64ff;\n\n /*\n ADJUSTABLE STYLES\n To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.\n */\n\n /* Text */\n --base-font-family: var(\n --ia-theme-base-font-family,\n var(--default-font-family)\n );\n --primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));\n --secondary-text-color: var(\n --ia-theme-secondary-text-color,\n var(--light-gray)\n );\n --link-color: var(--ia-theme-link-color, var(--bright-blue));\n\n /* Sizing */\n --icon-width: var(--ia-theme-icon-width, var(--default-icon-width));\n --padding-sm: var(--ia-theme-padding-sm, var(--default-padding-sm));\n --combo-box-width: var(\n --ia-theme-combo-box-width,\n var(--default-combo-box-width)\n );\n --font-size-standard: var(\n --ia-theme-font-size-standard,\n var(--default-font-size-standard)\n );\n --font-size-lg: var(--ia-theme-font-size-lg, var(--default-font-size-lg));\n\n /* Backgrounds and fills */\n --primary-background-color: var(\n --ia-theme-primary-background-color,\n var(--off-white)\n );\n --secondary-background-color: var(\n --ia-theme-secondary-background-color,\n var(--true-white)\n );\n\n /* State colors */\n --primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));\n --primary-cta-text-color: var(\n --ia-theme-primary-cta-text-color,\n var(--true-white)\n );\n --color-success: var(--ia-theme-color-success, var(--mint-green));\n --color-danger: var(--ia-theme-color-danger, var(--classic-red));\n }\n`;\n\nexport default themeStyles;\n"]}
package/package.json CHANGED
@@ -1,120 +1,118 @@
1
- {
2
- "name": "@internetarchive/elements",
3
- "version": "0.2.3-alpha-webdev8378.2",
4
- "description": "A web component library from the Internet Archive.",
5
- "license": "AGPL-3.0-only",
6
- "types": "./dist/src/elements/index.d.ts",
7
- "type": "module",
8
- "publishConfig": {
9
- "access": "public"
10
- },
11
- "repository": {
12
- "type": "git",
13
- "url": "git+https://github.com/internetarchive/elements.git"
14
- },
15
- "bugs": {
16
- "url": "https://github.com/internetarchive/elements/issues"
17
- },
18
- "scripts": {
19
- "dev": "wireit",
20
- "build": "wireit",
21
- "clean": "wireit",
22
- "lint": "wireit",
23
- "format": "wireit",
24
- "circular": "wireit",
25
- "prepare": "wireit",
26
- "test": "wireit",
27
- "ghpages:build": "wireit"
28
- },
29
- "dependencies": {
30
- "@lit/localize": "^0.12.2",
31
- "@internetarchive/ia-clearable-text-input": "^1.1.1",
32
- "@internetarchive/ia-dropdown": "^2.1.0",
33
- "lit": "^2.8.0 || ^3.3.2",
34
- "magic-snowflakes": "^7.0.2",
35
- "tslib": "^2.8.1"
36
- },
37
- "devDependencies": {
38
- "@open-wc/testing-helpers": "^3.0.1",
39
- "@typescript-eslint/eslint-plugin": "^8.46.4",
40
- "@vitest/browser": "^4.0.8",
41
- "@vitest/browser-playwright": "^4.0.8",
42
- "@vitest/coverage-v8": "^4.0.8",
43
- "eslint": "^9.39.1",
44
- "eslint-config-prettier": "^10.1.8",
45
- "eslint-plugin-html": "^8.1.3",
46
- "eslint-plugin-import": "^2.32.0",
47
- "eslint-plugin-lit": "^1.15.0",
48
- "eslint-plugin-lit-a11y": "^4.1.4",
49
- "eslint-plugin-no-only-tests": "^3.3.0",
50
- "eslint-plugin-wc": "^2.2.1",
51
- "highlight.js": "^11.11.1",
52
- "madge": "^8.0.0",
53
- "playwright": "^1.56.1",
54
- "prettier": "^3.6.2",
55
- "ts-lit-plugin": "^2.0.2",
56
- "tsc-alias": "^1.8.16",
57
- "typescript": "^5.9.3",
58
- "vite": "^7.2.2",
59
- "vitest": "^4.0.8",
60
- "wireit": "^0.14.12"
61
- },
62
- "exports": {
63
- ".": "./dist/src/index.js",
64
- "./*": "./dist/src/elements/*.js",
65
- "./labs/*": "./dist/src/labs/*.js"
66
- },
67
- "files": [
68
- "README.md",
69
- "dist",
70
- "!dist/**/*.test*",
71
- "!dist/**/*-story*",
72
- "!dist/demo",
73
- "!dist/src/internal",
74
- "!dist/*.tsbuildinfo"
75
- ],
76
- "wireit": {
77
- "build": {
78
- "command": "tsc --build --pretty && tsc-alias && rsync -zarvm --prune-empty-dirs --include \"*/\" --include \"*.svg\" --exclude=\"*\" src dist",
79
- "dependencies": [
80
- "circular"
81
- ],
82
- "files": [
83
- "src/**/*.ts",
84
- "tsconfig.json"
85
- ],
86
- "output": [
87
- "dist/**"
88
- ]
89
- },
90
- "circular": {
91
- "command": "madge --circular --extensions ts ."
92
- },
93
- "clean": {
94
- "command": "rm -rf dist"
95
- },
96
- "dev": {
97
- "command": "vite"
98
- },
99
- "lint": {
100
- "command": "eslint . && prettier \"**/*.ts\" --check"
101
- },
102
- "format": {
103
- "command": "eslint . --fix && prettier \"**/*.ts\" --write"
104
- },
105
- "prepare": {
106
- "dependencies": [
107
- "build"
108
- ]
109
- },
110
- "test": {
111
- "command": "vitest",
112
- "dependencies": [
113
- "circular"
114
- ]
115
- },
116
- "ghpages:build": {
117
- "command": "vite build --config vite.config.ghpages.ts && touch ./ghpages/.nojekyll"
118
- }
119
- }
120
- }
1
+ {
2
+ "name": "@internetarchive/elements",
3
+ "version": "0.2.3",
4
+ "description": "A web component library from the Internet Archive.",
5
+ "license": "AGPL-3.0-only",
6
+ "types": "./dist/src/elements/index.d.ts",
7
+ "type": "module",
8
+ "publishConfig": {
9
+ "access": "public"
10
+ },
11
+ "repository": {
12
+ "type": "git",
13
+ "url": "git+https://github.com/internetarchive/elements.git"
14
+ },
15
+ "bugs": {
16
+ "url": "https://github.com/internetarchive/elements/issues"
17
+ },
18
+ "scripts": {
19
+ "dev": "wireit",
20
+ "build": "wireit",
21
+ "clean": "wireit",
22
+ "lint": "wireit",
23
+ "format": "wireit",
24
+ "circular": "wireit",
25
+ "prepare": "wireit",
26
+ "test": "wireit",
27
+ "ghpages:build": "wireit"
28
+ },
29
+ "dependencies": {
30
+ "@lit/localize": "^0.12.2",
31
+ "lit": "^2.8.0 || ^3.3.2",
32
+ "magic-snowflakes": "^7.0.2",
33
+ "tslib": "^2.8.1"
34
+ },
35
+ "devDependencies": {
36
+ "@open-wc/testing-helpers": "^3.0.1",
37
+ "@typescript-eslint/eslint-plugin": "^8.46.4",
38
+ "@vitest/browser": "^4.0.8",
39
+ "@vitest/browser-playwright": "^4.0.8",
40
+ "@vitest/coverage-v8": "^4.0.8",
41
+ "eslint": "^9.39.1",
42
+ "eslint-config-prettier": "^10.1.8",
43
+ "eslint-plugin-html": "^8.1.3",
44
+ "eslint-plugin-import": "^2.32.0",
45
+ "eslint-plugin-lit": "^1.15.0",
46
+ "eslint-plugin-lit-a11y": "^4.1.4",
47
+ "eslint-plugin-no-only-tests": "^3.3.0",
48
+ "eslint-plugin-wc": "^2.2.1",
49
+ "highlight.js": "^11.11.1",
50
+ "madge": "^8.0.0",
51
+ "playwright": "^1.56.1",
52
+ "prettier": "^3.6.2",
53
+ "ts-lit-plugin": "^2.0.2",
54
+ "tsc-alias": "^1.8.16",
55
+ "typescript": "^5.9.3",
56
+ "vite": "^7.2.2",
57
+ "vitest": "^4.0.8",
58
+ "wireit": "^0.14.12"
59
+ },
60
+ "exports": {
61
+ ".": "./dist/src/index.js",
62
+ "./*": "./dist/src/elements/*.js",
63
+ "./labs/*": "./dist/src/labs/*.js"
64
+ },
65
+ "files": [
66
+ "README.md",
67
+ "dist",
68
+ "!dist/**/*.test*",
69
+ "!dist/**/*-story*",
70
+ "!dist/demo",
71
+ "!dist/src/internal",
72
+ "!dist/*.tsbuildinfo"
73
+ ],
74
+ "wireit": {
75
+ "build": {
76
+ "command": "tsc --build --pretty && tsc-alias && rsync -zarvm --prune-empty-dirs --include \"*/\" --include \"*.svg\" --exclude=\"*\" src dist",
77
+ "dependencies": [
78
+ "circular"
79
+ ],
80
+ "files": [
81
+ "src/**/*.ts",
82
+ "tsconfig.json"
83
+ ],
84
+ "output": [
85
+ "dist/**"
86
+ ]
87
+ },
88
+ "circular": {
89
+ "command": "madge --circular --extensions ts ."
90
+ },
91
+ "clean": {
92
+ "command": "rm -rf dist"
93
+ },
94
+ "dev": {
95
+ "command": "vite"
96
+ },
97
+ "lint": {
98
+ "command": "eslint . && prettier \"**/*.ts\" --check"
99
+ },
100
+ "format": {
101
+ "command": "eslint . --fix && prettier \"**/*.ts\" --write"
102
+ },
103
+ "prepare": {
104
+ "dependencies": [
105
+ "build"
106
+ ]
107
+ },
108
+ "test": {
109
+ "command": "vitest",
110
+ "dependencies": [
111
+ "circular"
112
+ ]
113
+ },
114
+ "ghpages:build": {
115
+ "command": "vite build --config vite.config.ghpages.ts && touch ./ghpages/.nojekyll"
116
+ }
117
+ }
118
+ }
package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.d.ts DELETED
@@ -1,71 +0,0 @@
1
- import { LitElement, TemplateResult } from 'lit';
2
- import type { SearchCategory } from './models.js';
3
- import '@internetarchive/ia-clearable-text-input';
4
- import '@internetarchive/ia-dropdown';
5
- import '../../elements/ia-status-indicator/ia-status-indicator.js';
6
- export declare class IADropdownSearchBar extends LitElement {
7
- /** The query that appears in the search bar */
8
- query?: string;
9
- /** Dropdown menu options (tab IDs + labels) */
10
- categories: SearchCategory[];
11
- /** The currently selected dropdown category ID */
12
- selectedCategory?: string;
13
- /** Placeholder text for the search input */
14
- placeholder: string;
15
- /** Whether to use the mobile layout */
16
- useMobileView: boolean;
17
- /** Whether to hide the category dropdown to the left of the search bar */
18
- hideDropdown: boolean;
19
- /** Whether the search button should show its loading state */
20
- loading: boolean;
21
- private searchInput;
22
- /** The effective selected category, falling back to the first in the list. */
23
- private get resolvedCategory();
24
- render(): TemplateResult;
25
- /**
26
- * Template for the category dropdown on the left side of the search bar.
27
- */
28
- private get dropdownTemplate();
29
- /**
30
- * Template for the main text entry box of the search bar.
31
- */
32
- private get textBoxTemplate();
33
- /**
34
- * Template for the "magnifying glass" search button to the right of the search bar.
35
- */
36
- private get searchButtonTemplate();
37
- /**
38
- * Converts the `categories` array into the `optionInterface[]` format
39
- * expected by `ia-dropdown`.
40
- */
41
- private get dropdownOptions();
42
- /**
43
- * The display label for the currently selected category.
44
- */
45
- private get selectedCategoryLabel();
46
- /**
47
- * The current search query with +'s replaced by spaces.
48
- */
49
- private get spacedQuery();
50
- /**
51
- * Handler for when the search bar's clear button is pressed.
52
- */
53
- private searchFieldCleared;
54
- /**
55
- * Handler for Enter key or search button click.
56
- */
57
- private handleSubmit;
58
- /**
59
- * Handler for when the user selects a category from the dropdown.
60
- *
61
- * Sets `selectedCategory` locally for immediate visual feedback (semi-controlled
62
- * pattern). The parent also binds this property and may re-set it on re-render.
63
- */
64
- private handleCategorySelected;
65
- /**
66
- * Emits a `searchRequested` event with the current query and category.
67
- */
68
- private emitSearchRequested;
69
- static get styles(): import("lit").CSSResult[];
70
- }
71
- //# sourceMappingURL=ia-dropdown-search-bar.d.ts.map
package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.d.ts.map DELETED
@@ -1 +0,0 @@
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,EAAa,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAIrE,OAAO,KAAK,EACV,cAAc,EAEf,MAAM,UAAU,CAAC;AAKlB,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;IAE3C,8EAA8E;IAC9E,OAAO,KAAK,gBAAgB,GAE3B;IAED,MAAM,IAAI,cAAc;IAexB;;OAEG;IACH,OAAO,KAAK,gBAAgB,GAkB3B;IAED;;OAEG;IACH,OAAO,KAAK,eAAe,GAe1B;IAED;;OAEG;IACH,OAAO,KAAK,oBAAoB,GAkB/B;IAED;;;OAGG;IACH,OAAO,KAAK,eAAe,GAK1B;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,8BAmHhB;CACF"}