@haiilo/catalyst 2.4.9 → 2.5.0

package/dist/catalyst/scss/_variables.scss

@@ -31,34 +31,34 @@ $cat-elevation: (
   0: none,
   1: (
     0 0 0 1px cat-token('color.ui.border.default'),
-    0 1px 2px rgba(27, 31, 38, 0.05)
+    0 1px 2px rgba(27, 31, 38, 5%)
   ),
   2: (
     0 0 0 1px cat-token('color.ui.border.default'),
-    0 1px 2px rgba(27, 31, 38, 0.06),
-    0 1px 3px rgba(27, 31, 38, 0.1)
+    0 1px 2px rgba(27, 31, 38, 6%),
+    0 1px 3px rgba(27, 31, 38, 10%)
   ),
   3: (
     0 0 0 1px cat-token('color.ui.border.default'),
-    0 2px 4px -2px rgba(27, 31, 38, 0.06),
-    0 4px 8px -2px rgba(27, 31, 38, 0.1)
+    0 2px 4px -2px rgba(27, 31, 38, 6%),
+    0 4px 8px -2px rgba(27, 31, 38, 10%)
   ),
   4: (
     0 0 0 1px cat-token('color.ui.border.default'),
-    0 4px 6px -2px rgba(27, 31, 38, 0.03),
-    0 12px 16px -4px rgba(27, 31, 38, 0.08)
+    0 4px 6px -2px rgba(27, 31, 38, 3%),
+    0 12px 16px -4px rgba(27, 31, 38, 8%)
   ),
   5: (
     0 0 0 1px cat-token('color.ui.border.default'),
-    0 8px 8px -4px rgba(27, 31, 38, 0.03),
-    0 20px 24px -4px rgba(27, 31, 38, 0.08)
+    0 8px 8px -4px rgba(27, 31, 38, 3%),
+    0 20px 24px -4px rgba(27, 31, 38, 8%)
   ),
   6: (
     0 0 0 1px cat-token('color.ui.border.default'),
-    0 24px 48px -12px rgba(27, 31, 38, 0.18)
+    0 24px 48px -12px rgba(27, 31, 38, 18%)
   ),
   7: (
     0 0 0 1px cat-token('color.ui.border.default'),
-    0 32px 64px -12px rgba(27, 31, 38, 0.14)
+    0 32px 64px -12px rgba(27, 31, 38, 14%)
   )
 );

package/dist/cjs/{cat-alert_23.cjs.entry.js → cat-alert_24.cjs.entry.js}

