@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/field/field.js

@@ -1,889 +1,248 @@
-import { css as u, html as d, nothing as g } from "lit";
-import { ifDefined as i } from "lit-html/directives/if-defined.js";
-import { property as r, query as f } from "lit/decorators.js";
-import { nanoid as l } from "nanoid";
-import { C as h } from "../../cre8-form-element-BymRdQUC.js";
-import "../field-note/field-note.js";
-const b = u`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing, } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { property, query } from 'lit/decorators.js';
+import { nanoid } from 'nanoid';
+import { Cre8FormElement } from '../cre8-form-element';
+import '../field-note/field-note';
+import styles from './field.styles.js';
 /**
- * Visually hidden from display
- */
-/*
-=======
-Animations
-=======
-*/
-:host {
-  --cre8-z-index-1: 1;
-  --cre8-z-index-50: 50;
-  --cre8-z-index-100: 100;
-  --cre8-z-index-200: 200;
-  --cre8-z-index-1030: 1030;
-  --cre8-anim-fade-quick: 0.35s;
-  --cre8-anim-ease: ease;
-}
-
-@keyframes fadeIn {
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes slideIn {
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes slideInFwd {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideOutRight {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideUp {
-  100% {
-    transform: translateY(0);
-  }
-}
-@media (width >= 481px) {
-  @keyframes slideInFwd {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-}
-@media (width >= 48rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 330px;
-      height: 330px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
+ * The Field component renders a form group with label, control, help text and validation styling. There are
+ * convenience variants of Field to support HTML5 input types and static content.
+ */
+export class Cre8Field extends Cre8FormElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Type variants
+         * - **text** renders a standard text input
+         * - **email** renders a text input for an email format
+         * - **number** renders an input for number values only
+         * - **url** renders an input for urls only
+         * - **tel** renders an input for telephone number values only
+         *
+         * @attr {string}
+         */
+        this.type = 'text';
+        /**
+         * The required label that appears above the input
+         *
+         * @attr {string}
+         */
+        this.label = 'Label';
+        /**
+         * Controls how the voiceover will experience the new information when field note changes,
+         * immediately (used for more urgently needed updates) using `assertive` or at the next convenient
+         * pause in their navigation using `polite`.
+         */
+        this.ariaLive = 'polite';
+        /**
+         * Visually hidden text that always signifies that this is an error for screen reader usage
+         *
+         * @attr {string}
+         */
+        this.errorText = 'Error';
+        /**
+         * Visually hidden text that always signifies that this is successful for screen reader usage
+         *
+         * @attr {string}
+         */
+        this.successText = 'Success';
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * First update lifecycle hook
+     * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement
+     */
+    firstUpdated() {
+        this.initializeAria();
+        return super.firstUpdated();
     }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
+    /**
+     * Initialize aria attributes
+     */
+    initializeAria() {
+        this.fieldId = this.fieldId || nanoid();
+        if (this.fieldNote || this.slotNotEmpty('fieldNote')) {
+            this.ariaDescribedBy = this.ariaDescribedBy || `Field_${nanoid()}`;
+        }
+        if (this.successNote || this.errorNote) {
+            this.validationAriaDescribedBy = this.validationAriaDescribedBy || `Field_validation_${nanoid()}`;
+        }
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * 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() {
+        if (this.validationAriaDescribedBy && this.ariaDescribedBy) {
+            return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */
+        }
+        if (this.validationAriaDescribedBy && !this.ariaDescribedBy) {
+            return this.validationAriaDescribedBy; /* 2 */
+        }
+        return this.ariaDescribedBy; /* 3 */
     }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
-    }
-  }
-}
-@media (width >= 2200px) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 592px));
+    /**
+     * 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(e) {
+        /* 1 */
+        const inputValue = e.target.value;
+        this.value = inputValue;
+        /* 2 */
+        this._internals.setFormValue(this.value);
     }
-  }
-}
-span.ripple {
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  animation: ripple 600ms linear;
-  background-color: var(--ripple-bg-color);
-}
-
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 1;
-  }
-}
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-:host {
-  display: block;
-}
-
-/** 
- * Field Label 
- */
-.cre8-c-field__label {
-  font-family: var(--cre8-typography-label-small-font-family);
-  font-size: var(--cre8-typography-label-small-font-size);
-  font-weight: var(--cre8-typography-label-small-font-weight);
-  line-height: var(--cre8-typography-label-small-line-height);
-  text-decoration: var(--cre8-typography-label-small-text-decoration);
-  text-transform: var(--cre8-typography-label-small-text-transform);
-  display: block;
-  margin-bottom: 0.5rem;
-  margin-left: var(--cre8-input-label-margin-left, 0px);
-}
-
-/** 
- * 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 {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  outline: var(--cre8-border-width-focus) solid transparent;
-  outline-offset: 0.125rem;
-  --size-base-unit: .5rem;
-  -webkit-appearance: none;
-  width: 100%;
-  border-width: var(--cre8-border-width-default);
-  border-style: solid;
-  border-color: var(--cre8-color-border-strong);
-  border-radius: var(--cre8-border-radius-default);
-  padding: var(--cre8-input-padding, 0.75rem 0.5rem);
-  color: var(--cre8-color-content-default);
-  background-color: var(--cre8-color-bg-default);
-  transition: outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), color var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
-  /**
-   * Hover, focus, active, and focus-visible styles for default input elements
-   */
-}
-.cre8-c-field__input:hover:not(:disabled), .cre8-c-field__input:focus:not(:disabled), .cre8-c-field__input:active:not(:disabled), .cre8-c-field__input:focus-visible {
-  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
-  outline-offset: 0.125rem;
-  /**
-   * Error state
-   */
-}
-.cre8-is-error .cre8-c-field__input:hover:not(:disabled), .cre8-is-error .cre8-c-field__input:focus:not(:disabled), .cre8-is-error .cre8-c-field__input:active:not(:disabled), .cre8-is-error .cre8-c-field__input:focus-visible {
-  outline-color: var(--cre8-color-border-error);
-}
-.cre8-c-field__input:hover:not(:disabled), .cre8-c-field__input:focus:not(:disabled), .cre8-c-field__input:active:not(:disabled), .cre8-c-field__input:focus-visible {
-  /**
-   * Success state
-   */
-}
-.cre8-is-success .cre8-c-field__input:hover:not(:disabled), .cre8-is-success .cre8-c-field__input:focus:not(:disabled), .cre8-is-success .cre8-c-field__input:active:not(:disabled), .cre8-is-success .cre8-c-field__input:focus-visible {
-  outline-color: var(--cre8-color-border-success);
-}
-.cre8-c-field__input {
-  /**
-   * Disabled styles for default input elements
-   */
-}
-.cre8-c-field__input:disabled {
-  background-color: var(--cre8-color-bg-disabled);
-  border-color: var(--cre8-color-border-disabled);
-  color: var(--cre8-color-content-disabled);
-  cursor: not-allowed;
-  /**
-   * Disabled text colors
-   */
-}
-.cre8-c-field__input:disabled::placeholder {
-  color: var(--cre8-color-content-disabled);
-}
-.cre8-c-field__input {
-  /**
-   * Placeholder styles for default input elements
-   */
-}
-.cre8-c-field__input::placeholder {
-  color: var(--cre8-color-content-subtle);
-}
-.cre8-c-field__input {
-  /**
-   * Error state for default input elements
-   */
-}
-.cre8-is-error .cre8-c-field__input {
-  border-color: var(--cre8-color-border-error);
-}
-.cre8-c-field__input {
-  /**
-   * Success state for default input elements
-   */
-}
-.cre8-is-success .cre8-c-field__input {
-  border-color: var(--cre8-color-border-success);
-}
-.cre8-c-field__input {
-  /**
-   * Readonly input styles
-   */
-}
-.cre8-c-field__input:read-only {
-  background-color: var(--cre8-color-bg-disabled);
-  border-color: var(--cre8-color-border-disabled);
-  cursor: default;
-}`;
-var y = Object.defineProperty, t = (p, a, n, x) => {
-  for (var o = void 0, s = p.length - 1, m; s >= 0; s--)
-    (m = p[s]) && (o = m(a, n, o) || o);
-  return o && y(a, n, o), o;
-};
-const c = class c extends h {
-  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 || l(), (this.fieldNote || this.slotNotEmpty("fieldNote")) && (this.ariaDescribedBy = this.ariaDescribedBy || `Field_${l()}`), (this.successNote || this.errorNote) && (this.validationAriaDescribedBy = this.validationAriaDescribedBy || `Field_validation_${l()}`);
-  }
-  /**
-   * 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(a) {
-    const n = a.target.value;
-    this.value = n, 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 ? d` <cre8-field-note
+    /**
+     * 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() {
+        if (this.successNote) {
+            /* 1 */
+            return html ` <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 ? d` <cre8-field-note
+      </cre8-field-note>`;
+        }
+        if (this.errorNote) {
+            /* 2 */
+            return html ` <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 a = this.componentClassNames("cre8-c-field", {
-      "cre8-is-error": this.isError,
-      "cre8-is-success": this.isSuccess
-    });
-    return d`
-      <div class="${a}">
+      </cre8-field-note>`;
+        }
+        return null;
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-field', {
+            'cre8-is-error': this.isError,
+            'cre8-is-success': this.isSuccess,
+        });
+        return html `
+      <div class="${componentClassNames}">
         <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=${i(this.autocomplete)}
+            autocomplete=${ifDefined(this.autocomplete)}
             type="${this.type}"
             id="${this.fieldId}"
-            max=${this.type === "date" && i(this.max).toString()}
-            min=${this.type === "date" && i(this.max).toString()}
-            maxlength=${i(this.maxlength)}
+            max=${(this.type === 'date') && ifDefined(this.max).toString()}
+            min=${(this.type === 'date') && ifDefined(this.max).toString()}
+            maxlength=${ifDefined(this.maxlength)}
             ?readonly=${this.readonly}
             ?required=${this.required}
-            aria-invalid=${this.isError ? "true" : "false"}
+            aria-invalid=${this.isError ? 'true' : 'false'}
             ?disabled="${this.disabled}"
-            pattern=${i(this.pattern)}
-            aria-describedby="${i(this.fieldNoteAria())}"
-            placeholder="${i(this.placeholder)}"
+            pattern=${ifDefined(this.pattern)}
+            aria-describedby="${ifDefined(this.fieldNoteAria())}"
+            placeholder="${ifDefined(this.placeholder)}"
             .value="${this.value}"
             @input=${this._handleOnInput}
           />
         </div>
-        ${this.fieldNote || this.slotNotEmpty("fieldNote") ? d`<cre8-field-note id=${this.ariaDescribedBy} class="cre8-c-field__field-note"
+        ${this.fieldNote || this.slotNotEmpty('fieldNote')
+            ? html `<cre8-field-note id=${this.ariaDescribedBy} class="cre8-c-field__field-note"
               ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note
-            >` : g}
+            >`
+            : nothing}
         ${this.renderSuccessErrorFieldNote()}
       </div>
     `;
