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

package/dist/collection/components/stzh-servicecard-list/stzh-servicecard-list.stories.js

@@ -1,116 +0,0 @@
-import { h } from '../../utils/h';
-import readme from './readme.md';
-import { withDesign } from 'storybook-addon-designs';
-import { getFigmaLink } from '../../../figma';
-
-export default {
-  title: 'Components/ServicecardList',
-  component: 'stzh-servicecard-list',
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component: readme
-      }
-    },
-    design: {
-      type: 'figma',
-      url: getFigmaLink('servicecard-list'),
-      allowFullscreen: true
-    }
-  },
-  decorators: [
-    withDesign
-  ]
-};
-
-const actions = `[
-  {
-    "id": "message",
-    "onlyCollapseText": true,
-    "icon": "mail",
-    "badge": "3",
-    "label": "Messages"
-  }
-]`;
-
-const actions2 = `[
-  {
-    "id": "add",
-    "icon": "plus",
-    "label": "Add address"
-  },
-  {
-    "id": "edit",
-    "icon": "edit",
-    "label": "Edit"
-  },
-  {
-    "id": "delete",
-    "icon": "delete",
-    "label": "Remove"
-  },
-  {
-    "id": "message",
-    "onlyCollapseText": true,
-    "icon": "mail",
-    "badge": "3",
-    "label": "Messages"
-  }
-]`;
-
-const Template = (args) => (
-  <stzh-servicecard-list {...args}>
-    <stzh-text slot="description">
-      Services are shown here, which you marked with <stzh-icon name="star-filled"></stzh-icon>
-    </stzh-text>
-    <stzh-servicecard collapsible starrable heading="Lorem ipsum 1" subtitle="Dolor si 1" actions={actions}>
-      <div slot="left">Content Left</div>
-      <div slot="right">Content Right</div>
-    </stzh-servicecard>
-    <stzh-servicecard collapsible heading="Lorem ipsum 2" subtitle='["Dolor si 2", "Dolor si 2.1", "Dolor si 2.2"]' subtitle-interactive actions={actions2}>
-      <div slot="left">Content Left</div>
-      <table slot="middle">
-        <tr>
-          <th>Cell Label</th>
-          <td>Cell Value</td>
-        </tr>
-        <tr>
-          <th>Cell Label</th>
-          <td>Cell Value</td>
-        </tr>
-        <tr>
-          <th>Cell Label</th>
-          <td>Cell Value</td>
-        </tr>
-      </table>
-      <div slot="right">Content Right</div>
-    </stzh-servicecard>
-    <stzh-servicecard collapsible starrable heading="Lorem ipsum 3" subtitle="Dolor si 3">
-      <div slot="left">Content Left</div>
-      <stzh-button label="Button Right 1" slot="right" fullwidth></stzh-button>
-      <stzh-popover slot="right">
-        <stzh-button label="Button Right 2" fullwidth icon="angle-up" icon-position="right"></stzh-button>
-        <stzh-menu slot="content">
-          <stzh-menu-item label="Test"></stzh-menu-item>
-        </stzh-menu>
-      </stzh-popover>
-    </stzh-servicecard>
-    <stzh-servicecard collapsible starrable heading="Lorem ipsum 4">
-      <div slot="left">Content Left</div>
-      <stzh-section slot="middle">
-        Content Middle Section 1
-      </stzh-section>
-      <stzh-section slot="middle">
-        Content Middle Section 2 with Input:
-        <stzh-input></stzh-input>
-      </stzh-section>
-      <stzh-button label="Button Right" slot="right" fullwidth></stzh-button>
-    </stzh-servicecard>
-  </stzh-servicecard-list>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  'show-toggle-Link': true
-};

package/dist/components/stzh-servicecard-list.js

