npm - @oiz/stzh-components - Versions diffs - 3.0.0-beta5 → 3.0.0 - Mend

@oiz/stzh-components 3.0.0-beta5 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (450) hide show

package/dist/collection/components/stzh-checkboxgroup/stzh-checkboxgroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-checkboxgroup.js","sourceRoot":"","sources":["../../../../src/components/stzh-checkboxgroup/stzh-checkboxgroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Host,\n Component,\n Prop,\n Element,\n Watch,\n Event,\n h,\n Listen,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhCheckboxChangeEvent, StzhCheckboxgroupChangeEvent } from \"../../index\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxgroupCounter = 0;\n\n/*\n @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-checkboxgroup\",\n styleUrl: \"stzh-checkboxgroup.scss\",\n scoped: true\n})\nexport class StzhCheckboxgroup {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* The name of the input checkbox elements /\n @Prop({ reflect: true }) name: string;\n\n /* The legend /\n @Prop() legend: string;\n\n /* Hide legend to show only for screenreaders /\n @Prop({ reflect: true }) hideLegend: boolean = false;\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form ot hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* The selected values of the checkboxgroup /\n @Prop({ mutable: true }) value: string[] \| string = \"\";\n private _value: string[] = [];\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string[] = [];\n\n /* Direction /\n @Prop({ reflect: true }) direction: \"vertical\" \| \"horizontal\" = \"vertical\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Current checked checkbox elements (readonly) /\n @Prop() checkedCheckbox: HTMLStzhCheckboxElement[] \| null = null;\n\n /* Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid) /\n @Prop() preventUpdateProperties: string[] \| string = [];\n private _preventUpdateProperties: string[] = [];\n\n /* Host element /\n @Element() element: HTMLElement;\n\n @Watch(\"name\")\n watchName(newValue: string) {\n this.updateCheckboxesProperty(\"name\", newValue);\n }\n\n @Watch(\"disabled\")\n watchDisabled(newValue: boolean) {\n this.updateCheckboxesProperty(\"disabled\", newValue);\n }\n\n @Watch(\"invalid\")\n watchInvalid(newValue: boolean) {\n this.updateCheckboxesProperty(\"invalid\", newValue);\n }\n\n @Watch(\"hideOptional\")\n watchHideOptional(newValue: boolean) {\n this.updateCheckboxesProperty(\"hideOptional\", newValue)\n }\n\n @Watch(\"value\")\n watchValue(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n this._value = JSON.parse(newValue);\n } else {\n this._value = newValue;\n }\n\n if (JSON.stringify(this._value) !== JSON.stringify(this.value)) {\n this.value = this._value;\n }\n\n this.updateCheckedCheckboxByValue(this._value);\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n @Watch(\"preventUpdateProperties\")\n preventUpdatePropertiesWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n this._preventUpdateProperties = JSON.parse(newValue);\n } else {\n this._preventUpdateProperties = newValue;\n }\n }\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhCheckboxgroupChangeEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Listen(\"stzhChange\", {capture: true})\n onChange(event: CustomEvent<StzhCheckboxChangeEvent>) {\n if (event.detail.component === \"stzh-checkbox\") {\n if (event.detail.checked) {\n this._value.push(event.detail.value);\n } else {\n this._value = this._value.filter(value => value !== event.detail.value);\n }\n // stop propagating checkbox change event otherwise angular control value accessor won't work\n event.stopPropagation();\n this.value = this._value;\n this.stzhChange.emit({\n component: \"stzh-checkboxgroup\",\n value: this._value,\n });\n }\n }\n\n /* Checkbox elements */\n private checkboxes: HTMLStzhCheckboxElement[];\n private checkboxgroupId: string;\n private observer: MutationObserver;\n\n private updateCheckboxesProperty(prop: string, value: any) {\n this.checkboxes.forEach((checkbox: HTMLStzhCheckboxElement) => {\n if (prop === \"name\" \|\| (this._preventUpdateProperties.indexOf(prop) === -1)) {\n checkbox[camelCase(prop)] = value;\n }\n });\n }\n\n private updateCheckedCheckboxByValue(value: string[]) {\n this.checkedCheckbox = this.checkboxes.filter(checkbox => value.indexOf(checkbox.value) > -1);\n this.checkboxes.forEach(checkbox => checkbox.checked = value.indexOf(checkbox.value) > -1);\n }\n\n private handleReset = async () => {\n this.value = [...this.defaultValue];\n }\n\n private init = () => {\n this.checkboxes = Array.from(this.element.querySelectorAll(\"stzh-checkbox\"));\n this.updateCheckboxesProperty(\"a11y-describedby\", `${this.checkboxgroupId}-description`);\n\n this.watchValue(this.value);\n this.watchName(this.name);\n this.watchDisabled(this.disabled);\n this.watchInvalid(this.invalid);\n this.watchHideOptional(this.hideOptional);\n }\n\n async componentWillLoad() {\n this.checkboxgroupId = `stzh-checkboxgroup-${checkboxgroupCounter++}`;\n this.errorWatcher(this.error);\n this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'checkboxgroup');\n }\n }\n\n componentShouldUpdate(_newValue, _oldValue, prop: string) {\n return prop !== \"checkedCheckbox\";\n }\n\n componentDidRender() {\n this.init();\n }\n\n componentDidLoad() {\n this.defaultValue = this.defaultValue.length > 0 ? this.defaultValue : [...this._value];\n }\n\n connectedCallback() {\n if (!this.value.length) {\n this.checkboxes = Array.from(this.element.querySelectorAll(\"stzh-checkbox\"));\n\n // try to find checkboxes that might have checked set to true\n this.value = this.checkboxes\n .filter(checkbox => checkbox.checked)\n .map(checkbox => checkbox.value);\n }\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n const descriptionUsed = hasSlot(this.element, 'description') \|\| !!this.description;\n const descriptionLongUsed = hasSlot(this.element, 'description-long') \|\| !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, 'error') \|\| this._error?.length > 0;\n\n const classes = {\n \"stzh-checkboxgroup\": true,\n \"stzh-checkboxgroup--has-description\": descriptionUsed,\n \"stzh-checkboxgroup--has-description-long\": descriptionLongUsed,\n \"stzh-checkboxgroup--has-error\": errorUsed,\n \"stzh-checkboxgroup--is-disabled\": this.disabled,\n \"stzh-checkboxgroup--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-checkboxgroup--hide-legend\": this.hideLegend,\n [`stzh-checkboxgroup--direction-${this.direction}`]: !!this.direction\n };\n\n return (\n <Host is-invalid={this.invalid \|\| errorUsed}>\n <fieldset class={classes}>\n {this.legend &&\n <legend class=\"stzh-checkboxgroup__legend\">\n {this.legend}\n </legend>\n }\n <div class=\"stzh-checkboxgroup__fields\">\n <slot></slot>\n </div>\n <StzhInputDescription\n classPrefix=\"stzh-checkboxgroup\"\n id={`${this.checkboxgroupId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n </fieldset>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-checkboxgroup.js","sourceRoot":"","sources":["../../../../src/components/stzh-checkboxgroup/stzh-checkboxgroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,EACL,CAAC,EACD,MAAM,GAEP,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAE5E,IAAI,oBAAoB,GAAG,CAAC,CAAC;AAE7B;;;;;;GAMG;AAMH,MAAM,OAAO,iBAAiB;;IAwBpB,WAAM,GAAa,EAAE,CAAC;IA0BtB,6BAAwB,GAAa,EAAE,CAAC;IAmHxC,gBAAW,GAAG,KAAK,IAAI,EAAE;MAC/B,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;IACtC,CAAC,CAAA;IAEO,SAAI,GAAG,GAAG,EAAE;MAClB,oBAAoB;MACpB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;MAC7E,IAAI,CAAC,wBAAwB,CAAC,kBAAkB,EAAE,GAAG,IAAI,CAAC,eAAe,cAAc,CAAC,CAAC;MACzF,IAAI,CAAC,wBAAwB,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;MAEzE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAC5B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;MAClC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5C,CAAC,CAAA;;oBA9K4C,KAAK;;;sBASH,KAAK;mBAGR,KAAK;wBAGA,KAAK;iBAGF,EAAE;wBAIJ,EAAE;qBAGY,UAAU;;;;;2BAgBd,IAAI;mCAGX,EAAE;;EAOvD,SAAS,CAAC,QAAgB;IACxB,IAAI,CAAC,wBAAwB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;EAClD,CAAC;EAGD,aAAa,CAAC,QAAiB;IAC7B,IAAI,CAAC,wBAAwB,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;EACtD,CAAC;EAGD,iBAAiB,CAAC,QAAiB;IACjC,IAAI,CAAC,wBAAwB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAA;EACzD,CAAC;EAGD,UAAU,CAAC,QAA2B;IACpC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACpC;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;KACxB;IAED,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;MAC9D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;KAC1B;IAED,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EACjD,CAAC;EAGD,YAAY,CAAC,QAA2B;IACtC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI;QACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;OACpC;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,QAAQ,EAAE;UACZ,IAAI,CAAC,MAAM,GAAG,CAAC,QAAQ,CAAC,CAAC;SAC1B;aAAM;UACL,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SAClB;OACF;KACF;SAAM,IAAI,QAAQ,EAAE;MACnB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;KACxB;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;KAClB;EACH,CAAC;EAGD,8BAA8B,CAAC,QAA2B;IACxD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACtD;SAAM;MACL,IAAI,CAAC,wBAAwB,GAAG,QAAQ,CAAC;KAC1C;EACH,CAAC;EAMD,aAAa,CAAC,KAAY;IACxB,IAAK,KAAK,CAAC,MAAsB,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;MACxD,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,WAAW,EAAE,CAAC;MACrB,CAAC,CAAC,CAAC;KACJ;EACH,CAAC;EAGD,QAAQ,CAAC,KAA2C;IAClD,IAAI,KAAK,CAAC,MAAM,CAAC,SAAS,KAAK,eAAe,EAAE;MAC9C,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;QACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;OACtC;WAAM;QACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;OACzE;MACD,6FAA6F;MAC7F,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;MACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,oBAAoB;QAC/B,KAAK,EAAE,IAAI,CAAC,MAAM;OACnB,CAAC,CAAC;KACJ;EACH,CAAC;EAED,IAAY,SAAS;;IACnB,OAAO,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,IAAG,CAAC,CAAC;EACnE,CAAC;EAOO,wBAAwB,CAAC,IAAY,EAAE,KAAU;IACvD,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,QAAiC,EAAE,EAAE;MAC5D,IAAI,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;QAC3E,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC;OACnC;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAEO,4BAA4B,CAAC,KAAe;IAClD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC9F,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAC7F,CAAC;EAkBD,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,eAAe,GAAG,sBAAsB,oBAAoB,EAAE,EAAE,CAAC;IACtE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,8BAA8B,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;IAElE,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;KACxG;EACH,CAAC;EAED,qBAAqB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAY;IACtD,OAAO,IAAI,KAAK,iBAAiB,CAAC;EACpC,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,IAAI,EAAE,CAAC;EACd,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;EAC1F,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;MACtB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;MAE7E,6DAA6D;MAC7D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU;SACzB,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC;SACpC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;KACpC;IAED,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;EACH,CAAC;EAED,MAAM;IACJ,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IACnF,MAAM,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;IAEhG,MAAM,OAAO,GAAG;MACd,oBAAoB,EAAE,IAAI;MAC1B,qCAAqC,EAAE,eAAe;MACtD,0CAA0C,EAAE,mBAAmB;MAC/D,+BAA+B,EAAE,IAAI,CAAC,SAAS;MAC/C,iCAAiC,EAAE,IAAI,CAAC,QAAQ;MAChD,gCAAgC,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS;MAChE,iCAAiC,EAAE,IAAI,CAAC,UAAU;MAClD,CAAC,iCAAiC,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS;KACtE,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,kBAAa,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS;MAC9C,gBAAU,KAAK,EAAE,OAAO;QACrB,IAAI,CAAC,MAAM;UACV,cAAQ,KAAK,EAAC,4BAA4B,IACvC,IAAI,CAAC,MAAM,CACL;QAEX,WAAK,KAAK,EAAC,4BAA4B;UACrC,eAAa,CACT;QACN,EAAC,oBAAoB,IACnB,WAAW,EAAC,oBAAoB,EAChC,EAAE,EAAE,GAAG,IAAI,CAAC,eAAe,cAAc,EACzC,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,mBAAmB,EAAE,mBAAmB,EACxC,mBAAmB,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,GACnE,CACO,CACN,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Host,\n Component,\n Prop,\n Element,\n Watch,\n Event,\n h,\n Listen,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhCheckboxChangeEvent, StzhCheckboxgroupChangeEvent } from \"../../index\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxgroupCounter = 0;\n\n/*\n @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-checkboxgroup\",\n styleUrl: \"stzh-checkboxgroup.scss\",\n scoped: true\n})\nexport class StzhCheckboxgroup {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* The name of the input checkbox elements /\n @Prop({ reflect: true }) name: string;\n\n /* The legend /\n @Prop() legend: string;\n\n /* Hide legend to show only for screenreaders /\n @Prop({ reflect: true }) hideLegend: boolean = false;\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form ot hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* The selected values of the checkboxgroup /\n @Prop({ mutable: true }) value: string[] \| string = \"\";\n private _value: string[] = [];\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string[] = [];\n\n /* Direction /\n @Prop({ reflect: true }) direction: \"vertical\" \| \"horizontal\" = \"vertical\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Current checked checkbox elements (readonly) /\n @Prop() checkedCheckbox: HTMLStzhCheckboxElement[] \| null = null;\n\n /* Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid) /\n @Prop() preventUpdateProperties: string[] \| string = [];\n private _preventUpdateProperties: string[] = [];\n\n /* Host element /\n @Element() element: HTMLElement;\n\n @Watch(\"name\")\n watchName(newValue: string) {\n this.updateCheckboxesProperty(\"name\", newValue);\n }\n\n @Watch(\"disabled\")\n watchDisabled(newValue: boolean) {\n this.updateCheckboxesProperty(\"disabled\", newValue);\n }\n\n @Watch(\"hideOptional\")\n watchHideOptional(newValue: boolean) {\n this.updateCheckboxesProperty(\"hideOptional\", newValue)\n }\n\n @Watch(\"value\")\n watchValue(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n this._value = JSON.parse(newValue);\n } else {\n this._value = newValue;\n }\n\n if (JSON.stringify(this._value) !== JSON.stringify(this.value)) {\n this.value = this._value;\n }\n\n this.updateCheckedCheckboxByValue(this._value);\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n @Watch(\"preventUpdateProperties\")\n preventUpdatePropertiesWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n this._preventUpdateProperties = JSON.parse(newValue);\n } else {\n this._preventUpdateProperties = newValue;\n }\n }\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhCheckboxgroupChangeEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Listen(\"stzhChange\", {capture: true})\n onChange(event: CustomEvent<StzhCheckboxChangeEvent>) {\n if (event.detail.component === \"stzh-checkbox\") {\n if (event.detail.checked) {\n this._value.push(event.detail.value);\n } else {\n this._value = this._value.filter(value => value !== event.detail.value);\n }\n // stop propagating checkbox change event otherwise angular control value accessor won't work\n event.stopPropagation();\n this.value = this._value;\n this.stzhChange.emit({\n component: \"stzh-checkboxgroup\",\n value: this._value,\n });\n }\n }\n\n private get errorUsed() {\n return hasSlot(this.element, 'error') \|\| this._error?.length > 0;\n }\n\n /* Checkbox elements */\n private checkboxes: HTMLStzhCheckboxElement[];\n private checkboxgroupId: string;\n private observer: MutationObserver;\n\n private updateCheckboxesProperty(prop: string, value: any) {\n this.checkboxes.forEach((checkbox: HTMLStzhCheckboxElement) => {\n if (prop === \"name\" \|\| (this._preventUpdateProperties.indexOf(prop) === -1)) {\n checkbox[camelCase(prop)] = value;\n }\n });\n }\n\n private updateCheckedCheckboxByValue(value: string[]) {\n this.checkedCheckbox = this.checkboxes.filter(checkbox => value.indexOf(checkbox.value) > -1);\n this.checkboxes.forEach(checkbox => checkbox.checked = value.indexOf(checkbox.value) > -1);\n }\n\n private handleReset = async () => {\n this.value = [...this.defaultValue];\n }\n\n private init = () => {\n // update checkboxes\n this.checkboxes = Array.from(this.element.querySelectorAll(\"stzh-checkbox\"));\n this.updateCheckboxesProperty(\"a11y-describedby\", `${this.checkboxgroupId}-description`);\n this.updateCheckboxesProperty(\"invalid\", this.invalid \|\| this.errorUsed);\n\n this.watchValue(this.value);\n this.watchName(this.name);\n this.watchDisabled(this.disabled);\n this.watchHideOptional(this.hideOptional);\n }\n\n async componentWillLoad() {\n this.checkboxgroupId = `stzh-checkboxgroup-${checkboxgroupCounter++}`;\n this.errorWatcher(this.error);\n this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'checkboxgroup');\n }\n }\n\n componentShouldUpdate(_newValue, _oldValue, prop: string) {\n return prop !== \"checkedCheckbox\";\n }\n\n componentDidRender() {\n this.init();\n }\n\n componentDidLoad() {\n this.defaultValue = this.defaultValue.length > 0 ? this.defaultValue : [...this._value];\n }\n\n connectedCallback() {\n if (!this.value.length) {\n this.checkboxes = Array.from(this.element.querySelectorAll(\"stzh-checkbox\"));\n\n // try to find checkboxes that might have checked set to true\n this.value = this.checkboxes\n .filter(checkbox => checkbox.checked)\n .map(checkbox => checkbox.value);\n }\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n const descriptionUsed = hasSlot(this.element, 'description') \|\| !!this.description;\n const descriptionLongUsed = hasSlot(this.element, 'description-long') \|\| !!this.descriptionLong;\n\n const classes = {\n \"stzh-checkboxgroup\": true,\n \"stzh-checkboxgroup--has-description\": descriptionUsed,\n \"stzh-checkboxgroup--has-description-long\": descriptionLongUsed,\n \"stzh-checkboxgroup--has-error\": this.errorUsed,\n \"stzh-checkboxgroup--is-disabled\": this.disabled,\n \"stzh-checkboxgroup--is-invalid\": this.invalid \|\| this.errorUsed,\n \"stzh-checkboxgroup--hide-legend\": this.hideLegend,\n [`stzh-checkboxgroup--direction-${this.direction}`]: !!this.direction\n };\n\n return (\n <Host is-invalid={this.invalid \|\| this.errorUsed}>\n <fieldset class={classes}>\n {this.legend &&\n <legend class=\"stzh-checkboxgroup__legend\">\n {this.legend}\n </legend>\n }\n <div class=\"stzh-checkboxgroup__fields\">\n <slot></slot>\n </div>\n <StzhInputDescription\n classPrefix=\"stzh-checkboxgroup\"\n id={`${this.checkboxgroupId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n </fieldset>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stzh-checkboxgroup/stzh-checkboxgroup.stories.js CHANGED Viewed

@@ -48,3 +48,12 @@ export const Default = {
   }
 };
