@internetarchive/elements 0.2.3-alpha-webdev8378.2 → 0.2.3

package/dist/src/elements/ia-combo-box/caret-closed.svg

@@ -1,8 +1,8 @@
-<svg
-  viewBox="0 0 8 4"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="m6.7226499.58397485c.22976435-.15317623.54019902-.09108929.69337525.13867505.13615665.20423498.10222882.47220947-.06836249.63681849l-.07031256.05655676-3.2773501 2.18490006-3.2773501-2.18490006c-.22976434-.15317623-.29185128-.4636109-.13867505-.69337525.13615665-.20423497.39656688-.27598409.61412572-.18182636l.07924953.04315131 2.7226499 1.81402515z"
-  ></path>
-</svg>
+<svg
+  viewBox="0 0 8 4"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="m6.7226499.58397485c.22976435-.15317623.54019902-.09108929.69337525.13867505.13615665.20423498.10222882.47220947-.06836249.63681849l-.07031256.05655676-3.2773501 2.18490006-3.2773501-2.18490006c-.22976434-.15317623-.29185128-.4636109-.13867505-.69337525.13615665-.20423497.39656688-.27598409.61412572-.18182636l.07924953.04315131 2.7226499 1.81402515z"
+  ></path>
+</svg>

package/dist/src/elements/ia-combo-box/caret-open.svg

@@ -1,8 +1,8 @@
-<svg
-  viewBox="0 0 8 4"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="m6.7226499 3.51689722c.22976435.15317623.54019902.0910893.69337525-.13867505.13615665-.20423497.10222882-.47220946-.06836249-.63681849l-.07031256-.05655675-3.2773501-2.18490007-3.2773501 2.18490007c-.22976434.15317623-.29185128.4636109-.13867505.69337524.13615665.20423498.39656688.27598409.61412572.18182636l.07924953-.04315131 2.7226499-1.81402514z"
-  ></path>
-</svg>
+<svg
+  viewBox="0 0 8 4"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="m6.7226499 3.51689722c.22976435.15317623.54019902.0910893.69337525-.13867505.13615665-.20423497.10222882-.47220946-.06836249-.63681849l-.07031256-.05655675-3.2773501-2.18490007-3.2773501 2.18490007c-.22976434.15317623-.29185128.4636109-.13867505.69337524.13615665.20423498.39656688.27598409.61412572.18182636l.07924953-.04315131 2.7226499-1.81402514z"
+  ></path>
+</svg>

package/dist/src/elements/ia-combo-box/clear.svg

@@ -1,9 +1,9 @@
-<svg
-  viewBox="0 0 100 100"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="m50 0c27.6142375 0 50 22.3857625 50 50s-22.3857625 50-50 50-50-22.3857625-50-50 22.3857625-50 50-50zm23.8159475 26.1840525c-1.4033215-1.4033215-3.5816761-1.5592461-5.1572272-.4677738l-.5598841.4677738-18.0988362 18.0989475-18.0988362-18.0989475-.5598841-.4677738c-1.5755511-1.0914723-3.7539057-.9355477-5.1572272.4677738-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113l18.0989475 18.0988362-18.0989475 18.0988362c-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113 1.4033215 1.4033215 3.5816761 1.5592461 5.1572272.4677738l.5598841-.4677738 18.0988362-18.0989475 18.0988362 18.0989475.5598841.4677738c1.5755511 1.0914723 3.7539057.9355477 5.1572272-.4677738 1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113l-18.0989475-18.0988362 18.0989475-18.0988362c1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113z"
-    fill-rule="evenodd"
-  ></path>
+<svg
+  viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="m50 0c27.6142375 0 50 22.3857625 50 50s-22.3857625 50-50 50-50-22.3857625-50-50 22.3857625-50 50-50zm23.8159475 26.1840525c-1.4033215-1.4033215-3.5816761-1.5592461-5.1572272-.4677738l-.5598841.4677738-18.0988362 18.0989475-18.0988362-18.0989475-.5598841-.4677738c-1.5755511-1.0914723-3.7539057-.9355477-5.1572272.4677738-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113l18.0989475 18.0988362-18.0989475 18.0988362c-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113 1.4033215 1.4033215 3.5816761 1.5592461 5.1572272.4677738l.5598841-.4677738 18.0988362-18.0989475 18.0988362 18.0989475.5598841.4677738c1.5755511 1.0914723 3.7539057.9355477 5.1572272-.4677738 1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113l-18.0989475-18.0988362 18.0989475-18.0988362c1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113z"
+    fill-rule="evenodd"
+  ></path>
 </svg>

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

