@oiz/stzh-components 2.2.0 → 2.3.0-alpha

package/dist/cjs/stzh-chip.cjs.entry.js

@@ -1,100 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-9fcb4305.js');
-
-const stzhChipCss = ".sc-stzh-chip-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-chip-h{display:none}.sc-stzh-chip-h *.sc-stzh-chip,.sc-stzh-chip-h *.sc-stzh-chip::before,.sc-stzh-chip-h *.sc-stzh-chip::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-chip-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--height:2rem;--border:0.0625rem solid var(--stzh-color-grey13);--border-radius:1rem;--remove-color:var(--stzh-base-lead-color);--remove-border-radius:1.5rem;--background-color:var(--stzh-color-white);--icon-size:var(--stzh-icon-size-small);--icon-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--counter-color:var(--stzh-color-primary48);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border:var(--border);--hover-background-color:var(--stzh-color-primary8);--hover-remove-color:var(--hover-color);--hover-remove-background-color:var(--hover-background-color);--hover-icon-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-counter-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));display:-ms-inline-flexbox;display:inline-flex;border-radius:var(--border-radius)}@media (forced-colors: active), (-ms-high-contrast: active){.sc-stzh-chip-h{--hover-color:Highlight;--hover-border:0.0625rem solid Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[size=small].sc-stzh-chip-h{--height:1.5rem;--border-radius:0.75rem;--icon-size:var(--stzh-icon-size-xsmall)}[variant=input].sc-stzh-chip-h{--border:0.0625rem solid transparent;--background-color:var(--stzh-color-grey5);--hover-border:0.0625rem solid transparent}[variant=tag].sc-stzh-chip-h{--color:var(--stzh-base-color);--icon-color:var(--stzh-base-color);--counter-color:var(--stzh-base-color);--border:0.0625rem solid transparent;--background-color:var(--stzh-color-black8);--hover-color:var(--stzh-base-color);--hover-border:0.0625rem solid transparent;--hover-background-color:var(--stzh-color-black8);--hover-icon-color:var(--stzh-base-color);--hover-counter-color:var(--stzh-base-color)}[type=secondary].sc-stzh-chip-h{--color:var(--stzh-base-lead-color);--counter-color:var(--stzh-color-grey40)}[type=important].sc-stzh-chip-h{--color:var(--stzh-color-error);--icon-color:var(--stzh-color-error);--counter-color:var(--stzh-color-error);--hover-color:var(--stzh-color-error);--hover-icon-color:var(--stzh-color-error);--hover-counter-color:var(--stzh-color-error)}@media (forced-colors: active), (-ms-high-contrast: active){[type=important].sc-stzh-chip-h{--hover-color:Highlight;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[active].sc-stzh-chip-h:not([active=false]){--color:var(--stzh-color-white);--border:0.0625rem solid transparent;--remove-color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--icon-color:var(--stzh-color-white);--counter-color:var(--stzh-color-white48);--hover-color:var(--stzh-color-white);--hover-border:0.0625rem solid transparent;--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-remove-color:var(--stzh-color-white);--hover-remove-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-icon-color:var(--stzh-color-white);--hover-counter-color:var(--stzh-color-white48)}@media (forced-colors: active), (-ms-high-contrast: active){[active].sc-stzh-chip-h:not([active=false]){--color:SelectedItem;--border:0.0625rem solid SelectedItem;--remove-color:SelectedItem;--background-color:Canvas;--icon-color:SelectedItem;--counter-color:SelectedItem;--hover-color:Highlight;--hover-border:0.0625rem solid Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[disabled].sc-stzh-chip-h:not([disabled=false]){--color:var(--stzh-color-grey25);--border:0.0625rem solid var(--stzh-base-border-color);--remove-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-white);--icon-color:var(--stzh-color-grey25);--counter-color:var(--stzh-color-grey25);--hover-color:var(--stzh-color-grey25);--hover-border:0.0625rem solid var(--stzh-base-border-color);--hover-background-color:var(--stzh-color-white);--hover-remove-color:var(--stzh-color-grey13);--hover-remove-background-color:transparent;--hover-icon-color:var(--stzh-color-grey25);--hover-counter-color:var(--stzh-color-grey25)}.sc-stzh-chip-h .sc-stzh-chip-s>stzh-icon,.stzh-chip__icon.sc-stzh-chip{--size:var(--icon-size)}.stzh-chip.sc-stzh-chip{position:relative;white-space:nowrap}.stzh-chip__vhidden.sc-stzh-chip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chip__button.sc-stzh-chip{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;height:var(--height);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);padding:0 var(--stzh-space-medium);color:var(--color);-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--border);background-color:var(--background-color);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);text-decoration:none}.stzh-chip__icon-wrapper.sc-stzh-chip{display:-ms-flexbox;display:flex;color:var(--icon-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-chip__icon-wrapper.sc-stzh-chip:not(:empty){margin-right:var(--stzh-space-xsmall)}.stzh-chip__counter.sc-stzh-chip{display:-ms-flexbox;display:flex;font-variant-numeric:tabular-nums;margin-left:var(--stzh-space-xsmall);color:var(--counter-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-chip__remove.sc-stzh-chip{position:absolute;top:0;right:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background:none;padding:0;width:var(--height);height:var(--height);border-radius:var(--remove-border-radius);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-left:var(--stzh-space-xxsmall);color:var(--remove-color);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed)}.stzh-chip__remove.sc-stzh-chip:hover{color:var(--hover-remove-color);background-color:var(--hover-remove-background-color)}.stzh-chip__remove-icon.sc-stzh-chip{--size:var(--stzh-icon-size-xxsmall)}.stzh-chip__button.sc-stzh-chip:hover,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip{color:var(--hover-color);background-color:var(--hover-background-color);border:var(--hover-border)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__counter.sc-stzh-chip{color:var(--hover-counter-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__icon-wrapper.sc-stzh-chip{color:var(--hover-icon-color)}.stzh-chip--size-small.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);padding:0 var(--stzh-space-small)}.stzh-chip--size-small.sc-stzh-chip .stzh-chip__icon-wrapper.sc-stzh-chip:not(:empty){margin-right:var(--stzh-space-xxsmall)}.stzh-chip--size-small.sc-stzh-chip .stzh-chip__counter.sc-stzh-chip{margin-left:var(--stzh-space-xxsmall)}.stzh-chip--is-removable.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{padding-right:calc(var(--height) + var(--stzh-space-xxsmall))}.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__button.sc-stzh-chip,.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__remove.sc-stzh-chip{cursor:not-allowed}";
-
-const StzhChip = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.stzhClick = index.createEvent(this, "stzhClick", 7);
-    this.stzhRemove = index.createEvent(this, "stzhRemove", 7);
-    this.stzhFocus = index.createEvent(this, "stzhFocus", 7);
-    this.stzhBlur = index.createEvent(this, "stzhBlur", 7);
-    this.onFocus = (event) => {
-      const focusEvent = new FocusEvent("focus", {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(focusEvent);
-      this.stzhFocus.emit({
-        component: "stzh-chip",
-        originalEvent: event
-      });
-    };
-    this.onBlur = (event) => {
-      const blurEvent = new FocusEvent("blur", {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(blurEvent);
-      this.stzhBlur.emit({
-        component: "stzh-chip",
-        originalEvent: event
-      });
-    };
-    this.onClick = (event) => {
-      this.stzhClick.emit({
-        component: "stzh-chip",
-        originalEvent: event
-      });
-    };
-    this.onRemoveClick = (event) => {
-      this.stzhRemove.emit({
-        component: "stzh-chip",
-        originalEvent: event
-      });
-    };
-    this.label = "";
-    this.icon = "";
-    this.href = "";
-    this.target = "";
-    this.removable = false;
-    this.variant = "tag";
-    this.size = "default";
-    this.type = "default";
-    this.counter = "";
-    this.removeLabel = "";
-    this.active = false;
-    this.disabled = false;
-    this.a11yTabindex = undefined;
-    this.a11yLabel = undefined;
-    this.a11yDescribedby = "";
-  }
-  /** Focus menu item */
-  async setFocus() {
-    this.chip.focus();
-  }
-  renderInner() {
-    return (index.h(index.Fragment, null, index.h("div", { class: "stzh-chip__icon-wrapper" }, this.icon ?
-      index.h("stzh-icon", { class: "stzh-chip__icon", name: this.icon })
-      :
-        index.h("slot", { name: "icon" })), index.h("div", { class: "stzh-chip__label" }, this.label ? this.label : index.h("slot", null), index.h("span", { class: "stzh-chip__vhidden" }, "\u00A0(", this.counter, ")")), this.counter &&
-      index.h("div", { class: "stzh-chip__counter", "aria-hidden": "true" }, this.counter)));
-  }
-  render() {
-    const classes = {
-      "stzh-chip": true,
-      "stzh-chip--is-active": this.active,
-      "stzh-chip--is-disabled": this.disabled,
-      "stzh-chip--is-removable": this.removable,
-      "stzh-chip--has-counter": !!this.counter,
-      [`stzh-chip--type-${this.type}`]: !!this.type,
-      [`stzh-chip--size-${this.size}`]: !!this.size,
-      [`stzh-chip--${this.variant}`]: !!this.variant
-    };
-    return (index.h(index.Host, null, index.h("div", { class: classes }, this.removable &&
-      index.h("button", { class: "stzh-chip__remove", onClick: this.onRemoveClick, disabled: this.disabled, "aria-label": this.removeLabel, type: "button" }, index.h("stzh-icon", { class: "stzh-chip__remove-icon", name: "close" })), this.href ?
-      index.h("a", { ref: (el) => (this.chip = el), class: "stzh-chip__button", href: this.disabled ? null : this.href, target: this.target, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner())
-      :
-        index.h("button", { ref: (el) => (this.chip = el), class: "stzh-chip__button", disabled: this.disabled, type: "button", tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner()))));
-  }
-  get element() { return index.getElement(this); }
-};
-StzhChip.style = stzhChipCss;
-
-exports.stzh_chip = StzhChip;

package/dist/cjs/stzh-clamp.cjs.entry.js

@@ -1,27 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-9fcb4305.js');
-
-const stzhClampCss = ".sc-stzh-clamp-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-clamp-h{display:none}.sc-stzh-clamp-h *.sc-stzh-clamp,.sc-stzh-clamp-h *.sc-stzh-clamp::before,.sc-stzh-clamp-h *.sc-stzh-clamp::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-clamp-h{--lines:1;width:100%;color:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit}[lines=\"1\"].sc-stzh-clamp-h{--lines:1}[lines=\"2\"].sc-stzh-clamp-h{--lines:2}[lines=\"3\"].sc-stzh-clamp-h{--lines:3}[lines=\"4\"].sc-stzh-clamp-h{--lines:4}[lines=\"5\"].sc-stzh-clamp-h{--lines:5}@media screen and (min-width: 600px){[lines-small=\"1\"].sc-stzh-clamp-h{--lines:1}}@media screen and (min-width: 600px){[lines-small=\"2\"].sc-stzh-clamp-h{--lines:2}}@media screen and (min-width: 600px){[lines-small=\"3\"].sc-stzh-clamp-h{--lines:3}}@media screen and (min-width: 600px){[lines-small=\"4\"].sc-stzh-clamp-h{--lines:4}}@media screen and (min-width: 600px){[lines-small=\"5\"].sc-stzh-clamp-h{--lines:5}}@media screen and (min-width: 800px){[lines-smallheader=\"1\"].sc-stzh-clamp-h{--lines:1}}@media screen and (min-width: 800px){[lines-smallheader=\"2\"].sc-stzh-clamp-h{--lines:2}}@media screen and (min-width: 800px){[lines-smallheader=\"3\"].sc-stzh-clamp-h{--lines:3}}@media screen and (min-width: 800px){[lines-smallheader=\"4\"].sc-stzh-clamp-h{--lines:4}}@media screen and (min-width: 800px){[lines-smallheader=\"5\"].sc-stzh-clamp-h{--lines:5}}@media screen and (min-width: 1024px){[lines-medium=\"1\"].sc-stzh-clamp-h{--lines:1}}@media screen and (min-width: 1024px){[lines-medium=\"2\"].sc-stzh-clamp-h{--lines:2}}@media screen and (min-width: 1024px){[lines-medium=\"3\"].sc-stzh-clamp-h{--lines:3}}@media screen and (min-width: 1024px){[lines-medium=\"4\"].sc-stzh-clamp-h{--lines:4}}@media screen and (min-width: 1024px){[lines-medium=\"5\"].sc-stzh-clamp-h{--lines:5}}@media screen and (min-width: 1260px){[lines-large=\"1\"].sc-stzh-clamp-h{--lines:1}}@media screen and (min-width: 1260px){[lines-large=\"2\"].sc-stzh-clamp-h{--lines:2}}@media screen and (min-width: 1260px){[lines-large=\"3\"].sc-stzh-clamp-h{--lines:3}}@media screen and (min-width: 1260px){[lines-large=\"4\"].sc-stzh-clamp-h{--lines:4}}@media screen and (min-width: 1260px){[lines-large=\"5\"].sc-stzh-clamp-h{--lines:5}}@media screen and (min-width: 1440px){[lines-ultra=\"1\"].sc-stzh-clamp-h{--lines:1}}@media screen and (min-width: 1440px){[lines-ultra=\"2\"].sc-stzh-clamp-h{--lines:2}}@media screen and (min-width: 1440px){[lines-ultra=\"3\"].sc-stzh-clamp-h{--lines:3}}@media screen and (min-width: 1440px){[lines-ultra=\"4\"].sc-stzh-clamp-h{--lines:4}}@media screen and (min-width: 1440px){[lines-ultra=\"5\"].sc-stzh-clamp-h{--lines:5}}.stzh-clamp.sc-stzh-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);line-clamp:var(--lines);overflow:hidden}";
-
-const StzhClamp = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.lines = 1;
-    this.linesSmall = 0;
-    this.linesMedium = 0;
-    this.linesLarge = 0;
-    this.linesUltra = 0;
-  }
-  render() {
-    const classes = {
-      "stzh-clamp": true
-    };
-    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("slot", null))));
-  }
-};
-StzhClamp.style = stzhClampCss;
-
-exports.stzh_clamp = StzhClamp;

