@tmorrow/cre8-wc 1.0.14

package/lib/field-J4OEwkTq.js

@@ -0,0 +1,315 @@
+import { css as m, html as a, nothing as b } from "lit";
+import { ifDefined as o } from "lit-html/directives/if-defined.js";
+import { property as t, query as $ } from "lit/decorators.js";
+import { nanoid as h } from "/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/node_modules/.pnpm/nanoid@5.1.6/node_modules/nanoid/index.browser.js";
+import { Cre8FormElement as C } from "./components/components/cre8-form-element/components/cre8-form-element.js";
+import { f as g } from "./icon-ClNBixxp.js";
+import { Cre8Element as N } from "./components/components/cre8-element/components/cre8-element.js";
+const _ = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346628 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9978 5.87895 15.1542 3.84542 13.6544 2.34562C12.1546 0.845814 10.121 0.00223986 8 0ZM7.38462 4.30769C7.38462 4.14448 7.44945 3.98796 7.56486 3.87255C7.68027 3.75714 7.83679 3.69231 8 3.69231C8.16321 3.69231 8.31974 3.75714 8.43514 3.87255C8.55055 3.98796 8.61539 4.14448 8.61539 4.30769V8.61538C8.61539 8.77859 8.55055 8.93512 8.43514 9.05053C8.31974 9.16593 8.16321 9.23077 8 9.23077C7.83679 9.23077 7.68027 9.16593 7.56486 9.05053C7.44945 8.93512 7.38462 8.77859 7.38462 8.61538V4.30769ZM8 12.3077C7.81743 12.3077 7.63897 12.2536 7.48717 12.1521C7.33537 12.0507 7.21706 11.9065 7.14719 11.7379C7.07732 11.5692 7.05904 11.3836 7.09466 11.2045C7.13028 11.0255 7.21819 10.861 7.34729 10.7319C7.47638 10.6028 7.64086 10.5149 7.81992 10.4793C7.99898 10.4437 8.18458 10.4619 8.35325 10.5318C8.52192 10.6017 8.66608 10.72 8.76751 10.8718C8.86894 11.0236 8.92308 11.202 8.92308 11.3846C8.92308 11.6294 8.82583 11.8642 8.65271 12.0373C8.4796 12.2104 8.24482 12.3077 8 12.3077Z"/>
+</svg>
+`, B = m`@import '../../design-tokens/core/scss/theming/component';
+
+:host {
+  display: flex;
+}
+
+/**
+ * Field Note
+ * 1) Messaging associated with the form field usually located below the form field input
+ */
+.cre8-c-field-note {
+  display: flex;
+  align-items: flex-start;
+  gap: size(0.5);
+  color: var(--cre8-color-content-default);
+  margin-top: size(0.5);
+}
+
+.cre8-field-note-icon {
+  margin-top: size(0.5);
+  height: size(2);
+  width: size(2);
+}
+
+/**
+ * Field Note Error State
+ */
+.cre8-c-field-note.cre8-is-error {
+  color: var(--cre8-color-content-error);
+}
+
+/**
+ * Field Note Success State
+ */
+.cre8-c-field-note.cre8-is-success {
+  color: var(--cre8-color-content-success);
+}
+
+/**
+ * Inverted field note
+ */
+.cre8-c-field-note--inverted {
+  color: var(--cre8-color-content-knockout);
+}
+`;
+var E = Object.defineProperty, f = (d, s, l, v) => {
+  for (var r = void 0, c = d.length - 1, p; c >= 0; c--)
+    (p = d[c]) && (r = p(s, l, r) || r);
+  return r && E(s, l, r), r;
+};
+const u = class u extends N {
+  /**
+   * Check if there are success or error states and set "aria-live=polite"
+   */
+  fieldNoteAriaLive() {
+    return this.isError || this.isSuccess ? "polite" : null;
+  }
+  render() {
+    const s = this.componentClassNames("cre8-c-field-note", {
+      "cre8-is-error": this.isError,
+      "cre8-is-success": this.isSuccess
+    });
+    return a`
+        <div
+          aria-live="${this.fieldNoteAriaLive() ?? "off"}"
+          class="${s}">
+        ${this.isError === !0 ? a`<cre8-icon class="cre8-field-note-icon" svg='${_}' aria-hidden="true" ></cre8-icon>` : ""}
+            ${this.isSuccess === !0 ? a`<cre8-icon class="cre8-field-note-icon" svg='${g}' aria-hidden="true"></cre8-icon>` : ""}
+          <div><slot></slot></div>
+        </div>
+    `;
+  }
+};
+u.styles = [B];
+let n = u;
+f([
+  t({ type: Boolean, reflect: !0 })
+], n.prototype, "isError");
+f([
+  t({ type: Boolean, reflect: !0 })
+], n.prototype, "isSuccess");
+f([
+  t()
+], n.prototype, "iconName");
+customElements.get("cre8-field-note") === void 0 && customElements.define("cre8-field-note", n);
+const x = m`
+@import '../../design-tokens/core/scss/theming/component';
+
+:host{
+  display: block;
+}
+
+/** 
+ * Field Label 
+ */ 
+.cre8-c-field__label {
+  @include label-styles();
+}
+
+/** 
+ * Field Body
+ * 1) The div that contains the input and icons 
+ */ 
+.cre8-c-field__body {
+  position: relative;
+}
+
+/** 
+ * Field Input 
+ * 1) The html5 input element
+ */ 
+.cre8-c-field__input {
+  @include input-styles();
+  
+  /**
+   * Readonly input styles
+   */
+  &:read-only {
+    background-color: var(--cre8-color-bg-disabled);
+    border-color: var(--cre8-color-border-disabled);
+    cursor: default;
+  }
+}
+`;
+var D = Object.defineProperty, i = (d, s, l, v) => {
+  for (var r = void 0, c = d.length - 1, p; c >= 0; c--)
+    (p = d[c]) && (r = p(s, l, r) || r);
+  return r && D(s, l, r), r;
+};
+const y = class y extends C {
+  constructor() {
+    super(...arguments), this.type = "text", this.label = "Label", this.ariaLive = "polite", this.errorText = "Error", this.successText = "Success";
+  }
+  /**
+   * First update lifecycle hook
+   * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement
+   */
+  firstUpdated() {
+    return this.initializeAria(), super.firstUpdated();
+  }
+  /**
+   * Initialize aria attributes
+   */
+  initializeAria() {
+    this.fieldId = this.fieldId || h(), (this.fieldNote || this.slotNotEmpty("fieldNote")) && (this.ariaDescribedBy = this.ariaDescribedBy || `Field_${h()}`), (this.successNote || this.errorNote) && (this.validationAriaDescribedBy = this.validationAriaDescribedBy || `Field_validation_${h()}`);
+  }
+  /**
+   * Aria describedby string based on field notes and error/success notes
+   * 1) If both validationAriaDescribedBy (error/success note) and field note exists,
+   * render both in the input's `aria-describedby` attribute
+   * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as
+   * the `aria-describedby` attribute (input without field note initially, but then error/success is added).
+   * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)
+   */
+  fieldNoteAria() {
+    return this.validationAriaDescribedBy && this.ariaDescribedBy ? `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}` : this.validationAriaDescribedBy && !this.ariaDescribedBy ? this.validationAriaDescribedBy : this.ariaDescribedBy;
+  }
+  /**
+   * Handle On Input
+   * 1) Set the input's value equal to the event.target.value when the input is changed.
+   * 2) Set the internal form value of the input to the updated value
+   */
+  _handleOnInput(s) {
+    const l = s.target.value;
+    this.value = l, this.internals.setFormValue(this.value);
+  }
+  /**
+   * Render the success or error field notes
+   * 1. If there is a successNote, then return the field note with the success message and state.
+   * 2. If there is a errorNote, then return the field note with the error message and state.
+   */
+  renderSuccessErrorFieldNote() {
+    return this.successNote ? a` <cre8-field-note
+        ?isSuccess=${this.isSuccess}
+        class="cre8-c-field__field-note-success"
+        id=${this.validationAriaDescribedBy}
+        iconName="success"
+      >
+        ${this.successNote}
+      </cre8-field-note>` : this.errorNote ? a` <cre8-field-note
+        ?isError=${this.isError}
+        class="cre8-c-field__field-note-error"
+        id=${this.validationAriaDescribedBy}
+        iconName="error-alt"
+      >
+        ${this.errorNote}
+      </cre8-field-note>` : null;
+  }
+  render() {
+    const s = this.componentClassNames("cre8-c-field", {
+      "cre8-is-error": this.isError,
+      "cre8-is-success": this.isSuccess
+    });
+    return a`
+      <div class="${s}">
+        <label class="cre8-c-field__label" for="${this.fieldId}">${this.label}</label>
+        <div class="cre8-c-field__body">
+          <input
+            class="cre8-c-field__input"
+            autocomplete=${o(this.autocomplete)}
+            type="${this.type}"
+            id="${this.fieldId}"
+            name="${o(this.name)}"
+            max=${this.type === "date" && o(this.max).toString()}
+            min=${this.type === "date" && o(this.max).toString()}
+            maxlength=${o(this.maxlength)}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            aria-invalid=${this.isError ? "true" : "false"}
+            ?disabled="${this.disabled}"
+            pattern=${o(this.pattern)}
+            aria-describedby="${o(this.fieldNoteAria())}"
+            placeholder="${o(this.placeholder)}"
+            .value="${this.value}"
+            @input=${this._handleOnInput}
+          />
+        </div>
+        ${this.fieldNote || this.slotNotEmpty("fieldNote") ? a`<cre8-field-note id=${this.ariaDescribedBy} class="cre8-c-field__field-note"
+              ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note
+            >` : b}
+        ${this.renderSuccessErrorFieldNote()}
+      </div>
+    `;
+  }
+};
+y.styles = [x];
+let e = y;
+i([
+  t()
+], e.prototype, "autocomplete");
+i([
+  t()
+], e.prototype, "pattern");
+i([
+  t()
+], e.prototype, "type");
+i([
+  t()
+], e.prototype, "placeholder");
+i([
+  t()
+], e.prototype, "label");
+i([
+  t()
+], e.prototype, "name");
+i([
+  t()
+], e.prototype, "fieldId");
+i([
+  t()
+], e.prototype, "fieldNote");
+i([
+  t()
+], e.prototype, "ariaLive");
+i([
+  t()
+], e.prototype, "ariaDescribedBy");
+i([
+  t({ type: Boolean, reflect: !0 })
+], e.prototype, "required");
+i([
+  t({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled");
+i([
+  t({ type: Boolean, reflect: !0 })
+], e.prototype, "isError");
+i([
+  t()
+], e.prototype, "errorText");
+i([
+  t()
+], e.prototype, "errorNote");
+i([
+  t()
+], e.prototype, "max");
+i([
+  t()
+], e.prototype, "min");
+i([
+  t({ type: Number })
+], e.prototype, "maxlength");
+i([
+  t()
+], e.prototype, "validationAriaDescribedBy");
+i([
+  t({ type: Boolean, reflect: !0 })
+], e.prototype, "isSuccess");
+i([
+  t()
+], e.prototype, "successText");
+i([
+  t({ type: Boolean, reflect: !0 })
+], e.prototype, "readonly");
+i([
+  t()
+], e.prototype, "successNote");
+i([
+  $("input")
+], e.prototype, "field");
+customElements.get("cre8-field") === void 0 && customElements.define("cre8-field", e);
+export {
+  n as C,
+  e as a,
+  _ as s
+};