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

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

@@ -0,0 +1 @@
+{"version":3,"file":"gov-button.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-button/button/gov-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch} from \"@stencil/core\"\nimport {validateProp} from \"../../../helpers/Validate/props\"\nimport {\n\tButtonClass,\n\tButtonColors,\n\tButtonColorType,\n\tButtonSizesType,\n\tButtonTargetType,\n\tButtonType,\n\tButtonTypesType,\n\tNativeType,\n\tNativeTypesType,\n} from \"./constants\"\nimport {govHost, toBoolAttrIfDefined} from \"../../../helpers/Dom/template\"\nimport {GovHost} from \"../../../helpers/Dom/template.types\"\nimport {toBool} from \"../../../utils/bool.utils\"\nimport {Sizes} from \"../../../core/constants/sizes\"\nimport {validateAccessibleLabel} from \"../../../helpers/Validate/wcag\"\nimport {canValidateWcagOnRender} from \"../../../helpers/Dom/win\"\nimport {delay} from \"../../../utils/utils\"\nimport {ButtonEvent} from \"./gov-button.types\"\nimport {inheritAriaAttributes} from \"../../../helpers/Accessibility/accessibility\";\nimport {ariaAttributes} from \"../../../helpers/Accessibility/attributes\";\nimport {AttributeObserver, Attributes} from \"../../../helpers/Dom/attribute\";\n\nenum Tags {\n\tA = \"a\",\n\tBUTTON = \"button\",\n}\n\n@Component({\n\ttag: \"gov-button\",\n})\nexport class GovButton {\n\tprivate h: GovHost\n\tprivate triggerRef?: HTMLButtonElement | HTMLLinkElement\n\tprivate attributeObserver: AttributeObserver\n\tprivate hydrated = false\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovButtonElement\n\n\t/**\n\t * Style variation of the button\n\t */\n\t@Prop({reflect: true}) readonly color: ButtonColorType\n\t/**\n\t * Button’s size\n\t */\n\t@Prop({reflect: true}) readonly size?: ButtonSizesType = \"m\"\n\t/**\n\t * Button's type\n\t */\n\t@Prop({reflect: true}) readonly type: ButtonTypesType\n\t/**\n\t * Expands the button to fill 100% of the container width\n\t */\n\t@Prop({reflect: true}) readonly expanded: boolean = false\n\t/**\n\t * Expands the button to fill 100% of the container width only on mobile\n\t */\n\t@Prop({reflect: true, attribute: \"expanded-mobile\"}) readonly expandedMobile: boolean = false\n\t/**\n\t * The name of the button, which gets paired with the button's value when submitted as part of a form. Corresponds with the native HTML name attribute\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Makes the button component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies\n\t */\n\t@Prop({reflect: true}) readonly disabled: boolean = false\n\t/**\n\t * Same as original parameter\n\t * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\n\t */\n\t@Prop() readonly nativeType?: NativeTypesType = \"button\"\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href\n\t */\n\t@Prop() readonly href: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n\t */\n\t@Prop() readonly target?: ButtonTargetType\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download\n\t */\n\t@Prop() readonly download: boolean\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download\n\t */\n\t@Prop() readonly tab: number = 0\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-hreflang\n\t */\n\t@Prop() readonly hreflang: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-referrerpolicy\n\t */\n\t@Prop() readonly referrerpolicy: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel\n\t */\n\t@Prop() readonly rel: string\n\t/**\n\t * Indicates whether an asynchronous process is running\n\t */\n\t@Prop() readonly loading: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/focusable\n\t */\n\t@Prop() readonly focusable: boolean = true\n\t/**\n\t * Custom button identifier\n\t */\n\t@Prop({attribute: \"identifier\"}) readonly identifier: string\n\t/**\n\t * Emitted when the button click\n\t */\n\t@Event({eventName: \"gov-click\"}) govClick: EventEmitter<ButtonEvent>\n\t/**\n\t * Emitted when the button has focus\n\t */\n\t@Event({eventName: \"gov-focus\"}) govFocus: EventEmitter<ButtonEvent>\n\t/**\n\t * Emitted when the button loses focus\n\t */\n\t@Event({eventName: \"gov-blur\"}) govBlur: EventEmitter<ButtonEvent>\n\n\t@Watch(\"color\")\n\tvalidateColor(newValue: string): void {\n\t\tvalidateProp(ButtonColors, newValue, ButtonClass.root)\n\t}\n\n\t@Watch(\"type\")\n\tvalidateType(newValue: string): void {\n\t\tvalidateProp(ButtonType, newValue, ButtonClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, ButtonClass.root)\n\t}\n\n\t@Watch(\"nativeType\")\n\tvalidateNativeType(newValue: string): void {\n\t\tvalidateProp(NativeType, newValue, ButtonClass.root)\n\t}\n\n\t@State() inheritedAttributes: Attributes = {}\n\n\tcomponentDidLoad() {\n\t\tthis.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {\n\t\t\tthis.onAriaAttributeChange(attributeName, newValue);\n\t\t});\n\n\t\tthis.attributeObserver.startObserving(ariaAttributes);\n\t}\n\n\tonAriaAttributeChange(attributeName: string, newValue: string) {\n\t\tthis.host.removeAttribute(attributeName)\n\t\tthis.inheritedAttributes = {...this.inheritedAttributes, [attributeName]: newValue};\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.attributeObserver?.stopObserving();\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateColor(this.color)\n\t\tthis.validateType(this.type)\n\t\tthis.validateSize(this.size)\n\t\tthis.validateNativeType(this.nativeType)\n\t\tthis.inheritedAttributes = inheritAriaAttributes(this.host);\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateAccessibility()\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tthis.hydrated = true\n\t}\n\n\trender() {\n\t\tconst Tag = this.href ? Tags.A : Tags.BUTTON\n\t\tconst nativeType = Tag === Tags.A ? undefined : this.nativeType\n\n\t\treturn (\n\t\t\t<Host size={this.size}\n\t\t\t\t  hydrated={this.hydrated}\n\t\t\t\t  color={this.color}\n\t\t\t\t  class={this.h.classes(ButtonClass.root)}\n\t\t\t\t  type={this.type}>\n\t\t\t\t<Tag\n\t\t\t\t\tclass=\"element\"\n\t\t\t\t\tref={el => (this.triggerRef = el as HTMLButtonElement | HTMLLinkElement)}\n\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\tid={this.identifier}\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t\tdownload={this.download}\n\t\t\t\t\threflang={this.hreflang}\n\t\t\t\t\trel={this.rel}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\ttype={nativeType}\n\t\t\t\t\ttabindex={this.disabled ? \"-1\" : this.tab}\n\t\t\t\t\t{...this.inheritedAttributes}\n\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t>\n\t\t\t\t\t{toBool(this.loading) && !this.h.hasSlot(\"icon-end\") &&\n\t\t\t\t\t\t<gov-icon name=\"loader\" class=\"gov-spin-animation\" type=\"components\"></gov-icon>}\n\t\t\t\t\t{this.h.hasSlot(\"icon-start\") && <slot name=\"icon-start\"></slot>}\n\t\t\t\t\t<slot/>\n\t\t\t\t\t{this.h.hasSlot(\"icon-end\") && <slot name=\"icon-end\"></slot>}\n\t\t\t\t\t{toBool(this.loading) && this.h.hasSlot(\"icon-end\") &&\n\t\t\t\t\t\t<gov-icon name=\"loader\" class=\"gov-spin-animation\" type=\"components\"></gov-icon>}\n\t\t\t\t</Tag>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onClickHandler(e: PointerEvent): void {\n\t\te.stopPropagation()\n\t\tif (this.disabled === false) {\n\t\t\tthis.govClick.emit({\n\t\t\t\tcomponent: ButtonClass.root,\n\t\t\t\toriginalEvent: e,\n\t\t\t\tref: this.host,\n\t\t\t})\n\t\t}\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: ButtonClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tref: this.host,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: ButtonClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tref: this.host,\n\t\t})\n\t}\n\n\t/**\n\t * Focus button element\n\t */\n\t@Method()\n\tasync setFocus(): Promise<void> {\n\t\tthis.triggerRef.focus()\n\t}\n\n\t/**\n\t * Returns a clickable element instance\n\t */\n\t@Method()\n\tasync getRef() {\n\t\treturn this.triggerRef\n\t}\n\n\t/**\n\t * Validate the Accessibility attributes of the component\n\t */\n\t@Method()\n\tasync validateAccessibility(): Promise<void> {\n\t\tif (this.focusable) {\n\t\t\tvalidateAccessibleLabel(this.triggerRef.getAttribute('aria-label'), this.triggerRef.getAttribute('aria-labelledby'), ButtonClass.root, this.host)\n\t\t}\n\t}\n}\n"]}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=gov-button.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gov-button.types.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-button/button/gov-button.types.ts"],"names":[],"mappings":"","sourcesContent":["import { GovBaseEvent } from \"../../../types/event.types\"\n\nexport interface ButtonEvent extends GovBaseEvent {\n\tref: HTMLGovButtonElement\n}\n\n"]}

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

