npm - @oiz/stzh-components - Versions diffs - 2.7.0 → 2.8.0-alpha - Mend

@oiz/stzh-components 2.7.0 → 2.8.0-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (716) hide show

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

@@ -10,6 +10,8 @@ import { fetchTranslations } from "../../utils/translation-utils";
 export class StzhRichtext {
   constructor() {
     this.localization = undefined;
+    this.removeFirstMargin = true;
+    this.removeLastMargin = true;
     this.externalLinkSelector = 'a[rel*="external"], a.external, a.extern';
     this.externalLinkIcon = 'external-link';
   }
@@ -78,6 +80,42 @@ export class StzhRichtext {
           "text": "Translation strings"
         }
       },
+      "removeFirstMargin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether first top margin of first child should be set to 0."
+        },
+        "attribute": "remove-first-margin",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "removeLastMargin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether last bottom margin of last child should be set to 0."
+        },
+        "attribute": "remove-last-margin",
+        "reflect": true,
+        "defaultValue": "true"
+      },
       "externalLinkSelector": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/stzh-richtext/stzh-richtext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-richtext.js","sourceRoot":"","sources":["../../../src/components/stzh-richtext/stzh-richtext.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,OAAO,EACR,MAAM,eAAe,CAAC;AAEvB,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAC3D,MAAM,2BAA2B,GAAG,sCAAsC,CAAC;AAC3E,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAC3D,MAAM,sBAAsB,GAAG,iCAAiC,CAAC;AAEjE,OAAO,EAAE,iBAAiB,EAAuB,MAAM,+BAA+B,CAAC;AAEvF;;GAEG;AAMH,MAAM,OAAO,YAAY;;;~~gCAKgB~~,0CAA0C;4BAG9C,eAAe;;EAM1C,oBAAoB;IAC1B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE;MACxC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;MAEhD,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACxD,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;MACvD,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAAC;MAE1E,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACnD,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;MAEvD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;MACjD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;MACxC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC;MAClC,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;MAE9B,YAAY,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;MACvC,YAAY,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;EACL,CAAC;EAED,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;KACvE;EACH,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAC1F,IAAI,CAAC,oBAAoB,EAAE,CAAC;EAC9B,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,eAAe,EAAE,IAAI;KACtB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Element\n} from \"@stencil/core\";\n\nconst CLASS_EXTERNAL_LINK = 'stzh-richtext__external-link';\nconst CLASS_EXTERNAL_ICON_WRAPPER = 'stzh-richtext__external-icon-wrapper';\nconst CLASS_EXTERNAL_ICON = 'stzh-richtext__external-icon';\nconst CLASS_EXTERNAL_VHIDDEN = 'stzh-richtext__external-vhidden';\n\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/*\n @slot - Text content that should be styled\n /\n@Component({\n tag: \"stzh-richtext\",\n styleUrl: \"stzh-richtext.scss\",\n scoped: true\n})\nexport class StzhRichtext {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Selector to recognize external link and attach an icon /\n @Prop() externalLinkSelector: string = 'a[rel=\"external\"], a.external, a.extern';\n\n /** Icon used for marking external links */\n @Prop() externalLinkIcon: string = 'external-link';\n\n @Element() element: HTMLStzhRichtextElement;\n\n private externalLinks: HTMLElement[];\n\n private addExternalLinkIcons() {\n this.externalLinks.forEach(externalLink => {\n externalLink.classList.add(CLASS_EXTERNAL_LINK);\n\n const screenreaderText = document.createElement('span');\n screenreaderText.classList.add(CLASS_EXTERNAL_VHIDDEN);\n screenreaderText.innerText = this.localization.$globals.externalLinkLabel;\n\n const iconWrapper = document.createElement('span');\n iconWrapper.classList.add(CLASS_EXTERNAL_ICON_WRAPPER);\n\n const icon = document.createElement('stzh-icon');\n icon.classList.add(CLASS_EXTERNAL_ICON);\n icon.name = this.externalLinkIcon;\n iconWrapper.appendChild(icon);\n\n externalLink.prepend(screenreaderText);\n externalLink.appendChild(iconWrapper);\n });\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, \"richtext\");\n }\n }\n\n componentDidRender() {\n this.externalLinks = Array.from(this.element.querySelectorAll(this.externalLinkSelector));\n this.addExternalLinkIcons();\n }\n\n render() {\n const classes = {\n \"stzh-richtext\": true\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-richtext.js","sourceRoot":"","sources":["../../../src/components/stzh-richtext/stzh-richtext.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,OAAO,EACR,MAAM,eAAe,CAAC;AAEvB,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAC3D,MAAM,2BAA2B,GAAG,sCAAsC,CAAC;AAC3E,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAC3D,MAAM,sBAAsB,GAAG,iCAAiC,CAAC;AAEjE,OAAO,EAAE,iBAAiB,EAAuB,MAAM,+BAA+B,CAAC;AAEvF;;GAEG;AAMH,MAAM,OAAO,YAAY;;;6BAK+B,IAAI;4BAGL,IAAI;gCAGlB,0CAA0C;4BAG9C,eAAe;;EAM1C,oBAAoB;IAC1B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE;MACxC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;MAEhD,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACxD,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;MACvD,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAAC;MAE1E,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACnD,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;MAEvD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;MACjD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;MACxC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC;MAClC,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;MAE9B,YAAY,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;MACvC,YAAY,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;EACL,CAAC;EAED,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;KACvE;EACH,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAC1F,IAAI,CAAC,oBAAoB,EAAE,CAAC;EAC9B,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,eAAe,EAAE,IAAI;KACtB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Element\n} from \"@stencil/core\";\n\nconst CLASS_EXTERNAL_LINK = 'stzh-richtext__external-link';\nconst CLASS_EXTERNAL_ICON_WRAPPER = 'stzh-richtext__external-icon-wrapper';\nconst CLASS_EXTERNAL_ICON = 'stzh-richtext__external-icon';\nconst CLASS_EXTERNAL_VHIDDEN = 'stzh-richtext__external-vhidden';\n\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/*\n @slot - Text content that should be styled\n /\n@Component({\n tag: \"stzh-richtext\",\n styleUrl: \"stzh-richtext.scss\",\n scoped: true\n})\nexport class StzhRichtext {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether first top margin of first child should be set to 0. /\n @Prop({ reflect: true }) removeFirstMargin: boolean = true;\n\n /* Whether last bottom margin of last child should be set to 0. /\n @Prop({ reflect: true }) removeLastMargin: boolean = true;\n\n /* Selector to recognize external link and attach an icon /\n @Prop() externalLinkSelector: string = 'a[rel=\"external\"], a.external, a.extern';\n\n /** Icon used for marking external links */\n @Prop() externalLinkIcon: string = 'external-link';\n\n @Element() element: HTMLStzhRichtextElement;\n\n private externalLinks: HTMLElement[];\n\n private addExternalLinkIcons() {\n this.externalLinks.forEach(externalLink => {\n externalLink.classList.add(CLASS_EXTERNAL_LINK);\n\n const screenreaderText = document.createElement('span');\n screenreaderText.classList.add(CLASS_EXTERNAL_VHIDDEN);\n screenreaderText.innerText = this.localization.$globals.externalLinkLabel;\n\n const iconWrapper = document.createElement('span');\n iconWrapper.classList.add(CLASS_EXTERNAL_ICON_WRAPPER);\n\n const icon = document.createElement('stzh-icon');\n icon.classList.add(CLASS_EXTERNAL_ICON);\n icon.name = this.externalLinkIcon;\n iconWrapper.appendChild(icon);\n\n externalLink.prepend(screenreaderText);\n externalLink.appendChild(iconWrapper);\n });\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, \"richtext\");\n }\n }\n\n componentDidRender() {\n this.externalLinks = Array.from(this.element.querySelectorAll(this.externalLinkSelector));\n this.addExternalLinkIcons();\n }\n\n render() {\n const classes = {\n \"stzh-richtext\": true\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stzh-richtext/stzh-richtext.stories.js CHANGED Viewed

@@ -14,7 +14,7 @@ const TEMPLATE = `
   <h2>H2: Laboris laborum aute id laboris</h2>
   <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
-  <p><strong>Laboris laborum aute</strong> id laboris culpa esse <b>aliquip nisi anim</b> velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
+  <p><strong>Laboris laborum aute</strong> id laboris culpa esse <strong>aliquip nisi anim</strong> velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
   <ul>
     <li>Laboris laborum aute id laboris esse aliquip nisi anim velit</li>
     <li>
@@ -29,7 +29,7 @@ const TEMPLATE = `
   <h3>H3: Laboris laborum aute id laboris</h3>
   <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
-  <p><i>Laboris laborum aute</i> id laboris culpa esse <em>aliquip nisi anim</em> velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
+  <p><em>Laboris laborum aute</em> id laboris culpa esse <em>aliquip nisi anim</em> velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
   <ol>
     <li>Laboris laborum aute id laboris esse aliquip nisi anim velit</li>
     <li>

package/dist/collection/components/stzh-row/stzh-row.css CHANGED Viewed

@@ -102,11 +102,6 @@
 :host {
   width: 100%;
 }
-:host::after {
-  content: "";
-  display: table;
-  clear: both;
-}
 :host([span="1"]) ::slotted(stzh-cell:not([span])) {
   --cell-width: 8.3333333333%;

package/dist/collection/components/stzh-section/stzh-section.css CHANGED Viewed

@@ -100,15 +100,9 @@
 }
 :host {
-  clear: both;
   --background-color: var(--stzh-section-background-color);
   /* Highlight variant */
 }
-:host::after {
-  content: "";
-  display: table;
-  clear: both;
-}
 :host[variant=highlight] {
   --stzh-base-color: var(--stzh-color-grey61);
   --background-color: var(--stzh-section-highlight-background-color);

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

@@ -1,22 +1,9 @@
 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") : "";
-};
+import { getMeta } from '../../utils/utils';
+import { abbreviateText } from '../../utils/string-utils';
+// 280 - URL (always 24) = 256
+const MAX_TWEET_LENGTH = 256;
 /**
  */
 export class StzhShare {
@@ -55,9 +42,8 @@ export class StzhShare {
     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 twitterTitle = encodeURIComponent(abbreviateText(title, MAX_TWEET_LENGTH));
     const description = encodeURIComponent(getMeta("description"));
-    // 280 - URL (always 24) = 256
-    const maxTweetLength = 256;
     const serviceData = {
       "facebook": {
         popup: true,
@@ -69,7 +55,7 @@ export class StzhShare {
       "twitter": {
         popup: true,
         blank: true,
-        url: `https://twitter.com/intent/tweet?text=${abbreviateText(title, maxTweetLength)}&url=${shareUrl}`,
+        url: `https://twitter.com/intent/tweet?text=${twitterTitle}&url=${shareUrl}`,
         text: this.localization.shareTwitter,
         icon: "twitter-filled"
       },

package/dist/collection/components/stzh-share/stzh-share.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-share.js","sourceRoot":"","sources":["../../../src/components/stzh-share/stzh-share.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,EACJ,KAAK,EACN,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;~~AAGlE~~,~~MAAM~~,~~cAAc,GAAG,UAAS,IAAI,~~EAAE,~~MAAM;EAC1C,IAAI,IAAI,CAAC,MAAM,IAAI,MAAM,EAAE;IACzB,~~OAAO,~~IAAI,CAAC;GACb;EAED,IAAI,mBAAmB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,~~EAAE,MAAM,~~GAAG~~,CAAC~~,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC~~;~~EAEzE~~,~~IAAI,mBAAmB,EAAE;IACvB,~~OAAO,~~IAAI,CAAC,SAAS,CAAC,CAAC,~~EAAE,~~mBAAmB~~,~~CAAC,GAAG,QAAQ,CAAC;GAC1D;OAAM;IACL,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,~~EAAE,MAAM,~~GAAG~~,CAAC~~,CAAC,CAAC~~;~~GACtC;AACH~~,~~CAAC,CAAA~~;~~AAED~~,~~gFAAgF;AAChF,~~MAAM,~~OAAO~~,GAAG,~~UAAS,IAAI;EAC3B,MAAM,IAAI,~~GAAG,~~QAAQ,~~CAAC~~,aAAa,CAAC,cAAc,IAAI,iBAAiB,IAAI,IAAI,CAAC,CAAC~~;~~EACjF,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC~~;~~AAClD,CAAC,CAAA;AAED;~~GACG;AAMH,MAAM,OAAO,SAAS;;IAeZ,cAAS,GAAmB,EAAE,CAAC;IAa/B,cAAS,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;MACjC,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,sBAAsB,CAAC,CAAC;IACrD,CAAC,CAAA;;eA1BqB,MAAM,CAAC,QAAQ,CAAC,IAAI;oBAME;MAC1C,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM;KAClD;;EAKD,eAAe,CAAC,QAAiC;IAC/C,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACvC;SAAM;MACL,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;KAC3B;EACH,CAAC;EASD,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;KACpE;EACH,CAAC;EAED,MAAM;;IACJ,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;KACnB,CAAC;IAEF,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IACtE,MAAM,QAAQ,GAAG,kBAAkB,CACjC,MAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,0CAAE,OAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC,GAAG,CAAC,CAChE,CAAC;IAEF,MAAM,KAAK,GAAG,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACjD,MAAM,~~WAAW~~,GAAG,kBAAkB,CAAC,~~OAAO~~,CAAC,~~aAAa~~,CAAC,CAAC,CAAC;~~IAE/D~~,~~8BAA8B;IAC9B,~~MAAM,~~cAAc~~,GAAG,~~GAAG~~,CAAC;~~IAE3B~~,MAAM,WAAW,GAAG;MAClB,UAAU,EAAE;QACV,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;QACX,GAAG,EAAE,gDAAgD,QAAQ,EAAE;QAC/D,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,aAAa;QACrC,IAAI,EAAE,iBAAiB;OACxB;MACD,SAAS,EAAE;QACT,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;QACX,GAAG,EAAE,yCAAyC,~~cAAc~~,~~CAAC,KAAK,EAAE,cAAc,CAAC,~~QAAQ,QAAQ,EAAE;~~QACrG~~,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,YAAY;QACpC,IAAI,EAAE,gBAAgB;OACvB;MACD,UAAU,EAAE;QACV,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;QACX,GAAG,EAAE,2DAA2D,WAAW,UAAU,KAAK,QAAQ,QAAQ,EAAE;QAC5G,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,aAAa;QACrC,IAAI,EAAE,iBAAiB;OACxB;MACD,MAAM,EAAE;QACN,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;QACX,GAAG,EAAE,2CAA2C,QAAQ,EAAE;QAC1D,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS;QACjC,IAAI,EAAE,aAAa;OACpB;MACD,MAAM,EAAE;QACN,KAAK,EAAE,KAAK;QACZ,KAAK,EAAE,KAAK;QACZ,GAAG,EAAE,mBAAmB,WAAW,SAAS,QAAQ,EAAE;QACtD,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS;QACjC,IAAI,EAAE,aAAa;OACpB;KACF,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,UAAI,KAAK,EAAC,kBAAkB,IACzB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAC9B,UAAI,KAAK,EAAC,kBAAkB;UAC1B,oBAAc,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI;YAC9C,SACE,KAAK,EAAE,yBAAyB,OAAO,EAAE,EACzC,IAAI,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,GAAG,gBAClB,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,EACrC,GAAG,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,UAAU,EAC7E,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EACvD,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,iBAClF,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI;cAEtC,iBAAW,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,GAAc,CAC/E,CACS,CACZ,CACN,CACE,CACD,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch\n} from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhShareLocalizedText } from \"./stzh-share.localization\"\~~n\nconst~~ ~~abbreviateText = function(text, length)~~ {~~\n if~~ ~~(text.length~~ ~~<= length) {\n return text;\n~~ }~~\n\n var~~ ~~lastWhitespaceIndex~~ ~~= text.substring(0, length - 1).lastIndexOf(~~' ');\~~n\n if~~ ~~(lastWhitespaceIndex)~~ {~~\n return~~ ~~text.substring(0,~~ ~~lastWhitespaceIndex)~~ + '~~\\u2026~~';\n ~~} else {~~\n ~~return~~ ~~text.substring(0,~~ ~~length~~ - ~~1);\n }\n}\n\n//~~ ~~returns~~ ~~content~~ of ~~<meta name=\"~~\~~" content=\"\"> tags or '' if empty/non existant\~~nconst ~~getMeta~~ = ~~function(name) {\n const meta = document.querySelector(`meta[name=\"${name}\"],[property=\"${name}\"]`)~~;\n ~~return meta ? meta.getAttribute(~~\~~"content\") : \"\";\~~n~~}\n\n~~/*\n /\n@Component({\n tag: \"stzh-share\",\n styleUrl: \"stzh-share.scss\",\n scoped: true\n})\nexport class StzhShare {\n /** Translation strings /\n @Prop() localization: StzhShareLocalizedText;\n\n /* URL of current site (uses full URL by default) /\n @Prop() url: string = window.location.href;\n\n /\n Array of enabled share buttons.\n * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n */\n @Prop() services: ShareService[] \| string = [\n \"facebook\", \"twitter\", \"linkedin\", \"xing\", \"mail\"\n ];\n\n private _services: ShareService[] = [];\n\n @Watch(\"services\")\n servicesWatcher(newValue: ShareService[] \| string) {\n if (typeof newValue === \"string\") {\n this._services = JSON.parse(newValue);\n } else {\n this._services = newValue;\n }\n }\n\n @Element() element: HTMLStzhShareElement;\n\n private openPopup = (url, event) => {\n event.preventDefault();\n window.open(url, \"_blank\", \"width=600,height=460\");\n }\n\n async componentWillLoad() {\n this.servicesWatcher(this.services);\n\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, \"share\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-share\": true\n };\n\n const shareUrl = encodeURIComponent(this.url);\n const mailSubject = encodeURIComponent(this.localization.mailSubject);\n const mailBody = encodeURIComponent(\n this.localization.mailBody?.replace(/\\{shareUrl\\}/gi, this.url)\n );\n\n const title = encodeURIComponent(document.title);\n const ~~description~~ = encodeURIComponent(~~getMeta~~(~~\"description\"~~));\n\n // ~~280~~ - ~~URL~~ (~~always 24~~) ~~= 256\n const maxTweetLength = 256~~;\n\n const serviceData = {\n \"facebook\": {\n popup: true,\n blank: true,\n url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,\n text: this.localization.shareFacebook,\n icon: \"facebook-filled\"\n },\n \"twitter\": {\n popup: true,\n blank: true,\n url: `https://twitter.com/intent/tweet?text=${~~abbreviateText(title, maxTweetLength)~~}&url=${shareUrl}`,\n text: this.localization.shareTwitter,\n icon: \"twitter-filled\"\n },\n \"linkedin\": {\n popup: true,\n blank: true,\n url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,\n text: this.localization.shareLinkedin,\n icon: \"linkedin-filled\"\n },\n \"xing\": {\n popup: true,\n blank: true,\n url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,\n text: this.localization.shareXing,\n icon: \"xing-filled\"\n },\n \"mail\": {\n popup: false,\n blank: false,\n url: `mailto:?subject=${mailSubject}&body=${mailBody}`,\n text: this.localization.shareMail,\n icon: \"mail-filled\"\n }\n };\n\n return (\n <Host>\n <div class={classes}>\n <ul class=\"stzh-share__list\">\n {this._services.map((service) =>\n <li class=\"stzh-share__item\">\n <stzh-tooltip content={serviceData[service].text}>\n <a\n class={`stzh-share__button is-${service}`}\n href={serviceData[service].url}\n aria-label={serviceData[service].text}\n rel={serviceData[service].blank ? \"nofollow noopener noreferrer\" : \"nofollow\"}\n target={serviceData[service].blank ? \"_blank\" : \"_self\"}\n onClick={serviceData[service].popup ? (e) => this.openPopup(serviceData[service].url, e) : null}\n s-object-id={serviceData[service].text}\n >\n <stzh-icon class=\"stzh-share__icon\" name={serviceData[service].icon}></stzh-icon>\n </a>\n </stzh-tooltip>\n </li>\n )}\n </ul>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-share.js","sourceRoot":"","sources":["../../../src/components/stzh-share/stzh-share.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch\n} from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhShareLocalizedText } from \"./stzh-share.localization\"\nimport { getMeta } from '../../utils/utils';\nimport { abbreviateText } from '../../utils/string-utils';\n\n// 280 - URL (always 24) = 256\nconst MAX_TWEET_LENGTH = 256;\n\n/*\n /\n@Component({\n tag: \"stzh-share\",\n styleUrl: \"stzh-share.scss\",\n scoped: true\n})\nexport class StzhShare {\n /** Translation strings /\n @Prop() localization: StzhShareLocalizedText;\n\n /* URL of current site (uses full URL by default) /\n @Prop() url: string = window.location.href;\n\n /\n Array of enabled share buttons.\n * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n */\n @Prop() services: ShareService[] \| string = [\n \"facebook\", \"twitter\", \"linkedin\", \"xing\", \"mail\"\n ];\n\n private _services: ShareService[] = [];\n\n @Watch(\"services\")\n servicesWatcher(newValue: ShareService[] \| string) {\n if (typeof newValue === \"string\") {\n this._services = JSON.parse(newValue);\n } else {\n this._services = newValue;\n }\n }\n\n @Element() element: HTMLStzhShareElement;\n\n private openPopup = (url, event) => {\n event.preventDefault();\n window.open(url, \"_blank\", \"width=600,height=460\");\n }\n\n async componentWillLoad() {\n this.servicesWatcher(this.services);\n\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, \"share\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-share\": true\n };\n\n const shareUrl = encodeURIComponent(this.url);\n const mailSubject = encodeURIComponent(this.localization.mailSubject);\n const mailBody = encodeURIComponent(\n this.localization.mailBody?.replace(/\\{shareUrl\\}/gi, this.url)\n );\n\n const title = encodeURIComponent(document.title);\n const twitterTitle = encodeURIComponent(abbreviateText(title, MAX_TWEET_LENGTH));\n const description = encodeURIComponent(getMeta(\"description\"));\n\n const serviceData = {\n \"facebook\": {\n popup: true,\n blank: true,\n url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,\n text: this.localization.shareFacebook,\n icon: \"facebook-filled\"\n },\n \"twitter\": {\n popup: true,\n blank: true,\n url: `https://twitter.com/intent/tweet?text=${twitterTitle}&url=${shareUrl}`,\n text: this.localization.shareTwitter,\n icon: \"twitter-filled\"\n },\n \"linkedin\": {\n popup: true,\n blank: true,\n url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,\n text: this.localization.shareLinkedin,\n icon: \"linkedin-filled\"\n },\n \"xing\": {\n popup: true,\n blank: true,\n url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,\n text: this.localization.shareXing,\n icon: \"xing-filled\"\n },\n \"mail\": {\n popup: false,\n blank: false,\n url: `mailto:?subject=${mailSubject}&body=${mailBody}`,\n text: this.localization.shareMail,\n icon: \"mail-filled\"\n }\n };\n\n return (\n <Host>\n <div class={classes}>\n <ul class=\"stzh-share__list\">\n {this._services.map((service) =>\n <li class=\"stzh-share__item\">\n <stzh-tooltip content={serviceData[service].text}>\n <a\n class={`stzh-share__button is-${service}`}\n href={serviceData[service].url}\n aria-label={serviceData[service].text}\n rel={serviceData[service].blank ? \"nofollow noopener noreferrer\" : \"nofollow\"}\n target={serviceData[service].blank ? \"_blank\" : \"_self\"}\n onClick={serviceData[service].popup ? (e) => this.openPopup(serviceData[service].url, e) : null}\n s-object-id={serviceData[service].text}\n >\n <stzh-icon class=\"stzh-share__icon\" name={serviceData[service].icon}></stzh-icon>\n </a>\n </stzh-tooltip>\n </li>\n )}\n </ul>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.css CHANGED Viewed

@@ -99,6 +99,8 @@ body {
   display: none !important;
 }
+/* Sticky footer layout */
 .stzh-layout-sticky-footer {
   display: grid;
   grid-template-rows: auto 1fr auto;
@@ -106,6 +108,8 @@ body {
   min-height: 100vh;
 }
+/* Helper class when dialog components are opened */
 .stzh-dialog-open,
 .stzh-overlay-open {
   touch-action: none;
@@ -125,6 +129,8 @@ body {
   }
 }
+/* Flying Focus */
 /* default outline value, which will be applied to all elements receiving focus
 the .has-focus class is used by the focus target */
 .stzh-flyingfocus-enabled :focus,
@@ -152,6 +158,49 @@ the .has-focus class is used by the focus target */
   border: 0 !important;
 }
+/* AEM/STZH Website specifix css */
+.section.has-invert {
+  /* Font curve: big */
+  margin-top: var(--stzh-space-xxxlarge);
+  margin-bottom: var(--stzh-space-xxxlarge);
+  @media screen and (min-width: 600px) {
+    margin-top: var(--stzh-space-xxxxlarge);
+    margin-bottom: var(--stzh-space-xxxxlarge);
+  }
+  @media screen and (min-width: 1024px) {
+    margin-top: var(--stzh-space-big);
+    margin-bottom: var(--stzh-space-big);
+  }
+  @media screen and (min-width: 1260) {
+    margin-top: var(--stzh-space-xbig);
+    margin-bottom: var(--stzh-space-xbig);
+  }
+}
+.section.has-invert stzh-invert stzh-container {
+  /* Font curve: large */
+  padding-top: var(--stzh-space-xxlarge);
+  padding-bottom: var(--stzh-space-xxlarge);
+  @media screen and (min-width: 1024px) {
+    padding-top: var(--stzh-space-xxxlarge);
+    padding-bottom: var(--stzh-space-xxxlarge);
+  }
+  @media screen and (min-width: 1260) {
+    padding-top: var(--stzh-space-xxxxlarge);
+    padding-bottom: var(--stzh-space-xxxxlarge);
+  }
+}
+.section.has-sticky {
+  display: contents;
+}
 /* Global CSS properties */
 :root {
@@ -855,9 +904,11 @@ main .inline-filters button.muted[data-toggle]:focus,
 main {
   accent-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   /* Resets */
+  --color: var(--stzh-base-color);
   --richtext-blockquote-color: var(--stzh-richtext-blockquote-color);
   --richtext-blockquote-line-color: var(--stzh-richtext-blockquote-line-color);
   --richtext-blockquote-footer-color: var(--stzh-richtext-blockquote-footer-color);
+  color: var(--color);
   /* Font weights */
   /* Coloring */
   /* Fon sizings & Spacings */
@@ -2841,9 +2892,11 @@ main .statistics-cell .statistic__data:after {
   border-left: 0.125rem solid var(--stzh-base-border-color);
 }
 main .ql-editor {
+  --color: var(--stzh-base-color);
   --richtext-blockquote-color: var(--stzh-richtext-blockquote-color);
   --richtext-blockquote-line-color: var(--stzh-richtext-blockquote-line-color);
   --richtext-blockquote-footer-color: var(--stzh-richtext-blockquote-footer-color);
+  color: var(--color);
   /* Font weights */
   /* Coloring */
   /* Fon sizings & Spacings */

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

@@ -206,7 +206,7 @@ export class StzhSortable {
     }
     const total = this.getContainer().children.length;
     string = string
-      .replace("{total}", total.toString());
+      .replace(/\{total\}/gi, total.toString());
     this.ariaLiveElement.textContent = string;
   }
   getIndexOfSelectedItem(item = this.selectedItem) {

package/dist/collection/components/stzh-sortable/stzh-sortable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-sortable.js","sourceRoot":"","sources":["../../../src/components/stzh-sortable/stzh-sortable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Method,\n Watch,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhSortableUpdateEvent,\n StzhSortableDisableEvent\n} from \"../../index\";\n\nimport scrollIntoView from \"scroll-into-view-if-needed\";\nimport Sortable from \"../../libraries/sortablejs/sortable.complete.esm.js\";\n\nimport { cloneWrappedStzhElement } from \"../../utils/utils\";\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhSortableLocalizedText } from \"./stzh-sortable.localization\";\n\nconst CLASS_ITEM = 'is-sortable-item';\nconst CLASS_GHOST = \"is-ghost\";\nconst CLASS_SELECTED = \"is-selected\";\nconst CLASS_CHOSEN = \"is-chosen\";\nconst CLASS_DRAG = \"is-drag\";\n\nconst CLASS_PARENT_SELECTED = \"has-item-selected\";\n\nlet sortableCounter = 0;\n\n/*\n @slot - Slot for any elements\n /\n@Component({\n tag: \"stzh-sortable\",\n styleUrl: \"stzh-sortable.scss\",\n scoped: true\n})\nexport class StzhSortable {\n /* Translation strings. /\n @Prop() localization: StzhSortableLocalizedText;\n\n /* Wether sorting is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* HTML attribute that is used by the `toArray()` method /\n @Prop() dataIdAttribute: string = \"data-id\";\n\n /* Container /\n @Prop() container: HTMLElement \| Function = () => {\n return this.containerElement?.firstElementChild;\n }\n\n /* Algorithm how the ghost element will be cloned /\n @Prop() ghostClone: Function = (dragElement: HTMLElement) => {\n const [clonedElement] = cloneWrappedStzhElement(dragElement);\n return clonedElement;\n }\n\n /* Filtered elements that should prevent dragging inside the drag item elements /\n @Prop() filterElements: any[] \| string = [\n \"[data-stzh-sortable-filtered]\",\n \"[sortable-disabled]\",\n \"button\",\n \"a[href]\",\n \"input\",\n \"select\",\n \"textarea\",\n \"label\",\n \"iframe\",\n \"details\",\n \"area\",\n \"stzh-sortable\"\n ];\n\n private _filterElements: any[];\n\n @Element() element: HTMLStzhSortableElement;\n\n /* Serializes the sortable's item data-id's (dataIdAttr option) into an array of string /\n @Method()\n async toArray(): Promise<string[]> {\n return this.sortable.toArray();\n }\n\n /* Sorts the elements according to the array /\n @Method()\n async sort(order: String[], useAnimation: boolean = true) {\n return this.sortable.sort(order, useAnimation);\n }\n\n /* Move item /\n @Method()\n\tasync moveItem(item: HTMLElement, direction: \"up\" \| \"down\") {\n\t\tif (!item\n \|\| !item.nextElementSibling && direction === \"down\"\n \|\| !item.previousElementSibling && direction === \"up\"\n ) {\n\t\t\treturn;\n\t\t}\n\n this.resetItemOnBlur = false;\n\n if (direction === \"up\") {\n\t\t item.previousElementSibling.before(item);\n } else if (direction === \"down\") {\n\t\t item.nextElementSibling.after(item);\n }\n\n\t\tthis.updateAriaLive(this.localization.moved, item);\n this.focusItem(item);\n\n const currentIndex = Array.from(item.parentElement?.children).indexOf(item)\n\n this.stzhUpdate.emit({\n component: \"stzh-sortable\",\n data: await this.toArray(),\n item,\n newIndex: currentIndex,\n oldIndex: currentIndex + (direction === \"up\" ? 1 : -1)\n });\n\n this.resetItemOnBlur = true;\n\t}\n\n @Watch(\"disabled\")\n disabledWatcher(newValue: boolean) {\n if (newValue) {\n this.setAttributes();\n } else {\n this.unsetAttributes();\n }\n\n this.stzhDisable.emit({\n component: \"stzh-sortable\",\n disabled: newValue\n })\n }\n\n @Watch(\"filterElements\")\n filterElementsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._filterElements = JSON.parse(newValue);\n } else {\n this._filterElements = newValue;\n }\n }\n\n /* Update event /\n @Event() stzhUpdate: EventEmitter<StzhSortableUpdateEvent>;\n\n /* Disable event */\n @Event() stzhDisable: EventEmitter<StzhSortableDisableEvent>;\n\n private sortable: Sortable;\n private sortableId: string;\n private containerElement: HTMLElement;\n private ariaLiveElement: HTMLElement;\n private observer: MutationObserver;\n private selectedItem: HTMLElement = null;\n private resetItemOnBlur: boolean = false;\n private lastIndex: number;\n\n private getContainer(): HTMLElement {\n return typeof this.container === \"function\"\n ? this.container()\n : this.container;\n }\n\n\tprivate updateAriaLive(string: string, item: HTMLElement = this.selectedItem) {\n if (!this.getContainer()) {\n return;\n }\n\n\t\tif (item) {\n const title = item.getAttribute(\"aria-label\") \|\| \"\";\n const index = this.getIndexOfSelectedItem(item);\n\n string = string\n .replace(\"{title}\", title)\n .replace(\"{current}\", (index + 1).toString())\n\t\t}\n\n\t\tconst total = this.getContainer().children.length;\n\n\t string = string\n .replace(\"{total}\", total.toString());\n\n this.ariaLiveElement.textContent = string;\n\t}\n\n\tprivate getIndexOfSelectedItem(item: HTMLElement = this.selectedItem) {\n\t\tif (item) {\n return Array.from(item.parentElement.children).indexOf(item);\n\t\t}\n\t}\n\n private resetActiveItem(moveToOriginalPosition: boolean = false) {\n\t\tif (!this.selectedItem) {\n return;\n }\n\n const currentIndex = this.getIndexOfSelectedItem();\n const container = this.selectedItem.parentElement;\n\n if (moveToOriginalPosition && this.lastIndex !== currentIndex) {\n if (this.lastIndex > currentIndex) {\n container.children[this.lastIndex].after(this.selectedItem);\n } else {\n container.children[this.lastIndex].before(this.selectedItem);\n }\n\n this.selectedItem.focus();\n }\n\n container.classList.remove(CLASS_PARENT_SELECTED);\n this.selectedItem.classList.remove(CLASS_SELECTED);\n this.selectedItem = null;\n this.lastIndex = null;\n\t}\n\n private focusItem(item: HTMLElement \| null) {\n if (!item) {\n return;\n }\n\n\t\titem.focus();\n\n const flyingfocusElement = document.querySelector('stzh-flyingfocus');\n if (flyingfocusElement) {\n flyingfocusElement.reposition();\n }\n\n scrollIntoView(item, {\n scrollMode: 'if-needed',\n block: 'nearest',\n inline: 'nearest'\n });\n }\n\n private setAttributes() {\n Array.from(this.getContainer().children).forEach((child) => {\n child.classList.add(CLASS_ITEM);\n\n child.addEventListener('blur', this.onBlur);\n child.addEventListener('keydown', this.onKeydown);\n\n child.setAttribute('tabindex', '0');\n child.setAttribute('aria-describedby', `${this.sortableId}-description`);\n });\n }\n\n private unsetAttributes() {\n Array.from(this.getContainer().children).forEach((child) => {\n child.classList.remove(CLASS_ITEM);\n\n child.removeEventListener('blur', this.onBlur);\n child.removeEventListener('keydown', this.onKeydown);\n\n child.removeAttribute('tabindex');\n child.removeAttribute('aria-describedby');\n });\n }\n\n private init = () => {\n if (!this.getContainer() \|\| this.disabled) {\n return;\n }\n\n this.setAttributes()\n }\n\n private updated = async (event?: any) => {\n let newIndex: number;\n let oldIndex: number;\n let item: HTMLElement;\n\n if (event) {\n newIndex = event.newIndex;\n oldIndex = event.oldIndex;\n item = event.item;\n } else {\n newIndex = this.getIndexOfSelectedItem();\n oldIndex = this.lastIndex;\n item = this.selectedItem;\n }\n\n if (newIndex !== oldIndex) {\n this.stzhUpdate.emit({\n component: \"stzh-sortable\",\n data: await this.toArray(),\n item,\n newIndex,\n oldIndex\n });\n }\n }\n\n private onKeydown = (event: KeyboardEvent) => {\n const currentTarget = event.currentTarget as HTMLElement;\n const target = event.target as HTMLElement;\n\n if (!this.getContainer() \|\| this.disabled \|\| currentTarget !== target) {\n return;\n }\n\n // const isFilteredElement = target.matches(this._filterElements.join(', '));\n // if (event.key === \" \" && !isFilteredElement) {\n\n if (event.key === \" \") {\n event.preventDefault();\n\n if (!this.selectedItem) {\n this.selectedItem = currentTarget;\n this.selectedItem.parentElement.classList.add(CLASS_PARENT_SELECTED);\n this.selectedItem.classList.add(CLASS_SELECTED);\n this.lastIndex = this.getIndexOfSelectedItem();\n this.resetItemOnBlur = true;\n this.updateAriaLive(this.localization.started);\n } else {\n this.resetItemOnBlur = false;\n this.updateAriaLive(this.localization.dropped);\n this.updated();\n this.resetActiveItem();\n }\n } else if (event.key === \"Tab\" && this.selectedItem && this.selectedItem === event.currentTarget) {\n event.preventDefault();\n } else if (event.key === \"Escape\" && this.selectedItem) {\n this.resetItemOnBlur = false;\n this.updateAriaLive(this.localization.canceled);\n this.resetActiveItem(true);\n } else if (event.key === \"ArrowUp\") {\n event.preventDefault();\n\n if (this.selectedItem) {\n this.moveItem(this.selectedItem, \"up\");\n } else {\n this.focusItem(currentTarget.previousElementSibling as HTMLElement);\n }\n } else if (event.key === \"ArrowDown\") {\n event.preventDefault();\n\n if (this.selectedItem) {\n this.moveItem(this.selectedItem, \"down\");\n } else {\n this.focusItem(currentTarget.nextElementSibling as HTMLElement);\n }\n }\n }\n\n private onBlur = () => {\n if (this.resetItemOnBlur) {\n this.resetItemOnBlur = false;\n this.updateAriaLive(this.localization.dropped);\n this.updated();\n this.resetActiveItem();\n }\n }\n\n async componentWillLoad() {\n this.sortableId = `stzh-sortable-${sortableCounter++}`;\n this.filterElementsWatcher(this.filterElements);\n\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, 'sortable');\n }\n }\n\n componentWillUpdate() {\n if (this.sortable) {\n this.sortable.destroy();\n this.sortable = null;\n }\n }\n\n componentDidRender() {\n if (this.sortable) {\n return;\n }\n\n // see available option in https://github.com/SortableJS/Sortable#options\n this.sortable = new Sortable(this.getContainer(), {\n animation: 150,\n filter: this._filterElements.join(', '),\n ghostClass: CLASS_GHOST,\n chosenClass: CLASS_CHOSEN,\n dragClass: CLASS_DRAG,\n dataIdAttr: this.dataIdAttribute,\n preventOnFilter: false,\n forceFallback: true,\n delay: 200,\n delayOnTouchOnly: true,\n disabled: this.disabled,\n ghostClone: this.ghostClone,\n // changed sorting within list\n onUpdate: this.updated\n });\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n this.unsetAttributes();\n\n if (this.sortable) {\n this.sortable.destroy();\n this.sortable = null;\n }\n }\n\n render() {\n const classes = {\n \"stzh-sortable\": true,\n \"stzh-sortable--disabled\": this.disabled\n };\n\n return (\n <Host>\n <div class={classes}>\n <div\n id={`${this.sortableId}-description`}\n class=\"stzh-sortable__description\"\n >\n {this.localization.description}\n </div>\n\n\t\t <div\n ref={(el) => (this.ariaLiveElement = el as HTMLDivElement)}\n aria-live=\"assertive\"\n class=\"stzh-sortable__aria-live\"\n ></div>\n\n <div\n ref={(el) => (this.containerElement = el as HTMLDivElement)}\n class=\"stzh-sortable__container\"\n >\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-sortable.js","sourceRoot":"","sources":["../../../src/components/stzh-sortable/stzh-sortable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Method,\n Watch,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhSortableUpdateEvent,\n StzhSortableDisableEvent\n} from \"../../index\";\n\nimport scrollIntoView from \"scroll-into-view-if-needed\";\nimport Sortable from \"../../libraries/sortablejs/sortable.complete.esm.js\";\n\nimport { cloneWrappedStzhElement } from \"../../utils/utils\";\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhSortableLocalizedText } from \"./stzh-sortable.localization\";\n\nconst CLASS_ITEM = 'is-sortable-item';\nconst CLASS_GHOST = \"is-ghost\";\nconst CLASS_SELECTED = \"is-selected\";\nconst CLASS_CHOSEN = \"is-chosen\";\nconst CLASS_DRAG = \"is-drag\";\n\nconst CLASS_PARENT_SELECTED = \"has-item-selected\";\n\nlet sortableCounter = 0;\n\n/*\n @slot - Slot for any elements\n /\n@Component({\n tag: \"stzh-sortable\",\n styleUrl: \"stzh-sortable.scss\",\n scoped: true\n})\nexport class StzhSortable {\n /* Translation strings. /\n @Prop() localization: StzhSortableLocalizedText;\n\n /* Wether sorting is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* HTML attribute that is used by the `toArray()` method /\n @Prop() dataIdAttribute: string = \"data-id\";\n\n /* Container /\n @Prop() container: HTMLElement \| Function = () => {\n return this.containerElement?.firstElementChild;\n }\n\n /* Algorithm how the ghost element will be cloned /\n @Prop() ghostClone: Function = (dragElement: HTMLElement) => {\n const [clonedElement] = cloneWrappedStzhElement(dragElement);\n return clonedElement;\n }\n\n /* Filtered elements that should prevent dragging inside the drag item elements /\n @Prop() filterElements: any[] \| string = [\n \"[data-stzh-sortable-filtered]\",\n \"[sortable-disabled]\",\n \"button\",\n \"a[href]\",\n \"input\",\n \"select\",\n \"textarea\",\n \"label\",\n \"iframe\",\n \"details\",\n \"area\",\n \"stzh-sortable\"\n ];\n\n private _filterElements: any[];\n\n @Element() element: HTMLStzhSortableElement;\n\n /* Serializes the sortable's item data-id's (dataIdAttr option) into an array of string /\n @Method()\n async toArray(): Promise<string[]> {\n return this.sortable.toArray();\n }\n\n /* Sorts the elements according to the array /\n @Method()\n async sort(order: String[], useAnimation: boolean = true) {\n return this.sortable.sort(order, useAnimation);\n }\n\n /* Move item /\n @Method()\n\tasync moveItem(item: HTMLElement, direction: \"up\" \| \"down\") {\n\t\tif (!item\n \|\| !item.nextElementSibling && direction === \"down\"\n \|\| !item.previousElementSibling && direction === \"up\"\n ) {\n\t\t\treturn;\n\t\t}\n\n this.resetItemOnBlur = false;\n\n if (direction === \"up\") {\n item.previousElementSibling.before(item);\n } else if (direction === \"down\") {\n item.nextElementSibling.after(item);\n }\n\n\t\tthis.updateAriaLive(this.localization.moved, item);\n this.focusItem(item);\n\n const currentIndex = Array.from(item.parentElement?.children).indexOf(item)\n\n this.stzhUpdate.emit({\n component: \"stzh-sortable\",\n data: await this.toArray(),\n item,\n newIndex: currentIndex,\n oldIndex: currentIndex + (direction === \"up\" ? 1 : -1)\n });\n\n this.resetItemOnBlur = true;\n\t}\n\n @Watch(\"disabled\")\n disabledWatcher(newValue: boolean) {\n if (newValue) {\n this.setAttributes();\n } else {\n this.unsetAttributes();\n }\n\n this.stzhDisable.emit({\n component: \"stzh-sortable\",\n disabled: newValue\n })\n }\n\n @Watch(\"filterElements\")\n filterElementsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._filterElements = JSON.parse(newValue);\n } else {\n this._filterElements = newValue;\n }\n }\n\n /* Update event /\n @Event() stzhUpdate: EventEmitter<StzhSortableUpdateEvent>;\n\n /* Disable event */\n @Event() stzhDisable: EventEmitter<StzhSortableDisableEvent>;\n\n private sortable: Sortable;\n private sortableId: string;\n private containerElement: HTMLElement;\n private ariaLiveElement: HTMLElement;\n private observer: MutationObserver;\n private selectedItem: HTMLElement = null;\n private resetItemOnBlur: boolean = false;\n private lastIndex: number;\n\n private getContainer(): HTMLElement {\n return typeof this.container === \"function\"\n ? this.container()\n : this.container;\n }\n\n\tprivate updateAriaLive(string: string, item: HTMLElement = this.selectedItem) {\n if (!this.getContainer()) {\n return;\n }\n\n\t\tif (item) {\n const title = item.getAttribute(\"aria-label\") \|\| \"\";\n const index = this.getIndexOfSelectedItem(item);\n\n string = string\n .replace(\"{title}\", title)\n .replace(\"{current}\", (index + 1).toString())\n\t\t}\n\n\t\tconst total = this.getContainer().children.length;\n\n string = string\n .replace(/\\{total\\}/gi, total.toString());\n\n this.ariaLiveElement.textContent = string;\n\t}\n\n\tprivate getIndexOfSelectedItem(item: HTMLElement = this.selectedItem) {\n\t\tif (item) {\n return Array.from(item.parentElement.children).indexOf(item);\n\t\t}\n\t}\n\n private resetActiveItem(moveToOriginalPosition: boolean = false) {\n\t\tif (!this.selectedItem) {\n return;\n }\n\n const currentIndex = this.getIndexOfSelectedItem();\n const container = this.selectedItem.parentElement;\n\n if (moveToOriginalPosition && this.lastIndex !== currentIndex) {\n if (this.lastIndex > currentIndex) {\n container.children[this.lastIndex].after(this.selectedItem);\n } else {\n container.children[this.lastIndex].before(this.selectedItem);\n }\n\n this.selectedItem.focus();\n }\n\n container.classList.remove(CLASS_PARENT_SELECTED);\n this.selectedItem.classList.remove(CLASS_SELECTED);\n this.selectedItem = null;\n this.lastIndex = null;\n\t}\n\n private focusItem(item: HTMLElement \| null) {\n if (!item) {\n return;\n }\n\n\t\titem.focus();\n\n const flyingfocusElement = document.querySelector('stzh-flyingfocus');\n if (flyingfocusElement) {\n flyingfocusElement.reposition();\n }\n\n scrollIntoView(item, {\n scrollMode: 'if-needed',\n block: 'nearest',\n inline: 'nearest'\n });\n }\n\n private setAttributes() {\n Array.from(this.getContainer().children).forEach((child) => {\n child.classList.add(CLASS_ITEM);\n\n child.addEventListener('blur', this.onBlur);\n child.addEventListener('keydown', this.onKeydown);\n\n child.setAttribute('tabindex', '0');\n child.setAttribute('aria-describedby', `${this.sortableId}-description`);\n });\n }\n\n private unsetAttributes() {\n Array.from(this.getContainer().children).forEach((child) => {\n child.classList.remove(CLASS_ITEM);\n\n child.removeEventListener('blur', this.onBlur);\n child.removeEventListener('keydown', this.onKeydown);\n\n child.removeAttribute('tabindex');\n child.removeAttribute('aria-describedby');\n });\n }\n\n private init = () => {\n if (!this.getContainer() \|\| this.disabled) {\n return;\n }\n\n this.setAttributes()\n }\n\n private updated = async (event?: any) => {\n let newIndex: number;\n let oldIndex: number;\n let item: HTMLElement;\n\n if (event) {\n newIndex = event.newIndex;\n oldIndex = event.oldIndex;\n item = event.item;\n } else {\n newIndex = this.getIndexOfSelectedItem();\n oldIndex = this.lastIndex;\n item = this.selectedItem;\n }\n\n if (newIndex !== oldIndex) {\n this.stzhUpdate.emit({\n component: \"stzh-sortable\",\n data: await this.toArray(),\n item,\n newIndex,\n oldIndex\n });\n }\n }\n\n private onKeydown = (event: KeyboardEvent) => {\n const currentTarget = event.currentTarget as HTMLElement;\n const target = event.target as HTMLElement;\n\n if (!this.getContainer() \|\| this.disabled \|\| currentTarget !== target) {\n return;\n }\n\n // const isFilteredElement = target.matches(this._filterElements.join(', '));\n // if (event.key === \" \" && !isFilteredElement) {\n\n if (event.key === \" \") {\n event.preventDefault();\n\n if (!this.selectedItem) {\n this.selectedItem = currentTarget;\n this.selectedItem.parentElement.classList.add(CLASS_PARENT_SELECTED);\n this.selectedItem.classList.add(CLASS_SELECTED);\n this.lastIndex = this.getIndexOfSelectedItem();\n this.resetItemOnBlur = true;\n this.updateAriaLive(this.localization.started);\n } else {\n this.resetItemOnBlur = false;\n this.updateAriaLive(this.localization.dropped);\n this.updated();\n this.resetActiveItem();\n }\n } else if (event.key === \"Tab\" && this.selectedItem && this.selectedItem === event.currentTarget) {\n event.preventDefault();\n } else if (event.key === \"Escape\" && this.selectedItem) {\n this.resetItemOnBlur = false;\n this.updateAriaLive(this.localization.canceled);\n this.resetActiveItem(true);\n } else if (event.key === \"ArrowUp\") {\n event.preventDefault();\n\n if (this.selectedItem) {\n this.moveItem(this.selectedItem, \"up\");\n } else {\n this.focusItem(currentTarget.previousElementSibling as HTMLElement);\n }\n } else if (event.key === \"ArrowDown\") {\n event.preventDefault();\n\n if (this.selectedItem) {\n this.moveItem(this.selectedItem, \"down\");\n } else {\n this.focusItem(currentTarget.nextElementSibling as HTMLElement);\n }\n }\n }\n\n private onBlur = () => {\n if (this.resetItemOnBlur) {\n this.resetItemOnBlur = false;\n this.updateAriaLive(this.localization.dropped);\n this.updated();\n this.resetActiveItem();\n }\n }\n\n async componentWillLoad() {\n this.sortableId = `stzh-sortable-${sortableCounter++}`;\n this.filterElementsWatcher(this.filterElements);\n\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, 'sortable');\n }\n }\n\n componentWillUpdate() {\n if (this.sortable) {\n this.sortable.destroy();\n this.sortable = null;\n }\n }\n\n componentDidRender() {\n if (this.sortable) {\n return;\n }\n\n // see available option in https://github.com/SortableJS/Sortable#options\n this.sortable = new Sortable(this.getContainer(), {\n animation: 150,\n filter: this._filterElements.join(', '),\n ghostClass: CLASS_GHOST,\n chosenClass: CLASS_CHOSEN,\n dragClass: CLASS_DRAG,\n dataIdAttr: this.dataIdAttribute,\n preventOnFilter: false,\n forceFallback: true,\n delay: 200,\n delayOnTouchOnly: true,\n disabled: this.disabled,\n ghostClone: this.ghostClone,\n // changed sorting within list\n onUpdate: this.updated\n });\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n this.unsetAttributes();\n\n if (this.sortable) {\n this.sortable.destroy();\n this.sortable = null;\n }\n }\n\n render() {\n const classes = {\n \"stzh-sortable\": true,\n \"stzh-sortable--disabled\": this.disabled\n };\n\n return (\n <Host>\n <div class={classes}>\n <div\n id={`${this.sortableId}-description`}\n class=\"stzh-sortable__description\"\n >\n {this.localization.description}\n </div>\n\n\t\t <div\n ref={(el) => (this.ariaLiveElement = el as HTMLDivElement)}\n aria-live=\"assertive\"\n class=\"stzh-sortable__aria-live\"\n ></div>\n\n <div\n ref={(el) => (this.containerElement = el as HTMLDivElement)}\n class=\"stzh-sortable__container\"\n >\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stzh-space/stzh-space.css CHANGED Viewed

@@ -103,12 +103,6 @@
   --space: var(--stzh-space-default);
   --around: 0;
   display: flex;
-  clear: both;
-}
-:host::after {
-  content: "";
-  display: table;
-  clear: both;
 }
 :host ::slotted(*) {
   max-width: 100%;

package/dist/collection/components/stzh-table/stzh-table.css CHANGED Viewed

@@ -127,6 +127,7 @@ stzh-table[disable-min-width]:not([disable-min-width=false]) {
 .stzh-table {
   /* Has sorted */
+  /* Showing list on mikro */
   /* Scroll left/right shadow variant */
 }
 .stzh-table__header {
@@ -203,6 +204,13 @@ stzh-table[disable-min-width]:not([disable-min-width=false]) {
   overflow-x: auto;
   max-height: var(--max-height);
 }
+.stzh-table__pagination-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+.stzh-table__pagination-wrapper:not(:empty) {
+  margin-top: var(--stzh-space-medium);
+}
 .stzh-table__sort-button {
   font-family: var(--stzh-font-family-heavy);
   font-weight: var(--stzh-font-weight-heavy);
@@ -374,6 +382,19 @@ td.has-sorted .stzh-table__sort-icon, th.has-sorted .stzh-table__sort-icon {
 td.has-sorted-desc .stzh-table__sort-icon, th.has-sorted-desc .stzh-table__sort-icon {
   transform: rotate(180deg);
 }
+.stzh-table.has-list .stzh-table__outer-wrapper {
+  display: none;
+}
+@media screen and (min-width: 600px) {
+  .stzh-table.has-list .stzh-table__outer-wrapper {
+    display: block;
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-table.has-list .stzh-table__list-wrapper {
+    display: none;
+  }
+}
 .stzh-table.has-scroll-left-shadow .stzh-table__outer-wrapper::before, .stzh-table.has-scroll-right-shadow .stzh-table__outer-wrapper::after {
   opacity: 1;
 }

package/dist/collection/components/stzh-table/stzh-table.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { setPropsIfNull } from "../../utils/utils";
+import { setPropsIfNull, hasSlot } from "../../utils/utils";
 const CLASS_HAS_STICKED = "has-sticked";
 const CLASS_IS_STICKY_LEFT = "is-sticky-left";
 const CLASS_IS_STICKY_RIGHT = "is-sticky-right";
@@ -8,6 +8,8 @@ const CLASS_IS_STICKY_RIGHT = "is-sticky-right";
  * @slot heading - Slot for `stzh-heading`
  * @slot search - Slot for search `stzh-input` element
  * @slot action-button - Slot for action `stzh-button` element
+ * @slot list - Slot for list element showing on mobile
+ * @slot pagination - Slot for action `stzh-pagination` element
  *
  * @prop --max-height: Maximum height of table
  * @prop --min-width: Minium width of table
@@ -133,15 +135,17 @@ export class StzhTable {
     }
   }
   render() {
+    const hasList = hasSlot(this.element, "list");
     const classes = {
       "stzh-table": true,
       "is-scrollable": this.isScrollable,
       "has-scroll-left": this.hasScrollLeft,
       "has-scroll-right": this.hasScrollRight,
       "has-scroll-left-shadow": this.hasScrollLeft && this.cellsStickyLeft.length === 0,
-      "has-scroll-right-shadow": this.hasScrollRight && this.cellsStickyRight.length === 0
+      "has-scroll-right-shadow": this.hasScrollRight && this.cellsStickyRight.length === 0,
+      "has-list": hasList,
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-table__header" }, h("div", { class: "stzh-table__heading" }, h("slot", { name: "heading" })), h("div", { class: "stzh-table__sub-header" }, h("div", { class: "stzh-table__search" }, h("slot", { name: "search" })), h("div", { class: "stzh-table__action-button" }, h("slot", { name: "action-button" })))), h("div", { class: "stzh-table__outer-wrapper" }, h("div", { ref: (el) => (this.tableWrapper = el), class: "stzh-table__wrapper", onScroll: this.handleScroll }, h("slot", null))))));
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-table__header" }, h("div", { class: "stzh-table__heading" }, h("slot", { name: "heading" })), h("div", { class: "stzh-table__sub-header" }, h("div", { class: "stzh-table__search" }, h("slot", { name: "search" })), h("div", { class: "stzh-table__action-button" }, h("slot", { name: "action-button" })))), h("div", { class: "stzh-table__outer-wrapper" }, h("div", { ref: (el) => (this.tableWrapper = el), class: "stzh-table__wrapper", onScroll: this.handleScroll }, h("slot", null))), h("div", { class: "stzh-table__list-wrapper" }, h("slot", { name: "list" })), h("div", { class: "stzh-table__pagination-wrapper" }, h("slot", { name: "pagination" })))));
   }
   static get is() { return "stzh-table"; }
   static get originalStyleUrls() {

package/dist/collection/components/stzh-table/stzh-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-table.js","sourceRoot":"","sources":["../../../src/components/stzh-table/stzh-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\nconst CLASS_HAS_STICKED = \"has-sticked\";\nconst CLASS_IS_STICKY_LEFT = \"is-sticky-left\";\nconst CLASS_IS_STICKY_RIGHT = \"is-sticky-right\";\n\n/*\n @slot - Slot for table element\n * @slot heading - Slot for `stzh-heading`\n * @slot search - Slot for search `stzh-input` element\n * @slot action-button - Slot for action `stzh-button` element\n \n @prop --max-height: Maximum height of table\n * @prop --min-width: Minium width of table\n * @prop --cell-padding: Cells padding\n /\n@Component({\n tag: \"stzh-table\",\n styleUrl: \"stzh-table.scss\"\n})\nexport class StzhTable {\n /* Columns that should be sticky on the left side (column indexes separated by comma) /\n @Prop() fixedLeft: number = null;\n\n /* Columns that should be sticky on the right side (column indexes separated by comma) /\n @Prop() fixedRight: number = null;\n\n /\n Whether to disable min-width of the table.\n \n If `false`, the default `min-width` is `700px`\n * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n \n You can also overwrite the min-width via CSS with the custom property `--min-width`.\n */\n @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n @State() hasScrollLeft: boolean = false;\n @State() hasScrollRight: boolean = false;\n @State() isScrollable: boolean = false;\n @State() cellsStickyLeft: number[] = [];\n @State() cellsStickyRight: number[] = [];\n\n @Element() element: HTMLStzhTableElement;\n\n @Watch(\"fixedLeft\")\n @Watch(\"fixedRight\")\n fixedCellWatcher() {\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n private tableWrapper: HTMLDivElement;\n private observer: MutationObserver;\n private debounceScroll: number;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private updateCellClasses = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index) => {\n cell.classList.remove(CLASS_IS_STICKY_LEFT);\n cell.classList.remove(CLASS_IS_STICKY_RIGHT);\n\n if (index === this.fixedLeft) {\n cell.classList.add(CLASS_IS_STICKY_LEFT);\n }\n\n if (index === this.fixedRight) {\n cell.classList.add(CLASS_IS_STICKY_RIGHT);\n }\n });\n });\n }\n\n private updateScrollStates = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n this.hasScrollLeft = wrapperScrollLeft > 0;\n this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n const firstRow = rows[0];\n\n if (!firstRow) {\n return;\n }\n\n this.cellsStickyLeft = [];\n this.cellsStickyRight = [];\n const cells: Element[] = Array.from(firstRow.children);\n\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n const offsetLeft = cell.offsetLeft;\n const offsetRight = offsetLeft + cell.offsetWidth;\n\n if (\n this.hasScrollLeft\n && index === this.fixedLeft\n && Math.ceil(wrapperScrollLeft) >= offsetLeft\n ) {\n this.cellsStickyLeft.push(index);\n }\n\n if (\n this.hasScrollRight\n && index === this.fixedRight\n && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n ) {\n this.cellsStickyRight.push(index);\n }\n });\n\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n if (\n this.cellsStickyLeft.indexOf(index) > -1\n \|\| this.cellsStickyRight.indexOf(index) > -1\n ) {\n cell.classList.add(CLASS_HAS_STICKED);\n } else {\n cell.classList.remove(CLASS_HAS_STICKED);\n }\n });\n });\n }\n\n private init = () => {\n const searchInput = this.element.querySelector(\n 'stzh-input[slot=\"search\"], [slot=\"search\"] stzh-input'\n );\n\n if (searchInput) {\n setPropsIfNull(searchInput, {\n size: \"small\"\n } as HTMLStzhInputElement)\n }\n\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-table\": true,\n \"is-scrollable\": this.isScrollable,\n \"has-scroll-left\": this.hasScrollLeft,\n \"has-scroll-right\": this.hasScrollRight,\n \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-table__header\">\n <div class=\"stzh-table__heading\">\n <slot name=\"heading\"></slot>\n </div> \n <div class=\"stzh-table__sub-header\">\n <div class=\"stzh-table__search\">\n <slot name=\"search\"></slot>\n </div>\n <div class=\"stzh-table__action-button\">\n <slot name=\"action-button\"></slot>\n </div>\n </div>\n </div>\n <div class=\"stzh-table__outer-wrapper\">\n <div\n ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n class=\"stzh-table__wrapper\"\n onScroll={this.handleScroll}\n >\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-table.js","sourceRoot":"","sources":["../../../src/components/stzh-table/stzh-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport { setPropsIfNull, hasSlot } from \"../../utils/utils\";\n\nconst CLASS_HAS_STICKED = \"has-sticked\";\nconst CLASS_IS_STICKY_LEFT = \"is-sticky-left\";\nconst CLASS_IS_STICKY_RIGHT = \"is-sticky-right\";\n\n/*\n @slot - Slot for table element\n * @slot heading - Slot for `stzh-heading`\n * @slot search - Slot for search `stzh-input` element\n * @slot action-button - Slot for action `stzh-button` element\n * @slot list - Slot for list element showing on mobile\n * @slot pagination - Slot for action `stzh-pagination` element\n \n @prop --max-height: Maximum height of table\n * @prop --min-width: Minium width of table\n * @prop --cell-padding: Cells padding\n /\n@Component({\n tag: \"stzh-table\",\n styleUrl: \"stzh-table.scss\"\n})\nexport class StzhTable {\n /* Columns that should be sticky on the left side (column indexes separated by comma) /\n @Prop() fixedLeft: number = null;\n\n /* Columns that should be sticky on the right side (column indexes separated by comma) /\n @Prop() fixedRight: number = null;\n\n /\n Whether to disable min-width of the table.\n \n If `false`, the default `min-width` is `700px`\n * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n \n You can also overwrite the min-width via CSS with the custom property `--min-width`.\n */\n @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n @State() hasScrollLeft: boolean = false;\n @State() hasScrollRight: boolean = false;\n @State() isScrollable: boolean = false;\n @State() cellsStickyLeft: number[] = [];\n @State() cellsStickyRight: number[] = [];\n\n @Element() element: HTMLStzhTableElement;\n\n @Watch(\"fixedLeft\")\n @Watch(\"fixedRight\")\n fixedCellWatcher() {\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n private tableWrapper: HTMLDivElement;\n private observer: MutationObserver;\n private debounceScroll: number;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private updateCellClasses = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index) => {\n cell.classList.remove(CLASS_IS_STICKY_LEFT);\n cell.classList.remove(CLASS_IS_STICKY_RIGHT);\n\n if (index === this.fixedLeft) {\n cell.classList.add(CLASS_IS_STICKY_LEFT);\n }\n\n if (index === this.fixedRight) {\n cell.classList.add(CLASS_IS_STICKY_RIGHT);\n }\n });\n });\n }\n\n private updateScrollStates = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n this.hasScrollLeft = wrapperScrollLeft > 0;\n this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n const firstRow = rows[0];\n\n if (!firstRow) {\n return;\n }\n\n this.cellsStickyLeft = [];\n this.cellsStickyRight = [];\n const cells: Element[] = Array.from(firstRow.children);\n\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n const offsetLeft = cell.offsetLeft;\n const offsetRight = offsetLeft + cell.offsetWidth;\n\n if (\n this.hasScrollLeft\n && index === this.fixedLeft\n && Math.ceil(wrapperScrollLeft) >= offsetLeft\n ) {\n this.cellsStickyLeft.push(index);\n }\n\n if (\n this.hasScrollRight\n && index === this.fixedRight\n && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n ) {\n this.cellsStickyRight.push(index);\n }\n });\n\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n if (\n this.cellsStickyLeft.indexOf(index) > -1\n \|\| this.cellsStickyRight.indexOf(index) > -1\n ) {\n cell.classList.add(CLASS_HAS_STICKED);\n } else {\n cell.classList.remove(CLASS_HAS_STICKED);\n }\n });\n });\n }\n\n private init = () => {\n const searchInput = this.element.querySelector(\n 'stzh-input[slot=\"search\"], [slot=\"search\"] stzh-input'\n );\n\n if (searchInput) {\n setPropsIfNull(searchInput, {\n size: \"small\"\n } as HTMLStzhInputElement)\n }\n\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const hasList = hasSlot(this.element, \"list\");\n\n const classes = {\n \"stzh-table\": true,\n \"is-scrollable\": this.isScrollable,\n \"has-scroll-left\": this.hasScrollLeft,\n \"has-scroll-right\": this.hasScrollRight,\n \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0,\n \"has-list\": hasList,\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-table__header\">\n <div class=\"stzh-table__heading\">\n <slot name=\"heading\"></slot>\n </div>\n <div class=\"stzh-table__sub-header\">\n <div class=\"stzh-table__search\">\n <slot name=\"search\"></slot>\n </div>\n <div class=\"stzh-table__action-button\">\n <slot name=\"action-button\"></slot>\n </div>\n </div>\n </div>\n <div class=\"stzh-table__outer-wrapper\">\n <div\n ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n class=\"stzh-table__wrapper\"\n onScroll={this.handleScroll}\n >\n <slot></slot>\n </div>\n </div>\n <div class=\"stzh-table__list-wrapper\">\n <slot name=\"list\"></slot>\n </div>\n <div class=\"stzh-table__pagination-wrapper\">\n <slot name=\"pagination\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}