@@ -1,117 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as cloneElement } from './utils.js';
-import { f as fetchTranslations } from './translation-utils.js';
-import { d as defineCustomElement$5 } from './stzh-badge2.js';
-import { d as defineCustomElement$4 } from './stzh-icon2.js';
-import { d as defineCustomElement$3 } from './stzh-link2.js';
-import { d as defineCustomElement$2 } from './stzh-sortable2.js';
-
-const stzhServicecardListCss = ".sc-stzh-servicecard-list-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-servicecard-list-h{display:none}.sc-stzh-servicecard-list-h *.sc-stzh-servicecard-list,.sc-stzh-servicecard-list-h *.sc-stzh-servicecard-list::before,.sc-stzh-servicecard-list-h *.sc-stzh-servicecard-list::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-xlarge)}}.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>[slot=description] stzh-icon{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>stzh-text[slot=description]{--color:inherit}.stzh-servicecard-list__header.sc-stzh-servicecard-list{margin-bottom:var(--stzh-space-medium);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}@media screen and (min-width: 1024px){.stzh-servicecard-list__header.sc-stzh-servicecard-list{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-servicecard-list__header.sc-stzh-servicecard-list{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){.stzh-servicecard-list__header.sc-stzh-servicecard-list{-ms-flex-direction:row;flex-direction:row}}.stzh-servicecard-list__description.sc-stzh-servicecard-list{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--stzh-base-lead-color)}@media screen and (min-width: 1024px){.stzh-servicecard-list__description.sc-stzh-servicecard-list{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-servicecard-list__description.sc-stzh-servicecard-list:not(:empty){margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 800px){.stzh-servicecard-list__description.sc-stzh-servicecard-list:not(:empty){margin-bottom:0}}.stzh-servicecard-list__switch.sc-stzh-servicecard-list{--color:var(--stzh-base-lead-color);-ms-flex-item-align:end;align-self:end}";
-
-const StzhServicecardList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    /** Whether collapse/expand toggle link */
-    this.showToggleLink = false;
-    /** Whether sorting should be disabled */
-    this.sortableDisabled = false;
-    /** HTML attribute that is used by the `toArray()` of sortable method */
-    this.sortableDataIdAttribute = "data-id";
-    /** Algorithm how the ghost element will be cloned */
-    this.sortableGhostClone = (dragElement) => {
-      const [clonedElement, clonedStzhElement, originalStzhElement] = cloneElement(dragElement);
-      if (clonedStzhElement
-        && originalStzhElement
-        && clonedStzhElement.tagName.toLowerCase() === 'stzh-servicecard') {
-        const clonedStzhElementCard = clonedStzhElement;
-        const originalStzhElementCard = originalStzhElement;
-        // copy every property that is not reflected to its attribute
-        clonedStzhElementCard.heading = originalStzhElementCard.heading;
-        clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;
-        clonedStzhElementCard.actions = originalStzhElementCard.actions;
-        clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;
-      }
-      return clonedElement;
-    };
-    this.allCollapsed = false;
-    this.collapseClick = () => {
-      const cards = Array.from(this.element.querySelectorAll("stzh-servicecard"));
-      cards.forEach(card => {
-        if (card.collapsible) {
-          card.collapsed = !this.allCollapsed;
-        }
-      });
-      this.allCollapsed = !this.allCollapsed;
-    };
-    this.updateCollapsedState = () => {
-      const cards = Array.from(this.element.querySelectorAll("stzh-servicecard"));
-      this.allCollapsed = !cards.some(card => !card.collapsed);
-    };
-  }
-  collapseListener() {
-    this.updateCollapsedState();
-  }
-  async componentWillLoad() {
-    if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, "servicecard-list");
-    }
-  }
-  componentDidLoad() {
-    this.updateCollapsedState();
-  }
-  render() {
-    const classes = {
-      "stzh-servicecard-list": true
-    };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-servicecard-list__header" }, h("div", { class: "stzh-servicecard-list__description" }, h("slot", { name: "description" })), this.showToggleLink &&
-      h("stzh-link", { class: "stzh-servicecard-list__switch", icon: this.allCollapsed ? "list-expanded" : "list-shrinked", label: this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll, onClick: this.collapseClick })), h("stzh-sortable", { disabled: this.sortableDisabled, dataIdAttribute: this.sortableDataIdAttribute, ghostClone: this.sortableGhostClone }, h("div", { class: "stzh-servicecard-list__cards", role: "list" }, h("slot", null))))));
-  }
-  get element() { return this; }
-  static get style() { return stzhServicecardListCss; }
-}, [6, "stzh-servicecard-list", {
-    "localization": [16],
-    "showToggleLink": [516, "show-toggle-link"],
-    "sortableDisabled": [4, "sortable-disabled"],
-    "sortableDataIdAttribute": [1, "sortable-data-id-attribute"],
-    "sortableGhostClone": [16],
-    "allCollapsed": [32]
-  }, [[0, "stzhCollapse", "collapseListener"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-servicecard-list", "stzh-badge", "stzh-icon", "stzh-link", "stzh-sortable"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-servicecard-list":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhServicecardList$1);
-      }
-      break;
-    case "stzh-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "stzh-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "stzh-link":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "stzh-sortable":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const StzhServicecardList = StzhServicecardList$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { StzhServicecardList, defineCustomElement };

package/dist/components/stzh-servicecard.js

@@ -1,305 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host, Fragment } from '@stencil/core/internal/client';
-import { h as hasSlot } from './utils.js';
-import { m as media } from './media-utils.js';
-import { f as fetchTranslations } from './translation-utils.js';
-import { d as defineCustomElement$8 } from './stzh-badge2.js';
-import { d as defineCustomElement$7 } from './stzh-button2.js';
-import { d as defineCustomElement$6 } from './stzh-icon2.js';
-import { d as defineCustomElement$5 } from './stzh-menu2.js';
-import { d as defineCustomElement$4 } from './stzh-menu-item2.js';
-import { d as defineCustomElement$3 } from './stzh-popover2.js';
-import { d as defineCustomElement$2 } from './stzh-tooltip2.js';
-
-const stzhServicecardCss = ".sc-stzh-servicecard-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-servicecard-h{display:none}.sc-stzh-servicecard-h *.sc-stzh-servicecard,.sc-stzh-servicecard-h *.sc-stzh-servicecard::before,.sc-stzh-servicecard-h *.sc-stzh-servicecard::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-servicecard-h{--box-shadow:var(--stzh-box-shadow-popover);--border:0.0625rem solid var(--stzh-base-border-color);--border-radius:0.1875rem;--dnd-visibility:hidden;--dnd-opacity:0;position:relative;border-radius:var(--border-radius)}.is-ghost.sc-stzh-servicecard-h::after,.is-ghost .sc-stzh-servicecard-h::after{border-radius:var(--border-radius)}.is-selected.sc-stzh-servicecard-h,.is-chosen.sc-stzh-servicecard-h,.is-selected .sc-stzh-servicecard-h,.is-chosen .sc-stzh-servicecard-h{--box-shadow:var(--stzh-box-shadow-overlay)}.is-ghost.sc-stzh-servicecard-h,.is-ghost .sc-stzh-servicecard-h{--box-shadow:none;--border:0.0625rem solid transparent;overflow:hidden}.is-drag.sc-stzh-servicecard-h,.is-chosen.sc-stzh-servicecard-h,.is-ghost.sc-stzh-servicecard-h,.is-selected.sc-stzh-servicecard-h,.is-drag .sc-stzh-servicecard-h,.is-chosen .sc-stzh-servicecard-h,.is-ghost .sc-stzh-servicecard-h,.is-selected .sc-stzh-servicecard-h{--dnd-visibility:visible;--dnd-opacity:1}.sc-stzh-servicecard-h .sc-stzh-servicecard-s>*{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.sc-stzh-servicecard-h .sc-stzh-servicecard-s>table{border:0;border-spacing:0}.sc-stzh-servicecard-h .sc-stzh-servicecard-s>table th{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.sc-stzh-servicecard-h .sc-stzh-servicecard-s>table td,.sc-stzh-servicecard-h .sc-stzh-servicecard-s>table th{padding:0}.sc-stzh-servicecard-h .sc-stzh-servicecard-s>table td{color:var(--stzh-color-black);padding-left:var(--stzh-space-xsmall)}.sc-stzh-servicecard-h .sc-stzh-servicecard-s>*:not(:first-child){margin-top:var(--stzh-space-medium)}.stzh-servicecard.sc-stzh-servicecard{background-color:var(--stzh-color-white);border-radius:var(--border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);border:var(--border);-webkit-transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed), -webkit-box-shadow var(--stzh-base-transition-animation-speed)}@media screen and (max-width: 1023px){.stzh-servicecard.sc-stzh-servicecard .show-medium.sc-stzh-servicecard{display:none}}@media screen and (min-width: 1024px){.stzh-servicecard.sc-stzh-servicecard .hide-medium.sc-stzh-servicecard{display:none}}.stzh-servicecard__dnd.sc-stzh-servicecard{--size:var(--stzh-icon-size-xsmall);position:absolute;left:0.1875rem;top:1.4375rem;display:-ms-flexbox;display:flex;visibility:var(--dnd-visibility);opacity:var(--dnd-opacity);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);display:none}@media screen and (min-width: 1024px){.stzh-servicecard__dnd.sc-stzh-servicecard{display:block}}@media screen and (min-width: 1260px){.stzh-servicecard__dnd.sc-stzh-servicecard{left:0.25rem;top:1.6875rem}}.stzh-servicecard__header.sc-stzh-servicecard{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start;border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 600px){.stzh-servicecard__header.sc-stzh-servicecard{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 1024px){.stzh-servicecard__header.sc-stzh-servicecard{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-servicecard__header.sc-stzh-servicecard{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-servicecard__header.sc-stzh-servicecard{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1024px){.stzh-servicecard__header.sc-stzh-servicecard{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-servicecard__header.sc-stzh-servicecard{padding-bottom:var(--stzh-space-large)}}.stzh-servicecard__header-left.sc-stzh-servicecard,.stzh-servicecard__header-right.sc-stzh-servicecard{display:-ms-flexbox;display:flex}.stzh-servicecard__header-right.sc-stzh-servicecard{padding-left:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-servicecard__header-right.sc-stzh-servicecard{padding-left:var(--stzh-space-small)}}@media screen and (min-width: 1024px){.stzh-servicecard__header-right.sc-stzh-servicecard{padding-left:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-servicecard__header-right.sc-stzh-servicecard{padding-left:var(--stzh-space-large)}}.stzh-servicecard__header.sc-stzh-servicecard,.stzh-servicecard__columns.sc-stzh-servicecard{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-servicecard__header.sc-stzh-servicecard,.stzh-servicecard__columns.sc-stzh-servicecard{padding-left:var(--stzh-space-large);padding-right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-servicecard__header.sc-stzh-servicecard,.stzh-servicecard__columns.sc-stzh-servicecard{padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-xlarge)}}.stzh-servicecard__left.sc-stzh-servicecard{-ms-flex-item-align:center;align-self:center}.stzh-servicecard__title-area.sc-stzh-servicecard{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden}.stzh-servicecard__title.sc-stzh-servicecard,.stzh-servicecard__subtitle.sc-stzh-servicecard{margin:0}.stzh-servicecard__title.sc-stzh-servicecard{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing);color:var(--stzh-base-lead-color)}@media screen and (min-width: 600px){.stzh-servicecard__title.sc-stzh-servicecard{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-servicecard__title.sc-stzh-servicecard{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-regular-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing)}}.stzh-servicecard__subtitle.sc-stzh-servicecard{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;text-decoration:none;margin-left:-0.5625em}@media screen and (min-width: 1024px){.stzh-servicecard__subtitle.sc-stzh-servicecard{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-servicecard__subtitle-text.sc-stzh-servicecard{position:relative;display:-ms-inline-flexbox;display:inline-flex;padding-left:0.5625em}.stzh-servicecard__subtitle-text.sc-stzh-servicecard::after{content:\",\";position:absolute;left:0}.stzh-servicecard__columns.sc-stzh-servicecard{margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 1024px){.stzh-servicecard__columns.sc-stzh-servicecard{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-servicecard__columns.sc-stzh-servicecard{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.stzh-servicecard__columns.sc-stzh-servicecard{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-servicecard__columns.sc-stzh-servicecard{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){.stzh-servicecard__columns.sc-stzh-servicecard{display:grid;grid-template-columns:50% 50%;grid-template-rows:auto auto;margin-left:calc(var(--stzh-space-medium) / -1);margin-right:calc(var(--stzh-space-medium) / -1)}}@media screen and (min-width: 1024px){.stzh-servicecard__columns.sc-stzh-servicecard{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto;margin-left:calc(var(--stzh-space-large) / -1);margin-right:calc(var(--stzh-space-large) / -1)}}@media screen and (min-width: 1260px){.stzh-servicecard__columns.sc-stzh-servicecard{margin-left:calc(var(--stzh-space-xlarge) / -1);margin-right:calc(var(--stzh-space-xlarge) / -1)}}@media screen and (min-width: 800px){.stzh-servicecard__column.sc-stzh-servicecard{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 1024px){.stzh-servicecard__column.sc-stzh-servicecard{padding-left:var(--stzh-space-large);padding-right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-servicecard__column.sc-stzh-servicecard{padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){.stzh-servicecard__column.is-left.sc-stzh-servicecard{grid-column:1/span 1;grid-row:1/span 2}}@media screen and (min-width: 1024px){.stzh-servicecard__column.is-left.sc-stzh-servicecard{grid-column:1/span 2;grid-row:1/span 1}}@media screen and (min-width: 800px){.stzh-servicecard__column.is-middle.sc-stzh-servicecard{grid-column:2/span 1;grid-row:1/span 1}}@media screen and (min-width: 800px){.stzh-servicecard__column.is-right.sc-stzh-servicecard{align-self:end;grid-column:2/span 1;grid-row:2/span 1}}@media screen and (min-width: 1024px){.stzh-servicecard__column.is-right.sc-stzh-servicecard{grid-column:3/span 1;grid-row:1/span 1}}.stzh-servicecard__column.sc-stzh-servicecard:not(:empty):not(:first-child):not(.has-no-spacing){margin-top:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-servicecard__column.sc-stzh-servicecard:not(:empty):not(:first-child):not(.has-no-spacing){margin-top:0}}@media screen and (min-width: 800px){.stzh-servicecard__column.is-middle.sc-stzh-servicecard:empty+.stzh-servicecard__column.is-right.sc-stzh-servicecard{margin-top:0}}.stzh-servicecard__column.is-left.sc-stzh-servicecard:empty+.stzh-servicecard__column.is-middle.sc-stzh-servicecard:not(:empty),.stzh-servicecard__column.is-left.sc-stzh-servicecard:empty+.stzh-servicecard__column.is-middle.sc-stzh-servicecard:empty+.stzh-servicecard__column.is-right.sc-stzh-servicecard:not(:empty){margin-top:0}.stzh-servicecard__card-actions.sc-stzh-servicecard{display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}@media screen and (max-width: 1023px){.stzh-servicecard__card-action.sc-stzh-servicecard{--icon-text-margin:0;--badge-icon-text-margin:0}}.stzh-servicecard__card-action[variant=tertiary].sc-stzh-servicecard{--color:var(--stzh-color-grey70)}.stzh-servicecard__card-action.is-button.sc-stzh-servicecard{--icon-size:var(--stzh-icon-size-small)}.stzh-servicecard__card-action.is-placeholder.sc-stzh-servicecard{width:var(--stzh-space-xxlarge);height:var(--stzh-space-xxlarge)}.stzh-servicecard__card-action-popover.sc-stzh-servicecard{--width:auto}@media screen and (min-width: 800px){.stzh-servicecard--has-middle.sc-stzh-servicecard .stzh-servicecard__column.is-left.sc-stzh-servicecard{grid-column:1/span 1;grid-row:1/span 2}}@media screen and (min-width: 1024px){.stzh-servicecard--has-middle.sc-stzh-servicecard .stzh-servicecard__column.is-left.sc-stzh-servicecard{grid-column:1/span 1;grid-row:1/span 1}}@media screen and (min-width: 800px){.stzh-servicecard--middle-to-right.sc-stzh-servicecard .stzh-servicecard__column.is-middle.sc-stzh-servicecard{margin-top:0}}@media screen and (min-width: 800px){.stzh-servicecard--middle-to-left.sc-stzh-servicecard .stzh-servicecard__column.is-left.sc-stzh-servicecard{grid-column:1/span 1;grid-row:1/span 1}}@media screen and (min-width: 800px){.stzh-servicecard--middle-to-left.sc-stzh-servicecard .stzh-servicecard__column.is-right.sc-stzh-servicecard{grid-column:2/span 1;grid-row:1/span 2}}@media screen and (min-width: 1024px){.stzh-servicecard--middle-to-left.sc-stzh-servicecard .stzh-servicecard__column.is-right.sc-stzh-servicecard{grid-column:3/span 1;grid-row:1/span 1}}@media screen and (min-width: 800px){.stzh-servicecard--middle-to-left.sc-stzh-servicecard .stzh-servicecard__column.is-middle.sc-stzh-servicecard{grid-column:1/span 1;grid-row:2/span 1}}@media screen and (min-width: 1024px){.stzh-servicecard--middle-to-left.sc-stzh-servicecard .stzh-servicecard__column.is-middle.sc-stzh-servicecard{grid-column:2/span 1;grid-row:1/span 1}}@media screen and (min-width: 800px){.stzh-servicecard--middle-to-left.sc-stzh-servicecard .stzh-servicecard__column.is-right.sc-stzh-servicecard{margin-top:0}}.stzh-servicecard--has-subtitle-interactive.sc-stzh-servicecard .stzh-servicecard__subtitle.sc-stzh-servicecard{cursor:pointer;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-servicecard--has-subtitle-interactive.sc-stzh-servicecard .stzh-servicecard__subtitle.sc-stzh-servicecard:hover,.stzh-servicecard--has-subtitle-interactive.sc-stzh-servicecard .stzh-servicecard__subtitle.sc-stzh-servicecard:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-servicecard--type-alert.sc-stzh-servicecard .stzh-servicecard__subtitle.sc-stzh-servicecard{color:var(--stzh-color-error)}.stzh-servicecard--type-alert.sc-stzh-servicecard .stzh-servicecard__subtitle.sc-stzh-servicecard:hover,.stzh-servicecard--type-alert.sc-stzh-servicecard .stzh-servicecard__subtitle.sc-stzh-servicecard:focus{color:var(--stzh-color-error)}.stzh-servicecard--is-collapsed.sc-stzh-servicecard .hide-when-collapsed.sc-stzh-servicecard,.stzh-servicecard--has-collapsed-header.sc-stzh-servicecard .stzh-servicecard__header.sc-stzh-servicecard .hide-when-collapsed.sc-stzh-servicecard{display:none}.stzh-servicecard--is-collapsed.sc-stzh-servicecard .show-when-collapsed.sc-stzh-servicecard,.stzh-servicecard--has-collapsed-header.sc-stzh-servicecard .stzh-servicecard__header.sc-stzh-servicecard .show-when-collapsed.sc-stzh-servicecard{display:block}.stzh-servicecard--is-collapsed.sc-stzh-servicecard .stzh-servicecard__header.sc-stzh-servicecard{border-bottom:none}.stzh-servicecard--is-collapsed.sc-stzh-servicecard .stzh-servicecard__card-action.sc-stzh-servicecard,.stzh-servicecard--has-collapsed-header.sc-stzh-servicecard .stzh-servicecard__card-action.sc-stzh-servicecard{--icon-text-margin:0;--badge-icon-text-margin:0}.stzh-servicecard--is-starred.sc-stzh-servicecard .stzh-servicecard__card-action.is-star.sc-stzh-servicecard{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-servicecard--is-starred.sc-stzh-servicecard .stzh-servicecard__card-action.is-star.sc-stzh-servicecard:hover,.stzh-servicecard--is-starred.sc-stzh-servicecard .stzh-servicecard__card-action.is-star.sc-stzh-servicecard:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";
-
-const StzhServicecard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.stzhCollapse = createEvent(this, "stzhCollapse", 7);
-    this.stzhSubtitleClick = createEvent(this, "stzhSubtitleClick", 7);
-    this.stzhStarClick = createEvent(this, "stzhStarClick", 7);
-    this.stzhActionClick = createEvent(this, "stzhActionClick", 7);
-    /** Whether card is collapsed or not */
-    this.collapsed = false;
-    /** Whether card was starred */
-    this.starred = false;
-    /** Whether card star is displayed */
-    this.starrable = false;
-    /** Heading */
-    this.heading = "";
-    /** Subtitle */
-    this.subtitle = "";
-    this._subtitles = [];
-    /** Card actions */
-    this.actions = [];
-    /** Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click */
-    this.subtitleInteractive = false;
-    /** Type */
-    this.type = "default";
-    /** Middle column position variant (positioning behaviour on tablet) */
-    this.middleVariant = "to-right";
-    /** Set middle column vertical spacing */
-    this.middleVerticalSpacing = "default";
-    /** Set right column vertical spacing */
-    this.rightVerticalSpacing = "default";
-    /** Whether sorting should be disabled */
-    this.sortableDisabled = false;
-    /** Whether card is collapsible */
-    this.collapsible = false;
-    /** Whether movement menu items should be shown */
-    this.hideMovementActions = false;
-    this.nodeChange = (entries) => {
-      let changeInSlot = false;
-      entries.forEach((entry) => {
-        if (entry.target.closest('[slot]') || entry.target.hasAttribute('slot')) {
-          changeInSlot = true;
-        }
-      });
-      if (changeInSlot) {
-        forceUpdate(this.element);
-      }
-    };
-    this.update = () => {
-      if (!this.mainElement) {
-        return;
-      }
-      this.mainElement.classList.remove("stzh-servicecard--has-collapsed-header");
-      if (media('medium').matches) {
-        const headerWidth = this.headerElement.clientWidth;
-        const leftWidth = this.headerLeftElement.clientWidth;
-        const rightWidth = this.headerRightElement.clientWidth;
-        if (headerWidth - leftWidth <= rightWidth) {
-          this.mainElement.classList.add("stzh-servicecard--has-collapsed-header");
-        }
-      }
-    };
-    this.headerClick = (event) => {
-      if (!this.collapsible) {
-        return;
-      }
-      const filterTags = ["stzh-popover", "stzh-tooltip", "button", "a", "input", "select", "textarea", "iframe", "details", "label", "area"];
-      const composedPathTags = event.composedPath().map(element => { var _a; return (_a = element.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase(); });
-      const found = composedPathTags.some(r => filterTags.includes(r));
-      if (!found) {
-        this.collapsed = !this.collapsed;
-        this.stzhCollapse.emit({
-          component: "stzh-servicecard",
-          collapsed: this.collapsed
-        });
-      }
-    };
-    this.subtitleClick = () => {
-      if (this.subtitleInteractive) {
-        this.stzhSubtitleClick.emit({
-          component: "stzh-servicecard"
-        });
-      }
-    };
-    this.starToggleClick = () => {
-      this.stzhStarClick.emit({
-        component: "stzh-servicecard",
-        starred: this.starred
-      });
-    };
-    this.actionClick = (action) => {
-      this.stzhActionClick.emit({
-        component: "stzh-servicecard",
-        action
-      });
-    };
-    this.arrowUpClick = () => {
-      const sortable = this.element.closest("stzh-sortable");
-      if (sortable) {
-        const element = this.findSortableChildElement();
-        sortable.moveItem(element, "up");
-      }
-    };
-    this.arrowDownClick = () => {
-      const sortable = this.element.closest("stzh-sortable");
-      if (sortable) {
-        const element = this.findSortableChildElement();
-        sortable.moveItem(element, "down");
-      }
-    };
-  }
-  handleResize() {
-    if (this.debounceResize) {
-      window.cancelAnimationFrame(this.debounceResize);
-    }
-    this.debounceResize = requestAnimationFrame(this.update);
-  }
-  subtitleWatcher(newValue) {
-    if (typeof newValue === "string") {
-      try {
-        this._subtitles = JSON.parse(newValue);
-      }
-      catch (err) {
-        this._subtitles = [newValue];
-      }
-    }
-    else {
-      this._subtitles = newValue;
-    }
-  }
-  actionsWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._actions = JSON.parse(newValue);
-    }
-    else {
-      this._actions = newValue;
-    }
-  }
-  findSortableChildElement() {
-    const sortable = this.element.closest("stzh-sortable");
-    if (sortable) {
-      let element = this.element;
-      let sortableContainer = null;
-      if (typeof sortable.container === "function") {
-        sortableContainer = sortable.container();
-      }
-      else {
-        sortableContainer = sortable.container;
-      }
-      while (element.parentElement !== sortableContainer) {
-        element = element.parentElement;
-      }
-      return element;
-    }
-  }
-  async componentWillLoad() {
-    this.subtitleWatcher(this.subtitle);
-    this.actionsWatcher(this.actions);
-    if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, "servicecard");
-    }
-  }
-  connectedCallback() {
-    this.observer = new MutationObserver(this.nodeChange);
-    this.observer.observe(this.element, {
-      childList: true,
-      subtree: true
-    });
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-  }
-  render() {
-    const leftUsed = hasSlot(this.element, "left");
-    const middleUsed = hasSlot(this.element, "middle");
-    const rightUsed = hasSlot(this.element, "right");
-    const classes = {
-      "stzh-servicecard": true,
-      "stzh-servicecard--has-left": leftUsed,
-      "stzh-servicecard--has-middle": middleUsed,
-      "stzh-servicecard--has-right": rightUsed,
-      "stzh-servicecard--has-subtitle": !!this.subtitle,
-      "stzh-servicecard--has-subtitle-interactive": !!this.subtitle && this.subtitleInteractive,
-      "stzh-servicecard--is-collapsed": this.collapsed,
-      "stzh-servicecard--is-starred": this.starred,
-      [`stzh-servicecard--middle-${this.middleVariant}`]: !!this.middleVariant && middleUsed,
-      [`stzh-servicecard--type-${this.type}`]: !!this.type,
-    };
-    const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;
-    return (h(Host, { role: "listitem", "aria-label": this.heading }, h("article", { ref: (el) => (this.mainElement = el), class: classes }, h("stzh-icon", { class: "stzh-servicecard__dnd", name: "drag" }), h("header", { ref: (el) => (this.headerElement = el), class: "stzh-servicecard__header", onClick: this.headerClick }, h("div", { ref: (el) => (this.headerLeftElement = el), class: "stzh-servicecard__header-left" }, h("div", { class: "stzh-servicecard__title-area", "data-dashboardmknlist": "title" }, h("h3", { class: "stzh-servicecard__title", "data-dashboardmknlist": "dnd" }, this.heading), this._subtitles.length > 0 &&
-      h(Subtitle, { class: "stzh-servicecard__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-servicecard__subtitle-text" }, subtitle)))))), h("div", { ref: (el) => (this.headerRightElement = el), class: "stzh-servicecard__header-right" }, h("div", { class: "stzh-servicecard__card-actions" }, this._actions.map(action => (h("stzh-button", { class: {
-        "stzh-servicecard__card-action": true,
-        "is-button": true,
-        "show-medium": !action.onlyCollapseText,
-        "hide-when-collapsed": !action.onlyCollapseText,
-        "hide-text-when-collapsed": action.onlyCollapseText
-      }, icon: action.icon, badge: action.badge, variant: "tertiary", size: "tiny", badgePosition: "icon", onClick: () => { this.actionClick(action); } }, h("span", { class: {
-        "show-medium": action.onlyCollapseText,
-        "hide-when-collapsed": action.onlyCollapseText
-      } }, action.label)))), this.starrable &&
-      h("stzh-tooltip", null, h("stzh-button", { class: "stzh-servicecard__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)), h("stzh-popover", { label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: "stzh-servicecard__card-action-popover" }, h("stzh-button", { class: "stzh-servicecard__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true }), h("stzh-menu", { slot: "content" }, this.starrable &&
-      h("stzh-menu-item", { icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd), this._actions.filter(action => !action.onlyCollapseText).map(action => (h("stzh-menu-item", { class: "hide-medium show-when-collapsed", icon: action.icon, badge: action.badge, onClick: () => { this.actionClick(action); } }, action.label))), (!this.sortableDisabled && !this.hideMovementActions) &&
-      h(Fragment, null, h("stzh-menu-item", { icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp), h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown))))))), h("div", { class: "stzh-servicecard__columns hide-when-collapsed" }, h("div", { class: {
-        "stzh-servicecard__column": true,
-        "is-left": true
-      } }, h("slot", { name: "left" })), h("div", { class: {
-        "stzh-servicecard__column": true,
-        "is-middle": true,
-        "has-no-spacing": this.middleVerticalSpacing === "none"
-      } }, h("slot", { name: "middle" })), h("div", { class: {
-        "stzh-servicecard__column": true,
-        "is-right": true,
-        "has-no-spacing": this.rightVerticalSpacing === "none"
-      } }, h("slot", { name: "right" }))))));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "subtitle": ["subtitleWatcher"],
-    "actions": ["actionsWatcher"]
-  }; }
-  static get style() { return stzhServicecardCss; }
-}, [6, "stzh-servicecard", {
-    "localization": [16],
-    "collapsed": [1540],
-    "starred": [1540],
-    "starrable": [516],
-    "heading": [1],
-    "subtitle": [1],
-    "actions": [1],
-    "subtitleInteractive": [4, "subtitle-interactive"],
-    "type": [513],
-    "middleVariant": [513, "middle-variant"],
-    "middleVerticalSpacing": [513, "middle-vertical-spacing"],
-    "rightVerticalSpacing": [513, "right-vertical-spacing"],
-    "sortableDisabled": [516, "sortable-disabled"],
-    "collapsible": [516],
-    "hideMovementActions": [4, "hide-movement-actions"]
-  }, [[11, "resize", "handleResize"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-servicecard", "stzh-badge", "stzh-button", "stzh-icon", "stzh-menu", "stzh-menu-item", "stzh-popover", "stzh-tooltip"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-servicecard":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhServicecard$1);
-      }
-      break;
-    case "stzh-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "stzh-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "stzh-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "stzh-menu":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "stzh-menu-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "stzh-popover":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "stzh-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const StzhServicecard = StzhServicecard$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { StzhServicecard, defineCustomElement };

package/dist/esm/stzh-servicecard-list.entry.js

@@ -1,69 +0,0 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-0e6d34c6.js';
-import { c as cloneElement } from './utils-68a28fce.js';
-import { f as fetchTranslations } from './translation-utils-2623783f.js';
-
-const stzhServicecardListCss = ".sc-stzh-servicecard-list-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-servicecard-list-h{display:none}.sc-stzh-servicecard-list-h *.sc-stzh-servicecard-list,.sc-stzh-servicecard-list-h *.sc-stzh-servicecard-list::before,.sc-stzh-servicecard-list-h *.sc-stzh-servicecard-list::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>*:not(:last-child):not([slot]){margin-bottom:var(--stzh-space-xlarge)}}.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>[slot=description] stzh-icon{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.sc-stzh-servicecard-list-h .sc-stzh-servicecard-list-s>stzh-text[slot=description]{--color:inherit}.stzh-servicecard-list__header.sc-stzh-servicecard-list{margin-bottom:var(--stzh-space-medium);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}@media screen and (min-width: 1024px){.stzh-servicecard-list__header.sc-stzh-servicecard-list{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-servicecard-list__header.sc-stzh-servicecard-list{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){.stzh-servicecard-list__header.sc-stzh-servicecard-list{-ms-flex-direction:row;flex-direction:row}}.stzh-servicecard-list__description.sc-stzh-servicecard-list{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--stzh-base-lead-color)}@media screen and (min-width: 1024px){.stzh-servicecard-list__description.sc-stzh-servicecard-list{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-servicecard-list__description.sc-stzh-servicecard-list:not(:empty){margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 800px){.stzh-servicecard-list__description.sc-stzh-servicecard-list:not(:empty){margin-bottom:0}}.stzh-servicecard-list__switch.sc-stzh-servicecard-list{--color:var(--stzh-base-lead-color);-ms-flex-item-align:end;align-self:end}";
-
-const StzhServicecardList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /** Whether collapse/expand toggle link */
-    this.showToggleLink = false;
-    /** Whether sorting should be disabled */
-    this.sortableDisabled = false;
-    /** HTML attribute that is used by the `toArray()` of sortable method */
-    this.sortableDataIdAttribute = "data-id";
-    /** Algorithm how the ghost element will be cloned */
-    this.sortableGhostClone = (dragElement) => {
-      const [clonedElement, clonedStzhElement, originalStzhElement] = cloneElement(dragElement);
-      if (clonedStzhElement
-        && originalStzhElement
-        && clonedStzhElement.tagName.toLowerCase() === 'stzh-servicecard') {
-        const clonedStzhElementCard = clonedStzhElement;
-        const originalStzhElementCard = originalStzhElement;
-        // copy every property that is not reflected to its attribute
-        clonedStzhElementCard.heading = originalStzhElementCard.heading;
-        clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;
-        clonedStzhElementCard.actions = originalStzhElementCard.actions;
-        clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;
-      }
-      return clonedElement;
-    };
-    this.allCollapsed = false;
-    this.collapseClick = () => {
-      const cards = Array.from(this.element.querySelectorAll("stzh-servicecard"));
-      cards.forEach(card => {
-        if (card.collapsible) {
-          card.collapsed = !this.allCollapsed;
-        }
-      });
-      this.allCollapsed = !this.allCollapsed;
-    };
-    this.updateCollapsedState = () => {
-      const cards = Array.from(this.element.querySelectorAll("stzh-servicecard"));
-      this.allCollapsed = !cards.some(card => !card.collapsed);
-    };
-  }
-  collapseListener() {
-    this.updateCollapsedState();
-  }
-  async componentWillLoad() {
-    if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, "servicecard-list");
-    }
-  }
-  componentDidLoad() {
-    this.updateCollapsedState();
-  }
-  render() {
-    const classes = {
-      "stzh-servicecard-list": true
-    };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-servicecard-list__header" }, h("div", { class: "stzh-servicecard-list__description" }, h("slot", { name: "description" })), this.showToggleLink &&
-      h("stzh-link", { class: "stzh-servicecard-list__switch", icon: this.allCollapsed ? "list-expanded" : "list-shrinked", label: this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll, onClick: this.collapseClick })), h("stzh-sortable", { disabled: this.sortableDisabled, dataIdAttribute: this.sortableDataIdAttribute, ghostClone: this.sortableGhostClone }, h("div", { class: "stzh-servicecard-list__cards", role: "list" }, h("slot", null))))));
-  }
-  get element() { return getElement(this); }
-};
-StzhServicecardList.style = stzhServicecardListCss;
-
-export { StzhServicecardList as stzh_servicecard_list };