npm - @nanoporetech-digital/components - Versions diffs - 5.7.0 → 5.8.1 - Mend

@nanoporetech-digital/components 5.7.0 → 5.8.1

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 (110) hide show

package/dist/collection/components/details/details.js CHANGED Viewed

@@ -1,8 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, Host, writeTask, readTask, Build, } from '@stencil/core';
-import { createColorClasses } from '../../utils/theme';
+import { h, Build, } from '@stencil/core';
 import { displayTransition } from '../../utils/transitions';
 /**
  * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.
@@ -13,35 +12,49 @@ import { displayTransition } from '../../utils/transitions';
  * @slot label - can be used when you wish to insert complex label markup
  * @slot icon-end - used for icons at the end of the handle
  *
- * @part button - the main details ui control
+ * @part base - the root `details` element
+ * @part header - the main `summary` ui control
  * @part label - the text wrapper of the ui control
  * @part icon--start - the icon wrapper at the start of the ui control
  * @part icon--end - the icon wrapper at the end of the ui control
+ * @part body - the wrapper around content
  * @part content - the main content wrapper
  */
 export class Details {
   constructor() {
-    this.slideId = `nano-details-${slideIds++}`;
     this.stateChanging = false;
-    this.onKeyDown = (ev) => {
-      switch (ev.key) {
+    this.onKeyDown = (e) => {
+      if (this.stateChanging || this.disabled)
+        return;
+      switch (e.key) {
         case 'Enter':
         case ' ':
+          e.preventDefault();
           this.open = !this.open;
           break;
+        case 'ArrowUp':
+          e.preventDefault();
+          this.open = false;
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          this.open = true;
+          break;
       }
     };
-    this.onMouseDown = () => {
-      if (this.stateChanging)
+    this.onMouseDown = (e) => {
+      e.preventDefault();
+      this.headerEl.focus();
+      if (this.stateChanging || this.disabled)
         return;
       this.open = !this.open;
     };
-    this.isLoading = true;
     this.label = '';
     this.open = false;
+    this.disabled = false;
     this.noHandle = false;
     this.iconRotation = 90;
-    this.color = undefined;
+    this.useCacheHeight = false;
   }
   toggleClick() {
     this.stateChanging = true;
@@ -51,76 +64,81 @@ export class Details {
       this.hide();
   }
   hide() {
-    this.nanoClosed.emit(this.open);
-    displayTransition(this.contentEl, 'is-shown', false).then(() => (this.stateChanging = false));
-    this.contentEl.style.height = '0px';
+    const nanoClose = this.nanoClosed.emit(this.open);
+    if (nanoClose.defaultPrevented) {
+      this.open = true;
+      this.detailsEl.open = true;
+      return;
+    }
+    this.cacheHeight = this.contentEl.scrollHeight;
+    this.bodyEl.style.height = this.cacheHeight + 'px';
+    displayTransition(this.bodyEl, 'is-shown', false).then(() => {
+      this.stateChanging = false;
+      this.detailsEl.open = false;
+    });
+    requestAnimationFrame(() => {
+      this.bodyEl.style.height = '0px';
+    });
   }
   show() {
-    this.nanoOpened.emit();
-    displayTransition(this.contentEl, 'is-shown', true).then(() => {
+    const nanoOpen = this.nanoOpened.emit();
+    this.detailsEl.open = true;
+    if (nanoOpen.defaultPrevented) {
+      this.open = false;
+      this.detailsEl.open = false;
+      return;
+    }
+    displayTransition(this.bodyEl, 'is-shown', true).then(() => {
       this.stateChanging = false;
+      this.bodyEl.style.height = 'auto';
     });
-    this.contentEl.style.height = this.contentArea.scrollHeight + 'px';
+    this.bodyEl.style.height =
+      (this.useCacheHeight ? this.cacheHeight : this.contentEl.scrollHeight) +
+        'px';
   }
-  resize() {
-    if (!this.open ||
-      !this.contentArea ||
-      !this.contentEl ||
-      this.stateChanging)
+  attachMo() {
+    if (this.mo || !this.detailsEl || !Build.isBrowser)
       return;
-    readTask(() => {
-      if (this.contentArea.scrollHeight > 0) {
-        writeTask(() => {
-          this.contentEl.style.height = this.contentArea.scrollHeight + 'px';
-        });
+    this.mo = new MutationObserver((changes) => {
+      if (this.stateChanging)
+        return;
+      for (const change of changes) {
+        if (change.type === 'attributes' && change.attributeName === 'open') {
+          this.open = this.detailsEl.open;
+        }
       }
     });
-  }
-  attachRO() {
-    if (this.ro || !this.contentArea)
-      return;
-    const ro = (this.ro = new ResizeObserver(() => this.resize()));
-    ro.observe(this.contentArea);
+    this.mo.observe(this.detailsEl, { attributes: true });
   }
   componentWillLoad() {
-    this.hasStartSlot = !!this.el.querySelector('[slot="icon-start"]');
-    this.hasEndSlot = !!this.el.querySelector('[slot="icon-end"]');
-    setTimeout(() => {
-      this.isLoading = false;
-    }, 100);
+    this.hasStartSlot = !!this.host.querySelector('[slot="icon-start"]');
+    this.hasEndSlot = !!this.host.querySelector('[slot="icon-end"]');
   }
   componentDidLoad() {
-    if (this.open) {
-      // disable animation on start
-      setTimeout(() => {
-        this.show();
-      }, 0);
-    }
-    if (Build.isBrowser)
-      this.attachRO();
+    this.bodyEl.style.height = this.open ? 'auto' : '0';
+    if (this.open)
+      this.detailsEl.setAttribute('open', 'true');
+    this.attachMo();
   }
   connectedCallback() {
-    if (!Build.isBrowser)
-      return;
-    const mo = (this.mo = new MutationObserver(() => this.resize()));
-    mo.observe(this.el, { childList: true, subtree: true, attributes: false });
-    this.attachRO();
+    this.attachMo();
   }
   disconnectedCallback() {
-    if (this.mo)
+    if (this.mo) {
       this.mo.disconnect();
-    if (this.ro)
-      this.ro.disconnect();
+      this.mo = undefined;
+    }
   }
   render() {
-    return (h(Host, { class: Object.assign({}, createColorClasses(this.color)) }, h("div", { class: {
+    return (h("details", { part: "base", ref: (d) => (this.detailsEl = d), class: {
+        details: true,
         open: this.open,
-        loaded: !this.isLoading,
-      } }, h("button", { onKeyDown: this.onKeyDown, onMouseDown: this.onMouseDown, onTouchEnd: this.onMouseDown, "aria-controls": this.slideId, "aria-expanded": this.open ? 'true' : 'false', style: { display: this.noHandle ? 'none' : '' }, part: "button" }, this.hasStartSlot ? (h("span", { part: "icon--start", class: "icon icon--start", style: {
+        disabled: this.disabled,
+      } }, h("summary", { part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', style: { display: this.noHandle ? 'none' : '' }, id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.hasStartSlot ? (h("span", { part: "icon--start", class: "icon icon--start", style: {
         transform: this.open ? `rotate(${this.iconRotation}deg)` : '',
-      } }, h("slot", { name: "icon-start" }))) : (''), h("div", { class: "label", part: "label" }, this.label ? this.label : h("slot", { name: "label" })), this.hasEndSlot ? (h("span", { part: "icon--end", class: "icon icon--end", style: {
+      } }, h("slot", { name: "icon-start" }))) : (''), h("div", { part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), this.hasEndSlot ? (h("span", { part: "icon--end", class: "icon icon--end", style: {
         transform: this.open ? `rotate(${this.iconRotation}deg)` : '',
-      } }, h("slot", { name: "icon-end" }))) : ('')), h("div", { class: "content", ref: (div) => (this.contentEl = div), tabindex: "-1", id: this.slideId, part: "content" }, h("div", { ref: (div) => (this.contentArea = div), class: "content__area" }, h("slot", null))))));
+      } }, h("slot", { name: "icon-end" }))) : ('')), h("div", { part: "body", class: "body", ref: (div) => (this.bodyEl = div), tabindex: "-1", role: "region", "aria-labelledby": "header" }, h("div", { part: "content", ref: (div) => (this.contentEl = div), class: "content", id: "content" }, h("slot", null)))));
   }
   static get is() { return "nano-details"; }
   static get encapsulation() { return "shadow"; }
@@ -148,7 +166,7 @@ export class Details {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Button / handle text to be used if no complex markup required.\nOtherwise use label slot."
+          "text": "Summary / handle text. Use the `label` slot for HTML markup"
         },
         "getter": false,
         "setter": false,
@@ -176,6 +194,26 @@ export class Details {
         "reflect": true,
         "defaultValue": "false"
       },
+      "disabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the details so it can't be toggled."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "noHandle": {
         "type": "boolean",
         "mutable": false,
@@ -188,7 +226,7 @@ export class Details {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Have no handle - you will need to control the hiding / showing of content with script"
+          "text": "Hide the handle. (You will need to control the hiding / showing of content with script)"
         },
         "getter": false,
         "setter": false,
@@ -216,37 +254,28 @@ export class Details {
         "reflect": false,
         "defaultValue": "90"
       },
-      "color": {
-        "type": "string",
+      "useCacheHeight": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "Color",
-          "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
-          "references": {
-            "Color": {
-              "location": "import",
-              "path": "../../interface"
-            }
-          }
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Color to use from your application's color palette."
+          "text": "Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\nSet `useCacheHeight` to `true` try to keep animations smooth."
         },
         "getter": false,
         "setter": false,
-        "attribute": "color",
-        "reflect": false
+        "attribute": "use-cache-height",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
-  static get states() {
-    return {
-      "isLoading": {}
-    };
-  }
   static get events() {
     return [{
         "method": "nanoOpened",
@@ -280,7 +309,7 @@ export class Details {
         }
       }];
   }
-  static get elementRef() { return "el"; }
+  static get elementRef() { return "host"; }
   static get watchers() {
     return [{
         "propName": "open",
@@ -288,5 +317,4 @@ export class Details {
       }];
   }
 }
-let slideIds = 0;
 //# sourceMappingURL=details.js.map

package/dist/collection/components/details/details.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"details.js","sourceRoot":"","sources":["../../../src/components/details/details.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n Prop,\n h,\n Element,\n Watch,\n Host,\n State,\n writeTask,\n readTask,\n Build,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport type { Color } from '../../interface';\n\n/*\n A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n /\n/\n @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n \n @part button - the main details ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part content - the main content wrapper\n /\n@Component({\n tag: 'nano-details',\n styleUrl: 'details.scss',\n shadow: true,\n})\nexport class Details {\n private hasStartSlot: boolean;\n private hasEndSlot: boolean;\n private slideId = `nano-details-${slideIds++}`;\n private mo?: MutationObserver;\n private ro?: ResizeObserver;\n private contentArea: HTMLDivElement;\n private stateChanging: boolean = false;\n\n @State() isLoading = true;\n\n @Element() private el: HTMLNanoDetailsElement;\n\n private contentEl: HTMLElement;\n\n /\n Button / handle text to be used if no complex markup required.\n * Otherwise use label slot.\n /\n @Prop() label: string = '';\n\n /\n Should item be open on load\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Have no handle - you will need to control the hiding / showing of content with script\n /\n @Prop() noHandle: boolean = false;\n\n /\n Icon slot rotation amount (degrees) on open\n /\n @Prop() iconRotation: number = 90;\n\n /\n Color to use from your application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Emitted when the component opens.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n /\n @Event() nanoOpened: EventEmitter;\n\n /\n Emitted when the component closes.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoClosed: EventEmitter;\n\n @Watch('open')\n toggleClick() {\n this.stateChanging = true;\n if (this.open) this.show();\n else this.hide();\n }\n\n private onKeyDown = (ev: KeyboardEvent) => {\n switch (ev.key) {\n case 'Enter':\n case ' ':\n this.open = !this.open;\n break;\n }\n };\n\n private onMouseDown = () => {\n if (this.stateChanging) return;\n this.open = !this.open;\n };\n\n private hide() {\n this.nanoClosed.emit(this.open);\n displayTransition(this.contentEl, 'is-shown', false).then(\n () => (this.stateChanging = false)\n );\n this.contentEl.style.height = '0px';\n }\n\n private show() {\n this.nanoOpened.emit();\n displayTransition(this.contentEl, 'is-shown', true).then(() => {\n this.stateChanging = false;\n });\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n }\n\n private resize() {\n if (\n !this.open \|\|\n !this.contentArea \|\|\n !this.contentEl \|\|\n this.stateChanging\n )\n return;\n readTask(() => {\n if (this.contentArea.scrollHeight > 0) {\n writeTask(() => {\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n });\n }\n });\n }\n\n private attachRO() {\n if (this.ro \|\| !this.contentArea) return;\n\n const ro = (this.ro = new ResizeObserver(() => this.resize()));\n ro.observe(this.contentArea);\n }\n\n componentWillLoad() {\n this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n setTimeout(() => {\n this.isLoading = false;\n }, 100);\n }\n\n componentDidLoad() {\n if (this.open) {\n // disable animation on start\n setTimeout(() => {\n this.show();\n }, 0);\n }\n if (Build.isBrowser) this.attachRO();\n }\n\n connectedCallback() {\n if (!Build.isBrowser) return;\n const mo = (this.mo = new MutationObserver(() => this.resize()));\n mo.observe(this.el, { childList: true, subtree: true, attributes: false });\n this.attachRO();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <div\n class={{\n open: this.open,\n loaded: !this.isLoading,\n }}\n >\n <button\n onKeyDown={this.onKeyDown}\n onMouseDown={this.onMouseDown}\n onTouchEnd={this.onMouseDown}\n aria-controls={this.slideId}\n aria-expanded={this.open ? 'true' : 'false'}\n style={{ display: this.noHandle ? 'none' : '' }}\n part=\"button\"\n >\n {this.hasStartSlot ? (\n <span\n part=\"icon--start\"\n class=\"icon icon--start\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-start\" />\n </span>\n ) : (\n ''\n )}\n <div class=\"label\" part=\"label\">\n {this.label ? this.label : <slot name=\"label\" />}\n </div>\n {this.hasEndSlot ? (\n <span\n part=\"icon--end\"\n class=\"icon icon--end\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-end\" />\n </span>\n ) : (\n ''\n )}\n </button>\n <div\n class=\"content\"\n ref={(div) => (this.contentEl = div)}\n tabindex=\"-1\"\n id={this.slideId}\n part=\"content\"\n >\n <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\nlet slideIds = 0;\n"]}
1	+ {"version":3,"file":"details.js","sourceRoot":"","sources":["../../../src/components/details/details.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n Prop,\n h,\n Element,\n Watch,\n Build,\n} from '@stencil/core';\nimport { displayTransition } from '../../utils/transitions';\n\n/*\n A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n /\n/\n @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n \n @part base - the root `details` element\n * @part header - the main `summary` ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part body - the wrapper around content\n * @part content - the main content wrapper\n /\n@Component({\n tag: 'nano-details',\n styleUrl: 'details.scss',\n shadow: true,\n})\nexport class Details {\n private hasStartSlot: boolean;\n private hasEndSlot: boolean;\n private mo?: MutationObserver;\n private stateChanging: boolean = false;\n private bodyEl: HTMLElement;\n private detailsEl: HTMLDetailsElement;\n private headerEl: HTMLElement;\n private contentEl: HTMLDivElement;\n private cacheHeight: number;\n\n @Element() private host: HTMLNanoDetailsElement;\n\n /* Summary / handle text. Use the `label` slot for HTML markup /\n @Prop() label: string = '';\n\n /* Should item be open on load /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /* Disables the details so it can't be toggled. /\n @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n\n /* Hide the handle. (You will need to control the hiding / showing of content with script) /\n @Prop() noHandle: boolean = false;\n\n /* Icon slot rotation amount (degrees) on open /\n @Prop() iconRotation: number = 90;\n\n /\n Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\n * Set `useCacheHeight` to `true` try to keep animations smooth. /\n @Prop() useCacheHeight = false;\n\n /\n Emitted when the component opens.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n /\n @Event() nanoOpened: EventEmitter;\n\n /\n Emitted when the component closes.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoClosed: EventEmitter;\n\n @Watch('open')\n toggleClick() {\n this.stateChanging = true;\n if (this.open) this.show();\n else this.hide();\n }\n\n private onKeyDown = (e: KeyboardEvent) => {\n if (this.stateChanging \|\| this.disabled) return;\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n this.open = !this.open;\n break;\n case 'ArrowUp':\n e.preventDefault();\n this.open = false;\n break;\n case 'ArrowDown':\n e.preventDefault();\n this.open = true;\n break;\n }\n };\n\n private onMouseDown = (e: MouseEvent) => {\n e.preventDefault();\n this.headerEl.focus();\n\n if (this.stateChanging \|\| this.disabled) return;\n this.open = !this.open;\n };\n\n private hide() {\n const nanoClose = this.nanoClosed.emit(this.open);\n\n if (nanoClose.defaultPrevented) {\n this.open = true;\n this.detailsEl.open = true;\n return;\n }\n\n this.cacheHeight = this.contentEl.scrollHeight;\n this.bodyEl.style.height = this.cacheHeight + 'px';\n\n displayTransition(this.bodyEl, 'is-shown', false).then(() => {\n this.stateChanging = false;\n this.detailsEl.open = false;\n });\n\n requestAnimationFrame(() => {\n this.bodyEl.style.height = '0px';\n });\n }\n\n private show() {\n const nanoOpen = this.nanoOpened.emit();\n this.detailsEl.open = true;\n\n if (nanoOpen.defaultPrevented) {\n this.open = false;\n this.detailsEl.open = false;\n return;\n }\n\n displayTransition(this.bodyEl, 'is-shown', true).then(() => {\n this.stateChanging = false;\n this.bodyEl.style.height = 'auto';\n });\n\n this.bodyEl.style.height =\n (this.useCacheHeight ? this.cacheHeight : this.contentEl.scrollHeight) +\n 'px';\n }\n\n private attachMo() {\n if (this.mo \|\| !this.detailsEl \|\| !Build.isBrowser) return;\n\n this.mo = new MutationObserver((changes) => {\n if (this.stateChanging) return;\n\n for (const change of changes) {\n if (change.type === 'attributes' && change.attributeName === 'open') {\n this.open = this.detailsEl.open;\n }\n }\n });\n this.mo.observe(this.detailsEl, { attributes: true });\n }\n\n componentWillLoad() {\n this.hasStartSlot = !!this.host.querySelector('[slot=\"icon-start\"]');\n this.hasEndSlot = !!this.host.querySelector('[slot=\"icon-end\"]');\n }\n\n componentDidLoad() {\n this.bodyEl.style.height = this.open ? 'auto' : '0';\n if (this.open) this.detailsEl.setAttribute('open', 'true');\n this.attachMo();\n }\n\n connectedCallback() {\n this.attachMo();\n }\n\n disconnectedCallback() {\n if (this.mo) {\n this.mo.disconnect();\n this.mo = undefined;\n }\n }\n\n render() {\n return (\n <details\n part=\"base\"\n ref={(d: HTMLDetailsElement) => (this.detailsEl = d)}\n class={{\n details: true,\n open: this.open,\n disabled: this.disabled,\n }}\n >\n <summary\n part=\"header\"\n aria-controls=\"content\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n tabindex={this.disabled ? '-1' : '0'}\n style={{ display: this.noHandle ? 'none' : '' }}\n id=\"header\"\n role=\"button\"\n class=\"header\"\n ref={(s) => (this.headerEl = s)}\n onKeyDown={this.onKeyDown}\n onClick={this.onMouseDown}\n >\n {this.hasStartSlot ? (\n <span\n part=\"icon--start\"\n class=\"icon icon--start\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-start\" />\n </span>\n ) : (\n ''\n )}\n <div part=\"label\" class=\"label\">\n {this.label ? this.label : <slot name=\"label\" />}\n </div>\n {this.hasEndSlot ? (\n <span\n part=\"icon--end\"\n class=\"icon icon--end\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-end\" />\n </span>\n ) : (\n ''\n )}\n </summary>\n <div\n part=\"body\"\n class=\"body\"\n ref={(div) => (this.bodyEl = div)}\n tabindex=\"-1\"\n role=\"region\"\n aria-labelledby=\"header\"\n >\n <div\n part=\"content\"\n ref={(div) => (this.contentEl = div)}\n class=\"content\"\n id=\"content\"\n >\n <slot />\n </div>\n </div>\n </details>\n );\n }\n}\n"]}

package/dist/collection/components/grid/grid.js CHANGED Viewed

@@ -17,6 +17,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { h, Host } from '@stencil/core';
 import { ConstructibleStyle } from '../../utils/constructible-style';
+let gridId = 0;
 /**
  * A lightweight, context-aware CSS grid implementation.
  *
@@ -34,6 +35,7 @@ import { ConstructibleStyle } from '../../utils/constructible-style';
 export class Grid {
   constructor() {
     this.grids = [];
+    this.gridId = 'nano-grid-' + gridId++;
     this.styles = () => {
       const css = /* css */ `
       ${this.grids
@@ -41,7 +43,7 @@ export class Grid {
           @container (min-width: ${typeof bp.breakpoint === 'number'
         ? bp.breakpoint + 1 + 'px'
         : bp.breakpoint}) {
-            .grid {
+            #${this.gridId}.grid {
               --current-grid-size: "grid size: ${bp.name}";
               ${bp.template
         ? `grid-template: ${bp.template};`
@@ -51,11 +53,11 @@ export class Grid {
         .map((_, i) => {
         const gItm = i + 1;
         return /* css */ `
-                  .grid > [grid-states~="${bp.name}-col-start-${gItm}"],
+                  #${this.gridId}.grid > [grid-states~="${bp.name}-col-start-${gItm}"],
                   ::slotted([grid-states~="${bp.name}-col-start-${gItm}"]) {
                     grid-column-start: ${gItm} !important;
                   }
-                  .grid > [grid-states~="${bp.name}-col-span-${gItm}"],
+                  #${this.gridId}.grid > [grid-states~="${bp.name}-col-span-${gItm}"],
                   ::slotted([grid-states~="${bp.name}-col-span-${gItm}"]) {
                     grid-column-end: span ${gItm} !important;
                   }
@@ -66,11 +68,11 @@ export class Grid {
         .map((_, i) => {
         const gItm = i + 1;
         return /* css */ `
-                    .grid > [grid-states~="${bp.name}-row-start-${gItm}"],
+                    #${this.gridId}.grid > [grid-states~="${bp.name}-row-start-${gItm}"],
                     ::slotted([grid-states~="${bp.name}-row-start-${gItm}"]) {
                       grid-row-start: ${gItm} !important;
                     }
-                    .grid > [grid-states~="${bp.name}-row-span-${gItm}"],
+                    #${this.gridId}.grid > [grid-states~="${bp.name}-row-span-${gItm}"],
                     ::slotted([grid-states~="${bp.name}-row-span-${gItm}"]) {
                       grid-row-end: span ${gItm} !important;
                     }
@@ -79,7 +81,7 @@ export class Grid {
         .join('')}
             ${this.showHelper &&
         /* css */ `
-              .grid--helper :nth-child(-n+${bp.cols}) {
+              #${this.gridId} .grid--helper :nth-child(-n+${bp.cols}) {
                 display: block !important;
               }
             `}
@@ -122,7 +124,7 @@ export class Grid {
         name: 'm',
         template: this.mTpl,
       });
-    if (this.lSize)
+    if (this.lCols)
       this.grids.push({
         cols: this.lCols,
         breakpoint: this.mSize,
@@ -154,7 +156,7 @@ export class Grid {
     this.constructSizeArray();
   }
   render() {
-    return (h(Host, null, h("div", { part: "grid", class: "grid" }, h("slot", null)), this.showHelper && (h("div", { class: "grid grid--helper", part: "helper" }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
+    return (h(Host, null, h("div", { part: "grid", class: "grid", id: this.gridId }, h("slot", null)), this.showHelper && (h("div", { class: "grid grid--helper", part: "helper" }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
   }
   static get is() { return "nano-grid"; }
   static get encapsulation() { return "shadow"; }
@@ -187,7 +189,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "s-size",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "300"
       },
       "mSize": {
@@ -207,7 +209,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "m-size",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "550"
       },
       "lSize": {
@@ -227,7 +229,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "l-size",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "800"
       },
       "xlSize": {
@@ -247,7 +249,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "xl-size",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "1000"
       },
       "sCols": {
@@ -267,7 +269,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "s-cols",
-        "reflect": false
+        "reflect": true
       },
       "mCols": {
         "type": "number",
@@ -286,7 +288,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "m-cols",
-        "reflect": false
+        "reflect": true
       },
       "lCols": {
         "type": "number",
@@ -305,7 +307,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "l-cols",
-        "reflect": false
+        "reflect": true
       },
       "xlCols": {
         "type": "number",
@@ -324,7 +326,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "xl-cols",
-        "reflect": false
+        "reflect": true
       },
       "xxlCols": {
         "type": "number",
@@ -343,7 +345,7 @@ export class Grid {
         "getter": false,
         "setter": false,
         "attribute": "xxl-cols",
-        "reflect": false
+        "reflect": true
       },
       "sTpl": {
         "type": "string",

package/dist/collection/components/grid/grid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/components/grid/grid.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAErE;;;;;;;;;;;;;GAaG;AAMH,MAAM,OAAO,IAAI;;IACP,UAAK,GAKP,EAAE,CAAC;IAkHuD,WAAM,GACpE,GAAG,EAAE;MACH,MAAM,GAAG,GAAG,SAAS,CAAC;QACpB,IAAI,CAAC,KAAK;SACT,GAAG,CACF,CAAC,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC;mCAEhB,OAAO,EAAE,CAAC,UAAU,KAAK,QAAQ;QAC/B,CAAC,CAAC,EAAE,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI;QAC1B,CAAC,CAAC,EAAE,CAAC,UACT;;iDAEuC,EAAE,CAAC,IAAI;gBAExC,EAAE,CAAC,QAAQ;QACT,CAAC,CAAC,kBAAkB,EAAE,CAAC,QAAQ,GAAG;QAClC,CAAC,CAAC,iCAAiC,EAAE,CAAC,IAAI,yBAAyB,EAAE,CAAC,IAAI,kCAC9E;;cAEA,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;SAClB,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACZ,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;QACnB,OAAO,SAAS,CAAC;2CACU,EAAE,CAAC,IAAI,cAAc,IAAI;6CACvB,EAAE,CAAC,IAAI,cAAc,IAAI;yCAC7B,IAAI;;2CAEF,EAAE,CAAC,IAAI,aAAa,IAAI;6CACtB,EAAE,CAAC,IAAI,aAAa,IAAI;4CACzB,IAAI;;eAEjC,CAAC;MACF,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC;gBACP,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;SACb,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACZ,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;QACnB,OAAO,SAAS,CAAC;6CACU,EAAE,CAAC,IAAI,cAAc,IAAI;+CACvB,EAAE,CAAC,IAAI,cAAc,IAAI;wCAChC,IAAI;;6CAEC,EAAE,CAAC,IAAI,aAAa,IAAI;+CACtB,EAAE,CAAC,IAAI,aAAa,IAAI;2CAC5B,IAAI;;iBAE9B,CAAC;MACF,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC;cAEX,IAAI,CAAC,UAAU;QACf,SAAS,CAAC;4CACoB,EAAE,CAAC,IAAI;;;aAIvC;;SAEH,CACA;SACA,IAAI,CAAC,EAAE,CAAC;KACZ,CAAC;MACA,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;;iBA5K6B,GAAG;iBAIH,GAAG;iBAIH,GAAG;kBAIF,IAAI;;;;;;;;;;;sBAiCS,KAAK;;EAiBpD,kBAAkB;IAChB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAEhB,IAAI,IAAI,CAAC,KAAK;MACZ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,KAAK;QAChB,UAAU,EAAE,CAAC;QACb,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,IAAI,CAAC,IAAI;OACpB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,KAAK;MACZ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,KAAK;QAChB,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,IAAI,CAAC,IAAI;OACpB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,KAAK;MACZ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,KAAK;QAChB,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,IAAI,CAAC,IAAI;OACpB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,MAAM;MACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,MAAM;QACjB,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI,CAAC,KAAK;OACrB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,OAAO;MACd,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,OAAO;QAClB,UAAU,EAAE,IAAI,CAAC,MAAM;QACvB,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,IAAI,CAAC,MAAM;OACtB,CAAC,CAAC;IAEL,IAAI,CAAC,QAAQ;MACX,IAAI,CAAC,KAAK;SACP,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC,UAAU,IAAI,EAAE,CAAC,QAAQ,IAAI,EAAE,EAAE,CAAC;SAC/D,IAAI,CAAC,EAAE,CAAC;QACX,UAAU;QACV,IAAI,CAAC,UAAU,CAAC;EACpB,CAAC;EAmED,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM;QAC3B,eAAQ,CACJ;MACL,IAAI,CAAC,UAAU,IAAI,CAClB,WAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,IACzC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CACxB,WAAK,KAAK,EAAC,mBAAmB,GAAG,CAClC,CAAC,CACE,CACP,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AArFC;EAAC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,UAAU,EAAE,CAAC;;oCA+DjD","sourcesContent":["import { Component, h, Prop, Host, State, Watch } from '@stencil/core';\nimport { ConstructibleStyle } from '../../utils/constructible-style';\n\n/*\n A lightweight, context-aware CSS grid implementation.\n \n - Define multiple grids templates at different breakpoints\n * - Uses `@container` queries to select the correct grid depending on the current dimensions\n * - Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n * - SSR optimised\n\n * @part grid - the main grid element.\n * Use this to set css such as `justify-items\|content` / `align-items\|content` / `place-content`\n * @part helper - a replica grid showed when `show-helper` is true\n \n @slot - default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement.\n /\n@Component({\n tag: 'nano-grid',\n styleUrl: 'grid.scss',\n shadow: true,\n})\nexport class Grid {\n private grids: {\n cols: number;\n breakpoint: number \| string;\n name: string;\n template?: string;\n }[] = [];\n @State() cacheKey: string;\n\n /* the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` /\n @Prop() sSize: number \| string = 300;\n\n /* the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` /\n @Prop() mSize: number \| string = 550;\n\n /* the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` /\n @Prop() lSize: number \| string = 800;\n\n /* the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` /\n @Prop() xlSize: number \| string = 1000;\n\n /* the number of columns the grid has at the small breakpoint. /\n @Prop() sCols: number;\n\n /* the number of columns the grid has at the medium breakpoint. /\n @Prop() mCols: number;\n\n /* the number of columns the grid has at the large breakpoint. /\n @Prop() lCols: number;\n\n /* the number of columns the grid has at the xl breakpoint. /\n @Prop() xlCols: number;\n\n /* the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) /\n @Prop() xxlCols: number;\n\n /* Optional small `grid-template`. Note - you must set `sCols` for this to take affect /\n @Prop() sTpl?: string;\n\n /* Optional medium `grid-template`. Note - you must set `mCols` for this to take affect /\n @Prop() mTpl?: string;\n\n /* Optional large `grid-template`. Note - you must set `lCols` for this to take affect /\n @Prop() lTpl?: string;\n\n /* Optional xl `grid-template`. Note - you must set `xlCols` for this to take affect /\n @Prop() xlTpl?: string;\n\n /* Optional xxl `grid-template`. Note - you must set `xxlCols` for this to take affect /\n @Prop() xxlTpl?: string;\n\n /* shows a grid helper to visualise where columns are /\n @Prop({ reflect: true }) showHelper: boolean = false;\n\n @Watch('sTpl')\n @Watch('mTpl')\n @Watch('lTpl')\n @Watch('xlTpl')\n @Watch('xxlTpl')\n @Watch('sSize')\n @Watch('mSize')\n @Watch('lSize')\n @Watch('xlSize')\n @Watch('sCols')\n @Watch('mCols')\n @Watch('lCols')\n @Watch('xlCols')\n @Watch('xxlCols')\n @Watch('showHelper')\n constructSizeArray() {\n this.grids = [];\n\n if (this.sCols)\n this.grids.push({\n cols: this.sCols,\n breakpoint: 0,\n name: 's',\n template: this.sTpl,\n });\n if (this.mCols)\n this.grids.push({\n cols: this.mCols,\n breakpoint: this.sSize,\n name: 'm',\n template: this.mTpl,\n });\n if (this.lSize)\n this.grids.push({\n cols: this.lCols,\n breakpoint: this.mSize,\n name: 'l',\n template: this.lTpl,\n });\n if (this.xlCols)\n this.grids.push({\n cols: this.xlCols,\n breakpoint: this.lSize,\n name: 'xl',\n template: this.xlTpl,\n });\n if (this.xxlCols)\n this.grids.push({\n cols: this.xxlCols,\n breakpoint: this.xlSize,\n name: 'xxl',\n template: this.xxlTpl,\n });\n\n this.cacheKey =\n this.grids\n .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template \|\| ''}`)\n .join('') +\n '-helper-' +\n this.showHelper;\n }\n\n @ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }) protected styles =\n () => {\n const css = / css / `\n ${this.grids\n .map(\n (bp) => / css / `\n @container (min-width: ${\n typeof bp.breakpoint === 'number'\n ? bp.breakpoint + 1 + 'px'\n : bp.breakpoint\n }) {\n .grid {\n --current-grid-size: \"grid size: ${bp.name}\";\n ${\n bp.template\n ? `grid-template: ${bp.template};`\n : `grid-template-columns: repeat(${bp.cols}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`\n }\n }\n ${[...Array(bp.cols)]\n .map((_, i) => {\n const gItm = i + 1;\n return / css / `\n .grid > [grid-states~=\"${bp.name}-col-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-start-${gItm}\"]) {\n grid-column-start: ${gItm} !important;\n }\n .grid > [grid-states~=\"${bp.name}-col-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-span-${gItm}\"]) {\n grid-column-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${[...Array(24)]\n .map((_, i) => {\n const gItm = i + 1;\n return / css / `\n .grid > [grid-states~=\"${bp.name}-row-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-start-${gItm}\"]) {\n grid-row-start: ${gItm} !important;\n }\n .grid > [grid-states~=\"${bp.name}-row-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-span-${gItm}\"]) {\n grid-row-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${\n this.showHelper &&\n / css */ `\n .grid--helper :nth-child(-n+${bp.cols}) {\n display: block !important;\n }\n `\n }\n }\n `\n )\n .join('')}\n `;\n return css;\n };\n\n componentWillLoad() {\n this.constructSizeArray();\n }\n\n render() {\n return (\n <Host>\n <div part=\"grid\" class=\"grid\">\n <slot />\n </div>\n {this.showHelper && (\n <div class=\"grid grid--helper\" part=\"helper\">\n {[...Array(24)].map(() => (\n <div class=\"grid__helper-item\" />\n ))}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/components/grid/grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, State, Watch } from '@stencil/core';\nimport { ConstructibleStyle } from '../../utils/constructible-style';\n\nlet gridId = 0;\n\n/*\n A lightweight, context-aware CSS grid implementation.\n \n - Define multiple grids templates at different breakpoints\n * - Uses `@container` queries to select the correct grid depending on the current dimensions\n * - Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n * - SSR optimised\n\n * @part grid - the main grid element.\n * Use this to set css such as `justify-items\|content` / `align-items\|content` / `place-content`\n * @part helper - a replica grid showed when `show-helper` is true\n \n @slot - default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement.\n /\n@Component({\n tag: 'nano-grid',\n styleUrl: 'grid.scss',\n shadow: true,\n})\nexport class Grid {\n private grids: {\n cols: number;\n breakpoint: number \| string;\n name: string;\n template?: string;\n }[] = [];\n private gridId = 'nano-grid-' + gridId++;\n @State() cacheKey: string;\n\n /* the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` /\n @Prop({ reflect: true }) sSize: number \| string = 300;\n\n /* the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` /\n @Prop({ reflect: true }) mSize: number \| string = 550;\n\n /* the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` /\n @Prop({ reflect: true }) lSize: number \| string = 800;\n\n /* the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` /\n @Prop({ reflect: true }) xlSize: number \| string = 1000;\n\n /* the number of columns the grid has at the small breakpoint. /\n @Prop({ reflect: true }) sCols: number;\n\n /* the number of columns the grid has at the medium breakpoint. /\n @Prop({ reflect: true }) mCols: number;\n\n /* the number of columns the grid has at the large breakpoint. /\n @Prop({ reflect: true }) lCols: number;\n\n /* the number of columns the grid has at the xl breakpoint. /\n @Prop({ reflect: true }) xlCols: number;\n\n /* the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) /\n @Prop({ reflect: true }) xxlCols: number;\n\n /* Optional small `grid-template`. Note - you must set `sCols` for this to take affect /\n @Prop() sTpl?: string;\n\n /* Optional medium `grid-template`. Note - you must set `mCols` for this to take affect /\n @Prop() mTpl?: string;\n\n /* Optional large `grid-template`. Note - you must set `lCols` for this to take affect /\n @Prop() lTpl?: string;\n\n /* Optional xl `grid-template`. Note - you must set `xlCols` for this to take affect /\n @Prop() xlTpl?: string;\n\n /* Optional xxl `grid-template`. Note - you must set `xxlCols` for this to take affect /\n @Prop() xxlTpl?: string;\n\n /* shows a grid helper to visualise where columns are /\n @Prop({ reflect: true }) showHelper: boolean = false;\n\n @Watch('sTpl')\n @Watch('mTpl')\n @Watch('lTpl')\n @Watch('xlTpl')\n @Watch('xxlTpl')\n @Watch('sSize')\n @Watch('mSize')\n @Watch('lSize')\n @Watch('xlSize')\n @Watch('sCols')\n @Watch('mCols')\n @Watch('lCols')\n @Watch('xlCols')\n @Watch('xxlCols')\n @Watch('showHelper')\n constructSizeArray() {\n this.grids = [];\n\n if (this.sCols)\n this.grids.push({\n cols: this.sCols,\n breakpoint: 0,\n name: 's',\n template: this.sTpl,\n });\n if (this.mCols)\n this.grids.push({\n cols: this.mCols,\n breakpoint: this.sSize,\n name: 'm',\n template: this.mTpl,\n });\n if (this.lCols)\n this.grids.push({\n cols: this.lCols,\n breakpoint: this.mSize,\n name: 'l',\n template: this.lTpl,\n });\n if (this.xlCols)\n this.grids.push({\n cols: this.xlCols,\n breakpoint: this.lSize,\n name: 'xl',\n template: this.xlTpl,\n });\n if (this.xxlCols)\n this.grids.push({\n cols: this.xxlCols,\n breakpoint: this.xlSize,\n name: 'xxl',\n template: this.xxlTpl,\n });\n\n this.cacheKey =\n this.grids\n .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template \|\| ''}`)\n .join('') +\n '-helper-' +\n this.showHelper;\n }\n\n @ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }) protected styles =\n () => {\n const css = / css / `\n ${this.grids\n .map(\n (bp) => / css / `\n @container (min-width: ${\n typeof bp.breakpoint === 'number'\n ? bp.breakpoint + 1 + 'px'\n : bp.breakpoint\n }) {\n #${this.gridId}.grid {\n --current-grid-size: \"grid size: ${bp.name}\";\n ${\n bp.template\n ? `grid-template: ${bp.template};`\n : `grid-template-columns: repeat(${bp.cols}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`\n }\n }\n ${[...Array(bp.cols)]\n .map((_, i) => {\n const gItm = i + 1;\n return / css / `\n #${this.gridId}.grid > [grid-states~=\"${bp.name}-col-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-start-${gItm}\"]) {\n grid-column-start: ${gItm} !important;\n }\n #${this.gridId}.grid > [grid-states~=\"${bp.name}-col-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-span-${gItm}\"]) {\n grid-column-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${[...Array(24)]\n .map((_, i) => {\n const gItm = i + 1;\n return / css / `\n #${this.gridId}.grid > [grid-states~=\"${bp.name}-row-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-start-${gItm}\"]) {\n grid-row-start: ${gItm} !important;\n }\n #${this.gridId}.grid > [grid-states~=\"${bp.name}-row-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-span-${gItm}\"]) {\n grid-row-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${\n this.showHelper &&\n / css */ `\n #${this.gridId} .grid--helper :nth-child(-n+${bp.cols}) {\n display: block !important;\n }\n `\n }\n }\n `\n )\n .join('')}\n `;\n return css;\n };\n\n componentWillLoad() {\n this.constructSizeArray();\n }\n\n render() {\n return (\n <Host>\n <div part=\"grid\" class=\"grid\" id={this.gridId}>\n <slot />\n </div>\n {this.showHelper && (\n <div class=\"grid grid--helper\" part=\"helper\">\n {[...Array(24)].map(() => (\n <div class=\"grid__helper-item\" />\n ))}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/slides/slide.css CHANGED Viewed

@@ -27,4 +27,8 @@
 :host([ready]) {
   opacity: 1;
+}
+:host(:not([ready])) {
+  flex: 1 0 auto;
 }

package/dist/collection/components/slides/slides.css CHANGED Viewed

@@ -51,7 +51,8 @@
   position: relative;
 }
 .slideshow.not-ready {
-  max-width: 98vw;
+  width: 100%;
+  overflow: hidden;
 }
 .flickity-container {