@internetarchive/elements 1.1.5 → 1.1.6

package/dist/src/elements/ia-image-viewer/ia-imgview-slide.js

@@ -3,7 +3,7 @@ import { css, html, LitElement, nothing, } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { msg } from '@lit/localize';
+import { localized, msg } from '@lit/localize';
 import themeStyles from '../../themes/theme-styles.js';
 /**
  * A single image in the viewer's track.
@@ -208,7 +208,8 @@ __decorate([
     state()
 ], IAImageViewerSlide.prototype, "failed", void 0);
 IAImageViewerSlide = __decorate([
-    customElement('ia-imgview-slide')
+    customElement('ia-imgview-slide'),
+    localized()
 ], IAImageViewerSlide);
 export { IAImageViewerSlide };
 //# sourceMappingURL=ia-imgview-slide.js.map

package/dist/src/elements/ia-image-viewer/ia-imgview-slide.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-imgview-slide.js","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-imgview-slide.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,EACV,OAAO,GAGR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;;;GAOG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAKY,WAAM,GAAG,KAAK,CAAC;QAEf,WAAM,GAAG,KAAK,CAAC;QA+DxB,eAAU,GAAG,GAAS,EAAE;YAC9B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACnB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;QAC7B,CAAC,CAAC;QAEM,eAAU,GAAG,GAAS,EAAE;YAC9B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACnB,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;QAC7B,CAAC,CAAC;IA+GJ,CAAC;IAtLW,UAAU,CAAC,OAAuB;QAC1C,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;IACH,CAAC;IAES,OAAO;QACf,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,OAAO,CAAC;QAEhC,MAAM,YAAY,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;QACjE,MAAM,WAAW,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;QAEhE,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC,WAAW,CAAC;eACtB,IAAI,CAAC,KAAK,CAAC,GAAG;;;iBAGZ,IAAI,CAAC,OAAO;;;kBAGX,QAAQ,CAAC,YAAY,CAAC;gBACxB,IAAI,CAAC,KAAK,CAAC,GAAG;gBACd,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI;4BACvB,IAAI,CAAC,KAAK,CAAC,IAAI;;kBAEzB,IAAI,CAAC,UAAU;mBACd,IAAI,CAAC,UAAU;;;UAGxB,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAA;gBACA,GAAG,CAAC,iCAAiC,CAAC;iBACrC;YACP,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACK,OAAO,CAAC,CAAa;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QACxB,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAChC,IAAI,WAAW,CAAC,gBAAgB,EAAE;YAChC,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;SACjB,CAAC,CACH,CAAC;QACF,IAAI,CAAC,OAAO;YAAE,CAAC,CAAC,cAAc,EAAE,CAAC;IACnC,CAAC;IAcD;;;;OAIG;IACK,MAAM,CAAC,IAAmC;QAChD,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QACxB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CACxE,CAAC;IACJ,CAAC;IAED;;;;;;;OAOG;IACK,oBAAoB;QAC1B,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC;QAC9B,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,QAAQ;YAAE,OAAO;QAChE,IAAI,GAAG,CAAC,YAAY,GAAG,CAAC;YAAE,IAAI,CAAC,UAAU,EAAE,CAAC;;YACvC,IAAI,CAAC,UAAU,EAAE,CAAC;IACzB,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4EF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA9L6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAA0B;AAEvB;IAA7B,KAAK,CAAC,aAAa,CAAC;wDAAyC;AAE7C;IAAhB,KAAK,EAAE;kDAAwB;AAEf;IAAhB,KAAK,EAAE;kDAAwB;AAPrB,kBAAkB;IAD9B,aAAa,CAAC,kBAAkB,CAAC;GACrB,kBAAkB,CA+L9B","sourcesContent":["import {\n  css,\n  type CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { msg } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport type { ImageViewerImage } from './models';\n\n/**\n * A single image in the viewer's track.\n *\n * Owns everything about one image: its load state, its failure message, and\n * the link that opens the full-size file. The viewer creates these both from\n * its template and by hand during a drag, so the element works with no\n * per-instance setup beyond its properties.\n */\n@customElement('ia-imgview-slide')\nexport class IAImageViewerSlide extends LitElement {\n  @property({ type: Object }) image?: ImageViewerImage;\n\n  @query('.main-image') private imageElement?: HTMLImageElement;\n\n  @state() private loaded = false;\n\n  @state() private failed = false;\n\n  protected willUpdate(changed: PropertyValues): void {\n    if (changed.has('image')) {\n      this.loaded = false;\n      this.failed = false;\n    }\n  }\n\n  protected updated(): void {\n    this.checkAlreadyResolved();\n  }\n\n  render(): TemplateResult | typeof nothing {\n    if (!this.image) return nothing;\n\n    const imageClasses = { 'main-image': true, loaded: this.loaded };\n    const linkClasses = { 'image-link': true, failed: this.failed };\n\n    return html`\n      <a\n        class=${classMap(linkClasses)}\n        href=${this.image.url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        @click=${this.onClick}\n      >\n        <img\n          class=${classMap(imageClasses)}\n          src=${this.image.url}\n          alt=${this.image.title ?? this.image.name}\n          data-image-name=${this.image.name}\n          draggable=\"false\"\n          @load=${this.markLoaded}\n          @error=${this.markFailed}\n        />\n        <div class=\"loading-spinner\"></div>\n        ${this.failed\n          ? html`<p class=\"image-failed\">\n              ${msg('This image could not be loaded.')}\n            </p>`\n          : nothing}\n      </a>\n    `;\n  }\n\n  /**\n   * Lets the viewer veto opening the image, which it does when the click is\n   * the tail end of a swipe. A host can veto it too, to show the image its own\n   * way instead of in a new tab.\n   */\n  private onClick(e: MouseEvent): void {\n    if (!this.image) return;\n    const allowed = this.dispatchEvent(\n      new CustomEvent('imageActivated', {\n        detail: { image: this.image },\n        bubbles: true,\n        cancelable: true,\n      }),\n    );\n    if (!allowed) e.preventDefault();\n  }\n\n  private markLoaded = (): void => {\n    this.loaded = true;\n    this.failed = false;\n    this.report('imageLoaded');\n  };\n\n  private markFailed = (): void => {\n    this.loaded = false;\n    this.failed = true;\n    this.report('imageFailed');\n  };\n\n  /**\n   * Tells the viewer what happened to this image, so it can pass failures on\n   * to the host. Bubbles because the viewer listens on the track, which is\n   * also where the slides it creates by hand during a drag end up.\n   */\n  private report(name: 'imageLoaded' | 'imageFailed'): void {\n    if (!this.image) return;\n    this.dispatchEvent(\n      new CustomEvent(name, { detail: { image: this.image }, bubbles: true }),\n    );\n  }\n\n  /**\n   * Catches an image that finished before its listeners could fire, because\n   * the browser had already resolved the request (from the cache or a\n   * preload) by the time the element rendered.\n   *\n   * `complete` is true for a failed image as well as a loaded one, so the two\n   * are told apart by `naturalWidth`, which stays 0 when the load failed.\n   */\n  private checkAlreadyResolved(): void {\n    const img = this.imageElement;\n    if (!img || this.loaded || this.failed || !img.complete) return;\n    if (img.naturalWidth > 0) this.markLoaded();\n    else this.markFailed();\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --imgview-slide-text-color--: var(\n            --image-viewer-text-color,\n            var(--true-white)\n          );\n\n          flex: 0 0 100%;\n          height: 100%;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          position: relative;\n        }\n\n        .image-link {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          height: 100%;\n          cursor: pointer;\n        }\n\n        .main-image {\n          display: block;\n          max-height: 100%;\n          max-width: 100%;\n          object-fit: contain;\n          opacity: 0;\n          transition: opacity 0.2s ease;\n          user-select: none;\n        }\n\n        .main-image.loaded {\n          opacity: 1;\n        }\n\n        .main-image.loaded + .loading-spinner,\n        .image-link.failed .loading-spinner {\n          display: none;\n        }\n\n        .loading-spinner {\n          position: absolute;\n          width: 24px;\n          height: 24px;\n          border: 2px solid rgba(255, 255, 255, 0.15);\n          border-top-color: rgba(255, 255, 255, 0.5);\n          border-radius: 50%;\n          animation: spin 0.8s linear infinite;\n        }\n\n        @keyframes spin {\n          to {\n            transform: rotate(360deg);\n          }\n        }\n\n        .image-failed {\n          position: absolute;\n          margin: 0;\n          padding: 0 1.6rem;\n          color: var(--imgview-slide-text-color--);\n          font-size: 1.4rem;\n          text-align: center;\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n          .loading-spinner {\n            animation: none;\n          }\n\n          .main-image {\n            transition: none;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"ia-imgview-slide.js","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-imgview-slide.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  type CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { localized, msg } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport type { ImageViewerImage } from './models';\n\n/**\n * A single image in the viewer's track.\n *\n * Owns everything about one image: its load state, its failure message, and\n * the link that opens the full-size file. The viewer creates these both from\n * its template and by hand during a drag, so the element works with no\n * per-instance setup beyond its properties.\n */\n@customElement('ia-imgview-slide')\n@localized()\nexport class IAImageViewerSlide extends LitElement {\n  @property({ type: Object }) image?: ImageViewerImage;\n\n  @query('.main-image') private imageElement?: HTMLImageElement;\n\n  @state() private loaded = false;\n\n  @state() private failed = false;\n\n  protected willUpdate(changed: PropertyValues): void {\n    if (changed.has('image')) {\n      this.loaded = false;\n      this.failed = false;\n    }\n  }\n\n  protected updated(): void {\n    this.checkAlreadyResolved();\n  }\n\n  render(): TemplateResult | typeof nothing {\n    if (!this.image) return nothing;\n\n    const imageClasses = { 'main-image': true, loaded: this.loaded };\n    const linkClasses = { 'image-link': true, failed: this.failed };\n\n    return html`\n      <a\n        class=${classMap(linkClasses)}\n        href=${this.image.url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        @click=${this.onClick}\n      >\n        <img\n          class=${classMap(imageClasses)}\n          src=${this.image.url}\n          alt=${this.image.title ?? this.image.name}\n          data-image-name=${this.image.name}\n          draggable=\"false\"\n          @load=${this.markLoaded}\n          @error=${this.markFailed}\n        />\n        <div class=\"loading-spinner\"></div>\n        ${this.failed\n          ? html`<p class=\"image-failed\">\n              ${msg('This image could not be loaded.')}\n            </p>`\n          : nothing}\n      </a>\n    `;\n  }\n\n  /**\n   * Lets the viewer veto opening the image, which it does when the click is\n   * the tail end of a swipe. A host can veto it too, to show the image its own\n   * way instead of in a new tab.\n   */\n  private onClick(e: MouseEvent): void {\n    if (!this.image) return;\n    const allowed = this.dispatchEvent(\n      new CustomEvent('imageActivated', {\n        detail: { image: this.image },\n        bubbles: true,\n        cancelable: true,\n      }),\n    );\n    if (!allowed) e.preventDefault();\n  }\n\n  private markLoaded = (): void => {\n    this.loaded = true;\n    this.failed = false;\n    this.report('imageLoaded');\n  };\n\n  private markFailed = (): void => {\n    this.loaded = false;\n    this.failed = true;\n    this.report('imageFailed');\n  };\n\n  /**\n   * Tells the viewer what happened to this image, so it can pass failures on\n   * to the host. Bubbles because the viewer listens on the track, which is\n   * also where the slides it creates by hand during a drag end up.\n   */\n  private report(name: 'imageLoaded' | 'imageFailed'): void {\n    if (!this.image) return;\n    this.dispatchEvent(\n      new CustomEvent(name, { detail: { image: this.image }, bubbles: true }),\n    );\n  }\n\n  /**\n   * Catches an image that finished before its listeners could fire, because\n   * the browser had already resolved the request (from the cache or a\n   * preload) by the time the element rendered.\n   *\n   * `complete` is true for a failed image as well as a loaded one, so the two\n   * are told apart by `naturalWidth`, which stays 0 when the load failed.\n   */\n  private checkAlreadyResolved(): void {\n    const img = this.imageElement;\n    if (!img || this.loaded || this.failed || !img.complete) return;\n    if (img.naturalWidth > 0) this.markLoaded();\n    else this.markFailed();\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --imgview-slide-text-color--: var(\n            --image-viewer-text-color,\n            var(--true-white)\n          );\n\n          flex: 0 0 100%;\n          height: 100%;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          position: relative;\n        }\n\n        .image-link {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          height: 100%;\n          cursor: pointer;\n        }\n\n        .main-image {\n          display: block;\n          max-height: 100%;\n          max-width: 100%;\n          object-fit: contain;\n          opacity: 0;\n          transition: opacity 0.2s ease;\n          user-select: none;\n        }\n\n        .main-image.loaded {\n          opacity: 1;\n        }\n\n        .main-image.loaded + .loading-spinner,\n        .image-link.failed .loading-spinner {\n          display: none;\n        }\n\n        .loading-spinner {\n          position: absolute;\n          width: 24px;\n          height: 24px;\n          border: 2px solid rgba(255, 255, 255, 0.15);\n          border-top-color: rgba(255, 255, 255, 0.5);\n          border-radius: 50%;\n          animation: spin 0.8s linear infinite;\n        }\n\n        @keyframes spin {\n          to {\n            transform: rotate(360deg);\n          }\n        }\n\n        .image-failed {\n          position: absolute;\n          margin: 0;\n          padding: 0 1.6rem;\n          color: var(--imgview-slide-text-color--);\n          font-size: 1.4rem;\n          text-align: center;\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n          .loading-spinner {\n            animation: none;\n          }\n\n          .main-image {\n            transition: none;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/elements/ia-otp-form/ia-otp-form.d.ts.map

@@ -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;AAQb,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"}
+{"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;AAQb,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAC;AAE3F,OAAO,uDAAuD,CAAC;AAC/D,OAAO,yCAAyC,CAAC;AACjD,OAAO,mCAAmC,CAAC;AAU3C;;GAEG;AACH,qBAEa,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"}

package/dist/src/elements/ia-otp-form/ia-otp-form.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, LitElement, css, nothing, } from 'lit';
-import { msg } from '@lit/localize';
+import { localized, msg } from '@lit/localize';
 import { property, query } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
 import themeStyles from '../../themes/theme-styles.js';
@@ -152,7 +152,8 @@ __decorate([
     query('ia-otp-input')
 ], IAOTPForm.prototype, "OTPInput", void 0);
 IAOTPForm = __decorate([
-    customElement('ia-otp-form')
+    customElement('ia-otp-form'),
+    localized()
 ], IAOTPForm);
 export { IAOTPForm };
 //# sourceMappingURL=ia-otp-form.js.map

package/dist/src/elements/ia-otp-form/ia-otp-form.js.map

@@ -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, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\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"]}
+{"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 { localized, msg } from '@lit/localize';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\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')\n@localized()\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"]}

package/dist/src/elements/ia-playback-controls/ia-playback-controls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ia-playback-controls.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-playback-controls/ia-playback-controls.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAoCxC;;;;;;GAMG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,6CAA6C;IACjB,YAAY,EAAE,YAAY,CAAuB;IAE7E,yDAAyD;IAC7B,YAAY,SAAK;IAE7C,kDAAkD;IACtB,MAAM,SAAK;IAEvC,MAAM,IAAI,cAAc;IAkFxB,OAAO,KAAK,SAAS,GAEpB;IAED;;;;;;;OAOG;IACH,OAAO,KAAK,aAAa,GAExB;IAED,uEAAuE;IACvE,OAAO,KAAK,aAAa,GAExB;IAED;;;;;;;OAOG;IACH,OAAO,KAAK,iBAAiB,GAE5B;IAED;;;;;OAKG;IACH,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAED,OAAO,KAAK,gBAAgB,GAI3B;IAED;;;;;;;OAOG;IACH,OAAO,CAAC,wBAAwB;IAiBhC,wEAAwE;IACxE,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,uBAAuB;IAI/B,OAAO,CAAC,uBAAuB;IAI/B,OAAO,CAAC,qBAAqB;IAQ7B,MAAM,KAAK,MAAM,IAAI,cAAc,CAiGlC;CACF"}
+{"version":3,"file":"ia-playback-controls.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-playback-controls/ia-playback-controls.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAoCxC;;;;;;GAMG;AACH,qBAEa,kBAAmB,SAAQ,UAAU;IAChD,6CAA6C;IACjB,YAAY,EAAE,YAAY,CAAuB;IAE7E,yDAAyD;IAC7B,YAAY,SAAK;IAE7C,kDAAkD;IACtB,MAAM,SAAK;IAEvC,MAAM,IAAI,cAAc;IAkFxB,OAAO,KAAK,SAAS,GAEpB;IAED;;;;;;;OAOG;IACH,OAAO,KAAK,aAAa,GAExB;IAED,uEAAuE;IACvE,OAAO,KAAK,aAAa,GAExB;IAED;;;;;;;OAOG;IACH,OAAO,KAAK,iBAAiB,GAE5B;IAED;;;;;OAKG;IACH,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAED,OAAO,KAAK,gBAAgB,GAI3B;IAED;;;;;;;OAOG;IACH,OAAO,CAAC,wBAAwB;IAiBhC,wEAAwE;IACxE,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,uBAAuB;IAI/B,OAAO,CAAC,uBAAuB;IAI/B,OAAO,CAAC,qBAAqB;IAQ7B,MAAM,KAAK,MAAM,IAAI,cAAc,CAiGlC;CACF"}

package/dist/src/elements/ia-playback-controls/ia-playback-controls.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { css, html, LitElement, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
-import { msg, str } from '@lit/localize';
+import { localized, msg, str } from '@lit/localize';
 import { PlaybackMode } from './models.js';
 import nextSectionIcon from './assets/next-section.js';
 import pauseIcon from './assets/pause.js';
@@ -332,7 +332,8 @@ __decorate([
     property({ type: Number })
 ], IAPlaybackControls.prototype, "volume", void 0);
 IAPlaybackControls = __decorate([
-    customElement('ia-playback-controls')
+    customElement('ia-playback-controls'),
+    localized()
 ], IAPlaybackControls);
 export { IAPlaybackControls };
 //# sourceMappingURL=ia-playback-controls.js.map

package/dist/src/elements/ia-playback-controls/ia-playback-controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-playback-controls.js","sourceRoot":"","sources":["../../../../src/elements/ia-playback-controls/ia-playback-controls.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  type CSSResultGroup,\n  type TemplateResult,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { msg, str } from '@lit/localize';\n\nimport { PlaybackMode } from './models';\n\nimport nextSectionIcon from './assets/next-section';\nimport pauseIcon from './assets/pause';\nimport playIcon from './assets/play';\nimport playbackSpeedIcon from './assets/playback-speed';\nimport previousSectionIcon from './assets/previous-section';\nimport replayIcon from './assets/replay';\nimport skipAheadIcon from './assets/skip-ahead';\nimport volumeFullIcon from './assets/volume-full';\nimport volumeMediumIcon from './assets/volume-medium';\nimport volumeMuteIcon from './assets/volume-mute';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n  PlaybackRateChange: 'playbackRateChange',\n  VolumeChange: 'volumeChange',\n  BackButtonPressed: 'back-button-pressed',\n  ForwardButtonPressed: 'forward-button-pressed',\n  PlayPauseButtonPressed: 'play-pause-button-pressed',\n  PrevSectionButtonPressed: 'prev-section-button-pressed',\n  NextSectionButtonPressed: 'next-section-button-pressed',\n};\n\n/** How much one press of the speed button moves the playback rate */\nconst PLAYBACK_RATE_STEP = 0.25;\n\n/** The rate the speed button wraps back around to once it passes the top */\nconst MIN_PLAYBACK_RATE = 0.5;\nconst MAX_PLAYBACK_RATE = 2;\n\n/** How much one press of the volume button moves the volume */\nconst VOLUME_STEP = 0.25;\n\n/**\n * The transport controls for a player: play and pause, skip back and forward\n * ten seconds, jump between sections, and cycle the speed and volume.\n *\n * The element owns no playback itself. It reports presses and lets whatever is\n * playing the audio decide what to do with them.\n */\n@customElement('ia-playback-controls')\nexport class IAPlaybackControls extends LitElement {\n  /** Whether the track is playing or paused */\n  @property({ type: String }) playbackMode: PlaybackMode = PlaybackMode.paused;\n\n  /** Playback speed multiplier, where 1 is normal speed */\n  @property({ type: Number }) playbackRate = 1;\n\n  /** Playback volume, from 0 (muted) to 1 (full) */\n  @property({ type: Number }) volume = 1;\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"container\">\n        <div class=\"vertical-button-stack playback-speed\">\n          <div class=\"vertical-button-container\">\n            <button\n              id=\"playback-rate-btn\"\n              class=\"unstyled-button\"\n              aria-label=${this.playbackRateLabel}\n              @click=${this.handlePlaybackRateChange}\n            >\n              ${playbackSpeedIcon}\n            </button>\n          </div>\n          <div class=\"vertical-button-value\" aria-hidden=\"true\">\n            ${this.playbackRate}x\n          </div>\n        </div>\n\n        <button\n          id=\"prev-section-btn\"\n          class=\"jump-btn unstyled-button\"\n          aria-label=${msg('Previous section')}\n          @click=${this.handlePrevSectionButton}\n        >\n          ${previousSectionIcon}\n        </button>\n\n        <button\n          id=\"back-btn\"\n          class=\"jump-btn unstyled-button\"\n          aria-label=${msg('Skip back ten seconds')}\n          @click=${this.handleBackButton}\n        >\n          ${replayIcon}\n        </button>\n\n        <button\n          id=\"play-pause-btn\"\n          aria-label=${this.isPlaying ? msg('Pause') : msg('Play')}\n          @click=${this.handlePlayPauseButton}\n        >\n          ${this.playPauseButtonIcon}\n        </button>\n\n        <button\n          id=\"forward-btn\"\n          class=\"jump-btn unstyled-button\"\n          aria-label=${msg('Skip ahead ten seconds')}\n          @click=${this.handleForwardButton}\n        >\n          ${skipAheadIcon}\n        </button>\n\n        <button\n          id=\"next-section-btn\"\n          class=\"jump-btn unstyled-button\"\n          aria-label=${msg('Next section')}\n          @click=${this.handleNextSectionButton}\n        >\n          ${nextSectionIcon}\n        </button>\n\n        <div class=\"vertical-button-stack volume\">\n          <div class=\"vertical-button-container\">\n            <button\n              id=\"volume-control-btn\"\n              class=\"unstyled-button\"\n              aria-label=${this.volumeLabel}\n              @click=${this.handleVolumeChange}\n            >\n              ${this.volumeButtonIcon}\n            </button>\n          </div>\n          <div class=\"vertical-button-value\" aria-hidden=\"true\">\n            ${this.volumePercent}%\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private get isPlaying(): boolean {\n    return this.playbackMode === PlaybackMode.playing;\n  }\n\n  /**\n   * The volume held to the 0 to 1 range the controls can represent.\n   *\n   * `volume` is a public property, so it can arrive out of range or as\n   * something that isn't a number at all. Everything that displays, announces\n   * or steps the volume reads it through here, so an impossible value never\n   * reaches the screen reader.\n   */\n  private get clampedVolume(): number {\n    return Math.min(Math.max(this.volume || 0, 0), 1);\n  }\n\n  /** The volume as a whole number, for display and for screen readers */\n  private get volumePercent(): number {\n    return Math.round(this.clampedVolume * 100);\n  }\n\n  /**\n   * The accessible name for the speed button.\n   *\n   * The rate is left bare rather than followed by a unit like \"times\", because\n   * `@lit/localize` has no plural support, so a unit baked into the string\n   * reads wrong at 1 and translators have no way to correct it. The visible\n   * label beside the button carries the \"x\".\n   */\n  private get playbackRateLabel(): string {\n    return msg(str`Playback speed, currently ${this.playbackRate}`);\n  }\n\n  /**\n   * The accessible name for the volume button.\n   *\n   * \"percent\" is safe to include, unlike a pluralised unit: it reads correctly\n   * at every value.\n   */\n  private get volumeLabel(): string {\n    return msg(str`Volume, currently ${this.volumePercent} percent`);\n  }\n\n  private get playPauseButtonIcon(): TemplateResult {\n    return this.isPlaying ? pauseIcon : playIcon;\n  }\n\n  private get volumeButtonIcon(): TemplateResult {\n    if (this.clampedVolume <= 0) return volumeMuteIcon;\n    if (this.clampedVolume >= 1) return volumeFullIcon;\n    return volumeMediumIcon;\n  }\n\n  /**\n   * Steps the playback rate up, wrapping back to the slowest once it reaches\n   * the fastest.\n   *\n   * The rate is clamped on the way in as well as the way out, so a rate set\n   * from outside the range lands back on the documented steps rather than\n   * drifting off the grid, overshooting the top, or climbing forever.\n   */\n  private handlePlaybackRateChange(): void {\n    const current = Math.max(\n      this.playbackRate || MIN_PLAYBACK_RATE,\n      MIN_PLAYBACK_RATE,\n    );\n    this.playbackRate =\n      current >= MAX_PLAYBACK_RATE\n        ? MIN_PLAYBACK_RATE\n        : Math.min(current + PLAYBACK_RATE_STEP, MAX_PLAYBACK_RATE);\n\n    this.dispatchEvent(\n      new CustomEvent<{ playbackRate: number }>(Events.PlaybackRateChange, {\n        detail: { playbackRate: this.playbackRate },\n      }),\n    );\n  }\n\n  /** Steps the volume up, wrapping round to muted once it passes full. */\n  private handleVolumeChange(): void {\n    const current = this.clampedVolume;\n    this.volume = current >= 1 ? 0 : Math.min(current + VOLUME_STEP, 1);\n\n    this.dispatchEvent(\n      new CustomEvent<{ volume: number }>(Events.VolumeChange, {\n        detail: { volume: this.volume },\n      }),\n    );\n  }\n\n  private handleBackButton(): void {\n    this.dispatchEvent(new Event(Events.BackButtonPressed));\n  }\n\n  private handleForwardButton(): void {\n    this.dispatchEvent(new Event(Events.ForwardButtonPressed));\n  }\n\n  private handlePrevSectionButton(): void {\n    this.dispatchEvent(new Event(Events.PrevSectionButtonPressed));\n  }\n\n  private handleNextSectionButton(): void {\n    this.dispatchEvent(new Event(Events.NextSectionButtonPressed));\n  }\n\n  private handlePlayPauseButton(): void {\n    this.playbackMode = this.isPlaying\n      ? PlaybackMode.paused\n      : PlaybackMode.playing;\n\n    this.dispatchEvent(new Event(Events.PlayPauseButtonPressed));\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        --playback-controls-icon-color--: var(\n          --ia-theme-playback-controls-icon-color,\n          #fff\n        );\n        --playback-controls-play-icon-color--: var(\n          --ia-theme-playback-controls-play-icon-color,\n          #333\n        );\n        --playback-controls-play-button-color--: var(\n          --ia-theme-playback-controls-play-button-color,\n          #fff\n        );\n        --playback-controls-play-button-diameter--: var(\n          --ia-theme-playback-controls-play-button-diameter,\n          4rem\n        );\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        padding-left: 0.25rem;\n        padding-right: 0.25rem;\n      }\n\n      .container {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        color: var(--playback-controls-icon-color--);\n        width: 100%;\n      }\n\n      .vertical-button-stack {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n      }\n\n      .vertical-button-container {\n        text-align: center;\n      }\n\n      .vertical-button-container button,\n      .vertical-button-container svg {\n        vertical-align: bottom;\n      }\n\n      .vertical-button-value {\n        font-size: 0.7em;\n        line-height: 1.4em;\n        text-align: center;\n      }\n\n      #play-pause-btn {\n        border-radius: 50%;\n        /* Buttons are border-box, so the UA's default padding would eat into\n           the icon's content box and shrink the glyph relative to the circle\n           by a different amount at every diameter. */\n        padding: 0;\n        height: var(--playback-controls-play-button-diameter--);\n        width: var(--playback-controls-play-button-diameter--);\n        border: none;\n        background-color: var(--playback-controls-play-button-color--);\n        color: var(--playback-controls-play-icon-color--);\n        vertical-align: middle;\n      }\n\n      #play-pause-btn:active {\n        opacity: 0.75;\n      }\n\n      #play-pause-btn svg {\n        width: 100%;\n        height: 100%;\n      }\n\n      .unstyled-button {\n        background: none;\n        border: none;\n        margin: 0;\n        padding: 0;\n        /* Buttons don't inherit color from their parent, so the icons'\n           currentColor needs it passed down explicitly. */\n        color: inherit;\n      }\n\n      button {\n        cursor: pointer;\n      }\n\n      .jump-btn:active {\n        opacity: 0.75;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ia-playback-controls.js","sourceRoot":"","sources":["../../../../src/elements/ia-playback-controls/ia-playback-controls.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  type CSSResultGroup,\n  type TemplateResult,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { localized, msg, str } from '@lit/localize';\n\nimport { PlaybackMode } from './models';\n\nimport nextSectionIcon from './assets/next-section';\nimport pauseIcon from './assets/pause';\nimport playIcon from './assets/play';\nimport playbackSpeedIcon from './assets/playback-speed';\nimport previousSectionIcon from './assets/previous-section';\nimport replayIcon from './assets/replay';\nimport skipAheadIcon from './assets/skip-ahead';\nimport volumeFullIcon from './assets/volume-full';\nimport volumeMediumIcon from './assets/volume-medium';\nimport volumeMuteIcon from './assets/volume-mute';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n  PlaybackRateChange: 'playbackRateChange',\n  VolumeChange: 'volumeChange',\n  BackButtonPressed: 'back-button-pressed',\n  ForwardButtonPressed: 'forward-button-pressed',\n  PlayPauseButtonPressed: 'play-pause-button-pressed',\n  PrevSectionButtonPressed: 'prev-section-button-pressed',\n  NextSectionButtonPressed: 'next-section-button-pressed',\n};\n\n/** How much one press of the speed button moves the playback rate */\nconst PLAYBACK_RATE_STEP = 0.25;\n\n/** The rate the speed button wraps back around to once it passes the top */\nconst MIN_PLAYBACK_RATE = 0.5;\nconst MAX_PLAYBACK_RATE = 2;\n\n/** How much one press of the volume button moves the volume */\nconst VOLUME_STEP = 0.25;\n\n/**\n * The transport controls for a player: play and pause, skip back and forward\n * ten seconds, jump between sections, and cycle the speed and volume.\n *\n * The element owns no playback itself. It reports presses and lets whatever is\n * playing the audio decide what to do with them.\n */\n@customElement('ia-playback-controls')\n@localized()\nexport class IAPlaybackControls extends LitElement {\n  /** Whether the track is playing or paused */\n  @property({ type: String }) playbackMode: PlaybackMode = PlaybackMode.paused;\n\n  /** Playback speed multiplier, where 1 is normal speed */\n  @property({ type: Number }) playbackRate = 1;\n\n  /** Playback volume, from 0 (muted) to 1 (full) */\n  @property({ type: Number }) volume = 1;\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"container\">\n        <div class=\"vertical-button-stack playback-speed\">\n          <div class=\"vertical-button-container\">\n            <button\n              id=\"playback-rate-btn\"\n              class=\"unstyled-button\"\n              aria-label=${this.playbackRateLabel}\n              @click=${this.handlePlaybackRateChange}\n            >\n              ${playbackSpeedIcon}\n            </button>\n          </div>\n          <div class=\"vertical-button-value\" aria-hidden=\"true\">\n            ${this.playbackRate}x\n          </div>\n        </div>\n\n        <button\n          id=\"prev-section-btn\"\n          class=\"jump-btn unstyled-button\"\n          aria-label=${msg('Previous section')}\n          @click=${this.handlePrevSectionButton}\n        >\n          ${previousSectionIcon}\n        </button>\n\n        <button\n          id=\"back-btn\"\n          class=\"jump-btn unstyled-button\"\n          aria-label=${msg('Skip back ten seconds')}\n          @click=${this.handleBackButton}\n        >\n          ${replayIcon}\n        </button>\n\n        <button\n          id=\"play-pause-btn\"\n          aria-label=${this.isPlaying ? msg('Pause') : msg('Play')}\n          @click=${this.handlePlayPauseButton}\n        >\n          ${this.playPauseButtonIcon}\n        </button>\n\n        <button\n          id=\"forward-btn\"\n          class=\"jump-btn unstyled-button\"\n          aria-label=${msg('Skip ahead ten seconds')}\n          @click=${this.handleForwardButton}\n        >\n          ${skipAheadIcon}\n        </button>\n\n        <button\n          id=\"next-section-btn\"\n          class=\"jump-btn unstyled-button\"\n          aria-label=${msg('Next section')}\n          @click=${this.handleNextSectionButton}\n        >\n          ${nextSectionIcon}\n        </button>\n\n        <div class=\"vertical-button-stack volume\">\n          <div class=\"vertical-button-container\">\n            <button\n              id=\"volume-control-btn\"\n              class=\"unstyled-button\"\n              aria-label=${this.volumeLabel}\n              @click=${this.handleVolumeChange}\n            >\n              ${this.volumeButtonIcon}\n            </button>\n          </div>\n          <div class=\"vertical-button-value\" aria-hidden=\"true\">\n            ${this.volumePercent}%\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private get isPlaying(): boolean {\n    return this.playbackMode === PlaybackMode.playing;\n  }\n\n  /**\n   * The volume held to the 0 to 1 range the controls can represent.\n   *\n   * `volume` is a public property, so it can arrive out of range or as\n   * something that isn't a number at all. Everything that displays, announces\n   * or steps the volume reads it through here, so an impossible value never\n   * reaches the screen reader.\n   */\n  private get clampedVolume(): number {\n    return Math.min(Math.max(this.volume || 0, 0), 1);\n  }\n\n  /** The volume as a whole number, for display and for screen readers */\n  private get volumePercent(): number {\n    return Math.round(this.clampedVolume * 100);\n  }\n\n  /**\n   * The accessible name for the speed button.\n   *\n   * The rate is left bare rather than followed by a unit like \"times\", because\n   * `@lit/localize` has no plural support, so a unit baked into the string\n   * reads wrong at 1 and translators have no way to correct it. The visible\n   * label beside the button carries the \"x\".\n   */\n  private get playbackRateLabel(): string {\n    return msg(str`Playback speed, currently ${this.playbackRate}`);\n  }\n\n  /**\n   * The accessible name for the volume button.\n   *\n   * \"percent\" is safe to include, unlike a pluralised unit: it reads correctly\n   * at every value.\n   */\n  private get volumeLabel(): string {\n    return msg(str`Volume, currently ${this.volumePercent} percent`);\n  }\n\n  private get playPauseButtonIcon(): TemplateResult {\n    return this.isPlaying ? pauseIcon : playIcon;\n  }\n\n  private get volumeButtonIcon(): TemplateResult {\n    if (this.clampedVolume <= 0) return volumeMuteIcon;\n    if (this.clampedVolume >= 1) return volumeFullIcon;\n    return volumeMediumIcon;\n  }\n\n  /**\n   * Steps the playback rate up, wrapping back to the slowest once it reaches\n   * the fastest.\n   *\n   * The rate is clamped on the way in as well as the way out, so a rate set\n   * from outside the range lands back on the documented steps rather than\n   * drifting off the grid, overshooting the top, or climbing forever.\n   */\n  private handlePlaybackRateChange(): void {\n    const current = Math.max(\n      this.playbackRate || MIN_PLAYBACK_RATE,\n      MIN_PLAYBACK_RATE,\n    );\n    this.playbackRate =\n      current >= MAX_PLAYBACK_RATE\n        ? MIN_PLAYBACK_RATE\n        : Math.min(current + PLAYBACK_RATE_STEP, MAX_PLAYBACK_RATE);\n\n    this.dispatchEvent(\n      new CustomEvent<{ playbackRate: number }>(Events.PlaybackRateChange, {\n        detail: { playbackRate: this.playbackRate },\n      }),\n    );\n  }\n\n  /** Steps the volume up, wrapping round to muted once it passes full. */\n  private handleVolumeChange(): void {\n    const current = this.clampedVolume;\n    this.volume = current >= 1 ? 0 : Math.min(current + VOLUME_STEP, 1);\n\n    this.dispatchEvent(\n      new CustomEvent<{ volume: number }>(Events.VolumeChange, {\n        detail: { volume: this.volume },\n      }),\n    );\n  }\n\n  private handleBackButton(): void {\n    this.dispatchEvent(new Event(Events.BackButtonPressed));\n  }\n\n  private handleForwardButton(): void {\n    this.dispatchEvent(new Event(Events.ForwardButtonPressed));\n  }\n\n  private handlePrevSectionButton(): void {\n    this.dispatchEvent(new Event(Events.PrevSectionButtonPressed));\n  }\n\n  private handleNextSectionButton(): void {\n    this.dispatchEvent(new Event(Events.NextSectionButtonPressed));\n  }\n\n  private handlePlayPauseButton(): void {\n    this.playbackMode = this.isPlaying\n      ? PlaybackMode.paused\n      : PlaybackMode.playing;\n\n    this.dispatchEvent(new Event(Events.PlayPauseButtonPressed));\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        --playback-controls-icon-color--: var(\n          --ia-theme-playback-controls-icon-color,\n          #fff\n        );\n        --playback-controls-play-icon-color--: var(\n          --ia-theme-playback-controls-play-icon-color,\n          #333\n        );\n        --playback-controls-play-button-color--: var(\n          --ia-theme-playback-controls-play-button-color,\n          #fff\n        );\n        --playback-controls-play-button-diameter--: var(\n          --ia-theme-playback-controls-play-button-diameter,\n          4rem\n        );\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        padding-left: 0.25rem;\n        padding-right: 0.25rem;\n      }\n\n      .container {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        color: var(--playback-controls-icon-color--);\n        width: 100%;\n      }\n\n      .vertical-button-stack {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n      }\n\n      .vertical-button-container {\n        text-align: center;\n      }\n\n      .vertical-button-container button,\n      .vertical-button-container svg {\n        vertical-align: bottom;\n      }\n\n      .vertical-button-value {\n        font-size: 0.7em;\n        line-height: 1.4em;\n        text-align: center;\n      }\n\n      #play-pause-btn {\n        border-radius: 50%;\n        /* Buttons are border-box, so the UA's default padding would eat into\n           the icon's content box and shrink the glyph relative to the circle\n           by a different amount at every diameter. */\n        padding: 0;\n        height: var(--playback-controls-play-button-diameter--);\n        width: var(--playback-controls-play-button-diameter--);\n        border: none;\n        background-color: var(--playback-controls-play-button-color--);\n        color: var(--playback-controls-play-icon-color--);\n        vertical-align: middle;\n      }\n\n      #play-pause-btn:active {\n        opacity: 0.75;\n      }\n\n      #play-pause-btn svg {\n        width: 100%;\n        height: 100%;\n      }\n\n      .unstyled-button {\n        background: none;\n        border: none;\n        margin: 0;\n        padding: 0;\n        /* Buttons don't inherit color from their parent, so the icons'\n           currentColor needs it passed down explicitly. */\n        color: inherit;\n      }\n\n      button {\n        cursor: pointer;\n      }\n\n      .jump-btn:active {\n        opacity: 0.75;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/elements/ia-radio-player/ia-radio-player.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ia-radio-player.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-radio-player/ia-radio-player.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ia-radio-player.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-radio-player/ia-radio-player.ts"],"names":[],"mappings":"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"}

package/dist/src/elements/ia-radio-player/ia-radio-player.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { css, html, LitElement, nothing, } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
-import { msg, str } from '@lit/localize';
+import { localized, msg, str } from '@lit/localize';
 import { PlaybackMode } from '../../elements/ia-playback-controls/models.js';
 import '../../elements/ia-audio-element/ia-audio-element.js';
 import '../../elements/ia-expandable-search-bar/ia-expandable-search-bar.js';
@@ -748,7 +748,8 @@ __decorate([
     query('ia-search-results-switcher')
 ], IARadioPlayer.prototype, "searchResultsSwitcher", void 0);
 IARadioPlayer = __decorate([
-    customElement('ia-radio-player')
+    customElement('ia-radio-player'),
+    localized()
 ], IARadioPlayer);
 export { IARadioPlayer };
 //# sourceMappingURL=ia-radio-player.js.map

package/dist/src/elements/ia-radio-player/ia-radio-player.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-radio-player.js","sourceRoot":"","sources":["../../../../src/elements/ia-radio-player/ia-radio-player.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type CSSResultGroup,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { msg, str } from '@lit/localize';\n\nimport type { AudioSource } from '@src/elements/ia-audio-element/models';\nimport type { QuickSearchEntry } from '@src/elements/ia-expandable-search-bar/models';\nimport { PlaybackMode } from '@src/elements/ia-playback-controls/models';\nimport type {\n  TranscriptConfig,\n  TranscriptEntryConfig,\n} from '@src/elements/ia-transcript-view/models';\nimport type { IAAudioElement } from '@src/elements/ia-audio-element/ia-audio-element';\nimport type { IATranscriptView } from '@src/elements/ia-transcript-view/ia-transcript-view';\nimport type { ZoneOfSilence } from '@src/elements/ia-waveform-progress/models';\n\nimport type { MusicZone, RadioPlayerConfig } from './models';\nimport type { SearchHandlerInterface } from './search/search-handler';\nimport type { IASearchResultsSwitcher } from './ia-search-results-switcher';\n\nimport '@src/elements/ia-audio-element/ia-audio-element';\nimport '@src/elements/ia-expandable-search-bar/ia-expandable-search-bar';\nimport '@src/elements/ia-playback-controls/ia-playback-controls';\nimport '@src/elements/ia-scrubber-bar/ia-scrubber-bar';\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\nimport '@src/elements/ia-transcript-view/ia-transcript-view';\nimport '@src/elements/ia-waveform-progress/ia-waveform-progress';\nimport './ia-search-results-switcher';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n  CanPlay: 'canplay',\n  CurrentTimeChanged: 'currentTimeChanged',\n  HighlightedSearchResultChanged: 'highlightedSearchResultChanged',\n  JumpBackButtonPressed: 'jumpBackButtonPressed',\n  JumpForwardButtonPressed: 'jumpForwardButtonPressed',\n  NextSectionButtonPressed: 'nextSectionButtonPressed',\n  PlaybackPaused: 'playbackPaused',\n  PlaybackRateChanged: 'playbackRateChanged',\n  PlaybackStarted: 'playbackStarted',\n  PlayPauseButtonPressed: 'playPauseButtonPressed',\n  PrevSectionButtonPressed: 'prevSectionButtonPressed',\n  SearchCleared: 'searchCleared',\n  SearchExecuted: 'searchExecuted',\n  SearchFailed: 'searchFailed',\n  SearchTermChanged: 'searchTermChanged',\n  TimeChangedFromScrub: 'timeChangedFromScrub',\n  TranscriptEntrySelected: 'transcriptEntrySelected',\n};\n\n/** How far the skip buttons move, in seconds */\nconst SKIP_SECONDS = 10;\n\n/** Shortest term worth searching for */\nconst MIN_SEARCH_LENGTH = 2;\n\n/**\n * Nudge past a section boundary when jumping to it, so playback lands inside\n * the next section rather than exactly on its edge.\n */\nconst SECTION_SEEK_NUDGE = 0.1;\n\n/**\n * A player for transcribed radio broadcasts.\n *\n * It owns no playback or search logic of its own. It wires the audio element,\n * transport controls, waveform, scrubber, search bar and transcript together,\n * and hands searching off to whatever `searchHandler` it is given.\n */\n@customElement('ia-radio-player')\nexport class IARadioPlayer extends LitElement {\n  /** What is being played, and what to show about it */\n  @property({ type: Object }) config?: RadioPlayerConfig;\n\n  /** Where searches go. Without one, the search bar does nothing. */\n  @property({ type: Object }) searchHandler?: SearchHandlerInterface;\n\n  /** The transcript to show when no search is running */\n  @property({ type: Object }) transcriptConfig?: TranscriptConfig;\n\n  /** The transcript marked up with search results, shown while searching */\n  @property({ type: Object }) searchResultsTranscript?: TranscriptConfig;\n\n  /** Playback position, in seconds */\n  @property({ type: Number }) currentTime = 0;\n\n  /** What is currently in the search bar */\n  @property({ type: String }) searchTerm = '';\n\n  /** Whether to skip past the music sections rather than play them */\n  @property({ type: Boolean }) skipMusicSections = false;\n\n  /** Whether to shade the music sections on the waveform */\n  @property({ type: Boolean }) showMusicZones = false;\n\n  @state() private percentComplete = 0;\n\n  @state() private isPlaying = false;\n\n  @state() private duration = 0;\n\n  @state() private playbackRate = 1;\n\n  @state() private volume = 1;\n\n  @state() private isSearching = false;\n\n  /** Numbers each search so a stale one can be told from the current one. */\n  private latestSearchId = 0;\n\n  @query('ia-audio-element') private audioElement?: IAAudioElement | null;\n\n  @query('ia-transcript-view') private transcriptView?: IATranscriptView | null;\n\n  @query('ia-search-results-switcher')\n  private searchResultsSwitcher?: IASearchResultsSwitcher | null;\n\n  render(): TemplateResult {\n    return html`\n      ${this.audioElementTemplate}\n      <section role=\"main\">\n        ${this.titleDateTemplate} ${this.collectionLogoTemplate}\n        ${this.playbackControlsTemplate}\n        <div class=\"waveform-scrubber-container\">\n          ${this.waveformProgressTemplate} ${this.scrubberBarTemplate}\n        </div>\n        ${this.searchSectionTemplate} ${this.transcriptViewTemplate}\n      </section>\n    `;\n  }\n\n  /** Starts playback */\n  play(): void {\n    this.audioElement?.play();\n  }\n\n  /** Pauses playback */\n  pause(): void {\n    this.audioElement?.pause();\n  }\n\n  /** Jumps to a position in the track, in seconds */\n  seekTo(seconds: number): void {\n    this.audioElement?.seekTo(seconds);\n  }\n\n  private get audioElementTemplate(): TemplateResult {\n    return html`\n      <ia-audio-element\n        .sources=${this.audioSources}\n        .playbackRate=${this.playbackRate}\n        .volume=${this.volume}\n        @timeupdate=${this.handleTimeChange}\n        @durationchange=${this.handleDurationChange}\n        @playbackStarted=${this.playbackStarted}\n        @playbackPaused=${this.playbackPaused}\n        @canplay=${this.canPlay}\n      ></ia-audio-element>\n    `;\n  }\n\n  private get titleDateTemplate(): TemplateResult {\n    return html`\n      <div class=\"title-date\">\n        <div class=\"title\">${this.config?.title ?? ''}</div>\n        <div class=\"date\">${this.config?.date ?? ''}</div>\n      </div>\n    `;\n  }\n\n  private get collectionLogoTemplate(): TemplateResult | typeof nothing {\n    const logoUrl = this.config?.logoUrl;\n    if (!logoUrl) return nothing;\n\n    return html`\n      <img\n        class=\"collection-logo\"\n        src=${logoUrl}\n        alt=${msg('Collection logo')}\n      />\n    `;\n  }\n\n  private get playbackControlsTemplate(): TemplateResult {\n    return html`\n      <ia-playback-controls\n        .playbackMode=${this.isPlaying\n          ? PlaybackMode.playing\n          : PlaybackMode.paused}\n        .playbackRate=${this.playbackRate}\n        .volume=${this.volume}\n        @back-button-pressed=${this.handleBackButton}\n        @play-pause-button-pressed=${this.handlePlayPauseButton}\n        @forward-button-pressed=${this.handleForwardButton}\n        @volumeChange=${this.handleVolumeChange}\n        @playbackRateChange=${this.handlePlaybackRateChange}\n        @next-section-button-pressed=${this.handleNextSectionButton}\n        @prev-section-button-pressed=${this.handlePrevSectionButton}\n      ></ia-playback-controls>\n    `;\n  }\n\n  private get waveformProgressTemplate(): TemplateResult | typeof nothing {\n    const waveformUrl = this.config?.waveformUrl;\n    if (!waveformUrl) return nothing;\n\n    return html`\n      <ia-waveform-progress\n        interactive\n        .waveformUrl=${waveformUrl}\n        .percentComplete=${this.percentComplete}\n        .zonesOfSilence=${this.showMusicZones ? this.zonesOfSilence : []}\n        @valuechange=${this.handleScrub}\n      ></ia-waveform-progress>\n    `;\n  }\n\n  private get scrubberBarTemplate(): TemplateResult {\n    return html`\n      <ia-scrubber-bar\n        .sectionMarkerPercentages=${this.sectionMarkerPercentages}\n        .value=${this.percentComplete}\n        @valuechange=${this.handleScrub}\n      ></ia-scrubber-bar>\n    `;\n  }\n\n  private get transcriptViewTemplate(): TemplateResult {\n    return html`\n      <div class=\"transcript-container\">\n        <ia-transcript-view\n          .config=${this.currentTranscript}\n          .currentTime=${this.currentTime}\n          @transcriptEntrySelected=${this.handleTranscriptEntrySelected}\n        ></ia-transcript-view>\n      </div>\n    `;\n  }\n\n  private get searchSectionTemplate(): TemplateResult {\n    return html`\n      <div class=\"search-section\">\n        <ia-expandable-search-bar\n          .searchTerm=${this.searchTerm}\n          .quickSearches=${this.quickSearches}\n          ?showsDisclosure=${this.quickSearches.length > 0}\n          @inputchange=${this.handleSearchInput}\n          @enterKeyPressed=${this.handleSearchSubmitted}\n          @quickSearchSelected=${this.handleQuickSearchSelected}\n          @searchCleared=${this.handleSearchCleared}\n        ></ia-expandable-search-bar>\n\n        <div class=\"search-results-info\">\n          <!--\n            Always rendered, so a screen reader is already watching it by the\n            time the text changes. A live region added to the page with its\n            text already in place is not announced.\n          -->\n          <div class=\"sr-only\" role=\"status\">${this.searchStatusMessage}</div>\n\n          ${this.isSearching\n            ? html`<ia-status-indicator\n                mode=\"loading\"\n                loadingTitle=${msg('Searching the transcript')}\n              ></ia-status-indicator>`\n            : this.searchOutcomeTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  /** What to show once a search has come back: a counter, or nothing found. */\n  private get searchOutcomeTemplate(): TemplateResult | typeof nothing {\n    if (this.searchTerm.length === 0 || !this.searchResultsTranscript) {\n      return nothing;\n    }\n\n    const resultCount = this.searchResults.length;\n    if (resultCount === 0) {\n      return html`\n        <div class=\"no-search-results-message\" aria-hidden=\"true\">\n          ${msg('No search results.')}\n        </div>\n      `;\n    }\n\n    return html`\n      <ia-search-results-switcher\n        .numberOfResults=${resultCount}\n        @searchResultIndexChanged=${this.handleSearchResultIndexChanged}\n      ></ia-search-results-switcher>\n    `;\n  }\n\n  /** What the live region announces as a search runs and comes back. */\n  private get searchStatusMessage(): string {\n    if (this.isSearching) return msg('Searching the transcript');\n    if (this.searchTerm.length === 0 || !this.searchResultsTranscript)\n      return '';\n\n    const count = this.searchResults.length;\n    if (count === 0) return msg('No search results.');\n\n    return msg(str`${count} search results`);\n  }\n\n  private get currentTranscript(): TranscriptConfig | undefined {\n    return this.searchResultsTranscript ?? this.transcriptConfig;\n  }\n\n  private get transcriptEntries(): TranscriptEntryConfig[] {\n    return this.currentTranscript?.entries ?? [];\n  }\n\n  private get searchResults(): TranscriptEntryConfig[] {\n    return this.searchResultsTranscript?.searchResults ?? [];\n  }\n\n  private get audioSources(): AudioSource[] {\n    return this.config?.audioSources ?? [];\n  }\n\n  private get quickSearches(): QuickSearchEntry[] {\n    return (this.config?.quickSearches ?? []).map((displayText) => ({\n      displayText,\n    }));\n  }\n\n  private get musicEntries(): TranscriptEntryConfig[] {\n    return this.transcriptEntries.filter((entry) => entry.isMusic);\n  }\n\n  /** The music stretches, as percentages, for marking on the waveform. */\n  private get zonesOfSilence(): ZoneOfSilence[] {\n    if (this.duration === 0) return [];\n\n    return this.musicEntries.map((entry) => ({\n      startPercent: (entry.start / this.duration) * 100,\n      endPercent: (entry.end / this.duration) * 100,\n    }));\n  }\n\n  /** The music stretches in seconds, for skipping past them. */\n  private get musicZones(): MusicZone[] {\n    return this.musicEntries.map((entry) => ({\n      start: entry.start,\n      end: entry.end,\n    }));\n  }\n\n  /**\n   * Every section boundary as a percentage, including the two ends.\n   *\n   * The section skip buttons step between these, and the scrubber draws a\n   * marker at each.\n   */\n  private get sectionMarkerPercentages(): number[] {\n    const percentages = [0];\n\n    this.zonesOfSilence.forEach((zone) => {\n      percentages.push(zone.startPercent, zone.endPercent);\n    });\n    percentages.push(100);\n\n    return percentages;\n  }\n\n  updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has('searchResultsTranscript')) {\n      this.resetSearchResultPosition();\n    }\n\n    if (changedProperties.has('searchHandler') && this.searchTerm) {\n      this.executeSearch(this.searchTerm);\n    }\n\n    if (changedProperties.has('currentTime')) {\n      this.dispatchEvent(\n        new CustomEvent<{ currentTime: number }>(Events.CurrentTimeChanged, {\n          detail: { currentTime: this.currentTime },\n        }),\n      );\n\n      if (this.skipMusicSections) this.skipMusicZone();\n    }\n  }\n\n  private handleTimeChange(e: CustomEvent<{ currentTime: number }>): void {\n    const { currentTime } = e.detail;\n    if (currentTime === undefined) return;\n\n    this.currentTime = currentTime;\n    // A duration of 0 means nothing has loaded yet, and dividing by it would\n    // put NaN into the scrubber and the waveform.\n    this.percentComplete =\n      this.duration > 0 ? (currentTime / this.duration) * 100 : 0;\n  }\n\n  private handleDurationChange(e: CustomEvent<{ duration: number }>): void {\n    const { duration } = e.detail;\n    // A stream reports Infinity, and metadata that hasn't loaded reports NaN.\n    if (!Number.isFinite(duration)) return;\n\n    this.duration = duration;\n  }\n\n  private handlePlaybackRateChange(\n    e: CustomEvent<{ playbackRate: number }>,\n  ): void {\n    const { playbackRate } = e.detail;\n    if (playbackRate === undefined) return;\n\n    this.playbackRate = playbackRate;\n    this.dispatchEvent(\n      new CustomEvent<{ playbackRate: number }>(Events.PlaybackRateChanged, {\n        detail: { playbackRate },\n      }),\n    );\n  }\n\n  private handleVolumeChange(e: CustomEvent<{ volume: number }>): void {\n    const { volume } = e.detail;\n    if (volume === undefined) return;\n\n    this.volume = volume;\n    this.dispatchEvent(\n      new CustomEvent<{ volume: number }>('volumeChanged', {\n        detail: { volume },\n      }),\n    );\n  }\n\n  private handleBackButton(): void {\n    this.audioElement?.seekBy(-SKIP_SECONDS);\n    this.dispatchEvent(new Event(Events.JumpBackButtonPressed));\n  }\n\n  private handleForwardButton(): void {\n    this.audioElement?.seekBy(SKIP_SECONDS);\n    this.dispatchEvent(new Event(Events.JumpForwardButtonPressed));\n  }\n\n  private handlePlayPauseButton(): void {\n    this.isPlaying = !this.isPlaying;\n\n    if (this.isPlaying) this.audioElement?.play();\n    else this.audioElement?.pause();\n\n    this.dispatchEvent(\n      new CustomEvent<{ isPlaying: boolean }>(Events.PlayPauseButtonPressed, {\n        detail: { isPlaying: this.isPlaying },\n      }),\n    );\n  }\n\n  private handleNextSectionButton(): void {\n    const ahead = this.sectionMarkerPercentages.filter(\n      (percent) => percent > this.percentComplete + SECTION_SEEK_NUDGE,\n    );\n    this.seekToSectionBoundary(ahead, Math.min, SECTION_SEEK_NUDGE);\n\n    this.dispatchEvent(new Event(Events.NextSectionButtonPressed));\n  }\n\n  private handlePrevSectionButton(): void {\n    const behind = this.sectionMarkerPercentages.filter(\n      (percent) => percent < this.percentComplete - SECTION_SEEK_NUDGE,\n    );\n    this.seekToSectionBoundary(behind, Math.max, -SECTION_SEEK_NUDGE);\n\n    this.dispatchEvent(new Event(Events.PrevSectionButtonPressed));\n  }\n\n  /**\n   * Seeks to the nearest of a set of boundaries.\n   *\n   * Does nothing when the set is empty, since `Math.min` of nothing is\n   * `Infinity` and `Math.max` of nothing is `-Infinity`, either of which would\n   * be handed straight to the audio element as a position.\n   */\n  private seekToSectionBoundary(\n    percentages: number[],\n    pick: (...values: number[]) => number,\n    nudge: number,\n  ): void {\n    if (percentages.length === 0) return;\n\n    const boundary = pick(...percentages);\n    this.audioElement?.seekTo(this.duration * (boundary / 100) + nudge);\n  }\n\n  private handleScrub(e: CustomEvent<{ value: number }>): void {\n    const percentage = e.detail.value;\n    if (percentage === undefined) return;\n\n    const newTime = this.duration * (percentage / 100);\n    this.currentTime = newTime;\n    this.percentComplete = percentage;\n    this.audioElement?.seekTo(newTime);\n\n    this.dispatchEvent(\n      new CustomEvent<{ newTime: number }>(Events.TimeChangedFromScrub, {\n        detail: { newTime },\n      }),\n    );\n  }\n\n  private handleTranscriptEntrySelected(\n    e: CustomEvent<{ entry: TranscriptEntryConfig }>,\n  ): void {\n    const { entry } = e.detail;\n    if (!entry) return;\n\n    this.currentTime = entry.start;\n    this.audioElement?.seekTo(entry.start);\n    this.audioElement?.play();\n\n    this.dispatchEvent(\n      new CustomEvent<{ newTime: number }>(Events.TranscriptEntrySelected, {\n        detail: { newTime: entry.start },\n      }),\n    );\n  }\n\n  private handleSearchInput(e: CustomEvent<{ value: string }>): void {\n    const { value } = e.detail;\n    if (value === undefined) return;\n\n    this.searchTerm = value;\n\n    // An empty box has nothing to show results for. The counter already hides\n    // itself on an empty term, so without dropping the results too the\n    // transcript keeps its outlines and offers no way to step between them.\n    if (value.length === 0) {\n      this.searchResultsTranscript = undefined;\n      // Abandons whatever is in flight, so its results can't land afterwards.\n      this.latestSearchId += 1;\n      this.isSearching = false;\n      this.resetSearchResultPosition();\n    }\n\n    this.emitSearchTermChanged(value);\n  }\n\n  private handleSearchSubmitted(e: CustomEvent<{ value: string }>): void {\n    const { value } = e.detail;\n    if (!value) return;\n\n    this.executeSearch(value);\n  }\n\n  private handleQuickSearchSelected(\n    e: CustomEvent<{ quickSearchEntry: QuickSearchEntry }>,\n  ): void {\n    const term = e.detail.quickSearchEntry?.displayText;\n    if (!term) return;\n\n    this.emitSearchTermChanged(term);\n    this.executeSearch(term);\n  }\n\n  private handleSearchCleared(): void {\n    this.searchTerm = '';\n    this.searchResultsTranscript = undefined;\n    // Abandons whatever is in flight, so its results can't arrive after this.\n    this.latestSearchId += 1;\n    this.isSearching = false;\n\n    this.dispatchEvent(new Event(Events.SearchCleared));\n    this.emitSearchTermChanged('');\n    this.resetSearchResultPosition();\n  }\n\n  /**\n   * Runs a search and shows its results.\n   *\n   * Each run is numbered, and only the newest one is allowed to report back.\n   * Searches go over the network, so a slow one started earlier can land after\n   * a fast one started later, and without this the older results would end up\n   * on screen under the newer term.\n   *\n   * A failed search has to put the spinner away as surely as a successful one,\n   * hence the `finally`. Leaving it up would hide the search UI for as long as\n   * the page lives.\n   */\n  private async executeSearch(term: string): Promise<void> {\n    if (!this.searchHandler || term.length < MIN_SEARCH_LENGTH) {\n      this.searchResultsTranscript = undefined;\n      return;\n    }\n\n    this.searchTerm = term;\n    this.isSearching = true;\n    this.dispatchEvent(new Event(Events.SearchExecuted));\n\n    this.latestSearchId += 1;\n    const searchId = this.latestSearchId;\n\n    try {\n      const results = await this.searchHandler.search(term);\n      if (searchId !== this.latestSearchId) return;\n\n      this.searchResultsTranscript = results;\n    } catch {\n      if (searchId !== this.latestSearchId) return;\n\n      this.searchResultsTranscript = undefined;\n      this.dispatchEvent(new Event(Events.SearchFailed));\n    } finally {\n      if (searchId === this.latestSearchId) this.isSearching = false;\n    }\n  }\n\n  private handleSearchResultIndexChanged(\n    e: CustomEvent<{ searchResultIndex: number }>,\n  ): void {\n    const { searchResultIndex } = e.detail;\n    if (searchResultIndex === undefined || !this.transcriptView) return;\n\n    this.transcriptView.selectedSearchResultIndex = searchResultIndex;\n    this.transcriptView.scrollToSelectedSearchResult();\n\n    this.dispatchEvent(\n      new CustomEvent<{ searchResultIndex: number }>(\n        Events.HighlightedSearchResultChanged,\n        { detail: { searchResultIndex } },\n      ),\n    );\n  }\n\n  /** Puts both the transcript and the switcher back to the first result. */\n  private resetSearchResultPosition(): void {\n    if (this.transcriptView) this.transcriptView.selectedSearchResultIndex = 0;\n    if (this.searchResultsSwitcher) {\n      this.searchResultsSwitcher.currentResultIndex = 0;\n    }\n  }\n\n  private emitSearchTermChanged(searchTerm: string): void {\n    this.dispatchEvent(\n      new CustomEvent<{ searchTerm: string }>(Events.SearchTermChanged, {\n        detail: { searchTerm },\n      }),\n    );\n  }\n\n  private playbackPaused(): void {\n    this.isPlaying = false;\n    this.dispatchEvent(new Event(Events.PlaybackPaused));\n  }\n\n  private playbackStarted(): void {\n    this.isPlaying = true;\n    this.dispatchEvent(new Event(Events.PlaybackStarted));\n  }\n\n  private canPlay(): void {\n    this.dispatchEvent(new Event(Events.CanPlay));\n  }\n\n  /** Jumps past a music stretch if playback has wandered into one. */\n  private skipMusicZone(): void {\n    const activeZone = this.musicZones.find(\n      (zone) => this.currentTime > zone.start && this.currentTime < zone.end,\n    );\n    if (!activeZone) return;\n\n    this.audioElement?.seekTo(activeZone.end + SECTION_SEEK_NUDGE);\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        --radio-player-title-color--: var(\n          --ia-theme-radio-player-title-color,\n          #fff\n        );\n        --radio-player-title-font--: var(\n          --ia-theme-radio-player-title-font,\n          1.5em sans-serif\n        );\n        --radio-player-date-color--: var(\n          --ia-theme-radio-player-date-color,\n          #fff\n        );\n        --radio-player-date-font--: var(\n          --ia-theme-radio-player-date-font,\n          1em sans-serif\n        );\n        --radio-player-logo-max-height--: var(\n          --ia-theme-radio-player-logo-max-height,\n          8rem\n        );\n        --radio-player-waveform-height--: var(\n          --ia-theme-radio-player-waveform-height,\n          5rem\n        );\n      }\n\n      section[role='main'] {\n        display: grid;\n        grid-gap: 0.5rem;\n      }\n\n      ia-status-indicator {\n        --ia-theme-icon-width: 1.5em;\n        --ia-theme-primary-text-color: #999;\n\n        display: block;\n        margin: auto;\n      }\n\n      /* mobile view */\n      @media (max-width: 770px) {\n        section[role='main'] {\n          grid-template-columns: 25% 1fr;\n          grid-template-areas:\n            'collection-logo title-date'\n            'waveform-scrubber waveform-scrubber'\n            'playback-controls playback-controls'\n            'search-section search-section'\n            'transcript-container transcript-container';\n        }\n\n        .date {\n          text-align: left;\n        }\n\n        ia-transcript-view {\n          --ia-theme-transcript-time-display: none;\n        }\n\n        ia-playback-controls {\n          width: 75%;\n          margin: auto;\n        }\n\n        .search-section {\n          width: 75%;\n          margin: auto;\n        }\n      }\n\n      /* wide view */\n      @media (min-width: 770px) {\n        section[role='main'] {\n          grid-template-columns: 192px 0 250px 1fr;\n          grid-template-areas:\n            'title-date title-date title-date title-date'\n            'collection-logo . playback-controls waveform-scrubber'\n            'search-section transcript-container transcript-container transcript-container';\n        }\n\n        .title-date {\n          display: flex;\n          justify-content: space-between;\n          align-items: baseline;\n        }\n\n        ia-transcript-view {\n          --ia-theme-transcript-time-display: block;\n        }\n      }\n\n      .title-date {\n        grid-area: title-date;\n      }\n\n      .title {\n        color: var(--radio-player-title-color--);\n        font: var(--radio-player-title-font--);\n      }\n\n      .date {\n        color: var(--radio-player-date-color--);\n        font: var(--radio-player-date-font--);\n      }\n\n      ia-waveform-progress {\n        width: 100%;\n        height: var(--radio-player-waveform-height--);\n      }\n\n      ia-playback-controls {\n        grid-area: playback-controls;\n      }\n\n      .transcript-container {\n        grid-area: transcript-container;\n      }\n\n      ia-transcript-view {\n        max-width: 600px;\n        display: block;\n      }\n\n      .collection-logo {\n        width: 100%;\n        max-height: var(--radio-player-logo-max-height--);\n        object-fit: contain;\n        grid-area: collection-logo;\n        align-self: center;\n      }\n\n      .waveform-scrubber-container {\n        width: 100%;\n        height: 100%;\n        grid-area: waveform-scrubber;\n      }\n\n      .search-section {\n        grid-area: search-section;\n      }\n\n      .search-results-info {\n        margin-top: 0.5em;\n      }\n\n      ia-expandable-search-bar {\n        display: block;\n        margin: auto;\n      }\n\n      .no-search-results-message {\n        text-align: center;\n      }\n\n      .sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        white-space: nowrap;\n        border: 0;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ia-radio-player.js","sourceRoot":"","sources":["../../../../src/elements/ia-radio-player/ia-radio-player.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type CSSResultGroup,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { localized, msg, str } from '@lit/localize';\n\nimport type { AudioSource } from '@src/elements/ia-audio-element/models';\nimport type { QuickSearchEntry } from '@src/elements/ia-expandable-search-bar/models';\nimport { PlaybackMode } from '@src/elements/ia-playback-controls/models';\nimport type {\n  TranscriptConfig,\n  TranscriptEntryConfig,\n} from '@src/elements/ia-transcript-view/models';\nimport type { IAAudioElement } from '@src/elements/ia-audio-element/ia-audio-element';\nimport type { IATranscriptView } from '@src/elements/ia-transcript-view/ia-transcript-view';\nimport type { ZoneOfSilence } from '@src/elements/ia-waveform-progress/models';\n\nimport type { MusicZone, RadioPlayerConfig } from './models';\nimport type { SearchHandlerInterface } from './search/search-handler';\nimport type { IASearchResultsSwitcher } from './ia-search-results-switcher';\n\nimport '@src/elements/ia-audio-element/ia-audio-element';\nimport '@src/elements/ia-expandable-search-bar/ia-expandable-search-bar';\nimport '@src/elements/ia-playback-controls/ia-playback-controls';\nimport '@src/elements/ia-scrubber-bar/ia-scrubber-bar';\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\nimport '@src/elements/ia-transcript-view/ia-transcript-view';\nimport '@src/elements/ia-waveform-progress/ia-waveform-progress';\nimport './ia-search-results-switcher';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n  CanPlay: 'canplay',\n  CurrentTimeChanged: 'currentTimeChanged',\n  HighlightedSearchResultChanged: 'highlightedSearchResultChanged',\n  JumpBackButtonPressed: 'jumpBackButtonPressed',\n  JumpForwardButtonPressed: 'jumpForwardButtonPressed',\n  NextSectionButtonPressed: 'nextSectionButtonPressed',\n  PlaybackPaused: 'playbackPaused',\n  PlaybackRateChanged: 'playbackRateChanged',\n  PlaybackStarted: 'playbackStarted',\n  PlayPauseButtonPressed: 'playPauseButtonPressed',\n  PrevSectionButtonPressed: 'prevSectionButtonPressed',\n  SearchCleared: 'searchCleared',\n  SearchExecuted: 'searchExecuted',\n  SearchFailed: 'searchFailed',\n  SearchTermChanged: 'searchTermChanged',\n  TimeChangedFromScrub: 'timeChangedFromScrub',\n  TranscriptEntrySelected: 'transcriptEntrySelected',\n};\n\n/** How far the skip buttons move, in seconds */\nconst SKIP_SECONDS = 10;\n\n/** Shortest term worth searching for */\nconst MIN_SEARCH_LENGTH = 2;\n\n/**\n * Nudge past a section boundary when jumping to it, so playback lands inside\n * the next section rather than exactly on its edge.\n */\nconst SECTION_SEEK_NUDGE = 0.1;\n\n/**\n * A player for transcribed radio broadcasts.\n *\n * It owns no playback or search logic of its own. It wires the audio element,\n * transport controls, waveform, scrubber, search bar and transcript together,\n * and hands searching off to whatever `searchHandler` it is given.\n */\n@customElement('ia-radio-player')\n@localized()\nexport class IARadioPlayer extends LitElement {\n  /** What is being played, and what to show about it */\n  @property({ type: Object }) config?: RadioPlayerConfig;\n\n  /** Where searches go. Without one, the search bar does nothing. */\n  @property({ type: Object }) searchHandler?: SearchHandlerInterface;\n\n  /** The transcript to show when no search is running */\n  @property({ type: Object }) transcriptConfig?: TranscriptConfig;\n\n  /** The transcript marked up with search results, shown while searching */\n  @property({ type: Object }) searchResultsTranscript?: TranscriptConfig;\n\n  /** Playback position, in seconds */\n  @property({ type: Number }) currentTime = 0;\n\n  /** What is currently in the search bar */\n  @property({ type: String }) searchTerm = '';\n\n  /** Whether to skip past the music sections rather than play them */\n  @property({ type: Boolean }) skipMusicSections = false;\n\n  /** Whether to shade the music sections on the waveform */\n  @property({ type: Boolean }) showMusicZones = false;\n\n  @state() private percentComplete = 0;\n\n  @state() private isPlaying = false;\n\n  @state() private duration = 0;\n\n  @state() private playbackRate = 1;\n\n  @state() private volume = 1;\n\n  @state() private isSearching = false;\n\n  /** Numbers each search so a stale one can be told from the current one. */\n  private latestSearchId = 0;\n\n  @query('ia-audio-element') private audioElement?: IAAudioElement | null;\n\n  @query('ia-transcript-view') private transcriptView?: IATranscriptView | null;\n\n  @query('ia-search-results-switcher')\n  private searchResultsSwitcher?: IASearchResultsSwitcher | null;\n\n  render(): TemplateResult {\n    return html`\n      ${this.audioElementTemplate}\n      <section role=\"main\">\n        ${this.titleDateTemplate} ${this.collectionLogoTemplate}\n        ${this.playbackControlsTemplate}\n        <div class=\"waveform-scrubber-container\">\n          ${this.waveformProgressTemplate} ${this.scrubberBarTemplate}\n        </div>\n        ${this.searchSectionTemplate} ${this.transcriptViewTemplate}\n      </section>\n    `;\n  }\n\n  /** Starts playback */\n  play(): void {\n    this.audioElement?.play();\n  }\n\n  /** Pauses playback */\n  pause(): void {\n    this.audioElement?.pause();\n  }\n\n  /** Jumps to a position in the track, in seconds */\n  seekTo(seconds: number): void {\n    this.audioElement?.seekTo(seconds);\n  }\n\n  private get audioElementTemplate(): TemplateResult {\n    return html`\n      <ia-audio-element\n        .sources=${this.audioSources}\n        .playbackRate=${this.playbackRate}\n        .volume=${this.volume}\n        @timeupdate=${this.handleTimeChange}\n        @durationchange=${this.handleDurationChange}\n        @playbackStarted=${this.playbackStarted}\n        @playbackPaused=${this.playbackPaused}\n        @canplay=${this.canPlay}\n      ></ia-audio-element>\n    `;\n  }\n\n  private get titleDateTemplate(): TemplateResult {\n    return html`\n      <div class=\"title-date\">\n        <div class=\"title\">${this.config?.title ?? ''}</div>\n        <div class=\"date\">${this.config?.date ?? ''}</div>\n      </div>\n    `;\n  }\n\n  private get collectionLogoTemplate(): TemplateResult | typeof nothing {\n    const logoUrl = this.config?.logoUrl;\n    if (!logoUrl) return nothing;\n\n    return html`\n      <img\n        class=\"collection-logo\"\n        src=${logoUrl}\n        alt=${msg('Collection logo')}\n      />\n    `;\n  }\n\n  private get playbackControlsTemplate(): TemplateResult {\n    return html`\n      <ia-playback-controls\n        .playbackMode=${this.isPlaying\n          ? PlaybackMode.playing\n          : PlaybackMode.paused}\n        .playbackRate=${this.playbackRate}\n        .volume=${this.volume}\n        @back-button-pressed=${this.handleBackButton}\n        @play-pause-button-pressed=${this.handlePlayPauseButton}\n        @forward-button-pressed=${this.handleForwardButton}\n        @volumeChange=${this.handleVolumeChange}\n        @playbackRateChange=${this.handlePlaybackRateChange}\n        @next-section-button-pressed=${this.handleNextSectionButton}\n        @prev-section-button-pressed=${this.handlePrevSectionButton}\n      ></ia-playback-controls>\n    `;\n  }\n\n  private get waveformProgressTemplate(): TemplateResult | typeof nothing {\n    const waveformUrl = this.config?.waveformUrl;\n    if (!waveformUrl) return nothing;\n\n    return html`\n      <ia-waveform-progress\n        interactive\n        .waveformUrl=${waveformUrl}\n        .percentComplete=${this.percentComplete}\n        .zonesOfSilence=${this.showMusicZones ? this.zonesOfSilence : []}\n        @valuechange=${this.handleScrub}\n      ></ia-waveform-progress>\n    `;\n  }\n\n  private get scrubberBarTemplate(): TemplateResult {\n    return html`\n      <ia-scrubber-bar\n        .sectionMarkerPercentages=${this.sectionMarkerPercentages}\n        .value=${this.percentComplete}\n        @valuechange=${this.handleScrub}\n      ></ia-scrubber-bar>\n    `;\n  }\n\n  private get transcriptViewTemplate(): TemplateResult {\n    return html`\n      <div class=\"transcript-container\">\n        <ia-transcript-view\n          .config=${this.currentTranscript}\n          .currentTime=${this.currentTime}\n          @transcriptEntrySelected=${this.handleTranscriptEntrySelected}\n        ></ia-transcript-view>\n      </div>\n    `;\n  }\n\n  private get searchSectionTemplate(): TemplateResult {\n    return html`\n      <div class=\"search-section\">\n        <ia-expandable-search-bar\n          .searchTerm=${this.searchTerm}\n          .quickSearches=${this.quickSearches}\n          ?showsDisclosure=${this.quickSearches.length > 0}\n          @inputchange=${this.handleSearchInput}\n          @enterKeyPressed=${this.handleSearchSubmitted}\n          @quickSearchSelected=${this.handleQuickSearchSelected}\n          @searchCleared=${this.handleSearchCleared}\n        ></ia-expandable-search-bar>\n\n        <div class=\"search-results-info\">\n          <!--\n            Always rendered, so a screen reader is already watching it by the\n            time the text changes. A live region added to the page with its\n            text already in place is not announced.\n          -->\n          <div class=\"sr-only\" role=\"status\">${this.searchStatusMessage}</div>\n\n          ${this.isSearching\n            ? html`<ia-status-indicator\n                mode=\"loading\"\n                loadingTitle=${msg('Searching the transcript')}\n              ></ia-status-indicator>`\n            : this.searchOutcomeTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  /** What to show once a search has come back: a counter, or nothing found. */\n  private get searchOutcomeTemplate(): TemplateResult | typeof nothing {\n    if (this.searchTerm.length === 0 || !this.searchResultsTranscript) {\n      return nothing;\n    }\n\n    const resultCount = this.searchResults.length;\n    if (resultCount === 0) {\n      return html`\n        <div class=\"no-search-results-message\" aria-hidden=\"true\">\n          ${msg('No search results.')}\n        </div>\n      `;\n    }\n\n    return html`\n      <ia-search-results-switcher\n        .numberOfResults=${resultCount}\n        @searchResultIndexChanged=${this.handleSearchResultIndexChanged}\n      ></ia-search-results-switcher>\n    `;\n  }\n\n  /** What the live region announces as a search runs and comes back. */\n  private get searchStatusMessage(): string {\n    if (this.isSearching) return msg('Searching the transcript');\n    if (this.searchTerm.length === 0 || !this.searchResultsTranscript)\n      return '';\n\n    const count = this.searchResults.length;\n    if (count === 0) return msg('No search results.');\n\n    return msg(str`${count} search results`);\n  }\n\n  private get currentTranscript(): TranscriptConfig | undefined {\n    return this.searchResultsTranscript ?? this.transcriptConfig;\n  }\n\n  private get transcriptEntries(): TranscriptEntryConfig[] {\n    return this.currentTranscript?.entries ?? [];\n  }\n\n  private get searchResults(): TranscriptEntryConfig[] {\n    return this.searchResultsTranscript?.searchResults ?? [];\n  }\n\n  private get audioSources(): AudioSource[] {\n    return this.config?.audioSources ?? [];\n  }\n\n  private get quickSearches(): QuickSearchEntry[] {\n    return (this.config?.quickSearches ?? []).map((displayText) => ({\n      displayText,\n    }));\n  }\n\n  private get musicEntries(): TranscriptEntryConfig[] {\n    return this.transcriptEntries.filter((entry) => entry.isMusic);\n  }\n\n  /** The music stretches, as percentages, for marking on the waveform. */\n  private get zonesOfSilence(): ZoneOfSilence[] {\n    if (this.duration === 0) return [];\n\n    return this.musicEntries.map((entry) => ({\n      startPercent: (entry.start / this.duration) * 100,\n      endPercent: (entry.end / this.duration) * 100,\n    }));\n  }\n\n  /** The music stretches in seconds, for skipping past them. */\n  private get musicZones(): MusicZone[] {\n    return this.musicEntries.map((entry) => ({\n      start: entry.start,\n      end: entry.end,\n    }));\n  }\n\n  /**\n   * Every section boundary as a percentage, including the two ends.\n   *\n   * The section skip buttons step between these, and the scrubber draws a\n   * marker at each.\n   */\n  private get sectionMarkerPercentages(): number[] {\n    const percentages = [0];\n\n    this.zonesOfSilence.forEach((zone) => {\n      percentages.push(zone.startPercent, zone.endPercent);\n    });\n    percentages.push(100);\n\n    return percentages;\n  }\n\n  updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has('searchResultsTranscript')) {\n      this.resetSearchResultPosition();\n    }\n\n    if (changedProperties.has('searchHandler') && this.searchTerm) {\n      this.executeSearch(this.searchTerm);\n    }\n\n    if (changedProperties.has('currentTime')) {\n      this.dispatchEvent(\n        new CustomEvent<{ currentTime: number }>(Events.CurrentTimeChanged, {\n          detail: { currentTime: this.currentTime },\n        }),\n      );\n\n      if (this.skipMusicSections) this.skipMusicZone();\n    }\n  }\n\n  private handleTimeChange(e: CustomEvent<{ currentTime: number }>): void {\n    const { currentTime } = e.detail;\n    if (currentTime === undefined) return;\n\n    this.currentTime = currentTime;\n    // A duration of 0 means nothing has loaded yet, and dividing by it would\n    // put NaN into the scrubber and the waveform.\n    this.percentComplete =\n      this.duration > 0 ? (currentTime / this.duration) * 100 : 0;\n  }\n\n  private handleDurationChange(e: CustomEvent<{ duration: number }>): void {\n    const { duration } = e.detail;\n    // A stream reports Infinity, and metadata that hasn't loaded reports NaN.\n    if (!Number.isFinite(duration)) return;\n\n    this.duration = duration;\n  }\n\n  private handlePlaybackRateChange(\n    e: CustomEvent<{ playbackRate: number }>,\n  ): void {\n    const { playbackRate } = e.detail;\n    if (playbackRate === undefined) return;\n\n    this.playbackRate = playbackRate;\n    this.dispatchEvent(\n      new CustomEvent<{ playbackRate: number }>(Events.PlaybackRateChanged, {\n        detail: { playbackRate },\n      }),\n    );\n  }\n\n  private handleVolumeChange(e: CustomEvent<{ volume: number }>): void {\n    const { volume } = e.detail;\n    if (volume === undefined) return;\n\n    this.volume = volume;\n    this.dispatchEvent(\n      new CustomEvent<{ volume: number }>('volumeChanged', {\n        detail: { volume },\n      }),\n    );\n  }\n\n  private handleBackButton(): void {\n    this.audioElement?.seekBy(-SKIP_SECONDS);\n    this.dispatchEvent(new Event(Events.JumpBackButtonPressed));\n  }\n\n  private handleForwardButton(): void {\n    this.audioElement?.seekBy(SKIP_SECONDS);\n    this.dispatchEvent(new Event(Events.JumpForwardButtonPressed));\n  }\n\n  private handlePlayPauseButton(): void {\n    this.isPlaying = !this.isPlaying;\n\n    if (this.isPlaying) this.audioElement?.play();\n    else this.audioElement?.pause();\n\n    this.dispatchEvent(\n      new CustomEvent<{ isPlaying: boolean }>(Events.PlayPauseButtonPressed, {\n        detail: { isPlaying: this.isPlaying },\n      }),\n    );\n  }\n\n  private handleNextSectionButton(): void {\n    const ahead = this.sectionMarkerPercentages.filter(\n      (percent) => percent > this.percentComplete + SECTION_SEEK_NUDGE,\n    );\n    this.seekToSectionBoundary(ahead, Math.min, SECTION_SEEK_NUDGE);\n\n    this.dispatchEvent(new Event(Events.NextSectionButtonPressed));\n  }\n\n  private handlePrevSectionButton(): void {\n    const behind = this.sectionMarkerPercentages.filter(\n      (percent) => percent < this.percentComplete - SECTION_SEEK_NUDGE,\n    );\n    this.seekToSectionBoundary(behind, Math.max, -SECTION_SEEK_NUDGE);\n\n    this.dispatchEvent(new Event(Events.PrevSectionButtonPressed));\n  }\n\n  /**\n   * Seeks to the nearest of a set of boundaries.\n   *\n   * Does nothing when the set is empty, since `Math.min` of nothing is\n   * `Infinity` and `Math.max` of nothing is `-Infinity`, either of which would\n   * be handed straight to the audio element as a position.\n   */\n  private seekToSectionBoundary(\n    percentages: number[],\n    pick: (...values: number[]) => number,\n    nudge: number,\n  ): void {\n    if (percentages.length === 0) return;\n\n    const boundary = pick(...percentages);\n    this.audioElement?.seekTo(this.duration * (boundary / 100) + nudge);\n  }\n\n  private handleScrub(e: CustomEvent<{ value: number }>): void {\n    const percentage = e.detail.value;\n    if (percentage === undefined) return;\n\n    const newTime = this.duration * (percentage / 100);\n    this.currentTime = newTime;\n    this.percentComplete = percentage;\n    this.audioElement?.seekTo(newTime);\n\n    this.dispatchEvent(\n      new CustomEvent<{ newTime: number }>(Events.TimeChangedFromScrub, {\n        detail: { newTime },\n      }),\n    );\n  }\n\n  private handleTranscriptEntrySelected(\n    e: CustomEvent<{ entry: TranscriptEntryConfig }>,\n  ): void {\n    const { entry } = e.detail;\n    if (!entry) return;\n\n    this.currentTime = entry.start;\n    this.audioElement?.seekTo(entry.start);\n    this.audioElement?.play();\n\n    this.dispatchEvent(\n      new CustomEvent<{ newTime: number }>(Events.TranscriptEntrySelected, {\n        detail: { newTime: entry.start },\n      }),\n    );\n  }\n\n  private handleSearchInput(e: CustomEvent<{ value: string }>): void {\n    const { value } = e.detail;\n    if (value === undefined) return;\n\n    this.searchTerm = value;\n\n    // An empty box has nothing to show results for. The counter already hides\n    // itself on an empty term, so without dropping the results too the\n    // transcript keeps its outlines and offers no way to step between them.\n    if (value.length === 0) {\n      this.searchResultsTranscript = undefined;\n      // Abandons whatever is in flight, so its results can't land afterwards.\n      this.latestSearchId += 1;\n      this.isSearching = false;\n      this.resetSearchResultPosition();\n    }\n\n    this.emitSearchTermChanged(value);\n  }\n\n  private handleSearchSubmitted(e: CustomEvent<{ value: string }>): void {\n    const { value } = e.detail;\n    if (!value) return;\n\n    this.executeSearch(value);\n  }\n\n  private handleQuickSearchSelected(\n    e: CustomEvent<{ quickSearchEntry: QuickSearchEntry }>,\n  ): void {\n    const term = e.detail.quickSearchEntry?.displayText;\n    if (!term) return;\n\n    this.emitSearchTermChanged(term);\n    this.executeSearch(term);\n  }\n\n  private handleSearchCleared(): void {\n    this.searchTerm = '';\n    this.searchResultsTranscript = undefined;\n    // Abandons whatever is in flight, so its results can't arrive after this.\n    this.latestSearchId += 1;\n    this.isSearching = false;\n\n    this.dispatchEvent(new Event(Events.SearchCleared));\n    this.emitSearchTermChanged('');\n    this.resetSearchResultPosition();\n  }\n\n  /**\n   * Runs a search and shows its results.\n   *\n   * Each run is numbered, and only the newest one is allowed to report back.\n   * Searches go over the network, so a slow one started earlier can land after\n   * a fast one started later, and without this the older results would end up\n   * on screen under the newer term.\n   *\n   * A failed search has to put the spinner away as surely as a successful one,\n   * hence the `finally`. Leaving it up would hide the search UI for as long as\n   * the page lives.\n   */\n  private async executeSearch(term: string): Promise<void> {\n    if (!this.searchHandler || term.length < MIN_SEARCH_LENGTH) {\n      this.searchResultsTranscript = undefined;\n      return;\n    }\n\n    this.searchTerm = term;\n    this.isSearching = true;\n    this.dispatchEvent(new Event(Events.SearchExecuted));\n\n    this.latestSearchId += 1;\n    const searchId = this.latestSearchId;\n\n    try {\n      const results = await this.searchHandler.search(term);\n      if (searchId !== this.latestSearchId) return;\n\n      this.searchResultsTranscript = results;\n    } catch {\n      if (searchId !== this.latestSearchId) return;\n\n      this.searchResultsTranscript = undefined;\n      this.dispatchEvent(new Event(Events.SearchFailed));\n    } finally {\n      if (searchId === this.latestSearchId) this.isSearching = false;\n    }\n  }\n\n  private handleSearchResultIndexChanged(\n    e: CustomEvent<{ searchResultIndex: number }>,\n  ): void {\n    const { searchResultIndex } = e.detail;\n    if (searchResultIndex === undefined || !this.transcriptView) return;\n\n    this.transcriptView.selectedSearchResultIndex = searchResultIndex;\n    this.transcriptView.scrollToSelectedSearchResult();\n\n    this.dispatchEvent(\n      new CustomEvent<{ searchResultIndex: number }>(\n        Events.HighlightedSearchResultChanged,\n        { detail: { searchResultIndex } },\n      ),\n    );\n  }\n\n  /** Puts both the transcript and the switcher back to the first result. */\n  private resetSearchResultPosition(): void {\n    if (this.transcriptView) this.transcriptView.selectedSearchResultIndex = 0;\n    if (this.searchResultsSwitcher) {\n      this.searchResultsSwitcher.currentResultIndex = 0;\n    }\n  }\n\n  private emitSearchTermChanged(searchTerm: string): void {\n    this.dispatchEvent(\n      new CustomEvent<{ searchTerm: string }>(Events.SearchTermChanged, {\n        detail: { searchTerm },\n      }),\n    );\n  }\n\n  private playbackPaused(): void {\n    this.isPlaying = false;\n    this.dispatchEvent(new Event(Events.PlaybackPaused));\n  }\n\n  private playbackStarted(): void {\n    this.isPlaying = true;\n    this.dispatchEvent(new Event(Events.PlaybackStarted));\n  }\n\n  private canPlay(): void {\n    this.dispatchEvent(new Event(Events.CanPlay));\n  }\n\n  /** Jumps past a music stretch if playback has wandered into one. */\n  private skipMusicZone(): void {\n    const activeZone = this.musicZones.find(\n      (zone) => this.currentTime > zone.start && this.currentTime < zone.end,\n    );\n    if (!activeZone) return;\n\n    this.audioElement?.seekTo(activeZone.end + SECTION_SEEK_NUDGE);\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        --radio-player-title-color--: var(\n          --ia-theme-radio-player-title-color,\n          #fff\n        );\n        --radio-player-title-font--: var(\n          --ia-theme-radio-player-title-font,\n          1.5em sans-serif\n        );\n        --radio-player-date-color--: var(\n          --ia-theme-radio-player-date-color,\n          #fff\n        );\n        --radio-player-date-font--: var(\n          --ia-theme-radio-player-date-font,\n          1em sans-serif\n        );\n        --radio-player-logo-max-height--: var(\n          --ia-theme-radio-player-logo-max-height,\n          8rem\n        );\n        --radio-player-waveform-height--: var(\n          --ia-theme-radio-player-waveform-height,\n          5rem\n        );\n      }\n\n      section[role='main'] {\n        display: grid;\n        grid-gap: 0.5rem;\n      }\n\n      ia-status-indicator {\n        --ia-theme-icon-width: 1.5em;\n        --ia-theme-primary-text-color: #999;\n\n        display: block;\n        margin: auto;\n      }\n\n      /* mobile view */\n      @media (max-width: 770px) {\n        section[role='main'] {\n          grid-template-columns: 25% 1fr;\n          grid-template-areas:\n            'collection-logo title-date'\n            'waveform-scrubber waveform-scrubber'\n            'playback-controls playback-controls'\n            'search-section search-section'\n            'transcript-container transcript-container';\n        }\n\n        .date {\n          text-align: left;\n        }\n\n        ia-transcript-view {\n          --ia-theme-transcript-time-display: none;\n        }\n\n        ia-playback-controls {\n          width: 75%;\n          margin: auto;\n        }\n\n        .search-section {\n          width: 75%;\n          margin: auto;\n        }\n      }\n\n      /* wide view */\n      @media (min-width: 770px) {\n        section[role='main'] {\n          grid-template-columns: 192px 0 250px 1fr;\n          grid-template-areas:\n            'title-date title-date title-date title-date'\n            'collection-logo . playback-controls waveform-scrubber'\n            'search-section transcript-container transcript-container transcript-container';\n        }\n\n        .title-date {\n          display: flex;\n          justify-content: space-between;\n          align-items: baseline;\n        }\n\n        ia-transcript-view {\n          --ia-theme-transcript-time-display: block;\n        }\n      }\n\n      .title-date {\n        grid-area: title-date;\n      }\n\n      .title {\n        color: var(--radio-player-title-color--);\n        font: var(--radio-player-title-font--);\n      }\n\n      .date {\n        color: var(--radio-player-date-color--);\n        font: var(--radio-player-date-font--);\n      }\n\n      ia-waveform-progress {\n        width: 100%;\n        height: var(--radio-player-waveform-height--);\n      }\n\n      ia-playback-controls {\n        grid-area: playback-controls;\n      }\n\n      .transcript-container {\n        grid-area: transcript-container;\n      }\n\n      ia-transcript-view {\n        max-width: 600px;\n        display: block;\n      }\n\n      .collection-logo {\n        width: 100%;\n        max-height: var(--radio-player-logo-max-height--);\n        object-fit: contain;\n        grid-area: collection-logo;\n        align-self: center;\n      }\n\n      .waveform-scrubber-container {\n        width: 100%;\n        height: 100%;\n        grid-area: waveform-scrubber;\n      }\n\n      .search-section {\n        grid-area: search-section;\n      }\n\n      .search-results-info {\n        margin-top: 0.5em;\n      }\n\n      ia-expandable-search-bar {\n        display: block;\n        margin: auto;\n      }\n\n      .no-search-results-message {\n        text-align: center;\n      }\n\n      .sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        white-space: nowrap;\n        border: 0;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/elements/ia-radio-player/ia-search-results-switcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ia-search-results-switcher.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-radio-player/ia-search-results-switcher.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAeb;;;;GAIG;AACH,qBACa,uBAAwB,SAAQ,UAAU;IACrD,iDAAiD;IACrB,eAAe,SAAK;IAEhD,0DAA0D;IAC9B,kBAAkB,SAAK;IAEnD,MAAM,IAAI,cAAc;IAoCxB,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAKhD,yDAAyD;IACzD,kBAAkB,IAAI,IAAI;IAS1B,wDAAwD;IACxD,cAAc,IAAI,IAAI;IAStB,OAAO,KAAK,aAAa,GAKxB;IAED,OAAO,CAAC,4BAA4B;IASpC,MAAM,KAAK,MAAM,IAAI,cAAc,CAmClC;CACF"}
+{"version":3,"file":"ia-search-results-switcher.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-radio-player/ia-search-results-switcher.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAeb;;;;GAIG;AACH,qBAEa,uBAAwB,SAAQ,UAAU;IACrD,iDAAiD;IACrB,eAAe,SAAK;IAEhD,0DAA0D;IAC9B,kBAAkB,SAAK;IAEnD,MAAM,IAAI,cAAc;IAoCxB,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAKhD,yDAAyD;IACzD,kBAAkB,IAAI,IAAI;IAS1B,wDAAwD;IACxD,cAAc,IAAI,IAAI;IAStB,OAAO,KAAK,aAAa,GAKxB;IAED,OAAO,CAAC,4BAA4B;IASpC,MAAM,KAAK,MAAM,IAAI,cAAc,CAmClC;CACF"}

package/dist/src/elements/ia-radio-player/ia-search-results-switcher.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { css, html, LitElement, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
-import { msg, str } from '@lit/localize';
+import { localized, msg, str } from '@lit/localize';
 import nextResultIcon from './assets/next-result.js';
 import previousResultIcon from './assets/previous-result.js';
 /**
@@ -132,7 +132,8 @@ __decorate([
     property({ type: Number })
 ], IASearchResultsSwitcher.prototype, "currentResultIndex", void 0);
 IASearchResultsSwitcher = __decorate([
-    customElement('ia-search-results-switcher')
+    customElement('ia-search-results-switcher'),
+    localized()
 ], IASearchResultsSwitcher);
 export { IASearchResultsSwitcher };
 //# sourceMappingURL=ia-search-results-switcher.js.map

package/dist/src/elements/ia-radio-player/ia-search-results-switcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-search-results-switcher.js","sourceRoot":"","sources":["../../../../src/elements/ia-radio-player/ia-search-results-switcher.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,GAIX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,cAAc,MAAM,sBAAsB,CAAC;AAClD,OAAO,kBAAkB,MAAM,0BAA0B,CAAC;AAE1D;;GAEG;AACH,MAAM,MAAM,GAAG;IACb,wBAAwB,EAAE,0BAA0B;CACrD,CAAC;AAEF;;;;GAIG;AAEI,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QACL,iDAAiD;QACrB,oBAAe,GAAG,CAAC,CAAC;QAEhD,0DAA0D;QAC9B,uBAAkB,GAAG,CAAC,CAAC;IAmHrD,CAAC;IAjHC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;uBAKQ,GAAG,CAAC,wBAAwB,CAAC;mBACjC,IAAI,CAAC,kBAAkB;;YAE9B,kBAAkB;;;;sCAIQ,IAAI,CAAC,kBAAkB,GAAG,CAAC;yCACxB,IAAI,CAAC,eAAe;;;;;;uBAMtC,GAAG,CAAC,oBAAoB,CAAC;mBAC7B,IAAI,CAAC,cAAc;;YAE1B,cAAc;;;;;;;;;2CASiB,IAAI,CAAC,aAAa;KACxD,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,iBAAiC;QACvC,gDAAgD;QAChD,IAAI,iBAAiB,CAAC,GAAG,CAAC,iBAAiB,CAAC;YAAE,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC;IAC5E,CAAC;IAED,yDAAyD;IACzD,kBAAkB;QAChB,IAAI,CAAC,kBAAkB;YACrB,IAAI,CAAC,kBAAkB,GAAG,CAAC;gBACzB,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC;gBAC1B,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC;QAElC,IAAI,CAAC,4BAA4B,EAAE,CAAC;IACtC,CAAC;IAED,wDAAwD;IACxD,cAAc;QACZ,IAAI,CAAC,kBAAkB;YACrB,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,eAAe,GAAG,CAAC;gBAClD,CAAC,CAAC,CAAC;gBACH,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC;QAElC,IAAI,CAAC,4BAA4B,EAAE,CAAC;IACtC,CAAC;IAED,IAAY,aAAa;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC;QAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC;QAEnC,OAAO,GAAG,CAAC,GAAG,CAAA,iBAAiB,QAAQ,OAAO,KAAK,EAAE,CAAC,CAAC;IACzD,CAAC;IAEO,4BAA4B;QAClC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CACb,MAAM,CAAC,wBAAwB,EAC/B,EAAE,MAAM,EAAE,EAAE,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAE,CAC3D,CACF,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiCT,CAAC;IACJ,CAAC;CACF,CAAA;AAtH6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAAqB;AAGpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAwB;AALxC,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CAwHnC","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  type CSSResultGroup,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { msg, str } from '@lit/localize';\n\nimport nextResultIcon from './assets/next-result';\nimport previousResultIcon from './assets/previous-result';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n  SearchResultIndexChanged: 'searchResultIndexChanged',\n};\n\n/**\n * Steps through search results, reading `‹ 3 / 7 ›`.\n *\n * Both ends wrap around, so there is always somewhere to go.\n */\n@customElement('ia-search-results-switcher')\nexport class IASearchResultsSwitcher extends LitElement {\n  /** How many results there are to step through */\n  @property({ type: Number }) numberOfResults = 0;\n\n  /** Which result is being looked at, counting from zero */\n  @property({ type: Number }) currentResultIndex = 0;\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"container\">\n        <button\n          id=\"previous-button\"\n          type=\"button\"\n          aria-label=${msg('Previous search result')}\n          @click=${this.goToPreviousResult}\n        >\n          ${previousResultIcon}\n        </button>\n\n        <span class=\"results-range\">\n          <span id=\"current-result\">${this.currentResultIndex + 1}</span> /\n          <span id=\"number-of-results\">${this.numberOfResults}</span>\n        </span>\n\n        <button\n          id=\"next-button\"\n          type=\"button\"\n          aria-label=${msg('Next search result')}\n          @click=${this.goToNextResult}\n        >\n          ${nextResultIcon}\n        </button>\n      </div>\n\n      <!--\n        The counter above is two bare numbers, which say nothing on their own.\n        This says what they mean, and being a live region it is announced each\n        time the reader moves between results.\n      -->\n      <div class=\"sr-only\" role=\"status\">${this.positionLabel}</div>\n    `;\n  }\n\n  updated(changedProperties: PropertyValues): void {\n    // A new set of results starts at the first one.\n    if (changedProperties.has('numberOfResults')) this.currentResultIndex = 0;\n  }\n\n  /** Steps back one result, wrapping round to the last. */\n  goToPreviousResult(): void {\n    this.currentResultIndex =\n      this.currentResultIndex < 1\n        ? this.numberOfResults - 1\n        : this.currentResultIndex - 1;\n\n    this.emitSearchResultIndexChanged();\n  }\n\n  /** Steps on one result, wrapping round to the first. */\n  goToNextResult(): void {\n    this.currentResultIndex =\n      this.currentResultIndex === this.numberOfResults - 1\n        ? 0\n        : this.currentResultIndex + 1;\n\n    this.emitSearchResultIndexChanged();\n  }\n\n  private get positionLabel(): string {\n    const position = this.currentResultIndex + 1;\n    const total = this.numberOfResults;\n\n    return msg(str`Search result ${position} of ${total}`);\n  }\n\n  private emitSearchResultIndexChanged(): void {\n    this.dispatchEvent(\n      new CustomEvent<{ searchResultIndex: number }>(\n        Events.SearchResultIndexChanged,\n        { detail: { searchResultIndex: this.currentResultIndex } },\n      ),\n    );\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        --search-switcher-color--: var(--ia-theme-search-switcher-color, #fff);\n\n        color: var(--search-switcher-color--);\n      }\n\n      .container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 0.5em;\n      }\n\n      button {\n        background: none;\n        border: 0;\n        padding: 0;\n        color: inherit;\n        cursor: pointer;\n      }\n\n      .sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        white-space: nowrap;\n        border: 0;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ia-search-results-switcher.js","sourceRoot":"","sources":["../../../../src/elements/ia-radio-player/ia-search-results-switcher.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,GAIX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,cAAc,MAAM,sBAAsB,CAAC;AAClD,OAAO,kBAAkB,MAAM,0BAA0B,CAAC;AAE1D;;GAEG;AACH,MAAM,MAAM,GAAG;IACb,wBAAwB,EAAE,0BAA0B;CACrD,CAAC;AAEF;;;;GAIG;AAGI,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QACL,iDAAiD;QACrB,oBAAe,GAAG,CAAC,CAAC;QAEhD,0DAA0D;QAC9B,uBAAkB,GAAG,CAAC,CAAC;IAmHrD,CAAC;IAjHC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;uBAKQ,GAAG,CAAC,wBAAwB,CAAC;mBACjC,IAAI,CAAC,kBAAkB;;YAE9B,kBAAkB;;;;sCAIQ,IAAI,CAAC,kBAAkB,GAAG,CAAC;yCACxB,IAAI,CAAC,eAAe;;;;;;uBAMtC,GAAG,CAAC,oBAAoB,CAAC;mBAC7B,IAAI,CAAC,cAAc;;YAE1B,cAAc;;;;;;;;;2CASiB,IAAI,CAAC,aAAa;KACxD,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,iBAAiC;QACvC,gDAAgD;QAChD,IAAI,iBAAiB,CAAC,GAAG,CAAC,iBAAiB,CAAC;YAAE,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC;IAC5E,CAAC;IAED,yDAAyD;IACzD,kBAAkB;QAChB,IAAI,CAAC,kBAAkB;YACrB,IAAI,CAAC,kBAAkB,GAAG,CAAC;gBACzB,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC;gBAC1B,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC;QAElC,IAAI,CAAC,4BAA4B,EAAE,CAAC;IACtC,CAAC;IAED,wDAAwD;IACxD,cAAc;QACZ,IAAI,CAAC,kBAAkB;YACrB,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,eAAe,GAAG,CAAC;gBAClD,CAAC,CAAC,CAAC;gBACH,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC;QAElC,IAAI,CAAC,4BAA4B,EAAE,CAAC;IACtC,CAAC;IAED,IAAY,aAAa;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC;QAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC;QAEnC,OAAO,GAAG,CAAC,GAAG,CAAA,iBAAiB,QAAQ,OAAO,KAAK,EAAE,CAAC,CAAC;IACzD,CAAC;IAEO,4BAA4B;QAClC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CACb,MAAM,CAAC,wBAAwB,EAC/B,EAAE,MAAM,EAAE,EAAE,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAE,CAC3D,CACF,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiCT,CAAC;IACJ,CAAC;CACF,CAAA;AAtH6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAAqB;AAGpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAwB;AALxC,uBAAuB;IAFnC,aAAa,CAAC,4BAA4B,CAAC;IAC3C,SAAS,EAAE;GACC,uBAAuB,CAwHnC","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  type CSSResultGroup,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { localized, msg, str } from '@lit/localize';\n\nimport nextResultIcon from './assets/next-result';\nimport previousResultIcon from './assets/previous-result';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n  SearchResultIndexChanged: 'searchResultIndexChanged',\n};\n\n/**\n * Steps through search results, reading `‹ 3 / 7 ›`.\n *\n * Both ends wrap around, so there is always somewhere to go.\n */\n@customElement('ia-search-results-switcher')\n@localized()\nexport class IASearchResultsSwitcher extends LitElement {\n  /** How many results there are to step through */\n  @property({ type: Number }) numberOfResults = 0;\n\n  /** Which result is being looked at, counting from zero */\n  @property({ type: Number }) currentResultIndex = 0;\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"container\">\n        <button\n          id=\"previous-button\"\n          type=\"button\"\n          aria-label=${msg('Previous search result')}\n          @click=${this.goToPreviousResult}\n        >\n          ${previousResultIcon}\n        </button>\n\n        <span class=\"results-range\">\n          <span id=\"current-result\">${this.currentResultIndex + 1}</span> /\n          <span id=\"number-of-results\">${this.numberOfResults}</span>\n        </span>\n\n        <button\n          id=\"next-button\"\n          type=\"button\"\n          aria-label=${msg('Next search result')}\n          @click=${this.goToNextResult}\n        >\n          ${nextResultIcon}\n        </button>\n      </div>\n\n      <!--\n        The counter above is two bare numbers, which say nothing on their own.\n        This says what they mean, and being a live region it is announced each\n        time the reader moves between results.\n      -->\n      <div class=\"sr-only\" role=\"status\">${this.positionLabel}</div>\n    `;\n  }\n\n  updated(changedProperties: PropertyValues): void {\n    // A new set of results starts at the first one.\n    if (changedProperties.has('numberOfResults')) this.currentResultIndex = 0;\n  }\n\n  /** Steps back one result, wrapping round to the last. */\n  goToPreviousResult(): void {\n    this.currentResultIndex =\n      this.currentResultIndex < 1\n        ? this.numberOfResults - 1\n        : this.currentResultIndex - 1;\n\n    this.emitSearchResultIndexChanged();\n  }\n\n  /** Steps on one result, wrapping round to the first. */\n  goToNextResult(): void {\n    this.currentResultIndex =\n      this.currentResultIndex === this.numberOfResults - 1\n        ? 0\n        : this.currentResultIndex + 1;\n\n    this.emitSearchResultIndexChanged();\n  }\n\n  private get positionLabel(): string {\n    const position = this.currentResultIndex + 1;\n    const total = this.numberOfResults;\n\n    return msg(str`Search result ${position} of ${total}`);\n  }\n\n  private emitSearchResultIndexChanged(): void {\n    this.dispatchEvent(\n      new CustomEvent<{ searchResultIndex: number }>(\n        Events.SearchResultIndexChanged,\n        { detail: { searchResultIndex: this.currentResultIndex } },\n      ),\n    );\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        --search-switcher-color--: var(--ia-theme-search-switcher-color, #fff);\n\n        color: var(--search-switcher-color--);\n      }\n\n      .container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 0.5em;\n      }\n\n      button {\n        background: none;\n        border: 0;\n        padding: 0;\n        color: inherit;\n        cursor: pointer;\n      }\n\n      .sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        white-space: nowrap;\n        border: 0;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/elements/ia-scrubber-bar/ia-scrubber-bar.d.ts

@@ -17,8 +17,8 @@ export declare class IAScrubberBar extends LitElement {
     sectionMarkerPercentages: number[];
     /** Whether the markers either side of the playhead point towards it */
     expandSectionMarkers: boolean;
-    /** The accessible name for the slider */
-    label: string;
+    /** The accessible name for the slider. Defaults to "Playback position". */
+    label?: string;
     /**
      * The position actually shown.
      *

package/dist/src/elements/ia-scrubber-bar/ia-scrubber-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ia-scrubber-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-scrubber-bar/ia-scrubber-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,qBAAqB,CAAC;AAuC7B;;;GAGG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,2CAA2C;IACf,KAAK,SAAK;IAEtC,iDAAiD;IACrB,GAAG,SAAK;IAEpC,kDAAkD;IACtB,GAAG,SAAO;IAEtC,2CAA2C;IACf,IAAI,SAAO;IAEvC,oEAAoE;IACzC,wBAAwB,EAAE,MAAM,EAAE,CAAM;IAEnE,uEAAuE;IAC1C,oBAAoB,UAAS;IAE1D,yCAAyC;IACb,KAAK,SAA4B;IAE7D;;;;;;OAMG;IACM,OAAO,CAAC,YAAY,CAAK;IAElC,OAAO,CAAC,iBAAiB,CAAS;IAElC,+DAA+D;IAC/D,IAAI,UAAU,IAAI,MAAM,CAKvB;IAED,MAAM,IAAI,cAAc;IA0CxB,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAMhD;;;;;OAKG;IACH,OAAO,KAAK,kBAAkB,GAS7B;IAED;;;;;;OAMG;IACH,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,kBAAkB;IAK1B;;;;;;;;;OASG;IACH,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,WAAW;IAMnB;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAMlB;;;;;;OAMG;IACH,OAAO,CAAC,gBAAgB;IAKxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAiKlC;CACF"}
+{"version":3,"file":"ia-scrubber-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-scrubber-bar/ia-scrubber-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,qBAAqB,CAAC;AAuC7B;;;GAGG;AACH,qBAEa,aAAc,SAAQ,UAAU;IAC3C,2CAA2C;IACf,KAAK,SAAK;IAEtC,iDAAiD;IACrB,GAAG,SAAK;IAEpC,kDAAkD;IACtB,GAAG,SAAO;IAEtC,2CAA2C;IACf,IAAI,SAAO;IAEvC,oEAAoE;IACzC,wBAAwB,EAAE,MAAM,EAAE,CAAM;IAEnE,uEAAuE;IAC1C,oBAAoB,UAAS;IAE1D,2EAA2E;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IAE3C;;;;;;OAMG;IACM,OAAO,CAAC,YAAY,CAAK;IAElC,OAAO,CAAC,iBAAiB,CAAS;IAElC,+DAA+D;IAC/D,IAAI,UAAU,IAAI,MAAM,CAKvB;IAED,MAAM,IAAI,cAAc;IA0CxB,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAMhD;;;;;OAKG;IACH,OAAO,KAAK,kBAAkB,GAS7B;IAED;;;;;;OAMG;IACH,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,kBAAkB;IAK1B;;;;;;;;;OASG;IACH,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,WAAW;IAMnB;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAMlB;;;;;;OAMG;IACH,OAAO,CAAC,gBAAgB;IAKxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAiKlC;CACF"}