@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/tag/tag.js

@@ -1,838 +1,211 @@
-import { css as p, html as g } from "lit";
-import { property as o, query as h } from "lit/decorators.js";
-import { nanoid as u } from "nanoid";
-import { ifDefined as l } from "lit-html/directives/if-defined.js";
-import { C as f } from "../../cre8-form-element-BymRdQUC.js";
-import "../icon/icon.js";
-const b = p`.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 svgCheck from '@tmorrow/cre8-wc/icons/System/Regular/Check.svg?raw';
+import { html, } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { nanoid } from 'nanoid';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { Cre8FormElement } from '../cre8-form-element';
+import '../icon/icon';
+import styles from './tag.styles.js';
 /**
- * Visually hidden from display
+ * The tag component allows you to make selections, filter content, or trigger actions. While buttons are
+ * expected to appear consistently and with familiar calls to actions, tags should appear dynamically
+ * as a group of multiple interactions elements. It is a flexible
+ * component that comes in the following types:
+ *  - **radio**  Clicking a Radio Button causes it to change color. These tags only allow
+ * one option to be chosen and can be used in place of radio button when they need to be listed
+ * horizontally
+ *
+ *  - **checkbox** It allows for selecting options, It can be toggled on and off.
  */
-/*
-=======
-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;
+export class Cre8Tag extends Cre8FormElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Color variant
+         * **neutral** renders the default, unselected tag
+         * **branded** renders a selected tag
+         * **neutral-hybrid** renders a tag when mouse is hovering tag
+         */
+        this.variant = 'neutral';
+        /**
+         * shape of the tag, supports square and round, and default not mentioned its a square
+         */
+        this.shape = 'square';
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
+    connectedCallback() {
+        super.connectedCallback();
+        this.fieldId = this.fieldId || nanoid();
+        window.addEventListener('click', this._clickCheckHandler, false);
+        window.addEventListener('click', this._clickRadioHandler, false);
+        window.addEventListener('keydown', this._handleCheckKeyDown, false);
+        window.addEventListener('keydown', this.handleRadioKeyDown, false);
     }
-  }
-}
-@media (width >= 48rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 330px;
-      height: 330px;
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('click', this._clickCheckHandler, false);
+        window.removeEventListener('click', this._clickRadioHandler, false);
+        window.removeEventListener('keydown', this._handleCheckKeyDown, false);
+        window.removeEventListener('keydown', this.handleRadioKeyDown, false);
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
+    renderCheckboxIcon() {
+        if (this.type === 'checkbox' && this.isSelected) {
+            return html `
+    <cre8-icon svg="${svgCheck}" class="cre8-tag-icon" aria-hidden="true"></cre8-icon>
+     `;
+        }
+        return null;
     }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
+    _clickCheckHandler() {
+        if (!this.isDisabled) {
+            if (this.type === 'checkbox') {
+                this.isSelected = !this.isSelected;
+            }
+            this.dispatchEvent(new CustomEvent('change', { detail: { isSelected: this.isSelected, type: this.type } }));
+        }
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
+    _handleCheckKeyDown(event) {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this._clickCheckHandler();
+        }
     }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
+    /**
+    * Reset the radio tag field
+    */
+    resetField() {
+        this._internals.setFormValue(null);
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+    * Reset the radio field tags tab indeces
+    */
+    resetTabIndeces(tags) {
+        tags.forEach((element) => {
+            element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '0');
+        });
     }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
+    /**
+    * Remove checked
+    * 1) Remove checked property from all tags and set tabindex to -1
+    * 2) Reset the form field to not checked
+    */
+    _removeChecked() {
+        if (this.parentNode) {
+            /* 1 */
+            const tags = this.parentNode.querySelectorAll('cre8-tag');
+            tags.forEach((element) => {
+                element.isSelected = false;
+                element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '-1');
+                element.resetField();
+            });
+        }
     }
-  }
-}
-@media (width >= 2200px) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 592px));
+    /**
+    * Reset form callback
+    * 1) Remove the checked state from all radio tags
+    * 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.isSelected = this.initialSelected;
+        this.field.checked = this.initialSelected;
     }
-  }
-}
-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
- */
-/* ------------------------------------*\\
-    #TAG
-\\*------------------------------------ */
-:host {
-  display: inline-flex;
-}
-
-.cre8-c-tag {
-  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: flex;
-  align-items: center;
-  background-color: var(--cre8-color-bg-default);
-  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);
-  color: var(--cre8-color-content-default);
-  cursor: pointer;
-  gap: var(--cre8-spacing-8);
-  padding: var(--cre8-spacing-4) var(--cre8-spacing-16);
-  transition: all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
-  white-space: nowrap;
-}
-
-.cre8-c-tag--square {
-  border-radius: var(--cre8-border-radius-small);
-}
-
-.cre8-c-tag--round {
-  border-radius: var(--cre8-border-radius-round);
-}
-
-.cre8-c-tag--neutral:hover, .cre8-c-tag--neutral:focus {
-  background-color: var(--cre8-color-bg-default-hover);
-  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);
-}
-
-.cre8-c-tag--branded {
-  background-color: var(--cre8-color-bg-brand);
-  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);
-}
-.cre8-c-tag--branded:hover, .cre8-c-tag--branded:focus {
-  background-color: var(--cre8-color-bg-brand-hover);
-}
-
-.cre8-c-tag--neutral-hybrid {
-  color: var(--cre8-color-content-brand);
-}
-.cre8-c-tag--neutral-hybrid:hover, .cre8-c-tag--neutral-hybrid:focus {
-  background-color: var(--cre8-color-bg-default-hover);
-}
-
-.cre8-c-tag--neutral-selected,
-.cre8-c-tag--neutral-hybrid-selected {
-  background-color: var(--cre8-color-bg-brand-strong);
-  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);
-  color: var(--cre8-color-content-knockout);
-}
-.cre8-c-tag--neutral-selected:hover, .cre8-c-tag--neutral-selected:focus,
-.cre8-c-tag--neutral-hybrid-selected:hover,
-.cre8-c-tag--neutral-hybrid-selected:focus {
-  background-color: var(--cre8-color-bg-brand-strong-hover);
-}
-
-.cre8-c-tag--branded-selected {
-  background-color: var(--cre8-color-bg-brand-xstrong);
-  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);
-  color: var(--cre8-color-content-knockout);
-}
-.cre8-c-tag--branded-selected:hover, .cre8-c-tag--branded-selected:focus {
-  background-color: var(--cre8-color-bg-brand-xstrong-hover);
-}
-
-.cre8-c-tag:focus {
-  outline: var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-active-outline);
-  outline-offset: var(--cre8-border-width-focus);
-}
-
-.cre8-c-tag.cre8-c-tag--disabled,
-.cre8-c-tag.cre8-c-tag--disabled:hover,
-.cre8-c-tag.cre8-c-tag--disabled:focus {
-  background-color: var(--cre8-color-bg-disabled);
-  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-disabled);
-  color: var(--cre8-color-content-disabled);
-  cursor: not-allowed;
-  outline: none;
-}
-
-.cre8-c-tag__input {
-  font-family: var(--cre8-typography-body-small-font-family);
-  font-size: var(--cre8-typography-body-small-font-size);
-  font-weight: var(--cre8-typography-body-small-font-weight);
-  line-height: var(--cre8-typography-body-small-line-height);
-  text-decoration: var(--cre8-typography-body-small-text-decoration);
-  text-transform: var(--cre8-typography-body-small-text-transform);
-  display: none;
-}
-
-.cre8-tag-text {
-  cursor: pointer;
-}
-
-.cre8-c-tag--disabled > .cre8-tag-text {
-  cursor: not-allowed;
-}
-
-cre8-icon {
-  display: flex;
-  align-items: center;
-}`;
-var y = Object.defineProperty, a = (c, e, t, r) => {
-  for (var n = void 0, d = c.length - 1, m; d >= 0; d--)
-    (m = c[d]) && (n = m(e, t, n) || n);
-  return n && y(e, t, n), n;
-};
-const v = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.8125 3.33285L5.57291 13.5724C5.51347 13.6319 5.44289 13.6791 5.3652 13.7113C5.28751 13.7435 5.20423 13.7601 5.12013 13.7601C5.03603 13.7601 4.95275 13.7435 4.87506 13.7113C4.79737 13.6791 4.72678 13.6319 4.66735 13.5724L0.187547 9.0926C0.0674628 8.97251 0 8.80964 0 8.63982C0 8.46999 0.0674628 8.30712 0.187547 8.18704C0.307632 8.06695 0.470502 7.99949 0.640327 7.99949C0.810153 7.99949 0.973022 8.06695 1.09311 8.18704L5.12013 12.2149L14.9069 2.42729C15.027 2.30721 15.1898 2.23975 15.3597 2.23975C15.5295 2.23975 15.6924 2.30721 15.8125 2.42729C15.9325 2.54738 16 2.71025 16 2.88007C16 3.0499 15.9325 3.21277 15.8125 3.33285Z"/>
-</svg>
-`, s = class s extends f {
-  constructor() {
-    super(...arguments), this.variant = "neutral", this.shape = "square";
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.fieldId = this.fieldId || u(), window.addEventListener("click", this._clickCheckHandler, !1), window.addEventListener("click", this._clickRadioHandler, !1), window.addEventListener("keydown", this._handleCheckKeyDown, !1), window.addEventListener("keydown", this.handleRadioKeyDown, !1);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("click", this._clickCheckHandler, !1), window.removeEventListener("click", this._clickRadioHandler, !1), window.removeEventListener("keydown", this._handleCheckKeyDown, !1), window.removeEventListener("keydown", this.handleRadioKeyDown, !1);
-  }
-  renderCheckboxIcon() {
-    return this.type === "checkbox" && this.isSelected ? g`
-    <cre8-icon svg="${v}" class="cre8-tag-icon" aria-hidden="true"></cre8-icon>
-     ` : null;
-  }
-  _clickCheckHandler() {
-    this.isDisabled || (this.type === "checkbox" && (this.isSelected = !this.isSelected), this.dispatchEvent(new CustomEvent("change", { detail: { isSelected: this.isSelected, type: this.type } })));
-  }
-  _handleCheckKeyDown(e) {
-    (e.key === " " || e.key === "Enter") && (e.preventDefault(), this._clickCheckHandler());
-  }
-  /**
-  * Reset the radio tag field
-  */
-  resetField() {
-    this._internals.setFormValue(null);
-  }
-  /**
-  * Reset the radio field tags tab indeces
-  */
-  resetTabIndeces(e) {
-    e.forEach((t) => {
-      t.shadowRoot.querySelector(".cre8-c-tag").setAttribute("tabindex", "0");
-    });
-  }
-  /**
-  * Remove checked
-  * 1) Remove checked property from all tags and set tabindex to -1
-  * 2) Reset the form field to not checked
-  */
-  _removeChecked() {
-    this.parentNode && this.parentNode.querySelectorAll("cre8-tag").forEach((t) => {
-      t.isSelected = !1, t.shadowRoot.querySelector(".cre8-c-tag").setAttribute("tabindex", "-1"), t.resetField();
-    });
-  }
-  /**
-  * Reset form callback
-  * 1) Remove the checked state from all radio tags
-  * 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.isSelected = this.initialSelected, this.field.checked = this.initialSelected;
-  }
-  _clickRadioHandler() {
-    this._removeChecked(), this.isSelected = !this.isSelected;
-    const e = this.shadowRoot?.querySelector(".cre8-c-tag");
-    e && e.setAttribute("tabindex", "0"), this.isSelected ? this._internals.setFormValue(this.value || "on") : this._internals.setFormValue(null);
-  }
-  _updateSibling(e, t, r) {
-    e.preventDefault(), this._removeChecked(), r.focus(), r.setAttribute("tabindex", "0"), t.setAttribute("isSelected", "");
-  }
-  _checkPreviousTag(e) {
-    let t = this.previousElementSibling;
-    for (; t; ) {
-      const r = t?.shadowRoot?.querySelector(
-        '.cre8-c-tag:not([aria-disabled="true"])'
-      );
-      if (r) {
-        this._updateSibling(e, t, r);
-        return;
-      }
-      t = t.previousElementSibling;
+    _clickRadioHandler() {
+        this._removeChecked();
+        this.isSelected = !this.isSelected;
+        const tagInput = this.shadowRoot?.querySelector('.cre8-c-tag');
+        if (tagInput) {
+            tagInput.setAttribute('tabindex', '0');
+        }
+        if (this.isSelected) {
+            this._internals.setFormValue(this.value || 'on');
+        }
+        else {
+            this._internals.setFormValue(null);
+        }
+    }
+    _updateSibling(event, sibling, element) {
+        event.preventDefault();
+        this._removeChecked();
+        element.focus();
+        element.setAttribute('tabindex', '0');
+        sibling.setAttribute('isSelected', '');
+    }
+    _checkPreviousTag(event) {
+        let previous = this.previousElementSibling;
+        while (previous) {
+            const previousElement = previous?.shadowRoot?.querySelector('.cre8-c-tag:not([aria-disabled="true"])');
+            if (previousElement) {
+                this._updateSibling(event, previous, previousElement);
+                return;
+            }
+            previous = previous.previousElementSibling;
+        }
+    }
+    _checkNextTag(event) {
+        let next = this.nextElementSibling;
+        while (next) {
+            const nextElement = next?.shadowRoot?.querySelector('.cre8-c-tag:not([aria-disabled="true"])');
+            if (nextElement) {
+                this._updateSibling(event, next, nextElement);
+                return;
+            }
+            next = next.nextElementSibling;
+        }
     }
-  }
-  _checkNextTag(e) {
-    let t = this.nextElementSibling;
-    for (; t; ) {
-      const r = t?.shadowRoot?.querySelector(
-        '.cre8-c-tag:not([aria-disabled="true"])'
-      );
-      if (r) {
-        this._updateSibling(e, t, r);
-        return;
-      }
-      t = t.nextElementSibling;
+    handleRadioKeyDown(event) {
+        if (event.code === 'ArrowLeft' || event.code === 'ArrowUp') {
+            this._checkPreviousTag(event);
+        }
+        else if (event.code === 'ArrowRight' || event.code === 'ArrowDown') {
+            this._checkNextTag(event);
+        }
+        else if (event.code === 'Tab' && !this.isSelected) {
+            const tags = this.parentNode.querySelectorAll('cre8-tag');
+            tags.forEach((element) => {
+                element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '-1');
+            });
+            // After making tabbing away from the fieldset,
+            // reset the items to be tabbable again so the user can come back to the fieldset
+            setTimeout(this.resetTabIndeces, 100, tags);
+        }
     }
-  }
-  handleRadioKeyDown(e) {
-    if (e.code === "ArrowLeft" || e.code === "ArrowUp")
-      this._checkPreviousTag(e);
-    else if (e.code === "ArrowRight" || e.code === "ArrowDown")
-      this._checkNextTag(e);
-    else if (e.code === "Tab" && !this.isSelected) {
-      const t = this.parentNode.querySelectorAll("cre8-tag");
-      t.forEach((r) => {
-        r.shadowRoot.querySelector(".cre8-c-tag").setAttribute("tabindex", "-1");
-      }), setTimeout(this.resetTabIndeces, 100, t);
+    /**
+    * access role when tag embedded in tag-list
+    */
+    _getRole() {
+        const tagContainer = this.closest('cre8-tag-list');
+        if (tagContainer) {
+            return 'listitem';
+        }
+        return undefined;
     }
-  }
-  /**
-  * access role when tag embedded in tag-list
-  */
-  _getRole() {
-    if (this.closest("cre8-tag-list"))
-      return "listitem";
-  }
-  render() {
-    const e = this.componentClassNames("cre8-c-tag", {
-      [`cre8-c-tag--${this.type}`]: !0,
-      [`cre8-c-tag--${this.shape}`]: !0,
-      [`cre8-c-tag--${this.variant}`]: !0,
-      [`cre8-c-tag--${this.variant}-selected`]: this.isSelected,
-      "cre8-c-tag--disabled": this.isDisabled
-    }), t = this.isSelected === !0 || this.initialSelected === !0;
-    return g` 
-        <div role="${l(this._getRole())}">
-            <div role="${l(this.type)}" aria-checked="${t}" class="${e}"
-                aria-disabled="${l(this.isDisabled)}"
-                @click="${this.type === "radio" ? this._clickRadioHandler : this._clickCheckHandler}"
-                @keydown="${this.type === "radio" ? this.handleRadioKeyDown : this._handleCheckKeyDown}"
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-tag', {
+            [`cre8-c-tag--${this.type}`]: true,
+            [`cre8-c-tag--${this.shape}`]: true,
+            [`cre8-c-tag--${this.variant}`]: true,
+            [`cre8-c-tag--${this.variant}-selected`]: this.isSelected,
+            'cre8-c-tag--disabled': this.isDisabled,
+        });
+        const isSelected = this.isSelected === true || this.initialSelected === true;
+        return html ` 
+        <div role="${ifDefined(this._getRole())}">
+            <div role="${ifDefined(this.type)}" aria-checked="${isSelected}" class="${componentClassNames}"
+                aria-disabled="${ifDefined(this.isDisabled)}"
+                @click="${this.type === 'radio' ? this._clickRadioHandler : this._clickCheckHandler}"
+                @keydown="${this.type === 'radio' ? this.handleRadioKeyDown : this._handleCheckKeyDown}"
                 tabindex="0"
             >
                 ${this.renderCheckboxIcon()}
                 <label 
-                    @input="${this.type === "radio" ? this._clickRadioHandler : this._clickCheckHandler}"
+                    @input="${this.type === 'radio' ? this._clickRadioHandler : this._clickCheckHandler}"
                     for="${this.fieldId}" class="cre8-tag-text">${this.text}
                 </label>
             </div>
@@ -843,40 +216,39 @@ const v = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" x
                 name=${this.text}
                 .value="${this.text}"
                 ?disabled="${this.isDisabled}"
-                .checked = "${t}"
+                .checked = "${isSelected}"
             />
         </div>
   `;
