@gov-design-system-ce/components 0.0.1

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

@@ -0,0 +1,133 @@
+import { Build, h, Host } from "@stencil/core";
+import { IconClass } from "./constants";
+import { fetchIcon } from "../../utils/icon.utils";
+export class GovIcon {
+  constructor() {
+    this.name = null;
+    this.type = "basic";
+    this.iconData = undefined;
+    this.visible = false;
+    this.error = false;
+  }
+  async loadIconPathData() {
+    const { name, visible, type } = this;
+    if (!Build.isBrowser || !name || !visible) {
+      return;
+    }
+    try {
+      this.iconData = await fetchIcon({ name, type });
+    }
+    catch (e) {
+      this.error = true;
+    }
+  }
+  connectedCallback() {
+    this.waitUntilVisible(async () => {
+      this.visible = true;
+      await this.loadIconPathData();
+    });
+  }
+  disconnectedCallback() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+  }
+  async componentWillLoad() {
+    await this.loadIconPathData();
+  }
+  waitUntilVisible(callback) {
+    if (!Build.isBrowser || typeof window === "undefined" || !window.IntersectionObserver) {
+      callback();
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          this.intersectionObserver.disconnect();
+          this.intersectionObserver = null;
+          callback();
+        }
+      });
+    }, { rootMargin: "50px" });
+    this.intersectionObserver.observe(this.el);
+  }
+  render() {
+    if (this.error) {
+      return null;
+    }
+    return (h(Host, { class: IconClass.root }, h("span", { class: IconClass.holder, innerHTML: this.iconData })));
+  }
+  static get is() { return "gov-icon"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-icon.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of icon"
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Type",
+          "resolved": "\"basic\" | \"colored\" | \"complex\"",
+          "references": {
+            "Type": {
+              "location": "import",
+              "path": "./constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of icon"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"basic\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "iconData": {},
+      "visible": {},
+      "error": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "name",
+        "methodName": "loadIconPathData"
+      }];
+  }
+}
+//# sourceMappingURL=gov-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gov-icon.js","sourceRoot":"","sources":["../../../../../../src/components/gov-icon/gov-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACtF,OAAO,EAAE,SAAS,EAAQ,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAOlD,MAAM,OAAO,OAAO;;gBAKI,IAAI;gBAIN,OAAO;;mBAED,KAAK;iBACP,KAAK;;EAItB,KAAK,CAAC,gBAAgB;IAC7B,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAA;IACpC,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE;MAC1C,OAAM;KACN;IACD,IAAI;MACH,IAAI,CAAC,QAAQ,GAAG,MAAM,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;KAC/C;IAAC,OAAO,CAAC,EAAE;MACX,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;KACjB;EACF,CAAC;EAGD,iBAAiB;IAChB,IAAI,CAAC,gBAAgB,CAAC,KAAK,IAAI,EAAE;MAChC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;MACnB,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAA;IAC9B,CAAC,CAAC,CAAA;EACH,CAAC;EAED,oBAAoB;IACnB,IAAI,IAAI,CAAC,oBAAoB,EAAE;MAC9B,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE,CAAA;MACtC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAA;KAChC;EACF,CAAC;EAED,KAAK,CAAC,iBAAiB;IACtB,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAA;EAC9B,CAAC;EAEO,gBAAgB,CAAC,QAAoB;IAC5C,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,CAAE,MAAc,CAAC,oBAAoB,EAAE;MAC/F,QAAQ,EAAE,CAAA;MACV,OAAM;KACN;IACD,IAAI,CAAC,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,EAAE;MAChE,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QACzB,IAAI,KAAK,CAAC,cAAc,EAAE;UACzB,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE,CAAA;UACtC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAA;UAChC,QAAQ,EAAE,CAAA;SACV;MACF,CAAC,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,CAAA;IAC1B,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;EAC3C,CAAC;EAGD,MAAM;IACL,IAAI,IAAI,CAAC,KAAK,EAAE;MACf,OAAO,IAAI,CAAA;KACX;IACD,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,SAAS,CAAC,IAAI;MAC1B,YAAM,KAAK,EAAE,SAAS,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,QAAQ,GAAS,CAC1D,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Build, Component, Element, h, Prop, State, Watch, Host } from \"@stencil/core\"\nimport { IconClass, Type } from \"./constants\"\nimport { fetchIcon } from \"../../utils/icon.utils\"\n\n@Component({\n\tassetsDirs: [\"assets\"],\n\tstyleUrl: \"gov-icon.scss\",\n\ttag: \"gov-icon\",\n})\nexport class GovIcon {\n\t@Element() el: HTMLElement\n\t/**\n\t * Name of icon\n\t */\n\t@Prop() name: string = null\n\t/**\n\t * Type of icon\n\t */\n\t@Prop() type: Type = \"basic\"\n\t@State() private iconData: string\n\t@State() private visible = false\n\t@State() private error = false\n\tprivate intersectionObserver: IntersectionObserver\n\n\t@Watch(\"name\")\n\tprivate async loadIconPathData(): Promise<void> {\n\t\tconst { name, visible, type } = this\n\t\tif (!Build.isBrowser || !name || !visible) {\n\t\t\treturn\n\t\t}\n\t\ttry {\n\t\t\tthis.iconData = await fetchIcon({ name, type })\n\t\t} catch (e) {\n\t\t\tthis.error = true\n\t\t}\n\t}\n\n\n\tconnectedCallback(): void {\n\t\tthis.waitUntilVisible(async () => {\n\t\t\tthis.visible = true\n\t\t\tawait this.loadIconPathData()\n\t\t})\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tif (this.intersectionObserver) {\n\t\t\tthis.intersectionObserver.disconnect()\n\t\t\tthis.intersectionObserver = null\n\t\t}\n\t}\n\n\tasync componentWillLoad(): Promise<void> {\n\t\tawait this.loadIconPathData()\n\t}\n\n\tprivate waitUntilVisible(callback: () => void): void {\n\t\tif (!Build.isBrowser || typeof window === \"undefined\" || !(window as any).IntersectionObserver) {\n\t\t\tcallback()\n\t\t\treturn\n\t\t}\n\t\tthis.intersectionObserver = new IntersectionObserver((entries) => {\n\t\t\tentries.forEach((entry) => {\n\t\t\t\tif (entry.isIntersecting) {\n\t\t\t\t\tthis.intersectionObserver.disconnect()\n\t\t\t\t\tthis.intersectionObserver = null\n\t\t\t\t\tcallback()\n\t\t\t\t}\n\t\t\t})\n\t\t}, { rootMargin: \"50px\" })\n\t\tthis.intersectionObserver.observe(this.el)\n\t}\n\n\n\trender() {\n\t\tif (this.error) {\n\t\t\treturn null\n\t\t}\n\t\treturn (\n\t\t\t<Host class={IconClass.root}>\n\t\t\t\t<span class={IconClass.holder} innerHTML={this.iconData}></span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,103 @@
+export const complexIcons = [
+  "complex/24-7",
+  "complex/arrival",
+  "complex/bell",
+  "complex/big-help",
+  "complex/business-file",
+  "complex/businessman",
+  "complex/car",
+  "complex/card-400",
+  "complex/card-401",
+  "complex/card-403",
+  "complex/card-404",
+  "complex/card-500",
+  "complex/card-502",
+  "complex/communication",
+  "complex/confusion",
+  "complex/court",
+  "complex/covid",
+  "complex/disability",
+  "complex/doc-agreement",
+  "complex/doc-basic-info",
+  "complex/doc-business",
+  "complex/doc-car-point-list",
+  "complex/doc-diploma",
+  "complex/doc-driver-info",
+  "complex/doc-election",
+  "complex/doc-filled",
+  "complex/doc-health",
+  "complex/doc-judgment",
+  "complex/doc-patient",
+  "complex/doc-personal-info",
+  "complex/doc-petition",
+  "complex/doc-registers",
+  "complex/doc-review",
+  "complex/doc-search",
+  "complex/doc-stamp",
+  "complex/doc-state",
+  "complex/doc-taxes",
+  "complex/doc-universal",
+  "complex/doc-visa",
+  "complex/documents",
+  "complex/driver",
+  "complex/driver-file",
+  "complex/driving-licence",
+  "complex/email-notification",
+  "complex/energy",
+  "complex/envelope",
+  "complex/family",
+  "complex/globe",
+  "complex/graduate",
+  "complex/hand",
+  "complex/hand-400",
+  "complex/hand-401",
+  "complex/hand-403",
+  "complex/hand-404",
+  "complex/hand-500",
+  "complex/hand-502",
+  "complex/health",
+  "complex/help",
+  "complex/history",
+  "complex/holiday",
+  "complex/hourglass",
+  "complex/id",
+  "complex/id-card",
+  "complex/illness",
+  "complex/info",
+  "complex/institute-file",
+  "complex/job",
+  "complex/job-loss",
+  "complex/new-comments",
+  "complex/newborn",
+  "complex/news",
+  "complex/passport",
+  "complex/personal-file",
+  "complex/pet",
+  "complex/petrol-station",
+  "complex/pills",
+  "complex/portal",
+  "complex/pregnant",
+  "complex/profile-settings",
+  "complex/property",
+  "complex/queue",
+  "complex/retiree",
+  "complex/rings",
+  "complex/settings",
+  "complex/simple-envelope",
+  "complex/sms-notification",
+  "complex/state-file",
+  "complex/tombstone",
+  "complex/union",
+  "complex/vaccine",
+];
+export const basicIcons = [
+  "basic/arrow-down",
+  "basic/check",
+  "basic/cross",
+  "basic/exclamation",
+  "basic/info",
+  "basic/loader",
+  "basic/warning",
+];
+export const icons = [...complexIcons, ...basicIcons];
+//# sourceMappingURL=list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../../../src/components/gov-icon/list.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG;EAC3B,cAAc;EACd,iBAAiB;EACjB,cAAc;EACd,kBAAkB;EAClB,uBAAuB;EACvB,qBAAqB;EACrB,aAAa;EACb,kBAAkB;EAClB,kBAAkB;EAClB,kBAAkB;EAClB,kBAAkB;EAClB,kBAAkB;EAClB,kBAAkB;EAClB,uBAAuB;EACvB,mBAAmB;EACnB,eAAe;EACf,eAAe;EACf,oBAAoB;EACpB,uBAAuB;EACvB,wBAAwB;EACxB,sBAAsB;EACtB,4BAA4B;EAC5B,qBAAqB;EACrB,yBAAyB;EACzB,sBAAsB;EACtB,oBAAoB;EACpB,oBAAoB;EACpB,sBAAsB;EACtB,qBAAqB;EACrB,2BAA2B;EAC3B,sBAAsB;EACtB,uBAAuB;EACvB,oBAAoB;EACpB,oBAAoB;EACpB,mBAAmB;EACnB,mBAAmB;EACnB,mBAAmB;EACnB,uBAAuB;EACvB,kBAAkB;EAClB,mBAAmB;EACnB,gBAAgB;EAChB,qBAAqB;EACrB,yBAAyB;EACzB,4BAA4B;EAC5B,gBAAgB;EAChB,kBAAkB;EAClB,gBAAgB;EAChB,eAAe;EACf,kBAAkB;EAClB,cAAc;EACd,kBAAkB;EAClB,kBAAkB;EAClB,kBAAkB;EAClB,kBAAkB;EAClB,kBAAkB;EAClB,kBAAkB;EAClB,gBAAgB;EAChB,cAAc;EACd,iBAAiB;EACjB,iBAAiB;EACjB,mBAAmB;EACnB,YAAY;EACZ,iBAAiB;EACjB,iBAAiB;EACjB,cAAc;EACd,wBAAwB;EACxB,aAAa;EACb,kBAAkB;EAClB,sBAAsB;EACtB,iBAAiB;EACjB,cAAc;EACd,kBAAkB;EAClB,uBAAuB;EACvB,aAAa;EACb,wBAAwB;EACxB,eAAe;EACf,gBAAgB;EAChB,kBAAkB;EAClB,0BAA0B;EAC1B,kBAAkB;EAClB,eAAe;EACf,iBAAiB;EACjB,eAAe;EACf,kBAAkB;EAClB,yBAAyB;EACzB,0BAA0B;EAC1B,oBAAoB;EACpB,mBAAmB;EACnB,eAAe;EACf,iBAAiB;CACjB,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG;EACzB,kBAAkB;EAClB,aAAa;EACb,aAAa;EACb,mBAAmB;EACnB,YAAY;EACZ,cAAc;EACd,eAAe;CACf,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,GAAG,YAAY,EAAE,GAAG,UAAU,CAAC,CAAA","sourcesContent":["export const complexIcons = [\n\t\"complex/24-7\",\n\t\"complex/arrival\",\n\t\"complex/bell\",\n\t\"complex/big-help\",\n\t\"complex/business-file\",\n\t\"complex/businessman\",\n\t\"complex/car\",\n\t\"complex/card-400\",\n\t\"complex/card-401\",\n\t\"complex/card-403\",\n\t\"complex/card-404\",\n\t\"complex/card-500\",\n\t\"complex/card-502\",\n\t\"complex/communication\",\n\t\"complex/confusion\",\n\t\"complex/court\",\n\t\"complex/covid\",\n\t\"complex/disability\",\n\t\"complex/doc-agreement\",\n\t\"complex/doc-basic-info\",\n\t\"complex/doc-business\",\n\t\"complex/doc-car-point-list\",\n\t\"complex/doc-diploma\",\n\t\"complex/doc-driver-info\",\n\t\"complex/doc-election\",\n\t\"complex/doc-filled\",\n\t\"complex/doc-health\",\n\t\"complex/doc-judgment\",\n\t\"complex/doc-patient\",\n\t\"complex/doc-personal-info\",\n\t\"complex/doc-petition\",\n\t\"complex/doc-registers\",\n\t\"complex/doc-review\",\n\t\"complex/doc-search\",\n\t\"complex/doc-stamp\",\n\t\"complex/doc-state\",\n\t\"complex/doc-taxes\",\n\t\"complex/doc-universal\",\n\t\"complex/doc-visa\",\n\t\"complex/documents\",\n\t\"complex/driver\",\n\t\"complex/driver-file\",\n\t\"complex/driving-licence\",\n\t\"complex/email-notification\",\n\t\"complex/energy\",\n\t\"complex/envelope\",\n\t\"complex/family\",\n\t\"complex/globe\",\n\t\"complex/graduate\",\n\t\"complex/hand\",\n\t\"complex/hand-400\",\n\t\"complex/hand-401\",\n\t\"complex/hand-403\",\n\t\"complex/hand-404\",\n\t\"complex/hand-500\",\n\t\"complex/hand-502\",\n\t\"complex/health\",\n\t\"complex/help\",\n\t\"complex/history\",\n\t\"complex/holiday\",\n\t\"complex/hourglass\",\n\t\"complex/id\",\n\t\"complex/id-card\",\n\t\"complex/illness\",\n\t\"complex/info\",\n\t\"complex/institute-file\",\n\t\"complex/job\",\n\t\"complex/job-loss\",\n\t\"complex/new-comments\",\n\t\"complex/newborn\",\n\t\"complex/news\",\n\t\"complex/passport\",\n\t\"complex/personal-file\",\n\t\"complex/pet\",\n\t\"complex/petrol-station\",\n\t\"complex/pills\",\n\t\"complex/portal\",\n\t\"complex/pregnant\",\n\t\"complex/profile-settings\",\n\t\"complex/property\",\n\t\"complex/queue\",\n\t\"complex/retiree\",\n\t\"complex/rings\",\n\t\"complex/settings\",\n\t\"complex/simple-envelope\",\n\t\"complex/sms-notification\",\n\t\"complex/state-file\",\n\t\"complex/tombstone\",\n\t\"complex/union\",\n\t\"complex/vaccine\",\n]\n\nexport const basicIcons = [\n\t\"basic/arrow-down\",\n\t\"basic/check\",\n\t\"basic/cross\",\n\t\"basic/exclamation\",\n\t\"basic/info\",\n\t\"basic/loader\",\n\t\"basic/warning\",\n]\n\nexport const icons = [...complexIcons, ...basicIcons]\n"]}

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

