@oiz/stzh-components 2.0.0 → 2.1.0-beta

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

@@ -13,24 +13,7 @@ let radiogroupCounter = 0;
  */
 export class StzhRadiogroup {
   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;
-    /** Required status */
-    this.required = false;
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** Select a radio by value */
-    this.value = "";
-    /** Direction */
-    this.direction = "vertical";
-    /** Current checked radio element (readonly) */
-    this.checkedRadio = null;
-    /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */
-    this.preventUpdateProperties = [];
+    this._preventUpdateProperties = [];
     this.init = () => {
       // update radios
       this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));
@@ -42,6 +25,21 @@ export class StzhRadiogroup {
       this.watchInvalid(this.invalid);
       this.watchRequired(this.required);
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = undefined;
+    this.legend = undefined;
+    this.hideLegend = false;
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.value = "";
+    this.direction = "vertical";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.checkedRadio = null;
+    this.preventUpdateProperties = [];
   }
   watchName(newValue) {
     this.updateRadiosProperty("name", newValue);
@@ -80,12 +78,20 @@ export class StzhRadiogroup {
     }
     this.invalid = this._error.length > 0;
   }
+  preventUpdatePropertiesWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._preventUpdateProperties = JSON.parse(newValue);
+    }
+    else {
+      this._preventUpdateProperties = newValue;
+    }
+  }
   onChange(event) {
     this.value = event.detail.value;
   }
   updateRadiosProperty(prop, value) {
     this.radios.forEach((radio) => {
-      if (prop === "name" || (this.preventUpdateProperties.indexOf(prop) === -1)) {
+      if (prop === "name" || (this._preventUpdateProperties.indexOf(prop) === -1)) {
         radio[camelCase(prop)] = value;
       }
     });
@@ -108,6 +114,7 @@ export class StzhRadiogroup {
   async componentWillLoad() {
     this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;
     this.errorWatcher(this.error);
+    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, 'radiogroup');
     }
@@ -223,7 +230,7 @@ export class StzhRadiogroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The name of the input radio elements"
+          "text": "The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name"
         },
         "attribute": "name",
         "reflect": true
@@ -427,11 +434,11 @@ export class StzhRadiogroup {
         "defaultValue": "null"
       },
       "preventUpdateProperties": {
-        "type": "unknown",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
+          "original": "string[] | string",
+          "resolved": "string | string[]",
           "references": {}
         },
         "required": false,
@@ -440,6 +447,8 @@ export class StzhRadiogroup {
           "tags": [],
           "text": "Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker)"
         },
+        "attribute": "prevent-update-properties",
+        "reflect": false,
         "defaultValue": "[]"
       }
     };
@@ -464,6 +473,9 @@ export class StzhRadiogroup {
       }, {
         "propName": "error",
         "methodName": "errorWatcher"
+      }, {
+        "propName": "preventUpdateProperties",
+        "methodName": "preventUpdatePropertiesWatcher"
       }];
   }
   static get listeners() {

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

@@ -18,6 +18,8 @@ export class StzhReadspeaker {
         });
       });
     };
+    this.href = undefined;
+    this.eventId = undefined;
   }
   // Sometimes the library is loaded later, so we register
   // the click events also when the page has loaded

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

