genesys-spark-components 4.36.0 → 4.38.0

package/dist/esm/gux-form-field.service-2bda6421.js

@@ -0,0 +1,140 @@
+import { h } from './index-da21b737.js';
+import { r as randomHTMLId } from './random-html-id-81ac821b.js';
+import { l as logError } from './log-error-274efeb7.js';
+import { s as simulateNativeEvent } from './simulate-native-event-e0631897.js';
+import { h as hasSlot } from './has-slot-f24a46a6.js';
+
+const GuxFormFieldHelp = ({ show }, children) => {
+    return (h("div", { class: {
+            'gux-form-field-help': true,
+            'gux-show': show
+        } },
+        h("div", { class: "gux-message" }, children)));
+};
+
+const GuxFormFieldError = ({ show }, children) => {
+    return (h("div", { class: {
+            'gux-form-field-error': true,
+            'gux-show': show
+        } },
+        h("gux-icon", { "icon-name": "fa/hexagon-exclamation-regular", decorative: true }),
+        h("div", { class: "gux-message" }, children)));
+};
+
+function setInputValue(input, value, focusAfter) {
+    input.value = value;
+    simulateNativeEvent(input, 'input');
+    simulateNativeEvent(input, 'change');
+    if (focusAfter) {
+        input.focus();
+    }
+}
+
+function clearInput(input) {
+    setInputValue(input, '', true);
+}
+function hasContent(input) {
+    return Boolean(input === null || input === void 0 ? void 0 : input.value);
+}
+function getComputedLabelPosition(label, labelPosition) {
+    if (label) {
+        if (['above', 'beside', 'screenreader'].includes(labelPosition)) {
+            return labelPosition;
+        }
+        else if (label.offsetWidth > 1 && label.offsetWidth < 40) {
+            return 'beside';
+        }
+        else {
+            return 'above';
+        }
+    }
+}
+function validateFormIds(root, input) {
+    var _a, _b, _c, _d;
+    if (hasLabelSlot(root)) {
+        const label = root.querySelector('label[slot="label"]');
+        const inputHasId = Boolean(input.hasAttribute('id'));
+        const labelHasFor = Boolean(label.hasAttribute('for'));
+        if (!inputHasId && labelHasFor) {
+            logError(root, 'A "for" attribute has been provided on the label but there is no corresponding id on the input. Either provide an id on the input or omit the "for" attribute from the label. If there is no input id and no "for" attribute provided, the component will automatically generate an id and link it to the "for" attribute.');
+        }
+        else if (!inputHasId) {
+            const defaultInputId = randomHTMLId('gux-form-field-input');
+            input.setAttribute('id', defaultInputId);
+            label.setAttribute('for', defaultInputId);
+        }
+        else if (inputHasId && !labelHasFor) {
+            const forId = input.getAttribute('id');
+            label.setAttribute('for', forId);
+        }
+        else if (inputHasId &&
+            labelHasFor &&
+            input.getAttribute('id') !== label.getAttribute('for')) {
+            logError(root, 'The input id and label for attribute should match.');
+        }
+    }
+    else {
+        logError(root, 'A label is required for this component. If a visual label is not needed for this use case, please add localized text for a screenreader and set the label-position attribute to "screenreader" to visually hide the label.');
+    }
+    if (hasSlot(root, 'error')) {
+        const error = root.querySelector('[slot="error"]');
+        const errorId = randomHTMLId('gux-form-field-error');
+        const describedByIds = ((_a = input
+            .getAttribute('aria-describedby')) === null || _a === void 0 ? void 0 : _a.split(' ').filter(id => !id.startsWith(`gux-form-field-error`))) || [];
+        error.setAttribute('id', errorId);
+        describedByIds.push(errorId);
+        describedByIds &&
+            input.setAttribute('aria-describedby', describedByIds.join(' '));
+    }
+    else if (input.getAttribute('aria-describedby')) {
+        const describedByIds = ((_b = input
+            .getAttribute('aria-describedby')) === null || _b === void 0 ? void 0 : _b.split(' ').filter(id => !id.startsWith(`gux-form-field-error`))) || [];
+        input.setAttribute('aria-describedby', describedByIds.join(' '));
+    }
+    if (hasSlot(root, 'help')) {
+        const help = root.querySelector('[slot="help"]');
+        const helpId = randomHTMLId('gux-form-field-help');
+        const describedByIds = ((_c = input
+            .getAttribute('aria-describedby')) === null || _c === void 0 ? void 0 : _c.split(' ').filter(id => !id.startsWith(`gux-form-field-help`))) || [];
+        help.setAttribute('id', helpId);
+        describedByIds.push(helpId);
+        describedByIds &&
+            input.setAttribute('aria-describedby', describedByIds.join(' '));
+    }
+    else if (input.getAttribute('aria-describedby')) {
+        const describedByIds = ((_d = input
+            .getAttribute('aria-describedby')) === null || _d === void 0 ? void 0 : _d.split(' ').filter(id => !id.startsWith(`gux-form-field-help`))) || [];
+        input.setAttribute('aria-describedby', describedByIds.join(' '));
+    }
+}
+function setSlotAriaAttribute(root, attribute, input, slotName) {
+    var _a;
+    if (hasSlot(root, slotName)) {
+        const slottedElement = root.querySelector(`[slot=${slotName}]`);
+        const randomId = randomHTMLId(`gux-${slotName}`);
+        const ariaAttributeIds = ((_a = input
+            .getAttribute(attribute)) === null || _a === void 0 ? void 0 : _a.split(' ').filter(id => !id.startsWith(`gux-${slotName}`))) || [];
+        slottedElement.setAttribute('id', randomId);
+        ariaAttributeIds === null || ariaAttributeIds === void 0 ? void 0 : ariaAttributeIds.push(randomId);
+        ariaAttributeIds &&
+            input.setAttribute(attribute, ariaAttributeIds.join(' '));
+    }
+}
+function setSlotAriaLabelledby(root, input, slotName) {
+    setSlotAriaAttribute(root, 'aria-labelledby', input, slotName);
+}
+function setSlotAriaDescribedby(root, input, slotName) {
+    setSlotAriaAttribute(root, 'aria-describedby', input, slotName);
+}
+function getSlottedInput(root, inputSelector) {
+    const inputElement = root.querySelector(inputSelector);
+    if (!inputElement) {
+        logError(root, `This component requires an input element that matches the following selector: ${inputSelector}`);
+    }
+    return inputElement;
+}
+function hasLabelSlot(root) {
+    return Boolean(root.querySelector('label[slot="label"]'));
+}
+
+export { GuxFormFieldError as G, GuxFormFieldHelp as a, getComputedLabelPosition as b, setSlotAriaDescribedby as c, clearInput as d, setInputValue as e, getSlottedInput as g, hasContent as h, setSlotAriaLabelledby as s, validateFormIds as v };