@internetarchive/elements 0.2.2-zendesk3 → 0.2.3-alpha-webdev8378.0

package/package.json

@@ -1,118 +1,120 @@
-{
-  "name": "@internetarchive/elements",
-  "version": "0.2.2-zendesk3",
-  "description": "A web component library from the Internet Archive.",
-  "license": "AGPL-3.0-only",
-  "types": "./dist/src/elements/index.d.ts",
-  "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/internetarchive/elements.git"
-  },
-  "bugs": {
-    "url": "https://github.com/internetarchive/elements/issues"
-  },
-  "scripts": {
-    "dev": "wireit",
-    "build": "wireit",
-    "clean": "wireit",
-    "lint": "wireit",
-    "format": "wireit",
-    "circular": "wireit",
-    "prepare": "wireit",
-    "test": "wireit",
-    "ghpages:build": "wireit"
-  },
-  "dependencies": {
-    "@lit/localize": "^0.12.2",
-    "lit": "^2.8.0 || ^3.3.2",
-    "magic-snowflakes": "^7.0.2",
-    "tslib": "^2.8.1"
-  },
-  "devDependencies": {
-    "@open-wc/testing-helpers": "^3.0.1",
-    "@typescript-eslint/eslint-plugin": "^8.46.4",
-    "@vitest/browser": "^4.0.8",
-    "@vitest/browser-playwright": "^4.0.8",
-    "@vitest/coverage-v8": "^4.0.8",
-    "eslint": "^9.39.1",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-html": "^8.1.3",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-lit": "^1.15.0",
-    "eslint-plugin-lit-a11y": "^4.1.4",
-    "eslint-plugin-no-only-tests": "^3.3.0",
-    "eslint-plugin-wc": "^2.2.1",
-    "highlight.js": "^11.11.1",
-    "madge": "^8.0.0",
-    "playwright": "^1.56.1",
-    "prettier": "^3.6.2",
-    "ts-lit-plugin": "^2.0.2",
-    "tsc-alias": "^1.8.16",
-    "typescript": "^5.9.3",
-    "vite": "^7.2.2",
-    "vitest": "^4.0.8",
-    "wireit": "^0.14.12"
-  },
-  "exports": {
-    ".": "./dist/src/index.js",
-    "./*": "./dist/src/elements/*.js",
-    "./labs/*": "./dist/src/labs/*.js"
-  },
-  "files": [
-    "README.md",
-    "dist",
-    "!dist/**/*.test*",
-    "!dist/**/*-story*",
-    "!dist/demo",
-    "!dist/src/internal",
-    "!dist/*.tsbuildinfo"
-  ],
-  "wireit": {
-    "build": {
-      "command": "tsc --build --pretty && tsc-alias && rsync -zarvm --prune-empty-dirs --include \"*/\" --include \"*.svg\" --exclude=\"*\" src dist",
-      "dependencies": [
-        "circular"
-      ],
-      "files": [
-        "src/**/*.ts",
-        "tsconfig.json"
-      ],
-      "output": [
-        "dist/**"
-      ]
-    },
-    "circular": {
-      "command": "madge --circular --extensions ts ."
-    },
-    "clean": {
-      "command": "rm -rf dist"
-    },
-    "dev": {
-      "command": "vite"
-    },
-    "lint": {
-      "command": "eslint . && prettier \"**/*.ts\" --check"
-    },
-    "format": {
-      "command": "eslint . --fix && prettier \"**/*.ts\" --write"
-    },
-    "prepare": {
-      "dependencies": [
-        "build"
-      ]
-    },
-    "test": {
-      "command": "vitest",
-      "dependencies": [
-        "circular"
-      ]
-    },
-    "ghpages:build": {
-      "command": "vite build --config vite.config.ghpages.ts && touch ./ghpages/.nojekyll"
-    }
-  }
-}
+{
+  "name": "@internetarchive/elements",
+  "version": "0.2.3-alpha-webdev8378.0",
+  "description": "A web component library from the Internet Archive.",
+  "license": "AGPL-3.0-only",
+  "types": "./dist/src/elements/index.d.ts",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/internetarchive/elements.git"
+  },
+  "bugs": {
+    "url": "https://github.com/internetarchive/elements/issues"
+  },
+  "scripts": {
+    "dev": "wireit",
+    "build": "wireit",
+    "clean": "wireit",
+    "lint": "wireit",
+    "format": "wireit",
+    "circular": "wireit",
+    "prepare": "wireit",
+    "test": "wireit",
+    "ghpages:build": "wireit"
+  },
+  "dependencies": {
+    "@lit/localize": "^0.12.2",
+    "@internetarchive/ia-clearable-text-input": "^1.1.1",
+    "@internetarchive/ia-dropdown": "^2.1.0",
+    "lit": "^2.8.0 || ^3.3.2",
+    "magic-snowflakes": "^7.0.2",
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "@open-wc/testing-helpers": "^3.0.1",
+    "@typescript-eslint/eslint-plugin": "^8.46.4",
+    "@vitest/browser": "^4.0.8",
+    "@vitest/browser-playwright": "^4.0.8",
+    "@vitest/coverage-v8": "^4.0.8",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-html": "^8.1.3",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-lit": "^1.15.0",
+    "eslint-plugin-lit-a11y": "^4.1.4",
+    "eslint-plugin-no-only-tests": "^3.3.0",
+    "eslint-plugin-wc": "^2.2.1",
+    "highlight.js": "^11.11.1",
+    "madge": "^8.0.0",
+    "playwright": "^1.56.1",
+    "prettier": "^3.6.2",
+    "ts-lit-plugin": "^2.0.2",
+    "tsc-alias": "^1.8.16",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.2",
+    "vitest": "^4.0.8",
+    "wireit": "^0.14.12"
+  },
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./*": "./dist/src/elements/*.js",
+    "./labs/*": "./dist/src/labs/*.js"
+  },
+  "files": [
+    "README.md",
+    "dist",
+    "!dist/**/*.test*",
+    "!dist/**/*-story*",
+    "!dist/demo",
+    "!dist/src/internal",
+    "!dist/*.tsbuildinfo"
+  ],
+  "wireit": {
+    "build": {
+      "command": "tsc --build --pretty && tsc-alias && rsync -zarvm --prune-empty-dirs --include \"*/\" --include \"*.svg\" --exclude=\"*\" src dist",
+      "dependencies": [
+        "circular"
+      ],
+      "files": [
+        "src/**/*.ts",
+        "tsconfig.json"
+      ],
+      "output": [
+        "dist/**"
+      ]
+    },
+    "circular": {
+      "command": "madge --circular --extensions ts ."
+    },
+    "clean": {
+      "command": "rm -rf dist"
+    },
+    "dev": {
+      "command": "vite"
+    },
+    "lint": {
+      "command": "eslint . && prettier \"**/*.ts\" --check"
+    },
+    "format": {
+      "command": "eslint . --fix && prettier \"**/*.ts\" --write"
+    },
+    "prepare": {
+      "dependencies": [
+        "build"
+      ]
+    },
+    "test": {
+      "command": "vitest",
+      "dependencies": [
+        "circular"
+      ]
+    },
+    "ghpages:build": {
+      "command": "vite build --config vite.config.ghpages.ts && touch ./ghpages/.nojekyll"
+    }
+  }
+}

