@oiz/stzh-components 2.0.0 → 2.1.0-beta

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

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

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

@@ -0,0 +1,36 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Olmap',
+  component: 'stzh-olmap',
+  parameters: {
+    actions: {
+      handles: ['stzhInitialized', 'stzhPostRender', 'stzhMoveStart', 'stzhMoveEnd']
+    },
+    layout: 'padded',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('olmap'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-olmap {...args}></stzh-olmap>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};

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

@@ -6,11 +6,8 @@ const CLASS_BODY_OPEN = "stzh-overlay-open";
  */
 export class StzhOverlay {
   constructor() {
-    /** Whether overlay is open */
     this.open = false;
-    /** Stay in original position (true) or move to body (false) */
     this.stay = true;
-    /** Accessible label for dialog */
     this.a11yLabel = "";
   }
   async show() {

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

@@ -0,0 +1,150 @@
+/**
+ * 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;
+}
+
+:host ::slotted([slot=logo]) {
+  height: 2.375rem;
+}
+
+.stzh-pagebottom {
+  display: flex;
+  flex-direction: column;
+  /* With border */
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagebottom {
+    flex-direction: row;
+  }
+}
+.stzh-pagebottom__share-title {
+  font-size: var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));
+  line-height: var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));
+  margin-bottom: var(--stzh-space-small);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagebottom__share-title {
+    font-size: var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));
+    line-height: var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height));
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagebottom__logo {
+    margin-left: auto;
+  }
+}
+.stzh-pagebottom__logo-link:not(:empty) {
+  display: block;
+  margin-top: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagebottom__logo-link:not(:empty) {
+    margin-top: 0;
+    margin-left: var(--stzh-space-xlarge);
+  }
+}
+.stzh-pagebottom--with-border {
+  padding-top: var(--stzh-space-xlarge);
+  border-top: 0.0625rem solid var(--stzh-base-border-color);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagebottom--with-border {
+    padding-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagebottom--with-border {
+    padding-top: var(--stzh-space-xxxlarge);
+  }
+}

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

@@ -0,0 +1,151 @@
+import { Host, h, } from "@stencil/core";
+/**
+ * @slot logo - Slot for a logo image
+ */
+export class StzhPagebottom {
+  constructor() {
+    this.shareTitle = "";
+    this.shareUrl = undefined;
+    this.shareServices = undefined;
+    this.shareDisabled = false;
+    this.logoHref = "https://www.stadt-zuerich.ch";
+    this.withBorder = false;
+  }
+  render() {
+    const classes = {
+      "stzh-pagebottom": true,
+      "stzh-pagebottom--with-border": this.withBorder
+    };
+    return (h(Host, null, h("div", { class: classes }, !this.shareDisabled &&
+      h("div", { class: "stzh-pagebottom__share-wrapper" }, this.shareTitle &&
+        h("div", { class: "stzh-pagebottom__share-title" }, this.shareTitle), h("stzh-share", { url: this.shareUrl, services: this.shareServices })), h("div", { class: "stzh-pagebottom__logo" }, h("a", { href: this.logoHref, class: "stzh-pagebottom__logo-link" }, h("slot", { name: "logo" }))))));
+  }
+  static get is() { return "stzh-pagebottom"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-pagebottom.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-pagebottom.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "shareTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Share Title"
+        },
+        "attribute": "share-title",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "shareUrl": {
+        "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": "share-url",
+        "reflect": false
+      },
+      "shareServices": {
+        "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": "share-services",
+        "reflect": false
+      },
+      "shareDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to show share"
+        },
+        "attribute": "share-disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "logoHref": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Logo href"
+        },
+        "attribute": "logo-href",
+        "reflect": false,
+        "defaultValue": "\"https://www.stadt-zuerich.ch\""
+      },
+      "withBorder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to display border"
+        },
+        "attribute": "with-border",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

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

@@ -0,0 +1,44 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Pagebottom',
+  component: 'stzh-pagebottom',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('pagebottom'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-pagebottom {...args}></stzh-pagebottom>
+);
+
+const TemplateWithLogo = (args) => (
+  <stzh-pagebottom {...args}>
+    <img slot="logo" src="media/logo/stzh-company.svg" loading="lazy" alt="A company of the city of Zurich" />
+  </stzh-pagebottom>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};
+
+export const WithLogo = TemplateWithLogo.bind({});
+WithLogo.args = {
+  'with-border': true
+};

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

