@internetarchive/elements 0.0.1-alpha.9 → 0.0.2-webdev-8133.0

package/README.md

@@ -1,5 +1,103 @@
 # 📚 _elements_ 🏛️
 
+## Installation
+
+```zsh
+npm i -S @internetarchive/elements
+```
+
+## Usage
+
+```typescript
+import "@internetarchive/elements/ia-button/ia-button";
+
+...
+
+<ia-button @click=() => alert('Clicked!')>Click Me</ia-button>
+```
+
+## Development
+
+```zsh
+npm i
+npm run dev
+```
+
+## 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.
+```
+src
+- elements
+  - ia-foobar // the name of the element
+    - ia-foobar.ts // the main element class
+    - ia-foobar.test.ts // the element's tests
+    - ia-foobar-story.ts // an element that demos your element
+```
+Export your component in `src/index.ts`
+
+### Story
+To demo your component, we have a component catalog that you can add your demo to. Create a component in your component directory. Name it `COMPONENT-NAME-story.ts`, ie `ia-button-story.ts`.
+
+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.
+
+#### 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:
+
+*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
+
+*Slots*
+- `demo` put your component demo in here
+- `settings` put your component settings in here
+
+Here's an example:
+```typescript
+import '@demo/story-template';
+...
+render() {
+  return html`
+    <story-template elementTag="ia-button" .exampleUsage=${this.exampleUsage}>
+      <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>
+      </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-button/ia-button.d.ts

@@ -1,4 +1,7 @@
 import { LitElement, type CSSResultGroup } from 'lit';
