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

package/dist/collection/components/gov-form/group/gov-form-radio-group.js

@@ -0,0 +1,181 @@
+import { h, Host } from "@stencil/core";
+import { FormGroupClass, FormGroupOrientation, FormGroupSizes, FormRadioGroupClass } from "./constants";
+import { govHost } from "../../../helpers/Dom/template";
+import { validateProp } from "../../../helpers/Validate/props";
+import { tick } from "../../../utils/stencil.utils";
+export class GovFormRadioGroup {
+    constructor() {
+        /**
+         * Gap's size.
+         */
+        this.gap = undefined;
+        /**
+         * Elements orientation
+         */
+        this.orientation = 'vertical';
+        /**
+         * Group's value
+         */
+        this.value = undefined;
+        this.handleChange = (event) => {
+            event.stopPropagation();
+            this.value = event.detail.value;
+            this.govChange.emit({
+                value: this.value,
+                component: FormRadioGroupClass.root,
+            });
+        };
+        this.h = govHost(this.host);
+    }
+    validateGap(newValue) {
+        if (newValue) {
+            validateProp(FormGroupSizes, newValue, FormGroupClass.root);
+        }
+    }
+    validateOrientation(newValue) {
+        if (newValue) {
+            validateProp(FormGroupOrientation, newValue, FormGroupClass.root);
+        }
+    }
+    componentWillLoad() {
+        this.validateGap(this.gap);
+        this.validateOrientation(this.orientation);
+    }
+    componentDidRender() {
+        tick(() => this.rerenderComponent());
+    }
+    rerenderComponent() {
+        this.host.querySelectorAll('gov-form-radio').forEach((element) => {
+            if (!element.hasAttribute('listener-attached')) {
+                element.addEventListener('gov-change', this.handleChange);
+            }
+            element.setAttribute('listener-attached', 'true');
+            element.checked = element.value === this.value;
+        });
+    }
+    render() {
+        return (h(Host, { key: 'e0f85e28552b3620666e4e857a96f7492f2aeb58', gap: this.gap, class: this.h.classes(FormGroupClass.root), value: this.value }, h("slot", { key: '4ac20b47a4f0073b8accf8dc3e3ce75f8cbddc56' })));
+    }
+    static get is() { return "gov-form-radio-group"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gov-form-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gov-form-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "gap": {
+                "type": "string",
+                "attribute": "gap",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormGroupSizesType",
+                    "resolved": "\"2xl\" | \"l\" | \"m\" | \"s\" | \"xs\"",
+                    "references": {
+                        "FormGroupSizesType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-form/group/constants.ts::FormGroupSizesType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Gap's size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "orientation": {
+                "type": "string",
+                "attribute": "orientation",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormGroupOrientationType",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "FormGroupOrientationType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-form/group/constants.ts::FormGroupOrientationType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Elements orientation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Group's value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "undefined"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "govChange",
+                "name": "gov-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the checkbox change value."
+                },
+                "complexType": {
+                    "original": "FormRadioGroupEvent",
+                    "resolved": "FormRadioGroupEvent",
+                    "references": {
+                        "FormRadioGroupEvent": {
+                            "location": "import",
+                            "path": "./gov-form-group.types",
+                            "id": "../../../packages/core/src/components/gov-form/group/gov-form-group.types.ts::FormRadioGroupEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "gap",
+                "methodName": "validateGap"
+            }, {
+                "propName": "orientation",
+                "methodName": "validateOrientation"
+            }];
+    }
+}
+//# sourceMappingURL=gov-form-radio-group.js.map

package/dist/collection/components/gov-form/group/gov-form-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-form-radio-group.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/group/gov-form-radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAA;AAC3F,OAAO,EACN,cAAc,EACd,oBAAoB,EAEpB,cAAc,EAEd,mBAAmB,EACnB,MAAM,aAAa,CAAA;AAEpB,OAAO,EAAC,OAAO,EAAC,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAC,YAAY,EAAC,MAAM,iCAAiC,CAAA;AAG5D,OAAO,EAAC,IAAI,EAAC,MAAM,8BAA8B,CAAA;AAMjD,MAAM,OAAO,iBAAiB;IAG7B;QAKA;;WAEG;QACc,QAAG,GAAwB,SAAS,CAAA;QACrD;;WAEG;QACc,gBAAW,GAA8B,UAAU,CAAA;QACpE;;WAEG;QACwC,UAAK,GAAY,SAAS,CAAA;QAoBrE,iBAAY,GAAG,CAAC,KAAkC,EAAE,EAAE;YACrD,KAAK,CAAC,eAAe,EAAE,CAAA;YACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA;YAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBACnB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,SAAS,EAAE,mBAAmB,CAAC,IAAI;aACnC,CAAC,CAAA;QACH,CAAC,CAAA;QA1CA,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAqBD,WAAW,CAAC,QAAgB;QAC3B,IAAI,QAAQ,EAAE,CAAC;YACd,YAAY,CAAC,cAAc,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;QAC5D,CAAC;IACF,CAAC;IAGD,mBAAmB,CAAC,QAAgB;QACnC,IAAI,QAAQ,EAAE,CAAC;YACd,YAAY,CAAC,oBAAoB,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;QAClE,CAAC;IACF,CAAC;IAWD,iBAAiB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QAC1B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IAC3C,CAAC;IAED,kBAAkB;QACjB,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAA;IACrC,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAChE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,mBAAmB,CAAC,EAAE,CAAC;gBAChD,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;YAC1D,CAAC;YACD,OAAO,CAAC,YAAY,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAA;YACjD,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QAChD,CAAC,CAAC,CAAA;IACH,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK;YACjF,8DAAa,CACP,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Prop, Watch} from \"@stencil/core\"\nimport {\n\tFormGroupClass,\n\tFormGroupOrientation,\n\tFormGroupOrientationType,\n\tFormGroupSizes,\n\tFormGroupSizesType,\n\tFormRadioGroupClass\n} from \"./constants\"\nimport {GovHost} from \"../../../helpers/Dom/template.types\"\nimport {govHost} from \"../../../helpers/Dom/template\"\nimport {validateProp} from \"../../../helpers/Validate/props\"\nimport {FormRadioEvent} from \"../radio/gov-form-radio.types\"\nimport {FormRadioGroupEvent} from \"./gov-form-group.types\"\nimport {tick} from \"../../../utils/stencil.utils\"\n\n@Component({\n\ttag: \"gov-form-radio-group\",\n\tstyleUrl: \"gov-form-group.scss\",\n})\nexport class GovFormRadioGroup {\n\tprivate readonly h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovFormGroupElement\n\t/**\n\t * Gap's size.\n\t */\n\t@Prop() readonly gap?: FormGroupSizesType = undefined\n\t/**\n\t * Elements orientation\n\t */\n\t@Prop() readonly orientation?: FormGroupOrientationType = 'vertical'\n\t/**\n\t * Group's value\n\t */\n\t@Prop({attribute: \"value\", mutable: true}) value?: string = undefined\n\t/**\n\t * Emitted when the checkbox change value.\n\t */\n\t@Event({eventName: \"gov-change\"}) govChange: EventEmitter<FormRadioGroupEvent>\n\n\t@Watch(\"gap\")\n\tvalidateGap(newValue: string): void {\n\t\tif (newValue) {\n\t\t\tvalidateProp(FormGroupSizes, newValue, FormGroupClass.root)\n\t\t}\n\t}\n\n\t@Watch(\"orientation\")\n\tvalidateOrientation(newValue: string): void {\n\t\tif (newValue) {\n\t\t\tvalidateProp(FormGroupOrientation, newValue, FormGroupClass.root)\n\t\t}\n\t}\n\n\thandleChange = (event: CustomEvent<FormRadioEvent>) => {\n\t\tevent.stopPropagation()\n\t\tthis.value = event.detail.value\n\t\tthis.govChange.emit({\n\t\t\tvalue: this.value,\n\t\t\tcomponent: FormRadioGroupClass.root,\n\t\t})\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateGap(this.gap)\n\t\tthis.validateOrientation(this.orientation)\n\t}\n\n\tcomponentDidRender(): void {\n\t\ttick(() => this.rerenderComponent())\n\t}\n\n\trerenderComponent(): void {\n\t\tthis.host.querySelectorAll('gov-form-radio').forEach((element) => {\n\t\t\tif (!element.hasAttribute('listener-attached')) {\n\t\t\t\telement.addEventListener('gov-change', this.handleChange)\n\t\t\t}\n\t\t\telement.setAttribute('listener-attached', 'true')\n\t\t\telement.checked = element.value === this.value;\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host gap={this.gap} class={this.h.classes(FormGroupClass.root)} value={this.value}>\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,28 @@
+import { Sizes } from "../../../core/constants/sizes";
+import { pick } from "../../../utils/utils";
+export const FormInputSizes = pick(Sizes, ['_XS', '_S', '_M', '_L', '_XL']);
+export var InputTypes;
+(function (InputTypes) {
+    InputTypes["COLOR"] = "color";
+    InputTypes["DATE"] = "date";
+    InputTypes["DATETIME_LOCAL"] = "datetime-local";
+    InputTypes["EMAIL"] = "email";
+    InputTypes["MONTH"] = "month";
+    InputTypes["NUMBER"] = "number";
+    InputTypes["PASSWORD"] = "password";
+    InputTypes["SEARCH"] = "search";
+    InputTypes["TEL"] = "tel";
+    InputTypes["TEXT"] = "text";
+    InputTypes["TIME"] = "time";
+    InputTypes["URL"] = "url";
+    InputTypes["WEEK"] = "week";
+})(InputTypes || (InputTypes = {}));
+export var Type;
+(function (Type) {
+    Type["RESET"] = "reset";
+})(Type || (Type = {}));
+export const FormInputClass = {
+    root: 'gov-form-input',
+    icons: 'gov-form-input__icons',
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/input/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AAErD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3C,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;AAG3E,MAAM,CAAN,IAAY,UAcX;AAdD,WAAY,UAAU;IACrB,6BAAe,CAAA;IACf,2BAAa,CAAA;IACb,+CAAiC,CAAA;IACjC,6BAAe,CAAA;IACf,6BAAe,CAAA;IACf,+BAAiB,CAAA;IACjB,mCAAqB,CAAA;IACrB,+BAAiB,CAAA;IACjB,yBAAW,CAAA;IACX,2BAAa,CAAA;IACb,2BAAa,CAAA;IACb,yBAAW,CAAA;IACX,2BAAa,CAAA;AACd,CAAC,EAdW,UAAU,KAAV,UAAU,QAcrB;AAGD,MAAM,CAAN,IAAY,IAEX;AAFD,WAAY,IAAI;IACf,uBAAe,CAAA;AAChB,CAAC,EAFW,IAAI,KAAJ,IAAI,QAEf;AAGD,MAAM,CAAC,MAAM,cAAc,GAAG;IAC7B,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE,uBAAuB;CAC9B,CAAA","sourcesContent":["import { Sizes } from '../../../core/constants/sizes'\nimport { ValueOf } from '../../../types/interfaces'\nimport { pick } from '../../../utils/utils'\n\nexport const FormInputSizes = pick(Sizes, ['_XS', '_S', '_M', '_L', '_XL'])\nexport type FormInputSizesType = `${ValueOf<typeof FormInputSizes>}`\n\nexport enum InputTypes {\n\tCOLOR = 'color',\n\tDATE = 'date',\n\tDATETIME_LOCAL = 'datetime-local',\n\tEMAIL = 'email',\n\tMONTH = 'month',\n\tNUMBER = 'number',\n\tPASSWORD = 'password',\n\tSEARCH = 'search',\n\tTEL = 'tel',\n\tTEXT = 'text',\n\tTIME = 'time',\n\tURL = 'url',\n\tWEEK = 'week',\n}\nexport type InputType = `${ValueOf<typeof InputTypes>}`\n\nexport enum Type {\n\tRESET = 'reset',\n}\nexport type TypesType = `${ValueOf<typeof Type>}`\n\nexport const FormInputClass = {\n\troot: 'gov-form-input',\n\ticons: 'gov-form-input__icons',\n}\n"]}