npm - @oiz/stzh-components - Versions diffs - 3.8.0-beta1 → 3.8.0 - Mend

@oiz/stzh-components 3.8.0-beta1 → 3.8.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 (298) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-contact.js","sourceRoot":"","sources":["../../../../src/components/stzh-contact/stzh-contact.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { ContactEmail, ContactNumber, StzhContactAvailabilityItem } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n return tel.replace(/\\s/g, \"\");\n}\n\n/*\n @slot main-heading - slot for main heading\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n * @slot pobox - slot for pobox (alternative for `pobox` property or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`)\n * @slot slot for additional (e.g. accordion with contact form, map or datalist)\n /\n@Component({\n tag: \"stzh-contact\",\n styleUrl: \"stzh-contact.scss\",\n scoped: true,\n})\nexport class StzhContact {\n /* Type /\n @Prop() type: \"Organization\" \| \"Person\" = \"Organization\";\n\n /* Main heading /\n @Prop() mainHeading: string;\n\n /* Main heading level /\n @Prop() mainHeadingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"2\";\n\n /* Heading /\n @Prop() heading: string;\n\n /* Heading level /\n @Prop() headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Name /\n @Prop() name: string;\n\n /* Name heading level /\n @Prop() nameHeadingLevel: \"\" \| \"1\" \| \"2\" \| \"3\" \| \"4\" = \"\";\n\n /* Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) /\n @Prop() address: string;\n\n /* Street /\n @Prop() street: string \| string[];\n private _street: string[] = [];\n\n /* Additional street info /\n @Prop() streetInfo: string \| string[];\n private _streetInfo: string[] = [];\n\n /* Postal code /\n @Prop() postalCode: string;\n\n /* Location / city /\n @Prop() location: string;\n\n /* Location / city /\n @Prop() imagePosition: \"left\" \| \"top\" = \"top\";\n\n /\n Numbers\n * Array of objects that can include the attributes `type` = `tel`\|`fax`, `label`, `number`\n * and optionally `analyticsId` for setting `s-object-id` to the link element\n * (for Adobe Analytics, default value is `label` and `number`).\n /\n @Prop() numbers: ContactNumber[] \| string = [];\n private _numbers: ContactNumber[] = [];\n\n /\n Numbers\n * Array of objects that can include the attributes `label`, `number`, `text`, `href`\n * and optionally `analyticsId` for setting `s-object-id` to the link element\n * (for Adobe Analytics, default value is `label` and `text`).\n /\n @Prop() emails: ContactEmail[] \| string = [];\n private _emails: ContactEmail[] = [];\n\n /* Pobox (alternative for pobox slot or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`) /\n @Prop() pobox: string;\n\n /* Post office box heading /\n @Prop() poboxHeading: string;\n\n /* Post office box title /\n @Prop() poboxTitle: string;\n\n /* Post office box postal code /\n @Prop() poboxPostalCode: string;\n\n /* Post office box location / city /\n @Prop() poboxLocation: string;\n\n /* Availability title /\n @Prop() availabilityTitle: string;\n\n /* Availability title level /\n @Prop() availabilityTitleLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Availability times */\n @Prop() availability: string \| StzhContactAvailabilityItem[];\n private _availability: StzhContactAvailabilityItem[] = [];\n\n // private _availabilityDataItems: StzhDatalistItemEntry[] = [];\n\n @Watch(\"availability\")\n availabilityWatcher(newValue: string \| StzhContactAvailabilityItem[]) {\n if (typeof newValue === \"string\") {\n this._availability = JSON.parse(newValue);\n } else {\n this._availability = newValue;\n }\n\n // if (this._availability) {\n // this._availabilityDataItems = this._availability.map((item) => ({\n // value: item.hours.join(' \| '),\n // label: item.weekday\n // }));\n // }\n }\n\n @Watch(\"numbers\")\n numbersWatcher(newValue: ContactNumber[] \| string) {\n if (typeof newValue === \"string\") {\n this._numbers = JSON.parse(newValue);\n } else {\n this._numbers = newValue;\n }\n }\n\n @Watch(\"emails\")\n emailsWatcher(newValue: ContactEmail[] \| string) {\n if (typeof newValue === \"string\") {\n this._emails = JSON.parse(newValue);\n } else {\n this._emails = newValue;\n }\n }\n\n @Watch(\"street\")\n streetWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._street = JSON.parse(newValue);\n } catch (noArrayException) {\n this._street = [newValue];\n }\n } else if (newValue) {\n this._street = newValue;\n }\n }\n\n @Watch(\"streetInfo\")\n streetInfoWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._streetInfo = JSON.parse(newValue);\n } catch (noArrayException) {\n this._streetInfo = [newValue];\n }\n } else if (newValue) {\n this._streetInfo = newValue;\n }\n }\n\n @Element() element: HTMLStzhFigureElement;\n\n async componentWillLoad() {\n this.numbersWatcher(this.numbers);\n this.emailsWatcher(this.emails);\n this.availabilityWatcher(this.availability);\n this.streetWatcher(this.street);\n this.streetInfoWatcher(this.streetInfo);\n }\n\n render() {\n const hasImage = hasSlot(this.element, \"image\");\n const hasAddress = !!this.address \|\| hasSlot(this.element, \"address\");\n const hasAddons = hasSlot(this.element, \"addons\");\n const hasLinks = hasSlot(this.element, \"links\");\n\n const classes = {\n \"stzh-contact\": true,\n \"stzh-contact--has-image\": hasImage,\n \"stzh-contact--has-address\": hasAddress,\n \"stzh-contact--has-addons\": hasAddons,\n \"stzh-contact--has-links\": hasLinks,\n [`stzh-contact--image-position-${this.imagePosition}`]: true,\n };\n\n const HeadingLevel = `h${this.headingLevel}`;\n const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : \"div\";\n const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n\n return (\n <Host image-position={this.imagePosition}>\n <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n <div\n class=\"stzh-contact__main-heading\"\n itemprop={\n (this.type === \"Organization\" && !this.heading) \|\| (this.type === \"Person\" && !this.name) ? \"name\" : null\n }\n >\n {this.mainHeading ? (\n <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\n ) : (\n <slot name=\"main-heading\"></slot>\n )}\n </div>\n\n <div class=\"stzh-contact__image-wrapper\">\n <div class=\"stzh-contact__image\">\n <slot name=\"image\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-contact__info\">\n {this.heading && (\n <HeadingLevel\n class=\"stzh-contact__heading\"\n itemprop={this.type === \"Organization\" \|\| !this.name ? \"name\" : null}\n innerHTML={this.heading}\n ></HeadingLevel>\n )}\n\n {this.name && (\n <NameHeadingLevel\n class={{\n \"stzh-contact__name\": true,\n \"is-heading\": this.nameHeadingLevel !== \"\",\n }}\n itemprop={this.type === \"Person\" ? \"name\" : null}\n >\n {this.name}\n </NameHeadingLevel>\n )}\n\n <div\n class=\"stzh-contact__address\"\n itemprop=\"address\"\n itemscope\n itemtype=\"http://schema.org/PostalAddress\"\n innerHTML={this.address}\n >\n {!this.address && (\n <Fragment>\n {this._street.length > 0 && (\n <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n {this._street.map((street: string) => (\n <Fragment>\n {street}\n <br />\n </Fragment>\n ))}\n {this._streetInfo.length > 0 && (\n <Fragment>\n <br />{\" \"}\n {this._streetInfo.map((streetInfo: string) => (\n <Fragment>\n {streetInfo}\n <br />\n </Fragment>\n ))}\n </Fragment>\n )}\n </div>\n )}\n\n {this.postalCode && (\n <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n {this.postalCode} \n </span>\n )}\n\n {this.location && (\n <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n {this.location}\n </span>\n )}\n\n <slot name=\"address\"></slot>\n </Fragment>\n )}\n </div>\n\n {this._numbers.length > 0 && (\n <div class=\"stzh-contact__numbers\">\n {this._numbers.map(number => (\n <div class=\"stzh-contact__number\">\n <span>{number.label} </span>\n <stzh-link\n size=\"inherit\"\n height=\"auto\"\n class=\"stzh-contact__number-link\"\n href={`${number.type}:${formatTel(number.number)}`}\n analyticsId={number.analyticsId \|\| `${number.label} ${number.number}`}\n itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}\n >\n {number.number}\n </stzh-link>\n </div>\n ))}\n </div>\n )}\n\n {this._emails.length > 0 && (\n <div class=\"stzh-contact__emails\">\n {this._emails.map(email => (\n <div class=\"stzh-contact__email\">\n <span>{email.label} </span>\n {email.href ? (\n <stzh-link\n size=\"inherit\"\n height=\"auto\"\n class=\"stzh-container__email-link\"\n href={`mailto:${email.href}`}\n analyticsId={email.analyticsId \|\| `${email.label} ${email.text}`}\n itemprop=\"email\"\n >\n {email.text}\n </stzh-link>\n ) : (\n <span class=\"stzh-container__email-link\" itemprop=\"email\">\n {email.text}\n </span>\n )}\n </div>\n ))}\n </div>\n )}\n\n <div class=\"stzh-contact__pobox\" innerHTML={this.pobox}>\n {!this.pobox && (\n <Fragment>\n {this.poboxHeading && <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>}\n {this.poboxTitle && <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>}\n {this.poboxPostalCode && (\n <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode} </span>\n )}\n {this.poboxLocation && <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>}\n <slot name=\"pobox\"></slot>\n </Fragment>\n )}\n </div>\n </div>\n\n {this.availability && (\n <div class=\"stzh-contact__availability\">\n {this.availabilityTitle && (\n <AvailabilityTitleElement class=\"stzh-contact__availability-title\">\n {this.availabilityTitle}\n </AvailabilityTitleElement>\n )}\n\n {this._availability.length > 0 && (\n <ul class=\"stzh-contact__availability-list\">\n {this._availability.map(item => (\n <li class=\"stzh-contact__availability-list-item\">\n <div class=\"stzh-contact__availability-weekday\">{item.weekday}</div>\n {item.hours.length > 0 && (\n <div class=\"stzh-contact__availability-hours\">\n {item.hours.map((hour, index) => (\n <Fragment>\n <div class=\"stzh-contact__availability-hour\">{hour}</div>\n {index < item.hours.length - 1 && (\n <div class=\"stzh-contact__availability-hours-separator\"></div>\n )}\n </Fragment>\n ))}\n </div>\n )}\n </li>\n ))}\n </ul>\n )}\n </div>\n )}\n\n <div class=\"stzh-contact__additional\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-contact.js","sourceRoot":"","sources":["../../../../src/components/stzh-contact/stzh-contact.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { ContactEmail, ContactNumber, StzhContactAvailabilityItem } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n return tel.replace(/\\s/g, \"\");\n}\n\n/*\n @slot main-heading - slot for main heading\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n * @slot pobox - slot for pobox (alternative for `pobox` property or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`)\n * @slot slot for additional (e.g. accordion with contact form, map or datalist)\n /\n@Component({\n tag: \"stzh-contact\",\n styleUrl: \"stzh-contact.scss\",\n scoped: true,\n})\nexport class StzhContact {\n /* Type /\n @Prop() type: \"Organization\" \| \"Person\" = \"Organization\";\n\n /* Main heading /\n @Prop() mainHeading: string;\n\n /* Main heading level /\n @Prop() mainHeadingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"2\";\n\n /* Heading /\n @Prop() heading: string;\n\n /* Heading level /\n @Prop() headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Name /\n @Prop() name: string;\n\n /* Name heading level /\n @Prop() nameHeadingLevel: \"\" \| \"1\" \| \"2\" \| \"3\" \| \"4\" = \"\";\n\n /* Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) /\n @Prop() address: string;\n\n /* Street /\n @Prop() street: string \| string[];\n private _street: string[] = [];\n\n /* Additional street info /\n @Prop() streetInfo: string \| string[];\n private _streetInfo: string[] = [];\n\n /* Postal code /\n @Prop() postalCode: string;\n\n /* Location / city /\n @Prop() location: string;\n\n /* Location / city /\n @Prop() imagePosition: \"left\" \| \"top\" = \"top\";\n\n /\n Numbers\n * Array of objects that can include the attributes `type` = `tel`\|`fax`, `label`, `number`\n * and optionally `analyticsId` for setting `s-object-id` to the link element\n * (for Adobe Analytics, default value is `label` and `number`).\n /\n @Prop() numbers: ContactNumber[] \| string = [];\n private _numbers: ContactNumber[] = [];\n\n /\n Numbers\n * Array of objects that can include the attributes `label`, `number`, `text`, `href`\n * and optionally `analyticsId` for setting `s-object-id` to the link element\n * (for Adobe Analytics, default value is `label` and `text`).\n /\n @Prop() emails: ContactEmail[] \| string = [];\n private _emails: ContactEmail[] = [];\n\n /* Pobox (alternative for pobox slot or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`) /\n @Prop() pobox: string;\n\n /* Post office box heading /\n @Prop() poboxHeading: string;\n\n /* Post office box title /\n @Prop() poboxTitle: string;\n\n /* Post office box postal code /\n @Prop() poboxPostalCode: string;\n\n /* Post office box location / city /\n @Prop() poboxLocation: string;\n\n /* Availability title /\n @Prop() availabilityTitle: string;\n\n /* Availability title level /\n @Prop() availabilityTitleLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Availability times */\n @Prop() availability: string \| StzhContactAvailabilityItem[];\n private _availability: StzhContactAvailabilityItem[] = [];\n\n // private _availabilityDataItems: StzhDatalistItemEntry[] = [];\n\n @Watch(\"availability\")\n availabilityWatcher(newValue: string \| StzhContactAvailabilityItem[]) {\n if (typeof newValue === \"string\") {\n this._availability = JSON.parse(newValue);\n } else {\n this._availability = newValue;\n }\n }\n\n @Watch(\"numbers\")\n numbersWatcher(newValue: ContactNumber[] \| string) {\n if (typeof newValue === \"string\") {\n this._numbers = JSON.parse(newValue);\n } else {\n this._numbers = newValue;\n }\n }\n\n @Watch(\"emails\")\n emailsWatcher(newValue: ContactEmail[] \| string) {\n if (typeof newValue === \"string\") {\n this._emails = JSON.parse(newValue);\n } else {\n this._emails = newValue;\n }\n }\n\n @Watch(\"street\")\n streetWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._street = JSON.parse(newValue);\n } catch (noArrayException) {\n this._street = [newValue];\n }\n } else if (newValue) {\n this._street = newValue;\n }\n }\n\n @Watch(\"streetInfo\")\n streetInfoWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._streetInfo = JSON.parse(newValue);\n } catch (noArrayException) {\n this._streetInfo = [newValue];\n }\n } else if (newValue) {\n this._streetInfo = newValue;\n }\n }\n\n @Element() element: HTMLStzhFigureElement;\n\n async componentWillLoad() {\n this.numbersWatcher(this.numbers);\n this.emailsWatcher(this.emails);\n this.availabilityWatcher(this.availability);\n this.streetWatcher(this.street);\n this.streetInfoWatcher(this.streetInfo);\n }\n\n render() {\n const hasImage = hasSlot(this.element, \"image\");\n const hasAddress = !!this.address \|\| hasSlot(this.element, \"address\");\n const hasAddons = hasSlot(this.element, \"addons\");\n const hasLinks = hasSlot(this.element, \"links\");\n\n const classes = {\n \"stzh-contact\": true,\n \"stzh-contact--has-image\": hasImage,\n \"stzh-contact--has-address\": hasAddress,\n \"stzh-contact--has-addons\": hasAddons,\n \"stzh-contact--has-links\": hasLinks,\n [`stzh-contact--image-position-${this.imagePosition}`]: true,\n };\n\n const HeadingLevel = `h${this.headingLevel}`;\n const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : \"div\";\n const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n\n return (\n <Host image-position={this.imagePosition} has-availability={!!this.availability ? 'true' : 'false'}>\n <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n <div\n class=\"stzh-contact__main-heading\"\n itemprop={\n (this.type === \"Organization\" && !this.heading) \|\| (this.type === \"Person\" && !this.name) ? \"name\" : null\n }\n >\n {this.mainHeading ? (\n <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\n ) : (\n <slot name=\"main-heading\"></slot>\n )}\n </div>\n\n <div class=\"stzh-contact__image-wrapper\">\n <div class=\"stzh-contact__image\">\n <slot name=\"image\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-contact__info\">\n {this.heading && (\n <HeadingLevel\n class=\"stzh-contact__heading\"\n itemprop={this.type === \"Organization\" \|\| !this.name ? \"name\" : null}\n innerHTML={this.heading}\n ></HeadingLevel>\n )}\n\n {this.name && (\n <NameHeadingLevel\n class={{\n \"stzh-contact__name\": true,\n \"is-heading\": this.nameHeadingLevel !== \"\",\n }}\n itemprop={this.type === \"Person\" ? \"name\" : null}\n >\n {this.name}\n </NameHeadingLevel>\n )}\n\n <div\n class=\"stzh-contact__address\"\n itemprop=\"address\"\n itemscope\n itemtype=\"http://schema.org/PostalAddress\"\n innerHTML={this.address}\n >\n {!this.address && (\n <Fragment>\n {this._street.length > 0 && (\n <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n {this._street.map((street: string) => (\n <Fragment>\n {street}\n <br />\n </Fragment>\n ))}\n {this._streetInfo.length > 0 && (\n <Fragment>\n <br />{\" \"}\n {this._streetInfo.map((streetInfo: string) => (\n <Fragment>\n {streetInfo}\n <br />\n </Fragment>\n ))}\n </Fragment>\n )}\n </div>\n )}\n\n {this.postalCode && (\n <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n {this.postalCode} \n </span>\n )}\n\n {this.location && (\n <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n {this.location}\n </span>\n )}\n\n <slot name=\"address\"></slot>\n </Fragment>\n )}\n </div>\n\n {this._numbers.length > 0 && (\n <div class=\"stzh-contact__numbers\">\n {this._numbers.map(number => (\n <div class=\"stzh-contact__number\">\n <span>{number.label} </span>\n <stzh-link\n size=\"inherit\"\n height=\"auto\"\n class=\"stzh-contact__number-link\"\n href={`${number.type}:${formatTel(number.number)}`}\n analyticsId={number.analyticsId \|\| `${number.label} ${number.number}`}\n itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}\n >\n {number.number}\n </stzh-link>\n </div>\n ))}\n </div>\n )}\n\n {this._emails.length > 0 && (\n <div class=\"stzh-contact__emails\">\n {this._emails.map(email => (\n <div class=\"stzh-contact__email\">\n <span>{email.label} </span>\n {email.href ? (\n <stzh-link\n size=\"inherit\"\n height=\"auto\"\n class=\"stzh-container__email-link\"\n href={`mailto:${email.href}`}\n analyticsId={email.analyticsId \|\| `${email.label} ${email.text}`}\n itemprop=\"email\"\n >\n {email.text}\n </stzh-link>\n ) : (\n <span class=\"stzh-container__email-link\" itemprop=\"email\">\n {email.text}\n </span>\n )}\n </div>\n ))}\n </div>\n )}\n\n <div class=\"stzh-contact__pobox\" innerHTML={this.pobox}>\n {!this.pobox && (\n <Fragment>\n {this.poboxHeading && <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>}\n {this.poboxTitle && <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>}\n {this.poboxPostalCode && (\n <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode} </span>\n )}\n {this.poboxLocation && <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>}\n <slot name=\"pobox\"></slot>\n </Fragment>\n )}\n </div>\n </div>\n\n {this.availability && (\n <div class=\"stzh-contact__availability\">\n {this.availabilityTitle && (\n <AvailabilityTitleElement class=\"stzh-contact__availability-title\">\n {this.availabilityTitle}\n </AvailabilityTitleElement>\n )}\n\n {this._availability.length > 0 && (\n <ul class=\"stzh-contact__availability-list\">\n {this._availability.map(item => (\n <li class=\"stzh-contact__availability-list-item\">\n <div class=\"stzh-contact__availability-weekday\">{item.weekday}</div>\n {item.hours.length > 0 && (\n <div class=\"stzh-contact__availability-hours\">\n {item.hours.map((hour, index) => (\n <Fragment>\n <div class=\"stzh-contact__availability-hour\">{hour}</div>\n {index < item.hours.length - 1 && (\n <div class=\"stzh-contact__availability-hours-separator\"></div>\n )}\n </Fragment>\n ))}\n </div>\n )}\n </li>\n ))}\n </ul>\n )}\n </div>\n )}\n\n <div class=\"stzh-contact__additional\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stzh-datalist/stzh-datalist.e2e.js CHANGED Viewed

@@ -4,6 +4,7 @@ const URL = "components-datalist";
 const STORIES = [
   "default",
   "urls",
+  "multi-column",
   "nested",
   "details",
   "table",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-datalist.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-datalist/stzh-datalist.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,qBAAqB,CAAC;AAElC,MAAM,OAAO,GAAG;EACd,SAAS;EACT,MAAM;EACN,QAAQ;EACR,SAAS;EACT,OAAO;EACP,SAAS;EACT,mBAAmB;CACpB,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EAC7B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;OACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-datalist\";\n\nconst STORIES = [\n \"default\",\n \"urls\",\n \"nested\",\n \"details\",\n \"table\",\n \"slotted\",\n \"slotted-edit-mode\",\n];\n\ntest.describe(\"datalist\", () => {\n STORIES.forEach((storyId) => {\n test(`story ${storyId} visual diff`, async ({ page }) => {\n await visualDiff({\n storyId,\n page,\n url: URL\n });\n });\n });\n});\n"]}
1	+ {"version":3,"file":"stzh-datalist.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-datalist/stzh-datalist.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,qBAAqB,CAAC;AAElC,MAAM,OAAO,GAAG;EACd,SAAS;EACT,MAAM;EACN,cAAc;EACd,QAAQ;EACR,SAAS;EACT,OAAO;EACP,SAAS;EACT,mBAAmB;CACpB,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EAC7B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;OACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-datalist\";\n\nconst STORIES = [\n \"default\",\n \"urls\",\n \"multi-column\",\n \"nested\",\n \"details\",\n \"table\",\n \"slotted\",\n \"slotted-edit-mode\",\n];\n\ntest.describe(\"datalist\", () => {\n STORIES.forEach((storyId) => {\n test(`story ${storyId} visual diff`, async ({ page }) => {\n await visualDiff({\n storyId,\n page,\n url: URL\n });\n });\n });\n});\n"]}

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

