@govtechsg/sgds-web-component 2.0.1 → 2.1.1

package/react/components/Progress/sgds-progress-bar.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-progress-bar.cjs.js","sources":["../../../../src/components/Progress/sgds-progress-bar.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport progressBarStyle from \"./progress-bar.css\";\nexport type ProgressBarVariant = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"dark\";\n\nexport class SgdsProgressBar extends SgdsElement {\n  static styles = [progressBarStyle];\n\n  /** The background color of the progress bar */\n  @property({ type: String, reflect: true }) variant: ProgressBarVariant;\n  /**\n   * The current progress as a percentage, from 0 to 100.\n   */\n  @property({ type: Number, reflect: true }) value: number;\n\n  /**\n   * Sets the minimun aria range for assistive devices.\n   *\n   * The aria-valuemin attribute defines the minimun allowed value for a range widget.\n   */\n  @property({ type: Number, reflect: true }) ariamin: number;\n  /**\n   * Sets the maximum aria range for assistive devices.\n   *\n   * The aria-valuemax attribute defines the maximum allowed value for a range widget.\n   */\n  @property({ type: Number, reflect: true }) ariamax: number;\n  /**\n   * Sets the aria label for assistive devices.\n   */\n  @property({ type: String, reflect: true }) arialabel = \"\";\n\n  /** Add label on top of progress bar */\n  @property({ type: String, reflect: true }) label = \"\";\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"progress-bar\": true\n        })}\n        role=\"progressbar\"\n        style=${styleMap({ width: `${this.value}%` })}\n        aria-label=${this.arialabel}\n        aria-valuenow=${this.value}\n        aria-valuemin=${this.ariamin}\n        aria-valuemax=${this.ariamax}\n      >\n        ${this.label ? html`${this.label}` : undefined}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsProgressBar;\n"],"names":["SgdsElement","html","classMap","styleMap","progressBarStyle","__decorate","property"],"mappings":";;;;;;;;;;;;;AAQM,MAAO,eAAgB,SAAQA,sBAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;AAsBE;;AAEG;QACwC,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;;QAGf,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;KAmBvD;IAjBC,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,cAAc,EAAE,IAAI;SACrB,CAAC,CAAA;;gBAEMC,oBAAQ,CAAC,EAAE,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,KAAK,CAAG,CAAA,CAAA,EAAE,CAAC,CAAA;AAChC,mBAAA,EAAA,IAAI,CAAC,SAAS,CAAA;AACX,sBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;AACV,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACZ,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;;AAE1B,QAAA,EAAA,IAAI,CAAC,KAAK,GAAGF,QAAI,CAAA,CAAG,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,SAAS,CAAA;;KAEjD,CAAC;KACH;;AA7CM,eAAA,CAAA,MAAM,GAAG,CAACG,sBAAgB,CAAC,CAAC;AAGQC,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA6B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI5BD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOdD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMhBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIhBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGfD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Progress/sgds-progress-bar.js

@@ -0,0 +1,59 @@
+'use client';
+import { __decorate } from 'tslib';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { classMap } from 'lit/directives/class-map.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { html } from 'lit';
+import css_248z from './progress-bar.js';
+
+class SgdsProgressBar extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sets the aria label for assistive devices.
+         */
+        this.arialabel = "";
+        /** Add label on top of progress bar */
+        this.label = "";
+    }
+    render() {
+        return html `
+      <div
+        class=${classMap({
+            "progress-bar": true
+        })}
+        role="progressbar"
+        style=${styleMap({ width: `${this.value}%` })}
+        aria-label=${this.arialabel}
+        aria-valuenow=${this.value}
+        aria-valuemin=${this.ariamin}
+        aria-valuemax=${this.ariamax}
+      >
+        ${this.label ? html `${this.label}` : undefined}
+      </div>
+    `;
+    }
+}
+SgdsProgressBar.styles = [css_248z];
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsProgressBar.prototype, "variant", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SgdsProgressBar.prototype, "value", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SgdsProgressBar.prototype, "ariamin", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SgdsProgressBar.prototype, "ariamax", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsProgressBar.prototype, "arialabel", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsProgressBar.prototype, "label", void 0);
+
+export { SgdsProgressBar, SgdsProgressBar as default };
+//# sourceMappingURL=sgds-progress-bar.js.map

