@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/radio-field-item/radio-field-item.js

@@ -1,200 +1,243 @@
-import { css as p, html as m } from "lit";
-import { ifDefined as a } from "lit-html/directives/if-defined.js";
-import { property as d, query as u } from "lit/decorators.js";
-import { nanoid as f } from "nanoid";
-import { Cre8FormElement as b } from "../cre8-form-element.js";
-import "../field-note/field-note.js";
-const y = p`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@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))}}}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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-radio-field-item{display:flex;position:relative;align-items:center;margin-bottom:0.5rem;min-height:1.5rem}:host(:last-child) .cre8-c-radio-field-item{margin-bottom:0}.cre8-c-radio-field-item__input{opacity:0;cursor:pointer;position:absolute;top:0;left:0;height:1.5rem;min-width:1.5rem;margin:0;z-index:1}.cre8-c-radio-field-item--disabled .cre8-c-radio-field-item__input{cursor:not-allowed}.cre8-c-radio-field-item__custom-radio{display:flex;position:absolute;top:0;left:0;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--cre8-border-radius-round);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-strong)}.cre8-c-radio-field-item__input:focus-visible+.cre8-c-radio-field-item__custom-radio{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-radio-field-item--error .cre8-c-radio-field-item__input:focus-visible+.cre8-c-radio-field-item__custom-radio{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem;border-color:var(--cre8-color-border-error)}.cre8-c-radio-field-item--error .cre8-c-radio-field-item__custom-radio{border-color:var(--cre8-color-border-error)}.cre8-c-radio-field-item--disabled .cre8-c-radio-field-item__custom-radio{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}.cre8-c-radio-field-item__inner-circle{display:none;cursor:pointer;height:0.75rem;width:0.75rem;background:var(--cre8-color-content-brand);border-radius:var(--cre8-border-radius-round)}.cre8-c-radio-field-item--error .cre8-c-radio-field-item__inner-circle{background:var(--cre8-color-bg-error-strong)}.cre8-c-radio-field-item--disabled .cre8-c-radio-field-item__inner-circle{background:var(--cre8-color-content-disabled)}.cre8-c-radio-field-item__input:checked+.cre8-c-radio-field-item__custom-radio .cre8-c-radio-field-item__inner-circle{display:flex}.cre8-c-radio-field-item__label{margin-left:2rem;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)}`;
-var g = Object.defineProperty, t = (n, e, r, o) => {
-  for (var l = void 0, s = n.length - 1, h; s >= 0; s--)
-    (h = n[s]) && (l = h(e, r, l) || l);
-  return l && g(e, r, l), l;
+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;
 };