@@ -0,0 +1,10 @@
+export var Position;
+(function (Position) {
+    Position["LEFT"] = "left";
+    Position["RIGHT"] = "right";
+})(Position || (Position = {}));
+export const DropdownClass = {
+    root: 'gov-dropdown',
+    list: 'gov-dropdown__list'
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-button/dropdown/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAN,IAAY,QAGX;AAHD,WAAY,QAAQ;IACnB,yBAAa,CAAA;IACb,2BAAe,CAAA;AAChB,CAAC,EAHW,QAAQ,KAAR,QAAQ,QAGnB;AAID,MAAM,CAAC,MAAM,aAAa,GAAG;IAC5B,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,oBAAoB;CAC1B,CAAA","sourcesContent":["import { ValueOf } from \"../../../types/interfaces\"\n\nexport enum Position {\n\tLEFT = 'left',\n\tRIGHT = 'right',\n}\n\nexport type PositionType = `${ValueOf<typeof Position>}`\n\nexport const DropdownClass = {\n\troot: 'gov-dropdown',\n\tlist: 'gov-dropdown__list'\n}\n"]}

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

@@ -0,0 +1,205 @@
+import { h, Host } from "@stencil/core";
+import { registerClickOutside } from "stencil-click-outside";
+import { govHost, toBoolAttr } from "../../../helpers/Dom/template";
+import { createID } from "../../../utils/string.utils";
+import { ButtonClass } from "../button/constants";
+import { DropdownClass, Position } from "./constants";
+export class GovDropdown {
+    constructor() {
+        /**
+         * Dropdown state
+         */
+        this.open = false;
+        /**
+         * Menu display position
+         */
+        this.position = Position.LEFT;
+        this.h = govHost(this.host);
+        this.listId = createID("GovDropdownList");
+        this.controlId = createID("GovDropdownControl");
+    }
+    watchOpen() {
+        var _a;
+        (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-expanded", toBoolAttr(this.open));
+    }
+    get trigger() {
+        return this.host.querySelector(`* > ${ButtonClass.root}`);
+    }
+    get list() {
+        return this.h.getSlot("list");
+    }
+    componentWillLoad() {
+        var _a;
+        if (!this.trigger)
+            return;
+        this.trigger.setAttribute("aria-controls", this.listId);
+        this.trigger.setAttribute("aria-haspopup", toBoolAttr(!!this.list));
+        this.trigger.setAttribute("aria-expanded", toBoolAttr(this.open));
+        this.trigger.setAttribute("identifier", (_a = this.identifier) !== null && _a !== void 0 ? _a : this.controlId);
+        this.trigger.addEventListener("gov-click", (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.open = !this.open;
+            this.govChange.emit({
+                component: DropdownClass.root,
+                originalEvent: e,
+                open: this.open,
+            });
+        });
+    }
+    render() {
+        return (h(Host, { key: '402f6c2f97151f2abe832422e1eef4f3da15acee', class: this.h.classes([DropdownClass.root]), open: this.open, position: this.position }, h("slot", { key: '0cf6f85829b69b0d0c14eee595557eda4687ce6d' }), h("div", { key: '6658b9882d31fb919a12e97c0abc72a3e641fd6c', ref: el => registerClickOutside(this, el, () => this.open = false), class: DropdownClass.list, id: this.listId, "aria-labelledby": this.controlId, "aria-hidden": toBoolAttr(!this.open), hidden: !this.open }, h("slot", { key: 'b4f4b0b240731a2c03dda84989ba1a1d85c4e27a', name: "list" }))));
+    }
+    /**
+     * Returns the current state of the dropdown
+     */
+    async getState() {
+        return this.open;
+    }
+    /**
+     * Toggle state of dropdown
+     */
+    async toggle() {
+        this.open = !this.open;
+    }
+    static get is() { return "gov-dropdown"; }
+    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 trigger identifier"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "open": {
+                "type": "boolean",
+                "attribute": "open",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dropdown state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "attribute": "position",
+                "mutable": false,
+                "complexType": {
+                    "original": "PositionType",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {
+                        "PositionType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-button/dropdown/constants.ts::PositionType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu display position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "Position.LEFT"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "govChange",
+                "name": "gov-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dropdown change state"
+                },
+                "complexType": {
+                    "original": "DropdownEvent",
+                    "resolved": "DropdownEvent",
+                    "references": {
+                        "DropdownEvent": {
+                            "location": "import",
+                            "path": "./gov-dropdown.types",
+                            "id": "../../../packages/core/src/components/gov-button/dropdown/gov-dropdown.types.ts::DropdownEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getState": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns the current state of the dropdown",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle state of dropdown",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "watchOpen"
+            }];
+    }
+}
+//# sourceMappingURL=gov-dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gov-dropdown.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-button/dropdown/gov-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch} from \"@stencil/core\"\nimport {registerClickOutside} from \"stencil-click-outside\"\nimport {govHost, toBoolAttr} from \"../../../helpers/Dom/template\"\nimport {GovHost} from \"../../../helpers/Dom/template.types\"\nimport {Nullable} from \"../../../types/interfaces\"\nimport {createID} from \"../../../utils/string.utils\"\nimport {ButtonClass} from \"../button/constants\"\nimport {DropdownClass, Position, PositionType} from \"./constants\"\nimport {DropdownEvent} from \"./gov-dropdown.types\"\n\n@Component({\n\ttag: \"gov-dropdown\",\n})\nexport class GovDropdown {\n\tprivate h: GovHost\n\tprivate readonly listId: string\n\tprivate readonly controlId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.listId = createID(\"GovDropdownList\")\n\t\tthis.controlId = createID(\"GovDropdownControl\")\n\t}\n\n\t@Element() host: HTMLGovButtonElement\n\n\t/**\n\t * Custom trigger identifier\n\t */\n\t@Prop({attribute: \"identifier\"}) readonly identifier: string\n\t/**\n\t * Dropdown state\n\t */\n\t@Prop({mutable: true}) open = false\n\t/**\n\t * Menu display position\n\t */\n\t@Prop() readonly position: PositionType = Position.LEFT\n\t/**\n\t * Emitted when the dropdown change state\n\t */\n\t@Event({eventName: \"gov-change\"}) govChange: EventEmitter<DropdownEvent>\n\n\t@Watch('open')\n\twatchOpen() {\n\t\tthis.trigger?.setAttribute(\"aria-expanded\", toBoolAttr(this.open))\n\t}\n\n\tget trigger() {\n\t\treturn this.host.querySelector(`* > ${ButtonClass.root}`) as HTMLGovButtonElement\n\t}\n\n\tget list() {\n\t\treturn this.h.getSlot(\"list\") as Nullable<HTMLUListElement>\n\t}\n\n\tcomponentWillLoad() {\n\t\tif (!this.trigger) return;\n\n\t\tthis.trigger.setAttribute(\"aria-controls\", this.listId)\n\t\tthis.trigger.setAttribute(\"aria-haspopup\", toBoolAttr(!!this.list))\n\t\tthis.trigger.setAttribute(\"aria-expanded\", toBoolAttr(this.open))\n\t\tthis.trigger.setAttribute(\"identifier\", this.identifier ?? this.controlId)\n\n\t\tthis.trigger.addEventListener(\"gov-click\", (e) => {\n\t\t\te.preventDefault()\n\t\t\te.stopPropagation()\n\t\t\tthis.open = !this.open\n\n\t\t\tthis.govChange.emit({\n\t\t\t\tcomponent: DropdownClass.root,\n\t\t\t\toriginalEvent: e,\n\t\t\t\topen: this.open,\n\t\t\t})\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes([DropdownClass.root])} open={this.open} position={this.position}>\n\t\t\t\t<slot></slot>\n\t\t\t\t<div\n\t\t\t\t\tref={el => registerClickOutside(this, el, () => this.open = false)}\n\t\t\t\t\tclass={DropdownClass.list}\n\t\t\t\t\tid={this.listId}\n\t\t\t\t\taria-labelledby={this.controlId}\n\t\t\t\t\taria-hidden={toBoolAttr(!this.open)}\n\t\t\t\t\thidden={!this.open}>\n\t\t\t\t\t<slot name=\"list\"></slot>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns the current state of the dropdown\n\t */\n\t@Method()\n\tasync getState() {\n\t\treturn this.open\n\t}\n\n\t/**\n\t * Toggle state of dropdown\n\t */\n\t@Method()\n\tasync toggle() {\n\t\tthis.open = !this.open\n\t}\n}\n"]}

package/dist/collection/components/gov-button/dropdown/gov-dropdown.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=gov-dropdown.types.js.map

package/dist/collection/components/gov-button/dropdown/gov-dropdown.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-dropdown.types.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-button/dropdown/gov-dropdown.types.ts"],"names":[],"mappings":"","sourcesContent":["import { GovBaseEvent } from \"../../../types/event.types\"\n\nexport interface DropdownEvent extends GovBaseEvent {\n\topen: boolean\n}\n"]}

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