package/dist/cjs/stzh-contactaddress.cjs.entry.js

@@ -1,91 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-9fcb4305.js');
-const utils = require('./utils-ff153309.js');
-
-const stzhContactaddressCss = ".sc-stzh-contactaddress-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-contactaddress-h{display:none}.sc-stzh-contactaddress-h *.sc-stzh-contactaddress,.sc-stzh-contactaddress-h *.sc-stzh-contactaddress::before,.sc-stzh-contactaddress-h *.sc-stzh-contactaddress::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-contactaddress-h .sc-stzh-contactaddress-s>[slot=image]{width:5.5rem;height:5.5rem;top:0;left:0;border-radius:50%;-o-object-fit:cover;object-fit:cover;margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 800px){.sc-stzh-contactaddress-h .sc-stzh-contactaddress-s>[slot=image]{margin-right:var(--stzh-space-xlarge);margin-bottom:0}}@media screen and (min-width: 800px) and (min-width: 1024px){.sc-stzh-contactaddress-h .sc-stzh-contactaddress-s>[slot=image]{margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 800px) and (min-width: 1260px){.sc-stzh-contactaddress-h .sc-stzh-contactaddress-s>[slot=image]{margin-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-contactaddress-h .sc-stzh-contactaddress-s>[slot=image]{width:12.25rem;height:12.25rem}}.stzh-contactaddress.sc-stzh-contactaddress{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 1024px){.stzh-contactaddress.sc-stzh-contactaddress{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-contactaddress.sc-stzh-contactaddress,.stzh-contactaddress__inner-wrapper.sc-stzh-contactaddress{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 800px){.stzh-contactaddress.sc-stzh-contactaddress,.stzh-contactaddress__inner-wrapper.sc-stzh-contactaddress{-ms-flex-direction:row;flex-direction:row}}.stzh-contactaddress__wrapper.sc-stzh-contactaddress{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.stzh-contactaddress__image.sc-stzh-contactaddress{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}.stzh-contactaddress__pobox.sc-stzh-contactaddress{margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-contactaddress__pobox.sc-stzh-contactaddress{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-contactaddress__pobox.sc-stzh-contactaddress{margin-top:var(--stzh-space-large)}}.stzh-contactaddress__main-heading.sc-stzh-contactaddress{margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-contactaddress__main-heading.sc-stzh-contactaddress{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-contactaddress__main-heading.sc-stzh-contactaddress{margin-bottom:var(--stzh-space-large)}}.stzh-contactaddress__number-link.sc-stzh-contactaddress{color:var(--stzh-link-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.stzh-contactaddress__number-link.sc-stzh-contactaddress:hover,.stzh-contactaddress__number-link.sc-stzh-contactaddress:focus{color:var(--stzh-link-hover-color)}.stzh-contactaddress__info.sc-stzh-contactaddress{-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 800px){.stzh-contactaddress__info.sc-stzh-contactaddress{-ms-flex-preferred-size:45%;flex-basis:45%}}.stzh-contactaddress__availability-title.sc-stzh-contactaddress{margin-bottom:var(--stzh-space-xsmall)}.stzh-contactaddress__availability.sc-stzh-contactaddress{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 800px){.stzh-contactaddress__availability.sc-stzh-contactaddress{margin-left:var(--stzh-space-xlarge);margin-top:0;-ms-flex-preferred-size:55%;flex-basis:55%}}@media screen and (min-width: 800px) and (min-width: 1024px){.stzh-contactaddress__availability.sc-stzh-contactaddress{margin-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 800px) and (min-width: 1260px){.stzh-contactaddress__availability.sc-stzh-contactaddress{margin-left:var(--stzh-space-xxxlarge)}}.stzh-contactaddress--has-border.sc-stzh-contactaddress{padding-bottom:var(--stzh-space-xlarge);border-bottom:0.0625rem solid var(--stzh-base-border-color)}";
-
-function formatTel(tel) {
-  return tel.replace(/\s/g, '');
-}
-const StzhContactaddress = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this._numbers = [];
-    this._availability = [];
-    this.availabilityDataItems = [];
-    this.type = "Organization";
-    this.heading = undefined;
-    this.mainHeading = undefined;
-    this.name = undefined;
-    this.street = undefined;
-    this.streetInfo = undefined;
-    this.postalCode = undefined;
-    this.location = undefined;
-    this.numbers = [];
-    this.poBoxHeading = undefined;
-    this.poboxTitle = undefined;
-    this.poboxPostalCode = undefined;
-    this.poboxLocation = undefined;
-    this.availabilityTitle = undefined;
-    this.availability = undefined;
-    this.withBorder = false;
-  }
-  availabilityWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._availability = JSON.parse(newValue);
-    }
-    else {
-      this._availability = newValue;
-    }
-    if (this._availability) {
-      this.availabilityDataItems = this._availability.map((item) => ({
-        value: item.hours.join(' | '),
-        label: item.weekday
-      }));
-    }
-  }
-  numbersWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._numbers = JSON.parse(newValue);
-    }
-    else {
-      this._numbers = newValue;
-    }
-  }
-  async componentWillLoad() {
-    this.numbersWatcher(this.numbers);
-    this.availabilityWatcher(this.availability);
-  }
-  render() {
-    const hasImage = utils.hasSlot(this.element, "image");
-    const classes = {
-      "stzh-contactaddress": true,
-      "stzh-contactaddress--has-image": hasImage,
-      "stzh-contactaddress--has-border": this.withBorder
-    };
-    return (index.h(index.Host, null, index.h("div", { class: classes, itemscope: true, itemtype: `http://schema.org/${this.type}` }, index.h("div", { class: "stzh-contactaddress__image" }, index.h("slot", { name: "image" })), index.h("div", { class: "stzh-contactaddress__wrapper" }, this.mainHeading &&
-      index.h("stzh-heading", { level: "3", class: "stzh-contactaddress__main-heading", itemprop: (this.type === "Organization" && !this.heading
-          || this.type === "Person" && !this.name) ? "name" : null, innerHTML: this.mainHeading }), index.h("div", { class: "stzh-contactaddress__inner-wrapper" }, index.h("div", { class: "stzh-contactaddress__info" }, this.heading &&
-      index.h("stzh-heading", { level: "4", class: "stzh-contactaddress__heading", itemprop: this.type === "Organization" || !this.name ? "name" : null, innerHTML: this.heading }), this.name &&
-      index.h("div", { class: "stzh-contactaddress__name", itemprop: this.type === "Person" ? "name" : null }, this.name), (this.street || this.postalCode || this.location) &&
-      index.h("div", { class: "stzh-contactaddress__address", itemprop: "address", itemscope: true, itemtype: "http://schema.org/PostalAddress" }, this.street &&
-        index.h("div", { class: "stzh-contactaddress__street", itemprop: "streetAddress" }, this.street, this.streetInfo &&
-          index.h(index.Fragment, null, index.h("br", null), " ", this.streetInfo)), this.postalCode &&
-        index.h("span", { class: "stzh-contactaddress__postal-code", itemprop: "postalCode" }, this.postalCode, "\u00A0"), this.location &&
-        index.h("span", { class: "stzh-contactaddress__locality", itemprop: "addressLocality" }, this.location)), this._numbers.map((number) => index.h("div", { class: "stzh-contactaddress__number" }, index.h("span", null, number.label, "\u00A0"), index.h("span", { itemprop: number.type === "fax" ? "faxNumber" : "telephone" }, index.h("a", { class: "stzh-contactaddress__number-link", href: `${number.type}:${formatTel(number.number)}` }, number.number)))), (this.poBoxHeading || this.poboxTitle || this.poboxPostalCode || this.poboxLocation) &&
-      index.h("div", { class: "stzh-contactaddress__pobox" }, index.h("div", { class: "stzh-contactaddress__pobox-heading" }, this.poBoxHeading), index.h("div", { class: "stzh-contactaddress__pobox-title" }, this.poboxTitle), index.h("span", { class: "stzh-contactaddress__pobox-postal-code" }, this.poboxPostalCode, "\u00A0"), index.h("span", { class: "stzh-contactaddress__pobox-locality" }, this.poboxLocation))), this.availability &&
-      index.h("div", { class: "stzh-contactaddress__availability" }, this.availabilityTitle &&
-        index.h("stzh-heading", { level: "4", class: "stzh-contactaddress__availability-title" }, this.availabilityTitle), index.h("stzh-datalist", { hideBorder: true, directionSmall: "vertical", items: this.availabilityDataItems })))))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "availability": ["availabilityWatcher"],
-    "numbers": ["numbersWatcher"]
-  }; }
-};
-StzhContactaddress.style = stzhContactaddressCss;
-
-exports.stzh_contactaddress = StzhContactaddress;

