@nanoporetech-digital/components 4.9.4 → 5.0.0

package/dist/components/drag.js

@@ -0,0 +1,72 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+/** Begins listening for dragging. */
+function drag(container, options) {
+  const initialOffsets = {
+    pageX: 0,
+    pageY: 0,
+    offsetX: 0,
+    offsetY: 0,
+  };
+  function move(pointerEvent) {
+    const dims = container.getBoundingClientRect();
+    const defaultView = container.ownerDocument.defaultView;
+    const offsetX = dims.left + defaultView.pageXOffset;
+    const offsetY = dims.top + defaultView.pageYOffset;
+    let x = 0;
+    let y = 0;
+    if (options.relative) {
+      x =
+        pointerEvent.pageX -
+          initialOffsets.pageX -
+          (offsetX - initialOffsets.offsetX);
+      y =
+        pointerEvent.pageY -
+          initialOffsets.pageY -
+          (offsetY - initialOffsets.offsetY);
+    }
+    else {
+      x = pointerEvent.pageX - offsetX;
+      y = pointerEvent.pageY - offsetY;
+    }
+    if (options === null || options === void 0 ? void 0 : options.onMove) {
+      options.onMove(x, y);
+    }
+  }
+  function stop() {
+    document.removeEventListener('pointermove', move);
+    document.removeEventListener('pointerup', stop);
+    if (options === null || options === void 0 ? void 0 : options.onStop) {
+      options.onStop();
+    }
+  }
+  document.addEventListener('pointermove', move, { passive: true });
+  document.addEventListener('pointerup', stop);
+  if (!!!(options === null || options === void 0 ? void 0 : options.initialEvent))
+    return;
+  let initialEvent;
+  if (options === null || options === void 0 ? void 0 : options.initialEvent['touches']) {
+    initialEvent = {
+      pageX: (options === null || options === void 0 ? void 0 : options.initialEvent).touches[0].pageX,
+      pageY: (options === null || options === void 0 ? void 0 : options.initialEvent).touches[0].pageY,
+    };
+  }
+  else {
+    initialEvent = {
+      pageX: (options === null || options === void 0 ? void 0 : options.initialEvent).pageX,
+      pageY: (options === null || options === void 0 ? void 0 : options.initialEvent).pageY,
+    };
+  }
+  const defaultView = container.ownerDocument.defaultView;
+  const dims = container.getBoundingClientRect();
+  initialOffsets.pageX = initialEvent.pageX;
+  initialOffsets.pageY = initialEvent.pageY;
+  initialOffsets.offsetX = dims.left + defaultView.pageXOffset;
+  initialOffsets.offsetY = dims.top + defaultView.pageYOffset;
+  // move(initialEvent);
+}
+
+export { drag as d };
+
+//# sourceMappingURL=drag.js.map

package/dist/components/drag.js.map