@@ -0,0 +1,9 @@
+import { Variants as GlobalVariants } from '../../core/constants/variants';
+export const Variants = [undefined, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY, GlobalVariants.WARNING, GlobalVariants.ERROR, GlobalVariants.SUCCESS];
+export const MessageClass = {
+  root: "gov-message",
+  icon: "gov-message__icon",
+  content: "gov-message__content",
+  close: "gov-message__close",
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-message/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAE1E,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAU,CAAA;AAGpK,MAAM,CAAC,MAAM,YAAY,GAAG;EAC3B,IAAI,EAAE,aAAa;EACnB,IAAI,EAAE,mBAAmB;EACzB,OAAO,EAAE,sBAAsB;EAC/B,KAAK,EAAE,oBAAoB;CAC3B,CAAA","sourcesContent":["import { Variants as GlobalVariants } from '../../core/constants/variants'\n\nexport const Variants = [undefined, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY, GlobalVariants.WARNING, GlobalVariants.ERROR, GlobalVariants.SUCCESS] as const\nexport type VariantType = typeof Variants[number]\n\nexport const MessageClass = {\n\troot: \"gov-message\",\n\ticon: \"gov-message__icon\",\n\tcontent: \"gov-message__content\",\n\tclose: \"gov-message__close\",\n}\n"]}

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

