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

package/dist/collection/components/gov-breadcrumbs/gov-breadcrumbs.js

@@ -0,0 +1,215 @@
+import { h, Host } from "@stencil/core";
+import { BreadcrumbsClass } from "./constants";
+import { validateAccessibleLabel } from "../../helpers/Validate/wcag";
+import { canValidateWcagOnRender } from "../../helpers/Dom/win";
+import { govHost } from "../../helpers/Dom/template";
+import { tick } from "../../utils/stencil.utils";
+export class GovBreadcrumbs {
+    constructor() {
+        this.inited = false;
+        /**
+         * Defines whether the components can be collapsible when element doesn't fit in one row.
+         */
+        this.collapsible = false;
+        /**
+         * Defines whether the breadcrumbs are open or closed by button
+         */
+        this.isExpanded = false;
+        /**
+         * Adds an accessible label to display the full breadcrumb navigation that only screen readers can see.
+         */
+        this.accessibleToggleLabel = 'Zobrazit či skrýt navigaci';
+        this.expanded = false;
+        this.toggleOption = false;
+        this.h = govHost(this.host);
+    }
+    async componentDidRender() {
+        this.scheduleContentVerification();
+        if (canValidateWcagOnRender()) {
+            tick(() => this.validateAccessibility());
+        }
+    }
+    scheduleContentVerification() {
+        if (this.inited)
+            return;
+        this.inited = true;
+        tick(() => {
+            this.calculateWidthOfItems();
+            this.inited = false;
+        });
+    }
+    calculateWidthOfItems() {
+        const hostWidth = this.host.getBoundingClientRect().width;
+        let sumOfWidths = 0;
+        this.host.querySelectorAll('li').forEach((li) => {
+            sumOfWidths += li.getBoundingClientRect().width;
+        });
+        this.toggleOption = sumOfWidths > hostWidth;
+    }
+    render() {
+        return (h(Host, { key: 'f8d5534c547e913a6ea57caafb588e00244f5c13', class: this.h.classes(BreadcrumbsClass.root), expanded: this.expanded }, h("nav", { key: '932e17955c6bdfb53339597b088519e91a5249f6', "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy }, h("slot", { key: '618bee35e6a66fad8fb7cf35485d101ce0b62ad4' })), this.toggleOption ? (h("gov-button", { size: 'xs', color: 'primary', type: 'base', "aria-label": this.accessibleToggleLabel, "aria-pressed": this.expanded, "aria-expanded": this.expanded, "on-gov-click": () => this.expanded = !this.expanded }, h("gov-icon", { name: this.expanded ? 'chevron-up' : 'chevron-down', type: "components" }))) : null));
+    }
+    /**
+     * Validate the WCAG attributes of the component
+     */
+    async validateAccessibility() {
+        validateAccessibleLabel(this.accessibleLabel, this.accessibleLabelledBy, BreadcrumbsClass.root, this.host);
+        validateAccessibleLabel(this.accessibleToggleLabel, undefined, BreadcrumbsClass.root, this.host);
+    }
+    static get is() { return "gov-breadcrumbs"; }
+    static get properties() {
+        return {
+            "collapsible": {
+                "type": "boolean",
+                "attribute": "collapsible",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines whether the components can be collapsible when element doesn't fit in one row."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isExpanded": {
+                "type": "boolean",
+                "attribute": "is-expanded",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines whether the breadcrumbs are open or closed by button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "attribute": "accessible-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds accessible label for the pagination that is only shown for screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "accessibleLabelledBy": {
+                "type": "string",
+                "attribute": "accessible-labelledby",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a component that labels the pagination."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "accessibleToggleLabel": {
+                "type": "string",
+                "attribute": "accessible-toggle-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds an accessible label to display the full breadcrumb navigation that only screen readers can see."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Zobrazit \u010Di skr\u00FDt navigaci'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expanded": {},
+            "toggleOption": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "govChange",
+                "name": "gov-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Called when the Breadcrumbs state changes"
+                },
+                "complexType": {
+                    "original": "GovBreadcrumbsChangeEvent",
+                    "resolved": "GovBreadcrumbsChangeEvent",
+                    "references": {
+                        "GovBreadcrumbsChangeEvent": {
+                            "location": "import",
+                            "path": "./gov-breadcrumbs.d",
+                            "id": "../../../packages/core/src/components/gov-breadcrumbs/gov-breadcrumbs.d.tsx::GovBreadcrumbsChangeEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "validateAccessibility": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Validate the WCAG attributes of the component",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=gov-breadcrumbs.js.map

package/dist/collection/components/gov-breadcrumbs/gov-breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-breadcrumbs.js","sourceRoot":"","sources":["../../../../../../src/components/gov-breadcrumbs/gov-breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Method, Prop, State} from '@stencil/core'\nimport {BreadcrumbsClass} from './constants'\nimport {validateAccessibleLabel} from '../../helpers/Validate/wcag'\nimport {canValidateWcagOnRender} from '../../helpers/Dom/win'\nimport {GovBreadcrumbsChangeEvent} from './gov-breadcrumbs.d'\nimport {govHost} from '../../helpers/Dom/template'\nimport {GovHost} from '../../helpers/Dom/template.types'\nimport {tick} from \"../../utils/stencil.utils\";\n\n@Component({\n\ttag: 'gov-breadcrumbs',\n})\nexport class GovBreadcrumbs {\n\tprivate inited = false;\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovBreadcrumbsElement\n\t/**\n\t * Defines whether the components can be collapsible when element doesn't fit in one row.\n\t */\n\t@Prop() readonly collapsible: boolean = false\n\t/**\n\t * Defines whether the breadcrumbs are open or closed by button\n\t */\n\t@Prop({attribute: 'is-expanded'}) readonly isExpanded: boolean = false\n\t/**\n\t * Adds accessible label for the pagination that is only shown for screen readers.\n\t */\n\t@Prop({attribute: 'accessible-label'}) readonly accessibleLabel: string\n\t/**\n\t * Indicates the id of a component that labels the pagination.\n\t */\n\t@Prop({attribute: 'accessible-labelledby'}) readonly accessibleLabelledBy: string\n\t/**\n\t * Adds an accessible label to display the full breadcrumb navigation that only screen readers can see.\n\t */\n\t@Prop({attribute: 'accessible-toggle-label'}) readonly accessibleToggleLabel: string = 'Zobrazit či skrýt navigaci'\n\t/**\n\t * Called when the Breadcrumbs state changes\n\t */\n\t@Event({eventName: 'gov-change'}) govChange: EventEmitter<GovBreadcrumbsChangeEvent>\n\n\t@State() expanded = false;\n\t@State() toggleOption = false;\n\n\tasync componentDidRender() {\n\t\tthis.scheduleContentVerification()\n\t\tif (canValidateWcagOnRender()) {\n\t\t\ttick(() => this.validateAccessibility())\n\t\t}\n\t}\n\n\tprivate scheduleContentVerification() {\n\t\tif (this.inited) return;\n\t\tthis.inited = true;\n\t\ttick(() => {\n\t\t\tthis.calculateWidthOfItems();\n\t\t\tthis.inited = false;\n\t\t});\n\t}\n\n\tprivate calculateWidthOfItems() {\n\t\tconst hostWidth = this.host.getBoundingClientRect().width;\n\t\tlet sumOfWidths = 0;\n\t\tthis.host.querySelectorAll('li').forEach((li) => {\n\t\t\tsumOfWidths += li.getBoundingClientRect().width\n\t\t})\n\t\tthis.toggleOption = sumOfWidths > hostWidth;\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(BreadcrumbsClass.root)} expanded={this.expanded}>\n\t\t\t\t<nav aria-label={this.accessibleLabel} aria-labelledby={this.accessibleLabelledBy}>\n\t\t\t\t\t<slot/>\n\t\t\t\t</nav>\n\t\t\t\t{this.toggleOption ? (\n\t\t\t\t\t<gov-button\n\t\t\t\t\t\tsize={'xs'}\n\t\t\t\t\t\tcolor={'primary'}\n\t\t\t\t\t\ttype={'base'}\n\t\t\t\t\t\taria-label={this.accessibleToggleLabel}\n\t\t\t\t\t\taria-pressed={this.expanded}\n\t\t\t\t\t\taria-expanded={this.expanded}\n\t\t\t\t\t\ton-gov-click={() => this.expanded = !this.expanded}\n\t\t\t\t\t>\n\t\t\t\t\t\t<gov-icon name={this.expanded ? 'chevron-up' : 'chevron-down'} type=\"components\"></gov-icon>\n\t\t\t\t\t</gov-button>\n\t\t\t\t) : null}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateAccessibility(): Promise<void> {\n\t\tvalidateAccessibleLabel(this.accessibleLabel, this.accessibleLabelledBy, BreadcrumbsClass.root, this.host)\n\t\tvalidateAccessibleLabel(this.accessibleToggleLabel, undefined, BreadcrumbsClass.root, this.host)\n\t}\n}\n"]}

package/dist/collection/components/gov-button/button/constants.js

@@ -0,0 +1,28 @@
+import { Sizes } from "../../../core/constants/sizes";
+import { Colors } from "../../../core/constants/colors";
+import { pick } from "../../../utils/utils";
+export const ButtonSizes = pick(Sizes, ['_XS', '_S', '_M', '_L', '_XL']);
+export const ButtonColors = pick(Colors, ['PRIMARY', 'SECONDARY', 'NEUTRAL', 'SUCCESS', 'ERROR', 'WARNING']);
+export var ButtonType;
+(function (ButtonType) {
+    ButtonType["SOLID"] = "solid";
+    ButtonType["OUTLINED"] = "outlined";
+    ButtonType["BASE"] = "base";
+    ButtonType["LINK"] = "link";
+})(ButtonType || (ButtonType = {}));
+export var NativeType;
+(function (NativeType) {
+    NativeType["SUBMIT"] = "submit";
+    NativeType["BUTTON"] = "button";
+    NativeType["RESET"] = "reset";
+})(NativeType || (NativeType = {}));
+export var ButtonTarget;
+(function (ButtonTarget) {
+    ButtonTarget["BLANK"] = "_blank";
+    ButtonTarget["SELF"] = "_self";
+    ButtonTarget["NEW"] = "_new";
+})(ButtonTarget || (ButtonTarget = {}));
+export const ButtonClass = {
+    root: 'gov-button',
+};
+//# sourceMappingURL=constants.js.map

package/dist/collection/components/gov-button/button/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-button/button/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAEvD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3C,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;AAGxE,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;AAG5G,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACrB,6BAAe,CAAA;IACf,mCAAqB,CAAA;IACrB,2BAAa,CAAA;IACb,2BAAa,CAAA;AACd,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAGD,MAAM,CAAN,IAAY,UAIX;AAJD,WAAY,UAAU;IACrB,+BAAiB,CAAA;IACjB,+BAAiB,CAAA;IACjB,6BAAe,CAAA;AAChB,CAAC,EAJW,UAAU,KAAV,UAAU,QAIrB;AAGD,MAAM,CAAN,IAAY,YAIX;AAJD,WAAY,YAAY;IACvB,gCAAgB,CAAA;IAChB,8BAAc,CAAA;IACd,4BAAY,CAAA;AACb,CAAC,EAJW,YAAY,KAAZ,YAAY,QAIvB;AAGD,MAAM,CAAC,MAAM,WAAW,GAAG;IAC1B,IAAI,EAAE,YAAY;CAClB,CAAA","sourcesContent":["import { Sizes } from '../../../core/constants/sizes'\nimport { Colors } from '../../../core/constants/colors'\nimport { ValueOf } from '../../../types/interfaces'\nimport { pick } from '../../../utils/utils'\n\nexport const ButtonSizes = pick(Sizes, ['_XS', '_S', '_M', '_L', '_XL'])\nexport type ButtonSizesType = `${ValueOf<typeof ButtonSizes>}`\n\nexport const ButtonColors = pick(Colors, ['PRIMARY', 'SECONDARY', 'NEUTRAL', 'SUCCESS', 'ERROR', 'WARNING'])\nexport type ButtonColorType = `${ValueOf<typeof ButtonColors>}`\n\nexport enum ButtonType {\n\tSOLID = 'solid',\n\tOUTLINED = 'outlined',\n\tBASE = 'base',\n\tLINK = 'link',\n}\nexport type ButtonTypesType = `${ValueOf<typeof ButtonType>}`\n\nexport enum NativeType {\n\tSUBMIT = 'submit',\n\tBUTTON = 'button',\n\tRESET = 'reset',\n}\nexport type NativeTypesType = `${ValueOf<typeof NativeType>}`\n\nexport enum ButtonTarget {\n\tBLANK = '_blank',\n\tSELF = '_self',\n\tNEW = '_new',\n}\nexport type ButtonTargetType = `${ValueOf<typeof ButtonTarget>}`\n\nexport const ButtonClass = {\n\troot: 'gov-button',\n}\n"]}