@cognivo/components 0.8.0

package/dist/components/cg-password-input/cg-password-input.js

@@ -0,0 +1,261 @@
+import { css as d, LitElement as h, nothing as l, html as s } from "lit";
+import { property as o, state as p, customElement as v } from "lit/decorators.js";
+import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, a, c, n) => {
+  for (var i = n > 1 ? void 0 : n ? y(a, c) : a, u = t.length - 1, g; u >= 0; u--)
+    (g = t[u]) && (i = (n ? g(a, c, i) : g(i)) || i);
+  return n && i && m(a, c, i), i;
+};
+let e = class extends h {
+  constructor() {
+    super(), this.value = "", this.label = "", this.placeholder = "", this.helper = "", this.name = "", this.required = !1, this.disabled = !1, this.error = !1, this.success = !1, this.showStrength = !1, this.minLength = 0, this._visible = !1, typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
+  }
+  updated(t) {
+    t.has("value") && (this._internals?.setFormValue(this.value), this.required && !this.value ? this._internals?.setValidity({ valueMissing: !0 }, "Password is required") : this.minLength > 0 && this.value.length < this.minLength ? this._internals?.setValidity({ tooShort: !0 }, `Minimum length is ${this.minLength}`) : this._internals?.setValidity({}));
+  }
+  _strengthScore() {
+    const t = this.value;
+    if (!t) return 0;
+    let a = 0;
+    return t.length >= 8 && a++, t.length >= 12 && a++, /[a-z]/.test(t) && /[A-Z]/.test(t) && a++, /\d/.test(t) && /[^a-zA-Z0-9]/.test(t) && a++, Math.min(4, a);
+  }
+  _strengthLabel() {
+    const t = this._strengthScore();
+    return t === 0 ? "" : t === 1 ? "Weak" : t === 2 ? "Fair" : t === 3 ? "Good" : "Strong";
+  }
+  _handleInput(t) {
+    this.value = t.target.value, this.dispatchEvent(new CustomEvent("cg-password-change", {
+      detail: { value: this.value, strength: this._strengthScore() },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _toggleVisibility() {
+    this._visible = !this._visible, this.dispatchEvent(new CustomEvent("cg-password-toggle", {
+      detail: { visible: this._visible },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    const t = this._strengthScore();
+    return s`
+      <div class="wrap">
+        ${this.label ? s`<label>${this.label}${this.required ? s` <span style="color:var(--cg-color-status-error-text-default);">*</span>` : l}</label>` : l}
+        <div class="input-wrap">
+          <input
+            type=${this._visible ? "text" : "password"}
+            .value=${this.value}
+            placeholder=${this.placeholder}
+            name=${this.name}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            aria-invalid=${this.error ? "true" : "false"}
+            aria-required=${this.required ? "true" : "false"}
+            @input=${this._handleInput}
+          />
+          <button
+            type="button"
+            class="toggle"
+            aria-label=${this._visible ? "Hide password" : "Show password"}
+            aria-pressed=${this._visible ? "true" : "false"}
+            @click=${this._toggleVisibility}
+          >
+            ${this._visible ? s`
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
+                <line x1="1" y1="1" x2="23" y2="23"/>
+              </svg>
+            ` : s`
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                <circle cx="12" cy="12" r="3"/>
+              </svg>
+            `}
+          </button>
+        </div>
+        ${this.showStrength && this.value ? s`
+          <div class="strength" aria-hidden="true">
+            ${[1, 2, 3, 4].map((a) => s`
+              <div class="strength-bar ${a <= t ? "active" : ""}" data-level=${t}></div>
+            `)}
+          </div>
+          <div class="strength-label">${this._strengthLabel()}</div>
+        ` : l}
+        ${this.helper ? s`<div class="helper">${this.helper}</div>` : l}
+      </div>
+    `;
+  }
+};
+e.styles = [f, b, d`
+    :host { display: block; }
+
+    .wrap {
+      position: relative;
+      display: block;
+    }
+
+    label {
+      display: block;
+      margin-bottom: var(--cg-spacing-6);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .input-wrap {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    input {
+      flex: 1;
+      height: var(--cg-component-input-height-md);
+      padding: 0 var(--cg-spacing-40) 0 var(--cg-spacing-12);
+      background: var(--cg-color-input-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius);
+      color: var(--cg-color-input-text-default);
+      font-family: inherit;
+      font-size: var(--cg-font-size-base);
+      outline: none;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    input::placeholder { color: var(--cg-color-input-text-placeholder); }
+    input:hover:not(:disabled) {
+      border-color: var(--cg-color-input-border-hover);
+    }
+    input:focus {
+      border-color: var(--cg-color-input-border-focus);
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    input:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    :host([error]) input {
+      border-color: var(--cg-color-status-error-border-default);
+    }
+    :host([success]) input {
+      border-color: var(--cg-color-status-success-border-default);
+    }
+
+    .toggle {
+      position: absolute;
+      right: var(--cg-spacing-8);
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      border: none;
+      background: none;
+      color: var(--cg-color-input-text-placeholder);
+      cursor: pointer;
+      border-radius: var(--cg-border-radius-50);
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .toggle:hover {
+      color: var(--cg-color-surface-base-text);
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    .toggle:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 2px var(--cg-color-focus-ring-offset),
+        0 0 0 4px var(--cg-color-focus-ring);
+    }
+
+    .helper {
+      margin-top: var(--cg-spacing-6);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+    }
+    :host([error]) .helper { color: var(--cg-color-status-error-text-default); }
+    :host([success]) .helper { color: var(--cg-color-status-success-text-default); }
+
+    /* Strength meter */
+    .strength {
+      display: flex;
+      gap: var(--cg-spacing-4);
+      margin-top: var(--cg-spacing-12);
+    }
+    .strength-bar {
+      flex: 1;
+      height: var(--cg-spacing-4);
+      background: var(--cg-color-surface-container-border);
+      border-radius: var(--cg-border-radius-full);
+      transition:
+        background var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+      transform-origin: left;
+    }
+    .strength-bar.active {
+      animation: barIn var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    @keyframes barIn {
+      from { transform: scaleX(0); }
+      to { transform: scaleX(1); }
+    }
+    .toggle:active { transform: translateY(-50%) scale(0.9); }
+    .strength-bar.active[data-level="1"] { background: var(--cg-color-status-error-text-default); }
+    .strength-bar.active[data-level="2"] { background: var(--cg-color-status-warning-text-default); }
+    .strength-bar.active[data-level="3"] { background: var(--cg-color-status-warning-text-default); }
+    .strength-bar.active[data-level="4"] { background: var(--cg-color-status-success-text-default); }
+
+    .strength-label {
+      margin-top: var(--cg-spacing-6);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+    }
+  `];
+e.formAssociated = !0;
+r([
+  o()
+], e.prototype, "value", 2);
+r([
+  o()
+], e.prototype, "label", 2);
+r([
+  o()
+], e.prototype, "placeholder", 2);
+r([
+  o()
+], e.prototype, "helper", 2);
+r([
+  o()
+], e.prototype, "name", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "required", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "error", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "success", 2);
+r([
+  o({ type: Boolean, attribute: "show-strength" })
+], e.prototype, "showStrength", 2);
+r([
+  o({ type: Number, attribute: "min-length" })
+], e.prototype, "minLength", 2);
+r([
+  p()
+], e.prototype, "_visible", 2);
+e = r([
+  v("cg-password-input")
+], e);
+export {
+  e as CgPasswordInput
+};
+//# sourceMappingURL=cg-password-input.js.map

package/dist/components/cg-password-input/cg-password-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-password-input.js","sources":["../../../src/components/cg-password-input/cg-password-input.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-password-input\n * Password input with visibility toggle and optional strength meter.\n *\n * @example\n * ```html\n * <cg-password-input label=\"Password\" show-strength></cg-password-input>\n * ```\n *\n * @fires {CustomEvent<{value: string, strength?: number}>} cg-password-change\n * @fires {CustomEvent<{visible: boolean}>} cg-password-toggle\n */\n@customElement('cg-password-input')\nexport class CgPasswordInput extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: block; }\n\n    .wrap {\n      position: relative;\n      display: block;\n    }\n\n    label {\n      display: block;\n      margin-bottom: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .input-wrap {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    input {\n      flex: 1;\n      height: var(--cg-component-input-height-md);\n      padding: 0 var(--cg-spacing-40) 0 var(--cg-spacing-12);\n      background: var(--cg-color-input-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      color: var(--cg-color-input-text-default);\n      font-family: inherit;\n      font-size: var(--cg-font-size-base);\n      outline: none;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    input::placeholder { color: var(--cg-color-input-text-placeholder); }\n    input:hover:not(:disabled) {\n      border-color: var(--cg-color-input-border-hover);\n    }\n    input:focus {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    input:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    :host([error]) input {\n      border-color: var(--cg-color-status-error-border-default);\n    }\n    :host([success]) input {\n      border-color: var(--cg-color-status-success-border-default);\n    }\n\n    .toggle {\n      position: absolute;\n      right: var(--cg-spacing-8);\n      top: 50%;\n      transform: translateY(-50%);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border: none;\n      background: none;\n      color: var(--cg-color-input-text-placeholder);\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-50);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .toggle:hover {\n      color: var(--cg-color-surface-base-text);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .toggle:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 2px var(--cg-color-focus-ring-offset),\n        0 0 0 4px var(--cg-color-focus-ring);\n    }\n\n    .helper {\n      margin-top: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    :host([error]) .helper { color: var(--cg-color-status-error-text-default); }\n    :host([success]) .helper { color: var(--cg-color-status-success-text-default); }\n\n    /* Strength meter */\n    .strength {\n      display: flex;\n      gap: var(--cg-spacing-4);\n      margin-top: var(--cg-spacing-12);\n    }\n    .strength-bar {\n      flex: 1;\n      height: var(--cg-spacing-4);\n      background: var(--cg-color-surface-container-border);\n      border-radius: var(--cg-border-radius-full);\n      transition:\n        background var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n      transform-origin: left;\n    }\n    .strength-bar.active {\n      animation: barIn var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    @keyframes barIn {\n      from { transform: scaleX(0); }\n      to { transform: scaleX(1); }\n    }\n    .toggle:active { transform: translateY(-50%) scale(0.9); }\n    .strength-bar.active[data-level=\"1\"] { background: var(--cg-color-status-error-text-default); }\n    .strength-bar.active[data-level=\"2\"] { background: var(--cg-color-status-warning-text-default); }\n    .strength-bar.active[data-level=\"3\"] { background: var(--cg-color-status-warning-text-default); }\n    .strength-bar.active[data-level=\"4\"] { background: var(--cg-color-status-success-text-default); }\n\n    .strength-label {\n      margin-top: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n  `];\n\n  static formAssociated = true;\n  private _internals?: ElementInternals;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  @property() value = '';\n  @property() label = '';\n  @property() placeholder = '';\n  @property() helper = '';\n  @property() name = '';\n  @property({ type: Boolean, reflect: true }) required = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n  @property({ type: Boolean, attribute: 'show-strength' }) showStrength = false;\n  @property({ type: Number, attribute: 'min-length' }) minLength = 0;\n\n  @state() private _visible = false;\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('value')) {\n      this._internals?.setFormValue(this.value);\n      if (this.required && !this.value) {\n        this._internals?.setValidity({ valueMissing: true }, 'Password is required');\n      } else if (this.minLength > 0 && this.value.length < this.minLength) {\n        this._internals?.setValidity({ tooShort: true }, `Minimum length is ${this.minLength}`);\n      } else {\n        this._internals?.setValidity({});\n      }\n    }\n  }\n\n  private _strengthScore(): number {\n    const v = this.value;\n    if (!v) return 0;\n    let score = 0;\n    if (v.length >= 8) score++;\n    if (v.length >= 12) score++;\n    if (/[a-z]/.test(v) && /[A-Z]/.test(v)) score++;\n    if (/\\d/.test(v) && /[^a-zA-Z0-9]/.test(v)) score++;\n    return Math.min(4, score);\n  }\n\n  private _strengthLabel(): string {\n    const score = this._strengthScore();\n    if (score === 0) return '';\n    if (score === 1) return 'Weak';\n    if (score === 2) return 'Fair';\n    if (score === 3) return 'Good';\n    return 'Strong';\n  }\n\n  private _handleInput(e: Event): void {\n    this.value = (e.target as HTMLInputElement).value;\n    this.dispatchEvent(new CustomEvent('cg-password-change', {\n      detail: { value: this.value, strength: this._strengthScore() },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _toggleVisibility(): void {\n    this._visible = !this._visible;\n    this.dispatchEvent(new CustomEvent('cg-password-toggle', {\n      detail: { visible: this._visible },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    const score = this._strengthScore();\n    return html`\n      <div class=\"wrap\">\n        ${this.label ? html`<label>${this.label}${this.required ? html` <span style=\"color:var(--cg-color-status-error-text-default);\">*</span>` : nothing}</label>` : nothing}\n        <div class=\"input-wrap\">\n          <input\n            type=${this._visible ? 'text' : 'password'}\n            .value=${this.value}\n            placeholder=${this.placeholder}\n            name=${this.name}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            aria-invalid=${this.error ? 'true' : 'false'}\n            aria-required=${this.required ? 'true' : 'false'}\n            @input=${this._handleInput}\n          />\n          <button\n            type=\"button\"\n            class=\"toggle\"\n            aria-label=${this._visible ? 'Hide password' : 'Show password'}\n            aria-pressed=${this._visible ? 'true' : 'false'}\n            @click=${this._toggleVisibility}\n          >\n            ${this._visible ? html`\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"/>\n                <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/>\n              </svg>\n            ` : html`\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>\n                <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n              </svg>\n            `}\n          </button>\n        </div>\n        ${this.showStrength && this.value ? html`\n          <div class=\"strength\" aria-hidden=\"true\">\n            ${[1, 2, 3, 4].map(i => html`\n              <div class=\"strength-bar ${i <= score ? 'active' : ''}\" data-level=${score}></div>\n            `)}\n          </div>\n          <div class=\"strength-label\">${this._strengthLabel()}</div>\n        ` : nothing}\n        ${this.helper ? html`<div class=\"helper\">${this.helper}</div>` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-password-input': CgPasswordInput;\n  }\n}\n"],"names":["CgPasswordInput","LitElement","changed","v","score","e","html","nothing","i","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/cg-phone-input/cg-phone-input.d.ts

@@ -0,0 +1,93 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * @element cg-phone-input
+ * International phone-number input with searchable country selector. Emits a
+ * single E.164 value (`+15551234567`).
+ *
+ * @example
+ * ```html
+ * <cg-phone-input label="Phone" country="US"></cg-phone-input>
+ * <cg-phone-input
+ *   label="Mobile"
+ *   default-country="BR"
+ *   preferred-countries='["BR","US","PT","DE"]'
+ *   helper="We'll text a code"
+ * ></cg-phone-input>
+ * ```
+ *
+ * @fires {CustomEvent<{value:string;country:string;dialCode:string;nationalNumber:string;valid:boolean}>} cg-phone-input-change
+ * @fires {CustomEvent<{country:string;dialCode:string}>} cg-phone-input-country-change
+ *
+ * @cssprop [--cg-component-phone-input-radius] - Outer corner radius
+ * @cssprop [--cg-component-phone-input-popover-width] - Country popover width
+ * @cssprop [--cg-component-phone-input-popover-max-height] - Country popover scroll height
+ * @cssprop [--cg-component-phone-input-option-height] - Country list option height
+ */
+export declare class CgPhoneInput extends LitElement {
+    static formAssociated: boolean;
+    private _internals?;
+    constructor();
+    static styles: import('lit').CSSResult[];
+    value: string;
+    country: string;
+    defaultCountry: string;
+    name: string;
+    label: string;
+    placeholder: string;
+    helper: string;
+    size: 'md' | 'lg';
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    disabled: boolean;
+    readonly: boolean;
+    error: boolean;
+    success: boolean;
+    required: boolean;
+    loading: boolean;
+    nationalMode: boolean;
+    preferredCountries: string[];
+    onlyCountries: string[];
+    excludeCountries: string[];
+    open: boolean;
+    /** Display string for the number field — digits + light formatting. */
+    private _national;
+    private _focused;
+    private _query;
+    private _activeIndex;
+    private _announcement;
+    private _telInput;
+    private _searchInput;
+    private _optionsEl;
+    private _disposeOutside;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    focus(): void;
+    /** Length-based validation against the selected country format. */
+    validate(): boolean;
+    private get _currentCountry();
+    private get _filteredCountries();
+    private get _flatFiltered();
+    private get _isFloated();
+    private _emitChange;
+    private _announce;
+    private _toggleOpen;
+    private _close;
+    private _selectCountry;
+    private _onSearchInput;
+    private _onPopoverKey;
+    private _scrollActiveIntoView;
+    private _onTelKeydown;
+    private _onTelInput;
+    private _onTelFocus;
+    private _onTelBlur;
+    private _renderOption;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-phone-input': CgPhoneInput;
+    }
+}
+//# sourceMappingURL=cg-phone-input.d.ts.map

package/dist/components/cg-phone-input/cg-phone-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-phone-input.d.ts","sourceRoot":"","sources":["../../../src/components/cg-phone-input/cg-phone-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAY1E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAC,CAAmB;;IAStC,OAAgB,MAAM,4BA8UnB;IAIS,KAAK,SAAM;IACM,OAAO,SAAQ;IACA,cAAc,SAAQ;IACtD,IAAI,SAAM;IACV,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,MAAM,SAAM;IACK,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IACzB,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7B,QAAQ,UAAS;IAChC,QAAQ,UAAS;IACF,KAAK,UAAS;IACd,OAAO,UAAS;IAC/B,QAAQ,UAAS;IACF,OAAO,UAAS;IACH,YAAY,UAAS;IAE9E,kBAAkB,EAAE,MAAM,EAAE,CAAgE;IACpC,aAAa,EAAE,MAAM,EAAE,CAAM;IAC1B,gBAAgB,EAAE,MAAM,EAAE,CAAM;IAC/C,IAAI,UAAS;IAIzD,uEAAuE;IAC9D,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAM;IACpB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,aAAa,CAAM;IAER,OAAO,CAAC,SAAS,CAAoB;IACzC,OAAO,CAAC,YAAY,CAAoB;IAC7C,OAAO,CAAC,UAAU,CAAe;IAEpD,OAAO,CAAC,eAAe,CAA6B;IAI3C,iBAAiB,IAAI,IAAI;IAezB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAkC/C,iBAAiB,IAAI,IAAI;IAKzB,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAMpC,KAAK,IAAI,IAAI;IAEtB,mEAAmE;IACnE,QAAQ,IAAI,OAAO;IAWnB,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,kBAAkB,GA0B7B;IAED,OAAO,KAAK,aAAa,GAGxB;IAED,OAAO,KAAK,UAAU,GAErB;IAID,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,qBAAqB;IAS7B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,WAAW;IACnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,aAAa;IAoBZ,MAAM;CAuHhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}