-const c = class c extends b {
-  constructor() {
-    super(...arguments), this.type = "radio";
-  }
-  /**
-   * Connected callback lifecycle
-   * 1) Set the initial checked value to the checked property
-   * 2) Auto-generate the fieldId if a user doesn't provided so that the form field is accessible
-   * 3) If a field note exists, set the aria-describedby attribute to make sure the field note is read out
-   */
-  connectedCallback() {
-    super.connectedCallback(), this.fieldId = this.fieldId || f(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || f());
-  }
-  /**
-   * Reset the radio field
-   */
-  resetField() {
-    this._internals.setFormValue(null);
-  }
-  /**
-   * Reset the radio field items tab indeces
-   */
-  resetTabIndeces(e) {
-    e.forEach((r) => {
-      r.shadowRoot.querySelector(".cre8-c-radio-field-item__input").setAttribute("tabindex", "0");
-    });
-  }
-  /**
-   * Remove checked
-   * 1) Remove checked property from all items and set tabindex to -1
-   * 2) Reset the form field to not checked
-   */
-  removeChecked() {
-    this.parentNode && this.parentNode.querySelectorAll("cre8-radio-field-item").forEach((r) => {
-      r.checked = !1, r.shadowRoot.querySelector(".cre8-c-radio-field-item__input").setAttribute("tabindex", "-1"), r.resetField();
-    });
-  }
-  /**
-   * Reset form callback
-   * 1) Remove the checked state from all radio elements
-   * 2) Set the checked state to the initial checked state
-   * 3) Set the radio field input checked attribute to the initial checked state
-   */
-  formResetCallback() {
-    this.removeChecked(), this.checked = this.initialChecked, this.field.checked = this.initialChecked;
-  }
-  /**
-   * access role when radio-field-item embedded in radio-field
-   */
-  _getRole() {
-    return this.closest("cre8-radio-field") ? "listitem" : "";
-  }
-  /**
-   * Toggle active state of primary nav item
-   * 1) Remove isActive state from all sibling elements
-   * 2) Toggle active state of element selected
-   */
-  _clickHandler() {
-    this.removeChecked(), this.checked = !this.checked;
-    const e = this.shadowRoot?.querySelector(".cre8-c-radio-field-item__input");
-    return e && e.setAttribute("tabindex", "0"), this.checked ? this._internals.setFormValue(this.value || "on") : this._internals.setFormValue(null);
-  }
-  /**
-   * Handle sibling element updates during handleKeyDown function
-   * 1) Prevent default keyboard functionality to disable scroll with up/down keys
-   * 2) Trigger removeChecked
-   * 3) Focus sibling shadowRoot element
-   * 4) Click sibling shadowRoot element
-   * 5) Set sibling element `tabindex` to `0`
-   * 6) Set sibling element `checked` value
-   */
-  _updateSibling(e, r, o) {
-    e.preventDefault(), this.removeChecked(), o.focus(), o.click(), o.setAttribute("tabindex", "0"), r.setAttribute("checked", "");
-  }
-  /**
-   * Handle keydown
-   * 1) If left or up arrow key is struck and radio field item exists before current item,
-   *    remove checked from all items and add it to the next item
-   * 2) If right or down arrow key is struck and radio field item exists after current item,
-   *    remove checked from all items and add checked to the next item. Focus on this item
-   *    and set tabindex for when focusing out of radio field and back onto checked item.
-   * 3) If the element is in focused, then for event emission the current
-   *    focues element should be clicked to emit event.
-   * 4) If the Tab key is pressed, and none of the items are checked
-   *    then jump away from field set to the next tabbable item
-   */
-  handleKeyDown(e) {
-    if (e.code === "ArrowLeft" || e.code === "ArrowUp") {
-      const r = this.previousElementSibling, o = r?.shadowRoot?.querySelector(
-        ".cre8-c-radio-field-item__input:not([disabled])"
-      );
-      o && this._updateSibling(e, r, o);
-    } else if (e.code === "ArrowRight" || e.code === "ArrowDown") {
-      const r = this.nextElementSibling, o = r?.shadowRoot?.querySelector(
-        ".cre8-c-radio-field-item__input:not([disabled])"
-      );
-      o && this._updateSibling(e, r, o);
-    } else if (e.code === "Tab" && !this.checked) {
-      const r = this.parentNode.querySelectorAll("cre8-radio-field-item");
-      r.forEach((o) => {
-        o.shadowRoot.querySelector(".cre8-c-radio-field-item__input").setAttribute("tabindex", "-1");
-      }), setTimeout(this.resetTabIndeces, 100, r);
+import { html, } 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 './radio-field-item.styles.js';
+/**
+ * A Radio Field Item adds a radio button to a Radio Field. Radio buttons let a user choose only one of several
+ * options. Do not use a single radio button, because once selected, it cannot be de-selected. If the user can only
+ * choose one, none or many options, use Checkbox instead.
+ */
+export class Cre8RadioFieldItem extends Cre8FormElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'radio';
     }
-  }
-  render() {
-    const e = this.componentClassNames("cre8-c-radio-field-item", {
-      "cre8-c-radio-field-item--error": this.isError,
-      "cre8-c-radio-field-item--success": this.isSuccess,
-      "cre8-c-radio-field-item--disabled": this.disabled
-    }), r = this.checked === !0 || this.initialChecked === !0;
-    return m`
-        <div role=${a(this._getRole())} class="${e}" @keydown=${this.handleKeyDown}>
+    /**
+     * Connected callback lifecycle
+     * 1) Set the initial checked value to the checked property
+     * 2) Auto-generate the fieldId if a user doesn't provided so that the form field is accessible
+     * 3) If a field note exists, set the aria-describedby attribute to make sure the field note is read out
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.fieldId = this.fieldId || nanoid(); /* 2 */
+        if (this.fieldNote) {
+            this.ariaDescribedBy = this.ariaDescribedBy || nanoid(); /* 3 */
+        }
+    }
+    /**
+     * Reset the radio field
+     */
+    resetField() {
+        this._internals.setFormValue(null);
+    }
+    /**
+     * Reset the radio field items tab indeces
+     */
+    resetTabIndeces(radioFieldItems) {
+        radioFieldItems.forEach((element) => {
+            element.shadowRoot.querySelector('.cre8-c-radio-field-item__input').setAttribute('tabindex', '0');
+        });
+    }
+    /**
+     * Remove checked
+     * 1) Remove checked property from all items and set tabindex to -1
+     * 2) Reset the form field to not checked
+     */
+    removeChecked() {
+        if (this.parentNode) {
+            /* 1 */
+            const radioFieldItems = this.parentNode.querySelectorAll('cre8-radio-field-item');
+            radioFieldItems.forEach((element) => {
+                element.checked = false;
+                element.shadowRoot.querySelector('.cre8-c-radio-field-item__input').setAttribute('tabindex', '-1');
+                element.resetField(); /* 2 */
+            });
+        }
+    }
+    /**
+     * Reset form callback
+     * 1) Remove the checked state from all radio elements
+     * 2) Set the checked state to the initial checked state
+     * 3) Set the radio field input checked attribute to the initial checked state
+     */
+    formResetCallback() {
+        this.removeChecked();
+        this.checked = this.initialChecked;
+        this.field.checked = this.initialChecked;
+    }
+    /**
+     * access role when radio-field-item embedded in radio-field
+     */
+    _getRole() {
+        const radioFieldContainer = this.closest('cre8-radio-field');
+        if (radioFieldContainer) {
+            return 'listitem';
+        }
+        return '';
+    }
+    /**
+     * Toggle active state of primary nav item
+     * 1) Remove isActive state from all sibling elements
+     * 2) Toggle active state of element selected
+     */
+    _clickHandler() {
+        this.removeChecked();
+        this.checked = !this.checked; /* 2 */
+        const radioInput = this.shadowRoot?.querySelector('.cre8-c-radio-field-item__input');
+        if (radioInput) {
+            radioInput.setAttribute('tabindex', '0');
+        }
+        return this.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null);
+    }
+    /**
+     * Handle sibling element updates during handleKeyDown function
+     * 1) Prevent default keyboard functionality to disable scroll with up/down keys
+     * 2) Trigger removeChecked
+     * 3) Focus sibling shadowRoot element
+     * 4) Click sibling shadowRoot element
+     * 5) Set sibling element `tabindex` to `0`
+     * 6) Set sibling element `checked` value
+     */
+    _updateSibling(event, sibling, element) {
+        event.preventDefault();
+        this.removeChecked();
+        element.focus();
+        element.click();
+        element.setAttribute('tabindex', '0');
+        sibling.setAttribute('checked', '');
+    }
+    /**
+     * Handle keydown
+     * 1) If left or up arrow key is struck and radio field item exists before current item,
+     *    remove checked from all items and add it to the next item
+     * 2) If right or down arrow key is struck and radio field item exists after current item,
+     *    remove checked from all items and add checked to the next item. Focus on this item
+     *    and set tabindex for when focusing out of radio field and back onto checked item.
+     * 3) If the element is in focused, then for event emission the current
+     *    focues element should be clicked to emit event.
+     * 4) If the Tab key is pressed, and none of the items are checked
+     *    then jump away from field set to the next tabbable item
+     */
+    handleKeyDown(e) {
+        if (e.code === 'ArrowLeft' || e.code === 'ArrowUp') {
+            /* 1 */
+            const previous = this.previousElementSibling;
+            const previousElement = previous?.shadowRoot?.querySelector('.cre8-c-radio-field-item__input:not([disabled])');
+            if (previousElement) {
+                this._updateSibling(e, previous, previousElement);
+            }
+        }
+        else if (e.code === 'ArrowRight' || e.code === 'ArrowDown') {
+            /* 2 */
+            const next = this.nextElementSibling;
+            const nextElement = next?.shadowRoot?.querySelector('.cre8-c-radio-field-item__input:not([disabled])');
+            if (nextElement) {
+                this._updateSibling(e, next, nextElement);
+            }
+        }
+        else if (e.code === 'Tab' && !this.checked) {
+            const radioFieldItems = this.parentNode.querySelectorAll('cre8-radio-field-item');
+            radioFieldItems.forEach((element) => {
+                element.shadowRoot.querySelector('.cre8-c-radio-field-item__input').setAttribute('tabindex', '-1');
+            });
+            // After making tabbing away from the feildset,
+            // reset the items to be tabbable again so the user can come back to the fieldset
+            setTimeout(this.resetTabIndeces, 100, radioFieldItems);
+        }
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-radio-field-item', {
+            'cre8-c-radio-field-item--error': this.isError,
+            'cre8-c-radio-field-item--success': this.isSuccess,
+            'cre8-c-radio-field-item--disabled': this.disabled,
+        });
+        const isChecked = this.checked === true || this.initialChecked === true;
+        return html `
+        <div role=${ifDefined(this._getRole())} class="${componentClassNames}" @keydown=${this.handleKeyDown}>
             <input
             class="cre8-c-radio-field-item__input"
             type="radio"
             @input=${this._clickHandler}
             id=${this.fieldId}
-            aria-describedby="${a(this.ariaDescribedBy)}"
-            required=${a(this.required)}
-            aria-invalid=${this.required ? !!this.isError : a(this.isError)}
+            aria-describedby="${ifDefined(this.ariaDescribedBy)}"
+            required=${ifDefined(this.required)}
+            aria-invalid=${this.required ? !!this.isError : ifDefined(this.isError)}
             name=${this.name}
             .value=${this.value}
-            disabled="${a(this.disabled)}"
-            .checked="${r}"
+            disabled="${ifDefined(this.disabled)}"
+            .checked="${isChecked}"
             />
             <span class="cre8-c-radio-field-item__custom-radio">
             <div class="cre8-c-radio-field-item__inner-circle"></div>
             </span>
             <label class="cre8-c-radio-field-item__label" for=${this.fieldId}>${this.label}</label>
     </div>
-        ${this.fieldNote ? m`<cre8-field-note
+        ${this.fieldNote
+            ? html `<cre8-field-note
                 ?inverted=${this.fieldNoteKnockout}
-                id=${a(this.ariaDescribedBy)}
-                iconName=${a(this.fieldNoteIconName)}
+                id=${ifDefined(this.ariaDescribedBy)}
+                iconName=${ifDefined(this.fieldNoteIconName)}
                 ?isSuccess=${this.isSuccess}
                 ?isError=${this.isError}
             >
                 ${this.fieldNote}
-            </cre8-field-note>` : ""}
+            </cre8-field-note>`
+            : ''}
         `;
-  }
-};
-c.styles = [y];
-let i = c;
-t([
-  d()
-], i.prototype, "ariaDescribedBy");
-t([
-  d({ type: Boolean, reflect: !0 })
-], i.prototype, "checked");
-t([
-  d({ type: Boolean, reflect: !0 })
-], i.prototype, "disabled");
-t([
-  u("input")
-], i.prototype, "field");
-t([
-  d()
-], i.prototype, "fieldId");
-t([
-  d()
-], i.prototype, "fieldNote");
-t([
-  d()
-], i.prototype, "fieldNoteIconName");
-t([
-  d({ type: Boolean, reflect: !0 })
-], i.prototype, "fieldNoteKnockout");
-t([
-  d({ type: Boolean, reflect: !0 })
-], i.prototype, "fieldNoteIsError");
-t([
-  d({ type: Boolean, reflect: !0 })
-], i.prototype, "isError");
-t([
-  d({ type: Boolean, reflect: !0 })
-], i.prototype, "isSuccess");
-t([
-  d()
-], i.prototype, "label");
-t([
-  d({ type: Boolean, reflect: !0 })
-], i.prototype, "required");
-customElements.get("cre8-radio-field-item") === void 0 && customElements.define("cre8-radio-field-item", i);
-export {
-  i as Cre8RadioFieldItem,
-  i as default
-};
+    }
+}
+Cre8RadioFieldItem.styles = [styles];
+__decorate([
+    property()
+], Cre8RadioFieldItem.prototype, "ariaDescribedBy", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8RadioFieldItem.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8RadioFieldItem.prototype, "disabled", void 0);
+__decorate([
+    query('input')
+], Cre8RadioFieldItem.prototype, "field", void 0);
+__decorate([
+    property()
+], Cre8RadioFieldItem.prototype, "fieldId", void 0);
+__decorate([
+    property()
+], Cre8RadioFieldItem.prototype, "fieldNote", void 0);
+__decorate([
+    property()
+], Cre8RadioFieldItem.prototype, "fieldNoteIconName", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8RadioFieldItem.prototype, "fieldNoteKnockout", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8RadioFieldItem.prototype, "fieldNoteIsError", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8RadioFieldItem.prototype, "isError", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8RadioFieldItem.prototype, "isSuccess", void 0);
+__decorate([
+    property()
+], Cre8RadioFieldItem.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8RadioFieldItem.prototype, "required", void 0);
+if (customElements.get('cre8-radio-field-item') === undefined) {
+    customElements.define('cre8-radio-field-item', Cre8RadioFieldItem);
+}
+export default Cre8RadioFieldItem;
+//# sourceMappingURL=radio-field-item.js.map

package/lib/components/radio-field-item/radio-field-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-field-item.js","sourceRoot":"","sources":["../../../components/radio-field-item/radio-field-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { html,  } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../field-note/field-note';\nimport styles from './radio-field-item.styles.js';\n\n    /**\n     * A Radio Field Item adds a radio button to a Radio Field. Radio buttons let a user choose only one of several\n     * options. Do not use a single radio button, because once selected, it cannot be de-selected. If the user can only\n     * choose one, none or many options, use Checkbox instead.\n     */\n\nexport class Cre8RadioFieldItem extends Cre8FormElement {\n    type = 'radio';\n\n    static styles = [styles];\n\n    /**\n     * Identifies the element that provides a detailed, extended description for the object.\n     *\n     * @attr{string}\n     */\n    @property()\n        ariaDescribedBy?: string;\n\n    /**\n     * A Boolean attribute which, if present, sets the radio button as selected.\n     *\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        checked?: boolean;\n\n    /**\n     * The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with\n     * the form. The user can neither edit nor focus on the control, nor its form control descendants.\n     *\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        disabled?: boolean;\n\n    /**\n     * Get the radio field item input\n     */\n    @query('input')\n        field!: HTMLInputElement;\n\n    /**\n     * The fieldId attribute is assigned to the HTML input element of the radio button and the for attribute of the\n     * corresponding label.\n     */\n    @property()\n        fieldId?: string;\n\n    /**\n     * A FieldNote can be placed to provide guidance. It's frequently used to in the context of form fields for extra\n     * information or validation messages.\n     */\n    @property()\n        fieldNote?: string;\n\n    /**\n     * Sets the item fieldnote icon.\n     *\n     * - **check** renders a badge with success state treatment\n     * - **error** renders a badge with error state treatment\n     */\n    @property()\n        fieldNoteIconName?: string;\n\n    /**\n     * Radio item fieldnote knockout\n     *\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        fieldNoteKnockout?: boolean;\n\n    /**\n     * Sets the error state of the fieldnote.\n     *\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        fieldNoteIsError?: boolean;\n\n    /**\n     * The isError attribute is used to indicate an error state related to the radio button.\n     *\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        isError?: boolean;\n\n    /**\n     * The isSuccess attribute is used to indicate a success state related to the radio button.\n     *\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        isSuccess?: boolean;\n\n    /**\n     * The label attribute is used to assign a value to the label element corresponding to this radio button.\n     */\n    @property()\n        label?: string;\n\n    /**\n     * Required attribute\n     *\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        required?: boolean;\n\n    /**\n     * Initial checked for initial checked state\n     */\n    private initialChecked?: boolean;\n\n    /**\n     * Connected callback lifecycle\n     * 1) Set the initial checked value to the checked property\n     * 2) Auto-generate the fieldId if a user doesn't provided so that the form field is accessible\n     * 3) If a field note exists, set the aria-describedby attribute to make sure the field note is read out\n     */\n    connectedCallback() {\n        super.connectedCallback();\n        this.fieldId = this.fieldId || nanoid(); /* 2 */\n        if (this.fieldNote) {\n            this.ariaDescribedBy = this.ariaDescribedBy || nanoid(); /* 3 */\n        }\n    }\n\n    /**\n     * Reset the radio field\n     */\n    public resetField() {\n        this._internals.setFormValue(null);\n    }\n\n    /**\n     * Reset the radio field items tab indeces\n     */\n    resetTabIndeces(radioFieldItems: Cre8RadioFieldItem[]) {\n        radioFieldItems.forEach((element: HTMLElement) => {\n            element.shadowRoot.querySelector('.cre8-c-radio-field-item__input').setAttribute('tabindex', '0');\n        });\n    }\n\n    /**\n     * Remove checked\n     * 1) Remove checked property from all items and set tabindex to -1\n     * 2) Reset the form field to not checked\n     */\n    removeChecked() {\n        if (this.parentNode) {\n        /* 1 */\n            const radioFieldItems = this.parentNode.querySelectorAll('cre8-radio-field-item');\n            radioFieldItems.forEach((element: Cre8RadioFieldItem) => {\n                element.checked = false;\n                element.shadowRoot.querySelector('.cre8-c-radio-field-item__input').setAttribute('tabindex', '-1');\n                element.resetField(); /* 2 */\n            });\n        }\n    }\n\n    /**\n     * Reset form callback\n     * 1) Remove the checked state from all radio elements\n     * 2) Set the checked state to the initial checked state\n     * 3) Set the radio field input checked attribute to the initial checked state\n     */\n    formResetCallback(): void {\n        this.removeChecked();\n        this.checked = this.initialChecked;\n        this.field.checked = this.initialChecked;\n    }\n\n    /**\n     * access role when radio-field-item embedded in radio-field\n     */\n    private _getRole() {\n        const radioFieldContainer = this.closest('cre8-radio-field');\n        if (radioFieldContainer) {\n            return 'listitem';\n        }\n        return '';\n    }\n\n    /**\n     * Toggle active state of primary nav item\n     * 1) Remove isActive state from all sibling elements\n     * 2) Toggle active state of element selected\n     */\n    private _clickHandler() {\n        this.removeChecked();\n        this.checked = !this.checked; /* 2 */\n        const radioInput = this.shadowRoot?.querySelector<HTMLInputElement>('.cre8-c-radio-field-item__input');\n        if (radioInput) {\n            radioInput.setAttribute('tabindex', '0');\n        }\n        return this.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null);\n    }\n\n    /**\n     * Handle sibling element updates during handleKeyDown function\n     * 1) Prevent default keyboard functionality to disable scroll with up/down keys\n     * 2) Trigger removeChecked\n     * 3) Focus sibling shadowRoot element\n     * 4) Click sibling shadowRoot element\n     * 5) Set sibling element `tabindex` to `0`\n     * 6) Set sibling element `checked` value\n     */\n    private _updateSibling(event: KeyboardEvent, sibling: Element, element: HTMLElement) {\n        event.preventDefault();\n        this.removeChecked();\n        element.focus();\n        element.click();\n        element.setAttribute('tabindex', '0');\n        sibling.setAttribute('checked', '');\n    }\n\n    /**\n     * Handle keydown\n     * 1) If left or up arrow key is struck and radio field item exists before current item,\n     *    remove checked from all items and add it to the next item\n     * 2) If right or down arrow key is struck and radio field item exists after current item,\n     *    remove checked from all items and add checked to the next item. Focus on this item\n     *    and set tabindex for when focusing out of radio field and back onto checked item.\n     * 3) If the element is in focused, then for event emission the current\n     *    focues element should be clicked to emit event.\n     * 4) If the Tab key is pressed, and none of the items are checked\n     *    then jump away from field set to the next tabbable item\n     */\n    handleKeyDown(e: KeyboardEvent) {\n        if (e.code === 'ArrowLeft' || e.code === 'ArrowUp') {\n        /* 1 */\n            const previous = this.previousElementSibling;\n            const previousElement = previous?.shadowRoot?.querySelector<HTMLInputElement>(\n                '.cre8-c-radio-field-item__input:not([disabled])'\n            );\n\n            if (previousElement) {\n                this._updateSibling(e, previous, previousElement);\n            }\n        } else if (e.code === 'ArrowRight' || e.code === 'ArrowDown') {\n        /* 2 */\n            const next = this.nextElementSibling;\n            const nextElement = next?.shadowRoot?.querySelector<HTMLInputElement>(\n                '.cre8-c-radio-field-item__input:not([disabled])'\n            );\n            if (nextElement) {\n                this._updateSibling(e, next, nextElement);\n            }\n        } else if (e.code === 'Tab' && !this.checked) {\n            const radioFieldItems = this.parentNode.querySelectorAll('cre8-radio-field-item');\n            radioFieldItems.forEach((element: HTMLElement) => {\n                element.shadowRoot.querySelector('.cre8-c-radio-field-item__input').setAttribute('tabindex', '-1');\n            });\n\n        // After making tabbing away from the feildset,\n        // reset the items to be tabbable again so the user can come back to the fieldset\n            setTimeout(this.resetTabIndeces, 100, radioFieldItems);\n        }\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-radio-field-item', {\n            'cre8-c-radio-field-item--error': this.isError,\n            'cre8-c-radio-field-item--success': this.isSuccess,\n            'cre8-c-radio-field-item--disabled': this.disabled,\n        });\n\n        const isChecked = this.checked === true || this.initialChecked === true;\n\n        return html`\n        <div role=${ifDefined(this._getRole())} class=\"${componentClassNames}\" @keydown=${this.handleKeyDown}>\n            <input\n            class=\"cre8-c-radio-field-item__input\"\n            type=\"radio\"\n            @input=${this._clickHandler}\n            id=${this.fieldId}\n            aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n            required=${ifDefined(this.required)}\n            aria-invalid=${this.required ? !!this.isError : ifDefined(this.isError)}\n            name=${this.name}\n            .value=${this.value}\n            disabled=\"${ifDefined(this.disabled)}\"\n            .checked=\"${isChecked}\"\n            />\n            <span class=\"cre8-c-radio-field-item__custom-radio\">\n            <div class=\"cre8-c-radio-field-item__inner-circle\"></div>\n            </span>\n            <label class=\"cre8-c-radio-field-item__label\" for=${this.fieldId}>${this.label}</label>\n    </div>\n        ${this.fieldNote\n        ? html`<cre8-field-note\n                ?inverted=${this.fieldNoteKnockout}\n                id=${ifDefined(this.ariaDescribedBy)}\n                iconName=${ifDefined(this.fieldNoteIconName)}\n                ?isSuccess=${this.isSuccess}\n                ?isError=${this.isError}\n            >\n                ${this.fieldNote}\n            </cre8-field-note>`\n        : ''}\n        `;\n    }\n}\n\nif (customElements.get('cre8-radio-field-item') === undefined) {\n    customElements.define('cre8-radio-field-item', Cre8RadioFieldItem);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-radio-field-item': Cre8RadioFieldItem;\n    }\n}\n\nexport default Cre8RadioFieldItem;\n"]}

