agnosticui-core 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/components/Select/core/_Select.js

@@ -1,30 +1,63 @@
 import { LitElement as u, css as g, html as n } from "lit";
-import { n as a } from "../../../property-CemaeiRl.js";
-import { e as b } from "../../../query-BykXNUlT.js";
-import { isHorizontalLabel as h, createFormControlIds as f, buildAriaDescribedBy as m } from "../../../shared/form-control-utils.js";
+import { n as i } from "../../../property-CemaeiRl.js";
+import { e as m } from "../../../query-BykXNUlT.js";
+import { isHorizontalLabel as p, createFormControlIds as b, buildAriaDescribedBy as f } from "../../../shared/form-control-utils.js";
 import { formControlStyles as v } from "../../../shared/form-control-styles.js";
-var y = Object.defineProperty, o = (p, e, r, i) => {
-  for (var s = void 0, l = p.length - 1, d; l >= 0; l--)
-    (d = p[l]) && (s = d(e, r, s) || s);
-  return s && y(e, r, s), s;
+import { FaceMixin as y, syncInnerInputValidity as $ } from "../../../shared/face-mixin.js";
+var E = Object.defineProperty, s = (h, e, o, r) => {
+  for (var a = void 0, l = h.length - 1, d; l >= 0; l--)
+    (d = h[l]) && (a = d(e, o, a) || a);
+  return a && E(e, o, a), a;
 };
-const c = class c extends u {
+const c = class c extends y(u) {
   constructor() {
-    super(...arguments), this.size = "", this.multiple = !1, this.disabled = !1, this.name = "", this.label = "", this.labelPosition = "top", this.labelHidden = !1, this.noLabel = !1, this.required = !1, this.invalid = !1, this.errorMessage = "", this.helpText = "";
+    super(...arguments), this.size = "", this.multiple = !1, this.disabled = !1, this.label = "", this.labelPosition = "top", this.labelHidden = !1, this.noLabel = !1, this.required = !1, this.invalid = !1, this.errorMessage = "", this.helpText = "";
   }
+  // ─── FACE ─────────────────────────────────────────────────────────────────
+  /**
+   * FACE lifecycle: called when the parent form is reset.
+   * Restores each option to its defaultSelected state (the `selected`
+   * attribute from the original HTML), then re-syncs the form value.
+   */
+  formResetCallback() {
+    this.selectElement && Array.from(this.selectElement.options).forEach((e) => e.selected = e.defaultSelected), this._syncFormValue(), this._internals.setValidity({});
+  }
+  /**
+   * Sync the form value to ElementInternals.
+   * Single select: submits the selected value as a string.
+   * Multi-select: uses the FormData overload to submit all selected values
+   * under the same key (matching native <select multiple> behavior).
+   */
+  _syncFormValue() {
+    if (this.selectElement)
+      if (this.multiple) {
+        const e = new FormData();
+        Array.from(this.selectElement.selectedOptions).forEach((o) => {
+          e.append(this.name, o.value);
+        }), this._internals.setFormValue(e);
+      } else
+        this._internals.setFormValue(this.selectElement.value || "");
+  }
+  /**
+   * Sync validity to ElementInternals by delegating to the inner <select>.
+   */
+  _syncValidity() {
+    $(this._internals, this.selectElement);
+  }
+  // ─── End FACE ─────────────────────────────────────────────────────────────
   firstUpdated() {
     this.handleSlotChange();
     const e = this.shadowRoot?.querySelector("slot");
-    e && e.addEventListener("slotchange", () => this.handleSlotChange());
+    e && e.addEventListener("slotchange", () => this.handleSlotChange()), this._syncFormValue(), this._syncValidity();
   }
   handleSlotChange() {
     if (!this.selectElement) return;
     const e = this.shadowRoot?.querySelector("slot");
     if (!e) return;
-    e.assignedNodes().forEach((i) => {
-      if (i.nodeType === Node.ELEMENT_NODE) {
-        const s = i;
-        (s.tagName === "OPTION" || s.tagName === "OPTGROUP") && this.selectElement.appendChild(i);
+    e.assignedNodes().forEach((r) => {
+      if (r.nodeType === Node.ELEMENT_NODE) {
+        const a = r;
+        (a.tagName === "OPTION" || a.tagName === "OPTGROUP") && this.selectElement.appendChild(r);
       }
     });
   }
@@ -44,35 +77,35 @@ const c = class c extends u {
     })), this.onBlur && this.onBlur(e);
   }
   handleChange(e) {
-    const r = e.target;
-    let i;
-    this.multiple ? i = Array.from(r.selectedOptions).map((l) => l.value) : i = r.value;
-    const s = new CustomEvent("change", {
-      detail: { value: i },
+    const o = e.target;
+    let r;
+    this.multiple ? r = Array.from(o.selectedOptions).map((l) => l.value) : r = o.value, this._syncFormValue(), this._syncValidity();
+    const a = new CustomEvent("change", {
+      detail: { value: r },
       bubbles: !0,
       composed: !0
     });
-    this.dispatchEvent(s), this.onChange && this.onChange(s);
+    this.dispatchEvent(a), this.onChange && this.onChange(a);
   }
   renderLabel(e) {
     if (!this.label || this.noLabel) return "";
-    const r = [];
-    return h(this.labelPosition) ? (r.push("ag-form-control__label--horizontal"), r.push(`ag-form-control__label--${this.labelPosition}`)) : this.labelPosition === "bottom" && r.push(`ag-form-control__label--${this.labelPosition}`), n`
+    const o = [];
+    return p(this.labelPosition) ? (o.push("ag-form-control__label--horizontal"), o.push(`ag-form-control__label--${this.labelPosition}`)) : this.labelPosition === "bottom" && o.push(`ag-form-control__label--${this.labelPosition}`), n`
       <label
         for=${e.inputId}
-        class="ag-form-control__label ${this.labelHidden ? "ag-form-control__label--hidden" : ""} ${this.required ? "ag-form-control__label--required" : ""} ${r.join(" ")}"
+        class="ag-form-control__label ${this.labelHidden ? "ag-form-control__label--hidden" : ""} ${this.required ? "ag-form-control__label--required" : ""} ${o.join(" ")}"
       >
         ${this.label}
       </label>
     `;
   }
   render() {
-    const e = f("select"), r = m({
+    const e = b("select"), o = f({
       helperId: e.helperId,
       errorId: e.errorId,
       hasHelper: !!this.helpText && !this.invalid,
       hasError: !!this.invalid && !!this.errorMessage
-    }), i = h(this.labelPosition), s = n`
+    }), r = p(this.labelPosition), a = n`
       <select
         id=${e.inputId}
         class="select"
@@ -88,7 +121,7 @@ const c = class c extends u {
         @change=${this.handleChange}
         aria-disabled=${this.disabled ? "true" : "false"}
         aria-invalid=${this.invalid ? "true" : "false"}
-        aria-describedby=${r || void 0}
+        aria-describedby=${o || void 0}
       ></select>
       <slot></slot>
     `, l = this.helpText && !this.invalid ? n`<div id=${e.helperId} class="ag-form-control__helper">
@@ -96,21 +129,21 @@ const c = class c extends u {
         </div>` : "", d = this.invalid && this.errorMessage ? n`<div id=${e.errorId} class="ag-form-control__error">
           ${this.errorMessage}
         </div>` : "";
-    return i ? n`
+    return r ? n`
         <div class="ag-form-control--horizontal">
           ${this.renderLabel(e)}
-          ${s}
+          ${a}
         </div>
         ${l}
         ${d}
       ` : this.labelPosition === "bottom" ? n`
-        ${s}
+        ${a}
         ${l}
         ${d}
         ${this.renderLabel(e)}
       ` : n`
       ${this.renderLabel(e)}
-      ${s}
+      ${a}
       ${l}
       ${d}
     `;
@@ -140,7 +173,7 @@ c.styles = [
       /* Base styling */
       padding: var(--ag-space-2) var(--ag-space-8) var(--ag-space-2) var(--ag-space-3);
       -moz-padding-start: calc(var(--ag-space-3) - 3px);
-      font-size: var(--ag-font-size-base);
+      font-size: var(--ag-font-size-sm);
       font-weight: 400;
       line-height: 1.5;
       font-family: inherit;
@@ -190,7 +223,7 @@ c.styles = [
       padding-block-start: var(--ag-space-1);
       padding-block-end: var(--ag-space-1);
       padding-inline-start: var(--ag-space-2);
-      font-size: var(--ag-font-size-small);
+      font-size: var(--ag-font-size-sm);
     }
 
     /* Large size variant */
@@ -211,59 +244,56 @@ c.styles = [
   `
 ];
 let t = c;
-o([
-  a({ type: String, reflect: !0 })
+s([
+  i({ type: String, reflect: !0 })
 ], t.prototype, "size");
-o([
-  a({ type: Boolean, reflect: !0 })
+s([
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "multiple");
-o([
-  a({ type: Boolean, reflect: !0 })
+s([
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled");
-o([
-  a({ type: String })
-], t.prototype, "name");
-o([
-  a({ type: Number, attribute: "multiple-size" })
+s([
+  i({ type: Number, attribute: "multiple-size" })
 ], t.prototype, "multipleSize");
-o([
-  a({ type: String })
+s([
+  i({ type: String })
 ], t.prototype, "label");
-o([
-  a({ type: String, attribute: "label-position" })
+s([
+  i({ type: String, attribute: "label-position" })
 ], t.prototype, "labelPosition");
-o([
-  a({ type: Boolean, attribute: "label-hidden" })
+s([
+  i({ type: Boolean, attribute: "label-hidden" })
 ], t.prototype, "labelHidden");
-o([
-  a({ type: Boolean, attribute: "no-label" })
+s([
+  i({ type: Boolean, attribute: "no-label" })
 ], t.prototype, "noLabel");
-o([
-  a({ type: Boolean })
+s([
+  i({ type: Boolean })
 ], t.prototype, "required");
-o([
-  a({ type: Boolean })
+s([
+  i({ type: Boolean })
 ], t.prototype, "invalid");
-o([
-  a({ type: String, attribute: "error-message" })
+s([
+  i({ type: String, attribute: "error-message" })
 ], t.prototype, "errorMessage");
-o([
-  a({ type: String, attribute: "help-text" })
+s([
+  i({ type: String, attribute: "help-text" })
 ], t.prototype, "helpText");
-o([
-  a({ attribute: !1 })
+s([
+  i({ attribute: !1 })
 ], t.prototype, "onClick");
-o([
-  a({ attribute: !1 })
+s([
+  i({ attribute: !1 })
 ], t.prototype, "onFocus");
-o([
-  a({ attribute: !1 })
+s([
+  i({ attribute: !1 })
 ], t.prototype, "onBlur");
-o([
-  a({ attribute: !1 })
+s([
+  i({ attribute: !1 })
 ], t.prototype, "onChange");
-o([
-  b("select")
+s([
+  m("select")
 ], t.prototype, "selectElement");
 customElements.get("ag-select") || customElements.define("ag-select", t);
 export {

package/dist/components/SelectionButton/core/SelectionButton.d.ts

@@ -0,0 +1,9 @@
+import { AgSelectionButton } from './_SelectionButton.js';
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'ag-selection-button': AgSelectionButton;
+    }
+}
+export * from './_SelectionButton.js';
+//# sourceMappingURL=SelectionButton.d.ts.map

package/dist/components/SelectionButton/core/SelectionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionButton.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectionButton/core/SelectionButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAM1D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF;AAED,cAAc,uBAAuB,CAAC"}

package/dist/components/SelectionButton/core/SelectionButton.js

@@ -0,0 +1,5 @@
+import { AgSelectionButton as t } from "./_SelectionButton.js";
+customElements.get("ag-selection-button") || customElements.define("ag-selection-button", t);
+export {
+  t as AgSelectionButton
+};

package/dist/components/SelectionButton/core/_SelectionButton.d.ts

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+
+export type SelectionButtonTheme = 'success' | 'info' | 'error' | 'warning' | 'monochrome' | '';
+export type SelectionButtonSize = 'sm' | 'md' | 'lg';
+export type SelectionButtonShape = '' | 'rounded' | 'capsule';
+export interface SelectionButtonProps {
+    /** Unique value for this button (required) */
+    value: string;
+    /** Accessible label for this button (required) */
+    label: string;
+    /** Whether this button is selected */
+    checked?: boolean;
+    /** Whether this button is disabled */
+    disabled?: boolean;
+}
+interface SelectionButtonInternalProps {
+    /** Input type (set by parent group) */
+    _type?: 'radio' | 'checkbox';
+    /** Input name (set by parent group) */
+    _name?: string;
+    /** Theme (set by parent group) */
+    _theme?: SelectionButtonTheme;
+    /** Size (set by parent group) */
+    _size?: SelectionButtonSize;
+    /** Shape (set by parent group) */
+    _shape?: SelectionButtonShape;
+}
+export declare class AgSelectionButton extends LitElement implements SelectionButtonProps, SelectionButtonInternalProps {
+    static styles: import('lit').CSSResult;
+    value: string;
+    label: string;
+    checked: boolean;
+    disabled: boolean;
+    _type: 'radio' | 'checkbox';
+    _name: string;
+    _theme: SelectionButtonTheme;
+    _size: SelectionButtonSize;
+    _shape: SelectionButtonShape;
+    constructor();
+    focus(): void;
+    private _handleClick;
+    private _handleKeyDown;
+    private _renderIndicator;
+    render(): import('lit').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=_SelectionButton.d.ts.map

package/dist/components/SelectionButton/core/_SelectionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_SelectionButton.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectionButton/core/_SelectionButton.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,EAAE,CAAC;AAChG,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrD,MAAM,MAAM,oBAAoB,GAAG,EAAE,GAAG,SAAS,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,oBAAoB;IACnC,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,UAAU,4BAA4B;IACpC,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC7B,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,iCAAiC;IACjC,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,kCAAkC;IAClC,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B;AAED,qBAAa,iBAAkB,SAAQ,UAAW,YAAW,oBAAoB,EAAE,4BAA4B;IAC7G,OAAgB,MAAM,0BAuWpB;IAGM,KAAK,EAAE,MAAM,CAAC;IAGd,KAAK,EAAE,MAAM,CAAC;IAGd,OAAO,EAAE,OAAO,CAAC;IAGjB,QAAQ,EAAE,OAAO,CAAC;IAIlB,KAAK,EAAE,OAAO,GAAG,UAAU,CAAC;IAG5B,KAAK,EAAE,MAAM,CAAC;IAGd,MAAM,EAAE,oBAAoB,CAAC;IAG7B,KAAK,EAAE,mBAAmB,CAAC;IAG3B,MAAM,EAAE,oBAAoB,CAAC;;IAe5B,KAAK;IAKd,OAAO,CAAC,YAAY;IAsBpB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,gBAAgB;IAoBf,MAAM;CA4ChB"}