@haiilo/catalyst 2.3.0 → 2.4.0

package/dist/esm/{cat-alert_22.entry.js → cat-alert_23.entry.js}

@@ -7,15 +7,6 @@ function setAttributeDefault(host, attr, value) {
     host.hostElement.setAttribute(attr, String(value));
   }
 }
-function setPropertyDefault(host, prop) {
-  setAttributeDefault(host, String(prop), host[prop]);
-}
-function setAttribute(host, attr, value) {
-  host.hostElement.setAttribute(attr, String(value));
-}
-function setProperty(host, prop) {
-  setAttribute(host, String(prop), host[prop]);
-}
 
 const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:var(--cat-border-radius-l, 0.5rem);margin-bottom:1rem}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.1)}:host([color=primary]) cat-icon{color:rgb(var(--cat-primary-text, 0, 129, 148))}:host([color=secondary]){background-color:rgba(var(--cat-secondary-bg, 105, 118, 135), 0.1)}:host([color=secondary]) cat-icon{color:#697687}:host([color=success]){background-color:rgba(var(--cat-success-bg-, 0, 132, 88), 0.1)}:host([color=success]) cat-icon{color:#008458}:host([color=warning]){background-color:rgba(var(--cat-warning-bg, 255, 206, 128), 0.1)}:host([color=warning]) cat-icon{color:#ebb663}:host([color=danger]){background-color:rgba(var(--cat-danger-bg, 217, 52, 13), 0.1)}:host([color=danger]) cat-icon{color:#d9340d}";
 
@@ -48,7 +39,6 @@ const CatAlert = class {
   connectedCallback() {
     setAttributeDefault(this, 'tabindex', 0);
     setAttributeDefault(this, 'role', this.mapRole.get(this.color));
-    setPropertyDefault(this, 'color');
   }
   render() {
     return (h(Host, null, !this.noIcon && h("cat-icon", { size: "l", icon: this.icon ? this.icon : this.mapIcon.get(this.color) }), h("div", { class: "content" }, h("slot", null))));
@@ -168,29 +158,10 @@ const CatBadge = class {
      */
     this.pulse = false;
   }
-  connectedCallback() {
-    setPropertyDefault(this, 'variant');
-    setPropertyDefault(this, 'color');
-    setPropertyDefault(this, 'size');
-  }
   render() {
     return h("slot", null);
   }
-  onColorChanged() {
-    setProperty(this, 'color');
-  }
-  onSizeChanged() {
-    setProperty(this, 'size');
-  }
-  onVariantChanged() {
-    setProperty(this, 'variant');
-  }
   get hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "color": ["onColorChanged"],
-    "size": ["onSizeChanged"],
-    "variant": ["onVariantChanged"]
-  }; }
 };
 CatBadge.style = catBadgeCss;
 
@@ -537,7 +508,7 @@ const CatCheckbox = class {
     this.catChange = createEvent(this, "catChange", 7);
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
-    this.id = `cat-checkbox-${nextUniqueId$8++}`;
+    this._id = `cat-checkbox-${nextUniqueId$8++}`;
     this.hasSlottedLabel = false;
     /**
      * Checked state of the checkbox
@@ -568,6 +539,9 @@ const CatCheckbox = class {
      */
     this.labelLeft = false;
   }
