@gov-design-system-ce/components 0.0.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"gov-message.stories.js","sourceRoot":"","sources":["../../../../../../src/components/gov-message/gov-message.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAC1E,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAA;AACpC,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAE9E,MAAM,kBAAkB,GAAG;EAC1B,KAAK,EAAE,uBAAuB;EAC9B,IAAI,EAAE;IACL,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,IAAI,EAAE,4PAA4P;IAClQ,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,KAAK;GACd;EACD,QAAQ,EAAE;IACT,IAAI,EAAE;MACL,OAAO,EAAE,QAAQ;MACjB,OAAO,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,CAAC;KAC9B;IACD,OAAO,EAAE;MACR,OAAO,EAAE,QAAQ;MACjB,OAAO,EAAE,qBAAqB,CAAC,QAAQ,CAAC;KACxC;IACD,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,SAAS;GAClB;EACD,UAAU,EAAE;IACX,KAAK,EAAE,MAAM;GACb;CACD,CAAA;AAED,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,CAAC,CAAA;AAE5C,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACzB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAA;EAEhD,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAA;EAExB,IAAI,IAAI,CAAC,IAAI,EAAE;IACd,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;IAC1C,IAAG,IAAI,EAAE;MACR,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;KACpB;GACD;EAED,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,CAAA;EAC1B,OAAO,EAAE,CAAA;AACV,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC3C,UAAU,CAAC,IAAI,GAAG,EAAE,CAAA;AACpB,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;EACd,OAAO,EAAE,SAAS;CAClB,CAAA;AACD,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC1C,SAAS,CAAC,IAAI,GAAG;EAChB,OAAO,EAAE,WAAW;CACpB,CAAA;AACD,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACtC,KAAK,CAAC,IAAI,GAAG;EACZ,OAAO,EAAE,OAAO;CAChB,CAAA;AACD,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;EACd,OAAO,EAAE,SAAS;CAClB,CAAA;AACD,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;EACd,OAAO,EAAE,SAAS;CAClB,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;AAED,eAAe,kBAAkB,CAAA","sourcesContent":["import { Variants as GlobalVariants } from \"../../core/constants/variants\"\nimport { icons, createIcon } from \"../../../.storybook/icons\"\nimport {Variants} from \"./constants\"\nimport readme from \"./readme.md\"\nimport { bindProps, removeUndefinedValues } from \"../../../.storybook/helpers\"\n\nconst StoryConfiguration = {\n\ttitle: \"Design system/Message\",\n\targs: {\n\t\tvariant: GlobalVariants.PRIMARY,\n\t\tcopy: '<p>Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.</p>',\n\t\ticon: undefined,\n\t\tinverse: false\n\t},\n\targTypes: {\n\t\ticon: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [undefined, ...icons],\n\t\t},\n\t\tvariant: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: removeUndefinedValues(Variants),\n\t\t},\n\t\tcopy: \"string\",\n\t\tinverse: \"boolean\",\n\t},\n\tparameters: {\n\t\tnotes: readme,\n\t},\n}\n\nconst PROPS = [\"variant\", \"copy\", \"inverse\"]\n\nconst Template = (args) => {\n\tconst el = document.createElement(\"gov-message\")\n\n\tel.innerHTML = args.copy\n\n\tif (args.icon) {\n\t\tconst icon = createIcon(args.icon, 'icon')\n\t\tif(icon) {\n\t\t\tel.appendChild(icon)\n\t\t}\n\t}\n\n\tbindProps(el, PROPS, args)\n\treturn el\n}\n\nexport const Playground = Template.bind({})\nPlayground.args = {}\nexport const Primary = Template.bind({})\nPrimary.args = {\n\tvariant: 'primary'\n}\nexport const Secondary = Template.bind({})\nSecondary.args = {\n\tvariant: 'secondary'\n}\nexport const Error = Template.bind({})\nError.args = {\n\tvariant: 'error'\n}\nexport const Success = Template.bind({})\nSuccess.args = {\n\tvariant: 'success'\n}\nexport const Warning = Template.bind({})\nWarning.args = {\n\tvariant: 'warning'\n}\nexport const Inverse = Template.bind({})\nInverse.args = {\n\tinverse: true\n}\n\nexport default StoryConfiguration\n"]}

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

