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

package/dist/components/Input/core/_Input.BACKUP.js

@@ -1,511 +0,0 @@
-import { LitElement as c, css as b, html as n } from "lit";
-import { n as e } from "../../../property-CemaeiRl.js";
-import { o as u } from "../../../if-defined-C8i28hSj.js";
-import { generateUniqueId as f } from "../../../utils/unique-id.js";
-import { hasSlotContent as p } from "../../../utils/slot.js";
-var v = Object.defineProperty, a = (g, i, r, s) => {
-  for (var d = void 0, o = g.length - 1, l; o >= 0; o--)
-    (l = g[o]) && (d = l(i, r, d) || d);
-  return d && v(i, r, d), d;
-};
-const h = class h extends c {
-  constructor() {
-    super(), this._inputId = f("ag-input"), this._hasLeftAddon = !1, this._hasRightAddon = !1, this.label = "", this.labelHidden = !1, this.noLabel = !1, this.ariaLabel = "", this.labelledBy = "", this.type = "text", this.value = "", this.placeholder = "", this.rows = 4, this.cols = 50, this.size = "default", this.capsule = !1, this.rounded = !1, this.underlined = !1, this.underlinedWithBackground = !1, this.inline = !1, this.required = !1, this.disabled = !1, this.readonly = !1, this.invalid = !1, this.errorMessage = "", this.helpText = "";
-  }
-  /**
-   * Event Handlers
-   * Following AgnosticUI v2 event conventions:
-   * - Native composed events (input, change, click) just invoke callbacks
-   * - Native non-bubbling events (focus, blur) re-dispatch from host + invoke callbacks
-   */
-  _handleClick(i) {
-    this.onClick && this.onClick(i);
-  }
-  _handleInput(i) {
-    const r = i.target;
-    this.value = r.value, this.onInput && this.onInput(i);
-  }
-  _handleChange(i) {
-    const r = i.target;
-    this.value = r.value, this.onChange && this.onChange(i);
-  }
-  _handleFocus(i) {
-    this.dispatchEvent(new FocusEvent("focus", {
-      bubbles: !0,
-      composed: !0,
-      relatedTarget: i.relatedTarget
-    })), this.onFocus && this.onFocus(i);
-  }
-  _handleBlur(i) {
-    this.dispatchEvent(new FocusEvent("blur", {
-      bubbles: !0,
-      composed: !0,
-      relatedTarget: i.relatedTarget
-    })), this.onBlur && this.onBlur(i);
-  }
-  /**
-   * Handle slot changes to detect if addons are present
-   */
-  _handleSlotChange(i) {
-    const r = i.target, s = r.name;
-    s === "addon-left" ? this._hasLeftAddon = p(r) : s === "addon-right" && (this._hasRightAddon = p(r)), this.requestUpdate();
-  }
-  firstUpdated() {
-    setTimeout(() => {
-      const i = this.shadowRoot?.querySelector('slot[name="addon-left"]'), r = this.shadowRoot?.querySelector('slot[name="addon-right"]'), s = this._hasLeftAddon, d = this._hasRightAddon;
-      this._hasLeftAddon = p(i), this._hasRightAddon = p(r), (s !== this._hasLeftAddon || d !== this._hasRightAddon) && this.requestUpdate();
-    }, 0);
-  }
-  render() {
-    const i = this.type === "textarea", r = this._hasLeftAddon || this._hasRightAddon, s = `${this._inputId}-help`, d = `${this._inputId}-error`, o = [];
-    this.helpText && o.push(s), this.errorMessage && o.push(d), this.labelledBy && o.push(this.labelledBy);
-    const l = ["ag-input"];
-    this.size !== "default" && l.push(`ag-input--${this.size}`), this.rounded && l.push("ag-input--rounded"), this.underlined && l.push("ag-input--underlined"), this.underlinedWithBackground && l.push("ag-input--underlined-with-background");
-    const _ = i ? n`
-      <textarea
-        id="${this._inputId}"
-        part="ag-textarea"
-        class="ag-input__textarea"
-        .value="${this.value}"
-        placeholder="${u(this.placeholder || void 0)}"
-        rows="${this.rows}"
-        cols="${this.cols}"
-        ?required="${this.required}"
-        ?disabled="${this.disabled}"
-        ?readonly="${this.readonly}"
-        aria-required="${this.required ? "true" : "false"}"
-        aria-invalid="${this.invalid ? "true" : "false"}"
-        aria-label="${u(this.ariaLabel || void 0)}"
-        aria-labelledby="${u(this.labelledBy || void 0)}"
-        aria-describedby="${o.length > 0 ? o.join(" ") : u(void 0)}"
-        @click=${this._handleClick}
-        @input=${this._handleInput}
-        @change=${this._handleChange}
-        @focus=${this._handleFocus}
-        @blur=${this._handleBlur}
-      ></textarea>
-    ` : n`
-      <input
-        type="${this.type}"
-        id="${this._inputId}"
-        part="ag-input"
-        class="ag-input__input"
-        .value="${this.value}"
-        placeholder="${u(this.placeholder || void 0)}"
-        ?required="${this.required}"
-        ?disabled="${this.disabled}"
-        ?readonly="${this.readonly}"
-        aria-required="${this.required ? "true" : "false"}"
-        aria-invalid="${this.invalid ? "true" : "false"}"
-        aria-label="${u(this.ariaLabel || void 0)}"
-        aria-labelledby="${u(this.labelledBy || void 0)}"
-        aria-describedby="${o.length > 0 ? o.join(" ") : u(void 0)}"
-        @click=${this._handleClick}
-        @input=${this._handleInput}
-        @change=${this._handleChange}
-        @focus=${this._handleFocus}
-        @blur=${this._handleBlur}
-      />
-    `;
-    return n`
-      <div class="${l.join(" ")}" part="ag-input-wrapper">
-        ${this.noLabel ? "" : n`
-          <label
-            for="${this._inputId}"
-            part="ag-input-label"
-            class="ag-input__label ${this.labelHidden ? "ag-input__label--hidden" : ""}"
-          >
-            ${this.label}
-            ${this.required ? n`
-              <span class="ag-input__required" part="ag-input-required" aria-hidden="true">*</span>
-            ` : ""}
-          </label>
-        `}
-
-        ${this.helpText ? n`
-          <div class="ag-input__help" id="${s}" part="ag-input-help">
-            ${this.helpText}
-          </div>
-        ` : ""}
-
-        ${this.errorMessage ? n`
-          <div class="ag-input__error" id="${d}" part="ag-input-error">
-            ${this.errorMessage}
-          </div>
-        ` : n`
-          <div class="ag-input__error" id="${d}" part="ag-input-error" hidden></div>
-        `}
-
-        ${r ? n`
-          <div class="ag-input__field" part="ag-input-field-wrapper">
-            ${this._hasLeftAddon ? n`
-              <div class="ag-input__addon ag-input__addon--left" part="ag-input-addon-left">
-                <slot name="addon-left" @slotchange=${this._handleSlotChange}></slot>
-              </div>
-            ` : n`
-              <slot name="addon-left" @slotchange=${this._handleSlotChange} style="display: none;"></slot>
-            `}
-
-            ${_}
-
-            ${this._hasRightAddon ? n`
-              <div class="ag-input__addon ag-input__addon--right" part="ag-input-addon-right">
-                <slot name="addon-right" @slotchange=${this._handleSlotChange}></slot>
-              </div>
-            ` : n`
-              <slot name="addon-right" @slotchange=${this._handleSlotChange} style="display: none;"></slot>
-            `}
-          </div>
-        ` : n`
-          ${_}
-          <slot name="addon-left" @slotchange=${this._handleSlotChange} style="display: none;"></slot>
-          <slot name="addon-right" @slotchange=${this._handleSlotChange} style="display: none;"></slot>
-        `}
-      </div>
-    `;
-  }
-};
-h.styles = b`
-    :host {
-      display: block;
-    }
-
-    /* Label Above Input - BBC GEL Best Practice
-     *
-     * Why Label Above (BBC GEL):
-     * - Mobile-friendly: Labels above work better on small screens
-     * - Accessibility standard: Clear visual hierarchy
-     * - Cognitive accessibility: Easier to scan and understand
-     * - International: Works with various text lengths/languages
-     *
-     * Note: Labels below inputs are possible via customization:
-     * Use noLabel prop + external <ag-label> or <label> for custom positioning
-     */
-    .ag-input__label {
-      display: block;
-      margin-block-end: var(--ag-space-2);
-      font-size: var(--ag-font-size-base);
-      color: var(--ag-text-primary);
-    }
-
-    .ag-input__label--hidden {
-      position: absolute !important;
-      width: 1px !important;
-      height: 1px !important;
-      padding: 0 !important;
-      margin: -1px !important;
-      overflow: hidden !important;
-      clip: rect(0, 0, 0, 0) !important;
-      white-space: nowrap !important;
-      border: 0 !important;
-    }
-
-    .ag-input__input,
-    .ag-input__textarea {
-      box-sizing: border-box;
-      width: 100%;
-      padding: var(--ag-space-2) var(--ag-space-3);
-      font-size: var(--ag-font-size-base);
-      line-height: var(--ag-line-height-base);
-      color: var(--ag-text-primary);
-      background-color: var(--ag-background-primary);
-      border: 1px solid var(--ag-border-subtle);
-      border-radius: 0; /* Make it rectangular by default */
-      transition: all var(--ag-motion-medium);
-    }
-
-    .ag-input__input::placeholder,
-    .ag-input__textarea::placeholder {
-      color: var(--ag-text-muted);
-      opacity: 1;
-    }
-
-    .ag-input__input:focus-visible,
-    .ag-input__textarea:focus-visible {
-      outline: var(--ag-focus-width) solid rgba(var(--ag-focus), 0.5);
-      outline-offset: var(--ag-focus-offset);
-      border-color: rgba(var(--ag-focus), 0.6);
-    }
-
-    .ag-input__textarea {
-      resize: vertical;
-    }
-
-    :host([inline]) {
-      display: inline-block;
-    }
-
-    /* Sizes */
-    :host([size="small"]) .ag-input__input,
-    :host([size="small"]) .ag-input__textarea {
-      padding: var(--ag-space-1) var(--ag-space-2);
-      font-size: var(--ag-font-size-sm);
-    }
-
-    :host([size="large"]) .ag-input__input,
-    :host([size="large"]) .ag-input__textarea {
-      padding: var(--ag-space-3) var(--ag-space-4);
-      font-size: var(--ag-font-size-lg);
-    }
-
-    /* Variants */
-    :host([capsule]) .ag-input__input,
-    :host([capsule]) .ag-input__textarea {
-      border-radius: var(--ag-radius-full);
-    }
-
-    :host([rounded]) .ag-input__input,
-    :host([rounded]) .ag-input__textarea {
-      border-radius: var(--ag-radius-md);
-    }
-
-    :host([underlined]) .ag-input__input,
-    :host([underlined]) .ag-input__textarea {
-      border-radius: 0;
-      border-width: 0 0 1px 0;
-    }
-
-    :host([underlined-with-background]) .ag-input__input,
-    :host([underlined-with-background]) .ag-input__textarea {
-      border-radius: 0;
-      border-width: 0 0 1px 0;
-      background-color: var(--ag-background-secondary);
-    }
-
-    /* States */
-    :host([disabled]) .ag-input__input,
-    :host([disabled]) .ag-input__textarea {
-      background-color: var(--ag-background-disabled);
-      color: var(--ag-text-muted);
-      cursor: not-allowed;
-    }
-
-    :host([invalid]) .ag-input__input,
-    :host([invalid]) .ag-input__textarea {
-      border-color: var(--ag-danger);
-    }
-
-    :host([invalid]) .ag-input__input:focus-visible,
-    :host([invalid]) .ag-input__textarea:focus-visible {
-      border-color: rgba(var(--ag-danger-rgb), 0.6);
-      outline-color: rgba(var(--ag-danger-rgb), 0.5);
-    }
-
-    /* Addons */
-    .ag-input__field {
-      display: flex;
-      align-items: stretch;
-    }
-
-    .ag-input__addon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: var(--ag-space-2) var(--ag-space-3);
-      font-size: var(--ag-font-size-base);
-      line-height: var(--ag-line-height-base);
-      color: var(--ag-text-primary);
-      /* background-color: var(--ag-background-secondary); */
-      border: 1px solid var(--ag-border-subtle);
-    }
-
-    .ag-input__addon--left {
-      border-inline-end: 0;
-      border-radius: var(--ag-radius-md) 0 0 var(--ag-radius-md);
-    }
-
-    .ag-input__addon--right {
-      border-inline-start: 0;
-      border-radius: 0 var(--ag-radius-md) var(--ag-radius-md) 0;
-    }
-
-    /* When left addon is present */
-    .ag-input__field:has(.ag-input__addon--left) .ag-input__input,
-    .ag-input__field:has(.ag-input__addon--left) .ag-input__textarea {
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
-    }
-
-    /* When right addon is present */
-    .ag-input__field:has(.ag-input__addon--right) .ag-input__input,
-    .ag-input__field:has(.ag-input__addon--right) .ag-input__textarea {
-      border-start-end-radius: 0;
-      border-end-end-radius: 0;
-    }
-
-    .ag-input__field .ag-input__input,
-    .ag-input__field .ag-input__textarea {
-      flex: 1;
-    }
-
-    /* Capsule variant with addons */
-    :host([capsule]) .ag-input__addon--left {
-      border-radius: var(--ag-radius-full) 0 0 var(--ag-radius-full);
-      padding: var(--ag-space-2) var(--ag-space-4);
-    }
-
-    :host([capsule]) .ag-input__addon--right {
-      border-radius: 0 var(--ag-radius-full) var(--ag-radius-full) 0;
-      padding: var(--ag-space-2) var(--ag-space-4);
-    }
-
-    /* Remove border on INPUT where it meets the addon for capsule */
-    :host([capsule]) .ag-input__field:has(.ag-input__addon--left) .ag-input__input,
-    :host([capsule]) .ag-input__field:has(.ag-input__addon--left) .ag-input__textarea {
-      border-inline-start: 0;
-    }
-
-    :host([capsule]) .ag-input__field:has(.ag-input__addon--right) .ag-input__input,
-    :host([capsule]) .ag-input__field:has(.ag-input__addon--right) .ag-input__textarea {
-      border-inline-end: 0;
-    }
-
-    /* Underlined variant with addons */
-    :host([underlined]) .ag-input__addon,
-    :host([underlined-with-background]) .ag-input__addon {
-      border-top: 0;
-      border-radius: 0;
-      background: transparent;
-    }
-
-    :host([underlined]) .ag-input__addon--left,
-    :host([underlined-with-background]) .ag-input__addon--left {
-      border-inline-start: 0;
-      border-inline-end: 0;
-    }
-
-    :host([underlined]) .ag-input__addon--right,
-    :host([underlined-with-background]) .ag-input__addon--right {
-      border-inline-end: 0;
-      border-inline-start: 0;
-    }
-
-    /* Remove border on INPUT where it meets the addon for underlined */
-    :host([underlined]) .ag-input__field:has(.ag-input__addon--left) .ag-input__input,
-    :host([underlined]) .ag-input__field:has(.ag-input__addon--left) .ag-input__textarea,
-    :host([underlined-with-background]) .ag-input__field:has(.ag-input__addon--left) .ag-input__input,
-    :host([underlined-with-background]) .ag-input__field:has(.ag-input__addon--left) .ag-input__textarea {
-      border-inline-start: 0;
-    }
-
-    :host([underlined]) .ag-input__field:has(.ag-input__addon--right) .ag-input__input,
-    :host([underlined]) .ag-input__field:has(.ag-input__addon--right) .ag-input__textarea,
-    :host([underlined-with-background]) .ag-input__field:has(.ag-input__addon--right) .ag-input__input,
-    :host([underlined-with-background]) .ag-input__field:has(.ag-input__addon--right) .ag-input__textarea {
-      border-inline-end: 0;
-    }
-
-    /* Underlined with background variant - add background to addon */
-    :host([underlined-with-background]) .ag-input__addon {
-      background-color: var(--ag-background-secondary);
-    }
-
-    /* Help & Error Text */
-    .ag-input__help,
-    .ag-input__error {
-      margin-block-start: var(--ag-space-2);
-      font-size: var(--ag-font-size-sm);
-    }
-
-    .ag-input__help {
-      color: var(--ag-text-secondary);
-    }
-
-    .ag-input__error {
-      color: var(--ag-danger);
-    }
-
-    .ag-input__error[hidden] {
-      display: none !important;
-    }
-
-    .ag-input__required {
-      color: var(--ag-danger);
-      margin-inline-start: var(--ag-space-1);
-    }
-  `;
-let t = h;
-a([
-  e({ type: String })
-], t.prototype, "label");
-a([
-  e({ type: Boolean, attribute: "label-hidden" })
-], t.prototype, "labelHidden");
-a([
-  e({ type: Boolean, attribute: "no-label" })
-], t.prototype, "noLabel");
-a([
-  e({ type: String, reflect: !0, attribute: "aria-label" })
-], t.prototype, "ariaLabel");
-a([
-  e({ type: String, attribute: "labelled-by" })
-], t.prototype, "labelledBy");
-a([
-  e({ type: String })
-], t.prototype, "type");
-a([
-  e({ type: String, reflect: !0 })
-], t.prototype, "value");
-a([
-  e({ type: String })
-], t.prototype, "placeholder");
-a([
-  e({ type: Number })
-], t.prototype, "rows");
-a([
-  e({ type: Number })
-], t.prototype, "cols");
-a([
-  e({ type: String, reflect: !0 })
-], t.prototype, "size");
-a([
-  e({ type: Boolean, reflect: !0 })
-], t.prototype, "capsule");
-a([
-  e({ type: Boolean, reflect: !0 })
-], t.prototype, "rounded");
-a([
-  e({ type: Boolean, reflect: !0 })
-], t.prototype, "underlined");
-a([
-  e({ type: Boolean, reflect: !0, attribute: "underlined-with-background" })
-], t.prototype, "underlinedWithBackground");
-a([
-  e({ type: Boolean, reflect: !0 })
-], t.prototype, "inline");
-a([
-  e({ type: Boolean, reflect: !0 })
-], t.prototype, "required");
-a([
-  e({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled");
-a([
-  e({ type: Boolean, reflect: !0 })
-], t.prototype, "readonly");
-a([
-  e({ type: Boolean, reflect: !0 })
-], t.prototype, "invalid");
-a([
-  e({ type: String, attribute: "error-message" })
-], t.prototype, "errorMessage");
-a([
-  e({ type: String, attribute: "help-text" })
-], t.prototype, "helpText");
-a([
-  e({ attribute: !1 })
-], t.prototype, "onClick");
-a([
-  e({ attribute: !1 })
-], t.prototype, "onInput");
-a([
-  e({ attribute: !1 })
-], t.prototype, "onChange");
-a([
-  e({ attribute: !1 })
-], t.prototype, "onFocus");
-a([
-  e({ attribute: !1 })
-], t.prototype, "onBlur");
-export {
-  t as AgInput
-};

package/dist/global.d.js

@@ -1 +0,0 @@
-import "react";