@gov-design-system-ce/components 0.0.1

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

@@ -0,0 +1,324 @@
+import { h, Host } from "@stencil/core";
+import { Variants as GlobalVariants } from "../../core/constants/variants";
+import { Sizes as GlobalSizes } from "../../core/constants/sizes";
+import { validateProp } from "../../helpers/Validate/props";
+import { Position, Positions, Size, TooltipClass, TooltipContentClass, Variant, } from "./constants";
+import { createID } from "../../utils/string.utils";
+import { govHost } from "../../helpers/Dom/template";
+export class GovTooltip {
+  constructor() {
+    this.variant = GlobalVariants.PRIMARY;
+    this.size = GlobalSizes._M;
+    this.position = Positions.RIGHT;
+    this.message = undefined;
+    this.identifier = undefined;
+    this.icon = undefined;
+    this.h = govHost(this.host);
+    this.tooltipId = createID("GovTooltip");
+  }
+  validateVariant(newValue) {
+    validateProp(Variant, newValue, TooltipClass.root);
+  }
+  validateSize(newValue) {
+    validateProp(Size, newValue, TooltipClass.root);
+  }
+  validatePosition(newValue) {
+    validateProp(Position, newValue, TooltipClass.root);
+  }
+  componentWillLoad() {
+    this.validateVariant(this.variant);
+    this.validateSize(this.size);
+    this.validatePosition(this.position);
+    this.createContentWrapper();
+    this.registerListeners();
+  }
+  createContentWrapper() {
+    var _a;
+    const hasContentInside = this.host.querySelector(TooltipContentClass.root);
+    if (hasContentInside) {
+      this.content = hasContentInside;
+    }
+    else {
+      this.content = document.createElement(TooltipContentClass.root);
+      this.content.innerHTML = this.message;
+      this.host.appendChild(this.content);
+    }
+    this.content.setAttribute("id", (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipId);
+  }
+  registerListeners() {
+    this.host.addEventListener("focus", (e) => {
+      e.preventDefault();
+      this.showTooltip();
+    });
+    this.host.addEventListener("blur", (e) => {
+      e.preventDefault();
+      this.hideTooltip();
+    });
+    this.host.addEventListener("mouseenter", (e) => {
+      e.preventDefault();
+      this.showTooltip();
+    });
+    this.host.addEventListener("mouseleave", (e) => {
+      e.preventDefault();
+      this.hideTooltip();
+    });
+  }
+  verifiyPositionSpace() {
+    // @TODO Improve positioning of broken lines
+    const offset = 12;
+    const windowWidth = window.innerWidth;
+    const trigger = this.host.getBoundingClientRect();
+    const trgWidth = this.host.offsetWidth;
+    const triggerPos = {
+      left: trigger.left + document.documentElement.scrollLeft,
+      top: trigger.top + document.documentElement.scrollTop,
+    };
+    const tltWidth = this.content.offsetWidth;
+    if (this.position === Positions.LEFT) {
+      if ((offset + triggerPos.left) < tltWidth) {
+        this.position = Positions.TOP;
+        this.content.style.left = "0px";
+        this.content.style.width = window.innerWidth - triggerPos.left - offset + "px";
+        this.content.style.transform = "none";
+      }
+    }
+    else if (this.position === Positions.RIGHT) {
+      if (windowWidth - (triggerPos.left + trgWidth) < tltWidth) {
+        this.position = Positions.TOP;
+        this.content.style.right = "0px";
+        this.content.style.left = "auto";
+        this.content.style.width = trgWidth + triggerPos.left + offset + "px";
+        this.content.style.transform = "none";
+      }
+    }
+    else {
+      // doesn't fit from the left
+      if ((tltWidth / 2) > triggerPos.left) {
+        this.content.style.left = "0px";
+        this.content.style.width = window.innerWidth - triggerPos.left - offset + "px";
+        this.content.style.transform = "none";
+      }
+      // doesn't fit from the right
+      else if ((tltWidth / 2) > (windowWidth - (triggerPos.left + tltWidth))) {
+        this.content.style.right = "0px";
+        this.content.style.left = "auto";
+        this.content.style.width = trgWidth + triggerPos.left + offset + "px";
+        this.content.style.transform = "none";
+      }
+    }
+  }
+  showTooltip() {
+    if (this.content) {
+      this.verifiyPositionSpace();
+      this.content.setAttribute("is-visible", "true");
+    }
+  }
+  hideTooltip() {
+    if (this.content) {
+      this.content.setAttribute("is-visible", "false");
+    }
+  }
+  render() {
+    var _a;
+    return (h(Host, { class: this.h.classes(TooltipClass.root), position: this.position, size: this.size, tabindex: 0, "aria-describedby": (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipId, variant: this.variant }, h("slot", null)));
+  }
+  /**
+   * Showing the modal
+   */
+  async show() {
+    this.showTooltip();
+  }
+  /**
+   * Hidding the modal
+   */
+  async hide() {
+    this.hideTooltip();
+  }
+  static get is() { return "gov-tooltip"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-tooltip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-tooltip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "VariantType",
+          "resolved": "any",
+          "references": {
+            "VariantType": {
+              "location": "import",
+              "path": "./constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Style variation of the tooltip"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "GlobalVariants.PRIMARY"
+      },
+      "size": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "SizeType",
+          "resolved": "any",
+          "references": {
+            "SizeType": {
+              "location": "import",
+              "path": "./constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip\u2019s size."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "GlobalSizes._M"
+      },
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "PositionType",
+          "resolved": "Positions.BOTTOM | Positions.LEFT | Positions.RIGHT | Positions.TOP",
+          "references": {
+            "PositionType": {
+              "location": "import",
+              "path": "./constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip display position"
+        },
+        "attribute": "position",
+        "reflect": false,
+        "defaultValue": "Positions.RIGHT"
+      },
+      "message": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Information contained in the tolltip"
+        },
+        "attribute": "message",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Custom tooltip identifier."
+        },
+        "attribute": "identifier",
+        "reflect": false
+      },
+      "icon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Trigger is just an icon"
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "undefined"
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Showing the modal",
+          "tags": []
+        }
+      },
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Hidding the modal",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "variant",
+        "methodName": "validateVariant"
+      }, {
+        "propName": "size",
+        "methodName": "validateSize"
+      }, {
+        "propName": "position",
+        "methodName": "validatePosition"
+      }];
+  }
+}
+//# sourceMappingURL=gov-tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gov-tooltip.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tooltip/gov-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { Variants as GlobalVariants } from \"../../core/constants/variants\"\nimport { Sizes as GlobalSizes } from \"../../core/constants/sizes\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport {\n\tPosition,\n\tPositions,\n\tPositionType,\n\tSize,\n\tSizeType,\n\tTooltipClass,\n\tTooltipContentClass,\n\tVariant,\n\tVariantType,\n} from \"./constants\"\nimport { createID } from \"../../utils/string.utils\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.d\"\n\n@Component({\n\ttag: \"gov-tooltip\",\n\tstyleUrl: \"gov-tooltip.scss\",\n})\nexport class GovTooltip {\n\tprivate h: GovHost\n\n\tprivate content: HTMLGovTooltipContentElement\n\tprivate readonly tooltipId\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.tooltipId = createID(\"GovTooltip\")\n\t}\n\n\t@Element() host: HTMLGovTooltipElement\n\t/**\n\t * Style variation of the tooltip\n\t */\n\t@Prop() readonly variant: VariantType = GlobalVariants.PRIMARY\n\t/**\n\t * Tooltip’s size.\n\t */\n\t@Prop() readonly size: SizeType = GlobalSizes._M\n\t/**\n\t * Tooltip display position\n\t */\n\t@Prop() position: PositionType = Positions.RIGHT\n\t/**\n\t * Information contained in the tolltip\n\t */\n\t@Prop() readonly message: string = undefined\n\t/**\n\t * Custom tooltip identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Trigger is just an icon\n\t */\n\t@Prop({ attribute: \"icon\" }) readonly icon: boolean = undefined\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variant, newValue, TooltipClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Size, newValue, TooltipClass.root)\n\t}\n\n\t@Watch(\"position\")\n\tvalidatePosition(newValue: string): void {\n\t\tvalidateProp(Position, newValue, TooltipClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\t\tthis.validatePosition(this.position)\n\n\t\tthis.createContentWrapper()\n\t\tthis.registerListeners()\n\t}\n\n\tprivate createContentWrapper() {\n\t\tconst hasContentInside = this.host.querySelector(TooltipContentClass.root) as HTMLGovTooltipContentElement\n\t\tif (hasContentInside) {\n\t\t\tthis.content = hasContentInside\n\t\t} else {\n\t\t\tthis.content = document.createElement(TooltipContentClass.root) as HTMLGovTooltipContentElement\n\t\t\tthis.content.innerHTML = this.message\n\t\t\tthis.host.appendChild(this.content)\n\t\t}\n\n\t\tthis.content.setAttribute(\"id\", this.identifier ?? this.tooltipId)\n\t}\n\n\tprivate registerListeners() {\n\t\tthis.host.addEventListener(\"focus\", (e) => {\n\t\t\te.preventDefault()\n\t\t\tthis.showTooltip()\n\t\t})\n\t\tthis.host.addEventListener(\"blur\", (e) => {\n\t\t\te.preventDefault()\n\t\t\tthis.hideTooltip()\n\t\t})\n\t\tthis.host.addEventListener(\"mouseenter\", (e) => {\n\t\t\te.preventDefault()\n\t\t\tthis.showTooltip()\n\t\t})\n\t\tthis.host.addEventListener(\"mouseleave\", (e) => {\n\t\t\te.preventDefault()\n\t\t\tthis.hideTooltip()\n\t\t})\n\t}\n\n\tprivate verifiyPositionSpace() {\n\t\t// @TODO Improve positioning of broken lines\n\t\tconst offset = 12\n\t\tconst windowWidth = window.innerWidth\n\t\tconst trigger = this.host.getBoundingClientRect()\n\t\tconst trgWidth = this.host.offsetWidth\n\t\tconst triggerPos = {\n\t\t\tleft: trigger.left + document.documentElement.scrollLeft,\n\t\t\ttop: trigger.top + document.documentElement.scrollTop,\n\t\t}\n\t\tconst tltWidth = this.content.offsetWidth\n\t\tif (this.position === Positions.LEFT) {\n\t\t\tif ((offset + triggerPos.left) < tltWidth) {\n\t\t\t\tthis.position = Positions.TOP\n\t\t\t\tthis.content.style.left = \"0px\"\n\t\t\t\tthis.content.style.width = window.innerWidth - triggerPos.left - offset + \"px\"\n\t\t\t\tthis.content.style.transform = \"none\"\n\t\t\t}\n\t\t} else if (this.position === Positions.RIGHT) {\n\t\t\tif (windowWidth - (triggerPos.left + trgWidth) < tltWidth) {\n\t\t\t\tthis.position = Positions.TOP\n\t\t\t\tthis.content.style.right = \"0px\"\n\t\t\t\tthis.content.style.left = \"auto\"\n\t\t\t\tthis.content.style.width = trgWidth + triggerPos.left + offset + \"px\"\n\t\t\t\tthis.content.style.transform = \"none\"\n\t\t\t}\n\t\t}\n\t\telse {\n\t\t\t// doesn't fit from the left\n\t\t\tif((tltWidth / 2) > triggerPos.left) {\n\t\t\t\tthis.content.style.left = \"0px\"\n\t\t\t\tthis.content.style.width = window.innerWidth - triggerPos.left - offset + \"px\"\n\t\t\t\tthis.content.style.transform = \"none\"\n\t\t\t}\n\t\t\t// doesn't fit from the right\n\t\t\telse if((tltWidth / 2) > (windowWidth - (triggerPos.left + tltWidth))) {\n\t\t\t\tthis.content.style.right = \"0px\"\n\t\t\t\tthis.content.style.left = \"auto\"\n\t\t\t\tthis.content.style.width = trgWidth + triggerPos.left + offset + \"px\"\n\t\t\t\tthis.content.style.transform = \"none\"\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate showTooltip() {\n\t\tif (this.content) {\n\t\t\tthis.verifiyPositionSpace()\n\t\t\tthis.content.setAttribute(\"is-visible\", \"true\")\n\t\t}\n\t}\n\n\tprivate hideTooltip() {\n\t\tif (this.content) {\n\t\t\tthis.content.setAttribute(\"is-visible\", \"false\")\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(TooltipClass.root)}\n\t\t\t      position={this.position}\n\t\t\t      size={this.size}\n\t\t\t      tabindex={0}\n\t\t\t      aria-describedby={this.identifier ?? this.tooltipId}\n\t\t\t      variant={this.variant}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Showing the modal\n\t */\n\t@Method()\n\tasync show(): Promise<void> {\n\t\tthis.showTooltip()\n\t}\n\n\t/**\n\t * Hidding the modal\n\t */\n\t@Method()\n\tasync hide(): Promise<void> {\n\t\tthis.hideTooltip()\n\t}\n}\n"]}

