@oiz/stzh-components 2.11.0-beta1 → 2.11.0

package/dist/collection/components/stzh-gallery/stzh-gallery.stories.js

@@ -0,0 +1,163 @@
+import { createComponentStory } from '../../utils/story-utils';
+import { withActions } from '@storybook/addon-actions/decorator';
+import readme from './readme.md?raw';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+import {
+  Default as Richtext_Default
+} from '../stzh-richtext/stzh-richtext.stories';
+
+const COMPONENT_NAME = 'stzh-gallery';
+const story = createComponentStory(COMPONENT_NAME);
+
+const TEMPLATE = ({ _onlyGallery = false }) => {
+  if (_onlyGallery) {
+    return `
+<stzh-gallery></stzh-gallery>
+    `;
+  } else {
+    return `
+<stzh-container>
+  <stzh-vspace curve="big"></stzh-vspace>
+
+  <stzh-gallery></stzh-gallery>
+
+  <stzh-vspace curve="big"></stzh-vspace>
+</stzh-container>
+    `;
+  }
+}
+
+const TEMPLATE_CUSTOM = ({ _onlyGallery = false }) => {
+  if (_onlyGallery) {
+    return `
+<stzh-gallery>
+  <stzh-figure onclick="this.closest('stzh-gallery').openLightbox(0)">
+    <img src="media/images/example.jpg">
+  </stzh-figure>
+</stzh-gallery>
+    `;
+  } else {
+    return `
+<stzh-container>
+  <stzh-vspace curve="big"></stzh-vspace>
+
+  <stzh-gallery>
+    <stzh-figure onclick="this.closest('stzh-gallery').openLightbox(0)">
+      <img src="media/images/example.jpg">
+    </stzh-figure>
+  </stzh-gallery>
+
+  <stzh-vspace curve="big"></stzh-vspace>
+</stzh-container>
+    `;
+  }
+}
+
+export default {
+  title: 'Components/Gallery',
+  component: COMPONENT_NAME,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('gallery'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withActions,
+    withDesign
+  ]
+};
+
+const images = [
+  {
+    "heading": "Sometitle",
+    "caption": "Lorem ipsum",
+    "captionLightbox": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    "src": "media/images/example.jpg",
+    "width": 2522,
+    "height": 1075,
+  },
+  {
+    "heading": "Sometitle",
+    "caption": "Lorem ipsum",
+    "captionLightbox": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    "src": "media/images/example2.jpg",
+    "width": 2050,
+    "height": 1367,
+  },
+  {
+    "heading": "Sometitle",
+    "caption": "Lorem ipsum",
+    "lightboxHtml": Richtext_Default.render({ ...Richtext_Default.args }).outerHTML,
+    "src": "media/images/example3.png",
+    "width": 2188,
+    "height": 1706,
+  },
+  {
+    "heading": "Sometitle",
+    "caption": "Lorem ipsum",
+    "captionLightbox": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    "src": "media/images/example4.png",
+    "width": 1024,
+    "height": 1258,
+  }
+];
+
+const oneImage = [
+  {
+    "heading": "Sometitle",
+    "caption": "Lorem ipsum",
+    "captionLightbox": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    "src": "media/images/example.jpg",
+    "width": 2522,
+    "height": 1075,
+    "hideCounter": true,
+  }
+];
+
+export const Default = {
+  render: (args) => story(args, TEMPLATE(args)),
+  args: {
+    images
+  }
+};
+
+export const WithoutCarousel = {
+  render: (args) => story(args, TEMPLATE(args)),
+  args: {
+    images,
+    variant: 'single'
+  }
+};
+
+export const OneImageNoCounter = {
+  render: (args) => story(args, TEMPLATE(args)),
+  args: {
+    images: oneImage,
+  }
+};
+
+export const Grid = {
+  render: (args) => story(args, TEMPLATE(args)),
+  args: {
+    images,
+    variant: 'grid'
+  }
+};
+
+export const Custom = {
+  render: (args) => story(args, TEMPLATE_CUSTOM(args)),
+  args: {
+    images,
+    variant: 'custom'
+  }
+};

package/dist/collection/components/stzh-header/stzh-header.css

@@ -146,10 +146,28 @@
     display: none;
   }
 }