package/react/components/Progress/sgds-progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-progress-bar.js","sources":["../../../../src/components/Progress/sgds-progress-bar.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport progressBarStyle from \"./progress-bar.css\";\nexport type ProgressBarVariant = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"dark\";\n\nexport class SgdsProgressBar extends SgdsElement {\n  static styles = [progressBarStyle];\n\n  /** The background color of the progress bar */\n  @property({ type: String, reflect: true }) variant: ProgressBarVariant;\n  /**\n   * The current progress as a percentage, from 0 to 100.\n   */\n  @property({ type: Number, reflect: true }) value: number;\n\n  /**\n   * Sets the minimun aria range for assistive devices.\n   *\n   * The aria-valuemin attribute defines the minimun allowed value for a range widget.\n   */\n  @property({ type: Number, reflect: true }) ariamin: number;\n  /**\n   * Sets the maximum aria range for assistive devices.\n   *\n   * The aria-valuemax attribute defines the maximum allowed value for a range widget.\n   */\n  @property({ type: Number, reflect: true }) ariamax: number;\n  /**\n   * Sets the aria label for assistive devices.\n   */\n  @property({ type: String, reflect: true }) arialabel = \"\";\n\n  /** Add label on top of progress bar */\n  @property({ type: String, reflect: true }) label = \"\";\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"progress-bar\": true\n        })}\n        role=\"progressbar\"\n        style=${styleMap({ width: `${this.value}%` })}\n        aria-label=${this.arialabel}\n        aria-valuenow=${this.value}\n        aria-valuemin=${this.ariamin}\n        aria-valuemax=${this.ariamax}\n      >\n        ${this.label ? html`${this.label}` : undefined}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsProgressBar;\n"],"names":["progressBarStyle"],"mappings":";;;;;;;;;AAQM,MAAO,eAAgB,SAAQ,WAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;AAsBE;;AAEG;QACwC,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;;QAGf,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;KAmBvD;IAjBC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,cAAc,EAAE,IAAI;SACrB,CAAC,CAAA;;gBAEM,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,KAAK,CAAG,CAAA,CAAA,EAAE,CAAC,CAAA;AAChC,mBAAA,EAAA,IAAI,CAAC,SAAS,CAAA;AACX,sBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;AACV,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACZ,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;;AAE1B,QAAA,EAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA,CAAG,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,SAAS,CAAA;;KAEjD,CAAC;KACH;;AA7CM,eAAA,CAAA,MAAM,GAAG,CAACA,QAAgB,CAAC,CAAC;AAGQ,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA6B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI5B,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOd,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMhB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIhB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGf,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/{components → react/components}/Progress/sgds-progress.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/react/components/Progress/sgds-progress.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-progress.cjs.js","sources":["../../../../src/components/Progress/sgds-progress.ts"],"sourcesContent":["import { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport progressStyle from \"./progress.css\";\nimport bgStyles from \"../../styles/bg-variants.css\";\n\n/**\n * @summary Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.\n * @slot default - slot for progress-bar\n *\n * @cssprop --progress-height - Sets the height of the progress wrapper.\n */\n\nexport class SgdsProgress extends SgdsElement {\n  static styles = [...SgdsElement.styles, bgStyles, progressStyle];\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          progress: true\n        })}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsProgress;\n"],"names":["SgdsElement","html","classMap","bgStyles","progressStyle"],"mappings":";;;;;;;;;;;AAMA;;;;;AAKG;AAEG,MAAO,YAAa,SAAQA,sBAAW,CAAA;IAG3C,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,QAAQ,EAAE,IAAI;SACf,CAAC,CAAA;;;;KAIL,CAAC;KACH;;AAZM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAGF,sBAAW,CAAC,MAAM,EAAEG,qBAAQ,EAAEC,mBAAa,CAAC;;;;;"}

package/react/components/Progress/sgds-progress.js

