@internetarchive/elements 0.2.2-webdev-8162.0 → 0.2.2-zendesk2

package/README.md

@@ -1,5 +1,9 @@
 # 📚 _elements_ 🏛️
 
+## Demo
+
+<https://internetarchive.github.io/elements>
+
 ## Installation
 
 ```zsh
@@ -16,6 +20,71 @@ import "@internetarchive/elements/ia-button/ia-button";
 <ia-button @click=() => alert('Clicked!')>Click Me</ia-button>
 ```
 
+## Build Dependencies
+
+We use SVGs in this repo, which not all build systems support out of the box. Here's how to support SVGs:
+
+### Webpack
+
+Add this to your Webpack config:
+
+```json
+module: {
+  rules: [
+    {
+      test: /\.svg/,
+      type: 'asset/resource',
+    },
+  ],
+},
+```
+
+### @web/test-runner
+
+Install rollup image plugins:
+
+```shell
+npm i -D @rollup/plugin-image @web/dev-server-rollup
+```
+
+Update config:
+
+```js
+import rollupImage from '@rollup/plugin-image';
+import { rollupAdapter } from '@web/dev-server-rollup';
+
+export default ({
+  mimeTypes: {
+    '**/*.scss': 'js',
+    '**/*.css': 'js',
+    '**/*.svg': 'js',
+    '**/*.json': 'js',
+  },
+  plugins: [rollupAdapter(rollupImage())],
+})
+```
+
+### Jest
+
+Create `SVGMock` file, ie `tests/jest/mocks/svg.js`
+
+```js
+/**
+ * Mock for SVG imports in Jest tests.
+ */
+export class SVGMock {}
+```
+
+Add to Jest config:
+
+```json
+"jest": {
+  "moduleNameMapper": {
+    "\\.svg$": "<rootDir>/tests/jest/mocks/svg.js",
+  },
+}
+```
+
 ## Development
 
 ```zsh
@@ -23,10 +92,41 @@ npm i
 npm run dev
 ```
 