@@ -196,6 +196,38 @@ export const Urls = {
   },
 };
+export const MultiColumn = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    columns: 3,
+    items: [
+      {
+        label: 'Label',
+        value: 'Internal Link',
+        href: '#',
+      },
+      {
+        label: 'Label',
+        value: 'External Link',
+        href: 'http://example.com',
+        target: '_blank',
+      },
+      {
+        label: 'Label',
+        value: 'Phone Link',
+        href: 'tel:#',
+      },
+      {
+        label: 'Label',
+        value: 'Download Link',
+        href: '#',
+        meta: ['PDF', '1 Seite', '60 KB'],
+        download: true,
+      },
+    ],
+  },
+};
 export const Nested = {
   render: (args) => story(args, TEMPLATE),
   args: {

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

@@ -192,10 +192,11 @@
   position: relative;
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
-  display: flex;
+  display: var(--wrapper-display);
   align-items: center;
   /* Button variant */
   /* Interactive variant */
+  /* Vertical Variant */
   /* Horizontal / Table Variant */
   /** Table Variant */
   /** Big label */

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

@@ -17,7 +17,7 @@ export default {
   parameters: {
     layout: 'padded',
     actions: {
-      handles: ['stzhChange'],
+      handles: ['stzhChange', 'stzhChanged'],
     },
     docs: {
       description: {

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

@@ -296,7 +296,8 @@
   margin: auto;
   border: none;
   background-color: var(--stzh-color-white);
-  width: var(--width);
+  width: auto;
+  min-width: var(--width);
   max-width: 100%;
   box-shadow: var(--stzh-box-shadow-overlay);
   height: 100vh;

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

@@ -1379,7 +1379,7 @@ stzh-dropdown:where([size=tiny]):where([variant=filter]) {
 }
 .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item, .stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item {
   display: inline-flex;
-  align-items: flex-start;
+  align-items: center;
   gap: var(--remove-gap);
   padding-right: 0px;
 }
@@ -1485,6 +1485,13 @@ stzh-dropdown:where([size=tiny]):where([variant=filter]) {
 .stzh-dropdown--has-no-search .stzh-dropdown__select.input-active .ts-control, .stzh-dropdown--has-no-search .stzh-dropdown__select.input-active .ts-control > input {
   cursor: pointer;
 }
+.stzh-dropdown--filter .stzh-dropdown__option, .stzh-dropdown--plain .stzh-dropdown__option {
+  background-color: var(--stzh-color-secondary10);
+  color: var(--stzh-color-primary70);
+}
+.stzh-dropdown--filter .stzh-dropdown__option:hover, .stzh-dropdown--filter .stzh-dropdown__option.active, .stzh-dropdown--plain .stzh-dropdown__option:hover, .stzh-dropdown--plain .stzh-dropdown__option.active {
+  background-color: var(--stzh-color-secondary20);
+}
 .stzh-dropdown--filter .stzh-dropdown__select.single .ts-control, .stzh-dropdown--filter .stzh-dropdown__select.multi .ts-control, .stzh-dropdown--filter .stzh-dropdown__sizer {
   border: none;
 }

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

@@ -4,12 +4,18 @@ import readme from './readme.md?raw';
 import { getFigmaLink } from '../../../figma';
 import { fullwidthCentered } from '../../utils/decorators';
+import { expectIsVisible, getComponentByTestId } from "../../../.storybook/utils/component-test-utils";
+import { expect } from "@storybook/jest";
+import { userEvent, waitFor } from "@storybook/testing-library";
 const COMPONENT_NAME = 'stzh-dropdown';
 const story = createComponentStory(COMPONENT_NAME);
+const DROPDOWN_TEST_ID = 'BUTTON_TEST_ID';
+let stzhDropdownEl;
 const TEMPLATE = `
-<stzh-dropdown></stzh-dropdown>
+<stzh-dropdown data-testid="${DROPDOWN_TEST_ID}"></stzh-dropdown>
 `;
 const TEMPLATE_SLOTTED_OPTIONS_WITH_ICON = `
@@ -52,13 +58,109 @@ export const Single = {
   args: {
     label: 'Department',
     description: 'Choose one department.',
+    name: 'singleDropdown',
     options: [
-      { 'text': 'AOZ', 'value': 'AOZ' },
-      { 'text': 'PKZH', 'value': 'PKZH' },
-      { 'text': 'VBZ', 'value': 'VBZ' },
-      { 'text': 'UVZ', 'value': 'UVZ', 'disabled': true },
+      { 'text': 'AOZ', 'value': 'AOZ_value' },
+      { 'text': 'PKZH', 'value': 'PKZH_value' },
+      { 'text': 'VBZ', 'value': 'VBZ_value' },
+      { 'text': 'UVZ', 'value': 'UVZ_value', 'disabled': true },
     ],
   },
+  play: async ({ canvasElement, step }) => {
+    stzhDropdownEl = await getComponentByTestId(canvasElement, DROPDOWN_TEST_ID);
+    await step('Assert properties', async () => {
+      expect(stzhDropdownEl).toHaveAttribute('label', 'Department');
+      expect(stzhDropdownEl).toHaveAttribute('description', 'Choose one department.');
+      expect(stzhDropdownEl).toHaveAttribute('name', 'singleDropdown');
+      expect(stzhDropdownEl).toHaveAttribute('tabindex', '-1');
+      expect(stzhDropdownEl).toHaveAttribute('variant', 'default');
+      expect(stzhDropdownEl).toHaveAttribute('size', 'default');
+      expect(stzhDropdownEl).toHaveAttribute('popover-placement', 'bottom');
+    });
+    await step('Description element is being rendered', async () => {
+      const descriptionWrapperEl = stzhDropdownEl.querySelector('.stzh-dropdown__description-wrapper');
+      expect(descriptionWrapperEl).not.toBeNull();
+    });
+    await step('Assert stzhOpen and stzhClose event details', async () => {
+      let eventOpenDetail;
+      let eventCloseDetail;
+      stzhDropdownEl.addEventListener('stzhOpen', (ev) => {
+        eventOpenDetail = ev.detail;
+      });
+      stzhDropdownEl.addEventListener('stzhClose', (ev) => {
+        eventCloseDetail = ev.detail;
+      });
+      await userEvent.click(stzhDropdownEl);
+      expect(eventOpenDetail).toHaveProperty('component', 'stzh-dropdown');
+      // close dropdown again
+      await userEvent.click(canvasElement);
+      expect(eventCloseDetail).toHaveProperty('component', 'stzh-dropdown');
+    });
+    await step('Options are being rendered', async () => {
+      const dropdownEl = stzhDropdownEl.querySelector('.stzh-dropdown__dropdown');
+      // dropdown element becomes visible after click
+      expectIsVisible(dropdownEl, false);
+      await userEvent.click(stzhDropdownEl);
+      expectIsVisible(dropdownEl, true);
+      // options are being rendered correctly (including disabled)
+      const dropdownOptionElList = dropdownEl.querySelectorAll('.stzh-dropdown__option');
+      expect(dropdownOptionElList.length).toBe(4);
+      const aozDropdownOption = dropdownOptionElList[0];
+      expect(aozDropdownOption).toHaveAttribute('role', 'option');
+      expect(aozDropdownOption).toHaveAttribute('data-value', 'AOZ_value');
+      expect(aozDropdownOption).toHaveClass('active'); // first options is active
+      expect(aozDropdownOption).not.toHaveAttribute('aria-disabled');
+      const uvzDropdownOption = dropdownOptionElList[3];
+      expect(uvzDropdownOption).toHaveAttribute('role', 'option');
+      expect(uvzDropdownOption).toHaveAttribute('data-value', 'UVZ_value');
+      expect(uvzDropdownOption).not.toHaveClass('active');
+      expect(uvzDropdownOption).toHaveAttribute('aria-disabled', 'true');
+      // close dropdown again
+      await userEvent.click(canvasElement);
+    });
+    await step('Selecting an option emits stzhChange event and sets selected value', async () => {
+      await userEvent.click(stzhDropdownEl);
+      const dropdownOptionElList = stzhDropdownEl.querySelectorAll('.stzh-dropdown__option');
+      let eventChangeDetail;
+      stzhDropdownEl.addEventListener('stzhChange', (ev) => {
+        eventChangeDetail = ev.detail;
+      });
+      // click the option
+      const pkzhDropdownOption = dropdownOptionElList[1];
+      await userEvent.click(pkzhDropdownOption);
+      expect(eventChangeDetail).toHaveProperty('component', 'stzh-dropdown');
+      expect(eventChangeDetail).toHaveProperty('value', 'PKZH_value');
+      // selected option is visible
+      const dropdownItemEl = stzhDropdownEl.querySelector('.stzh-dropdown__item');
+      expectIsVisible(dropdownItemEl, true);
+      expect(dropdownItemEl).toHaveAttribute('data-value', 'PKZH_value');
+      expect(dropdownItemEl).toHaveTextContent('PKZH');
+      // in the dropdown list, the selected value ist active
+      await userEvent.click(stzhDropdownEl);
+      expect(pkzhDropdownOption).toHaveClass('active');
+      // reset to default state
+      stzhDropdownEl.setValue('');
+      await userEvent.click(canvasElement);
+    });
+  },
 };
 export const Multiple = {

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

@@ -167,11 +167,6 @@
   row-gap: var(--stzh-space-xsmall);
   column-gap: var(--stzh-space-medium);
 }
-@media screen and (min-width: 600px) {
-  .stzh-eventdata {
-    flex-direction: row;
-  }
-}
 .stzh-eventdata__label {
   font-family: var(--stzh-font-family-heavy);
   font-weight: var(--stzh-font-weight-heavy);

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

@@ -39,7 +39,7 @@ export default {
   component: COMPONENT_NAME,
   parameters: {
     actions: {
-      handles: ['stzhChange', 'stzhFocus', 'stzhBlur'],
+      handles: ['stzhChange', 'stzhFocus', 'stzhBlur', 'stzhChanged'],
     },
     docs: {
       description: {

package/dist/collection/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import axios from "axios";
 /**
  * @see https://www.stadt-zuerich.ch/site/fuer-zueri/de/index.html
@@ -47,6 +47,7 @@ export class StzhMicrositeTeaserlist {
       "label": tag.name,
       "value": tag.id,
       "variant": "filter",
+      "size": "large",
       "counter": ((tag.id)
         ? this.items.filter(item => item.tags.indexOf(tag.id) > -1).length
         : this.items.length).toString()
@@ -71,7 +72,7 @@ export class StzhMicrositeTeaserlist {
   }
   render() {
     const classes = {
-      "stzh-microsite-teaserlist": true,
+      "stzh-microsite-teaserlist": true
     };
     return (h(Host, null, h("div", { class: classes }, this._tagChips.length > 0 &&
       h("stzh-chipselect", { "hide-optional": true, "label-hidden": true, class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange }), h("stzh-cardlist", { layout: "teasers" }, this._filteredSlicedItems.map((item) => h("stzh-card", { href: item.link }, item.image &&

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

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-microsite-teaserlist.js","sourceRoot":"","sources":["../../../../src/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EACL~~,SAAS,~~EACT~~,~~IAAI~~,~~EACJ~~,CAAC,~~EACD~~,~~OAAO~~,~~EACP~~,IAAI,~~EACJ~~,KAAK,~~EACL~~,KAAK,~~EACN~~,MAAM,eAAe,CAAC;~~AAEvB~~,OAAO,KAAK,MAAM,OAAO,CAAC;~~AAW1B~~;;;GAGG;AAMH,MAAM,OAAO,uBAAuB;;IAS1B,UAAK,GAAiC,EAAE,CAAC;IACzC,cAAS,GAAyB,EAAE,CAAC;IAerC,mBAAc,GAAkC,EAAE,CAAC;IACnD,yBAAoB,GAAkC,EAAE,CAAC;IACzD,kBAAa,GAAY,KAAK,CAAC;~~IAoD~~/B,iBAAY,GAAG,CAAC,KAA6C,EAAE,EAAE;MACvE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC;MACxC,IAAI,CAAC,YAAY,GAAG,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAChH,CAAC,~~CAAA~~;~~IAEO~~,oBAAe,GAAG,GAAG,EAAE;MAC7B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;IACnD,CAAC,~~CAAA~~;;;~~gBA9EqD~~,EAAE;qBAKX,CAAC;qBAIlB,CAAC;wBAKG,EAAE;iBAEc,EAAE;;EAQlD,KAAK,CAAC,aAAa;IACjB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK;OAC7B,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;MACf,6GAA6G;MAC7G,OAAO,CAAC,IAAI,CAAC,YAAY,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC9F,CAAC,CAAC,CAAC;IAEL,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,cAAc;OAC5C,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,~~CAAA~~;~~IAE3B~~,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;EACnE,CAAC;EAID,KAAK,CAAC,WAAW;IACf,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpC;SAAM;MACL,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;KACxB;IAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;MACxC,OAAO,EAAE,GAAG,CAAC,IAAI;MACjB,OAAO,EAAE,GAAG,CAAC,EAAE;MACf,SAAS,EAAE,QAAQ;MACnB,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;QAClB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM;QAClE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE;KAClC,CAAC,CAAC,CAAC;EACN,CAAC;EAGD,KAAK,CAAC,UAAU,CAAC,QAAgB;IAC/B,IAAI,CAAC,QAAQ,EAAE;MACb,OAAO;KACR;IAED,IAAI,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,~~CAAA~~;~~IAEpE~~,qBAAqB;IACrB,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAEzC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACxB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC;EAC1C,CAAC;EAWD,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,SAAS,CAAC;IAExC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC;KAC/G;IAED,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;EAClC,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,2BAA2B,EAAE,IAAI;KAClC,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QAChB,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC;UACxB,oEAGE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS,EAClC,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,YAAY,EAAE,IAAI,CAAC,YAAY,GACd;QAGrB,qBAAe,MAAM,EAAC,SAAS,IAC5B,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACtC,iBAAW,IAAI,EAAE,IAAI,CAAC,IAAI;UACvB,IAAI,CAAC,KAAK;YACT,kBAAY,IAAI,EAAC,OAAO;cACtB,WAAK,GAAG,EAAE,IAAI,CAAC,KAAK,GAAI,CACb;UAEd,IAAI,CAAC,KAAK;YACT,WAAK,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAO;UAGvC,IAAI,CAAC,WAAW;YACf,WAAK,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,WAAW,CAAO,CAGpC,CACb,CACa;QAEf,IAAI,CAAC,aAAa;UACjB,WAAK,KAAK,EAAC,sCAAsC;YAC/C,mBACE,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,EACjC,OAAO,EAAE,IAAI,CAAC,eAAe,GAChB,CACX,CAEJ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component~~,\n~~ Host~~,\n h,\n Element,\n~~ Prop~~,\n~~ Watch~~,\n State\n~~} from \"@stencil/core\";\n\nimport axios from 'axios';\n\nimport { ~~StzhMicrositeTeaserlistLocalizedText~~ } from ~~'./stzh-microsite-teaserlist.localization'~~;\n\nimport {~~\n StzhMicrositeTeaserlistTag,\n StzhMicrositeTeaserlistItem,\n StzhChipselectItem,\n StzhChipselectChangeEvent\n~~} from \"~~../../index~~\";\n\n/*\n @see https://www.stadt-zuerich.ch/site/fuer-zueri/de/index.html\n * @see https://www.stadt-zuerich.ch/site/iazh/de/index.html\n /\n@Component({\n tag: \"stzh-microsite-teaserlist\",\n styleUrl: \"stzh-microsite-teaserlist.scss\",\n scoped: true\n})\nexport class StzhMicrositeTeaserlist {\n /* Translation strings /\n @Prop() localization: StzhMicrositeTeaserlistLocalizedText;\n\n /* API URL (`{lang}` is replaced in the URL) /\n @Prop() api: string;\n\n /* Tags /\n @Prop() tags: string \| StzhMicrositeTeaserlistTag[] = [];\n private _tags: StzhMicrositeTeaserlistTag[] = [];\n private _tagChips: StzhChipselectItem[] = [];\n\n /* Numbers of items currently shown /\n @Prop({ mutable: true }) showItems: number = 6;\n private _initialShowItems: number;\n\n /* Numbers of item shown with each load more action /\n @Prop() stepItems: number = 6;\n\n @Element() element: HTMLStzhMicrositeTeaserlistElement;\n\n /* Active filter /\n @State() activeFilter: string = \"\";\n\n @State() items: StzhMicrositeTeaserlistItem[] = [];\n private _filteredItems: StzhMicrositeTeaserlistItem[] = [];\n private _filteredSlicedItems: StzhMicrositeTeaserlistItem[] = [];\n private _showMoreLink: boolean = false;\n\n @Watch(\"items\")\n @Watch(\"showItems\")\n @Watch(\"activeFilter\")\n async filterHandler() {\n this._filteredItems = this.items\n .filter((item) => {\n // return (this.activeFilter[0] !== \"\") ? item.tags.some(tag => this.activeFilters.indexOf(tag) > -1) : true;\n return (this.activeFilter !== \"\") ? item.tags.some(tag => this.activeFilter === tag) : true;\n });\n\n this._filteredSlicedItems = this._filteredItems\n .slice(0, this.showItems)\n\n this._showMoreLink = this.showItems < this._filteredItems.length;\n }\n\n @Watch(\"items\")\n @Watch(\"tags\")\n async tagsWatcher() {\n if (typeof this.tags === \"string\") {\n this._tags = JSON.parse(this.tags);\n } else {\n this._tags = this.tags;\n }\n\n this._tagChips = this._tags.map((tag) => ({\n \"label\": tag.name,\n \"value\": tag.id,\n \"variant\": \"filter\",\n \"counter\": ((tag.id)\n ? this.items.filter(item => item.tags.indexOf(tag.id) > -1).length\n : this.items.length).toString()\n }));\n }\n\n @Watch(\"api\")\n async apiWatcher(newValue: string) {\n if (!newValue) {\n return;\n }\n\n let apiUrl = this.api.replace(/\\{lang\\}/, this.localization.$locale)\n\n // load data from API\n const { data } = await axios.get(apiUrl);\n\n this.items = data.items;\n this.showItems = this._initialShowItems;\n }\n\n private handleChange = (event: CustomEvent<StzhChipselectChangeEvent>) => {\n this.showItems = this._initialShowItems;\n this.activeFilter = typeof event.detail.value === \"string\" ? event.detail.value : event.detail.value[0] \|\| \"\";\n }\n\n private handleMoreClick = () => {\n this.showItems = this.showItems + this.stepItems;\n }\n\n async componentWillLoad() {\n this._initialShowItems = this.showItems;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"microsite-teaserlist\");\n }\n\n await this.apiWatcher(this.api);\n }\n\n render() {\n const classes = {\n \"stzh-microsite-teaserlist\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n {this._tagChips.length > 0 &&\n <stzh-chipselect\n hide-optional\n label-hidden\n class=\"stzh-microsite-teaserlist__filter\"\n label={this.localization.tagsLabel}\n data={this._tagChips}\n onStzhChange={this.handleChange}\n ></stzh-chipselect>\n }\n\n <stzh-cardlist layout=\"teasers\">\n {this._filteredSlicedItems.map((item) =>\n <stzh-card href={item.link}>\n {item.image &&\n <stzh-ratio slot=\"image\">\n <img src={item.image} />\n </stzh-ratio>\n }\n {item.title &&\n <div slot=\"heading\">{item.title}</div>\n }\n {/ <stzh-clamp slot=\"heading\" lines={2}>{item.title}</stzh-clamp> /}\n {item.description &&\n <div slot=\"content\">{item.description}</div>\n }\n {/ <stzh-clamp slot=\"content\" lines={3}>{item.description}</stzh-clamp> */}\n </stzh-card>\n )}\n </stzh-cardlist>\n\n {this._showMoreLink &&\n <div class=\"stzh-microsite-teaserlist__show-more\">\n <stzh-button\n variant=\"secondary\"\n label={this.localization.showMore}\n onClick={this.handleMoreClick}\n ></stzh-button>\n </div>\n }\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-microsite-teaserlist.js","sourceRoot":"","sources":["../../../../src/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\nimport axios from \"axios\";\n\nimport { StzhChipselectChangeEvent, StzhChipselectItem, StzhMicrositeTeaserlistItem, StzhMicrositeTeaserlistTag } from \"../../index\";\n\nimport { StzhMicrositeTeaserlistLocalizedText } from \"./stzh-microsite-teaserlist.localization\";\n\n/*\n @see https://www.stadt-zuerich.ch/site/fuer-zueri/de/index.html\n * @see https://www.stadt-zuerich.ch/site/iazh/de/index.html\n /\n@Component({\n tag: \"stzh-microsite-teaserlist\",\n styleUrl: \"stzh-microsite-teaserlist.scss\",\n scoped: true\n})\nexport class StzhMicrositeTeaserlist {\n /* Translation strings /\n @Prop() localization: StzhMicrositeTeaserlistLocalizedText;\n\n /* API URL (`{lang}` is replaced in the URL) /\n @Prop() api: string;\n\n /* Tags /\n @Prop() tags: string \| StzhMicrositeTeaserlistTag[] = [];\n private _tags: StzhMicrositeTeaserlistTag[] = [];\n private _tagChips: StzhChipselectItem[] = [];\n\n /* Numbers of items currently shown /\n @Prop({ mutable: true }) showItems: number = 6;\n private _initialShowItems: number;\n\n /* Numbers of item shown with each load more action /\n @Prop() stepItems: number = 6;\n\n @Element() element: HTMLStzhMicrositeTeaserlistElement;\n\n /* Active filter /\n @State() activeFilter: string = \"\";\n\n @State() items: StzhMicrositeTeaserlistItem[] = [];\n private _filteredItems: StzhMicrositeTeaserlistItem[] = [];\n private _filteredSlicedItems: StzhMicrositeTeaserlistItem[] = [];\n private _showMoreLink: boolean = false;\n\n @Watch(\"items\")\n @Watch(\"showItems\")\n @Watch(\"activeFilter\")\n async filterHandler() {\n this._filteredItems = this.items\n .filter((item) => {\n // return (this.activeFilter[0] !== \"\") ? item.tags.some(tag => this.activeFilters.indexOf(tag) > -1) : true;\n return (this.activeFilter !== \"\") ? item.tags.some(tag => this.activeFilter === tag) : true;\n });\n\n this._filteredSlicedItems = this._filteredItems\n .slice(0, this.showItems);\n\n this._showMoreLink = this.showItems < this._filteredItems.length;\n }\n\n @Watch(\"items\")\n @Watch(\"tags\")\n async tagsWatcher() {\n if (typeof this.tags === \"string\") {\n this._tags = JSON.parse(this.tags);\n } else {\n this._tags = this.tags;\n }\n\n this._tagChips = this._tags.map((tag) => ({\n \"label\": tag.name,\n \"value\": tag.id,\n \"variant\": \"filter\",\n \"size\": \"large\",\n \"counter\": ((tag.id)\n ? this.items.filter(item => item.tags.indexOf(tag.id) > -1).length\n : this.items.length).toString()\n }));\n }\n\n @Watch(\"api\")\n async apiWatcher(newValue: string) {\n if (!newValue) {\n return;\n }\n\n let apiUrl = this.api.replace(/\\{lang\\}/, this.localization.$locale);\n\n // load data from API\n const { data } = await axios.get(apiUrl);\n\n this.items = data.items;\n this.showItems = this._initialShowItems;\n }\n\n private handleChange = (event: CustomEvent<StzhChipselectChangeEvent>) => {\n this.showItems = this._initialShowItems;\n this.activeFilter = typeof event.detail.value === \"string\" ? event.detail.value : event.detail.value[0] \|\| \"\";\n };\n\n private handleMoreClick = () => {\n this.showItems = this.showItems + this.stepItems;\n };\n\n async componentWillLoad() {\n this._initialShowItems = this.showItems;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"microsite-teaserlist\");\n }\n\n await this.apiWatcher(this.api);\n }\n\n render() {\n const classes = {\n \"stzh-microsite-teaserlist\": true\n };\n\n return (\n <Host>\n <div class={classes}>\n {this._tagChips.length > 0 &&\n <stzh-chipselect\n hide-optional\n label-hidden\n class=\"stzh-microsite-teaserlist__filter\"\n label={this.localization.tagsLabel}\n data={this._tagChips}\n onStzhChange={this.handleChange}\n ></stzh-chipselect>\n }\n\n <stzh-cardlist layout=\"teasers\">\n {this._filteredSlicedItems.map((item) =>\n <stzh-card href={item.link}>\n {item.image &&\n <stzh-ratio slot=\"image\">\n <img src={item.image} />\n </stzh-ratio>\n }\n {item.title &&\n <div slot=\"heading\">{item.title}</div>\n }\n {/ <stzh-clamp slot=\"heading\" lines={2}>{item.title}</stzh-clamp> /}\n {item.description &&\n <div slot=\"content\">{item.description}</div>\n }\n {/ <stzh-clamp slot=\"content\" lines={3}>{item.description}</stzh-clamp> */}\n </stzh-card>\n )}\n </stzh-cardlist>\n\n {this._showMoreLink &&\n <div class=\"stzh-microsite-teaserlist__show-more\">\n <stzh-button\n variant=\"secondary\"\n label={this.localization.showMore}\n onClick={this.handleMoreClick}\n ></stzh-button>\n </div>\n }\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { forceUpdate, Host, h } from "@stencil/core";
 import { addMediaChangeListener, removeMediaChangeListener, media } from "../../utils/media-utils";
 /**
  * @slot - Slot for any text content
@@ -47,6 +47,19 @@ export class StzhProgressbar {
       return Object.assign(Object.assign({}, step), this.getItemAttributes(index));
     });
   }
+  onIndexChange() {
+    this.indexWatcher(this.index);
+    this.setCurrentSteps();
+    forceUpdate(this.element);
+  }
+  indexWatcher(newIndex) {
+    if (typeof newIndex === "string") {
+      this.index = JSON.parse(newIndex);
+    }
+    else {
+      this.index = newIndex;
+    }
+  }
   stepsWatcher() {
     this.setCurrentSteps();
   }
@@ -100,10 +113,19 @@ export class StzhProgressbar {
   }
   async componentWillLoad() {
     this.dataWatcher(this.data);
+    this.indexWatcher(this.index);
     if (!this.localization) {
       this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "progressbar");
     }
   }
+  async componentShouldUpdate() {
+    this.dataWatcher(this.data);
+    this.indexWatcher(this.index);
+  }
+  async componentDidUpdate() {
+    this.dataWatcher(this.data);
+    this.indexWatcher(this.index);
+  }
   connectedCallback() {
     this.setCurrentSteps();
     addMediaChangeListener(this.setCurrentSteps);
@@ -194,7 +216,7 @@ export class StzhProgressbar {
           "text": "Index of the item that be active"
         },
         "attribute": "index",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "0"
       },
       "steps": {
@@ -336,6 +358,9 @@ export class StzhProgressbar {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "index",
+        "methodName": "onIndexChange"
+      }, {
         "propName": "steps",
         "methodName": "stepsWatcher"
       }, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-progressbar.js","sourceRoot":"","sources":["../../../../src/components/stzh-progressbar/stzh-progressbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Watch,\n Method\n} from \"@stencil/core\";\n\nimport {\n StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/*\n @slot - Slot for any text content\n /\n@Component({\n tag: \"stzh-progressbar\",\n styleUrl: \"stzh-progressbar.scss\",\n scoped: true\n})\nexport class StzhProgressbar {\n /* Translation strings /\n @Prop() localization: StzhProgressbarLocalizedText;\n\n /\n Step data (JSON array with objects that have `label` attribute and optional:\n * - `disabled`, if step should be disabled\n * - `icon`, if icon instead of step number should be displayed):\n * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n \n ```\n * {\n * \"label\": \"Step Label\"\n * \"icon\": \"clock\",\n * \"disabled\": true\n * }\n * ```\n /\n @Prop() data: StzhProgressbarDataItem[] \| string = [];\n private _data: StzhProgressbarDataItem[];\n\n /* Index of the item that be active /\n @Prop() index: number = 0;\n\n /* Number of steps to show below small breakpoint /\n @Prop() steps: number = 5;\n\n /* Number of steps to show above small breakpoint /\n @Prop() stepsSmall: number = 6;\n\n /* Number of steps to show above medium breakpoint /\n @Prop() stepsMedium: number = 0;\n\n /* Number of steps to show above large breakpoint /\n @Prop() stepsLarge: number = 0;\n\n /* Number of steps to show above ultra breakpoint /\n @Prop() stepsUltra: number = 0;\n\n /* Whether all the progressbar-items are clickable (overrides item.clickDisabled in data property). /\n @Prop() clickDisabled: boolean = false;\n\n @State() currentSteps: number;\n\n @Element() element: HTMLStzhProgressbarElement;\n\n /\n Return infos about rendered progressbar items.\n * Array of objects including: hide (whether step is hidden)\n * / passed (whether step has been passed)\n * / current (whether step is currently active)\n * / dotted (whether step has dotted style active)\n * / first\|last (whether step is first or last)\n * / label\n */\n @Method()\n async getItemData() {\n return this._data.map((step, index) => {\n return {\n ...step,\n ...this.getItemAttributes(index)\n }\n });\n }\n\n @Watch(\"steps\")\n @Watch(\"stepsSmall\")\n @Watch(\"stepsMedium\")\n @Watch(\"stepsLarge\")\n @Watch(\"stepsUltra\")\n stepsWatcher() {\n this.setCurrentSteps();\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n }\n else {\n this._data = newValue;\n }\n\n this.lastItemIndex = this._data.length - 1;\n this.maxStepIndex = this.currentSteps - 1;\n this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n }\n\n private lastItemIndex: number;\n private maxStepIndex: number;\n private withinLastFewSteps: boolean;\n\n private getItemAttributes(itemIndex: number): any {\n const item = {} as HTMLStzhProgressbarItemElement;\n\n item.step = itemIndex + 1;\n item.first = itemIndex === 0;\n item.last = itemIndex === this.lastItemIndex;\n item.current = itemIndex === this.index;\n item.passed = itemIndex < this.index;\n\n const stepItemFromData = this._data[itemIndex];\n item.incomplete = stepItemFromData.incomplete;\n\n // hide overflowings if more items than max steps in DOM\n if (this._data.length > this.currentSteps) {\n // add dots to last item if current index is below the last few items\n if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n item.dotted = true;\n }\n\n if (this.index < 2) {\n // hide overflowing items on the right\n item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n } else {\n // add dots to first item if current item is third or above\n if (itemIndex === 0) {\n item.dotted = true;\n }\n\n let substract = this.index;\n\n // if is within the last elements, calculate how much previous\n // should be shown to stay on 5 visible elements\n if (this.withinLastFewSteps) {\n substract = this._data.length - this.maxStepIndex;\n }\n\n // hide overflowing items on left and right side\n item.hide = itemIndex > 0 && itemIndex < substract\n \|\| itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n }\n }\n\n return item;\n }\n\n private setCurrentSteps = () => {\n if (media(\"ultra\").matches && this.stepsUltra) {\n this.currentSteps = this.stepsUltra;\n } else if (media(\"large\").matches && this.stepsLarge) {\n this.currentSteps = this.stepsLarge;\n } else if (media(\"medium\").matches && this.stepsMedium) {\n this.currentSteps = this.stepsMedium;\n } else if (media(\"small\").matches && this.stepsSmall) {\n this.currentSteps = this.stepsSmall;\n } else {\n this.currentSteps = this.steps;\n }\n }\n\n async componentWillLoad() {\n this.dataWatcher(this.data);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n }\n }\n\n connectedCallback() {\n this.setCurrentSteps();\n addMediaChangeListener(this.setCurrentSteps);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.setCurrentSteps);\n }\n\n render() {\n const classes = {\n \"stzh-progressbar\": true,\n [`stzh-progressbar--index-${this.index}`]: !!this.index\n };\n\n return (\n <Host\n style={{\n '--steps': this.currentSteps ? this.currentSteps.toString() : null,\n }}\n >\n <div class={classes}>\n <div\n class=\"stzh-progressbar__items\"\n role=\"list\"\n aria-label={this.localization.label}\n >\n {this._data.map((step, index) =>\n <stzh-progressbar-item\n {...this.getItemAttributes(index)}\n icon={step.icon}\n disabled={step.disabled}\n label={step.label}\n click-disabled={step.clickDisabled !== undefined ? step.clickDisabled : this.clickDisabled}\n class=\"stzh-progressbar__item\"\n ></stzh-progressbar-item>\n )}\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-progressbar.js","sourceRoot":"","sources":["../../../../src/components/stzh-progressbar/stzh-progressbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n forceUpdate,\n Host,\n h,\n Prop,\n State,\n Element,\n Watch,\n Method\n} from \"@stencil/core\";\n\nimport {\n StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/*\n @slot - Slot for any text content\n /\n@Component({\n tag: \"stzh-progressbar\",\n styleUrl: \"stzh-progressbar.scss\",\n scoped: true\n})\nexport class StzhProgressbar {\n /* Translation strings /\n @Prop() localization: StzhProgressbarLocalizedText;\n\n /\n Step data (JSON array with objects that have `label` attribute and optional:\n * - `disabled`, if step should be disabled\n * - `icon`, if icon instead of step number should be displayed):\n * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n \n ```\n * {\n * \"label\": \"Step Label\"\n * \"icon\": \"clock\",\n * \"disabled\": true\n * }\n * ```\n /\n @Prop() data: StzhProgressbarDataItem[] \| string = [];\n private _data: StzhProgressbarDataItem[];\n\n /* Index of the item that be active /\n @Prop({ reflect: true }) index: number = 0;\n\n /* Number of steps to show below small breakpoint /\n @Prop() steps: number = 5;\n\n /* Number of steps to show above small breakpoint /\n @Prop() stepsSmall: number = 6;\n\n /* Number of steps to show above medium breakpoint /\n @Prop() stepsMedium: number = 0;\n\n /* Number of steps to show above large breakpoint /\n @Prop() stepsLarge: number = 0;\n\n /* Number of steps to show above ultra breakpoint /\n @Prop() stepsUltra: number = 0;\n\n /* Whether all the progressbar-items are clickable (overrides item.clickDisabled in data property). /\n @Prop() clickDisabled: boolean = false;\n\n @State() currentSteps: number;\n\n @Element() element: HTMLStzhProgressbarElement;\n\n /\n Return infos about rendered progressbar items.\n * Array of objects including: hide (whether step is hidden)\n * / passed (whether step has been passed)\n * / current (whether step is currently active)\n * / dotted (whether step has dotted style active)\n * / first\|last (whether step is first or last)\n * / label\n */\n @Method()\n async getItemData() {\n return this._data.map((step, index) => {\n return {\n ...step,\n ...this.getItemAttributes(index)\n }\n });\n }\n\n @Watch(\"index\")\n onIndexChange() {\n this.indexWatcher(this.index);\n this.setCurrentSteps();\n forceUpdate(this.element);\n }\n\n indexWatcher(newIndex: string \| number) {\n if (typeof newIndex === \"string\") {\n this.index = JSON.parse(newIndex);\n }\n else {\n this.index = newIndex;\n }\n }\n\n @Watch(\"steps\")\n @Watch(\"stepsSmall\")\n @Watch(\"stepsMedium\")\n @Watch(\"stepsLarge\")\n @Watch(\"stepsUltra\")\n stepsWatcher() {\n this.setCurrentSteps();\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n }\n else {\n this._data = newValue;\n }\n\n this.lastItemIndex = this._data.length - 1;\n this.maxStepIndex = this.currentSteps - 1;\n this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n }\n\n private lastItemIndex: number;\n private maxStepIndex: number;\n private withinLastFewSteps: boolean;\n\n private getItemAttributes(itemIndex: number): any {\n const item = {} as HTMLStzhProgressbarItemElement;\n\n item.step = itemIndex + 1;\n item.first = itemIndex === 0;\n item.last = itemIndex === this.lastItemIndex;\n item.current = itemIndex === this.index;\n item.passed = itemIndex < this.index;\n\n const stepItemFromData = this._data[itemIndex];\n item.incomplete = stepItemFromData.incomplete;\n\n // hide overflowings if more items than max steps in DOM\n if (this._data.length > this.currentSteps) {\n // add dots to last item if current index is below the last few items\n if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n item.dotted = true;\n }\n\n if (this.index < 2) {\n // hide overflowing items on the right\n item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n } else {\n // add dots to first item if current item is third or above\n if (itemIndex === 0) {\n item.dotted = true;\n }\n\n let substract = this.index;\n\n // if is within the last elements, calculate how much previous\n // should be shown to stay on 5 visible elements\n if (this.withinLastFewSteps) {\n substract = this._data.length - this.maxStepIndex;\n }\n\n // hide overflowing items on left and right side\n item.hide = itemIndex > 0 && itemIndex < substract\n \|\| itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n }\n }\n\n return item;\n }\n\n private setCurrentSteps = () => {\n if (media(\"ultra\").matches && this.stepsUltra) {\n this.currentSteps = this.stepsUltra;\n } else if (media(\"large\").matches && this.stepsLarge) {\n this.currentSteps = this.stepsLarge;\n } else if (media(\"medium\").matches && this.stepsMedium) {\n this.currentSteps = this.stepsMedium;\n } else if (media(\"small\").matches && this.stepsSmall) {\n this.currentSteps = this.stepsSmall;\n } else {\n this.currentSteps = this.steps;\n }\n }\n\n async componentWillLoad() {\n this.dataWatcher(this.data);\n this.indexWatcher(this.index);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n }\n }\n\n async componentShouldUpdate() {\n this.dataWatcher(this.data);\n this.indexWatcher(this.index);\n }\n\n async componentDidUpdate() {\n this.dataWatcher(this.data);\n this.indexWatcher(this.index);\n }\n\n connectedCallback() {\n this.setCurrentSteps();\n addMediaChangeListener(this.setCurrentSteps);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.setCurrentSteps);\n }\n\n render() {\n const classes = {\n \"stzh-progressbar\": true,\n [`stzh-progressbar--index-${this.index}`]: !!this.index\n };\n\n return (\n <Host\n style={{\n '--steps': this.currentSteps ? this.currentSteps.toString() : null,\n }}\n >\n <div class={classes}>\n <div\n class=\"stzh-progressbar__items\"\n role=\"list\"\n aria-label={this.localization.label}\n >\n {this._data.map((step, index) =>\n <stzh-progressbar-item\n {...this.getItemAttributes(index)}\n icon={step.icon}\n disabled={step.disabled}\n label={step.label}\n click-disabled={step.clickDisabled !== undefined ? step.clickDisabled : this.clickDisabled}\n class=\"stzh-progressbar__item\"\n ></stzh-progressbar-item>\n )}\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -471,7 +471,7 @@ export class StzhSearch {
     const wrapperProps = typeof this.templateResultWrapperProps === "function"
       ? this.templateResultWrapperProps(this.element)
       : this.templateResultWrapperProps;
-    return (h(Host, { "has-aside-filters": filtersAsideUsed, fullwidth: this.isStzhAnchornavVisible.toString() }, h("form", { ref: el => (this.formElement = el), novalidate: true, class: classes, onSubmit: this.handleFormSubmit, onReset: this.handleFormReset }, h("div", { class: "stzh-search__filters-main", onStzhChange: this.handleMainFilterChange }, !!this.heading && (h("stzh-heading", { class: "stzh-search__header-heading", curve: "h2" }, this.heading)), h("slot", { name: "filters-main" }), !chipsProvided && this.chipResults.length > 0 && (h("div", { class: "stzh-search__filters-main-chips" }, this.chipResultsHeading && (h("stzh-text", { font: "heavy", size: "milli", color: "primary" }, this.chipResultsHeading)), this.chipResults[0].options ? (h("stzh-chipgroup", null, this.chipResults.map(chipResult => (h("stzh-dropdown", { label: chipResult.label, name: chipResult.value, variant: "filter", "no-search": true, "hide-optional": true, inline: true, options: chipResult.options }))))) : (h("stzh-chipselect", { multiple: true, name: "subject", label: this.chipResultsHeading, "label-hidden": true, data: this.chipResults.map(chipResult => ({
+    return (h(Host, { "has-aside-filters": filtersAsideUsed, fullwidth: this.isStzhAnchornavVisible.toString() }, h("form", { ref: el => (this.formElement = el), novalidate: true, class: classes, onSubmit: this.handleFormSubmit, onReset: this.handleFormReset }, h("div", { class: "stzh-search__filters-main", onStzhChange: this.handleMainFilterChange }, !!this.heading && (h("stzh-heading", { class: "stzh-search__header-heading", curve: "h2" }, this.heading)), h("slot", { name: "filters-main" }), !chipsProvided && this.chipResults.length > 0 && (h("div", { class: "stzh-search__filters-main-chips" }, this.chipResultsHeading && (h("stzh-text", { font: "heavy", size: "milli", color: "primary" }, this.chipResultsHeading)), this.chipResults[0].options ? (h("stzh-chipgroup", null, this.chipResults.map(chipResult => (h("stzh-dropdown", { label: chipResult.label, name: chipResult.value, variant: "filter", size: "large", "no-search": true, "hide-optional": true, inline: true, options: chipResult.options }))))) : (h("stzh-chipselect", { multiple: true, name: "subject", label: this.chipResultsHeading, "label-hidden": true, data: this.chipResults.map(chipResult => ({
         label: chipResult.label,
         value: chipResult.value,
         counter: `${chipResult.amount}`,