@@ -0,0 +1,30 @@
+'use client';
+import { classMap } from 'lit/directives/class-map.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { html } from 'lit';
+import css_248z$1 from './progress.js';
+import css_248z from '../../styles/bg-variants.js';
+
+/**
+ * @summary Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
+ * @slot default - slot for progress-bar
+ *
+ * @cssprop --progress-height - Sets the height of the progress wrapper.
+ */
+class SgdsProgress extends SgdsElement {
+    render() {
+        return html `
+      <div
+        class=${classMap({
+            progress: true
+        })}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+SgdsProgress.styles = [...SgdsElement.styles, css_248z, css_248z$1];
+
+export { SgdsProgress, SgdsProgress as default };
+//# sourceMappingURL=sgds-progress.js.map

package/react/components/Progress/sgds-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-progress.js","sources":["../../../../src/components/Progress/sgds-progress.ts"],"sourcesContent":["import { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport progressStyle from \"./progress.css\";\nimport bgStyles from \"../../styles/bg-variants.css\";\n\n/**\n * @summary Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.\n * @slot default - slot for progress-bar\n *\n * @cssprop --progress-height - Sets the height of the progress wrapper.\n */\n\nexport class SgdsProgress extends SgdsElement {\n  static styles = [...SgdsElement.styles, bgStyles, progressStyle];\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          progress: true\n        })}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsProgress;\n"],"names":["bgStyles","progressStyle"],"mappings":";;;;;;;AAMA;;;;;AAKG;AAEG,MAAO,YAAa,SAAQ,WAAW,CAAA;IAG3C,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,QAAQ,EAAE,IAAI;SACf,CAAC,CAAA;;;;KAIL,CAAC;KACH;;AAZM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAQ,EAAEC,UAAa,CAAC;;;;"}

package/{components → react/components}/QuantityToggle/quantity-toggle.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/QuantityToggle/quantity-toggle.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"quantity-toggle.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"quantity-toggle.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/QuantityToggle/quantity-toggle.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`sgds-input{--sgds-border-radius:0}sgds-button:first-of-type{--btn-border-radius:var(--sgds-border-radius) 0 0 var(--sgds-border-radius)}sgds-button:last-of-type{--btn-border-radius:0 var(--sgds-border-radius) var(--sgds-border-radius) 0}.input-group{align-items:stretch;display:flex;flex-wrap:wrap;position:relative}.input-group>sgds-input{flex:1 1 auto;min-width:0;position:relative}.input-group sgds-button:focus,.input-group>sgds-input:focus{z-index:3}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}`;
+
+export { css_248z as default };
+//# sourceMappingURL=quantity-toggle.js.map

package/react/components/QuantityToggle/quantity-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-toggle.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/{components → react/components}/QuantityToggle/sgds-quantity-toggle.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/react/components/QuantityToggle/sgds-quantity-toggle.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-quantity-toggle.cjs.js","sources":["../../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { FormSubmitController, SgdsFormControl } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport SgdsButton, { ButtonVariant } from \"../Button/sgds-button\";\nimport quantityToggleStyle from \"./quantity-toggle.css\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport SgdsInput from \"../Input/sgds-input\";\nimport svgStyles from \"../../styles/svg.css\";\n/**\n * @summary The quantity toggle component is used to increase or decrease an incremental venue,  best used when the user needs to enter or adjust the quantity of a selected item.\n *\n * @csspart base - The base wrapper of the quantity toggle component.\n * @csspart button - The plus and minus button of quantity toggle\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n *\n */\nexport class SgdsQuantityToggle extends ScopedElementsMixin(SgdsElement) implements SgdsFormControl {\n  static styles = [...SgdsElement.styles, svgStyles, quantityToggleStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-button\": SgdsButton,\n      \"sgds-input\": SgdsInput\n    };\n  }\n  /**@internal */\n  @query(\"sgds-input\") private input: HTMLInputElement;\n  /**@internal */\n  @query(\"sgds-button[ariaLabel^='increase by']\") private plusBtn: HTMLButtonElement;\n  /**@internal */\n  @query(\"sgds-button[ariaLabel^='decrease by']\") private minusBtn: HTMLButtonElement;\n\n  /**@internal */\n  private readonly formSubmitController = new FormSubmitController(this);\n\n  /** The name of the input */\n  @property({ type: String, reflect: true }) name: string;\n\n  /** The input's minimum value. */\n  @property({ type: Number, reflect: true }) min: number;\n  /** The input's maximum value. */\n  @property({ type: Number, reflect: true }) max: number;\n\n  /**Controls the size of the quantity toggle */\n  @property() size: \"sm\" | \"md\" = \"md\";\n\n  /**The input's value. Set to 0 by default */\n  @property({ type: Number, reflect: true }) value = 0;\n\n  /** Disables the entire quantity toggle  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The quantity toggle's button variants */\n  @property({ type: String }) buttonVariant: ButtonVariant = \"primary\";\n\n  /**\n   * Controls the incremental / decremental value of the input\n   */\n  @property({ type: Number }) step = 1;\n\n  /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = 0;\n\n  /** @internal The id forwarded to input element */\n  private inputId: string = genId(\"quantity-toggle\", \"input\");\n\n  private _handleChange() {\n    if (parseInt(this.input.value) < this.step || this.input.value === \"\") {\n      this.input.value = \"0\";\n    }\n    this.value = parseInt(this.input.value);\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const allowedKeys = [\n      \"Backspace\",\n      \"ArrowUp\",\n      \"ArrowDown\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      ...Array.from(Array(10).keys()).map(key => key.toString()),\n      \"Tab\"\n    ];\n\n    // Allow keydown event only if the pressed key is in the allowedKeys array\n    if (!allowedKeys.includes(event.key)) {\n      event.preventDefault();\n    }\n  }\n\n  /** Simulates a click on the plus button */\n  public plus() {\n    this.plusBtn.click();\n  }\n\n  /** Simulates a click on the minus button */\n  public minus() {\n    this.minusBtn.click();\n  }\n\n  private _onPlus(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = parseInt(this.input.value) + parseInt(this.input.step);\n  }\n\n  private _onMinus(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    if (this.value < this.step) {\n      this.value = 0;\n    } else {\n      this.value = parseInt(this.input.value) - parseInt(this.input.step);\n    }\n  }\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=\"${classMap({\n          sgds: true,\n          disabled: this.disabled,\n          \"input-group\": true,\n          [`input-group-${this.size}`]: this.size\n        })}\"\n        variant=\"quantity-toggle\"\n        size=${this.size}\n      >\n        <sgds-button\n          variant=${this.buttonVariant}\n          ariaLabel=${`decrease by ${this.step}`}\n          part=\"button\"\n          @click=${this._onMinus}\n          ?disabled=${this.disabled || (this.min !== undefined ? this.value <= this.min : this.value < 1)}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-dash\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path d=\"M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z\" />\n          </svg>\n        </sgds-button>\n        <sgds-input\n          type=\"number\"\n          class=\"quantity-toggle\"\n          name=${ifDefined(this.name)}\n          step=${ifDefined(this.step)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          .value=${live(this.value.toString())}\n          @sgds-change=${() => this._handleChange()}\n          @sgds-input=${() => this._handleChange()}\n          @keydown=${this._handleKeyDown}\n          ?disabled=${this.disabled}\n          id=${this.inputId}\n        ></sgds-input>\n        <sgds-button\n          variant=${this.buttonVariant}\n          ariaLabel=${`increase by ${this.step}`}\n          part=\"button\"\n          @click=${this._onPlus}\n          ?disabled=${this.disabled || (this.max !== undefined && this.max && this.value >= this.max)}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-plus\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z\"\n            />\n          </svg>\n        </sgds-button>\n      </div>\n      <div id=\"announcer\" role=\"region\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n    `;\n  }\n}\n\nexport default SgdsQuantityToggle;\n"],"names":["ScopedElementsMixin","SgdsElement","FormSubmitController","genId","SgdsButton","SgdsInput","html","classMap","ifDefined","live","svgStyles","quantityToggleStyle","__decorate","query","property","defaultValue"],"mappings":"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"}