@@ -0,0 +1,262 @@
+/* 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);
+  }
+}
+/*
+*   Alert
+*/
+.gov-message {
+  position: relative;
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+  padding: 0.75rem 1rem;
+  border-left: 0.25rem solid transparent;
+  background: var(--gov-toast-message-bg, var(--gov-color-secondary-100));
+}
+.gov-message__icon {
+  flex: 0 0 1.25rem;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.gov-message__content {
+  flex: 1 1 auto;
+}
+.gov-message__content p {
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+}
+.gov-message__content p:last-child {
+  margin: 0;
+}
+@media (min-width: 30em) {
+  .gov-message {
+    flex-direction: row;
+  }
+}
+.gov-message[shadow=""], .gov-message[shadow=true i], .gov-message[shadow="1"] {
+  box-shadow: var(--gov-message-box-shadow, 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1));
+}
+.gov-message[variant=warning] {
+  border-left-color: var(--gov-message-warning-color, var(--gov-color-warning));
+  background: var(--gov-message-warning-bg-color, var(--gov-color-warning-100));
+}
+.gov-message[variant=warning] .gov-message__icon {
+  color: var(--gov-message-warning-color, var(--gov-color-warning));
+}
+.gov-message[variant=warning][inverse=""], .gov-message[variant=warning][inverse=true i], .gov-message[variant=warning][inverse="1"] {
+  background: var(--gov-message-warning-color, var(--gov-color-secondary-100));
+}
+.gov-message[variant=error] {
+  border-left-color: var(--gov-message-error-color, var(--gov-color-error));
+  background: var(--gov-message-error-bg-color, var(--gov-color-error-100));
+}
+.gov-message[variant=error] .gov-message__icon {
+  color: var(--gov-message-error-color, var(--gov-color-error));
+}
+.gov-message[variant=error][inverse=""], .gov-message[variant=error][inverse=true i], .gov-message[variant=error][inverse="1"] {
+  background: var(--gov-message-warning-color, var(--gov-color-secondary-100));
+}
+.gov-message[variant=secondary] {
+  border-left-color: var(--gov-message-secondary-color, var(--gov-color-secondary));
+  background: var(--gov-message-secondary-bg-color, var(--gov-color-secondary-200));
+}
+.gov-message[variant=secondary] .gov-message__icon {
+  color: var(--gov-message-secondary-color, var(--gov-color-secondary));
+}
+.gov-message[variant=secondary][inverse=""], .gov-message[variant=secondary][inverse=true i], .gov-message[variant=secondary][inverse="1"] {
+  background: var(--gov-message-warning-color, var(--gov-color-secondary-100));
+}
+.gov-message[variant=success] {
+  border-left-color: var(--gov-message-success-color, var(--gov-color-success));
+  background: var(--gov-message-success-bg-color, var(--gov-color-success-100));
+}
+.gov-message[variant=success] .gov-message__icon {
+  color: var(--gov-message-success-color, var(--gov-color-success));
+}
+.gov-message[variant=success][inverse=""], .gov-message[variant=success][inverse=true i], .gov-message[variant=success][inverse="1"] {
+  background: var(--gov-message-warning-color, var(--gov-color-secondary-100));
+}
+.gov-message[variant=primary] {
+  border-left-color: var(--gov-message-primary-color, var(--gov-color-primary));
+  background: var(--gov-message-primary-bg-color, var(--gov-color-primary-100));
+}
+.gov-message[variant=primary] .gov-message__icon {
+  color: var(--gov-message-primary-color, var(--gov-color-primary));
+}
+.gov-message[variant=primary][inverse=""], .gov-message[variant=primary][inverse=true i], .gov-message[variant=primary][inverse="1"] {
+  background: var(--gov-message-warning-color, var(--gov-color-secondary-100));
+}

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

