@gov-design-system-ce/components 4.2.3 → 4.2.5

package/dist/collection/components/gov-loading/skeleton/gov-skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"gov-skeleton.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-loading/skeleton/gov-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,eAAe,CAAA;AAC7E,OAAO,EACN,iBAAiB,EAEjB,aAAa,EAEb,cAAc,EAEd,aAAa,GACb,MAAM,aAAa,CAAA;AAEpB,OAAO,EAAC,OAAO,EAAC,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAC,YAAY,EAAC,MAAM,iCAAiC,CAAA;AAE5D,OAAO,EAAC,iBAAiB,EAAa,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAC,cAAc,EAAC,MAAM,2CAA2C,CAAC;AACzE,OAAO,EAAC,qBAAqB,EAAC,MAAM,8CAA8C,CAAC;AAKnF,MAAM,OAAO,WAAW;IAIvB;QA8BA,UAAK,GAAa,EAAE,CAAA;oBAtByB,GAAG;qBAIH,SAAS;qBAIjB,MAAM;qBAInB,IAAI;sBAIH,IAAI;yBAIe,UAAU;mCAmBX,EAAE;QA9C5C,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IA+BD,YAAY,CAAC,QAAgB;QAC5B,YAAY,CAAC,aAAa,EAAE,QAAQ,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;IAC1D,CAAC;IAGD,aAAa,CAAC,QAAgB;QAC7B,YAAY,CAAC,cAAc,EAAE,QAAQ,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;IAC3D,CAAC;IAGD,iBAAiB,CAAC,QAAgB;QACjC,YAAY,CAAC,iBAAiB,EAAE,QAAQ,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;IAC9D,CAAC;IAID,gBAAgB;QACf,IAAI,CAAC,iBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,aAAa,EAAE,QAAQ,EAAE,EAAE;YACrF,IAAI,CAAC,qBAAqB,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACvD,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC9B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QACtC,IAAI,CAAC,IAAI,EAAE,CAAA;QACX,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7D,CAAC;IAED,mBAAmB;QAClB,IAAI,CAAC,IAAI,EAAE,CAAA;IACZ,CAAC;IAED,oBAAoB;;QACnB,MAAA,IAAI,CAAC,iBAAiB,0CAAE,aAAa,EAAE,CAAC;IACzC,CAAC;IAED,qBAAqB,CAAC,aAAqB,EAAE,QAAgB;QAC5D,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAA;QACxC,IAAI,CAAC,mBAAmB,mCAAO,IAAI,CAAC,mBAAmB,KAAE,CAAC,aAAa,CAAC,EAAE,QAAQ,GAAC,CAAC;IACrF,CAAC;IAED,IAAI;QACH,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACnB,CAAC;IAED,IAAI,KAAK;QACR,MAAM,iBAAiB,GAGnB;YACH,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,IAAI;SACZ,CAAA;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,iBAAiB,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QACrC,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,iBAAiB,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;QACvC,CAAC;QAED,yBAAW,iBAAiB,EAAC;IAC9B,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,mEAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE;gBACN,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,IAAI;gBAC1B,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;gBAC/B,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,MAAM;gBAC3B,QAAQ,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU;gBACvC,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO;aACjC,IACG,IAAI,CAAC,mBAAmB,iBAClB,MAAM,mBACF,GAAG,mBACH,KAAK,EACnB,IAAI,EAAC,aAAa,EAClB,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {Component, Element, h, Host, Prop, State, Watch} from \"@stencil/core\"\nimport {\n\tSkeletonAnimation,\n\tSkeletonAnimationType,\n\tSkeletonClass,\n\tSkeletonColorType,\n\tSkeletonShapes,\n\tSkeletonShapesType,\n\tSkeletonSizes,\n} from \"./constants\"\nimport {GovHost} from \"../../../helpers/Dom/template.types\"\nimport {govHost} from \"../../../helpers/Dom/template\"\nimport {validateProp} from \"../../../helpers/Validate/props\"\nimport {FormInputSizesType} from \"../../gov-form/input/constants\";\nimport {AttributeObserver, Attributes} from \"../../../helpers/Dom/attribute\";\nimport {ariaAttributes} from \"../../../helpers/Accessibility/attributes\";\nimport {inheritAriaAttributes} from \"../../../helpers/Accessibility/accessibility\";\n\n@Component({\n\ttag: \"gov-skeleton\",\n})\nexport class GovSkeleton {\n\th: GovHost\n\tprivate attributeObserver: AttributeObserver\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovSkeletonElement\n\t/**\n\t * Input’s size.\n\t */\n\t@Prop() readonly size?: FormInputSizesType = \"m\"\n\t/**\n\t * Style variation of the skeleton.\n\t */\n\t@Prop() readonly color?: SkeletonColorType = \"neutral\"\n\t/**\n\t * Shape of the skeleton\n\t */\n\t@Prop() shape?: SkeletonShapesType = \"line\"\n\t/**\n\t * Width of the skeleton ex. 100px, 100%, auto etc.\n\t */\n\t@Prop() width: string = null\n\t/**\n\t * Height of the skeleton ex. 100px, 100%, auto etc.\n\t */\n\t@Prop() height: string = null\n\t/**\n\t * Animation type\n\t */\n\t@Prop() animation?: SkeletonAnimationType = \"progress\"\n\n\titems: number[] = []\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(SkeletonSizes, newValue, SkeletonClass.root)\n\t}\n\n\t@Watch('shape')\n\tvalidateShape(newValue: string): void {\n\t\tvalidateProp(SkeletonShapes, newValue, SkeletonClass.root)\n\t}\n\n\t@Watch('animation')\n\tvalidateAnimation(newValue: string): void {\n\t\tvalidateProp(SkeletonAnimation, newValue, SkeletonClass.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\tcomponentWillLoad() {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateShape(this.shape)\n\t\tthis.validateAnimation(this.animation)\n\t\tthis.init()\n\t\tthis.inheritedAttributes = inheritAriaAttributes(this.host);\n\t}\n\n\tcomponentWillUpdate() {\n\t\tthis.init()\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.attributeObserver?.stopObserving();\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\tinit() {\n\t\tthis.items.fill(1)\n\t}\n\n\tget style() {\n\t\tconst dimenssionsStyles: {\n\t\t\twidth?: string,\n\t\t\theight?: string,\n\t\t} = {\n\t\t\twidth: null,\n\t\t\theight: null,\n\t\t}\n\t\tif (this.width) {\n\t\t\tdimenssionsStyles.width = this.width\n\t\t}\n\n\t\tif (this.height) {\n\t\t\tdimenssionsStyles.height = this.height\n\t\t}\n\n\t\treturn {...dimenssionsStyles}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host size={this.size}\n\t\t\t\t  color={this.color}\n\t\t\t\t  class={{\n\t\t\t\t\t  [SkeletonClass.root]: true,\n\t\t\t\t\t  circle: this.shape === \"circle\",\n\t\t\t\t\t  line: this.shape === \"line\",\n\t\t\t\t\t  progress: this.animation === \"progress\",\n\t\t\t\t\t  pulse: this.animation === \"pulse\",\n\t\t\t\t  }}\n\t\t\t\t  {...this.inheritedAttributes}\n\t\t\t\t  aria-busy=\"true\"\n\t\t\t\t  aria-valuemin=\"0\"\n\t\t\t\t  aria-valuemax=\"100\"\n\t\t\t\t  role=\"progressbar\"\n\t\t\t\t  tabindex=\"0\"\n\t\t\t\t  style={this.style}>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"gov-skeleton.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-loading/skeleton/gov-skeleton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, h, Host, Prop, State, Watch} from \"@stencil/core\"\nimport {\n\tSkeletonAnimation,\n\tSkeletonAnimationType,\n\tSkeletonClass,\n\tSkeletonColorType,\n\tSkeletonShapes,\n\tSkeletonShapesType,\n\tSkeletonSizes,\n} from \"./constants\"\nimport {GovHost} from \"../../../helpers/Dom/template.types\"\nimport {govHost} from \"../../../helpers/Dom/template\"\nimport {validateProp} from \"../../../helpers/Validate/props\"\nimport {FormInputSizesType} from \"../../gov-form/input/constants\";\nimport {AttributeObserver, Attributes} from \"../../../helpers/Dom/attribute\";\nimport {ariaAttributes} from \"../../../helpers/Accessibility/attributes\";\nimport {inheritAriaAttributes} from \"../../../helpers/Accessibility/accessibility\";\n\n@Component({\n\ttag: \"gov-skeleton\",\n})\nexport class GovSkeleton {\n\th: GovHost\n\tprivate attributeObserver: AttributeObserver\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovSkeletonElement\n\t/**\n\t * Input’s size.\n\t */\n\t@Prop({reflect: true}) readonly size?: FormInputSizesType = \"m\"\n\t/**\n\t * Style variation of the skeleton.\n\t */\n\t@Prop() readonly color?: SkeletonColorType = \"neutral\"\n\t/**\n\t * Shape of the skeleton\n\t */\n\t@Prop() shape?: SkeletonShapesType = \"line\"\n\t/**\n\t * Width of the skeleton ex. 100px, 100%, auto etc.\n\t */\n\t@Prop({reflect: true}) width?: string = null\n\t/**\n\t * Height of the skeleton ex. 100px, 100%, auto etc.\n\t */\n\t@Prop({reflect: true}) height?: string = null\n\t/**\n\t * Animation type\n\t */\n\t@Prop() animation?: SkeletonAnimationType = \"progress\"\n\n\titems: number[] = []\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(SkeletonSizes, newValue, SkeletonClass.root)\n\t}\n\n\t@Watch('shape')\n\tvalidateShape(newValue: string): void {\n\t\tvalidateProp(SkeletonShapes, newValue, SkeletonClass.root)\n\t}\n\n\t@Watch('animation')\n\tvalidateAnimation(newValue: string): void {\n\t\tvalidateProp(SkeletonAnimation, newValue, SkeletonClass.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\tcomponentWillLoad() {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateShape(this.shape)\n\t\tthis.validateAnimation(this.animation)\n\t\tthis.init()\n\t\tthis.inheritedAttributes = inheritAriaAttributes(this.host);\n\t}\n\n\tcomponentWillUpdate() {\n\t\tthis.init()\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.attributeObserver?.stopObserving();\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\tinit() {\n\t\tthis.items.fill(1)\n\t}\n\n\tget style() {\n\t\tconst dimenssionsStyles: {\n\t\t\twidth?: string,\n\t\t\theight?: string,\n\t\t} = {\n\t\t\twidth: null,\n\t\t\theight: null,\n\t\t}\n\t\tif (this.width) {\n\t\t\tdimenssionsStyles.width = this.width\n\t\t}\n\n\t\tif (this.height) {\n\t\t\tdimenssionsStyles.height = this.height\n\t\t}\n\n\t\treturn {...dimenssionsStyles}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host size={this.size}\n\t\t\t\t  color={this.color}\n\t\t\t\t  class={{\n\t\t\t\t\t  [SkeletonClass.root]: true,\n\t\t\t\t\t  circle: this.shape === \"circle\",\n\t\t\t\t\t  line: this.shape === \"line\",\n\t\t\t\t\t  progress: this.animation === \"progress\",\n\t\t\t\t\t  pulse: this.animation === \"pulse\",\n\t\t\t\t  }}\n\t\t\t\t  {...this.inheritedAttributes}\n\t\t\t\t  aria-busy=\"true\"\n\t\t\t\t  aria-valuemin=\"0\"\n\t\t\t\t  aria-valuemax=\"100\"\n\t\t\t\t  role=\"progressbar\"\n\t\t\t\t  tabindex=\"0\"\n\t\t\t\t  style={this.style}>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/gov-theme-switch/gov-theme-switch.js