package/react/components/QuantityToggle/sgds-quantity-toggle.js

@@ -0,0 +1,210 @@
+'use client';
+import { __decorate } from 'tslib';
+import { query, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { html } from 'lit/static-html.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { defaultValue } from '../../utils/defaultvalue.js';
+import { FormSubmitController } from '../../utils/form.js';
+import genId from '../../utils/generateId.js';
+import { SgdsButton } from '../Button/sgds-button.js';
+import css_248z$1 from './quantity-toggle.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { SgdsInput } from '../Input/sgds-input.js';
+import css_248z from '../../styles/svg.js';
+
+/**
+ * @summary The quantity toggle component is used to increase or decrease an incremental venue,  best used when the user needs to enter or adjust the quantity of a selected item.
+ *
+ * @csspart base - The base wrapper of the quantity toggle component.
+ * @csspart button - The plus and minus button of quantity toggle
+ *
+ * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event sgds-input - Emitted when the control receives input and its value changes.
+ *
+ */
+class SgdsQuantityToggle extends ScopedElementsMixin(SgdsElement) {
+    constructor() {
+        super(...arguments);
+        /**@internal */
+        this.formSubmitController = new FormSubmitController(this);
+        /**Controls the size of the quantity toggle */
+        this.size = "md";
+        /**The input's value. Set to 0 by default */
+        this.value = 0;
+        /** Disables the entire quantity toggle  */
+        this.disabled = false;
+        /** The quantity toggle's button variants */
+        this.buttonVariant = "primary";
+        /**
+         * Controls the incremental / decremental value of the input
+         */
+        this.step = 1;
+        /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
+        this.defaultValue = 0;
+        /** @internal The id forwarded to input element */
+        this.inputId = genId("quantity-toggle", "input");
+    }
+    /**@internal */
+    static get scopedElements() {
+        return {
+            "sgds-button": SgdsButton,
+            "sgds-input": SgdsInput
+        };
+    }
+    _handleChange() {
+        if (parseInt(this.input.value) < this.step || this.input.value === "") {
+            this.input.value = "0";
+        }
+        this.value = parseInt(this.input.value);
+    }
+    _handleKeyDown(event) {
+        const allowedKeys = [
+            "Backspace",
+            "ArrowUp",
+            "ArrowDown",
+            "ArrowLeft",
+            "ArrowRight",
+            ...Array.from(Array(10).keys()).map(key => key.toString()),
+            "Tab"
+        ];
+        // Allow keydown event only if the pressed key is in the allowedKeys array
+        if (!allowedKeys.includes(event.key)) {
+            event.preventDefault();
+        }
+    }
+    /** Simulates a click on the plus button */
+    plus() {
+        this.plusBtn.click();
+    }
+    /** Simulates a click on the minus button */
+    minus() {
+        this.minusBtn.click();
+    }
+    _onPlus(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.value = parseInt(this.input.value) + parseInt(this.input.step);
+    }
+    _onMinus(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.value < this.step) {
+            this.value = 0;
+        }
+        else {
+            this.value = parseInt(this.input.value) - parseInt(this.input.step);
+        }
+    }
+    render() {
+        return html `
+      <div
+        part="base"
+        class="${classMap({
+            sgds: true,
+            disabled: this.disabled,
+            "input-group": true,
+            [`input-group-${this.size}`]: this.size
+        })}"
+        variant="quantity-toggle"
+        size=${this.size}
+      >
+        <sgds-button
+          variant=${this.buttonVariant}
+          ariaLabel=${`decrease by ${this.step}`}
+          part="button"
+          @click=${this._onMinus}
+          ?disabled=${this.disabled || (this.min !== undefined ? this.value <= this.min : this.value < 1)}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-dash"
+            viewBox="0 0 16 16"
+          >
+            <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z" />
+          </svg>
+        </sgds-button>
+        <sgds-input
+          type="number"
+          class="quantity-toggle"
+          name=${ifDefined(this.name)}
+          step=${ifDefined(this.step)}
+          min=${ifDefined(this.min)}
+          max=${ifDefined(this.max)}
+          .value=${live(this.value.toString())}
+          @sgds-change=${() => this._handleChange()}
+          @sgds-input=${() => this._handleChange()}
+          @keydown=${this._handleKeyDown}
+          ?disabled=${this.disabled}
+          id=${this.inputId}
+        ></sgds-input>
+        <sgds-button
+          variant=${this.buttonVariant}
+          ariaLabel=${`increase by ${this.step}`}
+          part="button"
+          @click=${this._onPlus}
+          ?disabled=${this.disabled || (this.max !== undefined && this.max && this.value >= this.max)}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-plus"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"
+            />
+          </svg>
+        </sgds-button>
+      </div>
+      <div id="announcer" role="region" aria-live="assertive" class="visually-hidden">${this.value}</div>
+    `;
+    }
+}
+SgdsQuantityToggle.styles = [...SgdsElement.styles, css_248z, css_248z$1];
+__decorate([
+    query("sgds-input")
+], SgdsQuantityToggle.prototype, "input", void 0);
+__decorate([
+    query("sgds-button[ariaLabel^='increase by']")
+], SgdsQuantityToggle.prototype, "plusBtn", void 0);
+__decorate([
+    query("sgds-button[ariaLabel^='decrease by']")
+], SgdsQuantityToggle.prototype, "minusBtn", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsQuantityToggle.prototype, "name", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SgdsQuantityToggle.prototype, "min", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SgdsQuantityToggle.prototype, "max", void 0);
+__decorate([
+    property()
+], SgdsQuantityToggle.prototype, "size", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SgdsQuantityToggle.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsQuantityToggle.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], SgdsQuantityToggle.prototype, "buttonVariant", void 0);
+__decorate([
+    property({ type: Number })
+], SgdsQuantityToggle.prototype, "step", void 0);
+__decorate([
+    defaultValue()
+], SgdsQuantityToggle.prototype, "defaultValue", void 0);
+
+export { SgdsQuantityToggle, SgdsQuantityToggle as default };
+//# sourceMappingURL=sgds-quantity-toggle.js.map