@@ -0,0 +1 @@
+{"file":"drag.js","mappings":"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","names":[],"sources":["./src/utils/drag.ts"],"sourcesContent":["interface DragOptions {\n  /** Callback that runs as dragging occurs. */\n  onMove: (x: number, y: number) => void;\n  /** Callback that runs when dragging stops. */\n  onStop: () => void;\n  /**\n   * When an initial event is passed, the first drag will be triggered immediately using the coordinates therein. This\n   * is useful when the drag is initiated by a mousedown/touchstart event but you want the initial \"click\" to activate\n   * a drag (e.g. positioning a handle initially at the click target).\n   */\n  initialEvent: TouchEvent | PointerEvent | MouseEvent;\n  /**\n   * Used in conjunction with `options.initialEvent`\n   * Subtracts the initial pointer co-ordinates from the move co-ordinates.\n   * This is useful for tracking how far an element has been dragged\n   */\n  relative?: boolean;\n}\n\ninterface InitialOffsets {\n  pageX: number;\n  pageY: number;\n  offsetX: number;\n  offsetY: number;\n}\n\n/** Begins listening for dragging. */\nexport function drag(container: HTMLElement, options?: Partial<DragOptions>) {\n  const initialOffsets: InitialOffsets = {\n    pageX: 0,\n    pageY: 0,\n    offsetX: 0,\n    offsetY: 0,\n  };\n\n  function move(pointerEvent: { pageX: number; pageY: number }) {\n    const dims = container.getBoundingClientRect();\n    const defaultView = container.ownerDocument.defaultView!;\n    const offsetX = dims.left + defaultView.pageXOffset;\n    const offsetY = dims.top + defaultView.pageYOffset;\n    let x = 0;\n    let y = 0;\n\n    if (options.relative) {\n      x =\n        pointerEvent.pageX -\n        initialOffsets.pageX -\n        (offsetX - initialOffsets.offsetX);\n      y =\n        pointerEvent.pageY -\n        initialOffsets.pageY -\n        (offsetY - initialOffsets.offsetY);\n    } else {\n      x = pointerEvent.pageX - offsetX;\n      y = pointerEvent.pageY - offsetY;\n    }\n\n    if (options?.onMove) {\n      options.onMove(x, y);\n    }\n  }\n\n  function stop() {\n    document.removeEventListener('pointermove', move);\n    document.removeEventListener('pointerup', stop);\n\n    if (options?.onStop) {\n      options.onStop();\n    }\n  }\n\n  document.addEventListener('pointermove', move, { passive: true });\n  document.addEventListener('pointerup', stop);\n\n  if (!!!options?.initialEvent) return;\n\n  let initialEvent: { pageX: number; pageY: number };\n\n  if (options?.initialEvent['touches']) {\n    initialEvent = {\n      pageX: (options?.initialEvent as TouchEvent).touches[0].pageX,\n      pageY: (options?.initialEvent as TouchEvent).touches[0].pageY,\n    };\n  } else {\n    initialEvent = {\n      pageX: (options?.initialEvent as MouseEvent).pageX,\n      pageY: (options?.initialEvent as MouseEvent).pageY,\n    };\n  }\n\n  const defaultView = container.ownerDocument.defaultView!;\n  const dims = container.getBoundingClientRect();\n\n  initialOffsets.pageX = initialEvent.pageX;\n  initialOffsets.pageY = initialEvent.pageY;\n  initialOffsets.offsetX = dims.left + defaultView.pageXOffset;\n  initialOffsets.offsetY = dims.top + defaultView.pageYOffset;\n\n  // move(initialEvent);\n}\n"],"version":3}

package/dist/components/form-control.js