+## Versioning and Publishing
+
+### Prerelease Version
+
+1. Create prerelease version on your branch:
+   1. `npm version prerelease --preid=<some_prefix>`
+   2. If you use JIRA, recommend using the ticket number, ie `--preid=webdev-1234`
+   3. This will also create a `git` tag
+2. Push the tag that was created in the `npm version` step
+3. Publish prerelease to npm:
+   1. Go to the [Element release page](https://github.com/internetarchive/elements/releases)
+   2. Tap `Draft a new release` button
+   3. Select the tag you created
+   4. Tap `Generate release notes`
+   5. Select `Set as a pre-release`
+   6. Tap `Publish release`
+
+### Release Version
+
+1. Use [Semantic Versioning](https://semver.org) to determine release number
+2. On the `main` branch:
+   1. Run `npm version [major | minor | patch]`
+   2. `git push && git push --tags`
+3. Publish release to npm:
+   1. Go to the [Element release page](https://github.com/internetarchive/elements/releases)
+   2. Tap `Draft a new release` button
+   3. Select the tag you created
+   4. Tap `Generate release notes`
+   5. Select `Set as the latest release`
+   6. Tap `Publish release`
+
 ## Adding a Component
 
 ### Structure
-Each component has its own directory in `src/elements` (or `src/labs` if it's still in development). The basic structure looks like this, though components can have additional files and directories if neededd. Take a look at other elements to see what they each contain.
+Each component has its own directory in `src/elements` (or `src/labs` if it's still in development). The basic structure looks like this, though components can have additional files and directories if needed. Take a look at other elements to see what they each contain.
 ```
 src
 - elements
@@ -42,61 +142,68 @@ To demo your component, we have a component catalog that you can add your demo t
 
 We have a story template you can use for consistency. [More info on `story-template`](#story-template). The easiest way to use this is to copy an existing story and modify it for your needs.
 
-Import your story in `/demo/app-root.ts` and add it to the page.
+Your story will be discovered by `/demo/app-root.ts` and added to the page.
 
 #### Story Template<a id="story-template"></a>
 
 The story template is a component you can use in your story to demo your component. This lets us present them in a consistent way.
 
-It has 5 main configurations:
+It has a few main configurations:
 
 *Properties*
 - `elementTag` (_string_) your component's name, ie `ia-button`
-- `exampleUsage` (_string_) your element's example usage, displays it with syntax highlighting
 - `labs` (_boolean_) if your component is in `labs` to update links
+- `styleInputSettings` (_StyleInputSettings array_) the style options to display, in the appropriate format
+- `propInputSettings` (_PropInputSettings array_) the prop options to display, in the appropriate format
+
+**Note:** If the type of prop input you want to use isn't yet available in the `propInputSettings` options,
+you can instead slot in custom property settings by using `slot="settings"`, adding a button to apply the
+properties, and passing in a `customExampleUsage` (see `ia-snow-story.ts` for a sample implementation).
 
 *Slots*
 - `demo` put your component demo in here
-- `settings` put your component settings in here
 
 Here's an example:
 ```typescript
 import '@demo/story-template';
+
+// Style options to display
+const styleInputSettings: StyleInputSettings[] = [
+  {
+    label: 'Button BG color',
+    cssVariable: '--button-background-color',
+    defaultValue: 'blue',  // Should match the actual fallback value for the variable
+    inputType: 'color',
+  },
+];
+
+// Prop options to display
+const propInputSettings: PropInputSettings[] = [
+  {
+    label: 'Mode',
+    inputType: 'radio',
+    propertyName: 'mode', // Should match the name of the property from its @property() declaration
+    radioOptions: ['primary', 'secondary', 'danger'],
+    defaultValue: 'primary', // Should match the actual default value from the @property() declaration, if any
+  },
+]
 ...
 render() {
   return html`
-    <story-template elementTag="ia-button" elementClassName="IAButton" .exampleUsage=${this.exampleUsage}>
+    <story-template 
+      elementTag="ia-button" 
+      elementClassName="IAButton" 
+      .styleInputData=${{settings: this.styleInputSettings}} 
+      .propInputData=${{settings: this.propInputSettings}}
+    >
       <div slot="demo">
-        <ia-button @click=${() => alert('Button clicked!')}
-          >Click Me</ia-button
-        >
-      </div>
-
-      <div slot="settings">
-        <table>
-          <tr>
-            <td>Color</td>
-            <td><input type="color" value="#007bff" id="color" /></td>
-          </tr>
-        </table>
-        <button @click=${this.apply}>Apply</button>
+        <ia-button @click=${() => alert('Button clicked!')}>
+          Click Me
+        </ia-button>
       </div>
     </story-template>
   `;
 }
-
-// return a string of your element's usage and it will
-// be displayed with syntax highlighting
-// can be dynamic
-private get exampleUsage(): string {
-  return `<ia-button @click=\${() => alert('Button clicked!')}>
-    Click Me
-  </ia-button>`;
-}
-
-private apply(): void {
-  // update component settings based on settings change
-}
 ```
 
 ## Component Inventory

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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,221 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,26 @@
+<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

@@ -0,0 +1,27 @@
+<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>

package/dist/src/elements/index.d.ts

@@ -1,3 +1,4 @@
 export * from './ia-button/ia-button.js';
 export * from './ia-combo-box/ia-combo-box.js';
+export * from './ia-zendesk-widget/ia-zendesk-widget.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/elements/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uCAAuC,CAAC"}

package/dist/src/elements/index.js

@@ -1,3 +1,4 @@
 export * from './ia-button/ia-button.js';
 export * from './ia-combo-box/ia-combo-box.js';
+export * from './ia-zendesk-widget/ia-zendesk-widget.js';
 //# sourceMappingURL=index.js.map

package/dist/src/elements/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './ia-button/ia-button';\nexport * from './ia-combo-box/ia-combo-box';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uCAAuC,CAAC","sourcesContent":["export * from './ia-button/ia-button';\nexport * from './ia-combo-box/ia-combo-box';\nexport * from './ia-zendesk-widget/ia-zendesk-widget';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/elements",
-  "version": "0.2.2-webdev-8162.0",
+  "version": "0.2.2-zendesk2",
   "description": "A web component library from the Internet Archive.",
   "license": "AGPL-3.0-only",
   "types": "./dist/src/elements/index.d.ts",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@lit/localize": "^0.12.2",
-    "lit": "^2.7.0 || ^3.0.0",
+    "lit": "^2.8.0 || ^3.3.2",
     "magic-snowflakes": "^7.0.2",
     "tslib": "^2.8.1"
   },