+  get id() {
+    return this.identifier || this._id;
+  }
   componentDidLoad() {
     if (this.input && this.indeterminate) {
       this.input.indeterminate = true;
@@ -1942,7 +1916,7 @@ const CatInput = class {
     this.catChange = createEvent(this, "catChange", 7);
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
-    this.id = `cat-input-${nextUniqueId$6++}`;
+    this._id = `cat-input-${nextUniqueId$6++}`;
     this.hasSlottedLabel = false;
     /**
      * Whether the input should show a clear button.
@@ -1964,10 +1938,6 @@ const CatInput = class {
      * Visually hide the label, but still show it to assistive technologies like screen readers.
      */
     this.labelHidden = false;
-    /**
-     * The name of the form control. Submitted with the form as part of a name/value pair.
-     */
-    this.name = '';
     /**
      * The value is not editable.
      */
@@ -1985,6 +1955,9 @@ const CatInput = class {
      */
     this.type = 'text';
   }
+  get id() {
+    return this.identifier || this._id;
+  }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
@@ -2047,6 +2020,50 @@ const CatInput = class {
 };
 CatInput.style = catInputCss;
 
+const catLabelCss = ":host{display:block}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
+
+const CatLabel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * A value is required or must be check for the form to be submittable.
+     */
+    this.required = false;
+  }
+  onClick() {
+    var _a;
+    if (this.for) {
+      // focus target that is possibly hidden inside a shadow root
+      (_a = (document.getElementById(this.for) || this.findShadowTarget(this.for))) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }
+  render() {
+    return (h(Host, null, h("label", { htmlFor: this.for, onClick: this.onClick.bind(this) }, h("slot", null), !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")))));
+  }
+  findShadowTarget(id) {
+    var _a;
+    for (let i = 0; i < CatLabel.SHADOW_TARGETS.length; i++) {
+      const elems = document.getElementsByTagName(CatLabel.SHADOW_TARGETS[i]);
+      for (let i = 0; i < elems.length; i++) {
+        const target = (_a = elems[i].shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(id);
+        if (target) {
+          return target;
+        }
+      }
+    }
+    return null;
+  }
+};
+CatLabel.SHADOW_TARGETS = [
+  'CAT-INPUT',
+  'CAT-TEXTAREA',
+  'CAT-CHECKBOX',
+  'CAT-TOGGLE',
+  'CAT-RADIO',
+  'CAT-SELECT'
+];
+CatLabel.style = catLabelCss;
+
 const catPaginationCss = ":host{display:inline-block}:host([hidden]){display:none}ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}li{display:inline-flex;justify-content:center}li.dots{-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([variant=outlined]) ol{gap:0.75rem}.cat-pagination-xs li.dots,.cat-pagination-xs li.text{height:1.5rem;line-height:1.5rem;font-size:0.875rem}.cat-pagination-xs li.dots{width:1.5rem}:host([variant=outlined]) .cat-pagination-xs{gap:0.375rem}.cat-pagination-s li.dots,.cat-pagination-s li.text{height:2rem;line-height:2rem;font-size:0.9375rem}.cat-pagination-s li.dots{width:2rem}:host([variant=outlined]) .cat-pagination-s{gap:0.5rem}.cat-pagination-m li.dots,.cat-pagination-m li.text{height:2.5rem;line-height:2.5rem;font-size:0.9375rem}.cat-pagination-m li.dots{width:2.5rem}:host([variant=outlined]) .cat-pagination-m{gap:0.625rem}.cat-pagination-l li.dots,.cat-pagination-l li.text{height:3rem;line-height:3rem;font-size:0.9375rem}.cat-pagination-l li.dots{width:3rem}:host([variant=outlined]) .cat-pagination-l{gap:0.75rem}.cat-pagination-xl li.dots,.cat-pagination-xl li.text{height:3.5rem;line-height:3.5rem;font-size:1.125rem}.cat-pagination-xl li.dots{width:3.5rem}:host([variant=outlined]) .cat-pagination-xl{gap:0.875rem}";
 
 const CatPagination = class {
@@ -2153,7 +2170,7 @@ const CatRadio = class {
     this.catChange = createEvent(this, "catChange", 7);
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
-    this.id = `cat-radio-${++nextUniqueId$5}`;
+    this._id = `cat-radio-${++nextUniqueId$5}`;
     this.hasSlottedLabel = false;
     /**
      * Whether this radio is checked.
@@ -2180,6 +2197,9 @@ const CatRadio = class {
      */
     this.labelLeft = false;
   }
+  get id() {
+    return this.identifier || this._id;
+  }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
@@ -2210,7 +2230,7 @@ const CatRadio = class {
     this.input.click();
   }
   render() {
-    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { class: "radio" }, h("input", { ref: el => (this.input = el), id: this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
+    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { class: "radio" }, h("input", { ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
@@ -4182,7 +4202,7 @@ const CatSelect = class {
     this.catClose = createEvent(this, "catClose", 7);
     this.catChange = createEvent(this, "catChange", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
-    this.id = `cat-input-${nextUniqueId$4++}`;
+    this._id = `cat-input-${nextUniqueId$4++}`;
     this.term$ = new Subject();
     this.more$ = new Subject();
     this.state = INIT_STATE;
@@ -4207,10 +4227,6 @@ const CatSelect = class {
      * The label for the select.
      */
     this.label = '';
-    /**
-     * The name of the form control. Submitted with the form as part of a name/value pair.
-     */
-    this.name = '';
     /**
      * Visually hide the label, but still show it to assistive technologies like screen readers.
      */
@@ -4228,6 +4244,9 @@ const CatSelect = class {
      */
     this.tags = false;
   }
+  get id() {
+    return this.identifier || this._id;
+  }
   onConnectorChange(connector) {
     this.reset(connector);
     this.resolve();
@@ -6293,7 +6312,7 @@ const CatTextarea = class {
     this.catChange = createEvent(this, "catChange", 7);
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
-    this.id = `cat-textarea-${nextUniqueId$2++}`;
+    this._id = `cat-textarea-${nextUniqueId$2++}`;
     this.hasSlottedLabel = false;
     /**
      * Whether the textarea is disabled.
@@ -6307,10 +6326,6 @@ const CatTextarea = class {
      * Visually hide the label, but still show it to assistive technologies like screen readers.
      */
     this.labelHidden = false;
-    /**
-     * The name of the form control. Submitted with the form as part of a name/value pair.
-     */
-    this.name = '';
     /**
      * The value is not editable.
      */
@@ -6324,6 +6339,9 @@ const CatTextarea = class {
      */
     this.rows = 3;
   }
+  get id() {
+    return this.identifier || this._id;
+  }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
@@ -6386,7 +6404,7 @@ const CatToggle = class {
     this.catChange = createEvent(this, "catChange", 7);
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
-    this.id = `cat-toggle-${nextUniqueId$1++}`;
+    this._id = `cat-toggle-${nextUniqueId$1++}`;
     this.hasSlottedLabel = false;
     /**
      * Checked state of the toggle.
@@ -6413,6 +6431,9 @@ const CatToggle = class {
      */
     this.labelLeft = false;
   }
+  get id() {
+    return this.identifier || this._id;
+  }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
@@ -6613,6 +6634,6 @@ const CatTooltip = class {
 CatTooltip.OFFSET = 4;
 CatTooltip.style = catTooltipCss;
 
-export { CatAlert as cat_alert, CatAvatar as cat_avatar, CatBadge as cat_badge, CatButton as cat_button, CatCard as cat_card, CatCheckbox as cat_checkbox, CatDropdown as cat_dropdown, CatIcon as cat_icon, CatInput as cat_input, CatPagination as cat_pagination, CatRadio as cat_radio, CatRadioGroup as cat_radio_group, CatScrollable as cat_scrollable, CatSelect as cat_select, CatSelectTest as cat_select_demo, CatSkeleton as cat_skeleton, CatSpinner as cat_spinner, CatTab as cat_tab, CatTabs as cat_tabs, CatTextarea as cat_textarea, CatToggle as cat_toggle, CatTooltip as cat_tooltip };
+export { CatAlert as cat_alert, CatAvatar as cat_avatar, CatBadge as cat_badge, CatButton as cat_button, CatCard as cat_card, CatCheckbox as cat_checkbox, CatDropdown as cat_dropdown, CatIcon as cat_icon, CatInput as cat_input, CatLabel as cat_label, CatPagination as cat_pagination, CatRadio as cat_radio, CatRadioGroup as cat_radio_group, CatScrollable as cat_scrollable, CatSelect as cat_select, CatSelectTest as cat_select_demo, CatSkeleton as cat_skeleton, CatSpinner as cat_spinner, CatTab as cat_tab, CatTabs as cat_tabs, CatTextarea as cat_textarea, CatToggle as cat_toggle, CatTooltip as cat_tooltip };
 
-//# sourceMappingURL=cat-alert_22.entry.js.map
+//# sourceMappingURL=cat-alert_23.entry.js.map