@corti/dictation-web 0.0.1

package/dist/src/mic-selector.js

@@ -0,0 +1,131 @@
+import { __decorate } from "tslib";
+// mic-selector.ts
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import ButtonStyles from './styles/buttons';
+import SelectStyles from './styles/select';
+let MicSelector = class MicSelector extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.devices = [];
+        this.selectedDevice = '';
+    }
+    _selectDevice(device) {
+        this.selectedDevice = device.deviceId;
+        this.dispatchEvent(new CustomEvent('recording-device-changed', {
+            detail: device,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <div class="mic-selector">
+        <button id="settings-popover-button" popovertarget="settings-popover">
+          <icon-settings></icon-settings>
+        </button>
+        <div id="settings-popover" popover>
+          <label id="device-select-label" for="device-select">
+            Recording Device
+          </label>
+          <select
+            id="device-select"
+            aria-labelledby="device-select-label"
+            @change=${(e) => {
+            const target = e.target;
+            const selectedDevice = this.devices.find(device => device.deviceId === target.value);
+            if (selectedDevice) {
+                this._selectDevice(selectedDevice);
+            }
+        }}
+          >
+            ${this.devices.map(device => html `
+                <option
+                  value=${device.deviceId}
+                  ?selected=${this.selectedDevice === device.deviceId}
+                >
+                  ${device.label || 'Unknown Device'}
+                </option>
+              `)}
+          </select>
+          <!-- ${this.devices.map(device => html `
+              <div
+                class="dropdown-item ${this.selectedDevice === device.deviceId
+            ? 'selected'
+            : ''}"
+                @click=${() => this._selectDevice(device)}
+              >
+                ${device.label || 'Unknown Device'}
+              </div>
+            `)} -->
+        </div>
+      </div>
+    `;
+    }
+};
+MicSelector.styles = [
+    css `
+      :host {
+        display: block;
+        font-family: var(--component-font-family);
+      }
+      .label {
+        font-size: 0.8rem;
+        color: var(--component-text-color);
+        margin-bottom: 4px;
+      }
+      /* Retain the anchor-name styling for this component */
+      #settings-popover-button {
+        anchor-name: --settings_popover_btn;
+      }
+      [popover] {
+        margin: 0;
+        padding: 16px;
+        border: 0;
+        background: var(--card-background);
+        border: 1px solid var(--card-border-color);
+        border-radius: var(--card-border-radius);
+        box-shadow: var(--card-box-shadow);
+        z-index: 1000;
+        max-width: 260px;
+        position-anchor: --settings_popover_btn;
+        position-area: bottom;
+        position-visibility: always;
+        /* inset: unset; */
+        transform: translateX(45%);
+        overflow-x: hidden;
+      }
+      .dropdown-item {
+        padding: 8px;
+        cursor: pointer;
+        font-size: 0.9rem;
+        color: var(--component-text-color);
+        // allow only a single line of text and truncate the rest
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        opacity: 0.8;
+      }
+      .dropdown-item:hover {
+        background: var(--action-plain-background-hover);
+      }
+      .dropdown-item.selected {
+        font-weight: bold;
+        opacity: 1;
+      }
+    `,
+    ButtonStyles,
+    SelectStyles,
+];
+__decorate([
+    property({ type: Array })
+], MicSelector.prototype, "devices", void 0);
+__decorate([
+    property({ type: String })
+], MicSelector.prototype, "selectedDevice", void 0);
+MicSelector = __decorate([
+    customElement('mic-selector')
+], MicSelector);
+export { MicSelector };
+//# sourceMappingURL=mic-selector.js.map

package/dist/src/mic-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mic-selector.js","sourceRoot":"","sources":["../../src/mic-selector.ts"],"names":[],"mappings":";AAAA,kBAAkB;AAClB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAQpC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAEL,YAAO,GAAa,EAAE,CAAC;QAGvB,mBAAc,GAAW,EAAE,CAAC;IAuH9B,CAAC;IA7DS,aAAa,CAAC,MAAc;QAClC,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,0BAA0B,EAAE;YAC1C,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;sBAYO,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;YAC7C,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CACtC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,MAAM,CAAC,KAAK,CAC3C,CAAC;YACF,IAAI,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;;cAEC,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;0BAEF,MAAM,CAAC,QAAQ;8BACX,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,QAAQ;;oBAEjD,MAAM,CAAC,KAAK,IAAI,gBAAgB;;eAErC,CACF;;iBAEI,IAAI,CAAC,OAAO,CAAC,GAAG,CACrB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;uCAEa,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,QAAQ;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE;yBACG,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;;kBAEvC,MAAM,CAAC,KAAK,IAAI,gBAAgB;;aAErC,CACF;;;KAGN,CAAC;IACJ,CAAC;;AApHM,kBAAM,GAAmB;IAC9B,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;IACD,YAAY;IACZ,YAAY;CACb,AAtDY,CAsDX;AA3DF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CACH;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACC;AALjB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA4HvB","sourcesContent":["// mic-selector.ts\nimport { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport ButtonStyles from './styles/buttons';\nimport SelectStyles from './styles/select';\n\ninterface Device {\n  deviceId: string;\n  label?: string;\n}\n\n@customElement('mic-selector')\nexport class MicSelector extends LitElement {\n  @property({ type: Array })\n  devices: Device[] = [];\n\n  @property({ type: String })\n  selectedDevice: string = '';\n\n  static styles: CSSResultGroup = [\n    css`\n      :host {\n        display: block;\n        font-family: var(--component-font-family);\n      }\n      .label {\n        font-size: 0.8rem;\n        color: var(--component-text-color);\n        margin-bottom: 4px;\n      }\n      /* Retain the anchor-name styling for this component */\n      #settings-popover-button {\n        anchor-name: --settings_popover_btn;\n      }\n      [popover] {\n        margin: 0;\n        padding: 16px;\n        border: 0;\n        background: var(--card-background);\n        border: 1px solid var(--card-border-color);\n        border-radius: var(--card-border-radius);\n        box-shadow: var(--card-box-shadow);\n        z-index: 1000;\n        max-width: 260px;\n        position-anchor: --settings_popover_btn;\n        position-area: bottom;\n        position-visibility: always;\n        /* inset: unset; */\n        transform: translateX(45%);\n        overflow-x: hidden;\n      }\n      .dropdown-item {\n        padding: 8px;\n        cursor: pointer;\n        font-size: 0.9rem;\n        color: var(--component-text-color);\n        // allow only a single line of text and truncate the rest\n        width: 100%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        opacity: 0.8;\n      }\n      .dropdown-item:hover {\n        background: var(--action-plain-background-hover);\n      }\n      .dropdown-item.selected {\n        font-weight: bold;\n        opacity: 1;\n      }\n    `,\n    ButtonStyles,\n    SelectStyles,\n  ];\n\n  private _selectDevice(device: Device): void {\n    this.selectedDevice = device.deviceId;\n    this.dispatchEvent(\n      new CustomEvent('recording-device-changed', {\n        detail: device,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"mic-selector\">\n        <button id=\"settings-popover-button\" popovertarget=\"settings-popover\">\n          <icon-settings></icon-settings>\n        </button>\n        <div id=\"settings-popover\" popover>\n          <label id=\"device-select-label\" for=\"device-select\">\n            Recording Device\n          </label>\n          <select\n            id=\"device-select\"\n            aria-labelledby=\"device-select-label\"\n            @change=${(e: Event) => {\n              const target = e.target as HTMLSelectElement;\n              const selectedDevice = this.devices.find(\n                device => device.deviceId === target.value,\n              );\n              if (selectedDevice) {\n                this._selectDevice(selectedDevice);\n              }\n            }}\n          >\n            ${this.devices.map(\n              device => html`\n                <option\n                  value=${device.deviceId}\n                  ?selected=${this.selectedDevice === device.deviceId}\n                >\n                  ${device.label || 'Unknown Device'}\n                </option>\n              `,\n            )}\n          </select>\n          <!-- ${this.devices.map(\n            device => html`\n              <div\n                class=\"dropdown-item ${this.selectedDevice === device.deviceId\n                  ? 'selected'\n                  : ''}\"\n                @click=${() => this._selectDevice(device)}\n              >\n                ${device.label || 'Unknown Device'}\n              </div>\n            `,\n          )} -->\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mic-selector': MicSelector;\n  }\n}\n"]}

package/dist/src/settings-menu.d.ts

@@ -0,0 +1,18 @@
+import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
+interface Device {
+    deviceId: string;
+    label?: string;
+}
+export declare class MicSelector extends LitElement {
+    devices: Device[];
+    selectedDevice: string;
+    static styles: CSSResultGroup;
+    private _selectDevice;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mic-selector': MicSelector;
+    }
+}
+export {};

package/dist/src/settings-menu.js

@@ -0,0 +1,131 @@
+import { __decorate } from "tslib";
+// mic-selector.ts
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import ButtonStyles from './styles/buttons';
+import SelectStyles from './styles/select';
+let MicSelector = class MicSelector extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.devices = [];
+        this.selectedDevice = '';
+    }
+    _selectDevice(device) {
+        this.selectedDevice = device.deviceId;
+        this.dispatchEvent(new CustomEvent('recording-device-changed', {
+            detail: device,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <div class="mic-selector">
+        <button id="settings-popover-button" popovertarget="settings-popover">
+          <icon-settings></icon-settings>
+        </button>
+        <div id="settings-popover" popover>
+          <label id="device-select-label" for="device-select">
+            Recording Device
+          </label>
+          <select
+            id="device-select"
+            aria-labelledby="device-select-label"
+            @change=${(e) => {
+            const target = e.target;
+            const selectedDevice = this.devices.find(device => device.deviceId === target.value);
+            if (selectedDevice) {
+                this._selectDevice(selectedDevice);
+            }
+        }}
+          >
+            ${this.devices.map(device => html `
+                <option
+                  value=${device.deviceId}
+                  ?selected=${this.selectedDevice === device.deviceId}
+                >
+                  ${device.label || 'Unknown Device'}
+                </option>
+              `)}
+          </select>
+          <!-- ${this.devices.map(device => html `
+              <div
+                class="dropdown-item ${this.selectedDevice === device.deviceId
+            ? 'selected'
+            : ''}"
+                @click=${() => this._selectDevice(device)}
+              >
+                ${device.label || 'Unknown Device'}
+              </div>
+            `)} -->
+        </div>
+      </div>
+    `;
+    }
+};
+MicSelector.styles = [
+    css `
+      :host {
+        display: block;
+        font-family: var(--component-font-family);
+      }
+      .label {
+        font-size: 0.8rem;
+        color: var(--component-text-color);
+        margin-bottom: 4px;
+      }
+      /* Retain the anchor-name styling for this component */
+      #settings-popover-button {
+        anchor-name: --settings_popover_btn;
+      }
+      [popover] {
+        margin: 0;
+        padding: 16px;
+        border: 0;
+        background: var(--card-background);
+        border: 1px solid var(--card-border-color);
+        border-radius: var(--card-border-radius);
+        box-shadow: var(--card-box-shadow);
+        z-index: 1000;
+        max-width: 260px;
+        position-anchor: --settings_popover_btn;
+        position-area: bottom;
+        position-visibility: always;
+        /* inset: unset; */
+        transform: translateX(45%);
+        overflow-x: hidden;
+      }
+      .dropdown-item {
+        padding: 8px;
+        cursor: pointer;
+        font-size: 0.9rem;
+        color: var(--component-text-color);
+        // allow only a single line of text and truncate the rest
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        opacity: 0.8;
+      }
+      .dropdown-item:hover {
+        background: var(--action-plain-background-hover);
+      }
+      .dropdown-item.selected {
+        font-weight: bold;
+        opacity: 1;
+      }
+    `,
+    ButtonStyles,
+    SelectStyles,
+];
+__decorate([
+    property({ type: Array })
+], MicSelector.prototype, "devices", void 0);
+__decorate([
+    property({ type: String })
+], MicSelector.prototype, "selectedDevice", void 0);
+MicSelector = __decorate([
+    customElement('mic-selector')
+], MicSelector);
+export { MicSelector };
+//# sourceMappingURL=settings-menu.js.map

package/dist/src/settings-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-menu.js","sourceRoot":"","sources":["../../src/settings-menu.ts"],"names":[],"mappings":";AAAA,kBAAkB;AAClB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAQpC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAEL,YAAO,GAAa,EAAE,CAAC;QAGvB,mBAAc,GAAW,EAAE,CAAC;IAuH9B,CAAC;IA7DS,aAAa,CAAC,MAAc;QAClC,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,0BAA0B,EAAE;YAC1C,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;sBAYO,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;YAC7C,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CACtC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,MAAM,CAAC,KAAK,CAC3C,CAAC;YACF,IAAI,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;;cAEC,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;0BAEF,MAAM,CAAC,QAAQ;8BACX,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,QAAQ;;oBAEjD,MAAM,CAAC,KAAK,IAAI,gBAAgB;;eAErC,CACF;;iBAEI,IAAI,CAAC,OAAO,CAAC,GAAG,CACrB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;uCAEa,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,QAAQ;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE;yBACG,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;;kBAEvC,MAAM,CAAC,KAAK,IAAI,gBAAgB;;aAErC,CACF;;;KAGN,CAAC;IACJ,CAAC;;AApHM,kBAAM,GAAmB;IAC9B,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;IACD,YAAY;IACZ,YAAY;CACb,AAtDY,CAsDX;AA3DF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CACH;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACC;AALjB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA4HvB","sourcesContent":["// mic-selector.ts\nimport { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport ButtonStyles from './styles/buttons';\nimport SelectStyles from './styles/select';\n\ninterface Device {\n  deviceId: string;\n  label?: string;\n}\n\n@customElement('mic-selector')\nexport class MicSelector extends LitElement {\n  @property({ type: Array })\n  devices: Device[] = [];\n\n  @property({ type: String })\n  selectedDevice: string = '';\n\n  static styles: CSSResultGroup = [\n    css`\n      :host {\n        display: block;\n        font-family: var(--component-font-family);\n      }\n      .label {\n        font-size: 0.8rem;\n        color: var(--component-text-color);\n        margin-bottom: 4px;\n      }\n      /* Retain the anchor-name styling for this component */\n      #settings-popover-button {\n        anchor-name: --settings_popover_btn;\n      }\n      [popover] {\n        margin: 0;\n        padding: 16px;\n        border: 0;\n        background: var(--card-background);\n        border: 1px solid var(--card-border-color);\n        border-radius: var(--card-border-radius);\n        box-shadow: var(--card-box-shadow);\n        z-index: 1000;\n        max-width: 260px;\n        position-anchor: --settings_popover_btn;\n        position-area: bottom;\n        position-visibility: always;\n        /* inset: unset; */\n        transform: translateX(45%);\n        overflow-x: hidden;\n      }\n      .dropdown-item {\n        padding: 8px;\n        cursor: pointer;\n        font-size: 0.9rem;\n        color: var(--component-text-color);\n        // allow only a single line of text and truncate the rest\n        width: 100%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        opacity: 0.8;\n      }\n      .dropdown-item:hover {\n        background: var(--action-plain-background-hover);\n      }\n      .dropdown-item.selected {\n        font-weight: bold;\n        opacity: 1;\n      }\n    `,\n    ButtonStyles,\n    SelectStyles,\n  ];\n\n  private _selectDevice(device: Device): void {\n    this.selectedDevice = device.deviceId;\n    this.dispatchEvent(\n      new CustomEvent('recording-device-changed', {\n        detail: device,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"mic-selector\">\n        <button id=\"settings-popover-button\" popovertarget=\"settings-popover\">\n          <icon-settings></icon-settings>\n        </button>\n        <div id=\"settings-popover\" popover>\n          <label id=\"device-select-label\" for=\"device-select\">\n            Recording Device\n          </label>\n          <select\n            id=\"device-select\"\n            aria-labelledby=\"device-select-label\"\n            @change=${(e: Event) => {\n              const target = e.target as HTMLSelectElement;\n              const selectedDevice = this.devices.find(\n                device => device.deviceId === target.value,\n              );\n              if (selectedDevice) {\n                this._selectDevice(selectedDevice);\n              }\n            }}\n          >\n            ${this.devices.map(\n              device => html`\n                <option\n                  value=${device.deviceId}\n                  ?selected=${this.selectedDevice === device.deviceId}\n                >\n                  ${device.label || 'Unknown Device'}\n                </option>\n              `,\n            )}\n          </select>\n          <!-- ${this.devices.map(\n            device => html`\n              <div\n                class=\"dropdown-item ${this.selectedDevice === device.deviceId\n                  ? 'selected'\n                  : ''}\"\n                @click=${() => this._selectDevice(device)}\n              >\n                ${device.label || 'Unknown Device'}\n              </div>\n            `,\n          )} -->\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mic-selector': MicSelector;\n  }\n}\n"]}

package/dist/src/settings-popover.d.ts

@@ -0,0 +1,18 @@
+import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
+interface Device {
+    deviceId: string;
+    label?: string;
+}
+export declare class MicSelector extends LitElement {
+    devices: Device[];
+    selectedDevice: string;
+    static styles: CSSResultGroup;
+    private _selectDevice;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mic-selector': MicSelector;
+    }
+}
+export {};

package/dist/src/settings-popover.js

@@ -0,0 +1,131 @@
+import { __decorate } from "tslib";
+// mic-selector.ts
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import ButtonStyles from './styles/buttons';
+import SelectStyles from './styles/select';
+let MicSelector = class MicSelector extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.devices = [];
+        this.selectedDevice = '';
+    }
+    _selectDevice(device) {
+        this.selectedDevice = device.deviceId;
+        this.dispatchEvent(new CustomEvent('recording-device-changed', {
+            detail: device,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <div class="mic-selector">
+        <button id="settings-popover-button" popovertarget="settings-popover">
+          <icon-settings></icon-settings>
+        </button>
+        <div id="settings-popover" popover>
+          <label id="device-select-label" for="device-select">
+            Recording Device
+          </label>
+          <select
+            id="device-select"
+            aria-labelledby="device-select-label"
+            @change=${(e) => {
+            const target = e.target;
+            const selectedDevice = this.devices.find(device => device.deviceId === target.value);
+            if (selectedDevice) {
+                this._selectDevice(selectedDevice);
+            }
+        }}
+          >
+            ${this.devices.map(device => html `
+                <option
+                  value=${device.deviceId}
+                  ?selected=${this.selectedDevice === device.deviceId}
+                >
+                  ${device.label || 'Unknown Device'}
+                </option>
+              `)}
+          </select>
+          <!-- ${this.devices.map(device => html `
+              <div
+                class="dropdown-item ${this.selectedDevice === device.deviceId
+            ? 'selected'
+            : ''}"
+                @click=${() => this._selectDevice(device)}
+              >
+                ${device.label || 'Unknown Device'}
+              </div>
+            `)} -->
+        </div>
+      </div>
+    `;
+    }
+};
+MicSelector.styles = [
+    css `
+      :host {
+        display: block;
+        font-family: var(--component-font-family);
+      }
+      .label {
+        font-size: 0.8rem;
+        color: var(--component-text-color);
+        margin-bottom: 4px;
+      }
+      /* Retain the anchor-name styling for this component */
+      #settings-popover-button {
+        anchor-name: --settings_popover_btn;
+      }
+      [popover] {
+        margin: 0;
+        padding: 16px;
+        border: 0;
+        background: var(--card-background);
+        border: 1px solid var(--card-border-color);
+        border-radius: var(--card-border-radius);
+        box-shadow: var(--card-box-shadow);
+        z-index: 1000;
+        max-width: 260px;
+        position-anchor: --settings_popover_btn;
+        position-area: bottom;
+        position-visibility: always;
+        /* inset: unset; */
+        transform: translateX(45%);
+        overflow-x: hidden;
+      }
+      .dropdown-item {
+        padding: 8px;
+        cursor: pointer;
+        font-size: 0.9rem;
+        color: var(--component-text-color);
+        // allow only a single line of text and truncate the rest
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        opacity: 0.8;
+      }
+      .dropdown-item:hover {
+        background: var(--action-plain-background-hover);
+      }
+      .dropdown-item.selected {
+        font-weight: bold;
+        opacity: 1;
+      }
+    `,
+    ButtonStyles,
+    SelectStyles,
+];
+__decorate([
+    property({ type: Array })
+], MicSelector.prototype, "devices", void 0);
+__decorate([
+    property({ type: String })
+], MicSelector.prototype, "selectedDevice", void 0);
+MicSelector = __decorate([
+    customElement('mic-selector')
+], MicSelector);
+export { MicSelector };
+//# sourceMappingURL=settings-popover.js.map

package/dist/src/settings-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-popover.js","sourceRoot":"","sources":["../../src/settings-popover.ts"],"names":[],"mappings":";AAAA,kBAAkB;AAClB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAQpC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAEL,YAAO,GAAa,EAAE,CAAC;QAGvB,mBAAc,GAAW,EAAE,CAAC;IAuH9B,CAAC;IA7DS,aAAa,CAAC,MAAc;QAClC,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,0BAA0B,EAAE;YAC1C,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;sBAYO,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;YAC7C,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CACtC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,MAAM,CAAC,KAAK,CAC3C,CAAC;YACF,IAAI,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;;cAEC,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;0BAEF,MAAM,CAAC,QAAQ;8BACX,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,QAAQ;;oBAEjD,MAAM,CAAC,KAAK,IAAI,gBAAgB;;eAErC,CACF;;iBAEI,IAAI,CAAC,OAAO,CAAC,GAAG,CACrB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;uCAEa,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,QAAQ;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE;yBACG,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;;kBAEvC,MAAM,CAAC,KAAK,IAAI,gBAAgB;;aAErC,CACF;;;KAGN,CAAC;IACJ,CAAC;;AApHM,kBAAM,GAAmB;IAC9B,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;IACD,YAAY;IACZ,YAAY;CACb,AAtDY,CAsDX;AA3DF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CACH;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACC;AALjB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA4HvB","sourcesContent":["// mic-selector.ts\nimport { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport ButtonStyles from './styles/buttons';\nimport SelectStyles from './styles/select';\n\ninterface Device {\n  deviceId: string;\n  label?: string;\n}\n\n@customElement('mic-selector')\nexport class MicSelector extends LitElement {\n  @property({ type: Array })\n  devices: Device[] = [];\n\n  @property({ type: String })\n  selectedDevice: string = '';\n\n  static styles: CSSResultGroup = [\n    css`\n      :host {\n        display: block;\n        font-family: var(--component-font-family);\n      }\n      .label {\n        font-size: 0.8rem;\n        color: var(--component-text-color);\n        margin-bottom: 4px;\n      }\n      /* Retain the anchor-name styling for this component */\n      #settings-popover-button {\n        anchor-name: --settings_popover_btn;\n      }\n      [popover] {\n        margin: 0;\n        padding: 16px;\n        border: 0;\n        background: var(--card-background);\n        border: 1px solid var(--card-border-color);\n        border-radius: var(--card-border-radius);\n        box-shadow: var(--card-box-shadow);\n        z-index: 1000;\n        max-width: 260px;\n        position-anchor: --settings_popover_btn;\n        position-area: bottom;\n        position-visibility: always;\n        /* inset: unset; */\n        transform: translateX(45%);\n        overflow-x: hidden;\n      }\n      .dropdown-item {\n        padding: 8px;\n        cursor: pointer;\n        font-size: 0.9rem;\n        color: var(--component-text-color);\n        // allow only a single line of text and truncate the rest\n        width: 100%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        opacity: 0.8;\n      }\n      .dropdown-item:hover {\n        background: var(--action-plain-background-hover);\n      }\n      .dropdown-item.selected {\n        font-weight: bold;\n        opacity: 1;\n      }\n    `,\n    ButtonStyles,\n    SelectStyles,\n  ];\n\n  private _selectDevice(device: Device): void {\n    this.selectedDevice = device.deviceId;\n    this.dispatchEvent(\n      new CustomEvent('recording-device-changed', {\n        detail: device,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"mic-selector\">\n        <button id=\"settings-popover-button\" popovertarget=\"settings-popover\">\n          <icon-settings></icon-settings>\n        </button>\n        <div id=\"settings-popover\" popover>\n          <label id=\"device-select-label\" for=\"device-select\">\n            Recording Device\n          </label>\n          <select\n            id=\"device-select\"\n            aria-labelledby=\"device-select-label\"\n            @change=${(e: Event) => {\n              const target = e.target as HTMLSelectElement;\n              const selectedDevice = this.devices.find(\n                device => device.deviceId === target.value,\n              );\n              if (selectedDevice) {\n                this._selectDevice(selectedDevice);\n              }\n            }}\n          >\n            ${this.devices.map(\n              device => html`\n                <option\n                  value=${device.deviceId}\n                  ?selected=${this.selectedDevice === device.deviceId}\n                >\n                  ${device.label || 'Unknown Device'}\n                </option>\n              `,\n            )}\n          </select>\n          <!-- ${this.devices.map(\n            device => html`\n              <div\n                class=\"dropdown-item ${this.selectedDevice === device.deviceId\n                  ? 'selected'\n                  : ''}\"\n                @click=${() => this._selectDevice(device)}\n              >\n                ${device.label || 'Unknown Device'}\n              </div>\n            `,\n          )} -->\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mic-selector': MicSelector;\n  }\n}\n"]}

package/dist/src/settings.d.ts

@@ -0,0 +1,18 @@
+import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
+interface Device {
+    deviceId: string;
+    label?: string;
+}
+export declare class MicSelector extends LitElement {
+    devices: Device[];
+    selectedDevice: string;
+    static styles: CSSResultGroup;
+    private _selectDevice;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mic-selector': MicSelector;
+    }
+}
+export {};

package/dist/src/settings.js

@@ -0,0 +1,131 @@
+import { __decorate } from "tslib";
+// mic-selector.ts
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import ButtonStyles from './styles/buttons';
+import SelectStyles from './styles/select';
+let MicSelector = class MicSelector extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.devices = [];
+        this.selectedDevice = '';
+    }
+    _selectDevice(device) {
+        this.selectedDevice = device.deviceId;
+        this.dispatchEvent(new CustomEvent('recording-device-changed', {
+            detail: device,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <div class="mic-selector">
+        <button id="settings-popover-button" popovertarget="settings-popover">
+          <icon-settings></icon-settings>
+        </button>
+        <div id="settings-popover" popover>
+          <label id="device-select-label" for="device-select">
+            Recording Device
+          </label>
+          <select
+            id="device-select"
+            aria-labelledby="device-select-label"
+            @change=${(e) => {
+            const target = e.target;
+            const selectedDevice = this.devices.find(device => device.deviceId === target.value);
+            if (selectedDevice) {
+                this._selectDevice(selectedDevice);
+            }
+        }}
+          >
+            ${this.devices.map(device => html `
+                <option
+                  value=${device.deviceId}
+                  ?selected=${this.selectedDevice === device.deviceId}
+                >
+                  ${device.label || 'Unknown Device'}
+                </option>
+              `)}
+          </select>
+          <!-- ${this.devices.map(device => html `
+              <div
+                class="dropdown-item ${this.selectedDevice === device.deviceId
+            ? 'selected'
+            : ''}"
+                @click=${() => this._selectDevice(device)}
+              >
+                ${device.label || 'Unknown Device'}
+              </div>
+            `)} -->
+        </div>
+      </div>
+    `;
+    }
+};
+MicSelector.styles = [
+    css `
+      :host {
+        display: block;
+        font-family: var(--component-font-family);
+      }
+      .label {
+        font-size: 0.8rem;
+        color: var(--component-text-color);
+        margin-bottom: 4px;
+      }
+      /* Retain the anchor-name styling for this component */
+      #settings-popover-button {
+        anchor-name: --settings_popover_btn;
+      }
+      [popover] {
+        margin: 0;
+        padding: 16px;
+        border: 0;
+        background: var(--card-background);
+        border: 1px solid var(--card-border-color);
+        border-radius: var(--card-border-radius);
+        box-shadow: var(--card-box-shadow);
+        z-index: 1000;
+        max-width: 260px;
+        position-anchor: --settings_popover_btn;
+        position-area: bottom;
+        position-visibility: always;
+        /* inset: unset; */
+        transform: translateX(45%);
+        overflow-x: hidden;
+      }
+      .dropdown-item {
+        padding: 8px;
+        cursor: pointer;
+        font-size: 0.9rem;
+        color: var(--component-text-color);
+        // allow only a single line of text and truncate the rest
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        opacity: 0.8;
+      }
+      .dropdown-item:hover {
+        background: var(--action-plain-background-hover);
+      }
+      .dropdown-item.selected {
+        font-weight: bold;
+        opacity: 1;
+      }
+    `,
+    ButtonStyles,
+    SelectStyles,
+];
+__decorate([
+    property({ type: Array })
+], MicSelector.prototype, "devices", void 0);
+__decorate([
+    property({ type: String })
+], MicSelector.prototype, "selectedDevice", void 0);
+MicSelector = __decorate([
+    customElement('mic-selector')
+], MicSelector);
+export { MicSelector };
+//# sourceMappingURL=settings.js.map

package/dist/src/settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.js","sourceRoot":"","sources":["../../src/settings.ts"],"names":[],"mappings":";AAAA,kBAAkB;AAClB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAQpC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAEL,YAAO,GAAa,EAAE,CAAC;QAGvB,mBAAc,GAAW,EAAE,CAAC;IAuH9B,CAAC;IA7DS,aAAa,CAAC,MAAc;QAClC,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,0BAA0B,EAAE;YAC1C,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;sBAYO,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;YAC7C,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CACtC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,MAAM,CAAC,KAAK,CAC3C,CAAC;YACF,IAAI,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;;cAEC,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;0BAEF,MAAM,CAAC,QAAQ;8BACX,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,QAAQ;;oBAEjD,MAAM,CAAC,KAAK,IAAI,gBAAgB;;eAErC,CACF;;iBAEI,IAAI,CAAC,OAAO,CAAC,GAAG,CACrB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;uCAEa,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,QAAQ;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE;yBACG,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;;kBAEvC,MAAM,CAAC,KAAK,IAAI,gBAAgB;;aAErC,CACF;;;KAGN,CAAC;IACJ,CAAC;;AApHM,kBAAM,GAAmB;IAC9B,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;IACD,YAAY;IACZ,YAAY;CACb,AAtDY,CAsDX;AA3DF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CACH;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACC;AALjB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA4HvB","sourcesContent":["// mic-selector.ts\nimport { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport ButtonStyles from './styles/buttons';\nimport SelectStyles from './styles/select';\n\ninterface Device {\n  deviceId: string;\n  label?: string;\n}\n\n@customElement('mic-selector')\nexport class MicSelector extends LitElement {\n  @property({ type: Array })\n  devices: Device[] = [];\n\n  @property({ type: String })\n  selectedDevice: string = '';\n\n  static styles: CSSResultGroup = [\n    css`\n      :host {\n        display: block;\n        font-family: var(--component-font-family);\n      }\n      .label {\n        font-size: 0.8rem;\n        color: var(--component-text-color);\n        margin-bottom: 4px;\n      }\n      /* Retain the anchor-name styling for this component */\n      #settings-popover-button {\n        anchor-name: --settings_popover_btn;\n      }\n      [popover] {\n        margin: 0;\n        padding: 16px;\n        border: 0;\n        background: var(--card-background);\n        border: 1px solid var(--card-border-color);\n        border-radius: var(--card-border-radius);\n        box-shadow: var(--card-box-shadow);\n        z-index: 1000;\n        max-width: 260px;\n        position-anchor: --settings_popover_btn;\n        position-area: bottom;\n        position-visibility: always;\n        /* inset: unset; */\n        transform: translateX(45%);\n        overflow-x: hidden;\n      }\n      .dropdown-item {\n        padding: 8px;\n        cursor: pointer;\n        font-size: 0.9rem;\n        color: var(--component-text-color);\n        // allow only a single line of text and truncate the rest\n        width: 100%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        opacity: 0.8;\n      }\n      .dropdown-item:hover {\n        background: var(--action-plain-background-hover);\n      }\n      .dropdown-item.selected {\n        font-weight: bold;\n        opacity: 1;\n      }\n    `,\n    ButtonStyles,\n    SelectStyles,\n  ];\n\n  private _selectDevice(device: Device): void {\n    this.selectedDevice = device.deviceId;\n    this.dispatchEvent(\n      new CustomEvent('recording-device-changed', {\n        detail: device,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"mic-selector\">\n        <button id=\"settings-popover-button\" popovertarget=\"settings-popover\">\n          <icon-settings></icon-settings>\n        </button>\n        <div id=\"settings-popover\" popover>\n          <label id=\"device-select-label\" for=\"device-select\">\n            Recording Device\n          </label>\n          <select\n            id=\"device-select\"\n            aria-labelledby=\"device-select-label\"\n            @change=${(e: Event) => {\n              const target = e.target as HTMLSelectElement;\n              const selectedDevice = this.devices.find(\n                device => device.deviceId === target.value,\n              );\n              if (selectedDevice) {\n                this._selectDevice(selectedDevice);\n              }\n            }}\n          >\n            ${this.devices.map(\n              device => html`\n                <option\n                  value=${device.deviceId}\n                  ?selected=${this.selectedDevice === device.deviceId}\n                >\n                  ${device.label || 'Unknown Device'}\n                </option>\n              `,\n            )}\n          </select>\n          <!-- ${this.devices.map(\n            device => html`\n              <div\n                class=\"dropdown-item ${this.selectedDevice === device.deviceId\n                  ? 'selected'\n                  : ''}\"\n                @click=${() => this._selectDevice(device)}\n              >\n                ${device.label || 'Unknown Device'}\n              </div>\n            `,\n          )} -->\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mic-selector': MicSelector;\n  }\n}\n"]}

package/dist/src/styles/ComponentStyles.d.ts

@@ -0,0 +1,2 @@
+declare const ComponentStyles: import("lit").CSSResult;
+export default ComponentStyles;