@@ -17,7 +17,7 @@ export class GovThemeSwitch {
         };
         this.size = "m";
         this.displayLabel = false;
-        this.ariaLabelLight = "Přenout na tmavý mód";
+        this.ariaLabelLight = "Přepnout na tmavý mód";
         this.ariaLabelDark = "Přepnout na světlý mód";
         this.labelLight = "Světlý mód";
         this.labelDark = "Tmavý mód";
@@ -65,7 +65,7 @@ export class GovThemeSwitch {
         if (this.theme === ThemeList.auto) {
             isDark = this.isSystemPrefersColorDark;
         }
-        return (h(Host, { key: '492cf756810462ba0764668a134b2ecd5133d562', class: this.h.classes(ThemeSwitchClass.root), theme: isDark ? ThemeList.dark : ThemeList.light, size: this.size }, h("button", { key: '02b94994619dd3fbb998acdcc16c907c69ea6723', onClick: () => this.setThemeState(isDark ? ThemeList.light : ThemeList.dark), "aria-current": this.theme, "aria-label": isDark ? this.ariaLabelDark : this.ariaLabelLight }, h("span", { key: '0beb069c94ed4337a6c2de4d8ee8640123bc3bc5' }, h("span", { key: '57d9fc00520b8cf98108d9b5a9710d6066861157', class: ThemeSwitchClass.indicator }, ThemeList.light && h("gov-icon", { key: '3cd1693dcf28658943146386c97b834e5cf4534a', name: "sun", class: ThemeSwitchClass.iconLight, type: "components" }), ThemeList.dark && h("gov-icon", { key: '139adcafc399eed5482c15273a37331598bbe179', name: "moon", class: ThemeSwitchClass.iconDark, type: "components" })), this.displayLabel ? (h("span", { class: ThemeSwitchClass.label }, isDark ? this.labelDark : this.labelLight)) : null))));
+        return (h(Host, { key: '544d940df577f621ba8ee0d8f46bc6b6b41815ca', class: this.h.classes(ThemeSwitchClass.root), theme: isDark ? ThemeList.dark : ThemeList.light, size: this.size }, h("button", { key: '8b1165e9c7ade60a00f4b8dcc65ba50dd0ee9408', onClick: () => this.setThemeState(isDark ? ThemeList.light : ThemeList.dark), "aria-current": this.theme, "aria-label": isDark ? this.ariaLabelDark : this.ariaLabelLight }, h("span", { key: '3d78b019112d3b3bcf75517d85d61e2ed17cd717' }, h("span", { key: 'cf2293cd960946e2be0fe54bd847a0d616219887', class: ThemeSwitchClass.indicator }, ThemeList.light && h("gov-icon", { key: '7d1affc44645eca82d285a51a138ddf73b03ad3e', name: "sun", class: ThemeSwitchClass.iconLight, type: "components" }), ThemeList.dark && h("gov-icon", { key: 'df70460dc0cf1530f2ca36917f2bd203aee324ab', name: "moon", class: ThemeSwitchClass.iconDark, type: "components" })), this.displayLabel ? (h("span", { class: ThemeSwitchClass.label }, isDark ? this.labelDark : this.labelLight)) : null))));
     }
     static get is() { return "gov-theme-switch"; }
     static get properties() {
@@ -116,8 +116,8 @@ export class GovThemeSwitch {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"P\u0159enout na tmav\u00FD m\u00F3d\"",
-                    "resolved": "\"P\u0159enout na tmav\u00FD m\u00F3d\"",
+                    "original": "\"P\u0159epnout na tmav\u00FD m\u00F3d\"",
+                    "resolved": "\"P\u0159epnout na tmav\u00FD m\u00F3d\"",
                     "references": {}
                 },
                 "required": false,
@@ -128,7 +128,7 @@ export class GovThemeSwitch {
                 },
                 "attribute": "aria-label-light",
                 "reflect": false,
-                "defaultValue": "\"P\u0159enout na tmav\u00FD m\u00F3d\""
+                "defaultValue": "\"P\u0159epnout na tmav\u00FD m\u00F3d\""
             },
             "ariaLabelDark": {
                 "type": "string",

package/dist/collection/components/gov-theme-switch/gov-theme-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"gov-theme-switch.js","sourceRoot":"","sources":["../../../../../../src/components/gov-theme-switch/gov-theme-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch} from \"@stencil/core\"\nimport {GovHost} from \"../../helpers/Dom/template.types\";\nimport {govHost} from \"../../helpers/Dom/template\";\nimport {ATTRIBUTE_THEME_NAME, ThemeSwitchClass, ThemeSwitchSizes, ThemeSwitchSizesType} from \"./constants\";\nimport {isWindow} from \"../../helpers/Dom/win\";\nimport {ThemeList, ThemeSwitchEvent} from \"./gov-theme-switch.types\";\nimport {validateProp} from \"../../helpers/Validate/props\";\nimport {getCookie, setCookie} from \"../../helpers/Dom/document\";\n\n@Component({\n\ttag: \"gov-theme-switch\",\n})\nexport class GovThemeSwitch {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovThemeSwitchElement\n\n\t/**\n\t * Switch's size.\n\t */\n\t@Prop() readonly size?: ThemeSwitchSizesType = \"m\"\n\t/**\n\t * Display switch label\n\t */\n\t@Prop({attribute: \"display-label\"}) readonly displayLabel? = false\n\t/**\n\t * Label in light mode\n\t */\n\t@Prop({attribute: \"aria-label-light\"}) readonly ariaLabelLight? = \"Přenout na tmavý mód\"\n\t/**\n\t * Label in dark mode\n\t */\n\t@Prop({attribute: \"aria-label-dark\"}) readonly ariaLabelDark? = \"Přepnout na světlý mód\"\n\t/**\n\t * Label in light mode\n\t */\n\t@Prop({attribute: \"label-light\"}) readonly labelLight? =  \"Světlý mód\"\n\t/**\n\t * Label in dark mode\n\t */\n\t@Prop({attribute: \"label-dark\"}) readonly labelDark? = \"Tmavý mód\"\n\t/**\n\t * Called when the theme is changed by the user\n\t */\n\t@Event({eventName: \"gov-change\"}) govChange: EventEmitter<ThemeSwitchEvent>\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(ThemeSwitchSizes, newValue, ThemeSwitchClass.root)\n\t}\n\n\t@Watch(\"theme\")\n\twatchTheme(newValue: ThemeList): void {\n\t\tthis.htmlElement.setAttribute(ATTRIBUTE_THEME_NAME, newValue);\n\t\tthis.htmlElement.classList.remove(...Object.keys(ThemeList));\n\t\tthis.htmlElement.classList.add(newValue);\n\t\tsetCookie(ATTRIBUTE_THEME_NAME, newValue);\n\t}\n\n\t@State() theme: ThemeList = ThemeList.auto\n\n\tprivate get storageValue() {\n\t\treturn getCookie(ATTRIBUTE_THEME_NAME)\n\t}\n\n\tprivate get htmlElement(): HTMLElement {\n\t\treturn document.documentElement\n\t}\n\n\tprivate get isSystemPrefersColorDark(): boolean {\n\t\treturn isWindow && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.initDefaultState()\n\t\tthis.validateSize(this.size)\n\t}\n\n\tprivate initDefaultState() {\n\t\tconst options = Object.keys(ThemeList);\n\t\tlet currentState = this.storageValue;\n\t\tconst htmlState = this.htmlElement.getAttribute(ATTRIBUTE_THEME_NAME)\n\n\t\tif (currentState && options.includes(currentState)) {\n\t\t\tthis.theme = currentState as ThemeList;\n\t\t} else if (htmlState && options.includes(htmlState)) {\n\t\t\tthis.theme = htmlState as ThemeList;\n\t\t} else {\n\t\t\tthis.theme = ThemeList.auto;\n\t\t}\n\t}\n\n\tprivate setThemeState = (state: ThemeList) => {\n\t\tthis.theme = state;\n\n\t\tthis.govChange.emit({\n\t\t\tcomponent: ThemeSwitchClass.root,\n\t\t\tstate: this.theme,\n\t\t\tref: this.host\n\t\t})\n\t}\n\n\trender() {\n\t\tlet isDark = this.theme === ThemeList.dark;\n\t\tif (this.theme === ThemeList.auto) {\n\t\t\tisDark = this.isSystemPrefersColorDark;\n\t\t}\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ThemeSwitchClass.root)}\n\t\t\t\t  theme={isDark ? ThemeList.dark : ThemeList.light}\n\t\t\t\t  size={this.size}>\n\t\t\t\t<button onClick={() => this.setThemeState(isDark ? ThemeList.light : ThemeList.dark)}\n\t\t\t\t\t\taria-current={this.theme}\n\t\t\t\t\t\taria-label={isDark ? this.ariaLabelDark : this.ariaLabelLight}>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<span class={ThemeSwitchClass.indicator}>\n\t\t\t\t\t\t\t{ThemeList.light && <gov-icon name=\"sun\" class={ThemeSwitchClass.iconLight} type=\"components\"></gov-icon>}\n\t\t\t\t\t\t\t{ThemeList.dark && <gov-icon name=\"moon\" class={ThemeSwitchClass.iconDark} type=\"components\"></gov-icon>}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{this.displayLabel ? (\n\t\t\t\t\t\t\t<span class={ThemeSwitchClass.label}>\n\t\t\t\t\t\t\t\t{isDark ? this.labelDark : this.labelLight}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : null\n\t\t\t\t\t\t}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"gov-theme-switch.js","sourceRoot":"","sources":["../../../../../../src/components/gov-theme-switch/gov-theme-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch} from \"@stencil/core\"\nimport {GovHost} from \"../../helpers/Dom/template.types\";\nimport {govHost} from \"../../helpers/Dom/template\";\nimport {ATTRIBUTE_THEME_NAME, ThemeSwitchClass, ThemeSwitchSizes, ThemeSwitchSizesType} from \"./constants\";\nimport {isWindow} from \"../../helpers/Dom/win\";\nimport {ThemeList, ThemeSwitchEvent} from \"./gov-theme-switch.types\";\nimport {validateProp} from \"../../helpers/Validate/props\";\nimport {getCookie, setCookie} from \"../../helpers/Dom/document\";\n\n@Component({\n\ttag: \"gov-theme-switch\",\n})\nexport class GovThemeSwitch {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovThemeSwitchElement\n\n\t/**\n\t * Switch's size.\n\t */\n\t@Prop() readonly size?: ThemeSwitchSizesType = \"m\"\n\t/**\n\t * Display switch label\n\t */\n\t@Prop({attribute: \"display-label\"}) readonly displayLabel? = false\n\t/**\n\t * Label in light mode\n\t */\n\t@Prop({attribute: \"aria-label-light\"}) readonly ariaLabelLight? = \"Přepnout na tmavý mód\"\n\t/**\n\t * Label in dark mode\n\t */\n\t@Prop({attribute: \"aria-label-dark\"}) readonly ariaLabelDark? = \"Přepnout na světlý mód\"\n\t/**\n\t * Label in light mode\n\t */\n\t@Prop({attribute: \"label-light\"}) readonly labelLight? =  \"Světlý mód\"\n\t/**\n\t * Label in dark mode\n\t */\n\t@Prop({attribute: \"label-dark\"}) readonly labelDark? = \"Tmavý mód\"\n\t/**\n\t * Called when the theme is changed by the user\n\t */\n\t@Event({eventName: \"gov-change\"}) govChange: EventEmitter<ThemeSwitchEvent>\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(ThemeSwitchSizes, newValue, ThemeSwitchClass.root)\n\t}\n\n\t@Watch(\"theme\")\n\twatchTheme(newValue: ThemeList): void {\n\t\tthis.htmlElement.setAttribute(ATTRIBUTE_THEME_NAME, newValue);\n\t\tthis.htmlElement.classList.remove(...Object.keys(ThemeList));\n\t\tthis.htmlElement.classList.add(newValue);\n\t\tsetCookie(ATTRIBUTE_THEME_NAME, newValue);\n\t}\n\n\t@State() theme: ThemeList = ThemeList.auto\n\n\tprivate get storageValue() {\n\t\treturn getCookie(ATTRIBUTE_THEME_NAME)\n\t}\n\n\tprivate get htmlElement(): HTMLElement {\n\t\treturn document.documentElement\n\t}\n\n\tprivate get isSystemPrefersColorDark(): boolean {\n\t\treturn isWindow && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.initDefaultState()\n\t\tthis.validateSize(this.size)\n\t}\n\n\tprivate initDefaultState() {\n\t\tconst options = Object.keys(ThemeList);\n\t\tlet currentState = this.storageValue;\n\t\tconst htmlState = this.htmlElement.getAttribute(ATTRIBUTE_THEME_NAME)\n\n\t\tif (currentState && options.includes(currentState)) {\n\t\t\tthis.theme = currentState as ThemeList;\n\t\t} else if (htmlState && options.includes(htmlState)) {\n\t\t\tthis.theme = htmlState as ThemeList;\n\t\t} else {\n\t\t\tthis.theme = ThemeList.auto;\n\t\t}\n\t}\n\n\tprivate setThemeState = (state: ThemeList) => {\n\t\tthis.theme = state;\n\n\t\tthis.govChange.emit({\n\t\t\tcomponent: ThemeSwitchClass.root,\n\t\t\tstate: this.theme,\n\t\t\tref: this.host\n\t\t})\n\t}\n\n\trender() {\n\t\tlet isDark = this.theme === ThemeList.dark;\n\t\tif (this.theme === ThemeList.auto) {\n\t\t\tisDark = this.isSystemPrefersColorDark;\n\t\t}\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ThemeSwitchClass.root)}\n\t\t\t\t  theme={isDark ? ThemeList.dark : ThemeList.light}\n\t\t\t\t  size={this.size}>\n\t\t\t\t<button onClick={() => this.setThemeState(isDark ? ThemeList.light : ThemeList.dark)}\n\t\t\t\t\t\taria-current={this.theme}\n\t\t\t\t\t\taria-label={isDark ? this.ariaLabelDark : this.ariaLabelLight}>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<span class={ThemeSwitchClass.indicator}>\n\t\t\t\t\t\t\t{ThemeList.light && <gov-icon name=\"sun\" class={ThemeSwitchClass.iconLight} type=\"components\"></gov-icon>}\n\t\t\t\t\t\t\t{ThemeList.dark && <gov-icon name=\"moon\" class={ThemeSwitchClass.iconDark} type=\"components\"></gov-icon>}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{this.displayLabel ? (\n\t\t\t\t\t\t\t<span class={ThemeSwitchClass.label}>\n\t\t\t\t\t\t\t\t{isDark ? this.labelDark : this.labelLight}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : null\n\t\t\t\t\t\t}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/pages/Banner.js

@@ -8,6 +8,16 @@ class BannerPage extends HTMLElement {
 			<gov-button slot="button" href="#" color="secondary" type="solid" size="xl">Zjistit více</gov-button>
 			<img src="./assets/banner/image-xl.jpg" slot="image" width="1200" height="662" />
 		</gov-banner>
+		<br>
+		<gov-banner size="xl" text-color="dark" aria-labelledby="banner001">
+			<span slot="headline" id="banner001">Lorem ipsum dolor sit</span>
+			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="xl">Zjistit více</gov-button>
+			<picture slot="image">
+				<img src="./assets/banner/image-xl.jpg" width="1200" height="662" />
+			</picture>
+		</gov-banner>
+		<br><br>
 		<br><br>
 
 		<div style="max-width: 1152px;">

package/dist/collection/pages/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../../../src/pages/Banner.ts"],"names":[],"mappings":"AAAA,MAAM,UAAW,SAAQ,WAAW;IACnC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmQhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;AACjD,CAAC","sourcesContent":["class BannerPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>Size XL</h2>\n\t\t<gov-banner size=\"xl\" text-color=\"dark\" aria-labelledby=\"banner001\">\n\t\t\t<span slot=\"headline\" id=\"banner001\">Lorem ipsum dolor sit</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"xl\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-xl.jpg\" slot=\"image\" width=\"1200\" height=\"662\" />\n\t\t</gov-banner>\n\t\t<br><br>\n\n\t\t<div style=\"max-width: 1152px;\">\n\t\t<h2>Waves</h2>\n\t\t<h3>Size L</h3>\n\t\t<gov-banner size=\"l\" background=\"waves\" foreground=\"image\" aria-labelledby=\"banner002\">\n\t\t\t<span slot=\"headline\" id=\"banner002\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-l.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"waves\" foreground=\"logo\" aria-labelledby=\"banner003\">\n\t\t\t<span slot=\"headline\" id=\"banner003\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"waves\" foreground=\"icon\" aria-labelledby=\"banner004\">\n\t\t\t<span slot=\"headline\" id=\"banner004\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size M</h3>\n\t\t<gov-banner size=\"m\" background=\"waves\" foreground=\"image\" aria-labelledby=\"banner005\">\n\t\t\t<span slot=\"headline\" id=\"banner005\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-m.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"waves\" foreground=\"logo\" aria-labelledby=\"banner006\">\n\t\t\t<span slot=\"headline\" id=\"banner006\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"waves\" foreground=\"icon\" aria-labelledby=\"banner007\">\n\t\t\t<span slot=\"headline\" id=\"banner007\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size S</h3>\n\t\t<gov-banner size=\"s\" background=\"waves\" foreground=\"image\" aria-labelledby=\"banner008\">\n\t\t\t<span slot=\"headline\" id=\"banner008\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-s.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"waves\" foreground=\"logo\" aria-labelledby=\"banner009\">\n\t\t\t<span slot=\"headline\" id=\"banner009\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"waves\" foreground=\"icon\" aria-labelledby=\"banner010\">\n\t\t\t<span slot=\"headline\" id=\"banner010\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br><br>\n\n\t\t<h2>Stripes</h2>\n\t\t<h3>Size L</h3>\n\t\t<gov-banner size=\"l\" background=\"stripes\" foreground=\"image\" aria-labelledby=\"banner011\">\n\t\t\t<span slot=\"headline\" id=\"banner011\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-square.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"stripes\" foreground=\"logo\" aria-labelledby=\"banner012\">\n\t\t\t<span slot=\"headline\" id=\"banner012\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"stripes\" foreground=\"icon\" aria-labelledby=\"banner013\">\n\t\t\t<span slot=\"headline\" id=\"banner013\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size M</h3>\n\t\t<gov-banner size=\"m\" background=\"stripes\" foreground=\"image\" aria-labelledby=\"banner014\">\n\t\t\t<span slot=\"headline\" id=\"banner014\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-square.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"stripes\" foreground=\"logo\" aria-labelledby=\"banner015\">\n\t\t\t<span slot=\"headline\" id=\"banner015\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"stripes\" foreground=\"icon\" aria-labelledby=\"banner016\">\n\t\t\t<span slot=\"headline\" id=\"banner016\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size S</h3>\n\t\t<gov-banner size=\"s\" background=\"stripes\" foreground=\"image\" aria-labelledby=\"banner017\">\n\t\t\t<span slot=\"headline\" id=\"banner017\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-square.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"stripes\" foreground=\"logo\" aria-labelledby=\"banner018\">\n\t\t\t<span slot=\"headline\" id=\"banner018\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"stripes\" foreground=\"icon\" aria-labelledby=\"banner019\">\n\t\t\t<span slot=\"headline\" id=\"banner019\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br><br>\n\n\t\t<h2>Lines</h2>\n\t\t<h3>Size L</h3>\n\t\t<gov-banner size=\"l\" background=\"lines\" foreground=\"image\" aria-labelledby=\"banner020\">\n\t\t\t<span slot=\"headline\" id=\"banner020\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-l.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"lines\" foreground=\"logo\" aria-labelledby=\"banner021\">\n\t\t\t<span slot=\"headline\" id=\"banner021\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"lines\" foreground=\"icon\" aria-labelledby=\"banner022\">\n\t\t\t<span slot=\"headline\" id=\"banner022\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size M</h3>\n\t\t<gov-banner size=\"m\" background=\"lines\" foreground=\"image\" aria-labelledby=\"banner023\">\n\t\t\t<span slot=\"headline\" id=\"banner023\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-m.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"lines\" foreground=\"logo\" aria-labelledby=\"banner024\">\n\t\t\t<span slot=\"headline\" id=\"banner024\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"lines\" foreground=\"icon\" aria-labelledby=\"banner025\">\n\t\t\t<span slot=\"headline\" id=\"banner025\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size S</h3>\n\t\t<gov-banner size=\"s\" background=\"lines\" foreground=\"image\" aria-labelledby=\"banner026\">\n\t\t\t<span slot=\"headline\" id=\"banner026\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-s.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"lines\" foreground=\"logo\" aria-labelledby=\"banner027\">\n\t\t\t<span slot=\"headline\" id=\"banner027\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"lines\" foreground=\"icon\" aria-labelledby=\"banner028\">\n\t\t\t<span slot=\"headline\" id=\"banner028\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br><br>\n\n\t\t<h2>Simple</h2>\n\t\t<h3>Size L</h3>\n\t\t<gov-banner size=\"l\" background=\"simple\" foreground=\"image\" aria-labelledby=\"banner029\">\n\t\t\t<span slot=\"headline\" id=\"banner029\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-l.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"simple\" foreground=\"logo\" aria-labelledby=\"banner030\">\n\t\t\t<span slot=\"headline\" id=\"banner030\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"simple\" foreground=\"icon\" aria-labelledby=\"banner031\">\n\t\t\t<span slot=\"headline\" id=\"banner031\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size M</h3>\n\t\t<gov-banner size=\"m\" background=\"simple\" foreground=\"image\" aria-labelledby=\"banner032\">\n\t\t\t<span slot=\"headline\" id=\"banner032\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-m.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"simple\" foreground=\"logo\" aria-labelledby=\"banner033\">\n\t\t\t<span slot=\"headline\" id=\"banner033\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"simple\" foreground=\"icon\" aria-labelledby=\"banner034\">\n\t\t\t<span slot=\"headline\" id=\"banner034\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size S</h3>\n\t\t<gov-banner size=\"s\" background=\"simple\" foreground=\"image\" aria-labelledby=\"banner035\">\n\t\t\t<span slot=\"headline\" id=\"banner035\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-s.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"simple\" foreground=\"logo\" aria-labelledby=\"banner036\">\n\t\t\t<span slot=\"headline\" id=\"banner036\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"simple\" foreground=\"icon\" aria-labelledby=\"banner037\">\n\t\t\t<span slot=\"headline\" id=\"banner037\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t</div>\n\n\t\t`\n\t}\n}\n\nif (customElements.get(\"banner-page\") === undefined) {\n\tcustomElements.define(\"banner-page\", BannerPage)\n}\n"]}
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../../../src/pages/Banner.ts"],"names":[],"mappings":"AAAA,MAAM,UAAW,SAAQ,WAAW;IACnC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6QhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;AACjD,CAAC","sourcesContent":["class BannerPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>Size XL</h2>\n\t\t<gov-banner size=\"xl\" text-color=\"dark\" aria-labelledby=\"banner001\">\n\t\t\t<span slot=\"headline\" id=\"banner001\">Lorem ipsum dolor sit</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"xl\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-xl.jpg\" slot=\"image\" width=\"1200\" height=\"662\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"xl\" text-color=\"dark\" aria-labelledby=\"banner001\">\n\t\t\t<span slot=\"headline\" id=\"banner001\">Lorem ipsum dolor sit</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"xl\">Zjistit více</gov-button>\n\t\t\t<picture slot=\"image\">\n\t\t\t\t<img src=\"./assets/banner/image-xl.jpg\" width=\"1200\" height=\"662\" />\n\t\t\t</picture>\n\t\t</gov-banner>\n\t\t<br><br>\n\t\t<br><br>\n\n\t\t<div style=\"max-width: 1152px;\">\n\t\t<h2>Waves</h2>\n\t\t<h3>Size L</h3>\n\t\t<gov-banner size=\"l\" background=\"waves\" foreground=\"image\" aria-labelledby=\"banner002\">\n\t\t\t<span slot=\"headline\" id=\"banner002\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-l.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"waves\" foreground=\"logo\" aria-labelledby=\"banner003\">\n\t\t\t<span slot=\"headline\" id=\"banner003\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"waves\" foreground=\"icon\" aria-labelledby=\"banner004\">\n\t\t\t<span slot=\"headline\" id=\"banner004\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size M</h3>\n\t\t<gov-banner size=\"m\" background=\"waves\" foreground=\"image\" aria-labelledby=\"banner005\">\n\t\t\t<span slot=\"headline\" id=\"banner005\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-m.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"waves\" foreground=\"logo\" aria-labelledby=\"banner006\">\n\t\t\t<span slot=\"headline\" id=\"banner006\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"waves\" foreground=\"icon\" aria-labelledby=\"banner007\">\n\t\t\t<span slot=\"headline\" id=\"banner007\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size S</h3>\n\t\t<gov-banner size=\"s\" background=\"waves\" foreground=\"image\" aria-labelledby=\"banner008\">\n\t\t\t<span slot=\"headline\" id=\"banner008\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-s.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"waves\" foreground=\"logo\" aria-labelledby=\"banner009\">\n\t\t\t<span slot=\"headline\" id=\"banner009\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"waves\" foreground=\"icon\" aria-labelledby=\"banner010\">\n\t\t\t<span slot=\"headline\" id=\"banner010\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br><br>\n\n\t\t<h2>Stripes</h2>\n\t\t<h3>Size L</h3>\n\t\t<gov-banner size=\"l\" background=\"stripes\" foreground=\"image\" aria-labelledby=\"banner011\">\n\t\t\t<span slot=\"headline\" id=\"banner011\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-square.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"stripes\" foreground=\"logo\" aria-labelledby=\"banner012\">\n\t\t\t<span slot=\"headline\" id=\"banner012\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"stripes\" foreground=\"icon\" aria-labelledby=\"banner013\">\n\t\t\t<span slot=\"headline\" id=\"banner013\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size M</h3>\n\t\t<gov-banner size=\"m\" background=\"stripes\" foreground=\"image\" aria-labelledby=\"banner014\">\n\t\t\t<span slot=\"headline\" id=\"banner014\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-square.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"stripes\" foreground=\"logo\" aria-labelledby=\"banner015\">\n\t\t\t<span slot=\"headline\" id=\"banner015\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"stripes\" foreground=\"icon\" aria-labelledby=\"banner016\">\n\t\t\t<span slot=\"headline\" id=\"banner016\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size S</h3>\n\t\t<gov-banner size=\"s\" background=\"stripes\" foreground=\"image\" aria-labelledby=\"banner017\">\n\t\t\t<span slot=\"headline\" id=\"banner017\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-square.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"stripes\" foreground=\"logo\" aria-labelledby=\"banner018\">\n\t\t\t<span slot=\"headline\" id=\"banner018\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"stripes\" foreground=\"icon\" aria-labelledby=\"banner019\">\n\t\t\t<span slot=\"headline\" id=\"banner019\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br><br>\n\n\t\t<h2>Lines</h2>\n\t\t<h3>Size L</h3>\n\t\t<gov-banner size=\"l\" background=\"lines\" foreground=\"image\" aria-labelledby=\"banner020\">\n\t\t\t<span slot=\"headline\" id=\"banner020\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-l.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"lines\" foreground=\"logo\" aria-labelledby=\"banner021\">\n\t\t\t<span slot=\"headline\" id=\"banner021\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"lines\" foreground=\"icon\" aria-labelledby=\"banner022\">\n\t\t\t<span slot=\"headline\" id=\"banner022\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size M</h3>\n\t\t<gov-banner size=\"m\" background=\"lines\" foreground=\"image\" aria-labelledby=\"banner023\">\n\t\t\t<span slot=\"headline\" id=\"banner023\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-m.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"lines\" foreground=\"logo\" aria-labelledby=\"banner024\">\n\t\t\t<span slot=\"headline\" id=\"banner024\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"lines\" foreground=\"icon\" aria-labelledby=\"banner025\">\n\t\t\t<span slot=\"headline\" id=\"banner025\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size S</h3>\n\t\t<gov-banner size=\"s\" background=\"lines\" foreground=\"image\" aria-labelledby=\"banner026\">\n\t\t\t<span slot=\"headline\" id=\"banner026\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-s.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"lines\" foreground=\"logo\" aria-labelledby=\"banner027\">\n\t\t\t<span slot=\"headline\" id=\"banner027\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"lines\" foreground=\"icon\" aria-labelledby=\"banner028\">\n\t\t\t<span slot=\"headline\" id=\"banner028\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br><br>\n\n\t\t<h2>Simple</h2>\n\t\t<h3>Size L</h3>\n\t\t<gov-banner size=\"l\" background=\"simple\" foreground=\"image\" aria-labelledby=\"banner029\">\n\t\t\t<span slot=\"headline\" id=\"banner029\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-l.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"simple\" foreground=\"logo\" aria-labelledby=\"banner030\">\n\t\t\t<span slot=\"headline\" id=\"banner030\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"simple\" foreground=\"icon\" aria-labelledby=\"banner031\">\n\t\t\t<span slot=\"headline\" id=\"banner031\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size M</h3>\n\t\t<gov-banner size=\"m\" background=\"simple\" foreground=\"image\" aria-labelledby=\"banner032\">\n\t\t\t<span slot=\"headline\" id=\"banner032\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-m.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"simple\" foreground=\"logo\" aria-labelledby=\"banner033\">\n\t\t\t<span slot=\"headline\" id=\"banner033\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"simple\" foreground=\"icon\" aria-labelledby=\"banner034\">\n\t\t\t<span slot=\"headline\" id=\"banner034\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size S</h3>\n\t\t<gov-banner size=\"s\" background=\"simple\" foreground=\"image\" aria-labelledby=\"banner035\">\n\t\t\t<span slot=\"headline\" id=\"banner035\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-s.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"simple\" foreground=\"logo\" aria-labelledby=\"banner036\">\n\t\t\t<span slot=\"headline\" id=\"banner036\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"simple\" foreground=\"icon\" aria-labelledby=\"banner037\">\n\t\t\t<span slot=\"headline\" id=\"banner037\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t</div>\n\n\t\t`\n\t}\n}\n\nif (customElements.get(\"banner-page\") === undefined) {\n\tcustomElements.define(\"banner-page\", BannerPage)\n}\n"]}

package/dist/collection/pages/Button.js

@@ -181,6 +181,24 @@ class ButtonPage extends HTMLElement {
 					<gov-icon slot="icon-end" name="search"></gov-icon>
 				</gov-button>
 			</div>
+			<gov-button color="primary" type="solid" expanded="true" loading="false">
+				<gov-icon slot="icon-start" name="search"></gov-icon>
+				Expanded
+				<gov-icon slot="icon-end" name="search"></gov-icon>
+			</gov-button>
+			<br>
+			<h4>Primary - solid - expanded mobile</h4>
+			<gov-button color="primary" type="solid" expanded-mobile="true" loading="false">
+				<gov-icon slot="icon-start" name="search"></gov-icon>
+				Expanded
+				<gov-icon slot="icon-end" name="search"></gov-icon>
+			</gov-button>
+			<br>
+			<gov-button color="primary" type="solid" expanded-mobile="true" loading="true">
+				<gov-icon slot="icon-start" name="search"></gov-icon>
+				Expanded
+				<gov-icon slot="icon-end" name="search"></gov-icon>
+			</gov-button>
 
 			<h4>Primary - outlined</h4>
 			<div class="container-view">