+/**
+ * A button element to demo the elements library
+ */
 export declare class IAButton extends LitElement {
     render(): import("lit-html").TemplateResult<1>;
     static get styles(): CSSResultGroup;

package/dist/src/elements/ia-button/ia-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ia-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM;IAQN,MAAM,KAAK,MAAM,IAAI,cAAc,CAOlC;CACF"}
+{"version":3,"file":"ia-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKjE;;GAEG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM;IAQN,MAAM,KAAK,MAAM,IAAI,cAAc,CAgBlC;CACF"}

package/dist/src/elements/ia-button/ia-button.js

@@ -1,6 +1,10 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
+import themeStyles from '../../themes/theme-styles';
+/**
+ * A button element to demo the elements library
+ */
 let IAButton = class IAButton extends LitElement {
     render() {
         return html `
@@ -10,12 +14,21 @@ let IAButton = class IAButton extends LitElement {
     `;
     }
     static get styles() {
-        return css `
-      button {
-        padding: 8px 16px;
-        background-color: var(--ia-button-background-color, #007bff);
-      }
-    `;
+        return [
+            themeStyles,
+            css `
+        :host {
+          --primary-background-color--: var(--primary-cta-fill);
+          --primary-text-color--: var(--primary-cta-text-color);
+        }
+
+        button {
+          padding: 8px 16px;
+          background-color: var(--primary-background-color--);
+          color: var(--primary-text-color--);
+        }
+      `,
+        ];
     }
 };
 IAButton = __decorate([

package/dist/src/elements/ia-button/ia-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-button.js","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAG1D,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IACtC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;KAKT,CAAC;IACJ,CAAC;CACF,CAAA;AAjBY,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAiBpB","sourcesContent":["import { css, html, LitElement, type CSSResultGroup } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\n@customElement('ia-button')\nexport class IAButton extends LitElement {\n  render() {\n    return html`\n      <button>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      button {\n        padding: 8px 16px;\n        background-color: var(--ia-button-background-color, #007bff);\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ia-button.js","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IACtC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;OAWF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA1BY,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA0BpB","sourcesContent":["import { css, html, LitElement, type CSSResultGroup } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n/**\n * A button element to demo the elements library\n */\n@customElement('ia-button')\nexport class IAButton extends LitElement {\n  render() {\n    return html`\n      <button>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --primary-background-color--: var(--primary-cta-fill);\n          --primary-text-color--: var(--primary-cta-text-color);\n        }\n\n        button {\n          padding: 8px 16px;\n          background-color: var(--primary-background-color--);\n          color: var(--primary-text-color--);\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/elements/ia-status-indicator/ia-status-indicator.d.ts

@@ -0,0 +1,21 @@
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+/**
+ * Renders an SVG indicator, which defualts to an animated circular indicator
+ */
+export declare class IAStatusIndicator extends LitElement {
+    loadingTitle: string;
+    successTitle: string;
+    errorTitle: string;
+    loadingStyle: 'ring' | 'ring-dots';
+    mode: 'loading' | 'success' | 'error';
+    render(): TemplateResult;
+    /** A circular loading indicator to render when processing */
+    private get loadingIndicatorTemplate();
+    /** A check mark to render on success */
+    private get successIndicatorTemplate();
+    /** An "!" to render on error */
+    private get errorIndicatorTemplate();
+    private get shouldShowLoadingDots();
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-status-indicator.d.ts.map

package/dist/src/elements/ia-status-indicator/ia-status-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-status-indicator.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-status-indicator/ia-status-indicator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAO5E;;GAEG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAEnB,YAAY,SAAqB;IAGjC,YAAY,SAAkB;IAG9B,UAAU,SAAgB;IAG1B,YAAY,EAAE,MAAM,GAAG,WAAW,CAAe;IAGjD,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAa;IAE9E,MAAM,IAAI,cAAc;IAQxB,6DAA6D;IAC7D,OAAO,KAAK,wBAAwB,GA4BnC;IAED,wCAAwC;IACxC,OAAO,KAAK,wBAAwB,GAyBnC;IAED,gCAAgC;IAChC,OAAO,KAAK,sBAAsB,GAkBjC;IAGD,OAAO,KAAK,qBAAqB,GAIhC;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CAqFlC;CACF"}

package/dist/src/elements/ia-status-indicator/ia-status-indicator.js

@@ -0,0 +1,220 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { choose } from 'lit/directives/choose.js';
+import themeStyles from '../../themes/theme-styles';
+/**
+ * Renders an SVG indicator, which defualts to an animated circular indicator
+ */
+let IAStatusIndicator = class IAStatusIndicator extends LitElement {
+    constructor() {
+        super(...arguments);
+        /* An optional title to use for the loading state of the indicator. Will be used for screen readers. */
+        this.loadingTitle = msg('Loading...');
+        /* An optional title to use for the success state of the indicator. Will be used for screen readers. */
+        this.successTitle = msg('Success');
+        /* An optional title to use for the error state of the indicator. Will be used for screen readers. */
+        this.errorTitle = msg('Error');
+        /* Which type of loading indicator to display */
+        this.loadingStyle = 'ring-dots';
+        /* The state of the indicator that should be shown */
+        this.mode = 'loading';
+    }
+    render() {
+        return html `${choose(this.mode, [
+            ['loading', () => this.loadingIndicatorTemplate],
+            ['success', () => this.successIndicatorTemplate],
+            ['error', () => this.errorIndicatorTemplate],
+        ])}`;
+    }
+    /** A circular loading indicator to render when processing */
+    get loadingIndicatorTemplate() {
+        return html `
+      <svg
+        class="loading-indicator"
+        viewBox="0 0 120 120"
+        preserveAspectRatio="none"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        role="status"
+      >
+        <title>${this.loadingTitle}</title>
+        <g stroke="none" stroke-width="1" fill-rule="evenodd">
+          <path
+            class="loading-ring"
+            d="M60,10 C69.8019971,10 78.9452178,12.8205573 86.6623125,17.6943223 L76.4086287,27.9484118 C71.4880919,25.4243078 65.9103784,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 C96,53.3014663 94.1704984,47.0302355 90.9839104,41.6587228 L101.110332,31.5326452 C106.715332,39.6116982 110,49.4222615 110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z"
+          ></path>
+          <g
+            class="loading-dots ${!this.shouldShowLoadingDots ? 'hidden' : ''}"
+            transform="translate(40.000000, 55.000000)"
+          >
+            <circle id="left-dot" cx="5" cy="5" r="5"></circle>
+            <circle id="middle-dot" cx="20" cy="5" r="5"></circle>
+            <circle id="right-dot" cx="35" cy="5" r="5"></circle>
+          </g>
+        </g>
+      </svg>
+    `;
+    }
+    /** A check mark to render on success */
+    get successIndicatorTemplate() {
+        return html `
+      <svg
+        class="success-indicator"
+        viewBox="0 0 120 120"
+        preserveAspectRatio="none"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        role="status"
+      >
+        <title>${this.successTitle}</title>
+        <g stroke="none" stroke-width="1" fill-rule="evenodd">
+          <path
+            class="success-icon"
+            d="M60,10 C70.5816709,10 80.3955961,13.2871104 88.4763646,18.8959201 L78.3502633,29.0214223 C72.9767592,25.8315427 66.7022695,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 L95.995,59.46 L108.327675,47.128668 C109.350926,50.9806166 109.925886,55.015198 109.993301,59.1731586 L110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z"
+          ></path>
+          <polygon
+            class="success-icon"
+            transform="translate(75.000000, 41.500000) rotate(44.000000) translate(-75.000000, -41.500000) "
+            points="96 85 54 85 54 65 76 64.999 76 -2 96 -2"
+          ></polygon>
+        </g>
+      </svg>
+    `;
+    }
+    /** An "!" to render on error */
+    get errorIndicatorTemplate() {
+        return html `
+      <svg
+        class="error-indicator"
+        viewBox="0 0 120 120"
+        preserveAspectRatio="none"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        role="status"
+      >
+        <title>${this.errorTitle}</title>
+        <path
+          class="error-icon"
+          d="m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714zm28.5387507 75.19549646-35.037482-62-34.962518 62zm-31-34.7484359v-10.2515641h-8v10.2515641l2.089172 14.7484359h3.8184713zm-8 19.7484359v8h8v-8z"
+        />
+      </svg>
+    `;
+    }
+    /* Whether to include the dots in the loading indicator */
+    get shouldShowLoadingDots() {
+        if (this.loadingStyle === 'ring')
+            return false;
+        return true;
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          --indicator-width--: var(--icon-width);
+
+          /* Loading */
+          --loading-ring-color--: var(--primary-text-color);
+          --loading-dot-color--: var(--primary-text-color);
+
+          /* Success */
+          --success-icon-color--: var(--color-success);
+
+          /* Error */
+          --error-icon-color--: var(--color-danger);
+
+          display: inline-block;
+          width: var(--indicator-width--);
+        }
+
+        .success-icon {
+          fill: var(--success-icon-color--);
+        }
+
+        .error-icon {
+          fill: var(--error-icon-color--);
+        }
+
+        .loading-ring {
+          fill: var(--loading-ring-color--);
+          animation: rotate 1.3s infinite linear;
+          transform-origin: 50px 50px;
+          transform-box: fill-box;
+        }
+
+        .loading-dots {
+          fill: var(--loading-dot-color--);
+          transition: opacity 0.25s ease-out;
+        }
+
+        .loading-dots.hidden {
+          display: none;
+        }
+
+        .loading-dots > * {
+          opacity: 0;
+          animation: dot 1.3s infinite;
+        }
+
+        .loading-dots #left-dot {
+          animation-delay: 0.2s;
+        }
+
+        .loading-dots #middle-dot {
+          animation-delay: 0.4s;
+        }
+
+        .loading-dots #right-dot {
+          animation-delay: 0.6s;
+        }
+
+        @keyframes rotate {
+          0% {
+            transform: rotate(-360deg);
+          }
+          100% {
+            /* This frame is supposed to be inferred, but Safari doesn't rotate it unless we're explicit */
+            transform: rotate(0deg);
+          }
+        }
+
+        @keyframes dot {
+          0% {
+            opacity: 0;
+          }
+          25% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0;
+          }
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], IAStatusIndicator.prototype, "loadingTitle", void 0);
+__decorate([
+    property({ type: String })
+], IAStatusIndicator.prototype, "successTitle", void 0);
+__decorate([
+    property({ type: String })
+], IAStatusIndicator.prototype, "errorTitle", void 0);
+__decorate([
+    property({ type: String })
+], IAStatusIndicator.prototype, "loadingStyle", void 0);
+__decorate([
+    property({ type: String })
+], IAStatusIndicator.prototype, "mode", void 0);
+IAStatusIndicator = __decorate([
+    customElement('ia-status-indicator')
+], IAStatusIndicator);
+export { IAStatusIndicator };
+//# sourceMappingURL=ia-status-indicator.js.map

package/dist/src/elements/ia-status-indicator/ia-status-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-status-indicator.js","sourceRoot":"","sources":["../../../../src/elements/ia-status-indicator/ia-status-indicator.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;GAEG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QACL,uGAAuG;QAC3E,iBAAY,GAAG,GAAG,CAAC,YAAY,CAAC,CAAC;QAE7D,uGAAuG;QAC3E,iBAAY,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC;QAE1D,qGAAqG;QACzE,eAAU,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC;QAEtD,gDAAgD;QACpB,iBAAY,GAAyB,WAAW,CAAC;QAE7E,qDAAqD;QACzB,SAAI,GAAoC,SAAS,CAAC;IAuLhF,CAAC;IArLC,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE;YAC9B,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,wBAAwB,CAAC;YAChD,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,wBAAwB,CAAC;YAChD,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC;SAC7C,CAAC,EAAE,CAAC;IACP,CAAC;IAED,6DAA6D;IAC7D,IAAY,wBAAwB;QAClC,OAAO,IAAI,CAAA;;;;;;;;;;iBAUE,IAAI,CAAC,YAAY;;;;;;;kCAOA,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;;;;;;KASxE,CAAC;IACJ,CAAC;IAED,wCAAwC;IACxC,IAAY,wBAAwB;QAClC,OAAO,IAAI,CAAA;;;;;;;;;;iBAUE,IAAI,CAAC,YAAY;;;;;;;;;;;;;KAa7B,CAAC;IACJ,CAAC;IAED,gCAAgC;IAChC,IAAY,sBAAsB;QAChC,OAAO,IAAI,CAAA;;;;;;;;;;iBAUE,IAAI,CAAC,UAAU;;;;;;KAM3B,CAAC;IACJ,CAAC;IAED,0DAA0D;IAC1D,IAAY,qBAAqB;QAC/B,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM;YAAE,OAAO,KAAK,CAAC;QAE/C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgFF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAnM6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAkC;AAGjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA+B;AAG9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA2B;AAG1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAkD;AAGjD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAmD;AAdnE,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAqM7B","sourcesContent":["import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport { choose } from 'lit/directives/choose.js';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n/**\n * Renders an SVG indicator, which defualts to an animated circular indicator\n */\n@customElement('ia-status-indicator')\nexport class IAStatusIndicator extends LitElement {\n  /* An optional title to use for the loading state of the indicator. Will be used for screen readers. */\n  @property({ type: String }) loadingTitle = msg('Loading...');\n\n  /* An optional title to use for the success state of the indicator. Will be used for screen readers. */\n  @property({ type: String }) successTitle = msg('Success');\n\n  /* An optional title to use for the error state of the indicator. Will be used for screen readers. */\n  @property({ type: String }) errorTitle = msg('Error');\n\n  /* Which type of loading indicator to display */\n  @property({ type: String }) loadingStyle: 'ring' | 'ring-dots' = 'ring-dots';\n\n  /* The state of the indicator that should be shown */\n  @property({ type: String }) mode: 'loading' | 'success' | 'error' = 'loading';\n\n  render(): TemplateResult {\n    return html`${choose(this.mode, [\n      ['loading', () => this.loadingIndicatorTemplate],\n      ['success', () => this.successIndicatorTemplate],\n      ['error', () => this.errorIndicatorTemplate],\n    ])}`;\n  }\n\n  /** A circular loading indicator to render when processing */\n  private get loadingIndicatorTemplate(): TemplateResult {\n    return html`\n      <svg\n        class=\"loading-indicator\"\n        viewBox=\"0 0 120 120\"\n        preserveAspectRatio=\"none\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        role=\"status\"\n      >\n        <title>${this.loadingTitle}</title>\n        <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n          <path\n            class=\"loading-ring\"\n            d=\"M60,10 C69.8019971,10 78.9452178,12.8205573 86.6623125,17.6943223 L76.4086287,27.9484118 C71.4880919,25.4243078 65.9103784,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 C96,53.3014663 94.1704984,47.0302355 90.9839104,41.6587228 L101.110332,31.5326452 C106.715332,39.6116982 110,49.4222615 110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z\"\n          ></path>\n          <g\n            class=\"loading-dots ${!this.shouldShowLoadingDots ? 'hidden' : ''}\"\n            transform=\"translate(40.000000, 55.000000)\"\n          >\n            <circle id=\"left-dot\" cx=\"5\" cy=\"5\" r=\"5\"></circle>\n            <circle id=\"middle-dot\" cx=\"20\" cy=\"5\" r=\"5\"></circle>\n            <circle id=\"right-dot\" cx=\"35\" cy=\"5\" r=\"5\"></circle>\n          </g>\n        </g>\n      </svg>\n    `;\n  }\n\n  /** A check mark to render on success */\n  private get successIndicatorTemplate(): TemplateResult {\n    return html`\n      <svg\n        class=\"success-indicator\"\n        viewBox=\"0 0 120 120\"\n        preserveAspectRatio=\"none\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        role=\"status\"\n      >\n        <title>${this.successTitle}</title>\n        <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n          <path\n            class=\"success-icon\"\n            d=\"M60,10 C70.5816709,10 80.3955961,13.2871104 88.4763646,18.8959201 L78.3502633,29.0214223 C72.9767592,25.8315427 66.7022695,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 L95.995,59.46 L108.327675,47.128668 C109.350926,50.9806166 109.925886,55.015198 109.993301,59.1731586 L110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z\"\n          ></path>\n          <polygon\n            class=\"success-icon\"\n            transform=\"translate(75.000000, 41.500000) rotate(44.000000) translate(-75.000000, -41.500000) \"\n            points=\"96 85 54 85 54 65 76 64.999 76 -2 96 -2\"\n          ></polygon>\n        </g>\n      </svg>\n    `;\n  }\n\n  /** An \"!\" to render on error */\n  private get errorIndicatorTemplate(): TemplateResult {\n    return html`\n      <svg\n        class=\"error-indicator\"\n        viewBox=\"0 0 120 120\"\n        preserveAspectRatio=\"none\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        role=\"status\"\n      >\n        <title>${this.errorTitle}</title>\n        <path\n          class=\"error-icon\"\n          d=\"m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714zm28.5387507 75.19549646-35.037482-62-34.962518 62zm-31-34.7484359v-10.2515641h-8v10.2515641l2.089172 14.7484359h3.8184713zm-8 19.7484359v8h8v-8z\"\n        />\n      </svg>\n    `;\n  }\n\n  /* Whether to include the dots in the loading indicator */\n  private get shouldShowLoadingDots(): boolean {\n    if (this.loadingStyle === 'ring') return false;\n\n    return true;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --indicator-width--: var(--icon-width);\n\n          /* Loading */\n          --loading-ring-color--: var(--primary-text-color);\n          --loading-dot-color--: var(--primary-text-color);\n\n          /* Success */\n          --success-icon-color--: var(--color-success);\n\n          /* Error */\n          --error-icon-color--: var(--color-danger);\n\n          display: inline-block;\n          width: var(--indicator-width--);\n        }\n\n        .success-icon {\n          fill: var(--success-icon-color--);\n        }\n\n        .error-icon {\n          fill: var(--error-icon-color--);\n        }\n\n        .loading-ring {\n          fill: var(--loading-ring-color--);\n          animation: rotate 1.3s infinite linear;\n          transform-origin: 50px 50px;\n          transform-box: fill-box;\n        }\n\n        .loading-dots {\n          fill: var(--loading-dot-color--);\n          transition: opacity 0.25s ease-out;\n        }\n\n        .loading-dots.hidden {\n          display: none;\n        }\n\n        .loading-dots > * {\n          opacity: 0;\n          animation: dot 1.3s infinite;\n        }\n\n        .loading-dots #left-dot {\n          animation-delay: 0.2s;\n        }\n\n        .loading-dots #middle-dot {\n          animation-delay: 0.4s;\n        }\n\n        .loading-dots #right-dot {\n          animation-delay: 0.6s;\n        }\n\n        @keyframes rotate {\n          0% {\n            transform: rotate(-360deg);\n          }\n          100% {\n            /* This frame is supposed to be inferred, but Safari doesn't rotate it unless we're explicit */\n            transform: rotate(0deg);\n          }\n        }\n\n        @keyframes dot {\n          0% {\n            opacity: 0;\n          }\n          25% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/labs/ia-snow/flake.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36.283" height="36.283"><path d="M35.531 17.391h-3.09l.845-1.464a.748.748 0 1 0-1.297-.75l-1.276 2.214H28.61l2.515-4.354a.751.751 0 0 0-.272-1.024.75.75 0 0 0-1.024.274l-2.948 5.104h-2.023a6.751 6.751 0 0 0-2.713-4.684l1.019-1.76 5.896-.002a.75.75 0 0 0 0-1.5l-5.029.002 1.051-1.82 2.557.002a.75.75 0 0 0 0-1.5l-1.689-.002 1.545-2.676a.75.75 0 1 0-1.302-.75l-1.547 2.676-.844-1.463a.749.749 0 1 0-1.297.75l1.278 2.213-1.051 1.818-2.514-4.354a.75.75 0 0 0-1.298.75l2.946 5.104-1.016 1.758a6.692 6.692 0 0 0-2.706-.57 6.74 6.74 0 0 0-2.707.568l-1.013-1.754 2.946-5.105a.75.75 0 0 0-1.298-.75L13.56 8.697l-1.05-1.818 1.278-2.217a.749.749 0 0 0-1.298-.75l-.845 1.465-1.551-2.678a.75.75 0 0 0-1.024-.273.748.748 0 0 0-.274 1.023l1.545 2.678H8.652a.75.75 0 0 0 0 1.5h2.556l1.05 1.818H7.231a.75.75 0 0 0 0 1.5h5.894l1.017 1.762a6.755 6.755 0 0 0-2.712 4.684H9.406l-2.95-5.104a.75.75 0 1 0-1.299.75l2.516 4.354H5.569l-1.277-2.213a.75.75 0 0 0-1.298.75l.845 1.463H.75a.75.75 0 0 0 0 1.5h3.09l-.845 1.465a.747.747 0 0 0 .275 1.022.75.75 0 0 0 .374.103.75.75 0 0 0 .65-.375l1.277-2.215h2.103l-2.516 4.354a.75.75 0 0 0 1.299.75l2.949-5.104h2.024a6.761 6.761 0 0 0 2.712 4.685l-1.017 1.762H7.232a.75.75 0 0 0 0 1.5h5.026l-1.05 1.818H8.651a.75.75 0 0 0 0 1.5h1.69l-1.545 2.676a.75.75 0 0 0 1.299.75l1.546-2.676.846 1.465a.755.755 0 0 0 .65.375.737.737 0 0 0 .375-.103.747.747 0 0 0 .274-1.022l-1.279-2.215 1.05-1.82 2.515 4.354a.75.75 0 0 0 1.299-.75l-2.947-5.104 1.013-1.756a6.72 6.72 0 0 0 5.415 0l1.014 1.756-2.947 5.104a.75.75 0 0 0 1.298.75l2.515-4.354 1.053 1.82-1.277 2.213a.75.75 0 0 0 1.298.75l.844-1.463 1.545 2.678c.141.24.393.375.65.375a.75.75 0 0 0 .649-1.125l-1.548-2.678h1.689a.75.75 0 0 0 0-1.5h-2.557l-1.051-1.82 5.029.002a.75.75 0 0 0 0-1.5l-5.896-.002-1.019-1.76a6.75 6.75 0 0 0 2.711-4.685h2.023l2.947 5.104a.753.753 0 0 0 1.025.273.749.749 0 0 0 .272-1.023l-2.515-4.354h2.104l1.279 2.215a.75.75 0 0 0 .649.375c.127 0 .256-.03.375-.103a.748.748 0 0 0 .273-1.022l-.848-1.465h3.092a.75.75 0 0 0 .003-1.5zm-12.136.75c0 .257-.041.502-.076.75a5.223 5.223 0 0 1-1.943 3.358 5.242 5.242 0 0 1-1.291.766 5.224 5.224 0 0 1-1.949.384 5.157 5.157 0 0 1-3.239-1.15 5.22 5.22 0 0 1-1.943-3.358c-.036-.247-.076-.493-.076-.75s.04-.503.076-.75a5.22 5.22 0 0 1 1.944-3.359c.393-.312.82-.576 1.291-.765a5.219 5.219 0 0 1 1.948-.384c.69 0 1.344.142 1.948.384.471.188.898.454 1.291.765a5.222 5.222 0 0 1 1.943 3.359c.035.247.076.493.076.75z" fill=":color:"/></svg>

package/dist/src/labs/ia-snow/ia-snow.d.ts

@@ -1,12 +1,16 @@
 import { LitElement, type CSSResultGroup, type PropertyValues } from 'lit';
-import { type SnowflakesParams } from 'magic-snowflakes';
-import '../../elements/ia-button/ia-button';
+import type { SnowflakesParams } from 'magic-snowflakes';
+/**
+ * An element that shows snowflakes to demo the elements library
+ */
 export declare class IASnow extends LitElement {
     snowConfig?: SnowflakesParams;
     private snowing;
     private snowflakes?;
     render(): import("lit-html").TemplateResult<1>;
     protected willUpdate(_changedProperties: PropertyValues): void;
+    private get startButtonTemplate();
+    private get clearButtonTemplate();
     private startSnowing;
     private stopSnowing;
     static get styles(): CSSResultGroup;

package/dist/src/labs/ia-snow/ia-snow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ia-snow.d.ts","sourceRoot":"","sources":["../../../../src/labs/ia-snow/ia-snow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKtF,OAAmB,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAErE,OAAO,mCAAmC,CAAC;AAI3C,qBACa,MAAO,SAAQ,UAAU;IACR,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAG1D,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,UAAU,CAAC,CAAa;IAEhC,MAAM;IA4BN,SAAS,CAAC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQ9D,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,WAAW;IAKnB,MAAM,KAAK,MAAM,IAAI,cAAc,CAMlC;CACF"}
+{"version":3,"file":"ia-snow.d.ts","sourceRoot":"","sources":["../../../../src/labs/ia-snow/ia-snow.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAQzD;;GAEG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAG1D,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,UAAU,CAAC,CAAa;IAEhC,MAAM;IAON,SAAS,CAAC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAc9D,OAAO,KAAK,mBAAmB,GAmB9B;IAED,OAAO,KAAK,mBAAmB,GAe9B;YAEa,YAAY;IAW1B,OAAO,CAAC,WAAW;IAKnB,MAAM,KAAK,MAAM,IAAI,cAAc,CAQlC;CACF"}

package/dist/src/labs/ia-snow/ia-snow.js

@@ -1,11 +1,13 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { state } from 'lit/decorators/state.js';
-import Snowflakes from 'magic-snowflakes';
-import '../../elements/ia-button/ia-button';
-import videoIcon from './video.svg';
+import flakeIcon from './flake.svg';
+import { lazyLoadTemplate, } from '../../util/lazy-load-template';
+/**
+ * An element that shows snowflakes to demo the elements library
+ */
 let IASnow = class IASnow extends LitElement {
     constructor() {
         super(...arguments);
@@ -13,8 +15,29 @@ let IASnow = class IASnow extends LitElement {
     }
     render() {
         return html `
-      <ia-button
-        @click=${() => {
+      ${this.startButtonTemplate} ${this.clearButtonTemplate}
+      <img src=${flakeIcon} alt="Snowflakes icon" />
+    `;
+    }
+    willUpdate(_changedProperties) {
+        if (_changedProperties.has('snowConfig')) {
+            this.snowflakes?.destroy();
+            this.snowflakes = undefined;
+            this.startSnowing();
+        }
+    }
+    // Consider lazy loading external templates if they are large,
+    // below the fold or not needed immediately. This will reduce the initial
+    // bundle size.
+    //
+    // Note: In this case, ia-button is visible immediately so it's not a great
+    // example, but it demonstrates the lazy loading pattern.
+    get startButtonTemplate() {
+        return lazyLoadTemplate(async () => {
+            await import('../../elements/ia-button/ia-button');
+        }, () => html `
+        <ia-button
+          @click=${() => {
             if (this.snowing) {
                 this.stopSnowing();
             }
@@ -22,32 +45,29 @@ let IASnow = class IASnow extends LitElement {
                 this.startSnowing();
             }
         }}
-      >
-        ${this.snowing ? 'Stop Snowflakes' : 'Start Snowflakes'}
-      </ia-button>
-
-      <ia-button
-        @click=${() => {
-            this.stopSnowing();
-            this.snowflakes?.destroy();
-            this.snowflakes = undefined;
-        }}
-      >
-        Clear Snowflakes
-      </ia-button>
-
-      <img src=${videoIcon} alt="Snowflakes icon" />
-    `;
+        >
+          ${this.snowing ? 'Stop Snowflakes' : 'Start Snowflakes'}
+        </ia-button>
+      `);
     }
-    willUpdate(_changedProperties) {
-        if (_changedProperties.has('snowConfig')) {
+    get clearButtonTemplate() {
+        return lazyLoadTemplate(async () => {
+            await import('../../elements/ia-button/ia-button');
+        }, () => html `
+        <ia-button
+          @click=${() => {
             this.snowflakes?.destroy();
-            this.snowflakes = undefined;
-            this.startSnowing();
-        }
+        }}
+        >
+          Clear Snowflakes
+        </ia-button>
+      `);
     }
-    startSnowing() {
+    async startSnowing() {
         if (!this.snowflakes) {
+            // lazy load dependencies when possible to reduce initial bundle size
+            const SnowflakesModule = await import('magic-snowflakes');
+            const Snowflakes = SnowflakesModule.default;
             this.snowflakes = new Snowflakes(this.snowConfig);
         }
         this.snowflakes?.start();
@@ -61,6 +81,8 @@ let IASnow = class IASnow extends LitElement {
         return css `
       img {
         width: 16px;
+        filter: invert(1);
+        vertical-align: middle;
       }
     `;
     }

package/dist/src/labs/ia-snow/ia-snow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-snow.js","sourceRoot":"","sources":["../../../../src/labs/ia-snow/ia-snow.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAA4C,MAAM,KAAK,CAAC;AACtF,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,UAAqC,MAAM,kBAAkB,CAAC;AAErE,OAAO,mCAAmC,CAAC;AAE3C,OAAO,SAAS,MAAM,aAAa,CAAC;AAG7B,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAIG,YAAO,GAAG,KAAK,CAAC;IA4D1B,CAAC;IAxDC,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,GAAG,EAAE;YACZ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC;QACH,CAAC;;UAEC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB;;;;iBAI9C,GAAG,EAAE;YACZ,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAC9B,CAAC;;;;;iBAKQ,SAAS;KACrB,CAAC;IACJ,CAAC;IAES,UAAU,CAAC,kBAAkC;QACrD,IAAI,kBAAkB,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YACzC,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;YAC5B,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,UAAU,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACpD,CAAC;QACD,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;KAIT,CAAC;IACJ,CAAC;CACF,CAAA;AA/D6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA+B;AAGlD;IADP,KAAK,EAAE;uCACgB;AAJb,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAgElB","sourcesContent":["import { css, html, LitElement, type CSSResultGroup, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { state } from 'lit/decorators/state.js';\n\nimport Snowflakes, { type SnowflakesParams } from 'magic-snowflakes';\n\nimport '@src/elements/ia-button/ia-button';\n\nimport videoIcon from './video.svg';\n\n@customElement('ia-snow')\nexport class IASnow extends LitElement {\n  @property({ type: Object }) snowConfig?: SnowflakesParams;\n\n  @state()\n  private snowing = false;\n\n  private snowflakes?: Snowflakes;\n\n  render() {\n    return html`\n      <ia-button\n        @click=${() => {\n          if (this.snowing) {\n            this.stopSnowing();\n          } else {\n            this.startSnowing();\n          }\n        }}\n      >\n        ${this.snowing ? 'Stop Snowflakes' : 'Start Snowflakes'}\n      </ia-button>\n\n      <ia-button\n        @click=${() => {\n          this.stopSnowing();\n          this.snowflakes?.destroy();\n          this.snowflakes = undefined;\n        }}\n      >\n        Clear Snowflakes\n      </ia-button>\n\n      <img src=${videoIcon} alt=\"Snowflakes icon\" />\n    `;\n  }\n\n  protected willUpdate(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('snowConfig')) {\n      this.snowflakes?.destroy();\n      this.snowflakes = undefined;\n      this.startSnowing();\n    }\n  }\n\n  private startSnowing() {\n    if (!this.snowflakes) {\n      this.snowflakes = new Snowflakes(this.snowConfig);\n    }\n    this.snowflakes?.start();\n    this.snowing = true;\n  }\n\n  private stopSnowing() {\n    this.snowflakes?.stop();\n    this.snowing = false;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      img {\n        width: 16px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ia-snow.js","sourceRoot":"","sources":["../../../../src/labs/ia-snow/ia-snow.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,GAGX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAKhD,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,EACL,gBAAgB,GAEjB,MAAM,8BAA8B,CAAC;AAEtC;;GAEG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAIG,YAAO,GAAG,KAAK,CAAC;IAwF1B,CAAC;IApFC,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,mBAAmB;iBAC3C,SAAS;KACrB,CAAC;IACJ,CAAC;IAES,UAAU,CAAC,kBAAkC;QACrD,IAAI,kBAAkB,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YACzC,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;YAC5B,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED,8DAA8D;IAC9D,yEAAyE;IACzE,eAAe;IACf,EAAE;IACF,2EAA2E;IAC3E,yDAAyD;IACzD,IAAY,mBAAmB;QAC7B,OAAO,gBAAgB,CACrB,KAAK,IAAI,EAAE;YACT,MAAM,MAAM,CAAC,mCAAmC,CAAC,CAAC;QACpD,CAAC,EACD,GAAG,EAAE,CAAC,IAAI,CAAA;;mBAEG,GAAG,EAAE;YACZ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC;QACH,CAAC;;YAEC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB;;OAE1D,CACF,CAAC;IACJ,CAAC;IAED,IAAY,mBAAmB;QAC7B,OAAO,gBAAgB,CACrB,KAAK,IAAI,EAAE;YACT,MAAM,MAAM,CAAC,mCAAmC,CAAC,CAAC;QACpD,CAAC,EACD,GAAG,EAAE,CAAC,IAAI,CAAA;;mBAEG,GAAG,EAAE;YACZ,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC;QAC7B,CAAC;;;;OAIJ,CACF,CAAC;IACJ,CAAC;IAEO,KAAK,CAAC,YAAY;QACxB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,qEAAqE;YACrE,MAAM,gBAAgB,GAAG,MAAM,MAAM,CAAC,kBAAkB,CAAC,CAAC;YAC1D,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;YAC5C,IAAI,CAAC,UAAU,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACpD,CAAC;QACD,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;KAMT,CAAC;IACJ,CAAC;CACF,CAAA;AA3F6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA+B;AAGlD;IADP,KAAK,EAAE;uCACgB;AAJb,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA4FlB","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  type CSSResultGroup,\n  type PropertyValues,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { state } from 'lit/decorators/state.js';\n\nimport type Snowflakes from 'magic-snowflakes';\nimport type { SnowflakesParams } from 'magic-snowflakes';\n\nimport flakeIcon from './flake.svg';\nimport {\n  lazyLoadTemplate,\n  type LazyLoadedTemplate,\n} from '@src/util/lazy-load-template';\n\n/**\n * An element that shows snowflakes to demo the elements library\n */\n@customElement('ia-snow')\nexport class IASnow extends LitElement {\n  @property({ type: Object }) snowConfig?: SnowflakesParams;\n\n  @state()\n  private snowing = false;\n\n  private snowflakes?: Snowflakes;\n\n  render() {\n    return html`\n      ${this.startButtonTemplate} ${this.clearButtonTemplate}\n      <img src=${flakeIcon} alt=\"Snowflakes icon\" />\n    `;\n  }\n\n  protected willUpdate(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('snowConfig')) {\n      this.snowflakes?.destroy();\n      this.snowflakes = undefined;\n      this.startSnowing();\n    }\n  }\n\n  // Consider lazy loading external templates if they are large,\n  // below the fold or not needed immediately. This will reduce the initial\n  // bundle size.\n  //\n  // Note: In this case, ia-button is visible immediately so it's not a great\n  // example, but it demonstrates the lazy loading pattern.\n  private get startButtonTemplate(): LazyLoadedTemplate {\n    return lazyLoadTemplate(\n      async () => {\n        await import('@src/elements/ia-button/ia-button');\n      },\n      () => html`\n        <ia-button\n          @click=${() => {\n            if (this.snowing) {\n              this.stopSnowing();\n            } else {\n              this.startSnowing();\n            }\n          }}\n        >\n          ${this.snowing ? 'Stop Snowflakes' : 'Start Snowflakes'}\n        </ia-button>\n      `,\n    );\n  }\n\n  private get clearButtonTemplate(): LazyLoadedTemplate {\n    return lazyLoadTemplate(\n      async () => {\n        await import('@src/elements/ia-button/ia-button');\n      },\n      () => html`\n        <ia-button\n          @click=${() => {\n            this.snowflakes?.destroy();\n          }}\n        >\n          Clear Snowflakes\n        </ia-button>\n      `,\n    );\n  }\n\n  private async startSnowing() {\n    if (!this.snowflakes) {\n      // lazy load dependencies when possible to reduce initial bundle size\n      const SnowflakesModule = await import('magic-snowflakes');\n      const Snowflakes = SnowflakesModule.default;\n      this.snowflakes = new Snowflakes(this.snowConfig);\n    }\n    this.snowflakes?.start();\n    this.snowing = true;\n  }\n\n  private stopSnowing() {\n    this.snowflakes?.stop();\n    this.snowing = false;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      img {\n        width: 16px;\n        filter: invert(1);\n        vertical-align: middle;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/themes/theme-styles.d.ts

@@ -0,0 +1,3 @@
+declare const themeStyles: import("lit").CSSResult;
+export default themeStyles;
+//# sourceMappingURL=theme-styles.d.ts.map

package/dist/src/themes/theme-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-styles.d.ts","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,yBA+DhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/src/themes/theme-styles.js

@@ -0,0 +1,67 @@
+import { css } from 'lit';
+const themeStyles = css `
+  :host {
+    /*
+    BASE STYLES
+    Default fallback values for theme styles. Assumes 16px root font size.
+    To adjust values, use theme styles below.
+    */
+
+    /* Typography */
+    --default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+    /* Sizing */
+    --default-icon-width: 1.25rem;
+
+    /* Colors */
+    --true-white: #fff;
+    --off-white: #fbfbfd;
+    --dark-gray: #2c2c2c;
+    --light-gray: #666;
+    --classic-red: #e51c23;
+    --mint-green: #31a481;
+    --navy-blue: #194880;
+    --bright-blue: #4b64ff;
+
+    /*
+    ADJUSTABLE STYLES
+    To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.
+    */
+
+    /* Text */
+    --base-font-family: var(
+      --ia-theme-base-font-family,
+      var(--default-font-family)
+    );
+    --primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));
+    --secondary-text-color: var(
+      --ia-theme-secondary-text-color,
+      var(--light-gray)
+    );
+    --link-color: var(--ia-theme-link-color, var(--bright-blue));
+
+    /* Sizing */
+    --icon-width: var(--ia-theme-icon-width, var(--default-icon-width));
+
+    /* Backgrounds and fills */
+    --primary-background-color: var(
+      --ia-theme-primary-background-color,
+      var(--off-white)
+    );
+    --secondary-background-color: var(
+      --ia-theme-secondary-background-color,
+      var(--true-white)
+    );
+
+    /* State colors */
+    --primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));
+    --primary-cta-text-color: var(
+      --ia-theme-primary-cta-text-color,
+      var(--true-white)
+    );
+    --color-success: var(--ia-theme-color-success, var(--mint-green));
+    --color-danger: var(--ia-theme-color-danger, var(--classic-red));
+  }
+`;
+export default themeStyles;
+//# sourceMappingURL=theme-styles.js.map

package/dist/src/themes/theme-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-styles.js","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DtB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst themeStyles = css`\n  :host {\n    /*\n    BASE STYLES\n    Default fallback values for theme styles. Assumes 16px root font size.\n    To adjust values, use theme styles below.\n    */\n\n    /* Typography */\n    --default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\n    /* Sizing */\n    --default-icon-width: 1.25rem;\n\n    /* Colors */\n    --true-white: #fff;\n    --off-white: #fbfbfd;\n    --dark-gray: #2c2c2c;\n    --light-gray: #666;\n    --classic-red: #e51c23;\n    --mint-green: #31a481;\n    --navy-blue: #194880;\n    --bright-blue: #4b64ff;\n\n    /*\n    ADJUSTABLE STYLES\n    To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.\n    */\n\n    /* Text */\n    --base-font-family: var(\n      --ia-theme-base-font-family,\n      var(--default-font-family)\n    );\n    --primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));\n    --secondary-text-color: var(\n      --ia-theme-secondary-text-color,\n      var(--light-gray)\n    );\n    --link-color: var(--ia-theme-link-color, var(--bright-blue));\n\n    /* Sizing */\n    --icon-width: var(--ia-theme-icon-width, var(--default-icon-width));\n\n    /* Backgrounds and fills */\n    --primary-background-color: var(\n      --ia-theme-primary-background-color,\n      var(--off-white)\n    );\n    --secondary-background-color: var(\n      --ia-theme-secondary-background-color,\n      var(--true-white)\n    );\n\n    /* State colors */\n    --primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));\n    --primary-cta-text-color: var(\n      --ia-theme-primary-cta-text-color,\n      var(--true-white)\n    );\n    --color-success: var(--ia-theme-color-success, var(--mint-green));\n    --color-danger: var(--ia-theme-color-danger, var(--classic-red));\n  }\n`;\n\nexport default themeStyles;\n"]}

package/dist/src/util/lazy-load-template.d.ts

@@ -0,0 +1,51 @@
+import type { TemplateResult } from 'lit';
+import { Directive, DirectiveParameters, DirectiveResult, Part, PartInfo } from 'lit/directive.js';
+/**
+ * A LazyLoadedTemplate is a wrapper for a TemplateResult
+ * lazy-loaded with the `lazyLoadTemplate` function.
+ *
+ * It can be used in an html`` block, eg.
+ *
+ * html`
+ *   ${this.radioPlayerTemplate}  <-- see `radioPlayerTemplate` example below
+ * `
+ */
+export type LazyLoadedTemplate = DirectiveResult<typeof LazyLoadTemplate>;
+/**
+ * This utility let's you asynchronously load a webcomponent.
+ *
+ * Derived from an example shown in:
+ * https://www.youtube.com/watch?v=x9YDQUJx2uw
+ *
+ * Example use:
+ *
+ * get radioPlayerTemplate(): LazyLoadedTemplate {
+ *   return lazyLoadTemplate(
+ *     async (): Promise<void> => {
+ *       await import('./players/radio-player');
+ *     },
+ *     (): TemplateResult => {
+ *       return html`
+ *         <radio-player
+ *           .metadataResponse=${this.metadataResponse}
+ *           .browserHistoryHandler=${this.browserHistoryHandler}
+ *         >
+ *         </radio-player>
+ *       `;
+ *     },
+ *   );
+ * }
+ *
+ * ...
+ *
+ * return html`
+ *   ${this.radioPlayerTemplate}
+ * `
+ */
+export declare class LazyLoadTemplate extends Directive {
+    constructor(partInfo: PartInfo);
+    update(part: Part, [importPromise, value]: DirectiveParameters<this>): TemplateResult;
+    render(_importPromise: () => Promise<void>, value: () => TemplateResult): TemplateResult;
+}
+export declare const lazyLoadTemplate: (_importPromise: () => Promise<void>, value: () => TemplateResult) => DirectiveResult<typeof LazyLoadTemplate>;
+//# sourceMappingURL=lazy-load-template.d.ts.map

package/dist/src/util/lazy-load-template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-load-template.d.ts","sourceRoot":"","sources":["../../../src/util/lazy-load-template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,EACL,SAAS,EAET,mBAAmB,EACnB,eAAe,EACf,IAAI,EACJ,QAAQ,EACT,MAAM,kBAAkB,CAAC;AAI1B;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBAAa,gBAAiB,SAAQ,SAAS;gBACjC,QAAQ,EAAE,QAAQ;IAI9B,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,EAAE,mBAAmB,CAAC,IAAI,CAAC;IAQpE,MAAM,CAAC,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,cAAc;CAGxE;AAED,eAAO,MAAM,gBAAgB,yBALE,OAAO,CAAC,IAAI,CAAC,eAAe,cAAc,6CAKd,CAAC"}

package/dist/src/util/lazy-load-template.js

@@ -0,0 +1,50 @@
+import { Directive, directive, } from 'lit/directive.js';
+const resolved = new WeakSet();
+/**
+ * This utility let's you asynchronously load a webcomponent.
+ *
+ * Derived from an example shown in:
+ * https://www.youtube.com/watch?v=x9YDQUJx2uw
+ *
+ * Example use:
+ *
+ * get radioPlayerTemplate(): LazyLoadedTemplate {
+ *   return lazyLoadTemplate(
+ *     async (): Promise<void> => {
+ *       await import('./players/radio-player');
+ *     },
+ *     (): TemplateResult => {
+ *       return html`
+ *         <radio-player
+ *           .metadataResponse=${this.metadataResponse}
+ *           .browserHistoryHandler=${this.browserHistoryHandler}
+ *         >
+ *         </radio-player>
+ *       `;
+ *     },
+ *   );
+ * }
+ *
+ * ...
+ *
+ * return html`
+ *   ${this.radioPlayerTemplate}
+ * `
+ */
+export class LazyLoadTemplate extends Directive {
+    constructor(partInfo) {
+        super(partInfo);
+    }
+    update(part, [importPromise, value]) {
+        if (!resolved.has(part)) {
+            importPromise();
+            resolved.add(part);
+        }
+        return this.render(importPromise, value);
+    }
+    render(_importPromise, value) {
+        return value();
+    }
+}
+export const lazyLoadTemplate = directive(LazyLoadTemplate);
+//# sourceMappingURL=lazy-load-template.js.map

package/dist/src/util/lazy-load-template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-load-template.js","sourceRoot":"","sources":["../../../src/util/lazy-load-template.ts"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EACT,SAAS,GAKV,MAAM,kBAAkB,CAAC;AAE1B,MAAM,QAAQ,GAAG,IAAI,OAAO,EAAE,CAAC;AAc/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,OAAO,gBAAiB,SAAQ,SAAS;IAC7C,YAAY,QAAkB;QAC5B,KAAK,CAAC,QAAQ,CAAC,CAAC;IAClB,CAAC;IAED,MAAM,CAAC,IAAU,EAAE,CAAC,aAAa,EAAE,KAAK,CAA4B;QAClE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;YACxB,aAAa,EAAE,CAAC;YAChB,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC;QACD,OAAO,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,MAAM,CAAC,cAAmC,EAAE,KAA2B;QACrE,OAAO,KAAK,EAAE,CAAC;IACjB,CAAC;CACF;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import type { TemplateResult } from 'lit';\nimport {\n  Directive,\n  directive,\n  DirectiveParameters,\n  DirectiveResult,\n  Part,\n  PartInfo,\n} from 'lit/directive.js';\n\nconst resolved = new WeakSet();\n\n/**\n * A LazyLoadedTemplate is a wrapper for a TemplateResult\n * lazy-loaded with the `lazyLoadTemplate` function.\n *\n * It can be used in an html`` block, eg.\n *\n * html`\n *   ${this.radioPlayerTemplate}  <-- see `radioPlayerTemplate` example below\n * `\n */\nexport type LazyLoadedTemplate = DirectiveResult<typeof LazyLoadTemplate>;\n\n/**\n * This utility let's you asynchronously load a webcomponent.\n *\n * Derived from an example shown in:\n * https://www.youtube.com/watch?v=x9YDQUJx2uw\n *\n * Example use:\n *\n * get radioPlayerTemplate(): LazyLoadedTemplate {\n *   return lazyLoadTemplate(\n *     async (): Promise<void> => {\n *       await import('./players/radio-player');\n *     },\n *     (): TemplateResult => {\n *       return html`\n *         <radio-player\n *           .metadataResponse=${this.metadataResponse}\n *           .browserHistoryHandler=${this.browserHistoryHandler}\n *         >\n *         </radio-player>\n *       `;\n *     },\n *   );\n * }\n *\n * ...\n *\n * return html`\n *   ${this.radioPlayerTemplate}\n * `\n */\nexport class LazyLoadTemplate extends Directive {\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n  }\n\n  update(part: Part, [importPromise, value]: DirectiveParameters<this>) {\n    if (!resolved.has(part)) {\n      importPromise();\n      resolved.add(part);\n    }\n    return this.render(importPromise, value);\n  }\n\n  render(_importPromise: () => Promise<void>, value: () => TemplateResult) {\n    return value();\n  }\n}\n\nexport const lazyLoadTemplate = directive(LazyLoadTemplate);\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/elements",
-  "version": "0.0.1-alpha.9",
+  "version": "0.0.2-webdev-8133.0",
   "description": "A web component library from the Internet Archive.",
   "license": "AGPL-3.0-only",
   "types": "./dist/src/elements/index.d.ts",
@@ -26,6 +26,7 @@
     "test": "wireit"
   },
   "dependencies": {
+    "@lit/localize": "^0.12.2",
     "lit": "^3.3.1",
     "magic-snowflakes": "^7.0.2",
     "tslib": "^2.8.1"

package/dist/src/labs/ia-snow/video.svg

@@ -1,6 +0,0 @@
-<svg viewBox="0 0 300 300"
-  xmlns="http://www.w3.org/2000/svg">
-<path d="m272 280h-9.268431c.276116-.74734.440961-1.53597.440961-2.365889v-6.775607c0-3.831666-3.082608-6.920121-6.882294-6.920121h-12.701336c-3.795565 0-6.882294 3.100842-6.882294 6.920121v6.775607c0 .829919.164845 1.626807.432719 2.365889h-172.3623223c.2678738-.74734.4368403-1.53597.4368403-2.365889v-6.775607c0-3.831666-3.0826085-6.920121-6.8864155-6.920121h-12.6930937c-3.803807 0-6.8905366 3.100842-6.8905366 6.920121v6.775607c0 .829919.1689665 1.626807.4368402 2.365889h-11.1806374v-260h11.1806374c-.2678737.74734-.4368402 1.5359695-.4368402 2.3700175v6.7673495c0 3.8399238 3.0826085 6.9242496 6.8905366 6.9242496h12.6930937c3.7955647 0 6.8864155-3.0967127 6.8864155-6.9242496v-6.7673495c0-.8381769-.1689665-1.6309354-.4368403-2.3700175h172.3664433c-.271995.74734-.43684 1.5359695-.43684 2.3700175v6.7673495c0 3.8399238 3.078487 6.9242496 6.882294 6.9242496h12.701336c3.795565 0 6.882294-3.0967127 6.882294-6.9242496v-6.7673495c0-.8381769-.164845-1.6309354-.43684-2.3700175h9.26431zm-206.786157-222.1333969c0-3.8357948-3.0826085-6.9242496-6.8864155-6.9242496h-12.6930937c-3.803807 0-6.8905366 3.1008417-6.8905366 6.9242496v6.7714785c0 3.8399238 3.0826085 6.9283786 6.8905366 6.9283786h12.6930937c3.7955647 0 6.8864155-3.1008417 6.8864155-6.9283786zm0 35.5007147c0-3.8357949-3.0826085-6.9242497-6.8864155-6.9242497h-12.6930937c-3.803807 0-6.8905366 3.1008417-6.8905366 6.9242497v6.7714782c0 3.835795 3.0826085 6.920121 6.8905366 6.920121h12.6930937c3.7955647 0 6.8864155-3.096713 6.8864155-6.920121zm0 35.4965852c0-3.839923-3.0826085-6.924249-6.8864155-6.924249h-12.6930937c-3.803807 0-6.8905366 3.100841-6.8905366 6.924249v6.771479c0 3.839924 3.0826085 6.92425 6.8905366 6.92425h12.6930937c3.7955647 0 6.8864155-3.100842 6.8864155-6.92425zm0 35.500715c0-3.839924-3.0826085-6.92425-6.8864155-6.92425h-12.6930937c-3.803807 0-6.8905366 3.096713-6.8905366 6.92425v6.771479c0 3.839923 3.0826085 6.928378 6.8905366 6.928378h12.6930937c3.7955647 0 6.8864155-3.10497 6.8864155-6.928378zm0 35.496586c0-3.827537-3.0826085-6.92425-6.8864155-6.92425h-12.6930937c-3.803807 0-6.8905366 3.104971-6.8905366 6.92425v6.771478c0 3.839924 3.0826085 6.928379 6.8905366 6.928379h12.6930937c3.7955647 0 6.8864155-3.104971 6.8864155-6.928379zm0 35.500714c0-3.835794-3.0826085-6.924249-6.8864155-6.924249h-12.6930937c-3.803807 0-6.8905366 3.10497-6.8905366 6.924249v6.771479c0 3.835795 3.0826085 6.928378 6.8905366 6.928378h12.6930937c3.7955647 0 6.8864155-3.10497 6.8864155-6.928378zm155.247251-186.2734632c0-5.8672383-4.805242-10.6692075-10.673738-10.6692075h-119.5788334c-5.8684952 0-10.6737379 4.8019692-10.6737379 10.6692075v74.7009692c0 5.867238 4.8052427 10.665078 10.6737379 10.665078h119.5788334c5.868496 0 10.673738-4.79784 10.673738-10.665078zm.366781 121.3663652c0-5.90027-4.83409-10.727013-10.731434-10.727013h-120.1970034c-5.8973433 0-10.7273127 4.826743-10.7273127 10.727013v75.084961c0 5.896141 4.8299694 10.718755 10.7273127 10.718755h120.1970034c5.897344 0 10.731434-4.822614 10.731434-10.718755zm42.344655-112.5882169c0-3.8357948-3.082608-6.9242496-6.882294-6.9242496h-12.701336c-3.795565 0-6.882294 3.1008417-6.882294 6.9242496v6.7714785c0 3.8399238 3.078487 6.9283786 6.882294 6.9283786h12.701336c3.795565 0 6.882294-3.1008417 6.882294-6.9283786zm0 35.5007147c0-3.8357949-3.082608-6.9242497-6.882294-6.9242497h-12.701336c-3.795565 0-6.882294 3.1008417-6.882294 6.9242497v6.7714782c0 3.835795 3.078487 6.920121 6.882294 6.920121h12.701336c3.795565 0 6.882294-3.096713 6.882294-6.920121zm0 35.4965852c0-3.839923-3.082608-6.924249-6.882294-6.924249h-12.701336c-3.795565 0-6.882294 3.100841-6.882294 6.924249v6.771479c0 3.839924 3.078487 6.92425 6.882294 6.92425h12.701336c3.795565 0 6.882294-3.100842 6.882294-6.92425zm0 35.500715c0-3.839924-3.082608-6.92425-6.882294-6.92425h-12.701336c-3.795565 0-6.882294 3.096713-6.882294 6.92425v6.771479c0 3.839923 3.078487 6.928378 6.882294 6.928378h12.701336c3.795565 0 6.882294-3.10497 6.882294-6.928378zm0 35.496586c0-3.827537-3.082608-6.92425-6.882294-6.92425h-12.701336c-3.795565 0-6.882294 3.104971-6.882294 6.92425v6.771478c0 3.839924 3.078487 6.928379 6.882294 6.928379h12.701336c3.795565 0 6.882294-3.104971 6.882294-6.928379zm0 35.500714c0-3.835794-3.082608-6.924249-6.882294-6.924249h-12.701336c-3.795565 0-6.882294 3.10497-6.882294 6.924249v6.771479c0 3.835795 3.078487 6.928378 6.882294 6.928378h12.701336c3.795565 0 6.882294-3.10497 6.882294-6.928378z" fill="black" fill-rule="evenodd" transform="matrix(1 0 0 -1 0 300)"/>
-
-
-</svg>