@@ -0,0 +1,16 @@
+export var CardDirection;
+(function (CardDirection) {
+    CardDirection["HORIZONTAL"] = "horizontal";
+    CardDirection["VERTICAL"] = "vertical";
+})(CardDirection || (CardDirection = {}));
+export const CardClass = {
+    root: 'gov-card',
+    header: 'gov-card__header',
+    arrow: 'gov-card__arrow',
+    inner: 'gov-card__inner',
+    img: 'gov-card__img',
+    icon: 'gov-card__icon',
+    content: 'gov-card__content',
+    footer: 'gov-card__footer',
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-card/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAN,IAAY,aAGX;AAHD,WAAY,aAAa;IACxB,0CAAyB,CAAA;IACzB,sCAAqB,CAAA;AACtB,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB;AAGD,MAAM,CAAC,MAAM,SAAS,GAAG;IACxB,IAAI,EAAE,UAAU;IAChB,MAAM,EAAE,kBAAkB;IAC1B,KAAK,EAAE,iBAAiB;IACxB,KAAK,EAAE,iBAAiB;IACxB,GAAG,EAAE,eAAe;IACpB,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,mBAAmB;IAC5B,MAAM,EAAE,kBAAkB;CAC1B,CAAA","sourcesContent":["import {ValueOf} from \"../../types/interfaces\";\n\nexport enum CardDirection {\n\tHORIZONTAL = 'horizontal',\n\tVERTICAL = 'vertical',\n}\nexport type CardDirectionType = `${ValueOf<typeof CardDirection>}`\n\nexport const CardClass = {\n\troot: 'gov-card',\n\theader: 'gov-card__header',\n\tarrow: 'gov-card__arrow',\n\tinner: 'gov-card__inner',\n\timg: 'gov-card__img',\n\ticon: 'gov-card__icon',\n\tcontent: 'gov-card__content',\n\tfooter: 'gov-card__footer',\n}\n"]}

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

