genesys-spark-components 4.68.0 → 4.69.0

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-checkbox/gux-form-field-checkbox.js

@@ -27,8 +27,10 @@ export class GuxFormFieldCheckbox {
     constructor() {
         this.labelPosition = 'beside';
         this.disabled = undefined;
-        this.hasError = false;
         this.hasHelp = false;
+        this.hasError = false;
+        this.hasGroupError = false;
+        this.hasGroupDisabled = false;
     }
     onMutation() {
         this.hasError = hasSlot(this.root, 'error');
@@ -46,16 +48,19 @@ export class GuxFormFieldCheckbox {
         }
     }
     render() {
-        return (h(Host, { key: 'dee0442f1e572b4d987e3b5a0560de13622453b1', class: {
-                'gux-input-error': this.hasError,
+        return (h(Host, { key: '622c07b7f2a3b0c783cd9182d3d562da22c36a5b', class: {
+                'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '0928db5746d7bbce8210cc75ab5ab2d95a05fdcd', class: "gux-form-field-container" }, h("div", { key: '783384edaee35f8bce42b1a048001e6e73e0892d', class: "gux-input-label" }, h("div", { key: '7407bc64c2870a2c900d3ec1a166a569d947ed76', class: "gux-input" }, h("slot", { key: 'a8e3e79c4a4f3ca18d2b44c81e319f7ec25e9f0c', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'e532eb9aa6932518eb55a35b93e0e6867a6f886e', class: `gux-label-${this.labelPosition}` }, h("slot", { key: '0dd9ad2ca420a8a5876dfd309e09c6eac5318829', name: "label" }))), h("div", { key: 'e212774341421a73caed19db23bac5d805a1a573', class: "error-and-help-text" }, h(GuxFormFieldError, { key: 'f6617a568e74bfa5e696253315852187d2f064be', show: this.hasError }, h("slot", { key: '745b35f338ee3f3bd58151623e134722eea239e5', name: "error" })), h(GuxFormFieldHelp, { key: '1ffae08152920fb4847fa01c5d0ca64db35048f4', show: !this.hasError && this.hasHelp }, h("slot", { key: 'dba436e95dbc3b789b4dd598f5a87bfa4361ad17', name: "help" }))))));
+            } }, h("div", { key: '77a9517374fcf81df91a17a08fb4547a9f91c1f5', class: "gux-form-field-container" }, h("div", { key: '2d26152d3afb47c114f302386335ceb4b158236a', class: "gux-input-label" }, h("div", { key: '9837b0c10ac9412f4cfc2abc0781de218ddc67e9', class: "gux-input" }, h("slot", { key: '1d91becb705ca706dd5ee34262d0523577db2e2b', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '7c196bb2951b7d60f9f8ef9ffc37567a2412325b', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '5a070600ecf9d0ea37f4712aae00a53a2b3bc894', name: "label" }))), h("div", { key: 'b0eb03072ac74483b4f7220625263bb33f4999d0', class: "error-and-help-text" }, h(GuxFormFieldError, { key: 'fb30efdbfafb72a712075fa615c39bd845288503', show: this.hasError }, h("slot", { key: '55d7723528f41384a321ff26f590e1201f0d43d8', name: "error" })), h(GuxFormFieldHelp, { key: '380abf6e2081e998da07191c8f7cd6360fda5c2d', show: !this.hasError && this.hasHelp }, h("slot", { key: '662dea1c9e54e5ef4de3328ae6d3cf1672018650', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition.toLowerCase();
     }
     setInput() {
         this.input = getSlottedInput(this.root, 'input[type="checkbox"][slot="input"]');
+        if (this.hasGroupDisabled) {
+            this.input.disabled = true;
+        }
         preventBrowserValidationStyling(this.input);
         this.disabled = calculateInputDisabledState(this.input);
         this.disabledObserver = onInputDisabledStateChange(this.input, (disabled) => {
@@ -94,14 +99,50 @@ export class GuxFormFieldCheckbox {
                 "attribute": "label-position",
                 "reflect": false,
                 "defaultValue": "'beside'"
+            },
+            "hasGroupError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "has-group-error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hasGroupDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "has-group-disabled",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
             "disabled": {},
-            "hasError": {},
-            "hasHelp": {}
+            "hasHelp": {},
+            "hasError": {}
         };
     }
     static get elementRef() { return "root"; }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-checkbox-group/gux-form-field-checkbox-group.css

@@ -0,0 +1,185 @@
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+.gux-form-field-fieldset-container {
+  display: flex;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+.gux-form-field-fieldset-container.gux-beside {
+  flex-direction: row;
+}
+.gux-form-field-fieldset-container.gux-above {
+  flex-direction: column;
+}
+
+.gux-form-field-error {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
+  place-content: stretch flex-start;
+  align-items: center;
+  padding: var(--gse-ui-formControl-helper-errorPadding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-errorColor);
+}
+.gux-form-field-error.gux-show {
+  display: flex;
+}
+.gux-form-field-error gux-icon {
+  flex: 0 1 auto;
+  align-self: start;
+  order: 0;
+  min-width: var(--gse-ui-icon-size-sm);
+  min-height: var(--gse-ui-icon-size-sm);
+  color: var(--gse-ui-formControl-helper-errorColor);
+}
+.gux-form-field-error .gux-message {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+}
+
+.gux-form-field-help {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  place-content: stretch flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: var(--gse-ui-formControl-helper-paddingSmall);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-defaultColor);
+}
+.gux-form-field-help.gux-show {
+  display: flex;
+}
+.gux-form-field-help .gux-message {
+  flex: 0 1 auto;
+  align-self: none;
+  order: 0;
+}
+
+.gux-form-field-error {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
+  place-content: stretch flex-start;
+  align-items: center;
+  padding: var(--gse-ui-formControl-helper-errorPadding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-errorColor);
+}
+.gux-form-field-error.gux-show {
+  display: flex;
+}
+.gux-form-field-error gux-icon {
+  flex: 0 1 auto;
+  align-self: start;
+  order: 0;
+  min-width: var(--gse-ui-icon-size-sm);
+  min-height: var(--gse-ui-icon-size-sm);
+  color: var(--gse-ui-formControl-helper-errorColor);
+}
+.gux-form-field-error .gux-message {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+}
+
+.gux-form-field-help {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  place-content: stretch flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: var(--gse-ui-formControl-helper-paddingSmall);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-defaultColor);
+}
+.gux-form-field-help.gux-show {
+  display: flex;
+}
+.gux-form-field-help .gux-message {
+  flex: 0 1 auto;
+  align-self: none;
+  order: 0;
+}
+
+.gux-form-field-visual-label {
+  display: inline-flex;
+  flex: 1 0 auto;
+}
+.gux-form-field-visual-label ::slotted(gux-label-info-beta) {
+  padding-inline-start: var(--gse-ui-formControl-label-gap);
+}
+.gux-form-field-visual-label.gux-required gux-form-field-label-indicator {
+  padding-inline-start: var(--gse-ui-formControl-label-gap);
+}
+.gux-form-field-visual-label.gux-beside {
+  position: relative;
+  top: var(--gse-ui-formControl-input-top);
+  width: fit-content;
+  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-width: fit-content;
+  margin-right: var(--gse-ui-formControl-group-gapItems);
+}
+.gux-form-field-visual-label.gux-above {
+  padding: var(--gse-ui-formControl-label-padding);
+}
+.gux-form-field-visual-label.gux-screenreader {
+  display: none;
+}
+
+.gux-form-field-screenreader-label {
+  position: absolute;
+  top: auto;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+:host {
+  display: block;
+}
+
+:host([disabled]) .gux-form-field-legend-label {
+  opacity: var(--gse-ui-formControl-input-disabled-opacity);
+}
+
+::slotted(gux-form-field-checkbox) {
+  padding-top: var(--gse-ui-formControl-group-gapItems);
+}
+
+::slotted(gux-form-field-checkbox:first-of-type) {
+  padding-top: 0;
+}
+
+:host(.gux-group-checkbox) ::slotted(gux-form-field-checkbox) {
+  padding-left: 24px;
+}
+:host(.gux-group-checkbox) slot[name=group-checkbox]::slotted(gux-form-field-checkbox) {
+  padding-left: 0;
+}
+
+.gux-form-field-legend-label {
+  font-family: var(--gse-ui-formControl-label-text-fontFamily);
+  font-size: var(--gse-ui-formControl-label-text-fontSize);
+  font-weight: var(--gse-ui-formControl-label-text-fontWeight);
+  line-height: var(--gse-ui-formControl-label-text-lineHeight);
+  color: var(--gse-ui-formControl-label-labelColor);
+}

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-checkbox-group/gux-form-field-checkbox-group.js

@@ -0,0 +1,191 @@
+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 { forceUpdate, h } from "@stencil/core";
+import { OnMutation } from "../../../../../utils/decorator/on-mutation";
+import { hasSlot } from "../../../../../utils/dom/has-slot";
+import { logWarn } from "../../../../../utils/error/log-error";
+import { setAllCheckboxInputs, setParentCheckboxElementCheckedState } from "./gux-form-field-checkbox-group.service";
+import { GuxFormFieldError, GuxFormFieldHelp, GuxFormFieldScreenreaderLabel, GuxFormFieldVisualLabel, GuxFormFieldFieldsetContainer } from "../../functional-components/functional-components";
+import { getSlotTextContent } from "../../../../../utils/dom/get-slot-text-content";
+import { trackComponent } from "../../../../../utils/tracking/usage";
+/**
+ * @slot group-label - Required slot for label tag
+ * @slot group-checkbox - Optional slot
+ * @slot group-error - Optional slot for error message
+ * @slot group-help - Optional slot for help message
+ */
+export class GuxFormFieldCheckboxGroupBeta {
+    constructor() {
+        this.hasGroupError = false;
+        this.hasGroupHelp = false;
+        this.hasGroupLabelInfo = false;
+        this.disabled = false;
+    }
+    watchGroupError(hasGroupError) {
+        const checkboxSlots = this.root.querySelectorAll('gux-form-field-checkbox');
+        if (checkboxSlots) {
+            checkboxSlots.forEach(item => {
+                item.hasGroupError = hasGroupError;
+            });
+        }
+    }
+    watchDisabled() {
+        this.setDisabledCheckboxes();
+    }
+    onMutation() {
+        this.hasGroupError = hasSlot(this.root, 'group-error');
+        this.hasGroupHelp = hasSlot(this.root, 'group-help');
+        this.hasGroupLabelInfo = hasSlot(this.root, 'group-label-info');
+    }
+    componentWillLoad() {
+        this.hasGroupError = hasSlot(this.root, 'group-error');
+        this.hasGroupHelp = hasSlot(this.root, 'group-help');
+        this.hasGroupLabelInfo = hasSlot(this.root, 'group-label-info');
+        this.setLabel();
+        this.setDisabledCheckboxes();
+        trackComponent(this.root);
+    }
+    componentDidLoad() {
+        setParentCheckboxElementCheckedState(this.root, this.root.querySelector('gux-form-field-checkbox[slot="group-checkbox"] input'));
+    }
+    disconnectedCallback() {
+        if (this.disabledObserver) {
+            this.disabledObserver.disconnect();
+        }
+    }
+    getGroupCheckboxElement() {
+        return this.root.querySelector('gux-form-field-checkbox[slot="group-checkbox"] input');
+    }
+    setDisabledCheckboxes() {
+        const checkboxSlots = this.root.querySelectorAll('gux-form-field-checkbox');
+        if (checkboxSlots) {
+            checkboxSlots.forEach(item => {
+                item.hasGroupDisabled = this.disabled;
+            });
+        }
+    }
+    onMainCheckboxChange() {
+        const groupCheckbox = this.getGroupCheckboxElement();
+        setAllCheckboxInputs(this.root, groupCheckbox.checked);
+        forceUpdate(this.root);
+    }
+    setupNestedCheckboxes() {
+        this.warnMultipleGroupCheckbox();
+        this.warnGroupCheckboxNameAttr();
+        const groupCheckbox = this.getGroupCheckboxElement();
+        if (groupCheckbox) {
+            this.root.classList.add('gux-group-checkbox');
+        }
+        else {
+            this.root.classList.remove('gux-group-checkbox');
+        }
+        groupCheckbox === null || groupCheckbox === void 0 ? void 0 : groupCheckbox.addEventListener('change', () => {
+            this.onMainCheckboxChange();
+        });
+        this.initialSetNestedCheckboxes(groupCheckbox === null || groupCheckbox === void 0 ? void 0 : groupCheckbox.checked);
+    }
+    initialSetNestedCheckboxes(groupCheckboxChecked) {
+        const checkboxSlots = Array.from(this.root.querySelectorAll('gux-form-field-checkbox input:not(gux-form-field-checkbox[slot="group-checkbox"] input)'));
+        if (checkboxSlots === null || checkboxSlots === void 0 ? void 0 : checkboxSlots.length) {
+            checkboxSlots.forEach(item => {
+                item.addEventListener('change', () => {
+                    this.updateMainCheckbox();
+                });
+                if (groupCheckboxChecked && !item.disabled) {
+                    item.checked = true;
+                }
+            });
+        }
+    }
+    warnMultipleGroupCheckbox() {
+        const groupCheckboxList = this.root.querySelectorAll('gux-form-field-checkbox[slot="group-checkbox"] input');
+        if ((groupCheckboxList === null || groupCheckboxList === void 0 ? void 0 : groupCheckboxList.length) > 1) {
+            logWarn(this.root, 'Can only have one group checkbox');
+        }
+    }
+    warnGroupCheckboxNameAttr() {
+        const groupCheckbox = this.getGroupCheckboxElement();
+        if (groupCheckbox === null || groupCheckbox === void 0 ? void 0 : groupCheckbox.hasAttribute('name')) {
+            logWarn(this.root, 'Group checkbox should not have a name attribute');
+        }
+    }
+    updateMainCheckbox() {
+        setParentCheckboxElementCheckedState(this.root, this.root.querySelector('gux-form-field-checkbox[slot="group-checkbox"] input'));
+        forceUpdate(this.root);
+    }
+    renderText(text, condition = false) {
+        if (condition) {
+            return ' ' + text;
+        }
+    }
+    render() {
+        var _a;
+        return (h(GuxFormFieldFieldsetContainer, { key: '71fd89d19477a795bcb43caedf9841294f179ea3', labelPosition: "above" }, h(GuxFormFieldScreenreaderLabel, { key: 'a6ddbcf86c5145d1b207e600ce6f8fbf85bba3b4' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), h(GuxFormFieldVisualLabel, { key: '2e1931fb4633b12231f96e974fb3cee990487d1b', position: "above", required: false }, h("slot", { key: 'eaf4cdc9230123ff75052e40246115b369342d61', name: "group-label", onSlotchange: () => this.setLabel() }), h("slot", { key: '308d9770d17ee92aa96314c85ba09b0296af3866', name: "group-label-info" })), h("slot", { key: '1244cae1a7294cf0a559517d6da489d803840604', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), h("slot", { key: 'c08f355f65c1fa0111b710b04293d32f4a77cb4f', onSlotchange: () => this.updateMainCheckbox() }), h(GuxFormFieldError, { key: 'be714daba2e9e9ea7396558e7b0fde5b894eef85', show: this.hasGroupError }, h("slot", { key: 'b34898b5a5b075d3b7bf4c70fe61ab43e3500478', name: "group-error" })), h(GuxFormFieldHelp, { key: 'a204e871f9fb6b1642a245b5ea619b9b91608e8a', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '6398b2e744a7368e6fc7873c715d137f6e4bcd7a', name: "group-help" }))));
+    }
+    setLabel() {
+        this.label = this.root.querySelector('label[slot="group-label"]');
+    }
+    static get is() { return "gux-form-field-checkbox-group-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-form-field-checkbox-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-form-field-checkbox-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the checkboxes in the group."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasGroupError": {},
+            "hasGroupHelp": {},
+            "hasGroupLabelInfo": {}
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "hasGroupError",
+                "methodName": "watchGroupError"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchDisabled"
+            }];
+    }
+}
+__decorate([
+    OnMutation({ childList: true, subtree: true })
+], GuxFormFieldCheckboxGroupBeta.prototype, "onMutation", null);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-checkbox-group/gux-form-field-checkbox-group.service.js

@@ -0,0 +1,38 @@
+import simulateNativeEvent from "../../../../../utils/dom/simulate-native-event";
+export function setAllCheckboxInputs(root, checked) {
+    getNestedCheckboxInputs(root).forEach(checkboxInput => {
+        if (checkboxInput.checked !== checked && !checkboxInput.disabled) {
+            checkboxInput.checked = checked;
+            simulateNativeEvent(checkboxInput, 'input');
+            simulateNativeEvent(checkboxInput, 'change');
+        }
+    });
+}
+export function setParentCheckboxElementCheckedState(root, mainCheckboxElement) {
+    if (mainCheckboxElement) {
+        const { checkedCheckboxes, totalCheckboxes } = getSelectedColumnCount(root);
+        if (checkedCheckboxes === 0) {
+            mainCheckboxElement.indeterminate = false;
+            mainCheckboxElement.checked = false;
+        }
+        else if (checkedCheckboxes === totalCheckboxes) {
+            mainCheckboxElement.indeterminate = false;
+            mainCheckboxElement.checked = true;
+        }
+        else {
+            mainCheckboxElement.indeterminate = true;
+        }
+    }
+}
+export function getSelectedColumnCount(root) {
+    const totalCheckboxes = getNestedCheckboxInputs(root).length;
+    const checkedCheckboxes = getCheckedCheckboxInputs(root).length;
+    return { checkedCheckboxes, totalCheckboxes };
+}
+function getNestedCheckboxInputs(root) {
+    return Array.from(root.querySelectorAll('gux-form-field-checkbox input:not(gux-form-field-checkbox[slot="group-checkbox"] input'));
+}
+function getCheckedCheckboxInputs(root) {
+    const checkboxInputs = getNestedCheckboxInputs(root);
+    return checkboxInputs.filter(x => x.checked);
+}