-  }
-};
-c.styles = [b];
-let e = c;
-t([
-  r()
-], e.prototype, "autocomplete");
-t([
-  r()
-], e.prototype, "pattern");
-t([
-  r()
-], e.prototype, "type");
-t([
-  r()
-], e.prototype, "placeholder");
-t([
-  r()
-], e.prototype, "label");
-t([
-  r()
-], e.prototype, "fieldId");
-t([
-  r()
-], e.prototype, "fieldNote");
-t([
-  r()
-], e.prototype, "ariaLive");
-t([
-  r()
-], e.prototype, "ariaDescribedBy");
-t([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "required");
-t([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled");
-t([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "isError");
-t([
-  r()
-], e.prototype, "errorText");
-t([
-  r()
-], e.prototype, "errorNote");
-t([
-  r()
-], e.prototype, "max");
-t([
-  r()
-], e.prototype, "min");
-t([
-  r({ type: Number })
-], e.prototype, "maxlength");
-t([
-  r()
-], e.prototype, "validationAriaDescribedBy");
-t([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "isSuccess");
-t([
-  r()
-], e.prototype, "successText");
-t([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "readonly");
-t([
-  r()
-], e.prototype, "successNote");
-t([
-  f("input")
-], e.prototype, "field");
-customElements.get("cre8-field") === void 0 && customElements.define("cre8-field", e);
-export {
-  e as Cre8Field,
-  e as default
-};
+    }
+}
+Cre8Field.styles = [styles];
+__decorate([
+    property()
+], Cre8Field.prototype, "autocomplete", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "pattern", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "type", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "label", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "fieldId", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "fieldNote", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "ariaLive", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "ariaDescribedBy", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Field.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Field.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Field.prototype, "isError", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "errorText", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "errorNote", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "max", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], Cre8Field.prototype, "maxlength", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "validationAriaDescribedBy", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Field.prototype, "isSuccess", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "successText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Field.prototype, "readonly", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "successNote", void 0);
+__decorate([
+    query('input')
+], Cre8Field.prototype, "field", void 0);
+if (customElements.get('cre8-field') === undefined) {
+    customElements.define('cre8-field', Cre8Field);
+}
+export default Cre8Field;
+//# sourceMappingURL=field.js.map