@@ -31,8 +31,7 @@ const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, plac
 };
 const FormControlWrap = (props, children) => {
   const { rtl, floatLabel, label, moreId, helperEndId, type, hasHelperSlot, showInlineError, errorMessage, hasHelperEndSlot, } = props;
-  const MainTag = hasHelperEndSlot ? 'nano-resize-observe' : 'div';
-  return (h(MainTag, { states: "350w has-enough-width", class: {
+  return (h("div", { class: {
       'has-label': label !== null && !floatLabel,
       'has-float-label': label !== null && floatLabel,
       'has-helper-end': hasHelperEndSlot,

package/dist/components/form-control.js.map

@@ -1 +1 @@
-{"file":"form-control.js","mappings":"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","names":[],"sources":["./src/components/form-control/form-control.tsx"],"sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport type { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  helperEndId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n  hasHelperEndSlot?: boolean;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"form-ctrl__float-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`}\n          </span>\n        )}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ 'form-ctrl__label': true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"form-ctrl__label-wrap\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"form-ctrl__label-placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"form-ctrl__labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"form-ctrl__label-placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    helperEndId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n    hasHelperEndSlot,\n  } = props;\n\n  const MainTag = hasHelperEndSlot ? 'nano-resize-observe' : 'div';\n\n  return (\n    <MainTag\n      states=\"350w has-enough-width\"\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        'has-helper-end': hasHelperEndSlot,\n        rtl,\n        'form-ctrl': true,\n      }}\n    >\n      <div class=\"form-ctrl__wrapper\">\n        {!floatLabel ? renderLabel({ ...props }) : ''}\n        <div\n          class={{\n            'form-ctrl__input': true,\n            'form-ctrl__textarea': type === 'textarea',\n          }}\n        >\n          {floatLabel && renderLabel({ ...props, rtl })}\n          {children}\n        </div>\n        {showInlineError || hasHelperSlot ? (\n          <div class=\"form-ctrl__more\" id={moreId}>\n            {!!showInlineError ? (\n              <div class=\"form-ctrl__error\" aria-live=\"polite\">\n                {errorMessage}\n              </div>\n            ) : (\n              ''\n            )}\n            <div class=\"form-ctrl__helper\">\n              <slot name=\"helper\" />\n            </div>\n          </div>\n        ) : (\n          ''\n        )}\n      </div>\n      {hasHelperEndSlot ? (\n        <div class=\"form-ctrl__helper-end\" id={helperEndId}>\n          <slot name=\"helper-end\" />\n        </div>\n      ) : (\n        ''\n      )}\n    </MainTag>\n  );\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"form-ctrl__input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"form-ctrl__slot-start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon form-ctrl__clear-btn\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"form-ctrl__slot-value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"form-ctrl__slot-end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"],"version":3}
+{"file":"form-control.js","mappings":"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","names":[],"sources":["./src/components/form-control/form-control.tsx"],"sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport type { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  helperEndId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n  hasHelperEndSlot?: boolean;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"form-ctrl__float-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`}\n          </span>\n        )}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ 'form-ctrl__label': true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"form-ctrl__label-wrap\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"form-ctrl__label-placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"form-ctrl__labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"form-ctrl__label-placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    helperEndId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n    hasHelperEndSlot,\n  } = props;\n\n  return (\n    <div\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        'has-helper-end': hasHelperEndSlot,\n        rtl,\n        'form-ctrl': true,\n      }}\n    >\n      <div class=\"form-ctrl__wrapper\">\n        {!floatLabel ? renderLabel({ ...props }) : ''}\n        <div\n          class={{\n            'form-ctrl__input': true,\n            'form-ctrl__textarea': type === 'textarea',\n          }}\n        >\n          {floatLabel && renderLabel({ ...props, rtl })}\n          {children}\n        </div>\n        {showInlineError || hasHelperSlot ? (\n          <div class=\"form-ctrl__more\" id={moreId}>\n            {!!showInlineError ? (\n              <div class=\"form-ctrl__error\" aria-live=\"polite\">\n                {errorMessage}\n              </div>\n            ) : (\n              ''\n            )}\n            <div class=\"form-ctrl__helper\">\n              <slot name=\"helper\" />\n            </div>\n          </div>\n        ) : (\n          ''\n        )}\n      </div>\n      {hasHelperEndSlot ? (\n        <div class=\"form-ctrl__helper-end\" id={helperEndId}>\n          <slot name=\"helper-end\" />\n        </div>\n      ) : (\n        ''\n      )}\n    </div>\n  );\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"form-ctrl__input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"form-ctrl__slot-start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon form-ctrl__clear-btn\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"form-ctrl__slot-value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"form-ctrl__slot-end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"],"version":3}

package/dist/components/grid.js

@@ -1,27 +1,204 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as debounce } from './throttle.js';
+import { h, Host, getElement, proxyCustomElement, HTMLElement as HTMLElement$1 } from '@stencil/core/internal/client';
 
-const gridCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--grid-col-gap:var(--nano-spacing-medium, 16px);--grid-row-gap:var(--nano-spacing-medium, 16px);--current-grid-size:\"'grid size: sm'\";display:block;opacity:0;transition:0.2s ease opacity;max-width:100%}:host .grid{display:grid;grid-gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit}:host(.ready){opacity:1}:host(.has-grid) .grid{display:grid}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-1){grid-column-start:1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-1){grid-row-start:1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-1){grid-column-end:span 1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-1){grid-row-end:span 1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-2){grid-column-start:2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-2){grid-row-start:2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-2){grid-column-end:span 2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-2){grid-row-end:span 2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-3){grid-column-start:3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-3){grid-row-start:3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-3){grid-column-end:span 3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-3){grid-row-end:span 3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-4){grid-column-start:4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-4){grid-row-start:4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-4){grid-column-end:span 4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-4){grid-row-end:span 4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-5){grid-column-start:5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-5){grid-row-start:5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-5){grid-column-end:span 5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-5){grid-row-end:span 5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-6){grid-column-start:6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-6){grid-row-start:6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-6){grid-column-end:span 6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-6){grid-row-end:span 6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-7){grid-column-start:7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-7){grid-row-start:7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-7){grid-column-end:span 7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-7){grid-row-end:span 7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-8){grid-column-start:8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-8){grid-row-start:8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-8){grid-column-end:span 8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-8){grid-row-end:span 8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-9){grid-column-start:9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-9){grid-row-start:9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-9){grid-column-end:span 9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-9){grid-row-end:span 9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-10){grid-column-start:10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-10){grid-row-start:10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-10){grid-column-end:span 10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-10){grid-row-end:span 10 !important}:host([content-panel]:not([content-panel=false])) .grid{grid-template-rows:auto 1fr}:host([full-height]:not([full-height=false])){block-size:100%}:host([full-height]:not([full-height=false])) .grid{grid-template-rows:1fr}:host([show-helper]:not([show-helper=false])) .grid{position:relative}:host([show-helper]:not([show-helper=false])) .grid::after{content:\"\";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(to right, rgba(126, 195, 241, 0.25), rgba(126, 195, 241, 0.25) var(--col-width), transparent var(--col-width), transparent var(--repeat-width));background-size:calc(100% + var(--grid-col-gap)) 100%;z-index:100}:host([show-helper]:not([show-helper=false])) .grid::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host(.nano-grid-1){--current-grid-size:\"grid size: 1\";--col-width:calc(100% - var(--grid-col-gap));--repeat-width:calc(100% / 1)}:host(.nano-grid-1) .grid{grid-template-columns:repeat(1, minmax(var(--col-width), 1fr))}:host(.nano-grid-2){--current-grid-size:\"grid size: 2\";--col-width:calc(50% - var(--grid-col-gap));--repeat-width:calc(100% / 2)}:host(.nano-grid-2) .grid{grid-template-columns:repeat(2, minmax(var(--col-width), 1fr))}:host(.nano-grid-3){--current-grid-size:\"grid size: 3\";--col-width:calc(33.3333333333% - var(--grid-col-gap));--repeat-width:calc(100% / 3)}:host(.nano-grid-3) .grid{grid-template-columns:repeat(3, minmax(var(--col-width), 1fr))}:host(.nano-grid-4){--current-grid-size:\"grid size: 4\";--col-width:calc(25% - var(--grid-col-gap));--repeat-width:calc(100% / 4)}:host(.nano-grid-4) .grid{grid-template-columns:repeat(4, minmax(var(--col-width), 1fr))}:host(.nano-grid-5){--current-grid-size:\"grid size: 5\";--col-width:calc(20% - var(--grid-col-gap));--repeat-width:calc(100% / 5)}:host(.nano-grid-5) .grid{grid-template-columns:repeat(5, minmax(var(--col-width), 1fr))}:host(.nano-grid-6){--current-grid-size:\"grid size: 6\";--col-width:calc(16.6666666667% - var(--grid-col-gap));--repeat-width:calc(100% / 6)}:host(.nano-grid-6) .grid{grid-template-columns:repeat(6, minmax(var(--col-width), 1fr))}:host(.nano-grid-7){--current-grid-size:\"grid size: 7\";--col-width:calc(14.2857142857% - var(--grid-col-gap));--repeat-width:calc(100% / 7)}:host(.nano-grid-7) .grid{grid-template-columns:repeat(7, minmax(var(--col-width), 1fr))}:host(.nano-grid-8){--current-grid-size:\"grid size: 8\";--col-width:calc(12.5% - var(--grid-col-gap));--repeat-width:calc(100% / 8)}:host(.nano-grid-8) .grid{grid-template-columns:repeat(8, minmax(var(--col-width), 1fr))}:host(.nano-grid-9){--current-grid-size:\"grid size: 9\";--col-width:calc(11.1111111111% - var(--grid-col-gap));--repeat-width:calc(100% / 9)}:host(.nano-grid-9) .grid{grid-template-columns:repeat(9, minmax(var(--col-width), 1fr))}:host(.nano-grid-10){--current-grid-size:\"grid size: 10\";--col-width:calc(10% - var(--grid-col-gap));--repeat-width:calc(100% / 10)}:host(.nano-grid-10) .grid{grid-template-columns:repeat(10, minmax(var(--col-width), 1fr))}";
+// import type { VNode, HTMLStencilElement } from "@stencil/core";
+const supportsConstructibleStylesheets = (() => {
+  try {
+    return !!new CSSStyleSheet();
+  }
+  catch (e) {
+    return false;
+  }
+})();
+const cacheKeys = new WeakMap();
+/**
+ * Dynamically create a constructible stylesheet which is applied to the component.
+ * The stylesheet is then cached for future instances of the component.
+ * @usage
+As a string:
+```
+@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+As a function:
+```
+@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+ * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.
+ * @returns `@ConstructableStyle` decorator
+ */
+function ConstructibleStyle(opts = {}) {
+  return (target, propertyKey) => {
+    if (!opts.cacheKeyProperty) {
+      opts.cacheKeyProperty = propertyKey;
+    }
+    const { componentWillLoad, render, componentWillRender } = target;
+    if (!componentWillLoad)
+      console.warn(`ConstructibleStyle requires you to have a \`componentWillLoad\` lifecycle method in \`${target.constructor.name}\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`);
+    if (supportsConstructibleStylesheets) {
+      const addStylesheet = (instance) => {
+        if (!instance[opts.cacheKeyProperty] ||
+          (cacheKeys.get(instance) &&
+            cacheKeys.get(instance) === instance[opts.cacheKeyProperty]))
+          return;
+        cacheKeys.set(instance, instance[opts.cacheKeyProperty]);
+        const host = getElement(instance);
+        const cssText = typeof instance[propertyKey] === 'function'
+          ? instance[propertyKey]()
+          : instance[propertyKey];
+        const root = (host.shadowRoot || document);
+        root.adoptedStyleSheets = [
+          ...(root.adoptedStyleSheets || []),
+          getOrCreateStylesheet(instance, target, cssText, opts),
+        ];
+      };
+      target.componentWillLoad = function () {
+        const willLoadResult = componentWillLoad && componentWillLoad.call(this);
+        addStylesheet(this);
+        return willLoadResult;
+      };
+      target.componentWillRender = function () {
+        const willRenderResult = componentWillRender && componentWillRender.call(this);
+        addStylesheet(this);
+        return willRenderResult;
+      };
+    }
+    else {
+      target.render = function () {
+        const cssText = typeof this[propertyKey] === 'function'
+          ? this[propertyKey]()
+          : this[propertyKey];
+        let renderedNode = render.call(this);
+        if (isHost(renderedNode)) {
+          appendStyleToHost(renderedNode, target.constructor.name, cssText);
+        }
+        else {
+          renderedNode = h(Host, null, renderedNode);
+          if (!('attachShadow' in HTMLElement.prototype)) {
+            appendStyleToHost(renderedNode, target.constructor.name, cssText);
+          }
+          else {
+            if (!target.__constructableStyle) {
+              const style = document.createElement('style');
+              style.setAttribute('type', 'text/css');
+              style.setAttribute('constructible-style', target.constructor.name);
+              style.innerHTML = cssText;
+              target.__constructableStyle = style;
+              document.head.appendChild(style);
+            }
+          }
+        }
+        return renderedNode;
+      };
+    }
+  };
+}
+function appendStyleToHost(node, targetName, cssText) {
+  (getHostChildren(node) || []).push(h("style", { type: "text/css", "constructible-style": targetName }, cssText));
+}
+function getOrCreateStylesheet(instance, target, cssText, opts) {
+  if (!target.__constructableStyle) {
+    target.__constructableStyle = {};
+  }
+  const key = instance[opts.cacheKeyProperty];
+  if (!target.__constructableStyle[key]) {
+    target.__constructableStyle[key] = new CSSStyleSheet();
+    target.__constructableStyle[key].replace(cssText);
+  }
+  return target.__constructableStyle[key];
+}
+function isHost(node) {
+  for (const prop in node) {
+    if (node.hasOwnProperty(prop)) {
+      if (node[prop] === Host) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function getHostChildren(node) {
+  for (const prop in node) {
+    if (node.hasOwnProperty(prop)) {
+      if (Array.isArray(node[prop])) {
+        return node[prop];
+      }
+    }
+  }
+}
+
+const gridCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--grid-col-gap:var(--nano-spacing-medium, 16px);--grid-row-gap:var(--nano-spacing-medium, 16px);--current-grid-size:\"grid size: s\";container-type:inline-size;display:block}:host .grid{display:grid;gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit}:host([show-helper]:not([show-helper=false])){position:relative}:host([show-helper]:not([show-helper=false])) .grid--helper{position:absolute;inset:0;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid--helper::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid__helper-item{display:none;background:rgba(126, 195, 241, 0.25)}";
 
-const STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];
-const Grid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+    return Reflect.metadata(k, v);
+};
+const Grid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.nanoBpChange = createEvent(this, "nanoBpChange", 7);
-    this.generalClasses = [''];
-    this.gridClass = null;
-    this.isSizes = [null];
-    this.ready = false;
-    this.isSmall = false;
-    this.isMedium = false;
-    this.isLarge = false;
-    this.isXL = false;
-    this.isXXL = false;
+    this.grids = [];
+    this.styles = () => {
+      const css = /* css */ `
+      ${this.grids
+        .map((bp) => /* css */ `
+          @container (min-width: ${typeof bp.breakpoint === 'number'
+        ? bp.breakpoint + 1 + 'px'
+        : bp.breakpoint}) {
+            .grid {
+              --current-grid-size: "grid size: ${bp.name}";
+              ${bp.template
+        ? `grid-template: ${bp.template};`
+        : `grid-template-columns: repeat(${bp.cols}, 1fr);`}
+            }
+            ${[...Array(bp.cols)]
+        .map((_, i) => {
+        const gItm = i + 1;
+        return /* css */ `
+                  .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}-row-start-${gItm}"],
+                  ::slotted([grid-states~="${bp.name}-row-start-${gItm}"]) {
+                    grid-row-start: ${gItm} !important;
+                  }
+                  .grid > [grid-states~="${bp.name}-col-span-${gItm}"],
+                  ::slotted([grid-states~="${bp.name}-col-span-${gItm}"]) {
+                    grid-column-end: span ${gItm} !important;
+                  }
+                  .grid > [grid-states~="${bp.name}-row-span-${gItm}"],
+                  ::slotted([grid-states~="${bp.name}-row-span-${gItm}"]) {
+                    grid-row-end: span ${gItm} !important;
+                  }
+              `;
+      })
+        .join('')}
+            ${this.showHelper &&
+        /* css */ `
+              .grid--helper :nth-child(-n+${bp.cols}) {
+                display: block !important;
+              }
+            `}
+          }
+        `)
+        .join('')}
+    `;
+      return css;
+    };
+    this.cacheKey = undefined;
     this.sSize = 300;
     this.mSize = 550;
     this.lSize = 800;
@@ -31,195 +208,103 @@ const Grid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.lCols = undefined;
     this.xlCols = undefined;
     this.xxlCols = undefined;
+    this.sTpl = undefined;
+    this.mTpl = undefined;
+    this.lTpl = undefined;
+    this.xlTpl = undefined;
+    this.xxlTpl = undefined;
     this.showHelper = false;
-    this.contentPanel = false;
-    this.fullHeight = false;
-    this.stateChange = debounce(this.stateChange.bind(this), 100);
-  }
-  propChanged() {
-    this.applySizeClasses();
   }
-  applySizeClasses() {
-    const size = this.currentWidth;
-    this.isSmall = false;
-    this.isMedium = false;
-    this.isLarge = false;
-    this.isXL = false;
-    this.isXXL = false;
-    this.generalClasses = [];
-    this.gridClass = null;
-    this.isSizes = [null];
-    this.isSmall = true;
-    this.generalClasses.push('is-small');
+  constructSizeArray() {
+    this.grids = [];
     if (this.sCols)
-      this.gridClass = `nano-grid-${this.sCols}`;
-    this.isSizes.push({ size: 's', active: true });
-    if (size > this.sSize) {
-      this.isMedium = true;
-      this.generalClasses.push('is-medium');
-      if (this.mCols)
-        this.gridClass = `nano-grid-${this.mCols}`;
-      this.isSizes.push({ size: 'm', active: true });
-    }
-    if (size > this.mSize) {
-      this.isLarge = true;
-      this.generalClasses.push('is-large');
-      if (this.lCols)
-        this.gridClass = `nano-grid-${this.lCols}`;
-      this.isSizes.push({ size: 'l', active: true });
-    }
-    if (size > this.lSize) {
-      this.isXL = true;
-      this.generalClasses.push('is-xl');
-      if (this.xlCols)
-        this.gridClass = `nano-grid-${this.xlCols}`;
-      this.isSizes.push({ size: 'xl', active: true });
-    }
-    if (size > this.xlSize) {
-      this.isXXL = true;
-      this.generalClasses.push('is-xxl');
-      if (this.xxlCols)
-        this.gridClass = `nano-grid-${this.xxlCols}`;
-      this.isSizes.push({ size: 'xxl', active: true });
-    }
-    this.el.style.setProperty('--current-grid-size', `'grid size: ${this.isSizes.slice().pop().size}'`);
-    this.applyChildrenClasses();
-    setTimeout(() => (this.ready = true), 0);
-  }
-  stateChange() {
-    this.nanoBpChange.emit(this.generalClasses);
-  }
-  applyChildrenClasses() {
-    const gridItems = this.el.querySelectorAll('nano-grid-item');
-    if (gridItems.length) {
-      gridItems.forEach((gridItem) => {
-        gridItem.changeBP(this.isSizes);
+      this.grids.push({
+        cols: this.sCols,
+        breakpoint: 0,
+        name: 's',
+        template: this.sTpl,
       });
-      return;
-    }
-    // this logic has been put into grid-item. Keep here for legacy for now
-    let stateArr = [''];
-    let itemState = '';
-    let found;
-    let classes;
-    const ctx = this.el;
-    // item states come in 4 possible flavours at every breakpoint. E.g.
-    // xl-col-span-2
-    // xl-col-start-2
-    // xl-row-span-2
-    // xl-row-start-2
-    // loop through all grid items with states.
-    [].map.call(ctx.children, (gItem) => {
-      if (!gItem.hasAttribute('grid-states'))
-        return;
-      // gridItems.forEach(gItem => {
-      // clear all previous grid state classnames
-      classes = gItem.className
-        .split(' ')
-        .filter((c) => !c.startsWith('nano-grid-'));
-      gItem.className = classes.join(' ').trim();
-      // get all potential states this element can have
-      const itemStates = gItem.getAttribute('grid-states').split(' ');
-      // loop through all potential state options: col & row span & start
-      STATEOPTS.forEach((stateOpt) => {
-        // reset found flag
-        found = false;
-        // loop through all the current valid breakpoints / sizes backwards because
-        // we only care about the item's state at the largest current breakpoint.
-        this.isSizes
-          .slice()
-          .reverse()
-          .forEach(function (size) {
-          if (found || !size)
-            return;
-          found = itemStates.find((state) => state.indexOf(`${size.size}-${stateOpt}`) === 0);
-          // found a state at this current size. apply class.
-          if (found) {
-            // clear previous grid state classname
-            classes = gItem.className
-              .split(' ')
-              .filter((c) => !c.includes('nano-grid-${stateOpt}'));
-            gItem.className = classes.join(' ').trim();
-            stateArr = found.split('-');
-            // remove the size of the state
-            stateArr.shift();
-            itemState = stateArr.join('-');
-            // add new class
-            gItem.classList.add(`nano-grid-${itemState}`);
-          }
-        });
+    if (this.mCols)
+      this.grids.push({
+        cols: this.mCols,
+        breakpoint: this.sSize,
+        name: 'm',
+        template: this.mTpl,
+      });
+    if (this.lSize)
+      this.grids.push({
+        cols: this.lCols,
+        breakpoint: this.mSize,
+        name: 'l',
+        template: this.lTpl,
+      });
+    if (this.xlCols)
+      this.grids.push({
+        cols: this.xlCols,
+        breakpoint: this.lSize,
+        name: 'xl',
+        template: this.xlTpl,
       });
-    });
+    if (this.xxlCols)
+      this.grids.push({
+        cols: this.xxlCols,
+        breakpoint: this.xlSize,
+        name: 'xxl',
+        template: this.xxlTpl,
+      });
+    this.cacheKey =
+      this.grids
+        .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template || ''}`)
+        .join('') +
+        '-helper-' +
+        this.showHelper;
   }
   componentWillLoad() {
-    const ctx = this.el;
-    [].map.call(ctx.children, (ele) => ele.classList.add('nano-griditem'));
-  }
-  componentDidLoad() {
-    if (!window['ResizeObserver'])
-      return;
-    this.ro = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (!entry.contentRect.width)
-          return;
-        this.currentWidth = entry.contentRect.width;
-        this.applySizeClasses();
-      }
-    });
-    this.ro.observe(this.el);
-  }
-  disconnectedCallback() {
-    if (this.ro)
-      this.ro.disconnect();
+    this.constructSizeArray();
   }
   render() {
-    return (h(Host, { class: {
-        [this.generalClasses.join(' ')]: true,
-        'has-grid': !!this.gridClass,
-        ready: this.ready,
-        [this.gridClass]: true,
-      } }, h("div", { class: {
-        grid: true,
-      } }, h("slot", null))));
+    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" })))))));
   }
-  get el() { return this; }
   static get watchers() { return {
-    "sSize": ["propChanged"],
-    "mSize": ["propChanged"],
-    "lSize": ["propChanged"],
-    "xlSize": ["propChanged"],
-    "sCols": ["propChanged"],
-    "mCols": ["propChanged"],
-    "lCols": ["propChanged"],
-    "xlCols": ["propChanged"],
-    "xxlCols": ["propChanged"],
-    "isSmall": ["stateChange"],
-    "isMedium": ["stateChange"],
-    "isLarge": ["stateChange"],
-    "isXL": ["stateChange"],
-    "isXXL": ["stateChange"]
+    "sTpl": ["constructSizeArray"],
+    "mTpl": ["constructSizeArray"],
+    "lTpl": ["constructSizeArray"],
+    "xlTpl": ["constructSizeArray"],
+    "xxlTpl": ["constructSizeArray"],
+    "sSize": ["constructSizeArray"],
+    "mSize": ["constructSizeArray"],
+    "lSize": ["constructSizeArray"],
+    "xlSize": ["constructSizeArray"],
+    "sCols": ["constructSizeArray"],
+    "mCols": ["constructSizeArray"],
+    "lCols": ["constructSizeArray"],
+    "xlCols": ["constructSizeArray"],
+    "xxlCols": ["constructSizeArray"],
+    "showHelper": ["constructSizeArray"]
   }; }
   static get style() { return gridCss; }
 }, [1, "nano-grid", {
-    "sSize": [2, "s-size"],
-    "mSize": [2, "m-size"],
-    "lSize": [2, "l-size"],
-    "xlSize": [2, "xl-size"],
+    "sSize": [8, "s-size"],
+    "mSize": [8, "m-size"],
+    "lSize": [8, "l-size"],
+    "xlSize": [8, "xl-size"],
     "sCols": [2, "s-cols"],
     "mCols": [2, "m-cols"],
     "lCols": [2, "l-cols"],
     "xlCols": [2, "xl-cols"],
     "xxlCols": [2, "xxl-cols"],
+    "sTpl": [1, "s-tpl"],
+    "mTpl": [1, "m-tpl"],
+    "lTpl": [1, "l-tpl"],
+    "xlTpl": [1, "xl-tpl"],
+    "xxlTpl": [1, "xxl-tpl"],
     "showHelper": [516, "show-helper"],
-    "contentPanel": [516, "content-panel"],
-    "fullHeight": [516, "full-height"],
-    "ready": [32],
-    "isSmall": [32],
-    "isMedium": [32],
-    "isLarge": [32],
-    "isXL": [32],
-    "isXXL": [32]
+    "cacheKey": [32]
   }]);
+__decorate([
+  ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }),
+  __metadata("design:type", Object)
+], Grid.prototype, "styles", void 0);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;