package/lib/components/radio-field-item/radio-field-item.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@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))}}}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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-radio-field-item{display:flex;position:relative;align-items:center;margin-bottom:0.5rem;min-height:1.5rem}:host(:last-child) .cre8-c-radio-field-item{margin-bottom:0}.cre8-c-radio-field-item__input{opacity:0;cursor:pointer;position:absolute;top:0;left:0;height:1.5rem;min-width:1.5rem;margin:0;z-index:1}.cre8-c-radio-field-item--disabled .cre8-c-radio-field-item__input{cursor:not-allowed}.cre8-c-radio-field-item__custom-radio{display:flex;position:absolute;top:0;left:0;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--cre8-border-radius-round);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-strong)}.cre8-c-radio-field-item__input:focus-visible+.cre8-c-radio-field-item__custom-radio{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-radio-field-item--error .cre8-c-radio-field-item__input:focus-visible+.cre8-c-radio-field-item__custom-radio{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem;border-color:var(--cre8-color-border-error)}.cre8-c-radio-field-item--error .cre8-c-radio-field-item__custom-radio{border-color:var(--cre8-color-border-error)}.cre8-c-radio-field-item--disabled .cre8-c-radio-field-item__custom-radio{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}.cre8-c-radio-field-item__inner-circle{display:none;cursor:pointer;height:0.75rem;width:0.75rem;background:var(--cre8-color-content-brand);border-radius:var(--cre8-border-radius-round)}.cre8-c-radio-field-item--error .cre8-c-radio-field-item__inner-circle{background:var(--cre8-color-bg-error-strong)}.cre8-c-radio-field-item--disabled .cre8-c-radio-field-item__inner-circle{background:var(--cre8-color-content-disabled)}.cre8-c-radio-field-item__input:checked+.cre8-c-radio-field-item__custom-radio .cre8-c-radio-field-item__inner-circle{display:flex}.cre8-c-radio-field-item__label{margin-left:2rem;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)}`;
+export default styles;
+//# sourceMappingURL=radio-field-item.styles.js.map

package/lib/components/radio-field-item/radio-field-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-field-item.styles.js","sourceRoot":"","sources":["../../../components/radio-field-item/radio-field-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,wvIAAwvI,CAAC;AAC3wI,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@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))}}}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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-radio-field-item{display:flex;position:relative;align-items:center;margin-bottom:0.5rem;min-height:1.5rem}:host(:last-child) .cre8-c-radio-field-item{margin-bottom:0}.cre8-c-radio-field-item__input{opacity:0;cursor:pointer;position:absolute;top:0;left:0;height:1.5rem;min-width:1.5rem;margin:0;z-index:1}.cre8-c-radio-field-item--disabled .cre8-c-radio-field-item__input{cursor:not-allowed}.cre8-c-radio-field-item__custom-radio{display:flex;position:absolute;top:0;left:0;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--cre8-border-radius-round);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-strong)}.cre8-c-radio-field-item__input:focus-visible+.cre8-c-radio-field-item__custom-radio{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-radio-field-item--error .cre8-c-radio-field-item__input:focus-visible+.cre8-c-radio-field-item__custom-radio{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem;border-color:var(--cre8-color-border-error)}.cre8-c-radio-field-item--error .cre8-c-radio-field-item__custom-radio{border-color:var(--cre8-color-border-error)}.cre8-c-radio-field-item--disabled .cre8-c-radio-field-item__custom-radio{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}.cre8-c-radio-field-item__inner-circle{display:none;cursor:pointer;height:0.75rem;width:0.75rem;background:var(--cre8-color-content-brand);border-radius:var(--cre8-border-radius-round)}.cre8-c-radio-field-item--error .cre8-c-radio-field-item__inner-circle{background:var(--cre8-color-bg-error-strong)}.cre8-c-radio-field-item--disabled .cre8-c-radio-field-item__inner-circle{background:var(--cre8-color-content-disabled)}.cre8-c-radio-field-item__input:checked+.cre8-c-radio-field-item__custom-radio .cre8-c-radio-field-item__inner-circle{display:flex}.cre8-c-radio-field-item__label{margin-left:2rem;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)}`;\nexport default styles;\n"]}