@@ -0,0 +1,63 @@
+import { h, Host } from '@stencil/core';
+import { validateProp } from '../../helpers/Validate/props';
+import { MessageClass } from './constants';
+import { govHost } from '../../helpers/Dom/template';
+import { Variants } from '../../core/constants/variants';
+export class GovMessage {
+  constructor() {
+    this.variant = Variants.PRIMARY;
+    this.h = govHost(this.host);
+  }
+  validateVariant(newValue) {
+    validateProp(Variants, newValue, MessageClass.root);
+  }
+  render() {
+    return (h(Host, { class: this.h.classes(MessageClass.root), variant: this.variant, role: "alert" }, this.h.hasSlot('icon') && (h("span", { class: MessageClass.icon }, h("slot", { name: "icon" }))), h("div", { class: MessageClass.content }, h("slot", null))));
+  }
+  static get is() { return "gov-message"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-message.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-message.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 content message."
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "Variants.PRIMARY"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "variant",
+        "methodName": "validateVariant"
+      }];
+  }
+}
+//# sourceMappingURL=gov-message.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gov-message.js","sourceRoot":"","sources":["../../../../../../src/components/gov-message/gov-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAOxD,MAAM,OAAO,UAAU;EAGtB;mBASwC,QAAQ,CAAC,OAAO;IARvD,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAUD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;EACpD,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,OAAO;MACjF,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAC1B,YAAM,KAAK,EAAE,YAAY,CAAC,IAAI;QAC7B,YAAM,IAAI,EAAC,MAAM,GAAG,CACd,CACP;MAED,WAAK,KAAK,EAAE,YAAY,CAAC,OAAO;QAC/B,eAAQ,CACH,CACA,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { MessageClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.d'\nimport { Variants } from '../../core/constants/variants'\nimport {VariantType} from './constants'\n\n@Component({\n\ttag: 'gov-message',\n\tstyleUrl: 'gov-message.scss',\n})\nexport class GovMessage {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovMessageElement\n\n\t/**\n\t * Style variation of the content message.\n\t */\n\t@Prop() readonly variant: VariantType = Variants.PRIMARY\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, MessageClass.root)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(MessageClass.root)} variant={this.variant} role=\"alert\">\n\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t<span class={MessageClass.icon}>\n\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\n\t\t\t\t<div class={MessageClass.content}>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,70 @@
+import { Variants as GlobalVariants } from "../../core/constants/variants";
+import { icons, createIcon } from "../../../.storybook/icons";
+import { Variants } from "./constants";
+import readme from "./readme.md";
+import { bindProps, removeUndefinedValues } from "../../../.storybook/helpers";
+const StoryConfiguration = {
+  title: "Design system/Message",
+  args: {
+    variant: GlobalVariants.PRIMARY,
+    copy: '<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>',
+    icon: undefined,
+    inverse: false
+  },
+  argTypes: {
+    icon: {
+      control: "select",
+      options: [undefined, ...icons],
+    },
+    variant: {
+      control: "select",
+      options: removeUndefinedValues(Variants),
+    },
+    copy: "string",
+    inverse: "boolean",
+  },
+  parameters: {
+    notes: readme,
+  },
+};
+const PROPS = ["variant", "copy", "inverse"];
+const Template = (args) => {
+  const el = document.createElement("gov-message");
+  el.innerHTML = args.copy;
+  if (args.icon) {
+    const icon = createIcon(args.icon, 'icon');
+    if (icon) {
+      el.appendChild(icon);
+    }
+  }
+  bindProps(el, PROPS, args);
+  return el;
+};
+export const Playground = Template.bind({});
+Playground.args = {};
+export const Primary = Template.bind({});
+Primary.args = {
+  variant: 'primary'
+};
+export const Secondary = Template.bind({});
+Secondary.args = {
+  variant: 'secondary'
+};
+export const Error = Template.bind({});
+Error.args = {
+  variant: 'error'
+};
+export const Success = Template.bind({});
+Success.args = {
+  variant: 'success'
+};
+export const Warning = Template.bind({});
+Warning.args = {
+  variant: 'warning'
+};
+export const Inverse = Template.bind({});
+Inverse.args = {
+  inverse: true
+};
+export default StoryConfiguration;
+//# sourceMappingURL=gov-message.stories.js.map