@oiz/stzh-components 2.4.0 → 2.5.0-alpha-carousel

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

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

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

@@ -0,0 +1,138 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Carousel',
+  component: 'stzh-carousel',
+  parameters: {
+    layout: 'fullscreen',
+    actions: {
+      handles: ['stzhSlideStart', 'stzhSlidePassed', 'stzhSlideEnd']
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('carousel'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Card = (args) => (
+  <stzh-card {...args}>
+    <stzh-ratio slot="image">
+      <img src="media/images/example.jpg" loading="lazy" alt="Example image" />
+    </stzh-ratio>
+    <div slot="content">Laboris laborum aute id laboris culpa esse aliquip nisi anim velit.</div>
+  </stzh-card>
+);
+
+const Template = (args) => (
+  <stzh-container>
+    <stzh-vspace curve="big"></stzh-vspace>
+    <stzh-carousel {...args}>
+      <stzh-ratio slot="actions">
+        <stzh-hspace justify="end" items="end" size="none">
+          <stzh-button
+            data-stzh-carousel-previous
+            variant="secondary"
+            size="small"
+            icon="angle-left"
+            label="Previous slide"
+            icon-only
+          ></stzh-button>
+          <stzh-button
+            data-stzh-carousel-next
+            variant="secondary"
+            size="small"
+            icon="angle-right"
+            label="Next slide"
+            icon-only
+          ></stzh-button>
+        </stzh-hspace>
+      </stzh-ratio>
+
+      <stzh-figure caption="Lorem ipsum">
+        <stzh-ratio>
+          <img src="media/images/example.jpg" loading="lazy" alt="Example image" />
+        </stzh-ratio>
+      </stzh-figure>
+      <stzh-figure caption="Lorem ipsum">
+        <stzh-ratio>
+          <img src="media/images/example2.jpg" loading="lazy" alt="Example image" />
+        </stzh-ratio>
+      </stzh-figure>
+      <stzh-figure caption="Lorem ipsum">
+        <stzh-ratio>
+          <img src="media/images/example3.png" loading="lazy" alt="Example image" />
+        </stzh-ratio>
+      </stzh-figure>
+      <stzh-figure caption="Lorem ipsum">
+        <stzh-ratio>
+          <img src="media/images/example4.png" loading="lazy" alt="Example image" />
+        </stzh-ratio>
+      </stzh-figure>
+    </stzh-carousel>
+    <stzh-vspace curve="big"></stzh-vspace>
+  </stzh-container>
+);
+
+const TemplateCards = (args) => (
+  <stzh-container>
+    <stzh-vspace curve="big"></stzh-vspace>
+    <stzh-carousel {...args}>
+      <stzh-hspace slot="actions" justify="end" items="center" size="medium">
+        <stzh-text curve="p2" data-stzh-carousel-navigation-text>7 Offers</stzh-text>
+        <div>
+          <stzh-button
+            data-stzh-carousel-previous
+            variant="secondary"
+            size="small"
+            icon="angle-left"
+            label="Previous slide"
+            icon-only
+          ></stzh-button>
+          <stzh-button
+            data-stzh-carousel-next
+            variant="secondary"
+            size="small"
+            icon="angle-right"
+            label="Next slide"
+            icon-only
+          ></stzh-button>
+        </div>
+      </stzh-hspace>
+
+      {Card({ heading: "Lorem ipsum", href: '/', 'hide-header-border': true, 'hide-elevation': true })}
+      {Card({ heading: "Lorem ipsum", href: '/', 'hide-header-border': true, 'hide-elevation': true })}
+      {Card({ heading: "Lorem ipsum", href: '/', 'hide-header-border': true, 'hide-elevation': true })}
+      {Card({ heading: "Lorem ipsum", href: '/', 'hide-header-border': true, 'hide-elevation': true })}
+      {Card({ heading: "Lorem ipsum", href: '/', 'hide-header-border': true, 'hide-elevation': true })}
+      {Card({ heading: "Lorem ipsum", href: '/', 'hide-header-border': true, 'hide-elevation': true })}
+      {Card({ heading: "Lorem ipsum", href: '/', 'hide-header-border': true, 'hide-elevation': true })}
+    </stzh-carousel>
+    <stzh-vspace curve="big"></stzh-vspace>
+  </stzh-container>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  'aria-label': 'Carousel name'
+};
+
+export const Cards = TemplateCards.bind({});
+Cards.args = {
+  'variant': 'cards',
+  'slides-small': '2',
+  'slides-medium': '3',
+  'slides-large': '4'
+};

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

@@ -138,7 +138,9 @@ export class StzhCheckboxgroup {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;

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

@@ -101,7 +101,7 @@
   --color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   --height: 2rem;
   --padding: 0 var(--stzh-space-medium);
-  --border: 0.0625rem solid var(--stzh-color-grey13);
+  --border-color: var(--stzh-color-grey13);
   --border-radius: 1rem;
   --remove-color: var(--stzh-base-lead-color);
   --remove-border-radius: 1.5rem;
@@ -110,7 +110,7 @@
   --icon-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   --counter-color: var(--stzh-color-primary60op);
   --hover-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
-  --hover-border: var(--border);
+  --hover-border-color: var(--border-color);
   --hover-background-color: var(--stzh-color-primary8);
   --hover-remove-color: var(--hover-color);
   --hover-remove-background-color: var(--hover-background-color);
@@ -140,18 +140,18 @@
   --icon-size: var(--stzh-icon-size-xsmall);
 }
 :host[variant=input] {
-  --border: 0.0625rem solid transparent;
+  --border-color: transparent;
   --background-color: var(--stzh-color-grey5);
-  --hover-border: 0.0625rem solid transparent;
+  --hover-border-color: transparent;
 }
 :host[variant=tag] {
   --color: var(--stzh-base-color);
   --icon-color: var(--stzh-base-color);
   --counter-color: var(--stzh-base-color);
-  --border: 0.0625rem solid transparent;
+  --border-color: transparent;
   --background-color: var(--stzh-color-black8);
   --hover-color: var(--stzh-base-color);
-  --hover-border: 0.0625rem solid transparent;
+  --hover-border-color: transparent;
   --hover-background-color: var(--stzh-color-black8);
   --hover-icon-color: var(--stzh-base-color);
   --hover-counter-color: var(--stzh-base-color);
@@ -177,13 +177,13 @@
 }
 :host[active]:not([active=false]) {
   --color: var(--stzh-color-white);
-  --border: 0.0625rem solid transparent;
+  --border-color: transparent;
   --remove-color: var(--stzh-color-white);
   --background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   --icon-color: var(--stzh-color-white);
   --counter-color: var(--stzh-color-white56);
   --hover-color: var(--stzh-color-white);
-  --hover-border: 0.0625rem solid transparent;
+  --hover-border-color: transparent;
   --hover-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   --hover-remove-color: var(--stzh-color-white);
   --hover-remove-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
@@ -193,13 +193,13 @@
 @media (forced-colors: active), (-ms-high-contrast: active) {
   :host[active]:not([active=false]) {
     --color: SelectedItem;
-    --border: 0.0625rem solid SelectedItem;
+    --border-color: SelectedItem;
     --remove-color: SelectedItem;
     --background-color: Canvas;
     --icon-color: SelectedItem;
     --counter-color: SelectedItem;
     --hover-color: Highlight;
-    --hover-border: 0.0625rem solid Highlight;
+    --hover-border-color: Highlight;
     --hover-background-color: Canvas;
     --hover-remove-color: Highlight;
     --hover-remove-background-color: Canvas;
@@ -209,20 +209,20 @@
 }
 :host[non-interactive]:not([non-interactive=false]) {
   --hover-color: var(--color);
-  --hover-border: var(--border);
+  --hover-border: var(--border-color);
   --hover-background-color: var(--background-color);
   --hover-icon-color: var(--icon-color);
   --hover-counter-color: var(--counter-color);
 }
 :host[disabled]:not([disabled=false]) {
   --color: var(--stzh-color-grey25);
-  --border: 0.0625rem solid var(--stzh-base-border-color);
+  --border-color: var(--stzh-base-border-color);
   --remove-color: var(--stzh-color-grey13);
   --background-color: var(--stzh-color-white);
   --icon-color: var(--stzh-color-grey25);
   --counter-color: var(--stzh-color-grey25);
   --hover-color: var(--stzh-color-grey25);
-  --hover-border: 0.0625rem solid var(--stzh-base-border-color);
+  --hover-border-color: var(--stzh-base-border-color);
   --hover-background-color: var(--stzh-color-white);
   --hover-remove-color: var(--stzh-color-grey13);
   --hover-remove-background-color: transparent;
@@ -266,7 +266,9 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  border: var(--border);
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: var(--border-color);
   background-color: var(--background-color);
   transition: all var(--stzh-base-transition-animation-speed);
   text-decoration: none;
@@ -325,7 +327,7 @@
 .stzh-chip__button:hover, .stzh-chip__remove:hover + .stzh-chip__button {
   color: var(--hover-color);
   background-color: var(--hover-background-color);
-  border: var(--hover-border);
+  border-color: var(--hover-border-color);
 }
 .stzh-chip__button:hover .stzh-chip__counter {
   color: var(--hover-counter-color);

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

@@ -66,7 +66,8 @@ export class StzhChip {
     return (h(Fragment, null, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-chip__icon", name: this.icon })
       :
-        h("slot", { name: "icon" })), h("stzh-clamp", { lines: 1, class: "stzh-chip__label" }, this.label ? this.label : h("slot", null), h("span", { class: "stzh-chip__vhidden" }, "\u00A0(", this.counter, ")")), this.counter &&
+        h("slot", { name: "icon" })), h("stzh-clamp", { lines: 1, class: "stzh-chip__label" }, this.label ? this.label : h("slot", null), this.counter &&
+      h("span", { class: "stzh-chip__vhidden" }, "\u00A0(", this.counter, ")")), this.counter &&
       h("div", { class: "stzh-chip__counter", "aria-hidden": "true" }, this.counter)));
   }
   render() {

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

@@ -186,7 +186,7 @@
   margin: calc(var(--stzh-space-small) / 2) calc(var(--stzh-space-xsmall) / 2);
 }
 .stzh-chip-select__chip.is-focused, .stzh-chip-select__chip.is-focused[active]:not([active=false]) {
-  --border: 0.0625rem solid var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+  --border-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
 .stzh-chip-select__chip.is-focused[active]:not([active=false]) {
   --background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));

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

@@ -97,8 +97,14 @@
   box-sizing: border-box;
 }
 
-:host {
-  --lines: 1;
+stzh-clamp {
+  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;
+  --current-lines: var(--lines, 0);
   width: 100%;
   color: inherit;
   font-family: inherit;
@@ -107,178 +113,39 @@
   font-size: inherit;
   line-height: inherit;
 }
-
-:host([lines="1"]) {
-  --lines: 1;
-}
-
-:host([lines="2"]) {
-  --lines: 2;
-}
-
-:host([lines="3"]) {
-  --lines: 3;
-}
-
-:host([lines="4"]) {
-  --lines: 4;
-}
-
-:host([lines="5"]) {
-  --lines: 5;
-}
-
-@media screen and (min-width: 600px) {
-  :host([lines-small="1"]) {
-    --lines: 1;
-  }
-}
-
-@media screen and (min-width: 600px) {
-  :host([lines-small="2"]) {
-    --lines: 2;
-  }
-}
-
-@media screen and (min-width: 600px) {
-  :host([lines-small="3"]) {
-    --lines: 3;
-  }
+stzh-clamp[hidden] {
+  display: none;
 }
-
-@media screen and (min-width: 600px) {
-  :host([lines-small="4"]) {
-    --lines: 4;
-  }
+stzh-clamp *,
+stzh-clamp *::before,
+stzh-clamp *::after {
+  box-sizing: border-box;
 }
-
 @media screen and (min-width: 600px) {
-  :host([lines-small="5"]) {
-    --lines: 5;
+  stzh-clamp {
+    --current-lines: var(--lines-small, var(--lines, 0));
   }
 }
-
-@media screen and (min-width: 800px) {
-  :host([lines-smallheader="1"]) {
-    --lines: 1;
-  }
-}
-
-@media screen and (min-width: 800px) {
-  :host([lines-smallheader="2"]) {
-    --lines: 2;
-  }
-}
-
-@media screen and (min-width: 800px) {
-  :host([lines-smallheader="3"]) {
-    --lines: 3;
-  }
-}
-
-@media screen and (min-width: 800px) {
-  :host([lines-smallheader="4"]) {
-    --lines: 4;
-  }
-}
-
-@media screen and (min-width: 800px) {
-  :host([lines-smallheader="5"]) {
-    --lines: 5;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  :host([lines-medium="1"]) {
-    --lines: 1;
-  }
-}
-
 @media screen and (min-width: 1024px) {
-  :host([lines-medium="2"]) {
-    --lines: 2;
+  stzh-clamp {
+    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));
   }
 }
-
-@media screen and (min-width: 1024px) {
-  :host([lines-medium="3"]) {
-    --lines: 3;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  :host([lines-medium="4"]) {
-    --lines: 4;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  :host([lines-medium="5"]) {
-    --lines: 5;
-  }
-}
-
 @media screen and (min-width: 1260px) {
-  :host([lines-large="1"]) {
-    --lines: 1;
+  stzh-clamp {
+    --current-lines: var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))));
   }
 }
-
-@media screen and (min-width: 1260px) {
-  :host([lines-large="2"]) {
-    --lines: 2;
-  }
-}
-
-@media screen and (min-width: 1260px) {
-  :host([lines-large="3"]) {
-    --lines: 3;
-  }
-}
-
-@media screen and (min-width: 1260px) {
-  :host([lines-large="4"]) {
-    --lines: 4;
-  }
-}
-
-@media screen and (min-width: 1260px) {
-  :host([lines-large="5"]) {
-    --lines: 5;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  :host([lines-ultra="1"]) {
-    --lines: 1;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  :host([lines-ultra="2"]) {
-    --lines: 2;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  :host([lines-ultra="3"]) {
-    --lines: 3;
-  }
-}
-
 @media screen and (min-width: 1440px) {
-  :host([lines-ultra="4"]) {
-    --lines: 4;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  :host([lines-ultra="5"]) {
-    --lines: 5;
+  stzh-clamp {
+    --current-lines: var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))));
   }
 }
 
 .stzh-clamp {
+  position: relative;
+}
+.stzh-clamp__text {
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
@@ -286,7 +153,26 @@
           hyphens: auto;
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--lines);
-  line-clamp: var(--lines);
   overflow: hidden;
+}
+.stzh-clamp__text > *:first-child {
+  margin-top: 0 !important;
+}
+.stzh-clamp__text > *:last-child {
+  margin-bottom: 0 !important;
+}
+.stzh-clamp__text.is-clone {
+  position: absolute;
+  visibility: hidden;
+  opacity: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.stzh-clamp__trigger {
+  margin-top: var(--stzh-space-xxsmall);
+}
+.stzh-clamp--is-not-expanded .stzh-clamp__text, .stzh-clamp__text.is-clone {
+  -webkit-line-clamp: var(--current-lines);
+  line-clamp: var(--current-lines);
 }