@@ -1887,6 +1887,45 @@ const CatDropdown = class {
 CatDropdown.OFFSET = 4;
 CatDropdown.style = catDropdownCss;
 
+const catFormGroupCss = ":host{display:block}";
+
+const CatFormGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.formElements = [];
+    /**
+     * Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br />
+     * By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br />
+     * - If there are more required, the optional will be marked.<br />
+     * - If there are less required, it will mark the required.<br /><br />
+     * If a form field had "!", the requiredMarked of the field would not change.
+     */
+    this.requiredMarker = 'auto';
+  }
+  onRequiredMarker(newRequiredMarker) {
+    const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;
+    this.formElements.forEach(element => { var _a; return !((_a = element.requiredMarker) === null || _a === void 0 ? void 0 : _a.endsWith('!')) && (element.requiredMarker = updateMarker); });
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", { onSlotchange: this.onSlotChange.bind(this) })));
+  }
+  onSlotChange() {
+    this.formElements = Array.from(this.hostElement.querySelectorAll('cat-textarea, cat-input, cat-select, cat-label'));
+    this.onRequiredMarker(this.requiredMarker);
+  }
+  calculate(elements) {
+    const formFields = elements.filter(value => value.tagName !== 'CAT-LABEL');
+    const optionalFields = formFields.filter(value => !value.required).length;
+    const requiredFields = formFields.length - optionalFields;
+    return requiredFields >= optionalFields ? 'optional' : 'required';
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "requiredMarker": ["onRequiredMarker"]
+  }; }
+};
+CatFormGroup.style = catFormGroupCss;
+
 const catIconCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}span{display:inline-flex}svg{fill:currentColor;stroke:none;transform-origin:center center;height:1em;width:calc(var(--cat-icon-ratio, 1) * 1em)}.icon-xs svg{font-size:0.75rem}.icon-s svg{font-size:1rem}.icon-m svg{font-size:1.25rem}.icon-l svg{font-size:1.5rem}.icon-xl svg{font-size:1.75rem}";
 
 const CatIcon = class {
@@ -1921,6 +1960,10 @@ const CatInput = class {
     this.catBlur = index.createEvent(this, "catBlur", 7);
     this._id = `cat-input-${nextUniqueId$6++}`;
     this.hasSlottedLabel = false;
+    /**
+     * Whether the label need a marker to shown if the input is required or optional.
+     */
+    this.requiredMarker = 'optional';
     /**
      * Whether the input should show a clear button.
      */
@@ -1997,7 +2040,7 @@ const CatInput = class {
     this.value = '';
   }
   render() {
-    return (index.h(index.Host, null, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, !this.required && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.optional'), ")"))))), index.h("div", { class: {
+    return (index.h(index.Host, null, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, !this.required && this.requiredMarker.startsWith('optional') && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.required'), ")"))))), index.h("div", { class: {
         'input-wrapper': true,
         'input-round': this.round,
         'input-disabled': this.disabled
@@ -2028,6 +2071,10 @@ const catLabelCss = ":host{display:inline-flex;align-items:center;min-height:2.5
 const CatLabel = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * Whether the label need a marker to shown if the input is required or optional.
+     */
+    this.requiredMarker = 'optional';
     /**
      * A value is required or must be check for the form to be submittable.
      */
@@ -2041,7 +2088,7 @@ const CatLabel = class {
     }
   }
   render() {
-    return (index.h(index.Host, null, index.h("label", { htmlFor: this.for, onClick: this.onClick.bind(this) }, index.h("slot", null), !this.required && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.optional'), ")")))));
+    return (index.h(index.Host, null, index.h("label", { htmlFor: this.for, onClick: this.onClick.bind(this) }, index.h("slot", null), !this.required && this.requiredMarker.startsWith('optional') && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.required'), ")")))));
   }
   findShadowTarget(id) {
     var _a;
@@ -4211,6 +4258,10 @@ const CatSelect = class {
     this.valueChangedBySelection = false;
     this.state = INIT_STATE;
     this.hasSlottedLabel = false;
+    /**
+     * Whether the label need a marker to shown if the select is required or optional.
+     */
+    this.requiredMarker = 'optional';
     /**
      * Enable multiple selection.
      */
@@ -4444,7 +4495,7 @@ const CatSelect = class {
     });
   }
   render() {
-    return (index.h(index.Host, null, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, !this.required && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.optional'), ")"))))), index.h("div", { class: { 'select-wrapper': true, 'select-disabled': this.disabled }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, index.h("div", { class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (index.h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (index.h("span", { class: {
+    return (index.h(index.Host, null, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, !this.required && this.requiredMarker.startsWith('optional') && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.required'), ")"))))), index.h("div", { class: { 'select-wrapper': true, 'select-disabled': this.disabled }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, index.h("div", { class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (index.h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (index.h("span", { class: {
         pill: true,
         'select-no-open': true,
         'select-option-active': this.state.activeSelectionIndex === i
@@ -4454,7 +4505,7 @@ const CatSelect = class {
       this.clearable ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "cross-circle-outlined", variant: "text", size: "s", a11yLabel: catIconRegistry.catI18nRegistry.t('input.clear'), onClick: () => this.clear() })) : null, !this.state.isResolving && (index.h("cat-button", { iconOnly: true, icon: "chevron-down-outlined", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? catIconRegistry.catI18nRegistry.t('select.close') : catIconRegistry.catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving }))), this.hintSection, index.h("div", { class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.h("ul", { class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isLoading
       ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (index.h("li", { class: "select-option-loading" }, index.h("cat-skeleton", { variant: "body", lines: 1 }), index.h("cat-skeleton", { variant: "body", lines: 1 }))))
       : !this.state.options.length &&
-        !this.tags && index.h("li", { class: "select-option-empty" }, catIconRegistry.catI18nRegistry.t('select.empty'))))))));
+        !this.tags && (index.h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : catIconRegistry.catI18nRegistry.t('select.empty')))))))));
   }
   get optionsList() {
     return this.state.options.map((item, i) => {
@@ -4881,7 +4932,7 @@ const CatSelectTest = class {
     setTimeout(() => this.multipleSelect && (this.multipleSelect.value = []), 5000);
   }
   render() {
-    return (index.h(index.Host, { style: { display: 'flex', flexDirection: 'column' } }, index.h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => { var _a; return console.log((_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.value); }, onCatBlur: e => console.log('Multiple blur', e), multiple: true, clearable: true }, index.h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), index.h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), index.h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), index.h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', onCatChange: () => { var _a; return console.log((_a = this.singleSelectAvatar) === null || _a === void 0 ? void 0 : _a.value); }, placeholder: "Search for a country or capital", clearable: true }), index.h("cat-dropdown", { overflow: true, noAutoClose: true }, index.h("cat-button", { slot: "trigger", style: { width: '50%' } }, "Open select"), index.h("div", { slot: "content", style: { width: '400px' } }, index.h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true, style: { width: '90%' } })))));
+    return (index.h(index.Host, { style: { display: 'flex', flexDirection: 'column' } }, index.h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => { var _a; return console.log((_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.value); }, onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true }, index.h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), index.h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), index.h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), index.h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', onCatChange: () => { var _a; return console.log((_a = this.singleSelectAvatar) === null || _a === void 0 ? void 0 : _a.value); }, placeholder: "Search for a country or capital", clearable: true }), index.h("cat-dropdown", { overflow: true, noAutoClose: true }, index.h("cat-button", { slot: "trigger", style: { width: '50%' } }, "Open select"), index.h("div", { slot: "content", style: { width: '400px' } }, index.h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true, style: { width: '90%' } })))));
   }
   get countryConnector() {
     return {
@@ -6328,6 +6379,10 @@ const CatTextarea = class {
     this.catBlur = index.createEvent(this, "catBlur", 7);
     this._id = `cat-textarea-${nextUniqueId$2++}`;
     this.hasSlottedLabel = false;
+    /**
+     * Whether the label need a marker to shown if the textarea is required or optional.
+     */
+    this.requiredMarker = 'optional';
     /**
      * Whether the textarea is disabled.
      */
@@ -6389,7 +6444,7 @@ const CatTextarea = class {
     this.textarea.click();
   }
   render() {
-    return (index.h(index.Host, null, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, !this.required && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(Optional)"))))), index.h("textarea", { ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.hintSection));
+    return (index.h(index.Host, null, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, !this.required && this.requiredMarker.startsWith('optional') && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.required'), ")"))))), index.h("textarea", { ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.hintSection));
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
@@ -6655,6 +6710,7 @@ exports.cat_button = CatButton;
 exports.cat_card = CatCard;
 exports.cat_checkbox = CatCheckbox;
 exports.cat_dropdown = CatDropdown;
+exports.cat_form_group = CatFormGroup;
 exports.cat_icon = CatIcon;
 exports.cat_input = CatInput;
 exports.cat_label = CatLabel;
@@ -6672,4 +6728,4 @@ exports.cat_textarea = CatTextarea;
 exports.cat_toggle = CatToggle;
 exports.cat_tooltip = CatTooltip;
 
-//# sourceMappingURL=cat-alert_23.cjs.entry.js.map
+//# sourceMappingURL=cat-alert_24.cjs.entry.js.map