-  }
-};
-s.styles = [b];
-let i = s;
-a([
-  o()
-], i.prototype, "text");
-a([
-  o()
-], i.prototype, "type");
-a([
-  o()
-], i.prototype, "variant");
-a([
-  o()
-], i.prototype, "shape");
-a([
-  o({ type: Boolean })
-], i.prototype, "isDisabled");
-a([
-  o({ type: Boolean })
-], i.prototype, "isSelected");
-a([
-  h("input")
-], i.prototype, "field");
-a([
-  o()
-], i.prototype, "fieldId");
-customElements.get("cre8-tag") === void 0 && customElements.define("cre8-tag", i);
-export {
-  i as Cre8Tag,
-  i as default
-};
+    }
+}
+Cre8Tag.styles = [styles];
+__decorate([
+    property()
+], Cre8Tag.prototype, "text", void 0);
+__decorate([
+    property()
+], Cre8Tag.prototype, "type", void 0);
+__decorate([
+    property()
+], Cre8Tag.prototype, "variant", void 0);
+__decorate([
+    property()
+], Cre8Tag.prototype, "shape", void 0);
+__decorate([
+    property({ type: Boolean })
+], Cre8Tag.prototype, "isDisabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], Cre8Tag.prototype, "isSelected", void 0);
+__decorate([
+    query('input')
+], Cre8Tag.prototype, "field", void 0);
+__decorate([
+    property()
+], Cre8Tag.prototype, "fieldId", void 0);
+if (customElements.get('cre8-tag') === undefined) {
+    customElements.define('cre8-tag', Cre8Tag);
+}
+export default Cre8Tag;
+//# sourceMappingURL=tag.js.map