@@ -0,0 +1,287 @@
+import { h, Host } from "@stencil/core";
+import { CardClass } from "./constants";
+import { booleanString, govHost } from "../../helpers/Dom/template";
+import { createID } from "../../utils/string.utils";
+import { validateAccessibleLabel } from "../../helpers/Validate/wcag";
+import { canValidateWcagOnRender } from "../../helpers/Dom/win";
+import { delay } from "../../utils/utils";
+var Tags;
+(function (Tags) {
+    Tags["A"] = "a";
+    Tags["DIV"] = "div";
+})(Tags || (Tags = {}));
+export class GovCard {
+    constructor() {
+        this.hydrated = false;
+        /**
+         * Card direction
+         */
+        this.direction = "vertical";
+        /**
+         * Defines weather the card can be collapsible
+         */
+        this.collapsible = false;
+        /**
+         * Defines weather the card can be clickable with hover effect
+         */
+        this.clickable = false;
+        /**
+         * Defines whether the card is open or closed
+         */
+        this.open = true;
+        this.h = govHost(this.host);
+        this.headlineId = createID('GovCardHeadline');
+        this.contentId = createID('GovCardContent');
+    }
+    async componentDidRender() {
+        if (canValidateWcagOnRender()) {
+            await delay(500);
+            await this.validateAccessibility();
+        }
+    }
+    connectedCallback() {
+        this.hydrated = true;
+    }
+    render() {
+        const Tag = this.href ? Tags.A : Tags.DIV;
+        return (h(Host, { key: '8e06f44b5b92bdbbdd47121d3e136485b83ce64e', class: this.h.classes(CardClass.root), open: this.open, collapsible: booleanString(this.collapsible), clickable: this.clickable, direction: this.direction, hydrated: this.hydrated }, this.collapsible ? (h("button", { id: this.headlineId, class: CardClass.header, "aria-label": this.accessibleTriggerLabel, "aria-labelledby": this.accessibleTriggerLabelledBy, "aria-expanded": booleanString(this.open), "aria-controls": this.contentId, onClick: this.onClickHandler.bind(this) }, h("slot", { name: "headline" }), h("gov-icon", { class: CardClass.arrow, name: "chevron-down", type: "components" }))) : this.h.hasSlot("headline") ? (h("div", { class: CardClass.header }, h("slot", { name: "headline" }))) : null, h(Tag, { key: 'e10c86ffa82d2e6227f0212295f4eed2ec68adac', href: this.href, target: this.target, id: this.contentId, "aria-hidden": this.collapsible ? booleanString(!this.open) : undefined, hidden: this.collapsible ? !this.open : undefined, "aria-labelledby": this.collapsible ? this.headlineId : undefined, class: CardClass.inner }, this.h.hasSlot('img') && (h("div", { key: 'f3c3a6f840fb6c8c6a4816e821bc3678fb696140', class: CardClass.img }, h("slot", { key: 'd935568b7eeab4ce60cd699c301bf735a62e8862', name: "img" }))), this.h.hasSlot('icon') && (h("div", { key: 'a11162b8aa9820facd7e141cecd95327c1d299f4', class: CardClass.icon }, h("slot", { key: 'e8dbb0a3e4f24eeed4254f8b91e9491029eb0221', name: "icon" }))), h("div", { key: '76953be0ece73a123389d5d3e5f5accf5da9fd27', class: CardClass.content }, h("slot", { key: 'a424223d3cd41e382cb97685c40a11ac43c8f836' })), this.h.hasSlot('footer') && (h("div", { key: '4ab1cfaa4d814f1bf693b44c4a56169caf8cea45', class: CardClass.footer }, h("slot", { key: '3427ccf260355c8b8b3b8d1dea54d8e82ec44da5', name: "footer" }))))));
+    }
+    onClickHandler(e) {
+        e.stopPropagation();
+        if (this.collapsible) {
+            this.open = !this.open;
+            this.govToggle.emit({ open: this.open, element: this.host });
+        }
+    }
+    /**
+     * Validate the accessible attributes of the component
+     */
+    async validateAccessibility() {
+        if (this.collapsible) {
+            validateAccessibleLabel(this.accessibleTriggerLabel, this.accessibleTriggerLabelledBy, CardClass.root, this.host);
+        }
+    }
+    static get is() { return "gov-card"; }
+    static get properties() {
+        return {
+            "direction": {
+                "type": "string",
+                "attribute": "direction",
+                "mutable": false,
+                "complexType": {
+                    "original": "CardDirectionType",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "CardDirectionType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-card/constants.ts::CardDirectionType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Card direction"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"vertical\""
+            },
+            "collapsible": {
+                "type": "boolean",
+                "attribute": "collapsible",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines weather the card can be collapsible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "clickable": {
+                "type": "boolean",
+                "attribute": "clickable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines weather the card can be clickable with hover effect"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "open": {
+                "type": "boolean",
+                "attribute": "open",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines whether the card is open or closed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "href": {
+                "type": "string",
+                "attribute": "href",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link on whole card"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "target": {
+                "type": "string",
+                "attribute": "target",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonTargetType",
+                    "resolved": "\"_blank\" | \"_new\" | \"_self\"",
+                    "references": {
+                        "ButtonTargetType": {
+                            "location": "import",
+                            "path": "../gov-button/button/constants",
+                            "id": "../../../packages/core/src/components/gov-button/button/constants.ts::ButtonTargetType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "link",
+                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target"
+                        }],
+                    "text": "Same as original parameter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "accessibleTriggerLabel": {
+                "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 collapsible button that is only shown for screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "accessibleTriggerLabelledBy": {
+                "type": "string",
+                "attribute": "accessible-labelledby",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A string of identifiers that indicate alternative label elements for collapsible card"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "govToggle",
+                "name": "gov-toggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Called when the card toggle state changes"
+                },
+                "complexType": {
+                    "original": "GovCardChangeEvent",
+                    "resolved": "GovCardChangeEvent",
+                    "references": {
+                        "GovCardChangeEvent": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "../../../packages/core/src/components/gov-card/interfaces.ts::GovCardChangeEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "validateAccessibility": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Validate the accessible attributes of the component",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=gov-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gov-card.js","sourceRoot":"","sources":["../../../../../../src/components/gov-card/gov-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,eAAe,CAAA;AAC5F,OAAO,EAAC,SAAS,EAAoB,MAAM,aAAa,CAAA;AACxD,OAAO,EAAC,aAAa,EAAE,OAAO,EAAC,MAAM,4BAA4B,CAAA;AAEjE,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAC,uBAAuB,EAAC,MAAM,6BAA6B,CAAA;AACnE,OAAO,EAAC,uBAAuB,EAAC,MAAM,uBAAuB,CAAA;AAC7D,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAA;AAIvC,IAAK,IAGJ;AAHD,WAAK,IAAI;IACR,eAAO,CAAA;IACP,mBAAW,CAAA;AACZ,CAAC,EAHI,IAAI,KAAJ,IAAI,QAGR;AAKD,MAAM,OAAO,OAAO;IAMnB;QAFQ,aAAQ,GAAG,KAAK,CAAA;QAUxB;;WAEG;QACc,cAAS,GAAsB,UAAU,CAAA;QAC1D;;WAEG;QACc,gBAAW,GAAY,KAAK,CAAA;QAC7C;;WAEG;QACc,cAAS,GAAY,KAAK,CAAA;QAC3C;;WAEG;QACmC,SAAI,GAAG,IAAI,CAAA;QAtBhD,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC3B,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAA;QAC7C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAA;KAC3C;IA0CD,KAAK,CAAC,kBAAkB;QACvB,IAAI,uBAAuB,EAAE,EAAE,CAAC;YAC/B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;YAChB,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAA;QACnC,CAAC;IACF,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;IACrB,CAAC;IAED,MAAM;QACL,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAA;QAEzC,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EACzD,WAAW,EAAE,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,EAC5C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACnD,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACnB,cACC,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,KAAK,EAAE,SAAS,CAAC,MAAM,gBACX,IAAI,CAAC,sBAAsB,qBACtB,IAAI,CAAC,2BAA2B,mBAClC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,mBACxB,IAAI,CAAC,SAAS,EAC7B,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;gBAEvC,YAAM,IAAI,EAAC,UAAU,GAAE;gBACvB,gBAAU,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,YAAY,GAAY,CAC3E,CACT,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAChC,WAAK,KAAK,EAAE,SAAS,CAAC,MAAM;gBAC3B,YAAM,IAAI,EAAC,UAAU,GAAE,CAClB,CACN,CAAC,CAAC,CAAC,IAAI;YAER,EAAC,GAAG,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAClB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,EAAE,EAAE,IAAI,CAAC,SAAS,iBACL,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EACrE,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,qBAChC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC/D,KAAK,EAAE,SAAS,CAAC,KAAK;gBAEtB,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CACzB,4DAAK,KAAK,EAAE,SAAS,CAAC,GAAG;oBACxB,6DAAM,IAAI,EAAC,KAAK,GAAE,CACb,CACN;gBAEA,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAC1B,4DAAK,KAAK,EAAE,SAAS,CAAC,IAAI;oBACzB,6DAAM,IAAI,EAAC,MAAM,GAAE,CACd,CACN;gBAED,4DAAK,KAAK,EAAE,SAAS,CAAC,OAAO;oBAC5B,8DAAO,CACF;gBAEL,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAC5B,4DAAK,KAAK,EAAE,SAAS,CAAC,MAAM;oBAC3B,6DAAM,IAAI,EAAC,QAAQ,GAAE,CAChB,CACN,CACI,CACA,CACP,CAAA;IACF,CAAC;IAEO,cAAc,CAAC,CAAC;QACvB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;YACtB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAA;QAC3D,CAAC;IACF,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,qBAAqB;QAC1B,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,uBAAuB,CAAC,IAAI,CAAC,sBAAsB,EAAE,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;QAClH,CAAC;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Method, Prop} from '@stencil/core'\nimport {CardClass, CardDirectionType} from './constants'\nimport {booleanString, govHost} from '../../helpers/Dom/template'\nimport {GovHost} from '../../helpers/Dom/template.types'\nimport {createID} from '../../utils/string.utils'\nimport {validateAccessibleLabel} from '../../helpers/Validate/wcag'\nimport {canValidateWcagOnRender} from '../../helpers/Dom/win'\nimport {delay} from '../../utils/utils'\nimport {GovCardChangeEvent} from './interfaces'\nimport {ButtonTargetType} from \"../gov-button/button/constants\";\n\nenum Tags {\n\tA = \"a\",\n\tDIV = \"div\",\n}\n\n@Component({\n\ttag: 'gov-card',\n})\nexport class GovCard {\n\tprivate h: GovHost\n\tprivate readonly headlineId: string\n\tprivate readonly contentId: string\n\tprivate hydrated = false\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.headlineId = createID('GovCardHeadline')\n\t\tthis.contentId = createID('GovCardContent')\n\t}\n\n\t@Element() host: HTMLGovCardElement\n\n\t/**\n\t * Card direction\n\t */\n\t@Prop() readonly direction: CardDirectionType = \"vertical\"\n\t/**\n\t * Defines weather the card can be collapsible\n\t */\n\t@Prop() readonly collapsible: boolean = false\n\t/**\n\t * Defines weather the card can be clickable with hover effect\n\t */\n\t@Prop() readonly clickable: boolean = false\n\t/**\n\t * Defines whether the card is open or closed\n\t */\n\t@Prop({reflect: true, mutable: true}) open = true\n\t/**\n\t * Link on whole card\n\t */\n\t@Prop({reflect: true}) readonly href: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n\t */\n\t@Prop() readonly target?: ButtonTargetType\n\t/**\n\t * Adds accessible label for the collapsible button that is only shown for screen readers.\n\t */\n\t@Prop({attribute: 'accessible-label'}) accessibleTriggerLabel: string\n\t/**\n\t * A string of identifiers that indicate alternative label elements for collapsible card\n\t */\n\t@Prop({attribute: 'accessible-labelledby'}) accessibleTriggerLabelledBy: string\n\t/**\n\t * Called when the card toggle state changes\n\t */\n\t@Event({eventName: 'gov-toggle'}) govToggle: EventEmitter<GovCardChangeEvent>\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateAccessibility()\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tthis.hydrated = true\n\t}\n\n\trender() {\n\t\tconst Tag = this.href ? Tags.A : Tags.DIV\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(CardClass.root)} open={this.open}\n\t\t\t\t  collapsible={booleanString(this.collapsible)}\n\t\t\t\t  clickable={this.clickable}\n\t\t\t\t  direction={this.direction} hydrated={this.hydrated}>\n\t\t\t\t{this.collapsible ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\tid={this.headlineId}\n\t\t\t\t\t\tclass={CardClass.header}\n\t\t\t\t\t\taria-label={this.accessibleTriggerLabel}\n\t\t\t\t\t\taria-labelledby={this.accessibleTriggerLabelledBy}\n\t\t\t\t\t\taria-expanded={booleanString(this.open)}\n\t\t\t\t\t\taria-controls={this.contentId}\n\t\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"headline\"/>\n\t\t\t\t\t\t<gov-icon class={CardClass.arrow} name=\"chevron-down\" type=\"components\"></gov-icon>\n\t\t\t\t\t</button>\n\t\t\t\t) : this.h.hasSlot(\"headline\") ? (\n\t\t\t\t\t<div class={CardClass.header}>\n\t\t\t\t\t\t<slot name=\"headline\"/>\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\n\t\t\t\t<Tag href={this.href}\n\t\t\t\t\t target={this.target}\n\t\t\t\t\t id={this.contentId}\n\t\t\t\t\t aria-hidden={this.collapsible ? booleanString(!this.open) : undefined}\n\t\t\t\t\t hidden={this.collapsible ? !this.open : undefined}\n\t\t\t\t\t aria-labelledby={this.collapsible ? this.headlineId : undefined}\n\t\t\t\t\t class={CardClass.inner}>\n\n\t\t\t\t\t{this.h.hasSlot('img') && (\n\t\t\t\t\t\t<div class={CardClass.img}>\n\t\t\t\t\t\t\t<slot name=\"img\"/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t<div class={CardClass.icon}>\n\t\t\t\t\t\t\t<slot name=\"icon\"/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div class={CardClass.content}>\n\t\t\t\t\t\t<slot/>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.h.hasSlot('footer') && (\n\t\t\t\t\t\t<div class={CardClass.footer}>\n\t\t\t\t\t\t\t<slot name=\"footer\"/>\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\tprivate onClickHandler(e) {\n\t\te.stopPropagation()\n\t\tif (this.collapsible) {\n\t\t\tthis.open = !this.open\n\t\t\tthis.govToggle.emit({open: this.open, element: this.host})\n\t\t}\n\t}\n\n\t/**\n\t * Validate the accessible attributes of the component\n\t */\n\t@Method()\n\tasync validateAccessibility(): Promise<void> {\n\t\tif (this.collapsible) {\n\t\t\tvalidateAccessibleLabel(this.accessibleTriggerLabel, this.accessibleTriggerLabelledBy, CardClass.root, this.host)\n\t\t}\n\t}\n}\n"]}

package/dist/collection/components/gov-card/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/dist/collection/components/gov-card/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../../src/components/gov-card/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface GovCardChangeEvent {\n\topen: boolean\n\telement: HTMLGovCardElement\n}\n"]}