package/dist/collection/components/gov-tooltip/gov-tooltip.stories.js

@@ -0,0 +1,54 @@
+import { Variant, Position, Size } from './constants';
+import { Variants as GlobalVariants } from "../../core/constants/variants";
+export default {
+  title: 'Components/GovTooltip',
+  args: {
+    variant: GlobalVariants.PRIMARY,
+    inverse: false
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: Variant,
+    },
+    size: {
+      control: 'select',
+      options: Size,
+    },
+    position: {
+      control: 'select',
+      options: Position,
+      defaultValue: 'top',
+    },
+    'is-visible': {
+      control: 'boolean',
+      defaultValue: true,
+    },
+    isIcon: {
+      table: {
+        disable: true,
+      },
+    },
+    inverse: "boolean",
+  },
+  decorators: [story => `<div style="min-height: calc(100vh - 2rem); display: flex; justify-content: center; align-items: center;">${story()}</div>`],
+};
+const Template = ({ isIcon, variant, size, position, 'is-visible': isVisible, inverse }) => `
+	<gov-tooltip variant="${variant}" size="${size}" position="${position}" ${isIcon ? 'icon' : ''} ${isVisible ? 'is-visible' : ''} inverse="${inverse}">
+		${isIcon ? `<gov-icon name="info"></gov-icon>` : 'Tooltip'}
+
+		<gov-tooltip-content>
+			"Toggler" div, h1, h2 rozbije celou komponentu. Můžu použít tagy jako span, anchor, gov-icon - inlinové. Zde je použita ikonka z knihovny font-awesome
+		</gov-tooltip-content>
+	</gov-tooltip>
+`;
+export const Simple = Template.bind({});
+export const Icon = Template.bind({});
+Icon.args = {
+  isIcon: true,
+};
+export const Inverse = Template.bind({});
+Inverse.args = {
+  inverse: true
+};
+//# sourceMappingURL=gov-tooltip.stories.js.map