@@ -7,9 +7,7 @@ const CLASS_EXTERNAL_ICON = 'stzh-richtext__external-icon';
  */
 export class StzhRichtext {
   constructor() {
-    /** Selector to recognize external link and attach an icon */
     this.externalLinkSelector = 'a[rel*="external"], a.external, a.extern';
-    /** Icon used for marking external links */
     this.externalLinkIcon = 'external-link';
   }
   addExternalLinkIcons() {

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

@@ -4,21 +4,13 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhRow {
   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.justify = "start";
-    /** Control how cells items are positioned along a container's cross axis */
     this.items = "start";
-    /** Utilities for controlling how rows are positioned in multi-row flex containers. */
     this.content = "start";
   }
   render() {

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

@@ -6,16 +6,13 @@ let saptchaCounter = 0;
  */
 export class StzhSaptcha {
   constructor() {
-    /** Numbers shown to user for selection */
-    this.numbers = [];
     this._numbers = [];
-    /** The value of the input element */
+    this.localization = undefined;
+    this.numbers = [];
     this.value = "";
-    /** Name of input */
     this.name = "saptcha";
-    /** Invalid status */
+    this.error = undefined;
     this.invalid = false;
-    /** Whether the element is disabled or not */
     this.disabled = false;
   }
   numbersWatcher(newValue) {

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

@@ -4,7 +4,6 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhSection {
   constructor() {
-    /** Variant */
     this.variant = "default";
   }
   render() {

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

@@ -0,0 +1,146 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Richtext
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Appnav
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Accordions
+ */
+/**
+ * Buttons
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Container
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+}
+:host[hidden] {
+  display: none;
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
+.stzh-share__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+.stzh-share__item:not(:last-child) {
+  margin-right: var(--stzh-space-small);
+}
+.stzh-share__icon {
+  --size: var(--stzh-icon-size-xsmall);
+}
+.stzh-share__button {
+  color: var(--stzh-color-white);
+  border-radius: var(--stzh-button-border-radius);
+  display: grid;
+  place-items: center;
+  width: 2.875rem;
+  height: 1.625rem;
+}
+.stzh-share__button.is-facebook {
+  background-color: #3b5998;
+}
+.stzh-share__button.is-facebook:hover {
+  background-color: #23355B;
+}
+.stzh-share__button.is-twitter {
+  background-color: #1da1f2;
+}
+.stzh-share__button.is-twitter:hover {
+  background-color: #116091;
+}
+.stzh-share__button.is-linkedin {
+  background-color: #1485BD;
+}
+.stzh-share__button.is-linkedin:hover {
+  background-color: #0C4F71;
+}
+.stzh-share__button.is-xing {
+  background-color: #0E7574;
+}
+.stzh-share__button.is-xing:hover {
+  background-color: #084645;
+}
+.stzh-share__button.is-mail {
+  background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-share__button.is-mail:hover {
+  background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}

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

@@ -0,0 +1,184 @@
+import { Host, h } from "@stencil/core";
+import { fetchTranslations } from "../../utils/translation-utils";
+const abbreviateText = function (text, length) {
+  if (text.length <= length) {
+    return text;
+  }
+  var lastWhitespaceIndex = text.substring(0, length - 1).lastIndexOf(' ');
+  if (lastWhitespaceIndex) {
+    return text.substring(0, lastWhitespaceIndex) + '\u2026';
+  }
+  else {
+    return text.substring(0, length - 1);
+  }
+};
+// returns content of <meta name="" content=""> tags or '' if empty/non existant
+const getMeta = function (name) {
+  const meta = document.querySelector(`meta[name="${name}"],[property="${name}"]`);
+  return meta ? meta.getAttribute("content") : "";
+};
+/**
+ */
+export class StzhShare {
+  constructor() {
+    this._services = [];
+    this.openPopup = (url, event) => {
+      event.preventDefault();
+      window.open(url, "_blank", "width=600,height=460");
+    };
+    this.localization = undefined;
+    this.url = window.location.href;
+    this.services = [
+      "facebook", "twitter", "linkedin", "xing", "mail"
+    ];
+  }
+  servicesWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._services = JSON.parse(newValue);
+    }
+    else {
+      this._services = newValue;
+    }
+  }
+  async componentWillLoad() {
+    this.servicesWatcher(this.services);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "share");
+    }
+  }
+  render() {
+    var _a;
+    const classes = {
+      "stzh-share": true
+    };
+    const shareUrl = encodeURIComponent(this.url);
+    const mailSubject = encodeURIComponent(this.localization.mailSubject);
+    const mailBody = encodeURIComponent((_a = this.localization.mailBody) === null || _a === void 0 ? void 0 : _a.replace(/\{shareUrl\}/gi, this.url));
+    const title = encodeURIComponent(document.title);
+    const description = encodeURIComponent(getMeta("description"));
+    // 280 - URL (always 24) = 256
+    const maxTweetLength = 256;
+    const serviceData = {
+      "facebook": {
+        popup: true,
+        blank: true,
+        url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,
+        text: this.localization.shareFacebook,
+        icon: "facebook"
+      },
+      "twitter": {
+        popup: true,
+        blank: true,
+        url: `https://twitter.com/intent/tweet?text=${abbreviateText(title, maxTweetLength)}&url=${shareUrl}`,
+        text: this.localization.shareTwitter,
+        icon: "twitter"
+      },
+      "linkedin": {
+        popup: true,
+        blank: true,
+        url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,
+        text: this.localization.shareLinkedin,
+        icon: "linkedin"
+      },
+      "xing": {
+        popup: true,
+        blank: true,
+        url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,
+        text: this.localization.shareXing,
+        icon: "xing"
+      },
+      "mail": {
+        popup: false,
+        blank: false,
+        url: `mailto:?subject=${mailSubject}&body=${mailBody}`,
+        text: this.localization.shareMail,
+        icon: "mail"
+      }
+    };
+    return (h(Host, null, h("div", { class: classes }, h("ul", { class: "stzh-share__list" }, this._services.map((service) => h("li", { class: "stzh-share__item" }, h("stzh-tooltip", { content: serviceData[service].text }, h("a", { class: `stzh-share__button is-${service}`, href: serviceData[service].url, "aria-label": serviceData[service].text, rel: serviceData[service].blank ? "nofollow noopener noreferrer" : "nofollow", target: serviceData[service].blank ? "_blank" : "_self", onClick: serviceData[service].popup ? (e) => this.openPopup(serviceData[service].url, e) : null }, h("stzh-icon", { class: "stzh-share__icon", name: serviceData[service].icon })))))))));
+  }
+  static get is() { return "stzh-share"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-share.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-share.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhShareLocalizedText",
+          "resolved": "StzhLocaleComponent & { mailSubject: string; mailBody: string; shareFacebook: string; shareTwitter: string; shareLinkedin: string; shareXing: string; shareMail: string; }",
+          "references": {
+            "StzhShareLocalizedText": {
+              "location": "import",
+              "path": "./stzh-share.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "URL of current site (uses full URL by default)"
+        },
+        "attribute": "url",
+        "reflect": false,
+        "defaultValue": "window.location.href"
+      },
+      "services": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ShareService[] | string",
+          "resolved": "ShareService[] | string",
+          "references": {
+            "ShareService": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Array of enabled share buttons.\nPossible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`"
+        },
+        "attribute": "services",
+        "reflect": false,
+        "defaultValue": "[\n    \"facebook\", \"twitter\", \"linkedin\", \"xing\", \"mail\"\n  ]"
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "services",
+        "methodName": "servicesWatcher"
+      }];
+  }
+}

package/dist/collection/components/stzh-share/stzh-share.localization.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,33 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Share',
+  component: 'stzh-share',
+  parameters: {
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('share'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-share {...args}></stzh-share>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  url: 'https://www.stadt-zuerich.ch/gud/de/index/gesundheitsversorgung/public-health/coronavirus-sars-cov-2/BliibDraa.html',
+};

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

@@ -4,7 +4,9 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhSkiplink {
   constructor() {
-    /** Whether the skiplink is currently focused */
+    this.href = undefined;
+    this.linkAccesskey = undefined;
+    this.linkTitle = undefined;
     this.focused = false;
   }
   focusinHandler() {

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

@@ -15,35 +15,6 @@ let sortableCounter = 0;
  */
 export class StzhSortable {
   constructor() {
-    /** Wether sorting is disabled or not */
-    this.disabled = false;
-    /** HTML attribute that is used by the `toArray()` method */
-    this.dataIdAttribute = "data-id";
-    /** Container  */
-    this.container = () => {
-      var _a;
-      return (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
-    };
-    /** Algorithm how the ghost element will be cloned */
-    this.ghostClone = (dragElement) => {
-      const [clonedElement] = cloneElement(dragElement);
-      return clonedElement;
-    };
-    /** Filtered elements that should prevent dragging inside the drag item elements */
-    this.filterElements = [
-      "[data-stzh-sortable-filtered]",
-      "[sortable-disabled]",
-      "button",
-      "a[href]",
-      "input",
-      "select",
-      "textarea",
-      "label",
-      "iframe",
-      "details",
-      "area",
-      "stzh-sortable"
-    ];
     this.selectedItem = null;
     this.resetItemOnBlur = false;
     this.init = () => {
@@ -139,6 +110,31 @@ export class StzhSortable {
         this.resetActiveItem();
       }
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.dataIdAttribute = "data-id";
+    this.container = () => {
+      var _a;
+      return (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    };
+    this.ghostClone = (dragElement) => {
+      const [clonedElement] = cloneElement(dragElement);
+      return clonedElement;
+    };
+    this.filterElements = [
+      "[data-stzh-sortable-filtered]",
+      "[sortable-disabled]",
+      "button",
+      "a[href]",
+      "input",
+      "select",
+      "textarea",
+      "label",
+      "iframe",
+      "details",
+      "area",
+      "stzh-sortable"
+    ];
   }
   /** Serializes the sortable's item data-id's (dataIdAttr option) into an array of string */
   async toArray() {

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

@@ -3,13 +3,9 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhStatus {
   constructor() {
-    /** Percent */
     this.percent = 0;
-    /** Whether to hide/show loadingbar */
     this.withLoadingbar = false;
-    /** Label */
     this.label = "";
-    /** Type */
     this.type = "default";
   }
   render() {