package/dist/src/elements/ia-zendesk-widget/ia-zendesk-widget.d.ts

@@ -1,78 +0,0 @@
-import { LitElement, type CSSResultGroup, type TemplateResult } from 'lit';
-declare global {
-    interface Window {
-        /**
-         * Zendesk Messenger API injected by the ze-snippet script.
-         * Overloaded to cover the two call shapes we use:
-         *   - `messenger:on` — subscribe to open/close lifecycle events
-         *   - `messenger`    — imperatively open or close the widget panel
-         */
-        zE?: {
-            (target: 'messenger:on', event: 'open' | 'close', callback: () => void): void;
-            (target: 'messenger', action: 'open' | 'close'): void;
-        };
-    }
-}
-/**
- * A lightweight launcher button that loads and opens the Zendesk Messenger
- * widget on demand.
- *
- * The native Zendesk launcher is never shown — this button is the sole entry
- * point. The Zendesk snippet script is fetched lazily on the first click so
- * it does not affect page load performance.
- *
- * @fires zendeskHelpButtonClicked - Dispatched when the user clicks the Help
- *   button, before the widget is opened.
- *
- * @cssprop --button-blue - Button background colour (default: `#194880`).
- * @cssprop --icon-fill-color - SVG icon fill colour (default: `#fff`).
- * @cssprop --link-color - Button text colour (default: `#fff`).
- *
- * @example
- * ```html
- * <ia-zendesk-widget
- *   widget-src="https://static.zdassets.com/ekr/snippet.js?key=YOUR_KEY"
- * ></ia-zendesk-widget>
- * ```
- */
-export declare class IAZendeskWidget extends LitElement {
-    /** URL of the Zendesk `ze-snippet` loader script, including the `key` query param. */
-    widgetSrc: string;
-    /** Controls Help button visibility. Hidden while the widget panel is open. */
-    private buttonVisible;
-    /** True from the first click until Zendesk fires the `open` event. Shows the spinner. */
-    private isLoading;
-    /**
-     * Set to `true` after the snippet has loaded and the `messenger:on` listeners
-     * have been registered. Prevents duplicate listener registration on
-     * subsequent clicks.
-     */
-    private zendeskReady;
-    /**
-     * Click handler for the Help button.
-     *
-     * On the first call: injects the Zendesk script, waits for `window.zE` to
-     * become available, registers open/close listeners, then opens the panel.
-     *
-     * On subsequent calls: the script is already present so we go straight to
-     * opening the panel. The spinner stays on until Zendesk fires `'open'`.
-     */
-    private initiateZenDesk;
-    /**
-     * Appends the Zendesk snippet `<script>` to `<head>` if it has not already
-     * been added. Resolves once the script has loaded; rejects on network error.
-     * Guarded by the `ze-snippet` id so multiple widget instances on the same
-     * page share a single script tag.
-     */
-    private loadZendeskScript;
-    /**
-     * Polls `window.zE` at 100 ms intervals until the Zendesk API is available.
-     * The snippet performs its own async initialisation after loading, so
-     * `window.zE` may not be set immediately when `script.onload` fires.
-     */
-    private waitForZendesk;
-    private get iconTemplate();
-    render(): TemplateResult;
-    static get styles(): CSSResultGroup;
-}
-//# sourceMappingURL=ia-zendesk-widget.d.ts.map