package/dist/collection/components/gov-tooltip/gov-tooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-tooltip.stories.js","sourceRoot":"","sources":["../../../../../../src/components/gov-tooltip/gov-tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AACrD,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAE1E,eAAe;EACd,KAAK,EAAE,uBAAuB;EAC9B,IAAI,EAAE;IACL,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,OAAO,EAAE,KAAK;GACd;EACD,QAAQ,EAAE;IACT,OAAO,EAAE;MACR,OAAO,EAAE,QAAQ;MACjB,OAAO,EAAE,OAAO;KAChB;IACD,IAAI,EAAE;MACL,OAAO,EAAE,QAAQ;MACjB,OAAO,EAAE,IAAI;KACb;IACD,QAAQ,EAAE;MACT,OAAO,EAAE,QAAQ;MACjB,OAAO,EAAE,QAAQ;MACjB,YAAY,EAAE,KAAK;KACnB;IACD,YAAY,EAAE;MACb,OAAO,EAAE,SAAS;MAClB,YAAY,EAAE,IAAI;KAClB;IACD,MAAM,EAAE;MACP,KAAK,EAAE;QACN,OAAO,EAAE,IAAI;OACb;KACD;IACD,OAAO,EAAE,SAAS;GAClB;EACD,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,6GAA6G,KAAK,EAAE,QAAQ,CAAC;CACnJ,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;yBACnE,OAAO,WAAW,IAAI,eAAe,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,aAAa,OAAO;IAChJ,MAAM,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,SAAS;;;;;;CAM3D,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEvC,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACrC,IAAI,CAAC,IAAI,GAAG;EACX,MAAM,EAAE,IAAI;CACZ,CAAA;AACD,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;EACd,OAAO,EAAE,IAAI;CACb,CAAA","sourcesContent":["import { Variant, Position, Size } from './constants'\nimport { Variants as GlobalVariants } from \"../../core/constants/variants\"\n\nexport default {\n\ttitle: 'Components/GovTooltip',\n\targs: {\n\t\tvariant: GlobalVariants.PRIMARY,\n\t\tinverse: false\n\t},\n\targTypes: {\n\t\tvariant: {\n\t\t\tcontrol: 'select',\n\t\t\toptions: Variant,\n\t\t},\n\t\tsize: {\n\t\t\tcontrol: 'select',\n\t\t\toptions: Size,\n\t\t},\n\t\tposition: {\n\t\t\tcontrol: 'select',\n\t\t\toptions: Position,\n\t\t\tdefaultValue: 'top',\n\t\t},\n\t\t'is-visible': {\n\t\t\tcontrol: 'boolean',\n\t\t\tdefaultValue: true,\n\t\t},\n\t\tisIcon: {\n\t\t\ttable: {\n\t\t\t\tdisable: true,\n\t\t\t},\n\t\t},\n\t\tinverse: \"boolean\",\n\t},\n\tdecorators: [story => `<div style=\"min-height: calc(100vh - 2rem); display: flex; justify-content: center; align-items: center;\">${story()}</div>`],\n}\n\nconst Template = ({ isIcon, variant, size, position, 'is-visible': isVisible, inverse }) => `\n\t<gov-tooltip variant=\"${variant}\" size=\"${size}\" position=\"${position}\" ${isIcon ? 'icon' : ''} ${isVisible ? 'is-visible' : ''} inverse=\"${inverse}\">\n\t\t${isIcon ? `<gov-icon name=\"info\"></gov-icon>` : 'Tooltip'}\n\n\t\t<gov-tooltip-content>\n\t\t\t\"Toggler\" div, h1, h2 rozbije celou komponentu. Můžu použít tagy jako span, anchor, gov-icon - inlinové. Zde je použita ikonka z knihovny font-awesome\n\t\t</gov-tooltip-content>\n\t</gov-tooltip>\n`\n\nexport const Simple = Template.bind({})\n\nexport const Icon = Template.bind({})\nIcon.args = {\n\tisIcon: true,\n}\nexport const Inverse = Template.bind({})\nInverse.args = {\n\tinverse: true\n}\n"]}

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