-:host ::slotted(img[slot=logo]) {
+:host ::slotted([slot=logo]) {
   width: auto;
   height: 100%;
 }
+:host ::slotted(stzh-logo[slot=logo]) {
+  --width: auto;
+  --height: 100%;
+}
+:host ::slotted(stzh-logo[slot=logo]:not([type=stzh]):not([type=none])) {
+  --width: auto;
+  --height: 1.9375rem;
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted(stzh-logo[slot=logo]:not([type=stzh]):not([type=none])) {
+    --height: 2.1875rem;
+  }
+}
+@media screen and (min-width: 1440px) {
+  :host ::slotted(stzh-logo[slot=logo]:not([type=stzh]):not([type=none])) {
+    --height: 3.3125rem;
+  }
+}
 :host ::slotted(stzh-popover[slot=login]) {
   display: flex;
   flex-grow: 1;

package/dist/collection/components/stzh-header/stzh-header.js

@@ -93,7 +93,7 @@ export class StzhHeader {
       return;
     }
     readTask(() => {
-      this.scrollTop = this.getScrollTop();
+      this.scrollTop = window.scrollY;
       this.scrollingUp = this.lastScrollTop && this.lastScrollTop > this.scrollTop;
       this.lastScrollTop = this.scrollTop;
       this.innerHeight = this.innerElement ? this.innerElement.offsetHeight : 0;
@@ -114,9 +114,6 @@ export class StzhHeader {
       this.updatePosition();
     });
   }
-  getScrollTop() {
-    return window.pageYOffset || document.documentElement.scrollTop;
-  }
   updateMetabarPosition() {
     if (!this.metabarElement || this.stickyDisabled) {
       return;

package/dist/collection/components/stzh-header/stzh-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-header.js","sourceRoot":"","sources":["../../../../src/components/stzh-header/stzh-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Listen,\n  Host,\n  State,\n  h,\n  writeTask,\n  readTask,\n  Method,\n  Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot logo - Slot for brand logo\n * @slot nav - Slot for `stzh-metanav` element\n * @slot login - Slot for login button\n * @slot appnav - Slot for `stzh-appnav` element\n * @slot langnav - Slot for `stzh-langnav` element\n */\n@Component({\n  tag: \"stzh-header\",\n  styleUrl: \"stzh-header.scss\",\n  scoped: true\n})\nexport class StzhHeader {\n  /** Portal link (for logo) */\n  @Prop() href: string = \"https://www.stadt-zuerich.ch\";\n\n  /** Whether grey metabar should stay (on top) on mobile */\n  @Prop() metabarStay: boolean = false;\n\n  /** Whether sticky behaviour should be disabled */\n  @Prop() stickyDisabled: boolean = false;\n\n  /**\n   * Prevent creating a appnav placeholder element\n   * with the size of appnav inside header parent element.\n   * This prevents the fixed appnav to overlap\n   * content at the end on mikro breakpoint,\n   * but could lead to problems with certain layouts.\n   */\n  @Prop() preventAppnavPlaceholder: boolean = false;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the logo link element.\n   * Default value is \"Header Logo\".\n   */\n  @Prop() logoAnalyticsId: string;\n\n  @State() hideLogo: boolean = false;\n  @State() paddingTop: number;\n  @State() metabarTransform: string;\n  @State() sticky: boolean = false;\n  @State() stickyClosing: boolean = false;\n  @State() stickyMetabar: boolean = false;\n  @State() stickyMetabarEnd: boolean = false;\n\n  @Element() element: HTMLStzhHeaderElement;\n\n  /** Update position / sticky state of header */\n  @Method()\n  async updatePosition() {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    const removeSticky = () => {\n      this.sticky = false;\n      this.stickyClosing = false;\n      this.paddingTop = 0;\n    }\n\n    if (this.scrollingUp && this.belowStayStickyPoint) {\n      if (!this.sticky && this.belowStartStickyPoint) {\n        this.paddingTop = this.headerHeight;\n        this.sticky = true;\n      }\n\n      this.updateMetabarPosition();\n    } else {\n      if (this.sticky && this.belowStayStickyPoint) {\n        const animationEnd = () => {\n          removeSticky();\n          this.updateMetabarPosition();\n          this.innerElement.removeEventListener(\"animationend\", animationEnd);\n        };\n\n        this.innerElement.addEventListener(\"animationend\", animationEnd);\n        this.stickyClosing = true;\n      } else {\n        removeSticky();\n        this.updateMetabarPosition();\n      }\n    }\n  }\n\n  @Listen(\"scroll\", { target: \"window\" })\n  scrollListener() {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    readTask(() => {\n      this.scrollTop = this.getScrollTop();\n      this.scrollingUp = this.lastScrollTop && this.lastScrollTop > this.scrollTop;\n      this.lastScrollTop = this.scrollTop;\n\n      this.innerHeight = this.innerElement ? this.innerElement.offsetHeight : 0;\n      this.mainHeight = this.mainElement ? this.mainElement.offsetHeight : 0;\n\n      this.logobarHeight = this.sticky\n        ? this.isSmall\n          ? this.headerHeight - this.innerHeight\n          : this.headerHeight - this.mainHeight\n        : this.logobarElement\n          ? this.logobarElement.offsetHeight\n          : 0;\n\n      this.belowStayStickyPoint = this.scrollTop > this.logobarHeight;\n      this.belowStartStickyPoint = this.scrollTop > this.headerHeight;\n\n      this.headerOverlap = (this.headerTop - this.scrollTop) / -1;\n      this.hideLogo = this.isSmallheader && this.headerOverlap > 10;\n    });\n\n    writeTask(() => {\n      this.updatePosition();\n    });\n  }\n\n  private scrollTop: number;\n  private lastScrollTop: number;\n  private headerOverlap: number;\n  private scrollingUp: boolean;\n  private belowStayStickyPoint: boolean;\n  private belowStartStickyPoint: boolean;\n\n  private headerTop: number;\n  private headerHeight: number;\n  private innerHeight: number;\n  private mainHeight: number;\n  private metabarHeight: number;\n  private logobarHeight: number;\n  private appnavHeight: number;\n\n  private isSmall: boolean;\n  private isSmallheader: boolean;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private innerElement: HTMLDivElement;\n  private mainElement: HTMLDivElement;\n  private logobarElement: HTMLDivElement;\n  private metabarElement: HTMLDivElement;\n  private appnavElement: HTMLDivElement;\n  private appnavPlaceholderElement: HTMLDivElement;\n\n  private handleResize = () => {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(() => {\n      readTask(() => {\n        this.isSmall = media(\"small\").matches;\n        this.isSmallheader = media(\"smallheader\").matches;\n\n        this.headerTop = this.element.offsetTop;\n        this.headerHeight = this.element.offsetHeight;\n        this.appnavHeight = this.appnavElement ? this.appnavElement.offsetHeight : 0;\n        this.metabarHeight = this.metabarElement ? this.metabarElement.offsetHeight : 0;\n      });\n\n      writeTask(() => {\n        document.documentElement.style.setProperty('--stzh-header-height', `${this.headerHeight}px`);\n        document.documentElement.style.setProperty('--stzh-header-appnav-height', `${this.appnavHeight}px`);\n        document.documentElement.style.setProperty('--stzh-header-metabar-height', `${this.metabarHeight}px`);\n\n        if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {\n          this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;\n          document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', `${this.appnavHeight}px`);\n        } else {\n          this.appnavPlaceholderElement.style.height = \"0px\";\n          document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', \"0px\");\n        }\n      });\n\n      this.scrollListener();\n    });\n  }\n\n  private getScrollTop() {\n    return window.pageYOffset || document.documentElement.scrollTop;\n  }\n\n  private updateMetabarPosition() {\n    if (!this.metabarElement || this.stickyDisabled) {\n      return;\n    }\n\n    if (CSS && CSS.supports && CSS.supports(\"position\", \"sticky\")) {\n      return;\n    }\n\n    if (this.isSmallheader && this.headerOverlap > 0 && !this.sticky && !this.stickyClosing) {\n      if (this.headerOverlap < this.mainHeight - this.metabarHeight) {\n        this.stickyMetabar = true;\n        this.stickyMetabarEnd = false;\n        this.metabarTransform = \"translateY(0)\";\n      } else {\n        this.stickyMetabar = false;\n        this.stickyMetabarEnd = true;\n        this.metabarTransform = `translateY(${this.logobarHeight}px)`;\n      }\n    } else {\n      this.stickyMetabar = false;\n      this.stickyMetabarEnd = false;\n      this.metabarTransform = \"translateY(0)\";\n    }\n  }\n\n  connectedCallback() {\n    this.appnavPlaceholderElement = document.createElement(\"div\");\n    this.element.parentElement.appendChild(this.appnavPlaceholderElement);\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const navSlotUsed: boolean = hasSlot(this.element, \"nav\");\n    const loginSlotUsed: boolean = hasSlot(this.element, \"login\");\n    const appnavSlotUsed: boolean = hasSlot(this.element, \"appnav\");\n    const langNavSlotUsed = hasSlot(this.element, \"langnav\");\n\n    const classes = {\n      \"header\": true,\n      \"header--is-sticky-disabled\": this.stickyDisabled,\n      \"header--sticky\": this.sticky,\n      \"header--sticky-closing\": this.stickyClosing,\n      \"header--hide-logo\": this.hideLogo,\n      \"header--sticky-metabar\": this.stickyMetabar,\n      \"header--sticky-metabar-end\": this.stickyMetabarEnd,\n      \"header--has-metabar-stay\": this.metabarStay,\n      \"header--has-empty-metabar-mobile\": !loginSlotUsed, // check for searchfield and burger slot when implemented\n      \"header--has-empty-metabar\": !loginSlotUsed && !langNavSlotUsed && !navSlotUsed,\n      \"header--has-appnav\": appnavSlotUsed\n    };\n\n    return (\n      <Host>\n        <div style={{paddingTop: `${this.paddingTop}px`}} class={classes}>\n          <div\n            class=\"header__inner\"\n            ref={(el) => (this.innerElement = el as HTMLDivElement)}\n          >\n            <div\n              class=\"header__main\"\n              ref={(el) => (this.mainElement = el as HTMLDivElement)}\n            >\n              <div\n                class=\"header__logobar\"\n                ref={(el) => (this.logobarElement = el as HTMLDivElement)}\n              >\n                <div class=\"header__logobar-logo\">\n                  <a href={this.href} class=\"header__logo-link\" s-object-id={this.logoAnalyticsId || \"Header Logo\"}>\n                    <slot name=\"logo\"></slot>\n                  </a>\n                </div>\n              </div>\n\n              <div\n                class=\"header__metabar\"\n                style={{transform: this.metabarTransform}}\n                ref={(el) => (this.metabarElement = el as HTMLDivElement)}\n              >\n                <div class=\"header__metabar-inner\">\n                  <div class=\"header__metabar-nav\">\n                    <slot name=\"nav\"></slot>\n                  </div>\n                  <div class=\"header__metabar-login\">\n                    <slot name=\"login\"></slot>\n                  </div>\n                  <div class=\"header__metabar-langnav\">\n                    <slot name=\"langnav\"></slot>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div\n              class=\"header__appnav\"\n              ref={(el) => (this.appnavElement = el as HTMLDivElement)}\n            >\n              <div class=\"header__appnav-inner\">\n                <slot name=\"appnav\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-header.js","sourceRoot":"","sources":["../../../../src/components/stzh-header/stzh-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Listen,\n  Host,\n  State,\n  h,\n  writeTask,\n  readTask,\n  Method,\n  Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot logo - Slot for brand logo\n * @slot nav - Slot for `stzh-metanav` element\n * @slot login - Slot for login button\n * @slot appnav - Slot for `stzh-appnav` element\n * @slot langnav - Slot for `stzh-langnav` element\n */\n@Component({\n  tag: \"stzh-header\",\n  styleUrl: \"stzh-header.scss\",\n  scoped: true\n})\nexport class StzhHeader {\n  /** Portal link (for logo) */\n  @Prop() href: string = \"https://www.stadt-zuerich.ch\";\n\n  /** Whether grey metabar should stay (on top) on mobile */\n  @Prop() metabarStay: boolean = false;\n\n  /** Whether sticky behaviour should be disabled */\n  @Prop() stickyDisabled: boolean = false;\n\n  /**\n   * Prevent creating a appnav placeholder element\n   * with the size of appnav inside header parent element.\n   * This prevents the fixed appnav to overlap\n   * content at the end on mikro breakpoint,\n   * but could lead to problems with certain layouts.\n   */\n  @Prop() preventAppnavPlaceholder: boolean = false;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the logo link element.\n   * Default value is \"Header Logo\".\n   */\n  @Prop() logoAnalyticsId: string;\n\n  @State() hideLogo: boolean = false;\n  @State() paddingTop: number;\n  @State() metabarTransform: string;\n  @State() sticky: boolean = false;\n  @State() stickyClosing: boolean = false;\n  @State() stickyMetabar: boolean = false;\n  @State() stickyMetabarEnd: boolean = false;\n\n  @Element() element: HTMLStzhHeaderElement;\n\n  /** Update position / sticky state of header */\n  @Method()\n  async updatePosition() {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    const removeSticky = () => {\n      this.sticky = false;\n      this.stickyClosing = false;\n      this.paddingTop = 0;\n    }\n\n    if (this.scrollingUp && this.belowStayStickyPoint) {\n      if (!this.sticky && this.belowStartStickyPoint) {\n        this.paddingTop = this.headerHeight;\n        this.sticky = true;\n      }\n\n      this.updateMetabarPosition();\n    } else {\n      if (this.sticky && this.belowStayStickyPoint) {\n        const animationEnd = () => {\n          removeSticky();\n          this.updateMetabarPosition();\n          this.innerElement.removeEventListener(\"animationend\", animationEnd);\n        };\n\n        this.innerElement.addEventListener(\"animationend\", animationEnd);\n        this.stickyClosing = true;\n      } else {\n        removeSticky();\n        this.updateMetabarPosition();\n      }\n    }\n  }\n\n  @Listen(\"scroll\", { target: \"window\" })\n  scrollListener() {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    readTask(() => {\n      this.scrollTop = window.scrollY;\n      this.scrollingUp = this.lastScrollTop && this.lastScrollTop > this.scrollTop;\n      this.lastScrollTop = this.scrollTop;\n\n      this.innerHeight = this.innerElement ? this.innerElement.offsetHeight : 0;\n      this.mainHeight = this.mainElement ? this.mainElement.offsetHeight : 0;\n\n      this.logobarHeight = this.sticky\n        ? this.isSmall\n          ? this.headerHeight - this.innerHeight\n          : this.headerHeight - this.mainHeight\n        : this.logobarElement\n          ? this.logobarElement.offsetHeight\n          : 0;\n\n      this.belowStayStickyPoint = this.scrollTop > this.logobarHeight;\n      this.belowStartStickyPoint = this.scrollTop > this.headerHeight;\n\n      this.headerOverlap = (this.headerTop - this.scrollTop) / -1;\n      this.hideLogo = this.isSmallheader && this.headerOverlap > 10;\n    });\n\n    writeTask(() => {\n      this.updatePosition();\n    });\n  }\n\n  private scrollTop: number;\n  private lastScrollTop: number;\n  private headerOverlap: number;\n  private scrollingUp: boolean;\n  private belowStayStickyPoint: boolean;\n  private belowStartStickyPoint: boolean;\n\n  private headerTop: number;\n  private headerHeight: number;\n  private innerHeight: number;\n  private mainHeight: number;\n  private metabarHeight: number;\n  private logobarHeight: number;\n  private appnavHeight: number;\n\n  private isSmall: boolean;\n  private isSmallheader: boolean;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private innerElement: HTMLDivElement;\n  private mainElement: HTMLDivElement;\n  private logobarElement: HTMLDivElement;\n  private metabarElement: HTMLDivElement;\n  private appnavElement: HTMLDivElement;\n  private appnavPlaceholderElement: HTMLDivElement;\n\n  private handleResize = () => {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(() => {\n      readTask(() => {\n        this.isSmall = media(\"small\").matches;\n        this.isSmallheader = media(\"smallheader\").matches;\n\n        this.headerTop = this.element.offsetTop;\n        this.headerHeight = this.element.offsetHeight;\n        this.appnavHeight = this.appnavElement ? this.appnavElement.offsetHeight : 0;\n        this.metabarHeight = this.metabarElement ? this.metabarElement.offsetHeight : 0;\n      });\n\n      writeTask(() => {\n        document.documentElement.style.setProperty('--stzh-header-height', `${this.headerHeight}px`);\n        document.documentElement.style.setProperty('--stzh-header-appnav-height', `${this.appnavHeight}px`);\n        document.documentElement.style.setProperty('--stzh-header-metabar-height', `${this.metabarHeight}px`);\n\n        if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {\n          this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;\n          document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', `${this.appnavHeight}px`);\n        } else {\n          this.appnavPlaceholderElement.style.height = \"0px\";\n          document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', \"0px\");\n        }\n      });\n\n      this.scrollListener();\n    });\n  }\n\n  private updateMetabarPosition() {\n    if (!this.metabarElement || this.stickyDisabled) {\n      return;\n    }\n\n    if (CSS && CSS.supports && CSS.supports(\"position\", \"sticky\")) {\n      return;\n    }\n\n    if (this.isSmallheader && this.headerOverlap > 0 && !this.sticky && !this.stickyClosing) {\n      if (this.headerOverlap < this.mainHeight - this.metabarHeight) {\n        this.stickyMetabar = true;\n        this.stickyMetabarEnd = false;\n        this.metabarTransform = \"translateY(0)\";\n      } else {\n        this.stickyMetabar = false;\n        this.stickyMetabarEnd = true;\n        this.metabarTransform = `translateY(${this.logobarHeight}px)`;\n      }\n    } else {\n      this.stickyMetabar = false;\n      this.stickyMetabarEnd = false;\n      this.metabarTransform = \"translateY(0)\";\n    }\n  }\n\n  connectedCallback() {\n    this.appnavPlaceholderElement = document.createElement(\"div\");\n    this.element.parentElement.appendChild(this.appnavPlaceholderElement);\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const navSlotUsed: boolean = hasSlot(this.element, \"nav\");\n    const loginSlotUsed: boolean = hasSlot(this.element, \"login\");\n    const appnavSlotUsed: boolean = hasSlot(this.element, \"appnav\");\n    const langNavSlotUsed = hasSlot(this.element, \"langnav\");\n\n    const classes = {\n      \"header\": true,\n      \"header--is-sticky-disabled\": this.stickyDisabled,\n      \"header--sticky\": this.sticky,\n      \"header--sticky-closing\": this.stickyClosing,\n      \"header--hide-logo\": this.hideLogo,\n      \"header--sticky-metabar\": this.stickyMetabar,\n      \"header--sticky-metabar-end\": this.stickyMetabarEnd,\n      \"header--has-metabar-stay\": this.metabarStay,\n      \"header--has-empty-metabar-mobile\": !loginSlotUsed, // check for searchfield and burger slot when implemented\n      \"header--has-empty-metabar\": !loginSlotUsed && !langNavSlotUsed && !navSlotUsed,\n      \"header--has-appnav\": appnavSlotUsed\n    };\n\n    return (\n      <Host>\n        <div style={{paddingTop: `${this.paddingTop}px`}} class={classes}>\n          <div\n            class=\"header__inner\"\n            ref={(el) => (this.innerElement = el as HTMLDivElement)}\n          >\n            <div\n              class=\"header__main\"\n              ref={(el) => (this.mainElement = el as HTMLDivElement)}\n            >\n              <div\n                class=\"header__logobar\"\n                ref={(el) => (this.logobarElement = el as HTMLDivElement)}\n              >\n                <div class=\"header__logobar-logo\">\n                  <a href={this.href} class=\"header__logo-link\" s-object-id={this.logoAnalyticsId || \"Header Logo\"}>\n                    <slot name=\"logo\"></slot>\n                  </a>\n                </div>\n              </div>\n\n              <div\n                class=\"header__metabar\"\n                style={{transform: this.metabarTransform}}\n                ref={(el) => (this.metabarElement = el as HTMLDivElement)}\n              >\n                <div class=\"header__metabar-inner\">\n                  <div class=\"header__metabar-nav\">\n                    <slot name=\"nav\"></slot>\n                  </div>\n                  <div class=\"header__metabar-login\">\n                    <slot name=\"login\"></slot>\n                  </div>\n                  <div class=\"header__metabar-langnav\">\n                    <slot name=\"langnav\"></slot>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div\n              class=\"header__appnav\"\n              ref={(el) => (this.appnavElement = el as HTMLDivElement)}\n            >\n              <div class=\"header__appnav-inner\">\n                <slot name=\"appnav\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-header/stzh-header.stories.js

@@ -11,7 +11,7 @@ import { Default as Langnav_Default } from '../stzh-langnav/stzh-langnav.stories
 const COMPONENT_NAME = 'stzh-header';
 const story = createComponentStory(COMPONENT_NAME);
 const substoryPopover = createComponentStory('stzh-popover');
-const substoryLogo = createComponentStory('img');
+const substoryLogo = createComponentStory('img, stzh-logo');
 
 const SUBTEMPLATE_DUMMY_TEXT = `
 <div>
@@ -67,10 +67,12 @@ const SUBTEMPLATE_POPOVER = `
 
 const SUBTEMPLATE_LOGO = ({ _logo = 'media/logo/stzh-default.svg' }) => {
   return `
-<img
+${!_logo.includes('/')
+  ? `<stzh-logo type=${_logo}></stzh-logo>`
+  : `<img
   src=${_logo}
   alt="Logo City Zürich, go to homepage"
-/>
+/>`}
   `;
 }
 

package/dist/collection/components/stzh-heading/stzh-heading.js

@@ -55,7 +55,7 @@ export class StzhHeading {
         "mutable": false,
         "complexType": {
           "original": "Font.Curves | \"auto\"",
-          "resolved": "\"auto\" | \"caption\" | \"default\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"hero\" | \"p1\" | \"p2\"",
+          "resolved": "\"auto\" | \"caption\" | \"default\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"hero\" | \"none\" | \"p1\" | \"p2\"",
           "references": {
             "Font": {
               "location": "import",

package/dist/collection/components/stzh-hspace/stzh-hspace.js

@@ -5,11 +5,11 @@ import { Host, h, } from "@stencil/core";
 export class StzhHspace {
   constructor() {
     this.curve = "none";
-    this.size = "inherit";
-    this.sizeSmall = "inherit";
-    this.sizeMedium = "inherit";
-    this.sizeLarge = "inherit";
-    this.sizeUltra = "inherit";
+    this.size = undefined;
+    this.sizeSmall = undefined;
+    this.sizeMedium = undefined;
+    this.sizeLarge = undefined;
+    this.sizeUltra = undefined;
     this.justify = "start";
     this.items = "start";
     this.around = false;
@@ -59,7 +59,7 @@ export class StzhHspace {
           "text": "Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info)."
         },
         "attribute": "curve",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "\"none\""
       },
       "size": {
@@ -83,8 +83,7 @@ export class StzhHspace {
           "text": "Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info)."
         },
         "attribute": "size",
-        "reflect": false,
-        "defaultValue": "\"inherit\""
+        "reflect": true
       },
       "sizeSmall": {
         "type": "string",
@@ -107,8 +106,7 @@ export class StzhHspace {
           "text": "Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info)."
         },
         "attribute": "size-small",
-        "reflect": false,
-        "defaultValue": "\"inherit\""
+        "reflect": true
       },
       "sizeMedium": {
         "type": "string",
@@ -131,8 +129,7 @@ export class StzhHspace {
           "text": "Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info)."
         },
         "attribute": "size-medium",
-        "reflect": false,
-        "defaultValue": "\"inherit\""
+        "reflect": true
       },
       "sizeLarge": {
         "type": "string",
@@ -155,8 +152,7 @@ export class StzhHspace {
           "text": "Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info)."
         },
         "attribute": "size-large",
-        "reflect": false,
-        "defaultValue": "\"inherit\""
+        "reflect": true
       },
       "sizeUltra": {
         "type": "string",
@@ -179,8 +175,7 @@ export class StzhHspace {
           "text": "Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info)."
         },
         "attribute": "size-ultra",
-        "reflect": false,
-        "defaultValue": "\"inherit\""
+        "reflect": true
       },
       "justify": {
         "type": "string",
@@ -203,7 +198,7 @@ export class StzhHspace {
           "text": "Alignment"
         },
         "attribute": "justify",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "\"start\""
       },
       "items": {
@@ -227,7 +222,7 @@ export class StzhHspace {
           "text": "Control how cells items are positioned along a container's cross axis"
         },
         "attribute": "items",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "\"start\""
       },
       "around": {

package/dist/collection/components/stzh-hspace/stzh-hspace.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-hspace.js","sourceRoot":"","sources":["../../../../src/components/stzh-hspace/stzh-hspace.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAIvB;;GAEG;AAMH,MAAM,OAAO,UAAU;;iBAES,MAAM;gBAGR,SAAS;qBAEJ,SAAS;sBAER,SAAS;qBAEV,SAAS;qBAET,SAAS;mBAGR,OAAO;iBAGX,OAAO;kBAGM,KAAK;sBAGD,KAAK;uBAGJ,KAAK;kBAGuB,MAAM;;EAElF,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,aAAa,EAAE,IAAI;UACnB,CAAC,wBAAwB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;UACxD,CAAC,sBAAsB,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;SACnD;QAED,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be horizontically spaced\n */\n@Component({\n  tag: \"stzh-hspace\",\n  styleUrl: \"stzh-hspace.scss\",\n  shadow: true\n})\nexport class StzhHspace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop() curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() size: Space.Sizes = \"inherit\";\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeSmall: Space.Sizes = \"inherit\";\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeMedium: Space.Sizes = \"inherit\";\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeLarge: Space.Sizes = \"inherit\";\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeUltra: Space.Sizes = \"inherit\";\n\n  /** Alignment */\n  @Prop() justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop() items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements (padding instead of margin) */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Apply spacing to slotted elements (padding instead of margin, only left) */\n  @Prop({ reflect: true }) aroundLeft: boolean = false;\n\n  /** Apply spacing to slotted elements (padding instead of margin, only right) */\n  @Prop({ reflect: true }) aroundRight: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"left\" | \"right\" | \"left-right\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-hspace\": true,\n            [`stzh-hspace--justify-${this.justify}`]: !!this.justify,\n            [`stzh-hspace--items-${this.items}`]: !!this.items\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-hspace.js","sourceRoot":"","sources":["../../../../src/components/stzh-hspace/stzh-hspace.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAIvB;;GAEG;AAMH,MAAM,OAAO,UAAU;;iBAE0B,MAAM;;;;;;mBAcF,OAAO;iBAGX,OAAO;kBAGX,KAAK;sBAGD,KAAK;uBAGJ,KAAK;kBAGuB,MAAM;;EAElF,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,aAAa,EAAE,IAAI;UACnB,CAAC,wBAAwB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;UACxD,CAAC,sBAAsB,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;SACnD;QAED,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be horizontically spaced\n */\n@Component({\n  tag: \"stzh-hspace\",\n  styleUrl: \"stzh-hspace.scss\",\n  shadow: true\n})\nexport class StzhHspace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) size: Space.Sizes;\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeSmall: Space.Sizes;\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeMedium: Space.Sizes;\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeLarge: Space.Sizes;\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeUltra: Space.Sizes;\n\n  /** Alignment */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements (padding instead of margin) */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Apply spacing to slotted elements (padding instead of margin, only left) */\n  @Prop({ reflect: true }) aroundLeft: boolean = false;\n\n  /** Apply spacing to slotted elements (padding instead of margin, only right) */\n  @Prop({ reflect: true }) aroundRight: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"left\" | \"right\" | \"left-right\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-hspace\": true,\n            [`stzh-hspace--justify-${this.justify}`]: !!this.justify,\n            [`stzh-hspace--items-${this.items}`]: !!this.items\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-imagecomparison/stzh-imagecomparison.js

@@ -19,8 +19,6 @@ export class StzhImageComparison {
     this.localization = undefined;
     this.hintLeft = "";
     this.hintRight = "";
-    this.caption = "";
-    this.copyright = "";
     this.value = 50;
     this.label = undefined;
     this.a11yDescribedby = "";
@@ -109,42 +107,6 @@ export class StzhImageComparison {
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "caption": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Caption"
-        },
-        "attribute": "caption",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "copyright": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Copyright"
-        },
-        "attribute": "copyright",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
       "value": {
         "type": "number",
         "mutable": true,

package/dist/collection/components/stzh-imagecomparison/stzh-imagecomparison.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-imagecomparison.js","sourceRoot":"","sources":["../../../../src/components/stzh-imagecomparison/stzh-imagecomparison.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,CAAC,EACD,KAAK,EAEN,MAAM,eAAe,CAAC;AAQvB;;;;;GAKG;AAQH,MAAM,OAAO,mBAAmB;;IAgCtB,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MAC1C,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MACpC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;MAE3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,sBAAsB;QACjC,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;IACL,CAAC,CAAA;;oBApC0B,EAAE;qBAGD,EAAE;mBAGJ,EAAE;qBAGA,EAAE;iBAGW,EAAE;;2BAMwB,EAAE;;EAoBrE,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;KAC1G;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;KAC7B,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,4BACmB,IAAI,CAAC,YAAY,CAAC,KAAK,EAC7C,KAAK,EAAE;QACL,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG;OAC1C;MAED,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,+BAA+B;UACxC,YAAM,IAAI,EAAC,cAAc,GAAQ;UACjC,YAAM,IAAI,EAAC,aAAa,GAAQ;UAEhC,aACE,KAAK,EAAC,6BAA6B,gBACvB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,sBAC/B,IAAI,CAAC,eAAe,IAAI,IAAI;YAE9C,WAAK,KAAK,EAAC,mCAAmC,GAAO;YACrD,WAAK,KAAK,EAAC,2CAA2C;cACpD,iBACE,KAAK,EAAC,wCAAwC,EAC9C,IAAI,EAAC,YAAY,GACP;cACZ,iBACE,KAAK,EAAC,yCAAyC,EAC/C,IAAI,EAAC,aAAa,GACR,CACR;YAEN,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,+BAA+B,EACrC,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAsB,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACI;UAER,WAAK,KAAK,EAAC,oCAAoC;YAC7C,YAAM,KAAK,EAAC,iCAAiC,IAC1C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1D;YACP,YAAM,KAAK,EAAC,kCAAkC,IAC3C,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC7D,CACH,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { \n  Component, \n  Host, \n  Element, \n  Prop, \n  h,\n  Event,\n  EventEmitter\n} from '@stencil/core';\n\nimport { \n  StzhImagecomparisonChangeEvent,\n} from \"../../index\";\n\nimport { StzhImagecomparisonLocalizedText } from \"./stzh-imagecomparison.localization\"\n\n/**\n * @slot image-before - Slot for a before image\n * @slot image-after - Slot for a after image\n * @slot hint-left - Slot for a left image hint as alternative for attribute\n * @slot hint-right - Slot for a right image hint as alternative for attribute\n */\n\n@Component({\n  tag: 'stzh-imagecomparison',\n  styleUrl: 'stzh-imagecomparison.scss',\n  scoped: true,\n})\n\nexport class StzhImageComparison {\n  /**  Translation strings. */\n  @Prop() localization: StzhImagecomparisonLocalizedText;\n\n  /** Hint left */\n  @Prop() hintLeft: string = \"\";\n\n  /** Hint right */\n  @Prop() hintRight: string = \"\";\n\n  /** Caption */\n  @Prop() caption: string = \"\";\n\n  /** Copyright */\n  @Prop() copyright: string = \"\";\n\n  /** Width of image before */\n  @Prop({ mutable: true }) value: number = 50;\n\n  /** Overwrite default label */\n  @Prop() label: string;\n\n  /** Id for element which describes the label */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @Element() element: HTMLStzhImagecomparisonElement;\n\n  /* Image comparison slider on change event */\n  @Event() stzhChange: EventEmitter<StzhImagecomparisonChangeEvent>;\n  \n  private inputElement: HTMLInputElement;\n  \n  private handleInput = (event: InputEvent) => {\n    let value = this.inputElement.value;\n    this.value = Number(value);\n\n    this.stzhChange.emit({   \n      component: \"stzh-imagecomparison\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"imagecomparison\");\n    }\n  } \n  \n  render() {\n    const classes = {\n      \"stzh-imagecomparison\": true,\n    };\n\n    return (\n      <Host\n        aria-roledescription={this.localization.label}\n        style={{\n          '--exposure': `${this.value.toString()}%`\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-imagecomparison__element\">\n            <slot name=\"image-before\"></slot>\n            <slot name=\"image-after\"></slot>\n\n            <label\n              class=\"stzh-imagecomparison__label\"\n              aria-label={this.label || this.localization.label}\n              aria-describedby={this.a11yDescribedby || null}\n            >\n              <div class=\"stzh-imagecomparison__slider-line\"></div>\n              <div class=\"stzh-imagecomparison__slider-icon-wrapper\">\n                <stzh-icon \n                  class=\"stzh-imagecomparison__slider-icon-left\" \n                  name=\"angle-left\">\n                </stzh-icon>\n                <stzh-icon \n                  class=\"stzh-imagecomparison__slider-icon-right\" \n                  name=\"angle-right\">\n                </stzh-icon>\n              </div>\n\n              <input\n                type=\"range\" \n                class=\"stzh-imagecomparison__control\" \n                min=\"0\" \n                max=\"100\"\n                ref={(el) => (this.inputElement = el as HTMLInputElement)}\n                onInput={this.handleInput}\n              />\n            </label>\n\n            <div class=\"stzh-imagecomparison__hint-wrapper\">\n              <span class=\"stzh-imagecomparison__hint-left\">\n                {this.hintLeft ? this.hintLeft : <slot name=\"hint-left\"></slot>}\n              </span>\n              <span class=\"stzh-imagecomparison__hint-right\">\n                {this.hintRight ? this.hintRight : <slot name=\"hint-right\"></slot>}\n              </span> \n            </div>\n          </div>\n        </div>  \n      </Host>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"stzh-imagecomparison.js","sourceRoot":"","sources":["../../../../src/components/stzh-imagecomparison/stzh-imagecomparison.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,CAAC,EACD,KAAK,EAEN,MAAM,eAAe,CAAC;AAQvB;;;;;GAKG;AAQH,MAAM,OAAO,mBAAmB;;IA0BtB,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MAC1C,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MACpC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;MAE3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,sBAAsB;QACjC,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;IACL,CAAC,CAAA;;oBA9B0B,EAAE;qBAGD,EAAE;iBAGW,EAAE;;2BAMwB,EAAE;;EAoBrE,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;KAC1G;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;KAC7B,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,4BACmB,IAAI,CAAC,YAAY,CAAC,KAAK,EAC7C,KAAK,EAAE;QACL,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG;OAC1C;MAED,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,+BAA+B;UACxC,YAAM,IAAI,EAAC,cAAc,GAAQ;UACjC,YAAM,IAAI,EAAC,aAAa,GAAQ;UAEhC,aACE,KAAK,EAAC,6BAA6B,gBACvB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,sBAC/B,IAAI,CAAC,eAAe,IAAI,IAAI;YAE9C,WAAK,KAAK,EAAC,mCAAmC,GAAO;YACrD,WAAK,KAAK,EAAC,2CAA2C;cACpD,iBACE,KAAK,EAAC,wCAAwC,EAC9C,IAAI,EAAC,YAAY,GACP;cACZ,iBACE,KAAK,EAAC,yCAAyC,EAC/C,IAAI,EAAC,aAAa,GACR,CACR;YAEN,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,+BAA+B,EACrC,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAsB,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACI;UAER,WAAK,KAAK,EAAC,oCAAoC;YAC7C,YAAM,KAAK,EAAC,iCAAiC,IAC1C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1D;YACP,YAAM,KAAK,EAAC,kCAAkC,IAC3C,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC7D,CACH,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { \n  Component, \n  Host, \n  Element, \n  Prop, \n  h,\n  Event,\n  EventEmitter\n} from '@stencil/core';\n\nimport { \n  StzhImagecomparisonChangeEvent,\n} from \"../../index\";\n\nimport { StzhImagecomparisonLocalizedText } from \"./stzh-imagecomparison.localization\"\n\n/**\n * @slot image-before - Slot for a before image\n * @slot image-after - Slot for a after image\n * @slot hint-left - Slot for a left image hint as alternative for attribute\n * @slot hint-right - Slot for a right image hint as alternative for attribute\n */\n\n@Component({\n  tag: 'stzh-imagecomparison',\n  styleUrl: 'stzh-imagecomparison.scss',\n  scoped: true,\n})\n\nexport class StzhImageComparison {\n  /**  Translation strings. */\n  @Prop() localization: StzhImagecomparisonLocalizedText;\n\n  /** Hint left */\n  @Prop() hintLeft: string = \"\";\n\n  /** Hint right */\n  @Prop() hintRight: string = \"\";\n\n  /** Width of image before */\n  @Prop({ mutable: true }) value: number = 50;\n\n  /** Overwrite default label */\n  @Prop() label: string;\n\n  /** Id for element which describes the label */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @Element() element: HTMLStzhImagecomparisonElement;\n\n  /* Image comparison slider on change event */\n  @Event() stzhChange: EventEmitter<StzhImagecomparisonChangeEvent>;\n  \n  private inputElement: HTMLInputElement;\n  \n  private handleInput = (event: InputEvent) => {\n    let value = this.inputElement.value;\n    this.value = Number(value);\n\n    this.stzhChange.emit({   \n      component: \"stzh-imagecomparison\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"imagecomparison\");\n    }\n  } \n  \n  render() {\n    const classes = {\n      \"stzh-imagecomparison\": true,\n    };\n\n    return (\n      <Host\n        aria-roledescription={this.localization.label}\n        style={{\n          '--exposure': `${this.value.toString()}%`\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-imagecomparison__element\">\n            <slot name=\"image-before\"></slot>\n            <slot name=\"image-after\"></slot>\n\n            <label\n              class=\"stzh-imagecomparison__label\"\n              aria-label={this.label || this.localization.label}\n              aria-describedby={this.a11yDescribedby || null}\n            >\n              <div class=\"stzh-imagecomparison__slider-line\"></div>\n              <div class=\"stzh-imagecomparison__slider-icon-wrapper\">\n                <stzh-icon \n                  class=\"stzh-imagecomparison__slider-icon-left\" \n                  name=\"angle-left\">\n                </stzh-icon>\n                <stzh-icon \n                  class=\"stzh-imagecomparison__slider-icon-right\" \n                  name=\"angle-right\">\n                </stzh-icon>\n              </div>\n\n              <input\n                type=\"range\" \n                class=\"stzh-imagecomparison__control\" \n                min=\"0\" \n                max=\"100\"\n                ref={(el) => (this.inputElement = el as HTMLInputElement)}\n                onInput={this.handleInput}\n              />\n            </label>\n\n            <div class=\"stzh-imagecomparison__hint-wrapper\">\n              <span class=\"stzh-imagecomparison__hint-left\">\n                {this.hintLeft ? this.hintLeft : <slot name=\"hint-left\"></slot>}\n              </span>\n              <span class=\"stzh-imagecomparison__hint-right\">\n                {this.hintRight ? this.hintRight : <slot name=\"hint-right\"></slot>}\n              </span> \n            </div>\n          </div>\n        </div>  \n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/stzh-logo/assets/aoz.svg

@@ -0,0 +1,15 @@
+
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg width="133px" height="53px" version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 133 53" style="enable-background:new 0 0 133 53;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#A51A0F;}
+</style>
+<g>
+	<path class="st0" d="M30.9,38.5H13.2l-3.8,10H1L18.3,4.5h7.5l17.3,43.9h-8.5L30.9,38.5z M28.2,31.1L22,15l-6.1,16.2H28.2z"/>
+	<path class="st0" d="M91.1,26.5c0,13.1-9.5,23-22.4,23c-12.9,0-22.4-9.9-22.4-23s9.5-23,22.4-23C81.6,3.5,91.1,13.4,91.1,26.5z
+		 M68.7,41.9c8.4,0,14.4-6.5,14.4-15.4s-6-15.4-14.4-15.4c-8.4,0-14.4,6.5-14.4,15.4S60.3,41.9,68.7,41.9z"/>
+	<path class="st0" d="M132.1,48.5H97.5v-7.2L121.1,12H98.2V4.5h33v7.1L107.7,41h24.5V48.5z"/>
+</g>
+</svg>