+export const WithError = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    value: '["UVZ"]',
+    name: 'department[]',
+    legend: 'Department options',
+    error: 'Error'
+  }
+};

package/dist/collection/components/stzh-chip/stzh-chip.css CHANGED Viewed

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-chipgroup/stzh-chipgroup.css CHANGED Viewed

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-chipselect/stzh-chipselect.css CHANGED Viewed

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-chipselect/stzh-chipselect.js CHANGED Viewed

@@ -200,7 +200,9 @@ export class StzhChipselect {
           "stzh-chipselect__chip": true,
           "is-focused": this.activeFocusOptionIndex === index
         }, label: data.label, counter: data.counter, icon: data.icon, type: data.type, inverted: data.inverted, variant: data.variant, size: data.size || "small", disabled: this.disabled || data.disabled, active: this._value.includes(data.value)
+          || (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === ""))
           || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === ""))), "aria-selected": this._value.includes(data.value)
+          || (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === ""))
           || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === "")))
           ? "true" : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))), h(StzhInputDescription, { classPrefix: "stzh-chipselect", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
   }

package/dist/collection/components/stzh-chipselect/stzh-chipselect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-chipselect.js","sourceRoot":"","sources":["../../../../src/components/stzh-chipselect/stzh-chipselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n State,\n Fragment,\n Listen,\n} from \"@stencil/core\";\n\nimport {\n StzhChipselectItem,\n StzhChipselectChangeEvent,\n // StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet chipselectCounter = 0;\n\n/*\n @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-chipselect\",\n styleUrl: \"stzh-chipselect.scss\",\n scoped: true\n})\nexport class StzhChipselect {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* The list of chips /\n @Prop() data: string \| StzhChipselectItem[] = [];\n private _data: StzhChipselectItem[] = [];\n // private _dataDropdown: any[] = [];\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label is hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Multiple /\n @Prop({ mutable: true }) multiple: boolean = false;\n\n /* Value /\n @Prop({ mutable: true }) value: string \| string[] = \"\";\n private _value: string[] = [];\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string \| string[] = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Whether all chips are disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form ot hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @State() activeFocusOptionIndex: number = 0;\n\n @Element() element: HTMLStzhChipselectElement;\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._value = JSON.parse(newValue);\n } catch(ex) {\n this._value = newValue ? [newValue] : [];\n }\n } else {\n this._value = newValue ? newValue : [];\n }\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: StzhChipselectItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n } else {\n this._data = newValue;\n }\n\n // this._dataDropdown = this._data.map((data) => {\n // return {\n // text: data.counter\n // ? `${data.label} (${data.counter})`\n // : data.label,\n // value: data.value\n // }\n // });\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n private id: string;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => this.renderPromiseResolve = resolve);\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // });\n }\n\n private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n if (this.multiple) {\n if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n this.value = [];\n } else if (data.value !== \"\") {\n this.value = this._value.includes(data.value)\n ? this._value.filter(value => value !== data.value)\n : [...this._value, data.value];\n }\n } else {\n this.value = [data.value]\n }\n\n this.activeFocusOptionIndex = index;\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.multiple ? this._value[0] : this._value\n })\n }\n\n // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n // this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n // this.activeFocusOptionIndex = this._data.findIndex(data => {\n // return data.value === this.value;\n // });\n\n // await this.waitForNextRender();\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // })\n // }\n\n private handleKeydown = (event: KeyboardEvent) => {\n let newActiveIndex: number = null;\n const activeOptionIndex = this.activeFocusOptionIndex;\n\n if (event.key === \"ArrowUp\" \|\| event.key === \"ArrowLeft\") {\n event.preventDefault();\n\n if (activeOptionIndex > 0) {\n newActiveIndex = activeOptionIndex - 1;\n }\n } else if (event.key === \"ArrowDown\" \|\| event.key === \"ArrowRight\") {\n event.preventDefault();\n\n if (activeOptionIndex < this._data.length - 1) {\n newActiveIndex = activeOptionIndex + 1;\n }\n } else if (event.key === \" \" \|\| event.key === \"Enter\") {\n event.preventDefault();\n this.value = this._data[activeOptionIndex].value;\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value\n });\n }\n\n if (newActiveIndex !== null) {\n this.activeFocusOptionIndex = newActiveIndex;\n }\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n this.dataWatcher(this.data);\n this.errorWatcher(this.error);\n this.valueWatcher(this.value);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n }\n }\n\n render() {\n const descriptionUsed = !!this.description;\n const descriptionLongUsed = !!this.descriptionLong;\n const errorUsed = !!this.error;\n\n const classes = {\n \"stzh-chipselect\": true,\n \"stzh-chipselect--has-description\": descriptionUsed,\n \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n \"stzh-chipselect--has-error\": errorUsed,\n \"stzh-chipselect--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-chipselect--is-disabled\": this.disabled,\n \"stzh-chipselect--is-required\": this.required,\n \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n };\n\n return (\n <Host is-invalid={this.invalid \|\| errorUsed}>\n <div class={classes}>\n {this.multiple\n ?\n <Fragment>\n {this._value.map((value) =>\n <input type=\"hidden\" name={this.name} value={value} />\n )}\n </Fragment>\n :\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n />\n }\n\n <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional &&\n <span class=\"stzh-chipselect__marker\">\n <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker\n }\n </span>\n <span class=\"stzh-chipselect__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </label>\n\n {this._data.length > 0 &&\n <Fragment>\n <div\n id={this.id}\n class=\"stzh-chipselect__chips\"\n role=\"listbox\"\n tabindex=\"0\"\n aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n onKeyDown={this.handleKeydown}\n >\n {this._data.map((data, index) => (\n <stzh-chip\n role=\"option\"\n class={{\n \"stzh-chipselect__chip\": true,\n \"is-focused\": this.activeFocusOptionIndex === index\n }}\n label={data.label}\n counter={data.counter}\n icon={data.icon}\n type={data.type}\n inverted={data.inverted}\n variant={data.variant}\n size={data.size \|\| \"small\"}\n disabled={this.disabled \|\| data.disabled}\n active={\n this._value.includes(data.value)\n \|\| (!data.value && this.multiple && (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n }\n aria-selected={\n this._value.includes(data.value)\n \|\| (!data.value && this.multiple && (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n ? \"true\" : \"false\"\n }\n id={`${this.id}-option-${index}`}\n a11yTabindex=\"-1\"\n onClick={() => this.handleChipClick(data, index)}\n ></stzh-chip>\n ))}\n </div>\n\n <StzhInputDescription\n classPrefix=\"stzh-chipselect\"\n id={`${this.id}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n\n {/ <stzh-dropdown\n class=\"stzh-chipselect__dropdown\"\n multiple={this.multiple}\n disabled={this.disabled}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n required={this.required}\n invalid={this.invalid}\n items={[this.value]}\n label={this.label}\n labelHidden={this.labelHidden}\n options={this._dataDropdown}\n hideOptional={this.hideOptional}\n onStzhChange={this.handleDropdownChange}\n ></stzh-dropdown> */}\n </Fragment>\n }\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-chipselect.js","sourceRoot":"","sources":["../../../../src/components/stzh-chipselect/stzh-chipselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n State,\n Fragment,\n Listen,\n} from \"@stencil/core\";\n\nimport {\n StzhChipselectItem,\n StzhChipselectChangeEvent,\n // StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet chipselectCounter = 0;\n\n/*\n @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-chipselect\",\n styleUrl: \"stzh-chipselect.scss\",\n scoped: true\n})\nexport class StzhChipselect {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* The list of chips /\n @Prop() data: string \| StzhChipselectItem[] = [];\n private _data: StzhChipselectItem[] = [];\n // private _dataDropdown: any[] = [];\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label is hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Multiple /\n @Prop({ mutable: true }) multiple: boolean = false;\n\n /* Value /\n @Prop({ mutable: true }) value: string \| string[] = \"\";\n private _value: string[] = [];\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string \| string[] = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Whether all chips are disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form ot hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @State() activeFocusOptionIndex: number = 0;\n\n @Element() element: HTMLStzhChipselectElement;\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._value = JSON.parse(newValue);\n } catch(ex) {\n this._value = newValue ? [newValue] : [];\n }\n } else {\n this._value = newValue ? newValue : [];\n }\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: StzhChipselectItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n } else {\n this._data = newValue;\n }\n\n // this._dataDropdown = this._data.map((data) => {\n // return {\n // text: data.counter\n // ? `${data.label} (${data.counter})`\n // : data.label,\n // value: data.value\n // }\n // });\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n private id: string;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => this.renderPromiseResolve = resolve);\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // });\n }\n\n private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n if (this.multiple) {\n if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n this.value = [];\n } else if (data.value !== \"\") {\n this.value = this._value.includes(data.value)\n ? this._value.filter(value => value !== data.value)\n : [...this._value, data.value];\n }\n } else {\n this.value = [data.value]\n }\n\n this.activeFocusOptionIndex = index;\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.multiple ? this._value[0] : this._value\n })\n }\n\n // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n // this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n // this.activeFocusOptionIndex = this._data.findIndex(data => {\n // return data.value === this.value;\n // });\n\n // await this.waitForNextRender();\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // })\n // }\n\n private handleKeydown = (event: KeyboardEvent) => {\n let newActiveIndex: number = null;\n const activeOptionIndex = this.activeFocusOptionIndex;\n\n if (event.key === \"ArrowUp\" \|\| event.key === \"ArrowLeft\") {\n event.preventDefault();\n\n if (activeOptionIndex > 0) {\n newActiveIndex = activeOptionIndex - 1;\n }\n } else if (event.key === \"ArrowDown\" \|\| event.key === \"ArrowRight\") {\n event.preventDefault();\n\n if (activeOptionIndex < this._data.length - 1) {\n newActiveIndex = activeOptionIndex + 1;\n }\n } else if (event.key === \" \" \|\| event.key === \"Enter\") {\n event.preventDefault();\n this.value = this._data[activeOptionIndex].value;\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value\n });\n }\n\n if (newActiveIndex !== null) {\n this.activeFocusOptionIndex = newActiveIndex;\n }\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n this.dataWatcher(this.data);\n this.errorWatcher(this.error);\n this.valueWatcher(this.value);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n }\n }\n\n render() {\n const descriptionUsed = !!this.description;\n const descriptionLongUsed = !!this.descriptionLong;\n const errorUsed = !!this.error;\n\n const classes = {\n \"stzh-chipselect\": true,\n \"stzh-chipselect--has-description\": descriptionUsed,\n \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n \"stzh-chipselect--has-error\": errorUsed,\n \"stzh-chipselect--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-chipselect--is-disabled\": this.disabled,\n \"stzh-chipselect--is-required\": this.required,\n \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n };\n\n return (\n <Host is-invalid={this.invalid \|\| errorUsed}>\n <div class={classes}>\n {this.multiple\n ?\n <Fragment>\n {this._value.map((value) =>\n <input type=\"hidden\" name={this.name} value={value} />\n )}\n </Fragment>\n :\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n />\n }\n\n <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional &&\n <span class=\"stzh-chipselect__marker\">\n <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker\n }\n </span>\n <span class=\"stzh-chipselect__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </label>\n\n {this._data.length > 0 &&\n <Fragment>\n <div\n id={this.id}\n class=\"stzh-chipselect__chips\"\n role=\"listbox\"\n tabindex=\"0\"\n aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n onKeyDown={this.handleKeydown}\n >\n {this._data.map((data, index) => (\n <stzh-chip\n role=\"option\"\n class={{\n \"stzh-chipselect__chip\": true,\n \"is-focused\": this.activeFocusOptionIndex === index\n }}\n label={data.label}\n counter={data.counter}\n icon={data.icon}\n type={data.type}\n inverted={data.inverted}\n variant={data.variant}\n size={data.size \|\| \"small\"}\n disabled={this.disabled \|\| data.disabled}\n active={\n this._value.includes(data.value)\n \|\| (!this.multiple && !data.value && (this._value.length === 0 \|\| this._value[0] === \"\"))\n \|\| (!data.value && this.multiple && (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n }\n aria-selected={\n this._value.includes(data.value)\n \|\| (!this.multiple && !data.value && (this._value.length === 0 \|\| this._value[0] === \"\"))\n \|\| (!data.value && this.multiple && (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n ? \"true\" : \"false\"\n }\n id={`${this.id}-option-${index}`}\n a11yTabindex=\"-1\"\n onClick={() => this.handleChipClick(data, index)}\n ></stzh-chip>\n ))}\n </div>\n\n <StzhInputDescription\n classPrefix=\"stzh-chipselect\"\n id={`${this.id}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n\n {/ <stzh-dropdown\n class=\"stzh-chipselect__dropdown\"\n multiple={this.multiple}\n disabled={this.disabled}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n required={this.required}\n invalid={this.invalid}\n items={[this.value]}\n label={this.label}\n labelHidden={this.labelHidden}\n options={this._dataDropdown}\n hideOptional={this.hideOptional}\n onStzhChange={this.handleDropdownChange}\n ></stzh-dropdown> */}\n </Fragment>\n }\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stzh-chipselect/stzh-chipselect.stories.js CHANGED Viewed

@@ -39,11 +39,11 @@ export const Default = {
   render: (args) => story(args, TEMPLATE),
   args: {
     label: "Services",
-    value: "all",
+    value: "",
     data: [
       {
         "label": "All Services",
-        "value": "all",
+        "value": "",
         "variant": "filter",
         "type": "secondary",
         "counter": "4",

package/dist/collection/components/stzh-clamp/stzh-clamp.css CHANGED Viewed

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-contact/stzh-contact.css CHANGED Viewed

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-container/stzh-container.css CHANGED Viewed

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-content/stzh-content.css CHANGED Viewed

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */
@@ -238,11 +238,13 @@
     --stzh-datalist-details-content-width: calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 5 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra));
   }
 }
-:host:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) ::slotted(*) stzh-datalist {
+:host:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) ::slotted(*) stzh-datalist,
+:host:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) ::slotted(*) stzh-eventdata {
   /* Text Layout */
 }
 @media screen and (min-width: 600px) {
-  :host:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) ::slotted(*) stzh-datalist {
+  :host:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) ::slotted(*) stzh-datalist,
+:host:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) ::slotted(*) stzh-eventdata {
     --stzh-text-display: block;
     --stzh-richtext-display: block;
   }