@@ -0,0 +1,16 @@
+import { Variants as GlobalVariants } from '../../core/constants/variants';
+import { Sizes as GlobalSizes } from "../../core/constants/sizes";
+export const Variants = [GlobalVariants.PRIMARY, GlobalVariants.SECONDARY, GlobalVariants.WARNING, GlobalVariants.ERROR, GlobalVariants.SUCCESS];
+export const Sizes = [undefined, GlobalSizes._S, GlobalSizes._M];
+export const WizzardClass = {
+  root: "gov-wizzard",
+};
+export const WizzardItemClass = {
+  root: 'gov-wizzard-item',
+  header: "gov-wizzard-item__header",
+  title: "gov-wizzard-item__title",
+  label: "gov-wizzard-item__label",
+  prefix: "gov-wizzard-item__prefix",
+  content: "gov-wizzard-item__content",
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-wizzard/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAC1E,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAEjE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAU,CAAA;AAGzJ,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,EAAC,WAAW,CAAC,EAAE,CAAU,CAAA;AAGxE,MAAM,CAAC,MAAM,YAAY,GAAG;EAC3B,IAAI,EAAE,aAAa;CACnB,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG;EAC/B,IAAI,EAAE,kBAAkB;EACxB,MAAM,EAAE,0BAA0B;EAClC,KAAK,EAAE,yBAAyB;EAChC,KAAK,EAAE,yBAAyB;EAChC,MAAM,EAAE,0BAA0B;EAClC,OAAO,EAAE,2BAA2B;CACpC,CAAA","sourcesContent":["import { Variants as GlobalVariants } from '../../core/constants/variants'\nimport { Sizes as GlobalSizes } from \"../../core/constants/sizes\"\n\nexport const Variants = [GlobalVariants.PRIMARY, GlobalVariants.SECONDARY, GlobalVariants.WARNING, GlobalVariants.ERROR, GlobalVariants.SUCCESS] as const\nexport type VariantType = typeof Variants[number]\n\nexport const Sizes = [undefined, GlobalSizes._S,GlobalSizes._M] as const\nexport type SizesType = typeof Sizes[number]\n\nexport const WizzardClass = {\n\troot: \"gov-wizzard\",\n}\n\nexport const WizzardItemClass = {\n\troot: 'gov-wizzard-item',\n\theader: \"gov-wizzard-item__header\",\n\ttitle: \"gov-wizzard-item__title\",\n\tlabel: \"gov-wizzard-item__label\",\n\tprefix: \"gov-wizzard-item__prefix\",\n\tcontent: \"gov-wizzard-item__content\",\n}\n"]}