package/dist/src/elements/ia-zendesk-widget/ia-zendesk-widget.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ia-zendesk-widget.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-zendesk-widget/ia-zendesk-widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd;;;;;WAKG;QACH,EAAE,CAAC,EAAE;YACH,CACE,MAAM,EAAE,cAAc,EACtB,KAAK,EAAE,MAAM,GAAG,OAAO,EACvB,QAAQ,EAAE,MAAM,IAAI,GACnB,IAAI,CAAC;YACR,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;SACvD,CAAC;KACH;CACF;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,sFAAsF;IAEtF,SAAS,SAAM;IAEf,8EAA8E;IACrE,OAAO,CAAC,aAAa,CAAQ;IAEtC,yFAAyF;IAChF,OAAO,CAAC,SAAS,CAAS;IAEnC;;;;OAIG;IACH,OAAO,CAAC,YAAY,CAAS;IAE7B;;;;;;;;OAQG;YACW,eAAe;IAoC7B;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAezB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAgBtB,OAAO,KAAK,YAAY,GAIvB;IAED,MAAM,IAAI,cAAc;IAYxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAiElC;CACF"}

package/dist/src/elements/ia-zendesk-widget/ia-zendesk-widget.js

@@ -1,221 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement, } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import loaderIconSvg from './loader-icon.svg?raw';
-import questionIconSvg from './question-icon.svg?raw';
-/**
- * A lightweight launcher button that loads and opens the Zendesk Messenger
- * widget on demand.
- *
- * The native Zendesk launcher is never shown — this button is the sole entry
- * point. The Zendesk snippet script is fetched lazily on the first click so
- * it does not affect page load performance.
- *
- * @fires zendeskHelpButtonClicked - Dispatched when the user clicks the Help
- *   button, before the widget is opened.
- *
- * @cssprop --button-blue - Button background colour (default: `#194880`).
- * @cssprop --icon-fill-color - SVG icon fill colour (default: `#fff`).
- * @cssprop --link-color - Button text colour (default: `#fff`).
- *
- * @example
- * ```html
- * <ia-zendesk-widget
- *   widget-src="https://static.zdassets.com/ekr/snippet.js?key=YOUR_KEY"
- * ></ia-zendesk-widget>
- * ```
- */
-let IAZendeskWidget = class IAZendeskWidget extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** URL of the Zendesk `ze-snippet` loader script, including the `key` query param. */
-        this.widgetSrc = '';
-        /** Controls Help button visibility. Hidden while the widget panel is open. */
-        this.buttonVisible = true;
-        /** True from the first click until Zendesk fires the `open` event. Shows the spinner. */
-        this.isLoading = false;
-        /**
-         * Set to `true` after the snippet has loaded and the `messenger:on` listeners
-         * have been registered. Prevents duplicate listener registration on
-         * subsequent clicks.
-         */
-        this.zendeskReady = false;
-    }
-    /**
-     * Click handler for the Help button.
-     *
-     * On the first call: injects the Zendesk script, waits for `window.zE` to
-     * become available, registers open/close listeners, then opens the panel.
-     *
-     * On subsequent calls: the script is already present so we go straight to
-     * opening the panel. The spinner stays on until Zendesk fires `'open'`.
-     */
-    async initiateZenDesk() {
-        this.isLoading = true;
-        this.dispatchEvent(new Event('zendeskHelpButtonClicked'));
-        try {
-            if (!this.zendeskReady) {
-                await this.loadZendeskScript();
-                await this.waitForZendesk();
-                // Register lifecycle listeners exactly once.
-                // isLoading is cleared here (not earlier) so the spinner persists until
-                // the widget panel is actually visible to the user.
-                window.zE('messenger:on', 'open', () => {
-                    this.buttonVisible = false;
-                    this.isLoading = false;
-                });
-                // Delay matches the Zendesk close animation so the Help button does not
-                // reappear while the panel is still sliding out.
-                window.zE('messenger:on', 'close', () => {
-                    setTimeout(() => {
-                        this.buttonVisible = true;
-                    }, 500);
-                });
-                this.zendeskReady = true;
-            }
-            window.zE('messenger', 'open');
-        }
-        catch (err) {
-            this.isLoading = false;
-            // eslint-disable-next-line no-console
-            console.error('[ia-zendesk-widget]', err);
-        }
-    }
-    /**
-     * Appends the Zendesk snippet `<script>` to `<head>` if it has not already
-     * been added. Resolves once the script has loaded; rejects on network error.
-     * Guarded by the `ze-snippet` id so multiple widget instances on the same
-     * page share a single script tag.
-     */
-    loadZendeskScript() {
-        return new Promise((resolve, reject) => {
-            if (document.getElementById('ze-snippet')) {
-                resolve();
-                return;
-            }
-            const script = document.createElement('script');
-            script.id = 'ze-snippet';
-            script.src = this.widgetSrc;
-            script.onload = () => resolve();
-            script.onerror = () => reject(new Error('Failed to load Zendesk script'));
-            document.head.appendChild(script);
-        });
-    }
-    /**
-     * Polls `window.zE` at 100 ms intervals until the Zendesk API is available.
-     * The snippet performs its own async initialisation after loading, so
-     * `window.zE` may not be set immediately when `script.onload` fires.
-     */
-    waitForZendesk(timeoutMs = 10_000) {
-        return new Promise((resolve, reject) => {
-            const check = setInterval(() => {
-                if (window.zE) {
-                    clearInterval(check);
-                    clearTimeout(timeout);
-                    resolve();
-                }
-            }, 100);
-            const timeout = setTimeout(() => {
-                clearInterval(check);
-                reject(new Error('Zendesk API did not initialise in time'));
-            }, timeoutMs);
-        });
-    }
-    get iconTemplate() {
-        return this.isLoading
-            ? unsafeHTML(loaderIconSvg)
-            : unsafeHTML(questionIconSvg);
-    }
-    render() {
-        return html `
-      <button
-        class="help-widget ${this.buttonVisible ? '' : 'hidden'}"
-        @click=${this.initiateZenDesk}
-      >
-        ${this.iconTemplate}
-        <span class="hidden-sm">Help</span>
-      </button>
-    `;
-    }
-    static get styles() {
-        return css `
-      :host {
-        --button-blue: #194880;
-        --white: #fff;
-        --icon-fill-color: var(--white);
-        --link-color: var(--white);
-      }
-
-      .help-widget {
-        width: 108px;
-        height: 46px;
-        margin: 14px 20px;
-        position: fixed;
-        bottom: 0;
-        right: 0;
-        z-index: 999998;
-        background: var(--button-blue);
-        color: var(--link-color);
-        letter-spacing: 0.6px;
-        font-size: inherit;
-        transition: opacity 0.12s linear;
-        border-radius: 999rem;
-        border: 0;
-        outline: none;
-        font-weight: 700;
-        cursor: pointer;
-        vertical-align: middle;
-      }
-
-      .fill-color {
-        fill: var(--icon-fill-color);
-      }
-
-      .help-widget svg {
-        vertical-align: middle;
-        margin-right: 3px;
-        pointer-events: none;
-      }
-
-      .help-widget .hidden-sm {
-        pointer-events: none;
-      }
-
-      .hidden {
-        opacity: 0;
-        display: none;
-        visibility: hidden;
-      }
-
-      @media (max-width: 767px) {
-        .hidden-sm {
-          display: none;
-        }
-
-        .help-widget {
-          padding: 13px;
-          width: initial;
-        }
-
-        .help-widget svg {
-          margin-right: 0;
-        }
-      }
-    `;
-    }
-};
-__decorate([
-    property({ type: String, attribute: 'widget-src' })
-], IAZendeskWidget.prototype, "widgetSrc", void 0);
-__decorate([
-    state()
-], IAZendeskWidget.prototype, "buttonVisible", void 0);
-__decorate([
-    state()
-], IAZendeskWidget.prototype, "isLoading", void 0);
-IAZendeskWidget = __decorate([
-    customElement('ia-zendesk-widget')
-], IAZendeskWidget);
-export { IAZendeskWidget };
-//# sourceMappingURL=ia-zendesk-widget.js.map