@@ -45,7 +45,7 @@ const TemplateWithActions = (args) => (
         Read site
       </stzh-link>
     </stzh-readspeaker>
-    <stzh-link slot="action-right" href="http://stadt-zuerich.ch">
+    <stzh-link slot="action-right" href="http://www.stadt-zuerich.ch">
       stadt-zuerich.ch
     </stzh-link>
     <stzh-text slot="lead">
@@ -59,7 +59,7 @@ const TemplateWithOneAction = (args) => (
     <stzh-heading slot="heading">
       Main title
     </stzh-heading>
-    <stzh-link slot="action-right" href="http://stadt-zuerich.ch">
+    <stzh-link slot="action-right" href="http://www.stadt-zuerich.ch">
       stadt-zuerich.ch
     </stzh-link>
     <stzh-text slot="lead">
@@ -78,7 +78,7 @@ const TemplateWithImageAndActions = (args) => (
         Read page
       </stzh-link>
     </stzh-readspeaker>
-    <stzh-link slot="action-right" href="http://stadt-zuerich.ch">
+    <stzh-link slot="action-right" href="http://www.stadt-zuerich.ch">
       stadt-zuerich.ch
     </stzh-link>
     <stzh-figure slot="image" caption="Laboris laborum aute id laboris culpa esse aliquip nisi anim velit.">

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

@@ -77,18 +77,6 @@ let popoverCounter = 0;
  */
 export class StzhPopover {
   constructor() {
-    /** Whether popover should be open */
-    this.open = false;
-    /** Default placement of popover relative to trigger element */
-    this.placement = "bottom";
-    /** Variant */
-    this.variant = "default";
-    /** Shifting of popover content */
-    this.skidding = 0;
-    /** Label for mobile view (use label slot as alternative) */
-    this.label = "";
-    /** Position strategy */
-    this.strategy = "absolute";
     this.initialTouchX = null;
     this.initialTouchY = null;
     this.handleKeydown = (event) => {
@@ -172,6 +160,15 @@ export class StzhPopover {
       this.initialTouchY = null;
       this.initialTouchX = null;
     };
+    this.open = false;
+    this.placement = "bottom";
+    this.variant = "default";
+    this.skidding = 0;
+    this.distance = undefined;
+    this.label = "";
+    this.strategy = "absolute";
+    this.localization = undefined;
+    this.computedPlacement = undefined;
   }
   /** Show popover content */
   async show() {

package/dist/collection/components/stzh-portal-mitwirken/stzh-portal-mitwirken.css

@@ -371,7 +371,6 @@ the .has-focus class is used by the focus target */
 
   --stzh-base-lead-color: var(--stzh-color-grey70);
   --stzh-base-border-color: var(--stzh-color-grey13);
-  --stzh-base-vector-effect: non-scaling-stroke;
   --stzh-base-transition-animation-speed: 0.3s;
 
   /* Links */

package/dist/collection/components/stzh-portal-mitwirken/stzh-portal-mitwirken.js

@@ -1,7 +1,6 @@
 import { Host, h } from "@stencil/core";
 /**
- * This component is only intended for the mitwirken.stadt-zuerich.ch portal.
- * It introduces global CSS for the page components of the Decidim tool.
+ *
  */
 export class StzhPortalMitwirken {
   componentDidLoad() {

package/dist/collection/components/stzh-portal-mitwirken/stzh-portal-mitwirken.stories.js

@@ -3,7 +3,7 @@ import readme from './readme.md';
 import { withDesign } from 'storybook-addon-designs';
 
 export default {
-  title: 'Components/Portale/PortalMitwirken',
+  title: 'Components/Skins/PortalMitwirken',
   component: 'stzh-portal-mitwirken',
   parameters: {
     layout: 'padded',

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

@@ -5,29 +5,6 @@ import { addMediaChangeListener, removeMediaChangeListener, media } from "../../
  */
 export class StzhProgressbar {
   constructor() {
-    /**
-     * Step data (JSON array with objects that have `label` attribute and optional `icon`, if icon instead of step number should be displayed):
-     *
-     * ```
-     * {
-     *   "label": "Step Label"
-     *   "icon": "clock"
-     * }
-     * ```
-     */
-    this.data = [];
-    /** Index of the item that be active */
-    this.index = 0;
-    /** Number of steps to show below small breakpoint */
-    this.steps = 5;
-    /** Number of steps to show above small breakpoint */
-    this.stepsSmall = 6;
-    /** Number of steps to show above medium breakpoint */
-    this.stepsMedium = 0;
-    /** Number of steps to show above large breakpoint */
-    this.stepsLarge = 0;
-    /** Number of steps to show above ultra breakpoint */
-    this.stepsUltra = 0;
     this.setCurrentSteps = () => {
       if (media("ultra").matches && this.stepsUltra) {
         this.currentSteps = this.stepsUltra;
@@ -46,6 +23,14 @@ export class StzhProgressbar {
       }
       this.element.style.setProperty("--steps", this.currentSteps.toString());
     };
+    this.data = [];
+    this.index = 0;
+    this.steps = 5;
+    this.stepsSmall = 6;
+    this.stepsMedium = 0;
+    this.stepsLarge = 0;
+    this.stepsUltra = 0;
+    this.currentSteps = undefined;
   }
   dataWatcher(newValue) {
     if (typeof newValue === "string") {

package/dist/collection/components/stzh-progressbar-item/stzh-progressbar-item.js

@@ -4,14 +4,6 @@ import { Host, h, Fragment } from "@stencil/core";
  */
 export class StzhProgressbarItem {
   constructor() {
-    this.first = false;
-    this.last = false;
-    this.passed = false;
-    this.current = false;
-    this.hide = false;
-    this.dotted = false;
-    this.step = 1;
-    this.icon = "";
     this.onClick = (event) => {
       this.stzhClick.emit({
         component: "stzh-progressbar-item",
@@ -24,6 +16,14 @@ export class StzhProgressbarItem {
         originalEvent: event
       });
     };
+    this.first = false;
+    this.last = false;
+    this.passed = false;
+    this.current = false;
+    this.hide = false;
+    this.dotted = false;
+    this.step = 1;
+    this.icon = "";
   }
   render() {
     const classes = {

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

@@ -11,24 +11,6 @@ let radioCounter = 0;
  */
 export class StzhRadio {
   constructor() {
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** The name of the input element */
-    this.name = "";
-    /** The value of the input element */
-    this.value = "";
-    /** 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;
-    /** Checked status */
-    this.checked = false;
-    /** Label */
-    this.label = "";
-    /** Id for element which describes the radio 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({
@@ -62,6 +44,19 @@ export class StzhRadio {
         originalEvent: event
       });
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = "";
+    this.value = "";
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.checked = false;
+    this.label = "";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.a11yDescribedby = "";
   }
   /** Focus input field */
   async setFocus() {