@oiz/stzh-components 2.0.0 → 2.1.0-beta

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

@@ -0,0 +1,89 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Audio',
+  component: 'stzh-audio',
+  parameters: {
+    actions: {
+      handles: []
+    },
+    layout: 'padded',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('audio'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-audio {...args}></stzh-audio>
+);
+
+const TemplateWithTranscript = (args) => (
+  <stzh-audio {...args}>
+    <p slot="transcript">
+      0:14 Wenn sich irgendwo in Zürich Menschen begegnen
+      <br /> 0:18 treffen im Hintergrund Vielfalt und Weltoffenheit zusammen
+      <br /> 0:25
+      <br /> 0:29 Zürich, die inspirierende weltoffene kleine Metropole im Herzen
+      <br /> 0:36 Europas
+      <br /> 0:38
+      <br /> 0:42 Zürich, die Stadt am See
+      <br /> 0:44 mit mediterranem Lebensgefühl
+      <br /> 0:46 eine einzigartige Symbiose von Qualitäten
+      <br /> 0:50 so wie die gelebte Toleranz machen Zürich zum regionalen Zentrum mit weit
+      <br /> 0:55 reichender Ausstrahlung
+      <br /> 0:57 Und... zur Tourismusdestination
+      <br /> 1:00 Zürich verfügt über eine hervorragende Infrastruktur und bietet
+      <br /> 1:04 Lebensqualität auf höchstem Niveau
+      <br /> 1:08 diese Qualitäten sollen erhalten bleiben.
+      <br /> 1:11 Nachhaltigkeit ist die Maxime der Zukunft.
+      <br /> 1:20 Viele internationale Unternehmen haben ihren Hauptsitz in Zürich
+      <br /> 1:24 sie schätzen das Zusammentreffen wichtige Standortvorteile zum Beispiel
+      <br /> 1:29 die Verkehrslage mit globaler Vernetzung
+      <br /> 1:32 die qualifizierten und mehrsprachigen Arbeitskräfte
+      <br /> 1:36 die hohe Qualität der Dienstleistungen
+      <br /> 1:39 der Zugang zu führenden Lehr- und Forschungsinstitutionen
+      <br /> 1:46 als bedeutender Bildungsstandort mit Studierenden aus aller Welt engagiert
+      <br /> 1:51 sich Zürich dem weltweiten Wissensaustausch auf höchster Ebene Okt
+      <br /> 1:56 Kulturelle Vielfalt und soziale Durchmischung sind Nährboden für
+      <br /> 2:01 Wachstum und Kreativität.
+      <br /> 2:19 In Zürich lässt sich's ausgezeichnet Leben
+      <br /> 2:29 Zürichs Offenheit hat Tradition
+      <br /> 2:32 seit je her Leben und arbeiten in der Limmatstadt unterschiedliche Kulturen in
+      <br /> 2:36 einem bereichernden Austausch zusammen
+      <br /> 2:42 fast die Hälfte aller Zürcher bringt einen Migrationshintergrund mit
+      <br /> 2:49 Zürich lebt eine selbstverständliche Willkommenskultur
+      <br /> 2:53 Fremde sollen sich ohne große administrative Hürden in der Stadt einleben
+      <br /> 2:57 und deren Eigenheiten verstehen und schätzen lernen
+      <br /> 3:05 das lockere Zusammenleben birgt viel Potenzial für einen kreativen Lebens-
+      <br /> 3:10 und Unternehmensstandort
+      <br /> 3:12 und das bringt letztlich Zürich der Welt
+      <br /> 3:15 und die Welt Zürich näher
+      <br /> 3:20 damit auch in Zukunft die Türen offen stehen öffnet Zürich weiterhin gerne
+      <br /> 3:25 seinen kulturellen Horizont
+    </p>
+  </stzh-audio>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  src: 'media/samples/audio.mp3'
+};
+
+export const WithTranscript = TemplateWithTranscript.bind({});
+WithTranscript.args = {
+  src: 'media/samples/audio.mp3'
+};

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

@@ -4,9 +4,7 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhBadge {
   constructor() {
-    /** Text content of the badge */
     this.label = "";
-    /** Type */
     this.type = "default";
   }
   render() {

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

@@ -217,6 +217,7 @@
   min-width: var(--height);
   height: var(--height);
   border-radius: var(--stzh-button-border-radius);
+  text-align: left;
   /* Hover / Focus / Checked / Disabled of Radio Type */
   /* Size variants */
   /* Badge positioning variants */

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

@@ -6,50 +6,6 @@ import { hasSlot } from "../../utils/utils";
  */
 export class StzhButton {
   constructor() {
-    /** Display a badge aligned to button or icons */
-    this.badge = "";
-    /** Badge type */
-    this.badgeType = "default";
-    /** Badge position */
-    this.badgePosition = "button";
-    /** Whether badge should be displayed empty */
-    this.badgeEmpty = false;
-    /** Whether the button is full width */
-    this.fullwidth = false;
-    /** Size variant */
-    this.size = "default";
-    /** Text alignment */
-    this.textAlign = "default";
-    /** Variant style */
-    this.variant = "default";
-    /** Icon (use instead of icon slot) */
-    this.icon = "";
-    /** Icon Position */
-    this.iconPosition = "left";
-    /** Checked status (if type is radio) */
-    this.checked = false;
-    /** The name of the input element (if type is radio) */
-    this.name = "";
-    /** The value of the input element (if type is radio) */
-    this.value = "";
-    /** `href` if the button should be used as link  */
-    this.href = "";
-    /** Target if the button is used as link (if `href` used)  */
-    this.target = "";
-    /** Type of the button */
-    this.type = "button";
-    /** Whether the button is disabled */
-    this.disabled = false;
-    /** Whether the button is active */
-    this.active = false;
-    /** Label */
-    this.label = "";
-    /** Effect/Animation used */
-    this.effect = "default";
-    /** Whether only an icon is used inside the button */
-    this.iconOnly = false;
-    /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
-    this.a11yDescribedby = "";
     this.onInput = (event) => {
       this.checked = this.input.checked;
       this.stzhChange.emit({
@@ -89,6 +45,29 @@ export class StzhButton {
         event.preventDefault();
       }
     };
+    this.badge = "";
+    this.badgeType = "default";
+    this.badgePosition = "button";
+    this.badgeEmpty = false;
+    this.fullwidth = false;
+    this.size = "default";
+    this.textAlign = "default";
+    this.variant = "default";
+    this.icon = "";
+    this.iconPosition = "left";
+    this.checked = false;
+    this.name = "";
+    this.value = "";
+    this.href = "";
+    this.target = "";
+    this.type = "button";
+    this.disabled = false;
+    this.active = false;
+    this.label = "";
+    this.effect = "default";
+    this.iconOnly = false;
+    this.a11yLabel = undefined;
+    this.a11yDescribedby = "";
   }
   /** Focus button */
   async setFocus() {
@@ -113,10 +92,10 @@ export class StzhButton {
     const iconUsed = hasSlot(this.element, "icon") || !!this.icon;
     const classes = {
       "stzh-button": true,
-      "stzh-button--fullwidth": this.fullwidth,
       "stzh-button--has-icon": iconUsed,
       "stzh-button--has-icon-only": this.iconOnly,
       "stzh-button--has-badge": !!this.badge,
+      "stzh-button--is-fullwidth": this.fullwidth,
       "stzh-button--is-disabled": this.disabled,
       "stzh-button--is-active": this.active,
       [`stzh-button--effect-${this.effect}`]: !!this.effect,

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

@@ -25,30 +25,6 @@ const keyCode = {
 let calendarCounter = 0;
 export class StzhCalendar {
   constructor() {
-    /** Date value. Must be in IS0-8601 format: YYYY-MM-DD. */
-    this.value = "";
-    /**
-     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the max property.
-     */
-    this.min = "";
-    /**
-     * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the min property.
-     */
-    this.max = "";
-    /**
-     * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.
-     * Default is Monday.
-     */
-    this.firstDayOfWeek = DaysOfWeek.Monday;
-    /**
-     * Controls which days are disabled and therefore disallowed.
-     * For example, this can be used to disallow selection of weekends.
-     */
-    this.isDateDisabled = () => false;
-    this.activeFocus = false;
-    this.focusedDay = new Date();
     // private focusedDayNode: HTMLButtonElement
     this.initialTouchX = null;
     this.initialTouchY = null;
@@ -160,6 +136,14 @@ export class StzhCalendar {
         setTimeout(() => element.focus(), 0);
       }
     };
+    this.value = "";
+    this.min = "";
+    this.max = "";
+    this.firstDayOfWeek = DaysOfWeek.Monday;
+    this.localization = undefined;
+    this.isDateDisabled = () => false;
+    this.activeFocus = false;
+    this.focusedDay = new Date();
   }
   createDateFormatters() {
     if (this.localization) {

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

@@ -9,56 +9,7 @@ import { fetchTranslations } from "../../utils/translation-utils";
  */
 export class StzhCard {
   constructor() {
-    /** Whether card is collapsed or not */
-    this.collapsed = false;
-    /** Whether card was starred */
-    this.starred = false;
-    /**
-     * Whether card star is displayed (with tooltip and menu-item in mobile popover).
-     * The tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`).
-     */
-    this.starrable = false;
-    /** Whether card is selectable */
-    this.selectable = false;
-    /** Whether card is checked (if card is selectable) */
-    this.checked = false;
-    /** The name of the input element (if card is selectable) */
-    this.name = "";
-    /** The value of the input element (if card is selectable) */
-    this.value = "";
-    /** Whether the element is disabled or not (if card is selectable) */
-    this.disabled = false;
-    /** Heading */
-    this.heading = "";
-    /** Subtitle */
-    this.subtitle = "";
     this._subtitles = [];
-    /** Card header actions */
-    this.headerActions = [];
-    /**
-     * Card footer actions.
-     * The [`stzh-actionset`](?path=/story/components-actionset) component is used internally.
-     * You can listen to clicks with the `stzhActionClick` event.
-     */
-    this.footerActions = [];
-    /** Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click */
-    this.subtitleInteractive = false;
-    /**
-     * Whether sorting should be disabled.
-     * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.
-     */
-    this.sortableDisabled = false;
-    /** Whether card is collapsible */
-    this.collapsible = false;
-    /** Whether to hide header separation border */
-    this.hideHeaderBorder = false;
-    /** Whether to hide footer separation border */
-    this.hideFooterBorder = false;
-    /**
-     * Whether movement menu items should be shown.
-     * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.
-     */
-    this.hideMovementActions = false;
     this.nodeChange = (entries) => {
       let changeInSlot = false;
       entries.forEach((entry) => {
@@ -159,6 +110,25 @@ export class StzhCard {
     this.handleSelectionChange = (event) => {
       this.checked = event.detail.checked;
     };
+    this.localization = undefined;
+    this.collapsed = false;
+    this.starred = false;
+    this.starrable = false;
+    this.selectable = false;
+    this.checked = false;
+    this.name = "";
+    this.value = "";
+    this.disabled = false;
+    this.heading = "";
+    this.subtitle = "";
+    this.headerActions = [];
+    this.footerActions = [];
+    this.subtitleInteractive = false;
+    this.sortableDisabled = false;
+    this.collapsible = false;
+    this.hideHeaderBorder = false;
+    this.hideFooterBorder = false;
+    this.hideMovementActions = false;
   }
   handleResize() {
     if (this.debounceResize) {

package/dist/collection/components/stzh-card-list/stzh-card-list.js

@@ -7,13 +7,6 @@ import { fetchTranslations } from "../../utils/translation-utils";
  */
 export class StzhCardList {
   constructor() {
-    /** Whether collapse/expand toggle link */
-    this.showToggleLink = false;
-    /** Whether sorting should be enabled */
-    this.sortableEnabled = false;
-    /** HTML attribute that is used by the `toArray()` of sortable method */
-    this.sortableDataIdAttribute = "data-id";
-    this.allCollapsed = false;
     this.collapseClick = () => {
       const cards = Array.from(this.element.querySelectorAll("stzh-card"));
       cards.forEach(card => {
@@ -47,6 +40,11 @@ export class StzhCardList {
       }
       return clonedElement;
     };
+    this.localization = undefined;
+    this.showToggleLink = false;
+    this.sortableEnabled = false;
+    this.sortableDataIdAttribute = "data-id";
+    this.allCollapsed = false;
   }
   collapseListener() {
     this.updateCollapsedState();

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

@@ -4,19 +4,12 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhCell {
   constructor() {
-    /** Default span of each cell */
     this.span = 12;
-    /** Default span of each cell above small breakpoint */
     this.spanSmall = 0;
-    /** Default span of each cell above medium breakpoint */
     this.spanMedium = 0;
-    /** Default span of each cell above large breakpoint */
     this.spanLarge = 0;
-    /** Default span of each cell above ultra breakpoint */
     this.spanUltra = 0;
-    /** Controlling how cells are positioned along a container's main axis */
     this.justifySelf = "auto";
-    /** Control how cells items are positioned along a container's cross axis */
     this.alignSelf = "auto";
   }
   render() {

package/dist/collection/components/stzh-checkbox/assets/check.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M2 11.3333L9 18.6667L22 5.33334" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M2 11.3333L9 18.6667L22 5.33334" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" />
 </svg>

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

@@ -220,9 +220,6 @@
   opacity: 0;
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
 }
-.stzh-checkbox__check path {
-  vector-effect: var(--stzh-base-vector-effect);
-}
 .stzh-checkbox__label {
   display: inline-block;
   color: var(--stzh-base-color);

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

@@ -12,24 +12,6 @@ let checkboxCounter = 0;
  */
 export class StzhCheckbox {
   constructor() {
-    /** Whether the checkbox is disabled */
-    this.disabled = false;
-    /** Name of the input element */
-    this.name = "";
-    /** Value of the input element */
-    this.value = "";
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /** Checked status */
-    this.checked = false;
-    /** Label */
-    this.label = "";
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */
-    this.a11yDescribedby = "";
     this.onInput = (event) => {
       this.checked = this.input.checked;
       this.stzhChange.emit({
@@ -63,6 +45,19 @@ export class StzhCheckbox {
         originalEvent: event
       });
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = "";
+    this.value = "";
+    this.invalid = false;
+    this.required = false;
+    this.checked = false;
+    this.label = "";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.showMarker = false;
+    this.error = undefined;
+    this.a11yDescribedby = "";
   }
   /** Focus input field */
   async setFocus() {

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

@@ -12,23 +12,8 @@ let checkboxgroupCounter = 0;
  */
 export class StzhCheckboxgroup {
   constructor() {
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** Hide legend to show only for screenreaders */
-    this.hideLegend = false;
-    /** Invalid status */
-    this.invalid = false;
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** Select a checkbox by value */
-    this.value = "";
     this._value = [];
-    /** Direction */
-    this.direction = "vertical";
-    /** Current checked checkbox elements (readonly) */
-    this.checkedCheckbox = null;
-    /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid) */
-    this.preventUpdateProperties = [];
+    this._preventUpdateProperties = [];
     this.init = () => {
       this.checkboxes = Array.from(this.element.querySelectorAll("stzh-checkbox"));
       this.updateCheckboxesProperty("a11y-describedby", `${this.checkboxgroupId}-description`);
@@ -38,6 +23,20 @@ export class StzhCheckboxgroup {
       this.watchInvalid(this.invalid);
       this.watchShowMarker(this.showMarker);
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = undefined;
+    this.legend = undefined;
+    this.hideLegend = false;
+    this.invalid = false;
+    this.showMarker = false;
+    this.value = "";
+    this.direction = "vertical";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.checkedCheckbox = null;
+    this.preventUpdateProperties = [];
   }
   watchName(newValue) {
     this.updateCheckboxesProperty("name", newValue);
@@ -82,6 +81,14 @@ export class StzhCheckboxgroup {
     }
     this.invalid = this._error.length > 0;
   }
+  preventUpdatePropertiesWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._preventUpdateProperties = JSON.parse(newValue);
+    }
+    else {
+      this._preventUpdateProperties = newValue;
+    }
+  }
   onChange(event) {
     if (event.detail.checked) {
       this._value.push(event.detail.value);
@@ -93,7 +100,7 @@ export class StzhCheckboxgroup {
   }
   updateCheckboxesProperty(prop, value) {
     this.checkboxes.forEach((checkbox) => {
-      if (prop === "name" || (this.preventUpdateProperties.indexOf(prop) === -1)) {
+      if (prop === "name" || (this._preventUpdateProperties.indexOf(prop) === -1)) {
         checkbox[camelCase(prop)] = value;
       }
     });
@@ -105,6 +112,7 @@ export class StzhCheckboxgroup {
   async componentWillLoad() {
     this.checkboxgroupId = `stzh-checkboxgroup-${checkboxgroupCounter++}`;
     this.errorWatcher(this.error);
+    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, 'checkboxgroup');
     }
@@ -397,11 +405,11 @@ export class StzhCheckboxgroup {
         "defaultValue": "null"
       },
       "preventUpdateProperties": {
-        "type": "unknown",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
+          "original": "string[] | string",
+          "resolved": "string | string[]",
           "references": {}
         },
         "required": false,
@@ -410,6 +418,8 @@ export class StzhCheckboxgroup {
           "tags": [],
           "text": "Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid)"
         },
+        "attribute": "prevent-update-properties",
+        "reflect": false,
         "defaultValue": "[]"
       }
     };
@@ -434,6 +444,9 @@ export class StzhCheckboxgroup {
       }, {
         "propName": "error",
         "methodName": "errorWatcher"
+      }, {
+        "propName": "preventUpdateProperties",
+        "methodName": "preventUpdatePropertiesWatcher"
       }];
   }
   static get listeners() {

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

@@ -5,30 +5,6 @@ import { Host, h } from "@stencil/core";
  */
 export class StzhChip {
   constructor() {
-    /** Label */
-    this.label = "";
-    /** Icon (use instead of icon slot) */
-    this.icon = "";
-    /** Whether remove button should be shown */
-    this.removable = false;
-    /** Variant */
-    this.variant = "tag";
-    /** Size */
-    this.size = "default";
-    /** Type */
-    this.type = "default";
-    /** Counter */
-    this.counter = "";
-    /** Label of remove button for screenreaders */
-    this.removeLabel = "";
-    /** Active */
-    this.active = false;
-    /** Disabled */
-    this.disabled = false;
-    /** Invert (only available for tag variant) */
-    this.invert = false;
-    /** Id for element which describes the button */
-    this.a11yDescribedby = "";
     this.onFocus = (event) => {
       const focusEvent = new FocusEvent("focus", {
         view: window,
@@ -65,6 +41,19 @@ export class StzhChip {
         originalEvent: event
       });
     };
+    this.label = "";
+    this.icon = "";
+    this.removable = false;
+    this.variant = "tag";
+    this.size = "default";
+    this.type = "default";
+    this.counter = "";
+    this.removeLabel = "";
+    this.active = false;
+    this.disabled = false;
+    this.invert = false;
+    this.a11yLabel = undefined;
+    this.a11yDescribedby = "";
   }
   /** Focus menu item */
   async setFocus() {

package/dist/collection/components/stzh-chip-select/stzh-chip-select.js

@@ -7,22 +7,8 @@ let chipSelectCounter = 0;
  */
 export class StzhChipSelect {
   constructor() {
-    /** Data */
-    this.data = [];
     this._data = [];
     this._dataDropdown = [];
-    /** Label */
-    this.label = "";
-    /** Value */
-    this.value = "";
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
-    this.a11yDescribedby = "";
     this.chipClick = (data) => {
       this.value = data.value;
       this.stzhChange.emit({
@@ -37,6 +23,18 @@ export class StzhChipSelect {
         value: this.value
       });
     };
+    this.localization = undefined;
+    this.data = [];
+    this.name = undefined;
+    this.label = "";
+    this.value = "";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.invalid = false;
+    this.required = false;
+    this.disabled = false;
+    this.a11yDescribedby = "";
   }
   dataWatcher(newValue) {
     if (typeof newValue === "string") {