@oiz/stzh-components 2.11.0-beta1 → 2.11.0

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

@@ -55,7 +55,7 @@ export class StzhShow {
           "text": "Mikro"
         },
         "attribute": "mikro",
-        "reflect": false
+        "reflect": true
       },
       "small": {
         "type": "boolean",
@@ -72,7 +72,7 @@ export class StzhShow {
           "text": "Small"
         },
         "attribute": "small",
-        "reflect": false
+        "reflect": true
       },
       "medium": {
         "type": "boolean",
@@ -89,7 +89,7 @@ export class StzhShow {
           "text": "Medium"
         },
         "attribute": "medium",
-        "reflect": false
+        "reflect": true
       },
       "large": {
         "type": "boolean",
@@ -106,7 +106,7 @@ export class StzhShow {
           "text": "Large"
         },
         "attribute": "large",
-        "reflect": false
+        "reflect": true
       },
       "ultra": {
         "type": "boolean",
@@ -123,7 +123,7 @@ export class StzhShow {
           "text": "Ultra"
         },
         "attribute": "ultra",
-        "reflect": false
+        "reflect": true
       },
       "hideFromDate": {
         "type": "string",

package/dist/collection/components/stzh-show/stzh-show.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-show.js","sourceRoot":"","sources":["../../../../src/components/stzh-show/stzh-show.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,EACJ,KAAK,EACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD;;GAEG;AAMH,MAAM,OAAO,QAAQ;;;;;;;;;EAqBnB,mBAAmB,CAAC,QAAuB;IACzC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;KAC7C;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;EACH,CAAC;EAID,iBAAiB;IACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EAC9C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,MAAM,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,GAAG,EAAE,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;MAC5E,eAAa,CACR,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 { parseISODate } from \"../../utils/date-utils\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-show\",\n  styleUrl: \"stzh-show.scss\",\n  shadow: true\n})\nexport class StzhShow {\n  /** Mikro */\n  @Prop() mikro: boolean;\n\n  /** Small */\n  @Prop() small: boolean;\n\n  /** Medium */\n  @Prop() medium: boolean;\n\n  /** Large */\n  @Prop() large: boolean;\n\n  /** Ultra */\n  @Prop() ultra: boolean;\n\n  /** Hide from date */\n  @Prop() hideFromDate: Date | string;\n  private _hideFromDate: Date;\n\n  @Watch(\"hideFromDate\")\n  hideFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._hideFromDate = parseISODate(newValue);\n    } else {\n      this._hideFromDate = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShowElement;\n\n  componentWillLoad() {\n    this.hideFromDateWatcher(this.hideFromDate);\n  }\n\n  render() {\n    return (\n      <Host hidden={this._hideFromDate && Date.now() >= this._hideFromDate.getTime()}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-show.js","sourceRoot":"","sources":["../../../../src/components/stzh-show/stzh-show.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,EACJ,KAAK,EACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD;;GAEG;AAMH,MAAM,OAAO,QAAQ;;;;;;;;;EAqBnB,mBAAmB,CAAC,QAAuB;IACzC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;KAC7C;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;EACH,CAAC;EAID,iBAAiB;IACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EAC9C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,MAAM,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,GAAG,EAAE,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;MAC5E,eAAa,CACR,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 { parseISODate } from \"../../utils/date-utils\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-show\",\n  styleUrl: \"stzh-show.scss\",\n  shadow: true\n})\nexport class StzhShow {\n  /** Mikro */\n  @Prop({ reflect: true }) mikro: boolean;\n\n  /** Small */\n  @Prop({ reflect: true }) small: boolean;\n\n  /** Medium */\n  @Prop({ reflect: true }) medium: boolean;\n\n  /** Large */\n  @Prop({ reflect: true }) large: boolean;\n\n  /** Ultra */\n  @Prop({ reflect: true }) ultra: boolean;\n\n  /** Hide from date */\n  @Prop() hideFromDate: Date | string;\n  private _hideFromDate: Date;\n\n  @Watch(\"hideFromDate\")\n  hideFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._hideFromDate = parseISODate(newValue);\n    } else {\n      this._hideFromDate = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShowElement;\n\n  componentWillLoad() {\n    this.hideFromDateWatcher(this.hideFromDate);\n  }\n\n  render() {\n    return (\n      <Host hidden={this._hideFromDate && Date.now() >= this._hideFromDate.getTime()}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -5,11 +5,11 @@ import { Host, h, } from "@stencil/core";
 export class StzhSpace {
   constructor() {
     this.curve = "none";
-    this.size = "inherit";
-    this.sizeSmall = "inherit";
-    this.sizeMedium = "inherit";
-    this.sizeLarge = "inherit";
-    this.sizeUltra = "inherit";
+    this.size = undefined;
+    this.sizeSmall = undefined;
+    this.sizeMedium = undefined;
+    this.sizeLarge = undefined;
+    this.sizeUltra = undefined;
     this.justify = "start";
     this.items = "start";
     this.around = false;
@@ -58,7 +58,7 @@ export class StzhSpace {
           "text": "Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info)."
         },
         "attribute": "curve",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "\"none\""
       },
       "size": {
@@ -82,8 +82,7 @@ export class StzhSpace {
           "text": "Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info)."
         },
         "attribute": "size",
-        "reflect": false,
-        "defaultValue": "\"inherit\""
+        "reflect": true
       },
       "sizeSmall": {
         "type": "string",
@@ -106,8 +105,7 @@ export class StzhSpace {
           "text": "Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info)."
         },
         "attribute": "size-small",
-        "reflect": false,
-        "defaultValue": "\"inherit\""
+        "reflect": true
       },
       "sizeMedium": {
         "type": "string",
@@ -130,8 +128,7 @@ export class StzhSpace {
           "text": "Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info)."
         },
         "attribute": "size-medium",
-        "reflect": false,
-        "defaultValue": "\"inherit\""
+        "reflect": true
       },
       "sizeLarge": {
         "type": "string",
@@ -154,8 +151,7 @@ export class StzhSpace {
           "text": "Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info)."
         },
         "attribute": "size-large",
-        "reflect": false,
-        "defaultValue": "\"inherit\""
+        "reflect": true
       },
       "sizeUltra": {
         "type": "string",
@@ -178,8 +174,7 @@ export class StzhSpace {
           "text": "Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info)."
         },
         "attribute": "size-ultra",
-        "reflect": false,
-        "defaultValue": "\"inherit\""
+        "reflect": true
       },
       "justify": {
         "type": "string",
@@ -202,7 +197,7 @@ export class StzhSpace {
           "text": "Alignment"
         },
         "attribute": "justify",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "\"start\""
       },
       "items": {
@@ -226,7 +221,7 @@ export class StzhSpace {
           "text": "Control how cells items are positioned along a container's cross axis"
         },
         "attribute": "items",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "\"start\""
       },
       "around": {

package/dist/collection/components/stzh-space/stzh-space.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-space.js","sourceRoot":"","sources":["../../../../src/components/stzh-space/stzh-space.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAIvB;;GAEG;AAMH,MAAM,OAAO,SAAS;;iBAEU,MAAM;gBAGR,SAAS;qBAEJ,SAAS;sBAER,SAAS;qBAEV,SAAS;qBAET,SAAS;mBAGR,OAAO;iBAGX,OAAO;kBAGM,KAAK;kBAG8D,MAAM;;EAEpH,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,YAAY,EAAE,IAAI;UAClB,uBAAuB,EAAE,IAAI,CAAC,MAAM;UACpC,CAAC,uBAAuB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;UACvD,CAAC,qBAAqB,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;SAClD;QAED,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-space\",\n  styleUrl: \"stzh-space.scss\",\n  shadow: true\n})\nexport class StzhSpace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop() curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() size: Space.Sizes = \"inherit\";\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeSmall: Space.Sizes = \"inherit\";\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeMedium: Space.Sizes = \"inherit\";\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeLarge: Space.Sizes = \"inherit\";\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeUltra: Space.Sizes = \"inherit\";\n\n    /** Alignment */\n  @Prop() justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop() items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | \"left-right\" | \"top-bottom\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-space\": true,\n            'stzh-space--is-around': this.around,\n            [`stzh-space--justify-${this.justify}`]: !!this.justify,\n            [`stzh-space--items-${this.items}`]: !!this.items\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-space.js","sourceRoot":"","sources":["../../../../src/components/stzh-space/stzh-space.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAIvB;;GAEG;AAMH,MAAM,OAAO,SAAS;;iBAE2B,MAAM;;;;;;mBAcF,OAAO;iBAGX,OAAO;kBAGX,KAAK;kBAG8D,MAAM;;EAEpH,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,YAAY,EAAE,IAAI;UAClB,uBAAuB,EAAE,IAAI,CAAC,MAAM;UACpC,CAAC,uBAAuB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;UACvD,CAAC,qBAAqB,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;SAClD;QAED,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-space\",\n  styleUrl: \"stzh-space.scss\",\n  shadow: true\n})\nexport class StzhSpace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) size: Space.Sizes;\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeSmall: Space.Sizes;\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeMedium: Space.Sizes;\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeLarge: Space.Sizes;\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeUltra: Space.Sizes;\n\n    /** Alignment */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | \"left-right\" | \"top-bottom\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-space\": true,\n            'stzh-space--is-around': this.around,\n            [`stzh-space--justify-${this.justify}`]: !!this.justify,\n            [`stzh-space--items-${this.items}`]: !!this.items\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -124,28 +124,30 @@
 */
 :host {
   --padding: var(--stzh-space-large) 0;
-  position: -webkit-sticky;
-  position: sticky;
-  top: -0.0625rem;
-  bottom: -0.0625rem;
+  display: contents;
 }
 @media print {
   :host {
     display: none;
   }
 }
-:host[disable-sticky-top]:not([disable-sticky-top=false]) {
-  top: auto;
-}
-:host[disable-sticky-bottom]:not([disable-sticky-bottom=false]) {
-  bottom: auto;
-}
 
 .stzh-sticky {
+  display: contents;
+  /* Position sticky variant */
+}
+.stzh-sticky__sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  top: -0.0625rem;
+  bottom: -0.0625rem;
+  z-index: var(--stzh-z-index-sticky);
+}
+.stzh-sticky__content {
   position: relative;
   padding: var(--padding);
 }
-.stzh-sticky::before, .stzh-sticky::after {
+.stzh-sticky__content::before, .stzh-sticky__content::after {
   content: "";
   pointer-events: none;
   display: block;
@@ -156,26 +158,35 @@
   opacity: 0;
   transition: opacity var(--stzh-base-transition-animation-speed);
 }
-.stzh-sticky::before {
+.stzh-sticky__content::before {
   background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
   top: 0;
   transform: translateY(-100%);
 }
-.stzh-sticky::after {
+.stzh-sticky__content::after {
   background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
   bottom: 0;
   transform: translateY(100%);
 }
-.stzh-sticky--is-stuck {
+.stzh-sticky__spacer {
+  display: none;
+}
+.stzh-sticky--is-disabled-sticky-top .stzh-sticky__sticky {
+  top: auto;
+}
+.stzh-sticky--is-disabled-sticky-bottom .stzh-sticky__sticky {
+  bottom: auto;
+}
+.stzh-sticky--is-stuck .stzh-sticky__content {
   background-color: var(--stzh-color-white);
 }
-.stzh-sticky--is-stuck-bottom::before {
+.stzh-sticky--is-stuck-bottom .stzh-sticky__content::before {
   opacity: 1;
 }
-.stzh-sticky--is-stuck-top::after {
+.stzh-sticky--is-stuck-top .stzh-sticky__content::after {
   opacity: 1;
 }
-.stzh-sticky--is-breakout {
+.stzh-sticky--is-breakout .stzh-sticky__content {
   position: relative;
   left: 50%;
   right: 50%;

package/dist/collection/components/stzh-sticky/stzh-sticky.e2e.js

@@ -3,6 +3,7 @@ import { visualDiff } from "../../../.build/test/utils";
 const URL = "components-sticky";
 const STORIES = [
   "default",
+  "nested-fixed",
 ];
 test.describe("sticky", () => {
   STORIES.forEach((storyId) => {

package/dist/collection/components/stzh-sticky/stzh-sticky.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-sticky.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-sticky/stzh-sticky.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,mBAAmB,CAAC;AAEhC,MAAM,OAAO,GAAG;EACd,SAAS;CACV,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;EAC3B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;QACR,QAAQ,EAAE,KAAK;OAChB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-sticky\";\n\nconst STORIES = [\n  \"default\",\n];\n\ntest.describe(\"sticky\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL,\n        fullPage: false\n      });\n    });\n  });\n});\n"]}
+{"version":3,"file":"stzh-sticky.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-sticky/stzh-sticky.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,mBAAmB,CAAC;AAEhC,MAAM,OAAO,GAAG;EACd,SAAS;EACT,cAAc;CACf,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;EAC3B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;QACR,QAAQ,EAAE,KAAK;OAChB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-sticky\";\n\nconst STORIES = [\n  \"default\",\n  \"nested-fixed\",\n];\n\ntest.describe(\"sticky\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL,\n        fullPage: false\n      });\n    });\n  });\n});\n"]}

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

@@ -1,22 +1,107 @@
 import { Host, h } from "@stencil/core";
+import { isVisible, offset } from "../../utils/utils";
 /**
  *
  */
 export class StzhSticky {
   constructor() {
-    this.observe = ([entry]) => {
-      this.updateStuck(entry.target);
+    this.fixedHeight = 0;
+    this.fixedWidth = 0;
+    this.fixedLimit = null;
+    this.handleScroll = () => {
+      if (this.debounceScroll) {
+        window.cancelAnimationFrame(this.debounceScroll);
+      }
+      this.debounceScroll = requestAnimationFrame(this.updateFixedByScroll);
+    };
+    this.handleResize = () => {
+      if (this.debounceResize) {
+        window.cancelAnimationFrame(this.debounceResize);
+      }
+      this.debounceResize = requestAnimationFrame(this.updateFixedByResize);
+    };
+    this.updateFixedByScroll = () => {
+      if (!isVisible(this.stickyElement)) {
+        return;
+      }
+      this.scrollX = window.scrollX;
+      this.scrollY = window.scrollY;
+      this.fixedLimit = this.getFixedLimit();
+      if (this.isStuckTop || this.isStuckBottom) {
+        const off = offset(this.spacerElement);
+        this.fixedTop = off.top;
+        this.fixedLeft = off.left;
+      }
+      else {
+        const off = offset(this.stickyElement);
+        this.fixedTop = off.top;
+        this.fixedLeft = off.left;
+      }
+      // console.log(
+      //   this.scrollX,
+      //   this.scrollY,
+      //   this.windowHeight, 
+      //   this.fixedTop,
+      //   this.fixedLeft,
+      //   this.fixedHeight,
+      //   this.fixedLimit,
+      // );
+      this.isStuckBottom = !this.disableStickyBottom
+        && this.scrollY + this.windowHeight <= this.fixedTop + this.fixedHeight;
+      this.isStuckTop = !this.disableStickyTop
+        && this.scrollY >= this.fixedTop;
+      this.hasReachedTopLimit = this.fixedLimit
+        && this.scrollY + this.windowHeight - this.fixedHeight <= this.fixedLimit.top;
+      this.hasReachedBottomLimit = this.fixedLimit
+        && this.scrollY >= this.fixedLimit.bottom - this.fixedHeight;
+      // console.log(
+      //   this.isStuckBottom,
+      //   this.isStuckTop,
+      //   this.hasReachedBottomLimit,
+      //   this.hasReachedTopLimit,
+      // );
+      if (this.isStuckTop || this.isStuckBottom) {
+        this.setFixed();
+      }
+      else {
+        this.setUnfixed();
+      }
+    };
+    this.updateFixedByResize = () => {
+      // reset sticky so we can read current offsets
+      this.setUnfixed();
+      this.stickyElement.style.position = "static";
+      this.isStuckTop = false;
+      this.isStuckBottom = false;
+      if (isVisible(this.stickyElement)) {
+        this.windowHeight = window.innerHeight;
+        this.fixedHeight = this.stickyElement.offsetHeight;
+        this.fixedWidth = this.stickyElement.offsetWidth;
+        this.spacerElement.style.height = `${this.fixedHeight}px`;
+        this.updateFixedByScroll();
+      }
+    };
+    this.observe = () => {
+      this.updateStuck();
     };
     this.disableStickyTop = false;
     this.disableStickyBottom = false;
     this.breakout = false;
+    this.position = "sticky";
     this.isStuckTop = false;
     this.isStuckBottom = false;
+    this.hasReachedTopLimit = false;
+    this.hasReachedBottomLimit = false;
   }
   disableStickyWatcher() {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        this.updateStuck(this.element);
+        if (this.position === "fixed") {
+          this.updateFixedByResize();
+        }
+        else {
+          this.updateStuck();
+        }
       });
     });
   }
@@ -32,10 +117,28 @@ export class StzhSticky {
       sticky: newValue
     });
   }
-  updateStuck(element) {
-    const topCss = parseInt(getComputedStyle(element).top, 10);
-    const bottomCss = parseInt(getComputedStyle(element).bottom, 10);
-    const rect = element.getBoundingClientRect();
+  positionWatcher(newValue) {
+    if (newValue === "fixed") {
+      if (this.observer) {
+        this.observer.disconnect();
+      }
+      window.addEventListener("scroll", this.handleScroll, { passive: true });
+      window.addEventListener("resize", this.handleResize);
+      this.updateFixedByResize();
+    }
+    else {
+      window.removeEventListener("scroll", this.handleScroll);
+      window.removeEventListener("resize", this.handleResize);
+      this.setUnfixed();
+      this.observer = new IntersectionObserver(this.observe, { threshold: [1] });
+      this.observer.observe(this.stickyElement);
+      this.updateStuck();
+    }
+  }
+  updateStuck() {
+    const topCss = parseInt(getComputedStyle(this.stickyElement).top, 10);
+    const bottomCss = parseInt(getComputedStyle(this.stickyElement).bottom, 10);
+    const rect = this.stickyElement.getBoundingClientRect();
     if (topCss) {
       this.isStuckTop = rect.top < 0;
     }
@@ -49,24 +152,70 @@ export class StzhSticky {
       this.isStuckBottom = false;
     }
   }
-  connectedCallback() {
-    this.observer = new IntersectionObserver(this.observe, { threshold: [1] });
-    this.observer.observe(this.element);
+  getFixedLimit() {
+    const stickyContainer = this.element.closest("[data-stzh-sticky-container]");
+    if (!stickyContainer) {
+      return null;
+    }
+    const off = offset(stickyContainer);
+    return {
+      top: off.top,
+      bottom: off.top + stickyContainer.scrollHeight,
+    };
+  }
+  setUnfixed() {
+    Object.assign(this.stickyElement.style, {
+      position: null,
+      top: null,
+      bottom: null,
+      left: null,
+      width: null,
+    });
+    Object.assign(this.spacerElement.style, {
+      display: "none",
+    });
+  }
+  setFixed() {
+    const position = (this.hasReachedTopLimit || this.hasReachedBottomLimit)
+      ? "absolute"
+      : "fixed";
+    Object.assign(this.stickyElement.style, {
+      position,
+      top: position === "absolute"
+        ? `${this.isStuckTop ? this.fixedLimit.bottom - this.fixedHeight : this.fixedLimit.top}px`
+        : this.isStuckTop ? "0px" : "auto",
+      bottom: this.isStuckTop || position === "absolute"
+        ? "auto" : "0px",
+      left: `${this.fixedLeft + (position === "fixed" ? this.scrollX : 0)}px`,
+      width: `${this.fixedWidth}px`,
+    });
+    Object.assign(this.spacerElement.style, {
+      display: "block",
+    });
+  }
+  componentDidLoad() {
+    this.positionWatcher(this.position);
   }
   disconnectedCallback() {
     if (this.observer) {
       this.observer.disconnect();
     }
+    window.removeEventListener("scroll", this.handleScroll);
+    window.removeEventListener("resize", this.handleResize);
   }
   render() {
+    const isStuck = this.isStuckTop || this.isStuckBottom;
     const classes = {
       "stzh-sticky": true,
-      "stzh-sticky--is-stuck": this.isStuckTop || this.isStuckBottom,
+      "stzh-sticky--is-stuck": isStuck,
       "stzh-sticky--is-stuck-top": this.isStuckTop,
       "stzh-sticky--is-stuck-bottom": this.isStuckBottom,
-      "stzh-sticky--is-breakout": this.breakout
+      "stzh-sticky--is-breakout": this.breakout,
+      "stzh-sticky--is-disabled-sticky-top": this.disableStickyTop,
+      "stzh-sticky--is-disabled-sticky-bottom": this.disableStickyBottom,
+      [`stzh-sticky--position-${this.position}`]: !!this.position,
     };
-    return (h(Host, { "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, h("div", { class: classes }, h("slot", null))));
+    return (h(Host, { "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, h("div", { class: classes }, h("div", { ref: (el) => (this.spacerElement = el), class: "stzh-sticky__spacer" }), h("div", { ref: (el) => (this.stickyElement = el), class: "stzh-sticky__sticky" }, h("div", { class: "stzh-sticky__content" }, h("slot", null))))));
   }
   static get is() { return "stzh-sticky"; }
   static get encapsulation() { return "scoped"; }
@@ -135,13 +284,33 @@ export class StzhSticky {
         "attribute": "breakout",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"sticky\" |\u00A0\"fixed\"",
+          "resolved": "\"fixed\" | \"sticky\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Position type used.\n\n- sticky: used only css position sticky\n- fixed: uses position fixed with js for positioning (`data-stzh-sticky-container` can be used on a container element to limit sticky position)"
+        },
+        "attribute": "position",
+        "reflect": true,
+        "defaultValue": "\"sticky\""
       }
     };
   }
   static get states() {
     return {
       "isStuckTop": {},
-      "isStuckBottom": {}
+      "isStuckBottom": {},
+      "hasReachedTopLimit": {},
+      "hasReachedBottomLimit": {}
     };
   }
   static get events() {
@@ -203,6 +372,9 @@ export class StzhSticky {
       }, {
         "propName": "isStuckBottom",
         "methodName": "isStuckBottomWatcher"
+      }, {
+        "propName": "position",
+        "methodName": "positionWatcher"
       }];
   }
 }

package/dist/collection/components/stzh-sticky/stzh-sticky.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-sticky.js","sourceRoot":"","sources":["../../../../src/components/stzh-sticky/stzh-sticky.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Watch,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhStickyStuckTopEvent,\n  StzhStickyStuckBottomEvent\n} from \"../../index\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-sticky\",\n  styleUrl: \"stzh-sticky.scss\",\n  scoped: true\n})\nexport class StzhSticky {\n  /** Whether to disable sticking to top */\n  @Prop({ reflect: true }) disableStickyTop: boolean = false;\n\n  /** Whether to disable sticking to bottom */\n  @Prop({ reflect: true }) disableStickyBottom: boolean = false;\n\n  /** Whether to breakout container */\n  @Prop({ reflect: true }) breakout: boolean = false;\n\n  @Watch(\"disableStickyTop\")\n  @Watch(\"disableStickyBottom\")\n  disableStickyWatcher() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        this.updateStuck(this.element);\n      });\n    });\n  }\n\n  @Element() element: HTMLStzhStickyElement;\n\n  @State() isStuckTop: boolean = false;\n  @State() isStuckBottom: boolean = false;\n\n  @Watch(\"isStuckTop\")\n  isStuckTopWatcher(newValue: boolean) {\n    this.stzhStuckTop.emit({\n      component: \"stzh-sticky\",\n      sticky: newValue\n    });\n  }\n\n  @Watch(\"isStuckBottom\")\n  isStuckBottomWatcher(newValue: boolean) {\n    this.stzhStuckBottom.emit({\n      component: \"stzh-sticky\",\n      sticky: newValue\n    });\n  }\n\n  /** Sticky stuck top event */\n  @Event() stzhStuckTop: EventEmitter<StzhStickyStuckTopEvent>;\n\n  /** Sticky stuck bottom event */\n  @Event() stzhStuckBottom: EventEmitter<StzhStickyStuckBottomEvent>;\n\n  private observer: IntersectionObserver;\n\n  private updateStuck(element: HTMLElement) {\n    const topCss = parseInt(getComputedStyle(element).top, 10);\n    const bottomCss = parseInt(getComputedStyle(element).bottom, 10);\n    const rect = element.getBoundingClientRect();\n\n    if (topCss) {\n      this.isStuckTop = rect.top < 0;\n    } else {\n      this.isStuckTop = false;\n    }\n\n    if (bottomCss) {\n      this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;\n    } else {\n      this.isStuckBottom = false;\n    }\n  }\n\n  private observe = ([entry]) => {\n    this.updateStuck(entry.target);\n  };\n\n  connectedCallback() {\n    this.observer = new IntersectionObserver(this.observe, { threshold: [1] });\n    this.observer.observe(this.element)\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-sticky\": true,\n      \"stzh-sticky--is-stuck\": this.isStuckTop || this.isStuckBottom,\n      \"stzh-sticky--is-stuck-top\": this.isStuckTop,\n      \"stzh-sticky--is-stuck-bottom\": this.isStuckBottom,\n      \"stzh-sticky--is-breakout\": this.breakout\n    };\n\n    return (\n      <Host\n        is-stuck={this.isStuckTop || this.isStuckBottom}\n        is-stuck-top={this.isStuckTop}\n        is-stuck-bottom={this.isStuckBottom}\n      >\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-sticky.js","sourceRoot":"","sources":["../../../../src/components/stzh-sticky/stzh-sticky.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Watch,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhStickyStuckTopEvent,\n  StzhStickyStuckBottomEvent\n} from \"../../index\";\n\nimport { isVisible, offset } from \"../../utils/utils\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-sticky\",\n  styleUrl: \"stzh-sticky.scss\",\n  scoped: true\n})\nexport class StzhSticky {\n  /** Whether to disable sticking to top */\n  @Prop({ reflect: true }) disableStickyTop: boolean = false;\n\n  /** Whether to disable sticking to bottom */\n  @Prop({ reflect: true }) disableStickyBottom: boolean = false;\n\n  /** Whether to breakout container */\n  @Prop({ reflect: true }) breakout: boolean = false;\n\n  /**\n   * Position type used.\n   *\n   * - sticky: used only css position sticky\n   * - fixed: uses position fixed with js for positioning (`data-stzh-sticky-container` can be used on a container element to limit sticky position)\n   */\n  @Prop({ reflect: true }) position: \"sticky\" | \"fixed\" = \"sticky\";\n\n  @Watch(\"disableStickyTop\")\n  @Watch(\"disableStickyBottom\")\n  disableStickyWatcher() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (this.position === \"fixed\") {\n          this.updateFixedByResize();\n        } else {\n          this.updateStuck();\n        }\n      });\n    });\n  }\n\n  @Element() element: HTMLStzhStickyElement;\n\n  @State() isStuckTop: boolean = false;\n  @State() isStuckBottom: boolean = false;\n\n  @State() hasReachedTopLimit: boolean = false;\n  @State() hasReachedBottomLimit: boolean = false;\n\n  @Watch(\"isStuckTop\")\n  isStuckTopWatcher(newValue: boolean) {\n    this.stzhStuckTop.emit({\n      component: \"stzh-sticky\",\n      sticky: newValue\n    });\n  }\n\n  @Watch(\"isStuckBottom\")\n  isStuckBottomWatcher(newValue: boolean) {\n    this.stzhStuckBottom.emit({\n      component: \"stzh-sticky\",\n      sticky: newValue\n    });\n  }\n\n  @Watch(\"position\")\n  positionWatcher(newValue: string) {\n    if (newValue === \"fixed\") {\n      if (this.observer) {\n        this.observer.disconnect();\n      }\n\n      window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n      window.addEventListener(\"resize\", this.handleResize);\n\n      this.updateFixedByResize();\n    } else {\n      window.removeEventListener(\"scroll\", this.handleScroll);\n      window.removeEventListener(\"resize\", this.handleResize);\n      this.setUnfixed();\n\n      this.observer = new IntersectionObserver(this.observe, { threshold: [1] });\n      this.observer.observe(this.stickyElement);\n\n      this.updateStuck();\n    }\n  }\n\n  /** Sticky stuck top event */\n  @Event() stzhStuckTop: EventEmitter<StzhStickyStuckTopEvent>;\n\n  /** Sticky stuck bottom event */\n  @Event() stzhStuckBottom: EventEmitter<StzhStickyStuckBottomEvent>;\n\n  private observer: IntersectionObserver;\n  private debounceScroll: number;\n  private debounceResize: number;\n  private stickyElement: HTMLElement;\n  private spacerElement: HTMLElement;\n\n  private windowHeight: number;\n  private scrollX: number;\n  private scrollY: number;\n  private fixedTop: number;\n  private fixedLeft: number;\n  private fixedHeight: number = 0;\n  private fixedWidth: number = 0;\n  private fixedLimit: { top: number, bottom: number } | null = null;\n\n  private updateStuck() {\n    const topCss = parseInt(getComputedStyle(this.stickyElement).top, 10);\n    const bottomCss = parseInt(getComputedStyle(this.stickyElement).bottom, 10);\n    const rect = this.stickyElement.getBoundingClientRect();\n\n    if (topCss) {\n      this.isStuckTop = rect.top < 0;\n    } else {\n      this.isStuckTop = false;\n    }\n\n    if (bottomCss) {\n      this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;\n    } else {\n      this.isStuckBottom = false;\n    }\n  }\n\n  private getFixedLimit(): { top: number, bottom: number } | null {\n    const stickyContainer = this.element.closest(\"[data-stzh-sticky-container]\");\n\n    if (!stickyContainer) {\n      return null;\n    }\n\n    const off = offset(stickyContainer);\n\n    return {\n      top: off.top,\n      bottom: off.top + stickyContainer.scrollHeight,\n    };\n  }\n\n  private setUnfixed() {\n    Object.assign(this.stickyElement.style, {\n      position: null,\n      top: null,\n      bottom: null,\n      left: null,\n      width: null,\n    });\n\n    Object.assign(this.spacerElement.style, {\n      display: \"none\",\n    });\n  }\n\n  private setFixed() {\n    const position = (this.hasReachedTopLimit || this.hasReachedBottomLimit)\n      ? \"absolute\"\n      : \"fixed\";\n\n    Object.assign(this.stickyElement.style, {\n      position,\n      top: position === \"absolute\"\n        ? `${this.isStuckTop ? this.fixedLimit.bottom - this.fixedHeight : this.fixedLimit.top}px`\n        : this.isStuckTop ? \"0px\" : \"auto\",\n      bottom: this.isStuckTop || position === \"absolute\"\n        ? \"auto\" : \"0px\",\n      left: `${this.fixedLeft + (position === \"fixed\" ? this.scrollX : 0)}px`,\n      width: `${this.fixedWidth}px`,\n    });\n\n    Object.assign(this.spacerElement.style, {\n      display: \"block\",\n    });\n  }\n\n  private handleScroll = () => {\n    if (this.debounceScroll) {\n      window.cancelAnimationFrame(this.debounceScroll);\n    }\n\n    this.debounceScroll = requestAnimationFrame(this.updateFixedByScroll);\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateFixedByResize);\n  }\n\n  private updateFixedByScroll = () => {\n    if (!isVisible(this.stickyElement)) {\n      return;\n    }\n\n    this.scrollX = window.scrollX;\n    this.scrollY = window.scrollY;\n    this.fixedLimit = this.getFixedLimit();\n\n    if (this.isStuckTop || this.isStuckBottom) {\n      const off = offset(this.spacerElement);\n\n      this.fixedTop = off.top;\n      this.fixedLeft = off.left;\n    } else {\n      const off = offset(this.stickyElement);\n\n      this.fixedTop = off.top;\n      this.fixedLeft = off.left;\n    }\n\n    // console.log(\n    //   this.scrollX,\n    //   this.scrollY,\n    //   this.windowHeight, \n    //   this.fixedTop,\n    //   this.fixedLeft,\n    //   this.fixedHeight,\n    //   this.fixedLimit,\n    // );\n\n    this.isStuckBottom = !this.disableStickyBottom\n      && this.scrollY + this.windowHeight <= this.fixedTop + this.fixedHeight;\n    this.isStuckTop = !this.disableStickyTop\n      && this.scrollY >= this.fixedTop;\n\n    this.hasReachedTopLimit = this.fixedLimit \n      && this.scrollY + this.windowHeight - this.fixedHeight <= this.fixedLimit.top;\n    this.hasReachedBottomLimit = this.fixedLimit \n      && this.scrollY >= this.fixedLimit.bottom - this.fixedHeight;\n\n    // console.log(\n    //   this.isStuckBottom,\n    //   this.isStuckTop,\n    //   this.hasReachedBottomLimit,\n    //   this.hasReachedTopLimit,\n    // );\n\n    if (this.isStuckTop || this.isStuckBottom) {\n      this.setFixed();\n    } else {\n      this.setUnfixed();\n    }\n  }\n\n  private updateFixedByResize = () => {\n    // reset sticky so we can read current offsets\n    this.setUnfixed();\n    this.stickyElement.style.position = \"static\";\n    this.isStuckTop = false;\n    this.isStuckBottom = false;\n\n    if (isVisible(this.stickyElement)) {\n      this.windowHeight = window.innerHeight;\n      this.fixedHeight = this.stickyElement.offsetHeight; \n      this.fixedWidth = this.stickyElement.offsetWidth;\n      this.spacerElement.style.height = `${this.fixedHeight}px`;\n\n      this.updateFixedByScroll();\n    }\n  }\n\n  private observe = () => {\n    this.updateStuck();\n  };\n\n  componentDidLoad() {\n    this.positionWatcher(this.position);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    window.removeEventListener(\"scroll\", this.handleScroll);\n    window.removeEventListener(\"resize\", this.handleResize);\n  }\n\n  render() {\n    const isStuck = this.isStuckTop || this.isStuckBottom;\n\n    const classes = {\n      \"stzh-sticky\": true,\n      \"stzh-sticky--is-stuck\": isStuck,\n      \"stzh-sticky--is-stuck-top\": this.isStuckTop,\n      \"stzh-sticky--is-stuck-bottom\": this.isStuckBottom,\n      \"stzh-sticky--is-breakout\": this.breakout,\n      \"stzh-sticky--is-disabled-sticky-top\": this.disableStickyTop,\n      \"stzh-sticky--is-disabled-sticky-bottom\": this.disableStickyBottom,\n      [`stzh-sticky--position-${this.position}`]: !!this.position,\n    };\n\n    return (\n      <Host\n        is-stuck={this.isStuckTop || this.isStuckBottom}\n        is-stuck-top={this.isStuckTop}\n        is-stuck-bottom={this.isStuckBottom}\n      >\n        <div class={classes}>\n          <div\n            ref={(el) => (this.spacerElement = el as HTMLDivElement)}\n            class=\"stzh-sticky__spacer\"\n          ></div>\n          <div\n            ref={(el) => (this.stickyElement = el as HTMLDivElement)}\n            class=\"stzh-sticky__sticky\"\n          >\n            <div class=\"stzh-sticky__content\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}