@@ -0,0 +1,14 @@
+export const ModalClass = {
+  root: 'gov-modal',
+  rootPrompt: 'gov-modal gov-modal--prompt',
+  dialog: 'gov-modal__dialog',
+  inner: 'gov-modal__inner',
+  header: 'gov-modal__header',
+  icon: 'gov-modal__icon',
+  title: 'gov-modal__title',
+  content: 'gov-modal__content',
+  close: 'gov-modal__close',
+  actions: 'gov-modal__actions',
+  bodyFix: 'body-fixed',
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-modal/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG;EACzB,IAAI,EAAE,WAAW;EACjB,UAAU,EAAE,6BAA6B;EACzC,MAAM,EAAE,mBAAmB;EAC3B,KAAK,EAAE,kBAAkB;EACzB,MAAM,EAAE,mBAAmB;EAC3B,IAAI,EAAE,iBAAiB;EACvB,KAAK,EAAE,kBAAkB;EACzB,OAAO,EAAE,oBAAoB;EAC7B,KAAK,EAAE,kBAAkB;EACzB,OAAO,EAAE,oBAAoB;EAC7B,OAAO,EAAE,YAAY;CACrB,CAAA","sourcesContent":["export const ModalClass = {\n\troot: 'gov-modal',\n\trootPrompt: 'gov-modal gov-modal--prompt',\n\tdialog: 'gov-modal__dialog',\n\tinner: 'gov-modal__inner',\n\theader: 'gov-modal__header',\n\ticon: 'gov-modal__icon',\n\ttitle: 'gov-modal__title',\n\tcontent: 'gov-modal__content',\n\tclose: 'gov-modal__close',\n\tactions: 'gov-modal__actions',\n\tbodyFix: 'body-fixed',\n}\n"]}

package/dist/collection/components/gov-modal/gov-modal.css

@@ -0,0 +1,290 @@
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* [Core] - Buttons
+------------------------------------------------------------------ */
+/*
+ * Gets color from theme-colors or from palette-colors
+ */
+/*
+ * Converts hex value to rgb colors value
+ */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/*
+ * Generates list of utility classes for margin, padding
+ *
+ * Make sure $list of definitions is sorted so that last item is defined last
+ * So largest views are mentioned last.
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Layout
+ */
+/**
+* Utilities - Offset
+*/
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/**
+* Generates CSS3 var with default value
+*/
+/*
+ -  Variables - General
+ */
+/*
+ -  Variables - Typography
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Variants
+ */
+/*
+ -  Variables - Layout
+ */
+/*
+ -  Variables - Accordion
+ */
+/*
+ -  Variables - Attachments
+ */
+/*
+ -  Variables - Alert
+ */
+/*
+ -  Variables - Backdrop
+ */
+/*
+ -  Variables - Buttons (&& Badges)
+ */
+/*
+ -  Variables - Classes
+ */
+/*
+ -  Variables - Colors
+ */
+/*
+ -  Variables - Cookiebar
+ */
+/*
+ -  Variables - Card
+ */
+/*
+ -  Variables - Container
+ */
+/*
+ -  Variables - Message
+ */
+/*
+ -  Variables - Empty
+ */
+/*
+ -  Variables - Error code
+ */
+/*
+ -  Variables - Grid
+ */
+/*
+ -  Variables - Modal & Prompt
+ */
+/**
+* Utilities - Offset
+*/
+/*
+ -  Variables - shadows
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Statsbar
+ */
+/*
+ -  Variables - Tabs
+ */
+/*
+ -  Variables - Tooltip
+ */
+/*
+ -	Variables - Forms
+ */
+/*
+ -  Variables - Form Autocomplete
+ */
+/*
+ -  Variables - Form Message
+ */
+/*
+ -	Variables - Form label
+ */
+/*
+ -	Variables - Form switch
+ */
+/*
+ -	Variables - Form select
+ */
+/*
+ -	Variables - Form input
+ */
+/*
+ -	Variables - Form multiselect
+ */
+/*
+ -	Variables - Form checkbox & radio
+ */
+/*
+ -	Variables - Form file
+ */
+/*
+ -  Variables - Toast Message
+ */
+/*
+ -  Variables - Wizzard
+ */
+/*
+ -  Variables - Stepper
+ */
+/*
+ -  Variables - Grid & Tile
+ */
+/*
+ -  Variables - Pagination
+ */
+.gov-spin-animation,
+.gov-pseudo-spin-animation::before {
+  animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/*
+*   Modal
+*/
+.gov-modal {
+  display: none;
+}
+.gov-modal__dialog {
+  z-index: 101;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: var(--gov-modal-max-width, 52.5rem);
+  height: 100%;
+  padding: 0.5rem;
+  border: none;
+  background: transparent;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+.gov-modal__inner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: 100%;
+  border-radius: var(--gov-border-radius, 0.1875rem);
+  background: var(--gov-modal-bg, var(--gov-color-secondary-100));
+  overflow: hidden;
+  pointer-events: auto;
+  box-shadow: 0 0 1.5rem rgba(var(--gov-color-secondary-800-rgb), 0.24);
+}
+.gov-modal__header {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  padding: 1.5rem 0.25rem 1.5rem 1rem;
+  border-bottom: var(--gov-modal-border-color, 0.0625rem solid var(--gov-color-secondary-500));
+}
+.gov-modal__icon {
+  flex: 0 0 auto;
+  padding-top: calc((var(--gov-text-3xl-font-size) * 1.5 - 1.5rem) / 2);
+}
+.gov-modal__icon > * {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.gov-modal__title {
+  font-weight: var(--gov-text-3xl-font-weight);
+  font-size: var(--gov-text-3xl-font-size);
+  line-height: var(--gov-text-3xl-line-height);
+  letter-spacing: var(--gov-text-3xl-letter-spacing);
+  margin: 0;
+}
+.gov-modal__close {
+  flex: 0 0 auto;
+  margin-left: auto;
+  padding-top: calc((var(--gov-text-3xl-font-size) * 1.5 - 2rem) / 2);
+}
+.gov-modal__content {
+  height: 100%;
+  padding: 1.5rem 1rem;
+  color: var(--gov-modal-text-color, var(--gov-color-secondary-700));
+  overflow: auto;
+}
+.gov-modal__content > *:last-child {
+  margin-bottom: 0;
+}
+.gov-modal__actions {
+  display: flex;
+  gap: 0.5rem 1rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  padding: 1.5rem 1rem;
+  border-top: var(--gov-modal-border-color, 0.0625rem solid var(--gov-color-secondary-500));
+}
+.gov-modal__dialog:focus .gov-modal__inner {
+  outline: var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);
+}
+.gov-modal[open=""], .gov-modal[open=true i], .gov-modal[open="1"] {
+  display: block;
+}
+@media (min-width: 30em) {
+  .gov-modal__dialog {
+    max-width: calc(var(--gov-modal-max-width, 52.5rem) + 3rem);
+    padding: 1.5rem;
+  }
+  .gov-modal__dialog:focus {
+    outline-offset: -1.5rem;
+  }
+  .gov-modal__inner {
+    box-shadow: 0 0 2rem rgba(var(--gov-color-secondary-800-rgb), 0.32);
+  }
+  .gov-modal--prompt .gov-modal__dialog {
+    max-width: calc(var(--gov-modal-prompt-max-width, 33.125rem) + 3rem);
+  }
+}
+@media (min-width: 48em) {
+  .gov-modal__header {
+    gap: 1.25rem;
+    padding: 2rem 2.25rem 2rem 3rem;
+  }
+  .gov-modal__close {
+    padding-top: calc((var(--gov-text-3xl-font-size) * 1.5 - 2.5rem) / 2);
+  }
+  .gov-modal__content {
+    padding: 1.5rem 3rem 2rem;
+  }
+  .gov-modal--prompt .gov-modal__header, .gov-modal--prompt .gov-modal__content, .gov-modal--prompt .gov-modal__actions {
+    padding: 1.5rem;
+  }
+}

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

@@ -0,0 +1,319 @@
+import { h, Host } from "@stencil/core";
+import { createID } from "../../utils/string.utils";
+import { validateWcagRef } from "../../helpers/Validate/wcag";
+import { ModalClass } from "./constants";
+import { canValidateWcagOnRender } from "../../helpers/Dom/win";
+import { delay } from "../../utils/utils";
+import { toBoolAttr } from "../../helpers/Dom/template";
+import { govHost } from '../../helpers/Dom/template';
+import { govErrorLog } from "../../helpers/Log/gov.log";
+export class GovModal {
+  constructor() {
+    this.open = false;
+    this.label = undefined;
+    this.role = "dialog";
+    this.labelTag = "h2";
+    this.wcaglabelledBy = undefined;
+    this.wcagDescribedBy = undefined;
+    this.wcagCloseLabel = undefined;
+    this.wcagCloseLabelledBy = undefined;
+    this.h = govHost(this.host);
+    this.labelId = createID("GovModalLabel");
+    this.contentId = createID("GovModalContent");
+  }
+  validateLabelTag(newValue) {
+    const validTags = ["h1", "h2", "h3", "h4", "h5", "h6"];
+    if (newValue) {
+      if (!validTags.includes(newValue)) {
+        govErrorLog(`[${ModalClass.root}]: Tag ${newValue} is not allowed.`);
+      }
+    }
+  }
+  showModal() {
+    this.open = true;
+    document.body.classList.add(ModalClass.bodyFix);
+  }
+  hideModal() {
+    this.open = false;
+    document.body.classList.remove(ModalClass.bodyFix);
+  }
+  async componentWillRender() {
+    if (this.open) {
+      this.showModal();
+    }
+    else {
+      this.hideModal();
+    }
+  }
+  async componentDidRender() {
+    if (canValidateWcagOnRender()) {
+      await delay(500);
+      await this.validateWcag();
+    }
+  }
+  render() {
+    const LabelTag = this.labelTag;
+    return (h(Host, { class: ModalClass.root, open: this.open }, h("dialog", { class: ModalClass.dialog, hidden: !this.open, tabindex: "-1", open: this.open, "aria-modal": "true", "aria-hidden": toBoolAttr(!this.open), "aria-labelledby": this.wcaglabelledBy || this.labelId, "aria-describedby": this.wcagDescribedBy || this.contentId, role: this.role }, h("div", { class: ModalClass.inner }, h("div", { class: ModalClass.header }, this.h.hasSlot('icon') && (h("div", { class: ModalClass.icon }, h("slot", { name: "icon" }))), this.label &&
+      h(LabelTag, { class: ModalClass.title, id: this.labelId }, this.label), h("gov-button", { class: ModalClass.close, variant: "primary", wcagLabel: this.wcagCloseLabel, wcagLabelledBy: this.wcagCloseLabelledBy, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, h("gov-icon", { name: "cross" }))), h("div", { class: ModalClass.content, id: this.contentId }, h("slot", null)))), h("gov-backdrop", { visible: this.open, "wcag-label": this.wcagCloseLabel, "wcag-labelled-by": this.wcagCloseLabelledBy, "on-gov-click": this.onCloseHandler.bind(this) })));
+  }
+  onCloseHandler(e) {
+    e.stopPropagation();
+    this.hideModal();
+    this.govClose.emit(e);
+  }
+  /**
+   * Showing the modal
+   */
+  async show() {
+    this.showModal();
+  }
+  /**
+   * Hidding the modal
+   */
+  async hide() {
+    this.hideModal();
+  }
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  async validateWcag() {
+    validateWcagRef(this.wcaglabelledBy, 'aria-labelledby', ModalClass.root);
+    validateWcagRef(this.wcagDescribedBy, 'aria-describedby', ModalClass.root);
+  }
+  static get is() { return "gov-modal"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-modal.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-modal.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Attribute for modal window display"
+        },
+        "attribute": "open",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Title of modal window"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "role": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Role of modal"
+        },
+        "attribute": "role",
+        "reflect": false,
+        "defaultValue": "\"dialog\""
+      },
+      "labelTag": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Used to change the HMTL tag in the modal label for correct semantic structure"
+        },
+        "attribute": "label-tag",
+        "reflect": false,
+        "defaultValue": "\"h2\""
+      },
+      "wcaglabelledBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "String of id's that indicate alternative labels elements"
+        },
+        "attribute": "wcag-labelled-by",
+        "reflect": false
+      },
+      "wcagDescribedBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component that describes the modal."
+        },
+        "attribute": "wcag-described-by",
+        "reflect": false
+      },
+      "wcagCloseLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds accessible label for the modal close button that is only shown for screen readers."
+        },
+        "attribute": "wcag-close-label",
+        "reflect": false
+      },
+      "wcagCloseLabelledBy": {
+        "type": "string",
+        "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 closing the modal window"
+        },
+        "attribute": "wcag-close-labelled-by",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "govClose",
+        "name": "gov-close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when modal window closes."
+        },
+        "complexType": {
+          "original": "PointerEvent",
+          "resolved": "PointerEvent",
+          "references": {
+            "PointerEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  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": []
+        }
+      },
+      "validateWcag": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Validate the WCAG attributes of the component",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "labelTag",
+        "methodName": "validateLabelTag"
+      }];
+  }
+}
+//# sourceMappingURL=gov-modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gov-modal.js","sourceRoot":"","sources":["../../../../../../src/components/gov-modal/gov-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, Element, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { createID } from \"../../utils/string.utils\"\nimport { validateWcagRef } from \"../../helpers/Validate/wcag\"\nimport { ModalClass } from \"./constants\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\nimport {toBoolAttr} from \"../../helpers/Dom/template\"\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.d'\nimport { govErrorLog } from \"../../helpers/Log/gov.log\"\n\n@Component({\n\ttag: \"gov-modal\",\n\tstyleUrl: \"gov-modal.scss\",\n})\nexport class GovModal {\n\tprivate h: GovHost\n\tprivate readonly labelId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.labelId = createID(\"GovModalLabel\")\n\t\tthis.contentId = createID(\"GovModalContent\")\n\t}\n\n\t@Element() host: HTMLGovModalElement\n\n\t/**\n\t * Attribute for modal window display\n\t */\n\t@Prop() open: boolean = false\n\t/**\n\t * Title of modal window\n\t */\n\t@Prop() label: string\n\t/**\n\t * Role of modal\n\t */\n\t@Prop({ attribute: \"role\" }) role: string = \"dialog\"\n\t/**\n\t * Used to change the HMTL tag in the modal label for correct semantic structure\n\t */\n\t@Prop({ attribute: \"label-tag\" }) readonly labelTag: string = \"h2\"\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: \"wcag-labelled-by\" }) wcaglabelledBy: string\n\t/**\n\t * Indicates the id of a component that describes the modal.\n\t */\n\t@Prop({ attribute: \"wcag-described-by\" }) wcagDescribedBy: string\n\t/**\n\t * Adds accessible label for the modal close button that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: \"wcag-close-label\" }) wcagCloseLabel: string\n\t/**\n\t * A string of identifiers that indicate alternative label elements for closing the modal window\n\t */\n\t@Prop({ attribute: \"wcag-close-labelled-by\" }) wcagCloseLabelledBy: string\n\t/**\n\t * Emitted when modal window closes.\n\t */\n\t@Event({ eventName: \"gov-close\" }) govClose: EventEmitter<PointerEvent>\n\n\n\t@Watch(\"labelTag\")\n\tvalidateLabelTag(newValue: string): void {\n\t\tconst validTags = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"]\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${ModalClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate showModal() {\n\t\tthis.open = true\n\t\tdocument.body.classList.add(ModalClass.bodyFix)\n\t}\n\n\tprivate hideModal() {\n\t\tthis.open = false\n\t\tdocument.body.classList.remove(ModalClass.bodyFix)\n\t}\n\n\tasync componentWillRender() {\n\t\tif (this.open) {\n\t\t\tthis.showModal()\n\t\t} else {\n\t\t\tthis.hideModal();\n\t\t}\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst LabelTag = this.labelTag\n\t\treturn (\n\t\t\t<Host class={ModalClass.root} open={this.open}>\n\t\t\t\t<dialog class={ModalClass.dialog}\n\t\t\t\t\t hidden={!this.open}\n\t\t\t\t\t tabindex=\"-1\"\n\t\t\t\t\t open={this.open}\n\t\t\t\t\t aria-modal=\"true\"\n\t\t\t\t\t aria-hidden={toBoolAttr(!this.open)}\n\t\t\t\t\t aria-labelledby={this.wcaglabelledBy || this.labelId}\n\t\t\t\t\t aria-describedby={this.wcagDescribedBy || this.contentId}\n\t\t\t\t\t role={this.role}>\n\t\t\t\t\t<div class={ModalClass.inner}>\n\t\t\t\t\t\t<div class={ModalClass.header}>\n\t\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t\t<div class={ModalClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.label &&\n\t\t\t\t\t\t\t\t<LabelTag class={ModalClass.title} id={this.labelId}>{this.label}</LabelTag>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t<gov-button class={ModalClass.close}\n\t\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\t\twcagLabel={this.wcagCloseLabel}\n\t\t\t\t\t\t\t\t\t\twcagLabelledBy={this.wcagCloseLabelledBy}\n\t\t\t\t\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}>\n\t\t\t\t\t\t\t\t<gov-icon name=\"cross\" />\n\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class={ModalClass.content} id={this.contentId}>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</dialog>\n\n\t\t\t\t<gov-backdrop visible={this.open}\n\t\t\t\t\t\t\t  wcag-label={this.wcagCloseLabel}\n\t\t\t\t\t\t\t  wcag-labelled-by={this.wcagCloseLabelledBy}\n\t\t\t\t\t\t\t  on-gov-click={this.onCloseHandler.bind(this)} />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onCloseHandler(e: PointerEvent) {\n\t\te.stopPropagation()\n\t\tthis.hideModal()\n\t\tthis.govClose.emit(e)\n\t}\n\n\t/**\n\t * Showing the modal\n\t */\n\t@Method()\n\tasync show(): Promise<void> {\n\t\tthis.showModal()\n\t}\n\n\t/**\n\t * Hidding the modal\n\t */\n\t@Method()\n\tasync hide(): Promise<void> {\n\t\tthis.hideModal()\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcaglabelledBy, 'aria-labelledby', ModalClass.root)\n\t\tvalidateWcagRef(this.wcagDescribedBy, 'aria-describedby', ModalClass.root)\n\t}\n}\n"]}