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

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

@@ -0,0 +1,285 @@
+import { h, Host } from "@stencil/core";
+import { createID } from "../../utils/string.utils";
+import { govHost, toBoolAttrIfDefined } from "../../helpers/Dom/template";
+import { TabsClass, TabsItemClass } from "./constants";
+export class GovTabsItem {
+    constructor() {
+        /**
+         * Item disable state
+         */
+        this.disabled = false;
+        /**
+         * Default selected tab
+         */
+        this.default = false;
+        this.isActive = false;
+        this.h = govHost(this.host);
+        this.contentId = createID('GovTabContent');
+        this.triggerId = createID('GovTabTrigger');
+    }
+    rerenderParent() {
+        const element = this.h.getParent(TabsClass.root);
+        if (element) {
+            element.rerender().catch();
+        }
+    }
+    render() {
+        return (h(Host, { key: '49f4fbd9c9211ebd58c89d538df85164473c4f76', class: this.h.classes(TabsItemClass.root), default: this.default }, h("div", { key: 'cbb71bd33c068923a8d23b62c43b1c757d4d0c78', class: TabsItemClass.inner, role: "tabpanel", id: this.identifier || this.contentId, hidden: !this.isActive, "aria-labelledby": this.triggerIdentifier || this.triggerId, "aria-hidden": toBoolAttrIfDefined(!this.isActive) }, h("slot", { key: 'fdf732f55e7ce4cb1d96ec8c7124124d9ca3e198' }))));
+    }
+    /**
+     * Returns a unique tab content identifier
+     */
+    async getIdentifier() {
+        return this.identifier || this.contentId;
+    }
+    /**
+     * Returns a unique tab trigger identifier
+     */
+    async getTriggerIdentifier() {
+        return this.triggerIdentifier || this.triggerId;
+    }
+    /**
+     * Returns a unique tab trigger identifier
+     */
+    async getDisableState() {
+        return this.disabled;
+    }
+    /**
+     * Set status of tab-item
+     */
+    async setActiveStatus(status) {
+        this.isActive = status;
+    }
+    static get is() { return "gov-tabs-item"; }
+    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 tab item identifier. Otherwise, it will be generated"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "triggerIdentifier": {
+                "type": "string",
+                "attribute": "trigger-identifier",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom tab trigger item identifier. Otherwise, it will be generated"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Item name of the tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Item disable state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "iconStart": {
+                "type": "string",
+                "attribute": "icon-start",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon definition at the stat. Use the type/name notation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "iconEnd": {
+                "type": "string",
+                "attribute": "icon-end",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon definition at the end. Use the type/name notation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "default": {
+                "type": "boolean",
+                "attribute": "default",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default selected tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isActive": {}
+        };
+    }
+    static get methods() {
+        return {
+            "getIdentifier": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns a unique tab content identifier",
+                    "tags": []
+                }
+            },
+            "getTriggerIdentifier": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns a unique tab trigger identifier",
+                    "tags": []
+                }
+            },
+            "getDisableState": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns a unique tab trigger identifier",
+                    "tags": []
+                }
+            },
+            "setActiveStatus": {
+                "complexType": {
+                    "signature": "(status: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "status",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set status of tab-item",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "rerenderParent"
+            }, {
+                "propName": "disabled",
+                "methodName": "rerenderParent"
+            }];
+    }
+}
+//# sourceMappingURL=gov-tabs-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gov-tabs-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tabs/gov-tabs-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,eAAe,CAAA;AACrF,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAC,OAAO,EAAE,mBAAmB,EAAC,MAAM,4BAA4B,CAAA;AAEvE,OAAO,EAAC,SAAS,EAAE,aAAa,EAAC,MAAM,aAAa,CAAA;AAKpD,MAAM,OAAO,WAAW;IAKvB;QAmBA;;WAEG;QAC6B,aAAQ,GAAY,KAAK,CAAA;QASzD;;WAEG;QACc,YAAO,GAAY,KAAK,CAAA;QAChC,aAAQ,GAAG,KAAK,CAAA;QAlCxB,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC3B,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;QAC1C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;KAC1C;IAmCD,cAAc;QACb,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAuB,CAAC;QACvE,IAAI,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAA;QAC3B,CAAC;IACF,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;YACrE,4DACC,KAAK,EAAE,aAAa,CAAC,KAAK,EAC1B,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,EACrC,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,qBACL,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,SAAS,iBAC5C,mBAAmB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAEhD,8DAAa,CACR,CACA,CACP,CAAA;IACF,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,aAAa;QAClB,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAA;IACzC,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,oBAAoB;QACzB,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,SAAS,CAAA;IAChD,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,eAAe;QACpB,OAAO,IAAI,CAAC,QAAQ,CAAA;IACrB,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,eAAe,CAAC,MAAe;QACpC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAA;IACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {Component, Element, h, Host, Method, Prop, State, Watch} from '@stencil/core'\nimport {createID} from '../../utils/string.utils'\nimport {govHost, toBoolAttrIfDefined} from '../../helpers/Dom/template'\nimport {GovHost} from '../../helpers/Dom/template.types'\nimport {TabsClass, TabsItemClass} from './constants'\n\n@Component({\n\ttag: 'gov-tabs-item',\n})\nexport class GovTabsItem {\n\tprivate h: GovHost\n\tprivate readonly contentId: string\n\tprivate readonly triggerId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.contentId = createID('GovTabContent')\n\t\tthis.triggerId = createID('GovTabTrigger')\n\t}\n\n\t@Element() host: HTMLGovTabsItemElement\n\t/**\n\t * Custom tab item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Custom tab trigger item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly triggerIdentifier: string\n\t/**\n\t * Item name of the tab\n\t */\n\t@Prop({reflect: true}) readonly label: string\n\t/**\n\t * Item disable state\n\t */\n\t@Prop({reflect: true}) readonly disabled: boolean = false\n\t/**\n\t * Icon definition at the stat. Use the type/name notation\n\t */\n\t@Prop({reflect: true, attribute: 'icon-start'}) readonly iconStart: string\n\t/**\n\t * Icon definition at the end. Use the type/name notation\n\t */\n\t@Prop({reflect: true, attribute: 'icon-end'}) readonly iconEnd: string\n\t/**\n\t * Default selected tab\n\t */\n\t@Prop() readonly default: boolean = false\n\t@State() isActive = false\n\n\t@Watch('label')\n\t@Watch('disabled')\n\trerenderParent() {\n\t\tconst element = this.h.getParent(TabsClass.root) as HTMLGovTabsElement;\n\t\tif (element) {\n\t\t\telement.rerender().catch()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(TabsItemClass.root)} default={this.default}>\n\t\t\t\t<div\n\t\t\t\t\tclass={TabsItemClass.inner}\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={this.identifier || this.contentId}\n\t\t\t\t\thidden={!this.isActive}\n\t\t\t\t\taria-labelledby={this.triggerIdentifier || this.triggerId}\n\t\t\t\t\taria-hidden={toBoolAttrIfDefined(!this.isActive)}\n\t\t\t\t>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns a unique tab content identifier\n\t */\n\t@Method()\n\tasync getIdentifier(): Promise<string> {\n\t\treturn this.identifier || this.contentId\n\t}\n\n\t/**\n\t * Returns a unique tab trigger identifier\n\t */\n\t@Method()\n\tasync getTriggerIdentifier(): Promise<string> {\n\t\treturn this.triggerIdentifier || this.triggerId\n\t}\n\n\t/**\n\t * Returns a unique tab trigger identifier\n\t */\n\t@Method()\n\tasync getDisableState(): Promise<boolean> {\n\t\treturn this.disabled\n\t}\n\n\t/**\n\t * Set status of tab-item\n\t */\n\t@Method()\n\tasync setActiveStatus(status: boolean): Promise<void> {\n\t\tthis.isActive = status\n\t}\n}\n"]}