package/react/components/QuantityToggle/sgds-quantity-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-quantity-toggle.js","sources":["../../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { FormSubmitController, SgdsFormControl } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport SgdsButton, { ButtonVariant } from \"../Button/sgds-button\";\nimport quantityToggleStyle from \"./quantity-toggle.css\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport SgdsInput from \"../Input/sgds-input\";\nimport svgStyles from \"../../styles/svg.css\";\n/**\n * @summary The quantity toggle component is used to increase or decrease an incremental venue,  best used when the user needs to enter or adjust the quantity of a selected item.\n *\n * @csspart base - The base wrapper of the quantity toggle component.\n * @csspart button - The plus and minus button of quantity toggle\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n *\n */\nexport class SgdsQuantityToggle extends ScopedElementsMixin(SgdsElement) implements SgdsFormControl {\n  static styles = [...SgdsElement.styles, svgStyles, quantityToggleStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-button\": SgdsButton,\n      \"sgds-input\": SgdsInput\n    };\n  }\n  /**@internal */\n  @query(\"sgds-input\") private input: HTMLInputElement;\n  /**@internal */\n  @query(\"sgds-button[ariaLabel^='increase by']\") private plusBtn: HTMLButtonElement;\n  /**@internal */\n  @query(\"sgds-button[ariaLabel^='decrease by']\") private minusBtn: HTMLButtonElement;\n\n  /**@internal */\n  private readonly formSubmitController = new FormSubmitController(this);\n\n  /** The name of the input */\n  @property({ type: String, reflect: true }) name: string;\n\n  /** The input's minimum value. */\n  @property({ type: Number, reflect: true }) min: number;\n  /** The input's maximum value. */\n  @property({ type: Number, reflect: true }) max: number;\n\n  /**Controls the size of the quantity toggle */\n  @property() size: \"sm\" | \"md\" = \"md\";\n\n  /**The input's value. Set to 0 by default */\n  @property({ type: Number, reflect: true }) value = 0;\n\n  /** Disables the entire quantity toggle  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The quantity toggle's button variants */\n  @property({ type: String }) buttonVariant: ButtonVariant = \"primary\";\n\n  /**\n   * Controls the incremental / decremental value of the input\n   */\n  @property({ type: Number }) step = 1;\n\n  /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = 0;\n\n  /** @internal The id forwarded to input element */\n  private inputId: string = genId(\"quantity-toggle\", \"input\");\n\n  private _handleChange() {\n    if (parseInt(this.input.value) < this.step || this.input.value === \"\") {\n      this.input.value = \"0\";\n    }\n    this.value = parseInt(this.input.value);\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const allowedKeys = [\n      \"Backspace\",\n      \"ArrowUp\",\n      \"ArrowDown\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      ...Array.from(Array(10).keys()).map(key => key.toString()),\n      \"Tab\"\n    ];\n\n    // Allow keydown event only if the pressed key is in the allowedKeys array\n    if (!allowedKeys.includes(event.key)) {\n      event.preventDefault();\n    }\n  }\n\n  /** Simulates a click on the plus button */\n  public plus() {\n    this.plusBtn.click();\n  }\n\n  /** Simulates a click on the minus button */\n  public minus() {\n    this.minusBtn.click();\n  }\n\n  private _onPlus(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = parseInt(this.input.value) + parseInt(this.input.step);\n  }\n\n  private _onMinus(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    if (this.value < this.step) {\n      this.value = 0;\n    } else {\n      this.value = parseInt(this.input.value) - parseInt(this.input.step);\n    }\n  }\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=\"${classMap({\n          sgds: true,\n          disabled: this.disabled,\n          \"input-group\": true,\n          [`input-group-${this.size}`]: this.size\n        })}\"\n        variant=\"quantity-toggle\"\n        size=${this.size}\n      >\n        <sgds-button\n          variant=${this.buttonVariant}\n          ariaLabel=${`decrease by ${this.step}`}\n          part=\"button\"\n          @click=${this._onMinus}\n          ?disabled=${this.disabled || (this.min !== undefined ? this.value <= this.min : this.value < 1)}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-dash\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path d=\"M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z\" />\n          </svg>\n        </sgds-button>\n        <sgds-input\n          type=\"number\"\n          class=\"quantity-toggle\"\n          name=${ifDefined(this.name)}\n          step=${ifDefined(this.step)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          .value=${live(this.value.toString())}\n          @sgds-change=${() => this._handleChange()}\n          @sgds-input=${() => this._handleChange()}\n          @keydown=${this._handleKeyDown}\n          ?disabled=${this.disabled}\n          id=${this.inputId}\n        ></sgds-input>\n        <sgds-button\n          variant=${this.buttonVariant}\n          ariaLabel=${`increase by ${this.step}`}\n          part=\"button\"\n          @click=${this._onPlus}\n          ?disabled=${this.disabled || (this.max !== undefined && this.max && this.value >= this.max)}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-plus\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z\"\n            />\n          </svg>\n        </sgds-button>\n      </div>\n      <div id=\"announcer\" role=\"region\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n    `;\n  }\n}\n\nexport default SgdsQuantityToggle;\n"],"names":["svgStyles","quantityToggleStyle"],"mappings":"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"}