package/dist/collection/components/stzh-cspace/stzh-cspace.css CHANGED Viewed

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */
@@ -539,29 +539,29 @@ stzh-cspace > .stzh-cspace > .section > stzh-message, stzh-cspace > .stzh-cspace
     margin-bottom: var(--stzh-space-xxxxlarge);
   }
 }
-stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
+stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
   margin-bottom: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 900px) {
-  stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
+  stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
     margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
+  stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
     margin-bottom: var(--stzh-space-xxxxlarge);
   }
 }
-stzh-cspace > .stzh-cspace > .section > stzh-datalist, stzh-cspace > .stzh-cspace > stzh-datalist, stzh-cspace > .stzh-cspace > .section > stzh-textandimage, stzh-cspace > .stzh-cspace > stzh-textandimage {
+stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-eventdata, stzh-cspace > .stzh-cspace > stzh-eventdata, stzh-cspace > .stzh-cspace > .section > stzh-datalist, stzh-cspace > .stzh-cspace > stzh-datalist, stzh-cspace > .stzh-cspace > .section > stzh-textandimage, stzh-cspace > .stzh-cspace > stzh-textandimage {
   margin-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 900px) {
-  stzh-cspace > .stzh-cspace > .section > stzh-datalist, stzh-cspace > .stzh-cspace > stzh-datalist, stzh-cspace > .stzh-cspace > .section > stzh-textandimage, stzh-cspace > .stzh-cspace > stzh-textandimage {
+  stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-eventdata, stzh-cspace > .stzh-cspace > stzh-eventdata, stzh-cspace > .stzh-cspace > .section > stzh-datalist, stzh-cspace > .stzh-cspace > stzh-datalist, stzh-cspace > .stzh-cspace > .section > stzh-textandimage, stzh-cspace > .stzh-cspace > stzh-textandimage {
     margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  stzh-cspace > .stzh-cspace > .section > stzh-datalist, stzh-cspace > .stzh-cspace > stzh-datalist, stzh-cspace > .stzh-cspace > .section > stzh-textandimage, stzh-cspace > .stzh-cspace > stzh-textandimage {
+  stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-eventdata, stzh-cspace > .stzh-cspace > stzh-eventdata, stzh-cspace > .stzh-cspace > .section > stzh-datalist, stzh-cspace > .stzh-cspace > stzh-datalist, stzh-cspace > .stzh-cspace > .section > stzh-textandimage, stzh-cspace > .stzh-cspace > stzh-textandimage {
     margin-bottom: var(--stzh-space-xxxlarge);
   }
 }

package/dist/collection/components/stzh-cta/stzh-cta.css CHANGED Viewed

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */
@@ -183,6 +183,11 @@
     repeat(4, minmax(0, 1fr))
   );
 }
+@media print {
+  :host {
+    display: none;
+  }
+}
 @media screen and (min-width: 900px) {
   :host {
     --grid-template-areas: var(

package/dist/collection/components/stzh-datalist/stzh-datalist.css CHANGED Viewed

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.css CHANGED Viewed

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */
@@ -321,80 +321,20 @@
   color: var(--value-hover-color);
 }
 .stzh-datalist-item--direction-vertical .stzh-datalist-item__leading:not(:empty), .stzh-datalist-item--direction-vertical .stzh-datalist-item__wrapper:not(:empty), .stzh-datalist-item--direction-vertical .stzh-datalist-item__action-list:not(:empty) {
-  padding-top: var(--stzh-space-xsmall);
-  padding-bottom: var(--stzh-space-xsmall);
-}
-@media screen and (min-width: 900px) {
-  .stzh-datalist-item--direction-vertical .stzh-datalist-item__leading:not(:empty), .stzh-datalist-item--direction-vertical .stzh-datalist-item__wrapper:not(:empty), .stzh-datalist-item--direction-vertical .stzh-datalist-item__action-list:not(:empty) {
-    padding-top: var(--stzh-space-small);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-datalist-item--direction-vertical .stzh-datalist-item__leading:not(:empty), .stzh-datalist-item--direction-vertical .stzh-datalist-item__wrapper:not(:empty), .stzh-datalist-item--direction-vertical .stzh-datalist-item__action-list:not(:empty) {
-    padding-top: var(--stzh-space-medium);
-  }
-}
-@media screen and (min-width: 900px) {
-  .stzh-datalist-item--direction-vertical .stzh-datalist-item__leading:not(:empty), .stzh-datalist-item--direction-vertical .stzh-datalist-item__wrapper:not(:empty), .stzh-datalist-item--direction-vertical .stzh-datalist-item__action-list:not(:empty) {
-    padding-bottom: var(--stzh-space-small);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-datalist-item--direction-vertical .stzh-datalist-item__leading:not(:empty), .stzh-datalist-item--direction-vertical .stzh-datalist-item__wrapper:not(:empty), .stzh-datalist-item--direction-vertical .stzh-datalist-item__action-list:not(:empty) {
-    padding-bottom: var(--stzh-space-medium);
-  }
+  padding-top: var(--stzh-space-xxsmall);
+  padding-bottom: var(--stzh-space-xxsmall);
 }
 .stzh-datalist-item--direction-vertical .stzh-datalist-item__meta {
   flex-direction: column;
   align-items: flex-start;
 }
 .stzh-datalist-item--direction-horizontal .stzh-datalist-item__leading:not(:empty), .stzh-datalist-item--direction-horizontal .stzh-datalist-item__value:not(:empty), .stzh-datalist-item--direction-horizontal .stzh-datalist-item__action-list:not(:empty) {
-  padding-top: var(--stzh-space-xsmall);
-  padding-bottom: var(--stzh-space-xsmall);
-}
-@media screen and (min-width: 900px) {
-  .stzh-datalist-item--direction-horizontal .stzh-datalist-item__leading:not(:empty), .stzh-datalist-item--direction-horizontal .stzh-datalist-item__value:not(:empty), .stzh-datalist-item--direction-horizontal .stzh-datalist-item__action-list:not(:empty) {
-    padding-top: var(--stzh-space-small);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-datalist-item--direction-horizontal .stzh-datalist-item__leading:not(:empty), .stzh-datalist-item--direction-horizontal .stzh-datalist-item__value:not(:empty), .stzh-datalist-item--direction-horizontal .stzh-datalist-item__action-list:not(:empty) {
-    padding-top: var(--stzh-space-medium);
-  }
-}
-@media screen and (min-width: 900px) {
-  .stzh-datalist-item--direction-horizontal .stzh-datalist-item__leading:not(:empty), .stzh-datalist-item--direction-horizontal .stzh-datalist-item__value:not(:empty), .stzh-datalist-item--direction-horizontal .stzh-datalist-item__action-list:not(:empty) {
-    padding-bottom: var(--stzh-space-small);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-datalist-item--direction-horizontal .stzh-datalist-item__leading:not(:empty), .stzh-datalist-item--direction-horizontal .stzh-datalist-item__value:not(:empty), .stzh-datalist-item--direction-horizontal .stzh-datalist-item__action-list:not(:empty) {
-    padding-bottom: var(--stzh-space-medium);
-  }
+  padding-top: var(--stzh-space-xxsmall);
+  padding-bottom: var(--stzh-space-xxsmall);
 }
 .stzh-datalist-item--direction-horizontal .stzh-datalist-item__meta {
-  padding-bottom: var(--stzh-space-xsmall);
-  padding-top: calc(var(--stzh-space-xsmall) + 0.75rem);
-}
-@media screen and (min-width: 900px) {
-  .stzh-datalist-item--direction-horizontal .stzh-datalist-item__meta {
-    padding-bottom: var(--stzh-space-small);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-datalist-item--direction-horizontal .stzh-datalist-item__meta {
-    padding-bottom: var(--stzh-space-medium);
-  }
-}
-@media screen and (min-width: 900px) {
-  .stzh-datalist-item--direction-horizontal .stzh-datalist-item__meta {
-    padding-top: calc(var(--stzh-space-small) + 0.75rem);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-datalist-item--direction-horizontal .stzh-datalist-item__meta {
-    padding-top: calc(var(--stzh-space-medium) + 0.75rem);
-  }
+  padding-bottom: var(--stzh-space-xxsmall);
+  padding-top: calc(var(--stzh-space-xxsmall) + 0.75rem);
 }
 .stzh-datalist-item--direction-horizontal .stzh-datalist-item__meta:not(:empty) {
   padding-left: var(--stzh-space-xsmall);

package/dist/collection/components/stzh-datamessagelist/stzh-datamessagelist.css CHANGED Viewed

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */