@gov-design-system-ce/components 4.6.2 → 4.6.3

package/dist/collection/components/gov-form/control/gov-form-control.js

@@ -0,0 +1,202 @@
+import { h, Host } from "@stencil/core";
+import { govForm } from "../../../helpers/Dom/form";
+import { govHost } from "../../../helpers/Dom/template";
+import { splitByWhitespace } from "../../../utils/string.utils";
+import { FormControlClass } from "./constants";
+import { isString } from "../../../utils/helpers.types";
+export class GovFormControl {
+    constructor() {
+        /**
+         * Indicates the entered value of a child form element does not conform to the format expected by the application.
+         */
+        this.invalid = false;
+        /**
+        /**
+        * Indicates the form control is disabled
+         */
+        this.disabled = false;
+        /**
+        /**
+        * Indicates the entered value of a child form element does conform to the format expected by the application.
+         */
+        this.success = false;
+        /**
+         * Use control as a fieldset for better accessibility.
+         * Note: Remember to set the legend attribute of the gov-form-label component
+         */
+        this.fieldset = false;
+        /**
+         * Form element size.
+         */
+        this.size = "m";
+        this.h = govHost(this.host);
+        this.f = govForm(this.h);
+    }
+    componentDidRender() {
+        this.syncControlMessages();
+        this.formElementDescriptionControl();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    formElementDescriptionControl() {
+        const bottomSlot = this.host.querySelector("." + FormControlClass.bottom);
+        if (!bottomSlot)
+            return;
+        this.observer = new MutationObserver(function () {
+            this.syncControlMessages();
+        }.bind(this));
+        this.observer.observe(bottomSlot, { childList: true });
+    }
+    syncControlMessages() {
+        Promise.all(this.f.messageElements.map((message) => message.identifier())).then((ids) => {
+            this.f.mainElementsInControl.forEach((element) => {
+                const currentValue = splitByWhitespace(element.getAttribute("aria-describedby"));
+                element.removeAttribute("aria-describedby");
+                if (Array.isArray(currentValue)) {
+                    currentValue.forEach(id => (isString(id) && id.indexOf("GovFormMessage") === -1 ? ids.push(id) : null));
+                }
+                if (ids.length) {
+                    element.setAttribute("aria-describedby", ids.join(" "));
+                }
+            });
+        });
+    }
+    render() {
+        const Tag = this.fieldset ? "fieldset" : "div";
+        return (h(Host, { key: 'e7965663e6f825f35efa30a5fd8fe3fa7a313ac6', size: this.size, class: this.h.classes(FormControlClass.root) }, h(Tag, { key: 'bb8b452fcab1ae0d49f8d0ed01f0091f97e9c988', class: FormControlClass.holder }, this.h.hasSlot("top") && h("slot", { key: '4afca4fcee621842c0955287fd9a5488170da0d2', name: "top" }), h("slot", { key: '1e5026d8b37aad78c420ee2f8a69f42e0cb03e8e' }), this.h.hasSlot("bottom") && (h("div", { key: '177ebe3ade712277ea79c7d1a39a3bd9344627fd', class: FormControlClass.bottom }, h("slot", { key: '79ffada9cff037c407aa925e35b3382fba85ae25', name: "bottom" }))))));
+    }
+    static get is() { return "gov-form-control"; }
+    static get properties() {
+        return {
+            "identifier": {
+                "type": "string",
+                "attribute": "identifier",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom form element identifier"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "attribute": "invalid",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the entered value of a child form element does not conform to the format expected by the application."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "/**\n Indicates the form control is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "success": {
+                "type": "boolean",
+                "attribute": "success",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "/**\n Indicates the entered value of a child form element does conform to the format expected by the application."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "fieldset": {
+                "type": "boolean",
+                "attribute": "fieldset",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use control as a fieldset for better accessibility.\nNote: Remember to set the legend attribute of the gov-form-label component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormControlSizesType",
+                    "resolved": "\"l\" | \"m\" | \"xl\"",
+                    "references": {
+                        "FormControlSizesType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-form/control/constants.ts::FormControlSizesType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Form element size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"m\""
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=gov-form-control.js.map

package/dist/collection/components/gov-form/control/gov-form-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-form-control.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/control/gov-form-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, h, Host, Prop} from \"@stencil/core\"\nimport {govForm} from \"../../../helpers/Dom/form\"\nimport {GovForm} from \"../../../helpers/Dom/form.types\"\nimport {govHost} from \"../../../helpers/Dom/template\"\nimport {GovHost} from \"../../../helpers/Dom/template.types\"\nimport {splitByWhitespace} from \"../../../utils/string.utils\"\nimport {FormControlClass, FormControlSizesType} from \"./constants\"\nimport {isString} from \"../../../utils/helpers.types\";\n\n@Component({\n\ttag: \"gov-form-control\",\n})\nexport class GovFormControl {\n\tprivate readonly h: GovHost\n\tprivate f: GovForm\n\tprivate observer: MutationObserver\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t}\n\n\t@Element() host: HTMLGovFormControlElement\n\t/**\n\t * Custom form element identifier\n\t */\n\t@Prop({attribute: \"identifier\"}) readonly identifier: string\n\t/**\n\t * Indicates the entered value of a child form element does not conform to the format expected by the application.\n\t */\n\t@Prop({reflect: true}) readonly invalid: boolean = false\n\t/**\n\t/**\n\t* Indicates the form control is disabled\n\t */\n\t@Prop({reflect: true}) readonly disabled: boolean = false\n\t/**\n\t/**\n\t* Indicates the entered value of a child form element does conform to the format expected by the application.\n\t */\n\t@Prop({reflect: true}) readonly success: boolean = false\n\t/**\n\t * Use control as a fieldset for better accessibility.\n\t * Note: Remember to set the legend attribute of the gov-form-label component\n\t */\n\t@Prop() readonly fieldset: boolean = false\n\t/**\n\t * Form element size.\n\t */\n\t@Prop() readonly size?: FormControlSizesType = \"m\"\n\n\tcomponentDidRender() {\n\t\tthis.syncControlMessages()\n\t\tthis.formElementDescriptionControl()\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.observer?.disconnect()\n\t}\n\n\tprivate formElementDescriptionControl() {\n\t\tconst bottomSlot = this.host.querySelector(\".\" + FormControlClass.bottom)\n\t\tif (!bottomSlot) return\n\t\tthis.observer = new MutationObserver(\n\t\t\tfunction () {\n\t\t\t\tthis.syncControlMessages()\n\t\t\t}.bind(this),\n\t\t)\n\n\t\tthis.observer.observe(bottomSlot, {childList: true})\n\t}\n\n\tprivate syncControlMessages() {\n\t\tPromise.all(this.f.messageElements.map((message: HTMLGovFormMessageElement) => message.identifier())).then((ids: string[]) => {\n\t\t\tthis.f.mainElementsInControl.forEach((element: Element) => {\n\t\t\t\tconst currentValue = splitByWhitespace(element.getAttribute(\"aria-describedby\"))\n\t\t\t\telement.removeAttribute(\"aria-describedby\")\n\t\t\t\tif (Array.isArray(currentValue)) {\n\t\t\t\t\tcurrentValue.forEach(id => (isString(id) && id.indexOf(\"GovFormMessage\") === -1 ? ids.push(id) : null))\n\t\t\t\t}\n\t\t\t\tif (ids.length) {\n\t\t\t\t\telement.setAttribute(\"aria-describedby\", ids.join(\" \"))\n\t\t\t\t}\n\t\t\t})\n\t\t})\n\t}\n\n\trender() {\n\t\tconst Tag = this.fieldset ? \"fieldset\" : \"div\"\n\t\treturn (\n\t\t\t<Host size={this.size} class={this.h.classes(FormControlClass.root)}>\n\t\t\t\t<Tag class={FormControlClass.holder}>\n\t\t\t\t\t{this.h.hasSlot(\"top\") && <slot name=\"top\"></slot>}\n\t\t\t\t\t<slot></slot>\n\t\t\t\t\t{this.h.hasSlot(\"bottom\") && (\n\t\t\t\t\t\t<div class={FormControlClass.bottom}>\n\t\t\t\t\t\t\t<slot name=\"bottom\"/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</Tag>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/gov-form/file/constants.js

@@ -0,0 +1,8 @@
+export const FormFileClass = {
+    root: 'gov-form-file',
+    area: 'gov-form-file__area',
+    input: 'gov-form-file__input',
+    inputFocus: 'gov-form-file__input-focus',
+    attachments: 'gov-form-file__attachments',
+};
+//# sourceMappingURL=constants.js.map

package/dist/collection/components/gov-form/file/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/file/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG;IAC5B,IAAI,EAAE,eAAe;IACrB,IAAI,EAAE,qBAAqB;IAC3B,KAAK,EAAE,sBAAsB;IAC7B,UAAU,EAAE,4BAA4B;IACxC,WAAW,EAAE,4BAA4B;CACzC,CAAA","sourcesContent":["export const FormFileClass = {\n\troot: 'gov-form-file',\n\tarea: 'gov-form-file__area',\n\tinput: 'gov-form-file__input',\n\tinputFocus: 'gov-form-file__input-focus',\n\tattachments: 'gov-form-file__attachments',\n}\n"]}