@@ -28,25 +28,25 @@ let IAOTPForm = class IAOTPForm extends LitElement {
         this.numericOnly = true;
     }
     render() {
-        return html `
-      <div class="input-section">
-        <ia-otp-input
-          .numChars=${this.numPasscodeChars}
-          ?numericOnly=${this.numericOnly}
+        return html `
+      <div class="input-section">
+        <ia-otp-input
+          .numChars=${this.numPasscodeChars}
+          ?numericOnly=${this.numericOnly}
           ?disabled=${this.validationStatus === 'loading' ||
-            this.validationStatus === 'success'}
-        ></ia-otp-input>
-        <ia-status-indicator
-          part="status-indicator"
-          .mode=${this.validationStatus}
-        ></ia-status-indicator>
-      </div>
+            this.validationStatus === 'success'}
+        ></ia-otp-input>
+        <ia-status-indicator
+          part="status-indicator"
+          .mode=${this.validationStatus}
+        ></ia-status-indicator>
+      </div>
       ${this.validationStatus === 'error'
-            ? html `<p class="error-msg">
-            ${msg('The code entered is invalid or expired')}
+            ? html `<p class="error-msg">
+            ${msg('The code entered is invalid or expired')}
           </p>`
-            : nothing}
-      ${this.resendCodeButtonTemplate}
+            : nothing}
+      ${this.resendCodeButtonTemplate}
     `;
     }
     willUpdate(changed) {
@@ -62,19 +62,19 @@ let IAOTPForm = class IAOTPForm extends LitElement {
     /* The button to display to send a new code */
     get resendCodeButtonTemplate() {
         return this.newCodeSending
-            ? html `<span part="new-code-message" class="new-code-msg"
-          >${msg('Emailing...')}</span
+            ? html `<span part="new-code-message" class="new-code-msg"
+          >${msg('Emailing...')}</span
         >`
-            : html `
-          <button
-            class="new-code-btn link"
-            part="new-code-button"
+            : html `
+          <button
+            class="new-code-btn link"
+            part="new-code-button"
             .disabled=${this.validationStatus === 'loading' ||
-                this.validationStatus === 'success'}
-            @click=${this.handleNewCodeRequested}
-          >
-            ${msg('Email me another code')}
-          </button>
+                this.validationStatus === 'success'}
+            @click=${this.handleNewCodeRequested}
+          >
+            ${msg('Email me another code')}
+          </button>
         `;
     }
     /* Emits an event to request the new code */
@@ -88,67 +88,67 @@ let IAOTPForm = class IAOTPForm extends LitElement {
     static get styles() {
         return [
             themeStyles,
-            css `
-        :host {
-          --font-size-standard--: var(--font-size-standard);
-          --font-size-lg--: var(--font-size-lg);
-          --color-success--: var(--color-success);
-          --color-danger--: var(--color-danger);
-          --link-color--: var(--link-color);
-
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-        }
-
-        .input-section {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          justify-content: center;
-          gap: 5px;
-        }
-
-        ia-status-indicator {
-          --icon-width: calc(var(--font-size-lg--) * 1.33);
-        }
-
-        .error-msg {
-          margin-top: 10px;
-          font-size: var(--font-size-standard--);
-          color: var(--color-danger--);
-          margin-bottom: -10px;
-        }
-
-        .new-code-btn {
-          font-family: inherit;
-          font-size: var(--font-size-standard--);
-          display: block;
-          width: fit-content;
-          margin-top: 10px;
-          border: 0;
-          padding: 0;
-          appearance: none;
-          background: none;
-          color: var(--link-color--);
-          text-decoration: none;
-          cursor: pointer;
-        }
-
-        .new-code-btn:hover,
-        .new-code-btn:focus {
-          text-decoration: underline;
-        }
-
-        .new-code-msg {
-          margin-top: 10px;
-          font-size: var(--font-size-standard--);
-          color: var(--link-color--);
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-        }
+            css `
+        :host {
+          --font-size-standard--: var(--font-size-standard);
+          --font-size-lg--: var(--font-size-lg);
+          --color-success--: var(--color-success);
+          --color-danger--: var(--color-danger);
+          --link-color--: var(--link-color);
+
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .input-section {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          gap: 5px;
+        }
+
+        ia-status-indicator {
+          --icon-width: calc(var(--font-size-lg--) * 1.33);
+        }
+
+        .error-msg {
+          margin-top: 10px;
+          font-size: var(--font-size-standard--);
+          color: var(--color-danger--);
+          margin-bottom: -10px;
+        }
+
+        .new-code-btn {
+          font-family: inherit;
+          font-size: var(--font-size-standard--);
+          display: block;
+          width: fit-content;
+          margin-top: 10px;
+          border: 0;
+          padding: 0;
+          appearance: none;
+          background: none;
+          color: var(--link-color--);
+          text-decoration: none;
+          cursor: pointer;
+        }
+
+        .new-code-btn:hover,
+        .new-code-btn:focus {
+          text-decoration: underline;
+        }
+
+        .new-code-msg {
+          margin-top: 10px;
+          font-size: var(--font-size-standard--);
+          color: var(--link-color--);
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
       `,
         ];
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ia-otp-form.js","sourceRoot":"","sources":["../../../../src/elements/ia-otp-form/ia-otp-form.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,IAAI,EACJ,UAAU,EAGV,GAAG,EACH,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAKnD,OAAO,uDAAuD,CAAC;AAC/D,OAAO,yCAAyC,CAAC;AAEjD;;GAEG;AACH,MAAM,MAAM,GAAG;IACb,gBAAgB,EAAE,kBAAkB;IACpC,aAAa,EAAE,eAAe,EAAE,+BAA+B;CAChE,CAAC;AAEF;;GAEG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACL,yCAAyC;QAEzC,qBAAgB,GAAkB,OAAO,CAAC;QAE1C,uEAAuE;QAEvE,mBAAc,GAAY,KAAK,CAAC;QAEhC,qDAAqD;QAErD,qBAAgB,GAAW,CAAC,CAAC;QAE7B,qDAAqD;QAErD,gBAAW,GAAY,IAAI,CAAC;IA2I9B,CAAC;IAtIC,MAAM;QACJ,OAAO,IAAI,CAAA;;;sBAGO,IAAI,CAAC,gBAAgB;yBAClB,IAAI,CAAC,WAAW;sBACnB,IAAI,CAAC,gBAAgB,KAAK,SAAS;YAC/C,IAAI,CAAC,gBAAgB,KAAK,SAAS;;;;kBAI3B,IAAI,CAAC,gBAAgB;;;QAG/B,IAAI,CAAC,gBAAgB,KAAK,OAAO;YACjC,CAAC,CAAC,IAAI,CAAA;cACA,GAAG,CAAC,wCAAwC,CAAC;eAC5C;YACP,CAAC,CAAC,OAAO;QACT,IAAI,CAAC,wBAAwB;KAChC,CAAC;IACJ,CAAC;IAES,UAAU,CAAC,OAAuB;QAC1C,IACE,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC;YAC/B,IAAI,CAAC,QAAQ;YACb,IAAI,CAAC,gBAAgB,KAAK,OAAO,EACjC,CAAC;YACD,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,EAAE,CAAC;QAClC,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC1E,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,EAAE,CAAC;QAClC,CAAC;IACH,CAAC;IAED,8CAA8C;IAC9C,IAAY,wBAAwB;QAClC,OAAO,IAAI,CAAC,cAAc;YACxB,CAAC,CAAC,IAAI,CAAA;aACC,GAAG,CAAC,aAAa,CAAC;UACrB;YACJ,CAAC,CAAC,IAAI,CAAA;;;;wBAIY,IAAI,CAAC,gBAAgB,KAAK,SAAS;gBAC/C,IAAI,CAAC,gBAAgB,KAAK,SAAS;qBAC1B,IAAI,CAAC,sBAAsB;;cAElC,GAAG,CAAC,uBAAuB,CAAC;;SAEjC,CAAC;IACR,CAAC;IAED,4CAA4C;IACpC,KAAK,CAAC,sBAAsB;QAClC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,MAAM,CAAC,gBAAgB,EAAE;YACvC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,EAAE,CAAC;IAClC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6DF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAvJC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACe;AAI1C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACI;AAIhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACE;AAI7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACA;AAGpB;IADP,KAAK,CAAC,cAAc,CAAC;2CACQ;AAlBnB,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CA0JrB","sourcesContent":["import {\r\n  html,\r\n  LitElement,\r\n  TemplateResult,\r\n  CSSResultGroup,\r\n  css,\r\n  nothing,\r\n  PropertyValues,\r\n} from 'lit';\r\nimport { msg } from '@lit/localize';\r\nimport { property, customElement, query } from 'lit/decorators.js';\r\n\r\nimport themeStyles from '@src/themes/theme-styles';\r\n\r\nimport type { IAOTPInput } from '@src/elements/ia-otp-input/ia-otp-input';\r\nimport type { LoadingStatus } from '@src/elements/ia-status-indicator/ia-status-indicator';\r\n\r\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\r\nimport '@src/elements/ia-otp-input/ia-otp-input';\r\n\r\n/**\r\n * Custom events fired by the component\r\n */\r\nconst Events = {\r\n  NewCodeRequested: 'newCodeRequested',\r\n  CodeSubmitted: 'codeSubmitted', // Bubbles up from ia-otp-input\r\n};\r\n\r\n/**\r\n * Form for entering OTP codes, including success/loading/error states and a request new code button\r\n */\r\n@customElement('ia-otp-form')\r\nexport class IAOTPForm extends LitElement {\r\n  /* The state of the validation process */\r\n  @property({ type: String })\r\n  validationStatus: LoadingStatus = 'ready';\r\n\r\n  /* Whether to display a loading indicator instead of the button text */\r\n  @property({ type: Boolean })\r\n  newCodeSending: boolean = false;\r\n\r\n  /* Number of characters to expect for the passcode */\r\n  @property({ type: Number })\r\n  numPasscodeChars: number = 6;\r\n\r\n  /* Whether to restrict entry to numeric characters */\r\n  @property({ type: Boolean })\r\n  numericOnly: boolean = true;\r\n\r\n  @query('ia-otp-input')\r\n  private OTPInput!: IAOTPInput;\r\n\r\n  render(): TemplateResult {\r\n    return html`\r\n      <div class=\"input-section\">\r\n        <ia-otp-input\r\n          .numChars=${this.numPasscodeChars}\r\n          ?numericOnly=${this.numericOnly}\r\n          ?disabled=${this.validationStatus === 'loading' ||\r\n          this.validationStatus === 'success'}\r\n        ></ia-otp-input>\r\n        <ia-status-indicator\r\n          part=\"status-indicator\"\r\n          .mode=${this.validationStatus}\r\n        ></ia-status-indicator>\r\n      </div>\r\n      ${this.validationStatus === 'error'\r\n        ? html`<p class=\"error-msg\">\r\n            ${msg('The code entered is invalid or expired')}\r\n          </p>`\r\n        : nothing}\r\n      ${this.resendCodeButtonTemplate}\r\n    `;\r\n  }\r\n\r\n  protected willUpdate(changed: PropertyValues): void {\r\n    if (\r\n      changed.has('validationStatus') &&\r\n      this.OTPInput &&\r\n      this.validationStatus === 'error'\r\n    ) {\r\n      this.OTPInput.prefillValue = '';\r\n    }\r\n\r\n    if (changed.has('newCodeSending') && this.newCodeSending && this.OTPInput) {\r\n      this.OTPInput.prefillValue = '';\r\n    }\r\n  }\r\n\r\n  /* The button to display to send a new code */\r\n  private get resendCodeButtonTemplate(): TemplateResult {\r\n    return this.newCodeSending\r\n      ? html`<span part=\"new-code-message\" class=\"new-code-msg\"\r\n          >${msg('Emailing...')}</span\r\n        >`\r\n      : html`\r\n          <button\r\n            class=\"new-code-btn link\"\r\n            part=\"new-code-button\"\r\n            .disabled=${this.validationStatus === 'loading' ||\r\n            this.validationStatus === 'success'}\r\n            @click=${this.handleNewCodeRequested}\r\n          >\r\n            ${msg('Email me another code')}\r\n          </button>\r\n        `;\r\n  }\r\n\r\n  /* Emits an event to request the new code */\r\n  private async handleNewCodeRequested(): Promise<void> {\r\n    this.dispatchEvent(\r\n      new CustomEvent(Events.NewCodeRequested, {\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n    this.OTPInput.prefillValue = '';\r\n  }\r\n\r\n  static get styles(): CSSResultGroup {\r\n    return [\r\n      themeStyles,\r\n      css`\r\n        :host {\r\n          --font-size-standard--: var(--font-size-standard);\r\n          --font-size-lg--: var(--font-size-lg);\r\n          --color-success--: var(--color-success);\r\n          --color-danger--: var(--color-danger);\r\n          --link-color--: var(--link-color);\r\n\r\n          display: flex;\r\n          flex-direction: column;\r\n          align-items: center;\r\n          justify-content: center;\r\n        }\r\n\r\n        .input-section {\r\n          display: flex;\r\n          flex-direction: row;\r\n          align-items: center;\r\n          justify-content: center;\r\n          gap: 5px;\r\n        }\r\n\r\n        ia-status-indicator {\r\n          --icon-width: calc(var(--font-size-lg--) * 1.33);\r\n        }\r\n\r\n        .error-msg {\r\n          margin-top: 10px;\r\n          font-size: var(--font-size-standard--);\r\n          color: var(--color-danger--);\r\n          margin-bottom: -10px;\r\n        }\r\n\r\n        .new-code-btn {\r\n          font-family: inherit;\r\n          font-size: var(--font-size-standard--);\r\n          display: block;\r\n          width: fit-content;\r\n          margin-top: 10px;\r\n          border: 0;\r\n          padding: 0;\r\n          appearance: none;\r\n          background: none;\r\n          color: var(--link-color--);\r\n          text-decoration: none;\r\n          cursor: pointer;\r\n        }\r\n\r\n        .new-code-btn:hover,\r\n        .new-code-btn:focus {\r\n          text-decoration: underline;\r\n        }\r\n\r\n        .new-code-msg {\r\n          margin-top: 10px;\r\n          font-size: var(--font-size-standard--);\r\n          color: var(--link-color--);\r\n          display: flex;\r\n          flex-direction: column;\r\n          justify-content: center;\r\n        }\r\n      `,\r\n    ];\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"ia-otp-form.js","sourceRoot":"","sources":["../../../../src/elements/ia-otp-form/ia-otp-form.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  html,\n  LitElement,\n  TemplateResult,\n  CSSResultGroup,\n  css,\n  nothing,\n  PropertyValues,\n} from 'lit';\nimport { msg } from '@lit/localize';\nimport { property, customElement, query } from 'lit/decorators.js';\n\nimport themeStyles from '@src/themes/theme-styles';\n\nimport type { IAOTPInput } from '@src/elements/ia-otp-input/ia-otp-input';\nimport type { LoadingStatus } from '@src/elements/ia-status-indicator/ia-status-indicator';\n\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\nimport '@src/elements/ia-otp-input/ia-otp-input';\n\n/**\n * Custom events fired by the component\n */\nconst Events = {\n  NewCodeRequested: 'newCodeRequested',\n  CodeSubmitted: 'codeSubmitted', // Bubbles up from ia-otp-input\n};\n\n/**\n * Form for entering OTP codes, including success/loading/error states and a request new code button\n */\n@customElement('ia-otp-form')\nexport class IAOTPForm extends LitElement {\n  /* The state of the validation process */\n  @property({ type: String })\n  validationStatus: LoadingStatus = 'ready';\n\n  /* Whether to display a loading indicator instead of the button text */\n  @property({ type: Boolean })\n  newCodeSending: boolean = false;\n\n  /* Number of characters to expect for the passcode */\n  @property({ type: Number })\n  numPasscodeChars: number = 6;\n\n  /* Whether to restrict entry to numeric characters */\n  @property({ type: Boolean })\n  numericOnly: boolean = true;\n\n  @query('ia-otp-input')\n  private OTPInput!: IAOTPInput;\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"input-section\">\n        <ia-otp-input\n          .numChars=${this.numPasscodeChars}\n          ?numericOnly=${this.numericOnly}\n          ?disabled=${this.validationStatus === 'loading' ||\n          this.validationStatus === 'success'}\n        ></ia-otp-input>\n        <ia-status-indicator\n          part=\"status-indicator\"\n          .mode=${this.validationStatus}\n        ></ia-status-indicator>\n      </div>\n      ${this.validationStatus === 'error'\n        ? html`<p class=\"error-msg\">\n            ${msg('The code entered is invalid or expired')}\n          </p>`\n        : nothing}\n      ${this.resendCodeButtonTemplate}\n    `;\n  }\n\n  protected willUpdate(changed: PropertyValues): void {\n    if (\n      changed.has('validationStatus') &&\n      this.OTPInput &&\n      this.validationStatus === 'error'\n    ) {\n      this.OTPInput.prefillValue = '';\n    }\n\n    if (changed.has('newCodeSending') && this.newCodeSending && this.OTPInput) {\n      this.OTPInput.prefillValue = '';\n    }\n  }\n\n  /* The button to display to send a new code */\n  private get resendCodeButtonTemplate(): TemplateResult {\n    return this.newCodeSending\n      ? html`<span part=\"new-code-message\" class=\"new-code-msg\"\n          >${msg('Emailing...')}</span\n        >`\n      : html`\n          <button\n            class=\"new-code-btn link\"\n            part=\"new-code-button\"\n            .disabled=${this.validationStatus === 'loading' ||\n            this.validationStatus === 'success'}\n            @click=${this.handleNewCodeRequested}\n          >\n            ${msg('Email me another code')}\n          </button>\n        `;\n  }\n\n  /* Emits an event to request the new code */\n  private async handleNewCodeRequested(): Promise<void> {\n    this.dispatchEvent(\n      new CustomEvent(Events.NewCodeRequested, {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n    this.OTPInput.prefillValue = '';\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --font-size-standard--: var(--font-size-standard);\n          --font-size-lg--: var(--font-size-lg);\n          --color-success--: var(--color-success);\n          --color-danger--: var(--color-danger);\n          --link-color--: var(--link-color);\n\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          justify-content: center;\n        }\n\n        .input-section {\n          display: flex;\n          flex-direction: row;\n          align-items: center;\n          justify-content: center;\n          gap: 5px;\n        }\n\n        ia-status-indicator {\n          --icon-width: calc(var(--font-size-lg--) * 1.33);\n        }\n\n        .error-msg {\n          margin-top: 10px;\n          font-size: var(--font-size-standard--);\n          color: var(--color-danger--);\n          margin-bottom: -10px;\n        }\n\n        .new-code-btn {\n          font-family: inherit;\n          font-size: var(--font-size-standard--);\n          display: block;\n          width: fit-content;\n          margin-top: 10px;\n          border: 0;\n          padding: 0;\n          appearance: none;\n          background: none;\n          color: var(--link-color--);\n          text-decoration: none;\n          cursor: pointer;\n        }\n\n        .new-code-btn:hover,\n        .new-code-btn:focus {\n          text-decoration: underline;\n        }\n\n        .new-code-msg {\n          margin-top: 10px;\n          font-size: var(--font-size-standard--);\n          color: var(--link-color--);\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -35,79 +35,79 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
     }
     /** 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>
+        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>
+        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>
+        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 */
@@ -119,90 +119,90 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
     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--);
-        }
-
-        .placeholder {
-          height: 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;
-          }
-        }
+            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--);
+        }
+
+        .placeholder {
+          height: 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;
+          }
+        }
       `,
         ];
     }