package/dist/src/elements/ia-zendesk-widget/ia-zendesk-widget.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ia-zendesk-widget.js","sourceRoot":"","sources":["../../../../src/elements/ia-zendesk-widget/ia-zendesk-widget.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 { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML, UnsafeHTMLDirective } from 'lit/directives/unsafe-html.js';\n\nimport loaderIconSvg from './loader-icon.svg?raw';\nimport questionIconSvg from './question-icon.svg?raw';\nimport { DirectiveResult } from 'lit/directive.js';\n\ndeclare global {\n  interface Window {\n    /**\n     * Zendesk Messenger API injected by the ze-snippet script.\n     * Overloaded to cover the two call shapes we use:\n     *   - `messenger:on` — subscribe to open/close lifecycle events\n     *   - `messenger`    — imperatively open or close the widget panel\n     */\n    zE?: {\n      (\n        target: 'messenger:on',\n        event: 'open' | 'close',\n        callback: () => void,\n      ): void;\n      (target: 'messenger', action: 'open' | 'close'): void;\n    };\n  }\n}\n\n/**\n * A lightweight launcher button that loads and opens the Zendesk Messenger\n * widget on demand.\n *\n * The native Zendesk launcher is never shown — this button is the sole entry\n * point. The Zendesk snippet script is fetched lazily on the first click so\n * it does not affect page load performance.\n *\n * @fires zendeskHelpButtonClicked - Dispatched when the user clicks the Help\n *   button, before the widget is opened.\n *\n * @cssprop --button-blue - Button background colour (default: `#194880`).\n * @cssprop --icon-fill-color - SVG icon fill colour (default: `#fff`).\n * @cssprop --link-color - Button text colour (default: `#fff`).\n *\n * @example\n * ```html\n * <ia-zendesk-widget\n *   widget-src=\"https://static.zdassets.com/ekr/snippet.js?key=YOUR_KEY\"\n * ></ia-zendesk-widget>\n * ```\n */\n@customElement('ia-zendesk-widget')\nexport class IAZendeskWidget extends LitElement {\n  /** URL of the Zendesk `ze-snippet` loader script, including the `key` query param. */\n  @property({ type: String, attribute: 'widget-src' })\n  widgetSrc = '';\n\n  /** Controls Help button visibility. Hidden while the widget panel is open. */\n  @state() private buttonVisible = true;\n\n  /** True from the first click until Zendesk fires the `open` event. Shows the spinner. */\n  @state() private isLoading = false;\n\n  /**\n   * Set to `true` after the snippet has loaded and the `messenger:on` listeners\n   * have been registered. Prevents duplicate listener registration on\n   * subsequent clicks.\n   */\n  private zendeskReady = false;\n\n  /**\n   * Click handler for the Help button.\n   *\n   * On the first call: injects the Zendesk script, waits for `window.zE` to\n   * become available, registers open/close listeners, then opens the panel.\n   *\n   * On subsequent calls: the script is already present so we go straight to\n   * opening the panel. The spinner stays on until Zendesk fires `'open'`.\n   */\n  private async initiateZenDesk(): Promise<void> {\n    this.isLoading = true;\n    this.dispatchEvent(new Event('zendeskHelpButtonClicked'));\n\n    try {\n      if (!this.zendeskReady) {\n        await this.loadZendeskScript();\n        await this.waitForZendesk();\n\n        // Register lifecycle listeners exactly once.\n        // isLoading is cleared here (not earlier) so the spinner persists until\n        // the widget panel is actually visible to the user.\n        window.zE!('messenger:on', 'open', () => {\n          this.buttonVisible = false;\n          this.isLoading = false;\n        });\n\n        // Delay matches the Zendesk close animation so the Help button does not\n        // reappear while the panel is still sliding out.\n        window.zE!('messenger:on', 'close', () => {\n          setTimeout(() => {\n            this.buttonVisible = true;\n          }, 500);\n        });\n\n        this.zendeskReady = true;\n      }\n\n      window.zE!('messenger', 'open');\n    } catch (err) {\n      this.isLoading = false;\n      // eslint-disable-next-line no-console\n      console.error('[ia-zendesk-widget]', err);\n    }\n  }\n\n  /**\n   * Appends the Zendesk snippet `<script>` to `<head>` if it has not already\n   * been added. Resolves once the script has loaded; rejects on network error.\n   * Guarded by the `ze-snippet` id so multiple widget instances on the same\n   * page share a single script tag.\n   */\n  private loadZendeskScript(): Promise<void> {\n    return new Promise((resolve, reject) => {\n      if (document.getElementById('ze-snippet')) {\n        resolve();\n        return;\n      }\n      const script = document.createElement('script');\n      script.id = 'ze-snippet';\n      script.src = this.widgetSrc;\n      script.onload = () => resolve();\n      script.onerror = () => reject(new Error('Failed to load Zendesk script'));\n      document.head.appendChild(script);\n    });\n  }\n\n  /**\n   * Polls `window.zE` at 100 ms intervals until the Zendesk API is available.\n   * The snippet performs its own async initialisation after loading, so\n   * `window.zE` may not be set immediately when `script.onload` fires.\n   */\n  private waitForZendesk(timeoutMs = 10_000): Promise<void> {\n    return new Promise((resolve, reject) => {\n      const check = setInterval(() => {\n        if (window.zE) {\n          clearInterval(check);\n          clearTimeout(timeout);\n          resolve();\n        }\n      }, 100);\n      const timeout = setTimeout(() => {\n        clearInterval(check);\n        reject(new Error('Zendesk API did not initialise in time'));\n      }, timeoutMs);\n    });\n  }\n\n  private get iconTemplate(): DirectiveResult<typeof UnsafeHTMLDirective> {\n    return this.isLoading\n      ? unsafeHTML(loaderIconSvg)\n      : unsafeHTML(questionIconSvg);\n  }\n\n  render(): TemplateResult {\n    return html`\n      <button\n        class=\"help-widget ${this.buttonVisible ? '' : 'hidden'}\"\n        @click=${this.initiateZenDesk}\n      >\n        ${this.iconTemplate}\n        <span class=\"hidden-sm\">Help</span>\n      </button>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        --button-blue: #194880;\n        --white: #fff;\n        --icon-fill-color: var(--white);\n        --link-color: var(--white);\n      }\n\n      .help-widget {\n        width: 108px;\n        height: 46px;\n        margin: 14px 20px;\n        position: fixed;\n        bottom: 0;\n        right: 0;\n        z-index: 999998;\n        background: var(--button-blue);\n        color: var(--link-color);\n        letter-spacing: 0.6px;\n        font-size: inherit;\n        transition: opacity 0.12s linear;\n        border-radius: 999rem;\n        border: 0;\n        outline: none;\n        font-weight: 700;\n        cursor: pointer;\n        vertical-align: middle;\n      }\n\n      .fill-color {\n        fill: var(--icon-fill-color);\n      }\n\n      .help-widget svg {\n        vertical-align: middle;\n        margin-right: 3px;\n        pointer-events: none;\n      }\n\n      .help-widget .hidden-sm {\n        pointer-events: none;\n      }\n\n      .hidden {\n        opacity: 0;\n        display: none;\n        visibility: hidden;\n      }\n\n      @media (max-width: 767px) {\n        .hidden-sm {\n          display: none;\n        }\n\n        .help-widget {\n          padding: 13px;\n          width: initial;\n        }\n\n        .help-widget svg {\n          margin-right: 0;\n        }\n      }\n    `;\n  }\n}\n"]}

package/dist/src/elements/ia-zendesk-widget/loader-icon.svg

@@ -1,26 +0,0 @@
-<svg
-  class="icon-loader"
-  height="20"
-  viewBox="0 0 128 128"
-  width="20"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <g>
-    <circle cx="16" cy="64" r="16" class="fill-color" fill-opacity="1" />
-    <circle cx="16" cy="64" r="14.344" class="fill-color" fill-opacity="1" transform="rotate(45 64 64)" />
-    <circle cx="16" cy="64" r="12.531" class="fill-color" fill-opacity="1" transform="rotate(90 64 64)" />
-    <circle cx="16" cy="64" r="10.75" class="fill-color" fill-opacity="1" transform="rotate(135 64 64)" />
-    <circle cx="16" cy="64" r="10.063" class="fill-color" fill-opacity="1" transform="rotate(180 64 64)" />
-    <circle cx="16" cy="64" r="8.063" class="fill-color" fill-opacity="1" transform="rotate(225 64 64)" />
-    <circle cx="16" cy="64" r="6.438" class="fill-color" fill-opacity="1" transform="rotate(270 64 64)" />
-    <circle cx="16" cy="64" r="5.375" class="fill-color" fill-opacity="1" transform="rotate(315 64 64)" />
-    <animateTransform
-      attributeName="transform"
-      type="rotate"
-      values="0 64 64;315 64 64;270 64 64;225 64 64;180 64 64;135 64 64;90 64 64;45 64 64"
-      calcMode="discrete"
-      dur="720ms"
-      repeatCount="indefinite"
-    />
-  </g>
-</svg>

package/dist/src/elements/ia-zendesk-widget/question-icon.svg

@@ -1,27 +0,0 @@
-<svg
-  class="icon-question"
-  height="20"
-  viewBox="0 0 20 20"
-  width="20"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <g class="fill-color" fill-rule="nonzero">
-    <path
-      d="m10.7078125 12.8359375v-.4140625c0-.765625.2890625-1.1484375 1.328125-1.75
-         1.1015625-.6484375 1.671875-1.46875 1.671875-2.6484375
-         0-1.78125-1.4765625-3.0234375-3.7109375-3.0234375
-         -2.3984375 0-3.7578125 1.34375-3.796875 3.265625h2.1171875
-         c.046875-.8828125.640625-1.453125 1.5390625-1.453125
-         .890625 0 1.484375.5390625 1.484375 1.28125s-.3046875 1.125-1.3125 1.7265625
-         c-1.078125.6328125-1.5078125 1.3359375-1.40625 2.5625l.015625.453125z"
-    />
-    <path
-      d="m9.7 16.57c.711 0 1.281-.539 1.281-1.227s-.57-1.226-1.28-1.226
-         c-.704 0-1.274.539-1.274 1.226s.57 1.227 1.274 1.227z"
-    />
-    <path
-      d="m10 0c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10z
-         m0 2c4.418 0 8 3.582 8 8s-3.582 8-8 8-8-3.582-8-8 3.582-8 8-8z"
-    />
-  </g>
-</svg>