package/dist/collection/pages/example.stories.js

@@ -1,170 +0,0 @@
-import { h } from '../utils/h';
-import { Default as Menu } from '../components/stzh-menu/stzh-menu.stories';
-
-export default {
-  title: 'Pages/Example',
-  parameters: {
-    docs: {
-      inlineStories: false,
-    },
-    layout: 'fullscreen'
-  }
-};
-
-const Template = (args) => (
-  <div>
-    <stzh-visuallyhidden>
-      <h1>Navigation</h1>
-      <h2>Skiplinks</h2>
-    </stzh-visuallyhidden>
-
-    <stzh-page-skiplinks>
-      <stzh-skiplink href="#anchorNavMeta" link-accesskey="1" link-title="[ALT + 1]">Main Navigation</stzh-skiplink>
-      <stzh-skiplink href="#anchorContent" link-accesskey="2" link-title="[ALT + 2]">Content</stzh-skiplink>
-    </stzh-page-skiplinks>
-
-    <stzh-header>
-      <img
-        slot="logo"
-        src="media/logo/stzh-default.svg"
-        alt="Logo City Zürich, go to homepage"
-      ></img>
-
-      <nav slot="nav" id="anchorNavMeta">
-        <stzh-visuallyhidden>
-          <h2>Meta Navigation</h2>
-        </stzh-visuallyhidden>
-
-        <stzh-metanav>
-          <stzh-link href="#kontakt">Kontakt</stzh-link>
-          <stzh-link href="#medien">Medien</stzh-link>
-          <stzh-link href="#jobs">Jobs</stzh-link>
-        </stzh-metanav>
-      </nav>
-
-      <stzh-popover label="My Account" slot="login" placement="bottom-end">
-        <stzh-button
-          fullwidth
-          text-align="space-between"
-          icon-position="right"
-          badge="3"
-          icon="user"
-        >
-          Full Name
-        </stzh-button>
-        <div slot="content">
-          <Menu></Menu>
-        </div>
-        <stzh-button slot="action" variant="secondary" size="small">
-          Logout
-        </stzh-button>
-      </stzh-popover>
-
-      <stzh-appnav slot="appnav" app-title="My Account" status="Preview" href="#">
-        <stzh-link href="#" icon="services">
-          My Services
-        </stzh-link>
-        <stzh-link href="#" icon="bulleted-list">
-          All Services
-        </stzh-link>
-        <stzh-link href="#" badge="3" icon="mail">
-          Messages
-        </stzh-link>
-        <stzh-link href="#" icon="gear">
-          Settings
-        </stzh-link>
-      </stzh-appnav>
-    </stzh-header>
-
-    <stzh-vspace curve="large">
-      <div></div>
-
-      <stzh-section id="anchorContent">
-        <stzh-container>
-          <stzh-heading with-border>Heading 1</stzh-heading>
-          <stzh-vspace size="xlarge"></stzh-vspace>
-
-          <stzh-vspace curve="big">
-            <stzh-row span-small="6">
-              <stzh-cell>
-                <stzh-text>
-                  <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
-                  <p>Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
-                </stzh-text>
-                <stzh-vspace size-small="none"></stzh-vspace>
-              </stzh-cell>
-              <stzh-cell>
-                <stzh-vspace>
-                  <stzh-input name="field1" label="Field 1"></stzh-input>
-                  <stzh-row>
-                    <stzh-cell span-small="4">
-                      <stzh-input name="field2" label="Field 2"></stzh-input>
-                    </stzh-cell>
-                    <stzh-cell span-small="8">
-                      <stzh-vspace size-small="none"></stzh-vspace>
-                      <stzh-input name="field3" disabled value="Filled" label="Field 3"></stzh-input>
-                    </stzh-cell>
-                  </stzh-row>
-                  <stzh-radiogroup name="departments">
-                    <stzh-radio value="AOZ" label="AOZ"></stzh-radio>
-                    <stzh-radio value="UVZ" label="UVZ" disabled></stzh-radio>
-                    <stzh-radio value="PKZH" label="PKZH"></stzh-radio>
-                  </stzh-radiogroup>
-                  <stzh-checkboxgroup direction="horizontal">
-                    <stzh-checkbox name="deparments2" value="AOZ" label="AOZ"></stzh-checkbox>
-                    <stzh-checkbox name="deparments2" value="UVZ" label="UVZ" disabled></stzh-checkbox>
-                    <stzh-checkbox name="deparments2" value="PKZH" label="PKZH"></stzh-checkbox>
-                  </stzh-checkboxgroup>
-                  <stzh-button>Button</stzh-button>
-                </stzh-vspace>
-              </stzh-cell>
-            </stzh-row>
-
-            <stzh-row span-small="6">
-              <stzh-cell>
-                <stzh-vspace>
-                  <stzh-heading level="2">Heading 2.1</stzh-heading>
-                  <stzh-text>
-                    <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex.</p>
-                  </stzh-text>
-                </stzh-vspace>
-              </stzh-cell>
-              <stzh-cell>
-                <stzh-vspace size-small="none"></stzh-vspace>
-                <stzh-vspace>
-                  <stzh-heading level="2">Heading 2.2</stzh-heading>
-                  <stzh-text>
-                    <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
-                  </stzh-text>
-                </stzh-vspace>
-              </stzh-cell>
-            </stzh-row>
-          </stzh-vspace>
-        </stzh-container>
-      </stzh-section>
-
-      <stzh-section variant="highlight">
-        <stzh-container>
-          <stzh-row>
-            <stzh-cell>
-              <stzh-vspace>
-                <stzh-heading level="2" with-border>Heading 2.3</stzh-heading>
-                <stzh-text lead>
-                  <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
-                </stzh-text>
-                <stzh-text>
-                  <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex.</p>
-                </stzh-text>
-              </stzh-vspace>
-            </stzh-cell>
-          </stzh-row>
-        </stzh-container>
-      </stzh-section>
-
-    </stzh-vspace>
-  </div>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-};