package/{components → react/components}/Radio/radio-group.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/Radio/radio-group.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"radio-group.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Radio/radio-group.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`fieldset{border:0;display:flex;flex-direction:column;gap:var(--sgds-spacer-2);margin:0;min-width:0;padding:0}.radio-group-validation-input{display:none}`;
+
+export { css_248z as default };
+//# sourceMappingURL=radio-group.js.map

package/react/components/Radio/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/{components → react/components}/Radio/radio.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/Radio/radio.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"radio.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Radio/radio.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host([checked]){--sgds-form-bg:var(--sgds-info-filled);--sgds-form-border-color:var(--sgds-form-bg)}:host(:focus-visible){outline:none}input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.form-check{display:block;margin-bottom:var(--sgds-spacer-2);min-height:2rem}.form-check .form-check-input{margin-right:var(--sgds-form-input-margin-right)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:contain;border:var(--sgds-form-border-width) solid var(--sgds-border-color);flex-shrink:0;height:1.125em;margin-top:.4375em;vertical-align:top;width:1.125em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:focus{border-color:var(--sgds-form-border-color);box-shadow:var(--sgds-form-focus-box-shadow);outline:0}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-bg);border-color:var(--sgds-form-border-color)}.form-check-input:checked[type=radio],.form-check-input[checked][type=radio]{--sgds-radio-bg-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E")}.form-check-input:disabled{border-color:var(--sgds-form-border-color);cursor:not-allowed;filter:none;opacity:var(--sgds-disabled-opacity)}.form-check-input.is-invalid,.form-check-input:invalid{border-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:checked,.form-check-input:invalid:checked{background-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:focus,.form-check-input:invalid:focus{box-shadow:var(--sgds-form-focus-invalid-box-shadow)}.form-check-input.is-invalid~.form-check-label,.form-check-input:invalid~.form-check-label{color:var(--sgds-form-invalid-color)}.form-check-inline{display:inline-block;margin-bottom:0;margin-right:var(--sgds-form-inline-margin-right)}:host([last-of-type]) .form-check{margin-bottom:0}`;
+
+export { css_248z as default };
+//# sourceMappingURL=radio.js.map

package/react/components/Radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/{components → react/components}/Radio/sgds-radio-group.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/react/components/Radio/sgds-radio-group.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-radio-group.cjs.js","sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n *\n *\n */\nexport class SgdsRadioGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, feedbackStyles, formLabelStyles, radioGroupStyles];\n  /**@internal */\n  protected readonly formSubmitController = new FormSubmitController(this, {\n    defaultValue: (control: SgdsRadioGroup) => control.defaultValue\n  });\n  /**@internal */\n  @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n  /**@internal */\n  @query(\".radio-group-validation-input\") input: HTMLInputElement;\n  /**@internal */\n  @state() defaultValue = \"\";\n  /**@internal */\n  @state() private customErrorMessage = \"\";\n  /**  This will be true when the control is in an invalid state. */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /** The selected value of the control. */\n  @property({ reflect: true }) value = \"\";\n\n  /** The name assigned to the radio controls. */\n  @property({ reflect: true }) name = \"option\";\n\n  /** Ensures a child radio is checked before allowing the containing form to submit. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.emit(\"sgds-change\", { detail: { value: this.value } });\n    this._updateCheckedRadio();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n  }\n\n  firstUpdated() {\n    const radios = this._radios;\n    radios.forEach((item, index) => {\n      if (radios.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case radios.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n  }\n\n  /** Gets and return the ValidityState object.  */\n  get validity(): ValidityState {\n    const hasMissingData = !((this.value && this.required) || !this.required);\n    const hasCustomError = this.customErrorMessage !== \"\";\n    return {\n      badInput: false,\n      customError: hasCustomError,\n      patternMismatch: false,\n      rangeOverflow: false,\n      rangeUnderflow: false,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n      valid: hasMissingData ? false : true,\n      valueMissing: !hasMissingData\n    };\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity(): boolean {\n    const validity = this.validity;\n\n    this.invalid = !validity.valid;\n\n    if (!validity.valid) {\n      this._showNativeErrorMessage();\n    }\n\n    return !this.invalid;\n  }\n  /**@internal */\n  @queryAssignedElements()\n  private _radios!: Array<SgdsRadio>;\n\n  private _handleRadioClick(event: MouseEvent) {\n    const target = event.target as SgdsRadio;\n\n    if (target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio === target));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n      return;\n    }\n\n    const radios = this._radios.filter(radio => !radio.disabled);\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n    //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n    const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n    let index = radios.indexOf(checkedRadio) + incr;\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this._radios.forEach(radio => {\n      radio.checked = false;\n      radio.tabIndex = -1;\n    });\n\n    this.value = radios[index].value;\n    radios[index].checked = true;\n    radios[index].tabIndex = 0;\n    radios[index].focus();\n\n    event.preventDefault();\n  }\n\n  private _handleLabelClick() {\n    const radios = this._radios;\n    const checked = radios.find(radio => radio.checked);\n    const radioToFocus = checked || radios[0];\n\n    // Move focus to the checked radio (or the first one if none are checked) when clicking the label\n    if (radioToFocus) {\n      radioToFocus.focus();\n    }\n  }\n\n  private _handleSlotChange() {\n    const radios = this._radios;\n\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n\n    if (!radios.some(radio => radio.checked)) {\n      if (radios[0]) radios[0].tabIndex = 0;\n    }\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n    this._radios.forEach(radio => (radio.invalid = true));\n  }\n\n  private _showNativeErrorMessage() {\n    this.input.reportValidity();\n  }\n\n  private _updateCheckedRadio() {\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n    this.invalid = !this.validity.valid;\n    this._radios.forEach(radio => (radio.invalid = this.invalid));\n  }\n\n  render() {\n    const defaultSlot = html`\n      <div>\n        <slot\n          @click=${this._handleRadioClick}\n          @keydown=${this._handleKeyDown}\n          @slotchange=${this._handleSlotChange}\n          role=\"presentation\"\n        ></slot>\n      </div>\n    `;\n    return html`\n      <fieldset name=${this.name}>\n        <label\n          @click=${this._handleLabelClick}\n          class=${classMap({\n            \"form-label\": true,\n            required: this.required\n          })}\n        >\n          <slot name=\"label\"></slot>\n        </label>\n        ${defaultSlot}\n        <input\n          type=\"text\"\n          class=\"radio-group-validation-input ${classMap({\n            \"is-invalid\": this.hasFeedback && this.invalid\n          })}\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n        />\n        ${this.hasFeedback ? html`<div class=\"invalid-feedback\">${this.invalidFeedback}</div>` : \"\"}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsRadioGroup;\n"],"names":["SgdsElement","FormSubmitController","html","classMap","feedbackStyles","formLabelStyles","radioGroupStyles","__decorate","query","state","property","watch","queryAssignedElements"],"mappings":";;;;;;;;;;;;;;;;AAWA;;;;;;;;AAQG;AACG,MAAO,cAAe,SAAQA,sBAAW,CAAA;AAA/C,IAAA,WAAA,GAAA;;;AAGqB,QAAA,IAAA,CAAA,oBAAoB,GAAG,IAAIC,yBAAoB,CAAC,IAAI,EAAE;YACvE,YAAY,EAAE,CAAC,OAAuB,KAAK,OAAO,CAAC,YAAY;AAChE,SAAA,CAAC,CAAC;;QAMM,IAAY,CAAA,YAAA,GAAG,EAAE,CAAC;;QAEV,IAAkB,CAAA,kBAAA,GAAG,EAAE,CAAC;;QAEG,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;;QAG/B,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;;QAGX,IAAI,CAAA,IAAA,GAAG,QAAQ,CAAC;;QAGD,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGlB,IAAe,CAAA,eAAA,GAAG,EAAE,CAAC;;QAEpB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;KAwLjE;IArLC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAC5D,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;KAChC;IAED,YAAY,GAAA;AACV,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAC5B,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC7B,YAAA,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;gBACrB,QAAQ,KAAK;AACX,oBAAA,KAAK,CAAC;AACJ,wBAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;wBACvC,MAAM;AAER,oBAAA,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC;AACpB,wBAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;wBACtC,MAAM;AAER,oBAAA;AACE,wBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;iBACxC;aACF;AACH,SAAC,CAAC,CAAC;KACJ;;AAGD,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,MAAM,cAAc,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC1E,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,kBAAkB,KAAK,EAAE,CAAC;QACtD,OAAO;AACL,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,WAAW,EAAE,cAAc;AAC3B,YAAA,eAAe,EAAE,KAAK;AACtB,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,cAAc,EAAE,KAAK;AACrB,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,YAAY,EAAE,KAAK;YACnB,KAAK,EAAE,cAAc,GAAG,KAAK,GAAG,IAAI;YACpC,YAAY,EAAE,CAAC,cAAc;SAC9B,CAAC;KACH;;IAGM,cAAc,GAAA;AACnB,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;AAE/B,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC;AAE/B,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;YACnB,IAAI,CAAC,uBAAuB,EAAE,CAAC;SAChC;AAED,QAAA,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;KACtB;AAKO,IAAA,iBAAiB,CAAC,KAAiB,EAAA;AACzC,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAmB,CAAC;AAEzC,QAAA,IAAI,MAAM,CAAC,QAAQ,EAAE;YACnB,OAAO;SACR;AAED,QAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;AAC1B,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;AAC5B,QAAA,MAAM,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC;KAC7D;AAEO,IAAA,cAAc,CAAC,KAAoB,EAAA;;QACzC,IAAI,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YACjF,OAAO;SACR;AAED,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC7D,MAAM,YAAY,GAAG,CAAA,EAAA,GAAA,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,MAAM,CAAC,CAAC,CAAC,CAAC;;AAEtE,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAC3F,IAAI,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC;AAChD,QAAA,IAAI,KAAK,GAAG,CAAC,EAAE;AACb,YAAA,KAAK,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;SAC3B;QACD,IAAI,KAAK,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YAC7B,KAAK,GAAG,CAAC,CAAC;SACX;AAED,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,IAAG;AAC3B,YAAA,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;AACtB,YAAA,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;AACtB,SAAC,CAAC,CAAC;QAEH,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACjC,QAAA,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;AAC7B,QAAA,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC;AAC3B,QAAA,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;QAEtB,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB;IAEO,iBAAiB,GAAA;AACvB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;AAC5B,QAAA,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC;QACpD,MAAM,YAAY,GAAG,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC;;QAG1C,IAAI,YAAY,EAAE;YAChB,YAAY,CAAC,KAAK,EAAE,CAAC;SACtB;KACF;IAEO,iBAAiB,GAAA;AACvB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAE5B,MAAM,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AAEtE,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,EAAE;YACxC,IAAI,MAAM,CAAC,CAAC,CAAC;AAAE,gBAAA,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC;SACvC;KACF;AAEO,IAAA,cAAc,CAAC,CAAQ,EAAA;QAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;AACpB,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;KACvD;IAEO,uBAAuB,GAAA;AAC7B,QAAA,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;KAC7B;IAEO,mBAAmB,GAAA;AACzB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAC5B,MAAM,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACpC,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;KAC/D;IAED,MAAM,GAAA;QACJ,MAAM,WAAW,GAAGC,QAAI,CAAA,CAAA;;;AAGT,iBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;AACpB,mBAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AAChB,sBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;KAIzC,CAAC;AACF,QAAA,OAAOA,QAAI,CAAA,CAAA;AACQ,qBAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;AAEb,iBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;AACvB,gBAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,YAAY,EAAE,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;;;;UAIF,WAAW,CAAA;;;AAG2B,8CAAA,EAAAA,oBAAQ,CAAC;AAC7C,YAAA,YAAY,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO;SAC/C,CAAC,CAAA;AACU,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;qBAEd,CAAC,CAAQ,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAA;;AAE/C,QAAA,EAAA,IAAI,CAAC,WAAW,GAAGD,QAAI,CAAA,CAAiC,8BAAA,EAAA,IAAI,CAAC,eAAe,CAAA,MAAA,CAAQ,GAAG,EAAE,CAAA;;KAE9F,CAAC;KACH;;AAnNM,cAAA,CAAA,MAAM,GAAG,CAAC,GAAGF,sBAAW,CAAC,MAAM,EAAEI,mBAAc,EAAEC,oBAAe,EAAEC,qBAAgB,CAAC,CAAC;AAMhEC,gBAAA,CAAA;IAA1BC,mBAAK,CAAC,kBAAkB,CAAC;AAA8B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEhBD,gBAAA,CAAA;IAAvCC,mBAAK,CAAC,+BAA+B,CAAC;AAAyB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEvDD,gBAAA,CAAA;AAAR,IAAAE,mBAAK,EAAE;AAAmB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEVF,gBAAA,CAAA;AAAhB,IAAAE,mBAAK,EAAE;AAAiC,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEGF,gBAAA,CAAA;IAA3CG,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG/BH,gBAAA,CAAA;AAA5B,IAAAG,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGXH,gBAAA,CAAA;AAA5B,IAAAG,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGDH,gBAAA,CAAA;IAA3CG,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlBH,gBAAA,CAAA;IAA1CG,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAsB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEpBH,gBAAA,CAAA;IAA3CG,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhEH,gBAAA,CAAA;IADCI,WAAK,CAAC,OAAO,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAI9C,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA,CAAA;AA4DOJ,gBAAA,CAAA;AADP,IAAAK,mCAAqB,EAAE;AACW,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}