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

package/dist/collection/components/gov-grid/gov-grid-item.js

@@ -0,0 +1,218 @@
+import { h, Host } from "@stencil/core";
+import { GridItemClass } from "./constants";
+import { govHost } from "../../helpers/Dom/template";
+export class GovGridItem {
+    constructor() {
+        /**
+         * Cell size as a fraction of 1/12 of the grid size
+         */
+        this.column = "12";
+        /**
+         * Connects rows in the grid
+         */
+        this.row = "1";
+        this.h = govHost(this.host);
+    }
+    render() {
+        return (h(Host, { key: '086294eca8d2a38b5b9262739e3030791c9e074a', class: this.h.classes(GridItemClass.root), role: "listitem" }, h("slot", { key: '5eede8d6ed01862f9fe704c5e4c2e31f2a799e69' })));
+    }
+    static get is() { return "gov-grid-item"; }
+    static get properties() {
+        return {
+            "column": {
+                "type": "string",
+                "attribute": "col-span",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cell size as a fraction of 1/12 of the grid size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"12\""
+            },
+            "columnSm": {
+                "type": "string",
+                "attribute": "col-span-sm",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cell size for SM media query and up as a fraction of 12 of the grid size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "columnMd": {
+                "type": "string",
+                "attribute": "col-span-md",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cell size for MD media query and up as a fraction of 12 of the grid size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "columnLg": {
+                "type": "string",
+                "attribute": "col-span-lg",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cell size for LG media query and up as a fraction of 12 of the grid size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "columnXl": {
+                "type": "string",
+                "attribute": "col-span-xl",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cell size for XL media query and up as a fraction of 12 of the grid size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "row": {
+                "type": "string",
+                "attribute": "row-span",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Connects rows in the grid"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"1\""
+            },
+            "rowSm": {
+                "type": "string",
+                "attribute": "row-span-sm",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cell size for SM media query and up as a fraction of 12 of the grid size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "rowMd": {
+                "type": "string",
+                "attribute": "row-span-md",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cell size for MD media query and up as a fraction of 12 of the grid size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "rowLg": {
+                "type": "string",
+                "attribute": "row-span-lg",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cell size for LG media query and up as a fraction of 12 of the grid size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "rowXl": {
+                "type": "string",
+                "attribute": "row-span-xl",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cell size for XL media query and up as a fraction of 12 of the grid size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=gov-grid-item.js.map

package/dist/collection/components/gov-grid/gov-grid-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-grid-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-grid/gov-grid-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAMpD,MAAM,OAAO,WAAW;IAGvB;QAKA;;WAEG;QACuC,WAAM,GAAW,IAAI,CAAC;QAiBhE;;WAEG;QACuC,QAAG,GAAW,GAAG,CAAC;QA3B3D,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IA6CD,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDACJ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EACzC,IAAI,EAAC,UAAU;YAEf,8DAAQ,CACF,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { GridItemClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-grid-item',\n})\nexport class GovGridItem {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovGridItemElement\n\t/**\n\t * Cell size as a fraction of 1/12 of the grid size\n\t */\n\t@Prop({ attribute: 'col-span' }) readonly column: string = \"12\";\n\t/**\n\t * Cell size for SM media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'col-span-sm' }) readonly columnSm?: string\n\t/**\n\t * Cell size for MD media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'col-span-md' }) readonly columnMd?: string\n\t/**\n\t * Cell size for LG media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'col-span-lg' }) readonly columnLg?: string\n\t/**\n\t * Cell size for XL media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'col-span-xl' }) readonly columnXl?: string\n\t/**\n\t * Connects rows in the grid\n\t */\n\t@Prop({ attribute: 'row-span' }) readonly row: string = \"1\";\n\t/**\n\t * Cell size for SM media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'row-span-sm' }) readonly rowSm?: string\n\t/**\n\t * Cell size for MD media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'row-span-md' }) readonly rowMd?: string\n\t/**\n\t * Cell size for LG media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'row-span-lg' }) readonly rowLg?: string\n\t/**\n\t * Cell size for XL media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'row-span-xl' }) readonly rowXl?: string\n\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(GridItemClass.root)}\n\t\t\t\trole=\"listitem\"\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,81 @@
+import { h, Host } from "@stencil/core";
+import { GridClass } from "./constants";
+import { govHost } from "../../helpers/Dom/template";
+export class GovGrid {
+    constructor() {
+        this.h = govHost(this.host);
+    }
+    render() {
+        return (h(Host, { key: '709f373fe63ba089e6c37ed7c61359e7b07a67e2', class: this.h.classes(GridClass.root), role: "list" }, h("slot", { key: 'acb0cc5b4279d57c375c7cee80ebf305809dfd4d' })));
+    }
+    static get is() { return "gov-grid"; }
+    static get properties() {
+        return {
+            "alignItems": {
+                "type": "string",
+                "attribute": "align-items",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'stretch'",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Horizontal align of cells"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "justifyItems": {
+                "type": "string",
+                "attribute": "justify-items",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'stretch'",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Vertical align of cells"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "gap": {
+                "type": "string",
+                "attribute": "gap",
+                "mutable": false,
+                "complexType": {
+                    "original": "GridSizesType",
+                    "resolved": "\"2xl\" | \"2xs\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "GridSizesType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-grid/constants.ts::GridSizesType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The gap property creates consistent spacing between flex items in the container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=gov-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gov-grid.js","sourceRoot":"","sources":["../../../../../../src/components/gov-grid/gov-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,SAAS,EAAiB,MAAM,aAAa,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAMpD,MAAM,OAAO,OAAO;IAGnB;QACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAmBD,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,MAAM;YACvD,8DAAa,CACP,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { GridClass, GridSizesType } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-grid',\n})\nexport class GovGrid {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovGridElement\n\n\t/**\n\t * Horizontal align of cells\n\t */\n\t@Prop({ attribute: 'align-items', reflect: true }) alignItems?: 'start' | 'center' | 'end' | 'stretch';\n\n\t/**\n\t * Vertical align of cells\n\t */\n\t@Prop({ attribute: 'justify-items', reflect: true }) justifyItems?: 'start' | 'center' | 'end' | 'stretch';\n\n\t/**\n\t * The gap property creates consistent spacing between flex items in the container.\n\t */\n\t@Prop({ attribute: 'gap', reflect: true }) gap?: GridSizesType;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(GridClass.root)} role=\"list\">\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,27 @@
+import { pick } from "../../utils/utils";
+import { Colors } from "../../core/constants/colors";
+import { Sizes } from "../../core/constants/sizes";
+export const IconSizes = pick(Sizes, ['_XS', '_S', '_M', '_L', '_XL', '_2XL', '_3XL', '_4XL', '_5XL']);
+export const IconColors = pick(Colors, [
+    'DEFAULT',
+    'PRIMARY',
+    'SECONDARY',
+    'NEUTRAL',
+    'ERROR',
+    'SUCCESS',
+    'WARNING',
+    'DISABLED',
+    'WHITE',
+    'BLACK',
+]);
+var Types;
+(function (Types) {
+    Types["BASIC"] = "basic";
+    Types["COMPLEX"] = "complex";
+    Types["COLORED"] = "colored";
+})(Types || (Types = {}));
+export const IconClass = {
+    root: 'gov-icon',
+    holder: 'gov-icon__holder',
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-icon/constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,KAAK,EAAC,MAAM,4BAA4B,CAAC;AAEjD,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AAGtG,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,EAAE;IACtC,SAAS;IACT,SAAS;IACT,WAAW;IACX,SAAS;IACT,OAAO;IACP,SAAS;IACT,SAAS;IACT,UAAU;IACV,OAAO;IACP,OAAO;CACP,CAAC,CAAA;AAGF,IAAK,KAIJ;AAJD,WAAK,KAAK;IACT,wBAAe,CAAA;IACf,4BAAmB,CAAA;IACnB,4BAAmB,CAAA;AACpB,CAAC,EAJI,KAAK,KAAL,KAAK,QAIT;AAGD,MAAM,CAAC,MAAM,SAAS,GAAG;IACxB,IAAI,EAAE,UAAU;IAChB,MAAM,EAAE,kBAAkB;CAC1B,CAAA","sourcesContent":["import { ValueOf } from '../../types/interfaces'\nimport { pick } from '../../utils/utils';\nimport { Colors } from '../../core/constants/colors';\nimport {Sizes} from \"../../core/constants/sizes\";\n\nexport const IconSizes = pick(Sizes, ['_XS', '_S', '_M', '_L', '_XL', '_2XL', '_3XL', '_4XL', '_5XL'])\nexport type IconSizesType = `${ValueOf<typeof IconSizes>}`\n\nexport const IconColors = pick(Colors, [\n\t'DEFAULT',\n\t'PRIMARY',\n\t'SECONDARY',\n\t'NEUTRAL',\n\t'ERROR',\n\t'SUCCESS',\n\t'WARNING',\n\t'DISABLED',\n\t'WHITE',\n\t'BLACK',\n])\nexport type IconColorType = `${ValueOf<typeof IconColors>}`\n\nenum Types {\n\tBASIC = 'basic',\n\tCOMPLEX = 'complex',\n\tCOLORED = 'colored',\n}\nexport type Type = `${ValueOf<typeof Types>}`\n\nexport const IconClass = {\n\troot: 'gov-icon',\n\tholder: 'gov-icon__holder',\n}\n"]}

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

@@ -0,0 +1,211 @@
+import { Build, h, Host } from "@stencil/core";
+import { IconClass, IconColors } from "./constants";
+import { fetchIcon } from "../../utils/icon.utils";
+import { govHost } from "../../helpers/Dom/template";
+import { iconsLazyLoad } from "../../helpers/Dom/win";
+import { validateProp } from "../../helpers/Validate/props";
+import { Sizes } from "../../core/constants/sizes";
+import { isValidSVG } from "../../helpers/Dom/document";
+export class GovIcon {
+    constructor() {
+        /**
+         * Name of icon in folder
+         */
+        this.name = null;
+        /**
+         * Type (folder) of icon
+         */
+        this.type = "components";
+        this.visible = false;
+        this.error = false;
+        this.h = govHost(this.host);
+    }
+    validateSize(newValue) {
+        validateProp(Sizes, newValue, IconClass.root);
+    }
+    validateColor(newValue) {
+        validateProp(IconColors, newValue, IconClass.root);
+    }
+    async loadIconPathData() {
+        const { name, visible } = this;
+        if (!Build.isBrowser || !name || !visible) {
+            return;
+        }
+        await this.loadIcon();
+    }
+    connectedCallback() {
+        if (iconsLazyLoad()) {
+            this.visible = true;
+            this.loadIconPathData().finally();
+        }
+        else {
+            this.waitUntilVisible(async () => {
+                this.visible = true;
+                await this.loadIconPathData();
+            });
+        }
+    }
+    disconnectedCallback() {
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = null;
+        }
+    }
+    async componentWillLoad() {
+        this.validateSize(this.size);
+        this.validateColor(this.color);
+        await this.loadIconPathData();
+    }
+    waitUntilVisible(callback) {
+        if (!Build.isBrowser || typeof window === "undefined" || !window.IntersectionObserver) {
+            callback();
+            return;
+        }
+        this.intersectionObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    if (this.intersectionObserver) {
+                        this.intersectionObserver.disconnect();
+                        this.intersectionObserver = null;
+                    }
+                    callback();
+                }
+            });
+        }, { rootMargin: "50px" });
+        this.intersectionObserver.observe(this.host);
+    }
+    async loadIcon() {
+        try {
+            const { name, type } = this;
+            const data = await fetchIcon({ name, type });
+            const isValid = isValidSVG(data);
+            this.host.innerHTML = isValid ? data : null;
+        }
+        catch (e) {
+            this.host.innerHTML = '';
+            this.error = true;
+        }
+    }
+    render() {
+        if (this.error) {
+            return null;
+        }
+        return (h(Host, { class: this.h.classes(IconClass.root), size: this.size, color: this.color }));
+    }
+    static get is() { return "gov-icon"; }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconSizesType",
+                    "resolved": "\"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "IconSizesType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-icon/constants.ts::IconSizesType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconColorType",
+                    "resolved": "\"black\" | \"default\" | \"disabled\" | \"error\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"white\"",
+                    "references": {
+                        "IconColorType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-icon/constants.ts::IconColorType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of icon in folder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type (folder) of icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "\"components\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {},
+            "error": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "size",
+                "methodName": "validateSize"
+            }, {
+                "propName": "color",
+                "methodName": "validateColor"
+            }, {
+                "propName": "name",
+                "methodName": "loadIconPathData"
+            }];
+    }
+}
+//# sourceMappingURL=gov-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gov-icon.js","sourceRoot":"","sources":["../../../../../../src/components/gov-icon/gov-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Build, Component, Element, h, Host, Prop, State, Watch} from \"@stencil/core\"\nimport {IconClass, IconColors, type IconColorType, IconSizesType} from \"./constants\"\nimport {fetchIcon} from \"../../utils/icon.utils\"\nimport {govHost} from \"../../helpers/Dom/template\"\nimport {GovHost} from \"../../helpers/Dom/template.types\"\nimport {iconsLazyLoad} from \"../../helpers/Dom/win\"\nimport {validateProp} from \"../../helpers/Validate/props\";\nimport {Sizes} from \"../../core/constants/sizes\";\nimport {isValidSVG} from \"../../helpers/Dom/document\";\n\n@Component({\n\tassetsDirs: [\"assets\"],\n\ttag: \"gov-icon\",\n})\nexport class GovIcon {\n\tprivate h: GovHost\n\tprivate intersectionObserver: IntersectionObserver\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovIconElement\n\t/**\n\t * Icon size\n\t */\n\t@Prop({reflect: true}) readonly size?: IconSizesType\n\t/**\n\t * Icon color\n\t */\n\t@Prop({reflect: true}) readonly color?: IconColorType\n\t/**\n\t * Name of icon in folder\n\t */\n\t@Prop({reflect: true}) name: string = null\n\t/**\n\t * Type (folder) of icon\n\t */\n\t@Prop({reflect: true}) type = \"components\"\n\n\t@State() private visible = false\n\t@State() private error = false\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, IconClass.root)\n\t}\n\n\t@Watch(\"color\")\n\tvalidateColor(newValue: string): void {\n\t\tvalidateProp(IconColors, newValue, IconClass.root)\n\t}\n\n\t@Watch(\"name\")\n\tprivate async loadIconPathData(): Promise<void> {\n\t\tconst {name, visible} = this\n\t\tif (!Build.isBrowser || !name || !visible) {\n\t\t\treturn\n\t\t}\n\t\tawait this.loadIcon()\n\t}\n\n\tconnectedCallback(): void {\n\t\tif (iconsLazyLoad()) {\n\t\t\tthis.visible = true\n\t\t\tthis.loadIconPathData().finally()\n\t\t} else {\n\t\t\tthis.waitUntilVisible(async () => {\n\t\t\t\tthis.visible = true\n\t\t\t\tawait this.loadIconPathData()\n\t\t\t})\n\t\t}\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tif (this.intersectionObserver) {\n\t\t\tthis.intersectionObserver.disconnect()\n\t\t\tthis.intersectionObserver = null\n\t\t}\n\t}\n\n\tasync componentWillLoad(): Promise<void> {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateColor(this.color)\n\t\tawait this.loadIconPathData()\n\t}\n\n\tprivate waitUntilVisible(callback: () => void): void {\n\t\tif (!Build.isBrowser || typeof window === \"undefined\" || !(window as any).IntersectionObserver) {\n\t\t\tcallback()\n\t\t\treturn\n\t\t}\n\t\tthis.intersectionObserver = new IntersectionObserver(\n\t\t\tentries => {\n\t\t\t\tentries.forEach(entry => {\n\t\t\t\t\tif (entry.isIntersecting) {\n\t\t\t\t\t\tif (this.intersectionObserver) {\n\t\t\t\t\t\t\tthis.intersectionObserver.disconnect()\n\t\t\t\t\t\t\tthis.intersectionObserver = null\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcallback()\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t},\n\t\t\t{rootMargin: \"50px\"},\n\t\t)\n\t\tthis.intersectionObserver.observe(this.host)\n\t}\n\n\tprivate async loadIcon() {\n\t\ttry {\n\t\t\tconst {name, type} = this\n\t\t\tconst data = await fetchIcon({name, type})\n\t\t\tconst isValid = isValidSVG(data)\n\t\t\tthis.host.innerHTML = isValid ? data : null;\n\t\t} catch (e) {\n\t\t\tthis.host.innerHTML = ''\n\t\t\tthis.error = true\n\t\t}\n\t}\n\n\trender() {\n\t\tif (this.error) {\n\t\t\treturn null\n\t\t}\n\t\treturn (\n\t\t\t<Host class={this.h.classes(IconClass.root)} size={this.size} color={this.color}/>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/gov-icon/helpers.js

@@ -0,0 +1,14 @@
+export const prepareIconFormat = (value) => {
+    if (typeof value === 'string' && value.length) {
+        const regexPattern = /^[a-z-]+\/[a-z-]+$/;
+        if (regexPattern.test(value)) {
+            const icon = value.split("/");
+            return {
+                type: icon[0],
+                name: icon[1],
+            };
+        }
+    }
+    return null;
+};
+//# sourceMappingURL=helpers.js.map

package/dist/collection/components/gov-icon/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../../../../src/components/gov-icon/helpers.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAsB,EAAE;IACtE,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QAC/C,MAAM,YAAY,GAAG,oBAAoB,CAAC;QAC1C,IAAI,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAC9B,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC9B,OAAO;gBACN,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;gBACb,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;aACb,CAAA;QACF,CAAC;IACF,CAAC;IACD,OAAO,IAAI,CAAA;AACZ,CAAC,CAAA","sourcesContent":["import {Nullable} from \"../../types/interfaces\";\n\nexport type IconType = { type: string, name: string }\n\nexport const prepareIconFormat = (value: string): Nullable<IconType> => {\n\tif (typeof value === 'string' && value.length) {\n\t\tconst regexPattern = /^[a-z-]+\\/[a-z-]+$/;\n\t\tif (regexPattern.test(value)) {\n\t\t\tconst icon = value.split(\"/\");\n\t\t\treturn {\n\t\t\t\ttype: icon[0],\n\t\t\t\tname: icon[1],\n\t\t\t}\n\t\t}\n\t}\n\treturn null\n}\n"]}