@oiz/stzh-components 2.0.0-beta → 2.1.0-alpha

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

@@ -96,20 +96,20 @@
 
 :host {
   --width: 100%;
-  --padding: var(--stzh-space-large);
+  --padding: var(--stzh-space-xxlarge);
   --close-color: var(--stzh-base-lead-color);
   --backdrop-opacity: 0.8;
 }
 @media screen and (min-width: 600px) {
   :host {
     --width: 33.5rem;
-    --padding: var(--stzh-space-xlarge);
+    --padding: ;
   }
 }
 @media screen and (min-width: 1024px) {
   :host {
     --width: 48.875rem;
-    --padding: var(--stzh-space-xxlarge);
+    --padding: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -194,39 +194,29 @@
 }
 .stzh-dialog__dialog-content {
   padding: var(--padding);
-  padding-top: var(--stzh-space-medium);
-  padding-bottom: var(--stzh-space-medium);
+  padding-top: var(--stzh-space-xlarge);
+  padding-bottom: var(--stzh-space-xlarge);
   overflow: auto;
   flex-grow: 1;
 }
-@media screen and (min-width: 600px) {
-  .stzh-dialog__dialog-content {
-    padding-top: var(--stzh-space-large);
-  }
-}
 @media screen and (min-width: 1024px) {
-  .stzh-dialog__dialog-content {
-    padding-top: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 1260px) {
   .stzh-dialog__dialog-content {
     padding-top: var(--stzh-space-xxlarge);
   }
 }
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 1260px) {
   .stzh-dialog__dialog-content {
-    padding-bottom: var(--stzh-space-large);
+    padding-top: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1024px) {
   .stzh-dialog__dialog-content {
-    padding-bottom: var(--stzh-space-xlarge);
+    padding-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-dialog__dialog-content {
-    padding-bottom: var(--stzh-space-xxlarge);
+    padding-bottom: var(--stzh-space-xxxlarge);
   }
 }
 .stzh-dialog__actions {

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

@@ -14,24 +14,6 @@ let dialogCounter = 0;
  */
 export class StzhDialog {
   constructor() {
-    /** Close dialog when pressing ESC */
-    this.closeOnEscapeKey = false;
-    /** Close dialog when clicking outside of it */
-    this.closeOnBackdropClick = false;
-    /** Open status */
-    this.open = false;
-    /** Stay in original position (true) or move to body (false) */
-    this.stay = true;
-    /** Size */
-    this.size = "default";
-    /** Whether to hide close button */
-    this.hideClose = false;
-    /** Heading text */
-    this.heading = "";
-    /** Accessibility role */
-    this.a11yRole = "alertdialog";
-    /** Accessible label for dialog (use if no heading is used) */
-    this.a11yLabel = "";
     this.handleDialogClick = (event) => {
       const target = event.target;
       if (target.dataset.stzhDialogClose) {
@@ -56,6 +38,16 @@ export class StzhDialog {
         });
       }
     };
+    this.localization = undefined;
+    this.closeOnEscapeKey = false;
+    this.closeOnBackdropClick = false;
+    this.open = false;
+    this.stay = true;
+    this.size = "default";
+    this.hideClose = false;
+    this.heading = "";
+    this.a11yRole = "alertdialog";
+    this.a11yLabel = "";
   }
   handleOutsideClick(event) {
     if (!this.open || !this.closeOnBackdropClick) {

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

@@ -30,69 +30,43 @@ let dropdownCounter = 0;
  */
 export class StzhDropdown {
   constructor() {
-    /**
-     * An array of property names to analyze when filtering options.
-     * Weights can be given to each field to improve search result:
-     * `[{"field":"text","weight":2},{"field":"text2","weight":0.5}]`
-     */
+    this.options = undefined;
+    this.optgroups = undefined;
+    this.items = undefined;
     this.searchField = ["text"];
-    /** Whether multiple items option can be selected */
     this.multiple = false;
-    /** Show inline (auto width) */
     this.inline = false;
-    /** The max number of options to display in the dropdown. Set to `null` for an unlimited number of options. */
     this.maxOptions = 50;
-    /** When searching for multiple terms (separated by space), this is the operator used. Can be 'and' or 'or' */
     this.searchConjunction = "and";
-    /**  If true, any options with a "" value will be treated like a normal option. This defaults to false to accommodate the common <select> practice of having the first empty option to act as a placeholder. */
     this.allowEmptyOption = false;
-    /** Show the dropdown immediately when the control receives focus. */
     this.openOnFocus = true;
-    /** After a selection is made, the dropdown will remain open if in a multi-selection control or will close in a single-selection control. Setting closeAfterSelect to true will force the dropdown to close after selections are made. Setting closeAfterSelect to false will keep the dropdown open after selections are made. */
     this.closeAfterSelect = null;
-    /** Invoked when new options should be loaded from the server. Called with the current query string and a callback function to call with the results when they are loaded (or nothing when an error arises). */
     this.load = null;
-    /** Minimum of characters required to execute the `load` function */
     this.minCharacters = 3;
-    /** The number of milliseconds to wait before requesting options from the server or null. If null, throttling is disabled. Useful when loading options dynamically while the user types a search / filter expression. */
     this.loadThrottle = 300;
-    /** If true, the load function will be called upon control initialization (with an empty search). Alternatively it can be set to 'focus' to call the load function when control receives focus. */
     this.preload = false;
-    /** The name of the property to render as an option / item label (not needed when custom rendering functions are defined). */
     this.labelField = "text";
-    /** The name of the property to use as the value when an item is selected. */
     this.valueField = "value";
-    /** The name of the property to group items by. */
     this.optgroupField = "optgroup";
-    /** The name of the property to render as an option group label (not needed when custom rendering functions are defined). */
     this.optgroupLabelField = "label";
-    /** The name of the option group property that serves as its unique identifier. */
     this.optgroupValueField = "value";
-    /** Name of hidden select element */
+    this.lockOptgroupOrder = undefined;
     this.name = "";
-    /** Variant */
     this.variant = "default";
-    /** Size variant */
     this.size = "default";
-    /** Whether the dropdown is disabled */
     this.disabled = false;
-    /** Popover placement */
     this.popoverPlacement = "bottom";
-    /** Label */
     this.label = "";
-    /** Icon (use instead of icon slot) */
     this.icon = "";
-    /** Prevent option search */
     this.noSearch = false;
-    /** Prevent backspace delete */
     this.noBackspaceDelete = false;
-    /** Invalid status */
     this.invalid = false;
-    /** Required status */
     this.required = false;
-    /** Show text in label depending if field is optional/required */
     this.showMarker = false;
-    /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.localization = undefined;
     this.a11yDescribedby = "";
   }
   optionsWatcher(newValue) {
@@ -193,7 +167,7 @@ export class StzhDropdown {
     this.searchFieldWatcher(this.searchField);
     this.errorWatcher(this.error);
     if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, 'dropdown');
+      this.localization = await fetchTranslations(this.element, "dropdown");
     }
   }
   async componentWillUpdate() {
@@ -425,6 +399,12 @@ export class StzhDropdown {
       tomSelectOptions.items = this._items;
     }
     this.tomSelect = new TomSelect(this.select, tomSelectOptions);
+    if (!this.openOnFocus) {
+      // we still want to enable opening the dropdown by click
+      this.tomSelect.control.addEventListener("click", () => {
+        this.tomSelect.open();
+      });
+    }
   }
   disconnectedCallback() {
     if (this.tomSelect) {

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

@@ -4,13 +4,9 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhFieldset {
   constructor() {
-    /** Legend describing the field group inside the fieldset */
     this.legend = "";
-    /** Hide legend to show only for screenreaders */
     this.hideLegend = false;
-    /** Heading level inside legend */
     this.legendLevel = "";
-    /** Type of curve to overwrite the curve inherited from `level` attribute */
     this.legendCurve = "auto";
   }
   render() {

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

@@ -7,9 +7,7 @@ import { hasSlot } from "../../utils/utils";
  */
 export class StzhFigure {
   constructor() {
-    /** Caption */
     this.caption = "";
-    /** Copyright */
     this.copyright = "";
   }
   render() {

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

@@ -12,12 +12,6 @@ const CLASS_CONTAINER_ENABLED = "stzh-flyingfocus-enabled";
  */
 export class StzhFlyingfocus {
   constructor() {
-    this.style = {};
-    this.position = {};
-    this.enabled = false;
-    this.visible = false;
-    this.helper = false;
-    this.moving = false;
     this.container = document.body;
     this.previousTargetRect = null;
     this.repositionElement = () => {
@@ -43,6 +37,12 @@ export class StzhFlyingfocus {
       }
       this.repositionElement();
     };
+    this.style = {};
+    this.position = {};
+    this.enabled = false;
+    this.visible = false;
+    this.helper = false;
+    this.moving = false;
   }
   handleKeydown(e) {
     // Show animation only upon Tab or Arrow keys press.

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

@@ -6,10 +6,6 @@ import { hasSlot, setPropsIfNull } from "../../utils/utils";
  */
 export class StzhFooter {
   constructor() {
-    /** Footer variant */
-    this.variant = "default";
-    /** Main URL for shortlinks */
-    this.mainUrl = "https://stadt-zuerich.ch";
     this.init = () => {
       const socialLink = this.element.querySelector('stzh-link[slot="social-link"]');
       const links = this.element.querySelectorAll('stzh-link[slot="link"]');
@@ -22,6 +18,10 @@ export class StzhFooter {
         link.setAttribute("role", "listitem");
       });
     };
+    this.copyright = undefined;
+    this.variant = "default";
+    this.mainUrl = "https://stadt-zuerich.ch";
+    this.localization = undefined;
   }
   async componentWillLoad() {
     if (typeof this.copyright === "undefined") {

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

@@ -114,24 +114,19 @@
 }
 
 .stzh-ghettobox {
-  padding-top: var(--stzh-space-large);
-  padding-bottom: var(--stzh-space-large);
-  padding-left: var(--stzh-space-xxlarge);
-  padding-right: var(--stzh-space-xxlarge);
+  padding-top: var(--stzh-space-xxlarge);
+  padding-bottom: var(--stzh-space-xxlarge);
+  padding-left: var(--stzh-space-xxxlarge);
+  padding-right: var(--stzh-space-xxxlarge);
   position: relative;
   display: flex;
   background-color: var(--background-color);
   color: var(--color);
   box-shadow: var(--stzh-box-shadow-message);
 }
-@media screen and (min-width: 600px) {
-  .stzh-ghettobox {
-    padding-top: var(--stzh-space-xlarge);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-ghettobox {
-    padding-top: var(--stzh-space-xxlarge);
+    padding-top: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -139,14 +134,9 @@
     padding-top: var(--stzh-space-xxxxlarge);
   }
 }
-@media screen and (min-width: 600px) {
-  .stzh-ghettobox {
-    padding-bottom: var(--stzh-space-xlarge);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-ghettobox {
-    padding-bottom: var(--stzh-space-xxlarge);
+    padding-bottom: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -159,6 +149,11 @@
     padding-left: var(--stzh-space-xxxxlarge);
   }
 }
+@media screen and (min-width: 1024px) {
+  .stzh-ghettobox {
+    padding-left: var(--stzh-space-big);
+  }
+}
 @media screen and (min-width: 1260px) {
   .stzh-ghettobox {
     padding-left: var(--stzh-space-xbig);
@@ -250,6 +245,11 @@
     margin-top: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  .stzh-ghettobox__description:not(:empty), .stzh-ghettobox__button:not(:empty) {
+    margin-top: var(--stzh-space-large);
+  }
+}
 .stzh-ghettobox__close {
   flex-shrink: 0;
 }

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

@@ -9,22 +9,6 @@ const KEY_PREFIX_CLOSE_TIME = "stzh-components-ghettobox-close-time";
  */
 export class StzhGhettobox {
   constructor() {
-    /** Overwrite hidden h1 title */
-    this.hiddenTitle = "";
-    /** Main title */
-    this.mainTitle = "";
-    /** Description */
-    this.description = "";
-    /**
-     * Name of cookie to compare its value with set `publishDate`
-     * to determine if ghettobox was already closed before by the user.
-     * If empty (""), no check is done and ghettobox
-     * will always be shown again after a refresh.
-     * Cookie name will be prefixed with `stzh-components-ghettobox-close-time`.
-     */
-    this.closeTimeKey = "global-alert";
-    /** Open state */
-    this.open = true;
     this.onCloseButtonClick = () => {
       this.hide();
     };
@@ -40,6 +24,13 @@ export class StzhGhettobox {
         });
       }
     };
+    this.hiddenTitle = "";
+    this.mainTitle = "";
+    this.description = "";
+    this.publishDate = undefined;
+    this.closeTimeKey = "global-alert";
+    this.localization = undefined;
+    this.open = true;
   }
   publishDateWatcher(newValue) {
     if (typeof newValue === "string") {

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

@@ -1,7 +1,7 @@
 import { h } from '../../utils/h';
 import readme from './readme.md';
 import { withDesign } from 'storybook-addon-designs';
-// import { getFigmaLink } from '../../../figma';
+import { getFigmaLink } from '../../../figma';
 
 export default {
   title: 'Components/Ghettobox',
@@ -16,11 +16,11 @@ export default {
         component: readme
       }
     },
-    // design: {
-    //   type: 'figma',
-    //   url: getFigmaLink('ghettobox'),
-    //   allowFullscreen: true
-    // }
+    design: {
+      type: 'figma',
+      url: getFigmaLink('ghettobox'),
+      allowFullscreen: true
+    }
   },
   decorators: [
     withDesign

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

@@ -9,17 +9,11 @@ import { media } from '../../utils/media-utils';
  */
 export class StzhHeader {
   constructor() {
-    /** Portal link (for logo) */
     this.href = "https://stadt-zuerich.ch";
-    /**
-     * Prevent creating a appnav placeholder element
-     * with the size of appnav inside header parent element.
-     * This prevents the fixed appnav to overlap
-     * content at the end on mikro breakpoint,
-     * but could lead to problems with certain layouts.
-     */
     this.preventAppnavPlaceholder = false;
     this.hideLogo = false;
+    this.paddingTop = undefined;
+    this.metabarTransform = undefined;
     this.sticky = false;
     this.stickyClosing = false;
     this.stickyMetabar = false;

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

@@ -134,37 +134,27 @@
   padding-bottom: var(--stzh-space-xsmall);
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);
 }
-@media screen and (min-width: 600px) {
-  .stzh-heading--with-border {
-    padding-bottom: var(--stzh-space-small);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-heading--with-border {
-    padding-bottom: var(--stzh-space-medium);
+    padding-bottom: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-heading--with-border {
-    padding-bottom: var(--stzh-space-large);
+    padding-bottom: var(--stzh-space-medium);
   }
 }
 .stzh-heading--curve-hero.stzh-heading--with-border {
-  padding-bottom: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  .stzh-heading--curve-hero.stzh-heading--with-border {
-    padding-bottom: var(--stzh-space-large);
-  }
+  padding-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   .stzh-heading--curve-hero.stzh-heading--with-border {
-    padding-bottom: var(--stzh-space-xlarge);
+    padding-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-heading--curve-hero.stzh-heading--with-border {
-    padding-bottom: var(--stzh-space-xxlarge);
+    padding-bottom: var(--stzh-space-xxxlarge);
   }
 }
 .stzh-heading--level-1 {

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

@@ -4,11 +4,8 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhHeading {
   constructor() {
-    /** Heading level */
     this.level = "1";
-    /** Type of curve to overwrite the curve inherited from `level` attribute */
     this.curve = "auto";
-    /** With border bottom separator */
     this.withBorder = false;
   }
   render() {

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

@@ -1,5 +1,7 @@
 import { h } from '../../utils/h';
 import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
 
 export default {
   title: 'Components/HorizontalRule',
@@ -10,8 +12,16 @@ export default {
       description: {
         component: readme
       }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('hr'),
+      allowFullscreen: true
     }
-  }
+  },
+  decorators: [
+    withDesign
+  ]
 };
 
 const Template = (args) => (

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

@@ -123,19 +123,14 @@
 :host([curve=tiny]) {
   --space: var(--stzh-space-xsmall);
 }
-@media screen and (min-width: 600px) {
-  :host([curve=tiny]) {
-    --space: var(--stzh-space-small);
-  }
-}
 @media screen and (min-width: 1024px) {
   :host([curve=tiny]) {
-    --space: var(--stzh-space-medium);
+    --space: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
   :host([curve=tiny]) {
-    --space: var(--stzh-space-large);
+    --space: var(--stzh-space-medium);
   }
 }
 
@@ -147,6 +142,11 @@
     --space: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host([curve=small]) {
+    --space: var(--stzh-space-large);
+  }
+}
 
 :host([curve=regular]) {
   --space: var(--stzh-space-medium);
@@ -163,35 +163,25 @@
 }
 
 :host([curve=medium]) {
-  --space: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host([curve=medium]) {
-    --space: var(--stzh-space-large);
-  }
+  --space: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host([curve=medium]) {
-    --space: var(--stzh-space-xlarge);
+    --space: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host([curve=medium]) {
-    --space: var(--stzh-space-xxlarge);
+    --space: var(--stzh-space-xxxlarge);
   }
 }
 
 :host([curve=large]) {
-  --space: var(--stzh-space-large);
-}
-@media screen and (min-width: 600px) {
-  :host([curve=large]) {
-    --space: var(--stzh-space-xlarge);
-  }
+  --space: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 1024px) {
   :host([curve=large]) {
-    --space: var(--stzh-space-xxlarge);
+    --space: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -201,13 +191,18 @@
 }
 
 :host([curve=big]) {
-  --space: var(--stzh-space-xxlarge);
+  --space: var(--stzh-space-xxxlarge);
 }
 @media screen and (min-width: 600px) {
   :host([curve=big]) {
     --space: var(--stzh-space-xxxxlarge);
   }
 }
+@media screen and (min-width: 1024px) {
+  :host([curve=big]) {
+    --space: var(--stzh-space-big);
+  }
+}
 @media screen and (min-width: 1260px) {
   :host([curve=big]) {
     --space: var(--stzh-space-xbig);
@@ -215,7 +210,7 @@
 }
 
 :host([curve=huge]) {
-  --space: var(--stzh-space-xxxlarge);
+  --space: var(--stzh-space-xxxxlarge);
 }
 @media screen and (min-width: 600px) {
   :host([curve=huge]) {

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

@@ -4,23 +4,14 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhHspace {
   constructor() {
-    /** Type of curve */
     this.curve = "none";
-    /** Type of size */
     this.size = "inherit";
-    /** Type of size above small breakpoint  */
     this.sizeSmall = "inherit";
-    /** Type of size above medium breakpoint  */
     this.sizeMedium = "inherit";
-    /** Type of size above large breakpoint  */
     this.sizeLarge = "inherit";
-    /** Type of size above ultra breakpoint  */
     this.sizeUltra = "inherit";
-    /** Alignment */
     this.justify = "start";
-    /** Apply spacing to slotted elements */
     this.around = false;
-    /** Add border */
     this.border = "none";
   }
   render() {

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

@@ -2,15 +2,7 @@ import { Host, h } from "@stencil/core";
 let iconCounter = 0;
 export class StzhIcon {
   constructor() {
-    /**
-     * Icon which should be displayed
-     * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.
-     */
     this.name = "";
-    /**
-     * Hidden icon title for screenreader
-     * (usually not needed when e.g. inside links or buttons that have text)
-    */
     this.a11yTitle = "";
   }
   componentWillLoad() {