npm - @nanoporetech-digital/components - Versions diffs - 2.10.1 → 2.13.0 - Mend

@nanoporetech-digital/components 2.10.1 → 2.13.0

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

package/dist/components/grid.js CHANGED Viewed

@@ -2,7 +2,6 @@
  * Web Components for Nanopore digital Web Apps
  */
 import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
-import { i as index } from './ResizeObserver.es.js';
 import { d as debounce } from './throttle.js';
 const gridCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;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;-webkit-transition:0.2s ease opacity;transition:0.2s ease opacity}:host .grid{display:grid;grid-gap:var(--grid-row-gap) var(--grid-col-gap);height:inherit;min-height:inherit}:host .grid::slotted(*){border:0 solid transparent;background-clip:padding-box;border-width:var(--grid-row-gap) calc(var(--grid-col-gap) / 2)}:host(.ready){opacity:1}:host(.has-grid) .grid{display:-ms-grid;display:grid}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-1),:host(.has-grid) .grid::slotted(.nano-grid-col-start-1){-ms-grid-column:1 !important;grid-column-start:1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-1),:host(.has-grid) .grid::slotted(.nano-grid-row-start-1){-ms-grid-row:1 !important;grid-row-start:1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-1),:host(.has-grid) .grid::slotted(.nano-grid-col-span-1){-ms-grid-column-span:1 !important;grid-column-end:span 1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-1),:host(.has-grid) .grid::slotted(.nano-grid-row-span-1){-ms-grid-row-span:1 !important;grid-row-end:span 1 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-2),:host(.has-grid) .grid::slotted(.nano-grid-col-start-2){-ms-grid-column:2 !important;grid-column-start:2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-2),:host(.has-grid) .grid::slotted(.nano-grid-row-start-2){-ms-grid-row:2 !important;grid-row-start:2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-2),:host(.has-grid) .grid::slotted(.nano-grid-col-span-2){-ms-grid-column-span:2 !important;grid-column-end:span 2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-2),:host(.has-grid) .grid::slotted(.nano-grid-row-span-2){-ms-grid-row-span:2 !important;grid-row-end:span 2 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-3),:host(.has-grid) .grid::slotted(.nano-grid-col-start-3){-ms-grid-column:3 !important;grid-column-start:3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-3),:host(.has-grid) .grid::slotted(.nano-grid-row-start-3){-ms-grid-row:3 !important;grid-row-start:3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-3),:host(.has-grid) .grid::slotted(.nano-grid-col-span-3){-ms-grid-column-span:3 !important;grid-column-end:span 3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-3),:host(.has-grid) .grid::slotted(.nano-grid-row-span-3){-ms-grid-row-span:3 !important;grid-row-end:span 3 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-4),:host(.has-grid) .grid::slotted(.nano-grid-col-start-4){-ms-grid-column:4 !important;grid-column-start:4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-4),:host(.has-grid) .grid::slotted(.nano-grid-row-start-4){-ms-grid-row:4 !important;grid-row-start:4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-4),:host(.has-grid) .grid::slotted(.nano-grid-col-span-4){-ms-grid-column-span:4 !important;grid-column-end:span 4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-4),:host(.has-grid) .grid::slotted(.nano-grid-row-span-4){-ms-grid-row-span:4 !important;grid-row-end:span 4 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-5),:host(.has-grid) .grid::slotted(.nano-grid-col-start-5){-ms-grid-column:5 !important;grid-column-start:5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-5),:host(.has-grid) .grid::slotted(.nano-grid-row-start-5){-ms-grid-row:5 !important;grid-row-start:5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-5),:host(.has-grid) .grid::slotted(.nano-grid-col-span-5){-ms-grid-column-span:5 !important;grid-column-end:span 5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-5),:host(.has-grid) .grid::slotted(.nano-grid-row-span-5){-ms-grid-row-span:5 !important;grid-row-end:span 5 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-6),:host(.has-grid) .grid::slotted(.nano-grid-col-start-6){-ms-grid-column:6 !important;grid-column-start:6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-6),:host(.has-grid) .grid::slotted(.nano-grid-row-start-6){-ms-grid-row:6 !important;grid-row-start:6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-6),:host(.has-grid) .grid::slotted(.nano-grid-col-span-6){-ms-grid-column-span:6 !important;grid-column-end:span 6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-6),:host(.has-grid) .grid::slotted(.nano-grid-row-span-6){-ms-grid-row-span:6 !important;grid-row-end:span 6 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-7),:host(.has-grid) .grid::slotted(.nano-grid-col-start-7){-ms-grid-column:7 !important;grid-column-start:7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-7),:host(.has-grid) .grid::slotted(.nano-grid-row-start-7){-ms-grid-row:7 !important;grid-row-start:7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-7),:host(.has-grid) .grid::slotted(.nano-grid-col-span-7){-ms-grid-column-span:7 !important;grid-column-end:span 7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-7),:host(.has-grid) .grid::slotted(.nano-grid-row-span-7){-ms-grid-row-span:7 !important;grid-row-end:span 7 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-8),:host(.has-grid) .grid::slotted(.nano-grid-col-start-8){-ms-grid-column:8 !important;grid-column-start:8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-8),:host(.has-grid) .grid::slotted(.nano-grid-row-start-8){-ms-grid-row:8 !important;grid-row-start:8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-8),:host(.has-grid) .grid::slotted(.nano-grid-col-span-8){-ms-grid-column-span:8 !important;grid-column-end:span 8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-8),:host(.has-grid) .grid::slotted(.nano-grid-row-span-8){-ms-grid-row-span:8 !important;grid-row-end:span 8 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-9),:host(.has-grid) .grid::slotted(.nano-grid-col-start-9){-ms-grid-column:9 !important;grid-column-start:9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-9),:host(.has-grid) .grid::slotted(.nano-grid-row-start-9){-ms-grid-row:9 !important;grid-row-start:9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-9),:host(.has-grid) .grid::slotted(.nano-grid-col-span-9){-ms-grid-column-span:9 !important;grid-column-end:span 9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-9),:host(.has-grid) .grid::slotted(.nano-grid-row-span-9){-ms-grid-row-span:9 !important;grid-row-end:span 9 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-start-10),:host(.has-grid) .grid::slotted(.nano-grid-col-start-10){-ms-grid-column:10 !important;grid-column-start:10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-start-10),:host(.has-grid) .grid::slotted(.nano-grid-row-start-10){-ms-grid-row:10 !important;grid-row-start:10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-col-span-10),:host(.has-grid) .grid::slotted(.nano-grid-col-span-10){-ms-grid-column-span:10 !important;grid-column-end:span 10 !important}:host(.has-grid) .grid ::slotted(.nano-grid-row-span-10),:host(.has-grid) .grid::slotted(.nano-grid-row-span-10){-ms-grid-row-span:10 !important;grid-row-end:span 10 !important}:host(.has-grid) .grid::slotted(*){border-width:calc(var(--grid-row-gap) / 2) calc(var(--grid-col-gap) / 2)}:host([is-legacy]){overflow:hidden}:host([is-legacy]) .grid{margin-bottom:calc(var(--grid-row-gap) * -0.5);margin-top:calc(var(--grid-row-gap) * -0.5);margin-left:calc(var(--grid-col-gap) * -0.5);margin-right:calc(var(--grid-col-gap) * -0.5)}nano-grid :host-context[is-legacy]{overflow:visible}nano-grid :host-context[is-legacy] .grid::slotted(:first-child){border-top-width:calc(var(--grid-row-gap) / 2)}nano-grid :host-context[is-legacy] .grid::slotted(:last-child){border-bottom-width:calc(var(--grid-row-gap) / 2)}:host([content-panel]:not([content-panel=false])){display:-ms-flexbox;-ms-flex-direction:column}:host([content-panel]:not([content-panel=false])) .grid{-ms-grid-rows:auto 1fr;grid-template-rows:auto 1fr}:host([full-height]:not([full-height=false])){height:100%}:host([full-height]:not([full-height=false])) .grid{-ms-grid-rows:1fr;grid-template-rows:1fr}:host([full-height]:not([full-height=false])) .grid::slotted(*){min-height:100%}:host([show-helper]:not([show-helper=false])) .grid{position:relative}:host([show-helper]:not([show-helper=false])) .grid::after{content:\"\";position:absolute;left:0;right:0;bottom:0;top: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;width:100%;left:0;text-align:center;top:50%;-webkit-transform:translateY(-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{-ms-grid-columns:(minmax(var(--col-width), 1fr))[1];grid-template-columns:repeat(1, minmax(var(--col-width), 1fr))}:host(.nano-grid-1) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(2)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(3)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(4)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(5)){-ms-grid-row:5;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(6)){-ms-grid-row:6;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(7)){-ms-grid-row:7;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(8)){-ms-grid-row:8;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(9)){-ms-grid-row:9;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(10)){-ms-grid-row:10;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(11)){-ms-grid-row:11;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(12)){-ms-grid-row:12;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(13)){-ms-grid-row:13;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(14)){-ms-grid-row:14;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(15)){-ms-grid-row:15;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(16)){-ms-grid-row:16;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(17)){-ms-grid-row:17;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(18)){-ms-grid-row:18;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(19)){-ms-grid-row:19;-ms-grid-column:1}:host(.nano-grid-1) .grid::slotted(:nth-child(20)){-ms-grid-row:20;-ms-grid-column:1}: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{-ms-grid-columns:(minmax(var(--col-width), 1fr))[2];grid-template-columns:repeat(2, minmax(var(--col-width), 1fr))}:host(.nano-grid-2) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(3)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(4)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(5)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(6)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(7)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(8)){-ms-grid-row:4;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(9)){-ms-grid-row:5;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(10)){-ms-grid-row:5;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(11)){-ms-grid-row:6;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(12)){-ms-grid-row:6;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(13)){-ms-grid-row:7;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(14)){-ms-grid-row:7;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(15)){-ms-grid-row:8;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(16)){-ms-grid-row:8;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(17)){-ms-grid-row:9;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(18)){-ms-grid-row:9;-ms-grid-column:2}:host(.nano-grid-2) .grid::slotted(:nth-child(19)){-ms-grid-row:10;-ms-grid-column:1}:host(.nano-grid-2) .grid::slotted(:nth-child(20)){-ms-grid-row:10;-ms-grid-column:2}: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{-ms-grid-columns:(minmax(var(--col-width), 1fr))[3];grid-template-columns:repeat(3, minmax(var(--col-width), 1fr))}:host(.nano-grid-3) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(4)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(5)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(6)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(7)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(8)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(9)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(10)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(11)){-ms-grid-row:4;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(12)){-ms-grid-row:4;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(13)){-ms-grid-row:5;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(14)){-ms-grid-row:5;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(15)){-ms-grid-row:5;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(16)){-ms-grid-row:6;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(17)){-ms-grid-row:6;-ms-grid-column:2}:host(.nano-grid-3) .grid::slotted(:nth-child(18)){-ms-grid-row:6;-ms-grid-column:3}:host(.nano-grid-3) .grid::slotted(:nth-child(19)){-ms-grid-row:7;-ms-grid-column:1}:host(.nano-grid-3) .grid::slotted(:nth-child(20)){-ms-grid-row:7;-ms-grid-column:2}: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{-ms-grid-columns:(minmax(var(--col-width), 1fr))[4];grid-template-columns:repeat(4, minmax(var(--col-width), 1fr))}:host(.nano-grid-4) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-4) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-4) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-4) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-4) .grid::slotted(:nth-child(5)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-4) .grid::slotted(:nth-child(6)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-4) .grid::slotted(:nth-child(7)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-4) .grid::slotted(:nth-child(8)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-4) .grid::slotted(:nth-child(9)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-4) .grid::slotted(:nth-child(10)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-4) .grid::slotted(:nth-child(11)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-4) .grid::slotted(:nth-child(12)){-ms-grid-row:3;-ms-grid-column:4}:host(.nano-grid-4) .grid::slotted(:nth-child(13)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-4) .grid::slotted(:nth-child(14)){-ms-grid-row:4;-ms-grid-column:2}:host(.nano-grid-4) .grid::slotted(:nth-child(15)){-ms-grid-row:4;-ms-grid-column:3}:host(.nano-grid-4) .grid::slotted(:nth-child(16)){-ms-grid-row:4;-ms-grid-column:4}:host(.nano-grid-4) .grid::slotted(:nth-child(17)){-ms-grid-row:5;-ms-grid-column:1}:host(.nano-grid-4) .grid::slotted(:nth-child(18)){-ms-grid-row:5;-ms-grid-column:2}:host(.nano-grid-4) .grid::slotted(:nth-child(19)){-ms-grid-row:5;-ms-grid-column:3}:host(.nano-grid-4) .grid::slotted(:nth-child(20)){-ms-grid-row:5;-ms-grid-column:4}: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{-ms-grid-columns:(minmax(var(--col-width), 1fr))[5];grid-template-columns:repeat(5, minmax(var(--col-width), 1fr))}:host(.nano-grid-5) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-5) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-5) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-5) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-5) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-5) .grid::slotted(:nth-child(6)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-5) .grid::slotted(:nth-child(7)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-5) .grid::slotted(:nth-child(8)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-5) .grid::slotted(:nth-child(9)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-5) .grid::slotted(:nth-child(10)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-5) .grid::slotted(:nth-child(11)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-5) .grid::slotted(:nth-child(12)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-5) .grid::slotted(:nth-child(13)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-5) .grid::slotted(:nth-child(14)){-ms-grid-row:3;-ms-grid-column:4}:host(.nano-grid-5) .grid::slotted(:nth-child(15)){-ms-grid-row:3;-ms-grid-column:5}:host(.nano-grid-5) .grid::slotted(:nth-child(16)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-5) .grid::slotted(:nth-child(17)){-ms-grid-row:4;-ms-grid-column:2}:host(.nano-grid-5) .grid::slotted(:nth-child(18)){-ms-grid-row:4;-ms-grid-column:3}:host(.nano-grid-5) .grid::slotted(:nth-child(19)){-ms-grid-row:4;-ms-grid-column:4}:host(.nano-grid-5) .grid::slotted(:nth-child(20)){-ms-grid-row:4;-ms-grid-column:5}: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{-ms-grid-columns:(minmax(var(--col-width), 1fr))[6];grid-template-columns:repeat(6, minmax(var(--col-width), 1fr))}:host(.nano-grid-6) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-6) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-6) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-6) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-6) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-6) .grid::slotted(:nth-child(6)){-ms-grid-row:1;-ms-grid-column:6}:host(.nano-grid-6) .grid::slotted(:nth-child(7)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-6) .grid::slotted(:nth-child(8)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-6) .grid::slotted(:nth-child(9)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-6) .grid::slotted(:nth-child(10)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-6) .grid::slotted(:nth-child(11)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-6) .grid::slotted(:nth-child(12)){-ms-grid-row:2;-ms-grid-column:6}:host(.nano-grid-6) .grid::slotted(:nth-child(13)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-6) .grid::slotted(:nth-child(14)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-6) .grid::slotted(:nth-child(15)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-6) .grid::slotted(:nth-child(16)){-ms-grid-row:3;-ms-grid-column:4}:host(.nano-grid-6) .grid::slotted(:nth-child(17)){-ms-grid-row:3;-ms-grid-column:5}:host(.nano-grid-6) .grid::slotted(:nth-child(18)){-ms-grid-row:3;-ms-grid-column:6}:host(.nano-grid-6) .grid::slotted(:nth-child(19)){-ms-grid-row:4;-ms-grid-column:1}:host(.nano-grid-6) .grid::slotted(:nth-child(20)){-ms-grid-row:4;-ms-grid-column:2}: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{-ms-grid-columns:(minmax(var(--col-width), 1fr))[7];grid-template-columns:repeat(7, minmax(var(--col-width), 1fr))}:host(.nano-grid-7) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-7) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-7) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-7) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-7) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-7) .grid::slotted(:nth-child(6)){-ms-grid-row:1;-ms-grid-column:6}:host(.nano-grid-7) .grid::slotted(:nth-child(7)){-ms-grid-row:1;-ms-grid-column:7}:host(.nano-grid-7) .grid::slotted(:nth-child(8)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-7) .grid::slotted(:nth-child(9)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-7) .grid::slotted(:nth-child(10)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-7) .grid::slotted(:nth-child(11)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-7) .grid::slotted(:nth-child(12)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-7) .grid::slotted(:nth-child(13)){-ms-grid-row:2;-ms-grid-column:6}:host(.nano-grid-7) .grid::slotted(:nth-child(14)){-ms-grid-row:2;-ms-grid-column:7}:host(.nano-grid-7) .grid::slotted(:nth-child(15)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-7) .grid::slotted(:nth-child(16)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-7) .grid::slotted(:nth-child(17)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-7) .grid::slotted(:nth-child(18)){-ms-grid-row:3;-ms-grid-column:4}:host(.nano-grid-7) .grid::slotted(:nth-child(19)){-ms-grid-row:3;-ms-grid-column:5}:host(.nano-grid-7) .grid::slotted(:nth-child(20)){-ms-grid-row:3;-ms-grid-column:6}: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{-ms-grid-columns:(minmax(var(--col-width), 1fr))[8];grid-template-columns:repeat(8, minmax(var(--col-width), 1fr))}:host(.nano-grid-8) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-8) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-8) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-8) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-8) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-8) .grid::slotted(:nth-child(6)){-ms-grid-row:1;-ms-grid-column:6}:host(.nano-grid-8) .grid::slotted(:nth-child(7)){-ms-grid-row:1;-ms-grid-column:7}:host(.nano-grid-8) .grid::slotted(:nth-child(8)){-ms-grid-row:1;-ms-grid-column:8}:host(.nano-grid-8) .grid::slotted(:nth-child(9)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-8) .grid::slotted(:nth-child(10)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-8) .grid::slotted(:nth-child(11)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-8) .grid::slotted(:nth-child(12)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-8) .grid::slotted(:nth-child(13)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-8) .grid::slotted(:nth-child(14)){-ms-grid-row:2;-ms-grid-column:6}:host(.nano-grid-8) .grid::slotted(:nth-child(15)){-ms-grid-row:2;-ms-grid-column:7}:host(.nano-grid-8) .grid::slotted(:nth-child(16)){-ms-grid-row:2;-ms-grid-column:8}:host(.nano-grid-8) .grid::slotted(:nth-child(17)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-8) .grid::slotted(:nth-child(18)){-ms-grid-row:3;-ms-grid-column:2}:host(.nano-grid-8) .grid::slotted(:nth-child(19)){-ms-grid-row:3;-ms-grid-column:3}:host(.nano-grid-8) .grid::slotted(:nth-child(20)){-ms-grid-row:3;-ms-grid-column:4}: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{-ms-grid-columns:(minmax(var(--col-width), 1fr))[9];grid-template-columns:repeat(9, minmax(var(--col-width), 1fr))}:host(.nano-grid-9) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-9) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-9) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-9) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-9) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-9) .grid::slotted(:nth-child(6)){-ms-grid-row:1;-ms-grid-column:6}:host(.nano-grid-9) .grid::slotted(:nth-child(7)){-ms-grid-row:1;-ms-grid-column:7}:host(.nano-grid-9) .grid::slotted(:nth-child(8)){-ms-grid-row:1;-ms-grid-column:8}:host(.nano-grid-9) .grid::slotted(:nth-child(9)){-ms-grid-row:1;-ms-grid-column:9}:host(.nano-grid-9) .grid::slotted(:nth-child(10)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-9) .grid::slotted(:nth-child(11)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-9) .grid::slotted(:nth-child(12)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-9) .grid::slotted(:nth-child(13)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-9) .grid::slotted(:nth-child(14)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-9) .grid::slotted(:nth-child(15)){-ms-grid-row:2;-ms-grid-column:6}:host(.nano-grid-9) .grid::slotted(:nth-child(16)){-ms-grid-row:2;-ms-grid-column:7}:host(.nano-grid-9) .grid::slotted(:nth-child(17)){-ms-grid-row:2;-ms-grid-column:8}:host(.nano-grid-9) .grid::slotted(:nth-child(18)){-ms-grid-row:2;-ms-grid-column:9}:host(.nano-grid-9) .grid::slotted(:nth-child(19)){-ms-grid-row:3;-ms-grid-column:1}:host(.nano-grid-9) .grid::slotted(:nth-child(20)){-ms-grid-row:3;-ms-grid-column:2}: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{-ms-grid-columns:(minmax(var(--col-width), 1fr))[10];grid-template-columns:repeat(10, minmax(var(--col-width), 1fr))}:host(.nano-grid-10) .grid::slotted(:nth-child(1)){-ms-grid-row:1;-ms-grid-column:1}:host(.nano-grid-10) .grid::slotted(:nth-child(2)){-ms-grid-row:1;-ms-grid-column:2}:host(.nano-grid-10) .grid::slotted(:nth-child(3)){-ms-grid-row:1;-ms-grid-column:3}:host(.nano-grid-10) .grid::slotted(:nth-child(4)){-ms-grid-row:1;-ms-grid-column:4}:host(.nano-grid-10) .grid::slotted(:nth-child(5)){-ms-grid-row:1;-ms-grid-column:5}:host(.nano-grid-10) .grid::slotted(:nth-child(6)){-ms-grid-row:1;-ms-grid-column:6}:host(.nano-grid-10) .grid::slotted(:nth-child(7)){-ms-grid-row:1;-ms-grid-column:7}:host(.nano-grid-10) .grid::slotted(:nth-child(8)){-ms-grid-row:1;-ms-grid-column:8}:host(.nano-grid-10) .grid::slotted(:nth-child(9)){-ms-grid-row:1;-ms-grid-column:9}:host(.nano-grid-10) .grid::slotted(:nth-child(10)){-ms-grid-row:1;-ms-grid-column:10}:host(.nano-grid-10) .grid::slotted(:nth-child(11)){-ms-grid-row:2;-ms-grid-column:1}:host(.nano-grid-10) .grid::slotted(:nth-child(12)){-ms-grid-row:2;-ms-grid-column:2}:host(.nano-grid-10) .grid::slotted(:nth-child(13)){-ms-grid-row:2;-ms-grid-column:3}:host(.nano-grid-10) .grid::slotted(:nth-child(14)){-ms-grid-row:2;-ms-grid-column:4}:host(.nano-grid-10) .grid::slotted(:nth-child(15)){-ms-grid-row:2;-ms-grid-column:5}:host(.nano-grid-10) .grid::slotted(:nth-child(16)){-ms-grid-row:2;-ms-grid-column:6}:host(.nano-grid-10) .grid::slotted(:nth-child(17)){-ms-grid-row:2;-ms-grid-column:7}:host(.nano-grid-10) .grid::slotted(:nth-child(18)){-ms-grid-row:2;-ms-grid-column:8}:host(.nano-grid-10) .grid::slotted(:nth-child(19)){-ms-grid-row:2;-ms-grid-column:9}:host(.nano-grid-10) .grid::slotted(:nth-child(20)){-ms-grid-row:2;-ms-grid-column:10}";
@@ -194,7 +193,7 @@ let Grid = class extends HTMLElement {
     });
   }
   componentDidLoad() {
-    this.ro = new index((entries) => {
+    this.ro = new ResizeObserver((entries) => {
       for (const entry of entries) {
         if (!entry.contentRect.width)
           return;

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

	@@ -1 +1 @@
1	- {"file":"grid.js","mappings":"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","names":["ResizeObserver"],"sources":["./src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","./src/components/grid/grid.tsx"],"sourcesContent":["// we use &::slotted selectors to target ie ... this is a due to a bug with how stencil makes css scoping for browsers without shadow-dom. Need to be mindful incase they ever fix this!\n\n@import '../../global/style/nano-theme/base';\n\n// ie 11 fixes ... maximum numbers we can place on the grid ... upping this number decreases performance a lot.\n$max-grid-cols: 10;\n\n@mixin grid($size: 1) {\n @at-root :host(.nano-grid-#{$size}) {\n --current-grid-size: 'grid size: #{$size}';\n --col-width: calc(#{100 / $size}% - var(--grid-col-gap));\n --repeat-width: calc(100% / #{$size});\n\n .grid {\n grid-template-columns: repeat(#{$size}, minmax(var(--col-width), 1fr));\n\n $current-column: 1;\n $current-row: 1;\n\n @for $i from 1 through ($max-grid-cols * 2) {\n @if $current-column > $size {\n $current-column: 1;\n $current-row: $current-row + 1;\n }\n\n &::slotted(:nth-child(#{$i})) {\n -ms-grid-row: $current-row;\n -ms-grid-column: $current-column;\n // use margin because there's no grid gap.\n }\n $current-column: $current-column + 1;\n }\n }\n }\n}\n\n@mixin grid-spans {\n @for $i from 1 through $max-grid-cols {\n ::slotted(.nano-grid-col-start-#{$i}),\n &::slotted(.nano-grid-col-start-#{$i}) {\n grid-column-start: #{$i} !important;\n }\n\n ::slotted(.nano-grid-row-start-#{$i}),\n &::slotted(.nano-grid-row-start-#{$i}) {\n grid-row-start: #{$i} !important;\n }\n\n ::slotted(.nano-grid-col-span-#{$i}),\n &::slotted(.nano-grid-col-span-#{$i}) {\n grid-column-end: span #{$i} !important;\n }\n\n ::slotted(.nano-grid-row-span-#{$i}),\n &::slotted(.nano-grid-row-span-#{$i}) {\n grid-row-end: span #{$i} !important;\n }\n }\n}\n\n:host {\n /*\n @prop --grid-col-gap: gap between all columns. Defaults to theme's global padding\n * @prop --grid-row-gap: gap between all rows. Defaults to theme's global padding\n /\n\n --grid-col-gap: #{$spacing-medium};\n --grid-row-gap: #{$spacing-medium};\n --current-grid-size: \"'grid size: sm'\";\n\n display: block;\n opacity: 0;\n transition: 0.2s ease opacity;\n\n .grid {\n / autoprefixer: ignore next /\n display: grid;\n\n / autoprefixer: ignore next /\n grid-gap: var(--grid-row-gap) var(--grid-col-gap);\n height: inherit;\n min-height: inherit;\n\n &::slotted() {\n border: 0 solid transparent;\n background-clip: padding-box;\n border-width: var(--grid-row-gap) calc(var(--grid-col-gap) / 2);\n }\n }\n}\n\n:host(.ready) {\n opacity: 1;\n}\n\n:host(.has-grid) {\n .grid {\n display: grid;\n\n @include grid-spans;\n\n // ie 'grid gap'. use border because there's no grid gap.\n &::slotted() {\n border-width: calc(var(--grid-row-gap) / 2) calc(var(--grid-col-gap) / 2);\n }\n }\n}\n\n// All sorts of IE fuckery to recreate grid-gap when nested etc\n:host([is-legacy]) {\n overflow: hidden;\n\n .grid {\n margin-bottom: calc(var(--grid-row-gap) -0.5);\n margin-top: calc(var(--grid-row-gap) * -0.5);\n margin-left: calc(var(--grid-col-gap) * -0.5);\n margin-right: calc(var(--grid-col-gap) * -0.5);\n }\n}\n\n// nested\nnano-grid :host-context[is-legacy] {\n overflow: visible;\n\n .grid {\n &::slotted(:first-child) {\n border-top-width: calc(var(--grid-row-gap) / 2);\n }\n\n &::slotted(:last-child) {\n border-bottom-width: calc(var(--grid-row-gap) / 2);\n }\n }\n}\n\n:host([content-panel]:not([content-panel='false'])) {\n display: -ms-flexbox;\n -ms-flex-direction: column;\n\n .grid {\n grid-template-rows: auto 1fr;\n }\n}\n\n:host([full-height]:not([full-height='false'])) {\n height: 100%;\n\n .grid {\n grid-template-rows: 1fr;\n\n &::slotted() {\n min-height: 100%;\n }\n }\n}\n\n:host([show-helper]:not([show-helper='false'])) {\n .grid {\n position: relative;\n\n &::after {\n content: '';\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n pointer-events: none;\n background-image:\n repeating-linear-gradient(\n to right,\n hsla(204, 80%, 72%, 0.25),\n hsla(204, 80%, 72%, 0.25) var(--col-width),\n transparent var(--col-width),\n transparent var(--repeat-width)\n );\n background-size: calc(100% + var(--grid-col-gap)) 100%;\n z-index: 100;\n }\n\n &::before {\n content: var(--current-grid-size);\n font-size: 30px;\n position: absolute;\n width: 100%;\n left: 0;\n text-align: center;\n top: 50%;\n transform: translateY(-50%);\n color: rgba(0, 0, 0, 0.2);\n text-transform: uppercase;\n z-index: 99;\n pointer-events: none;\n }\n }\n}\n\n@for $i from 1 through $max-grid-cols {\n @include grid($i);\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Host,\n State,\n Watch,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { GridSizes } from '../../interface';\nimport { debounce } from '../../utils';\n\nconst STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\nconst CANSHADOW = !!document.head.attachShadow;\n\n/\n A context-aware CSS grid implementation.\n * Uses it's own width to choose column number - not screen width.\n /\n@Component({\n tag: 'nano-grid',\n styleUrl: 'grid.scss',\n shadow: true,\n})\nexport class Grid {\n @Element() private el: HTMLNanoGridElement;\n private ro: ResizeObserver;\n private generalClasses: Array<string> = [''];\n private gridClass: string = null;\n private isSizes: GridSizes[] = [null];\n private currentWidth: number;\n\n constructor() {\n this.stateChange = debounce(this.stateChange.bind(this), 100);\n }\n\n @State() ready: boolean = false;\n @State() isSmall = false;\n @State() isMedium = false;\n @State() isLarge = false;\n @State() isXL = false;\n @State() isXXL = false;\n\n /\n the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n /\n @Prop() sSize: number = 300;\n\n /\n the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n /\n @Prop() mSize: number = 550;\n\n /\n the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n /\n @Prop() lSize: number = 800;\n\n /\n the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n /\n @Prop() xlSize: number = 1000;\n\n /\n the number of columns the grid has at the small breakpoint.\n /\n @Prop() sCols: number;\n\n /\n the number of columns the grid has at the medium breakpoint.\n /\n @Prop() mCols: number;\n\n /\n the number of columns the grid has at the large breakpoint.\n /\n @Prop() lCols: number;\n\n /\n the number of columns the grid has at the xl breakpoint.\n /\n @Prop() xlCols: number;\n\n /\n the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)\n /\n @Prop() xxlCols: number;\n\n /\n shows a grid helper to visualise where columns are\n /\n @Prop({ reflect: true }) showHelper: boolean = false;\n\n /\n shortcut for a traditional website like grid (requires more than one row). The second row will auto expand to fill the grid height. The first row and > 2nd row will be the size of their content. e.g. header, body and footer.\n /\n @Prop({ reflect: true }) contentPanel: boolean = false;\n\n /\n Helper to make grid items expand to full height in IE11\n /\n @Prop({ reflect: true }) fullHeight: boolean = false;\n\n /\n Emitted when the `nano-grid` changes breakpoint\n */\n @Event() nanoBpChange: EventEmitter<string[]>;\n\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 propChanged() {\n this.applySizeClasses();\n }\n\n private applySizeClasses() {\n let size = this.currentWidth;\n\n this.isSmall = false;\n this.isMedium = false;\n this.isLarge = false;\n this.isXL = false;\n this.isXXL = false;\n\n this.generalClasses = [];\n this.gridClass = null;\n this.isSizes = [null];\n\n this.isSmall = true;\n this.generalClasses.push('is-small');\n if (this.sCols) this.gridClass = `nano-grid-${this.sCols}`;\n this.isSizes.push({ size: 's', active: true });\n\n if (size > this.sSize) {\n this.isMedium = true;\n this.generalClasses.push('is-medium');\n if (this.mCols) this.gridClass = `nano-grid-${this.mCols}`;\n this.isSizes.push({ size: 'm', active: true });\n }\n\n if (size > this.mSize) {\n this.isLarge = true;\n this.generalClasses.push('is-large');\n if (this.lCols) this.gridClass = `nano-grid-${this.lCols}`;\n this.isSizes.push({ size: 'l', active: true });\n }\n\n if (size > this.lSize) {\n this.isXL = true;\n this.generalClasses.push('is-xl');\n if (this.xlCols) this.gridClass = `nano-grid-${this.xlCols}`;\n this.isSizes.push({ size: 'xl', active: true });\n }\n\n if (size > this.xlSize) {\n this.isXXL = true;\n this.generalClasses.push('is-xxl');\n if (this.xxlCols) this.gridClass = `nano-grid-${this.xxlCols}`;\n this.isSizes.push({ size: 'xxl', active: true });\n }\n\n this.el.style.setProperty(\n '--current-grid-size',\n `'grid size: ${this.isSizes.slice().pop().size}'`\n );\n this.applyChildrenClasses();\n setTimeout(() => (this.ready = true), 0);\n }\n\n @Watch('isSmall')\n @Watch('isMedium')\n @Watch('isLarge')\n @Watch('isXL')\n @Watch('isXXL')\n stateChange() {\n this.nanoBpChange.emit(this.generalClasses);\n }\n\n private applyChildrenClasses() {\n let gridItems = this.el.querySelectorAll('nano-grid-item');\n if (gridItems.length) {\n gridItems.forEach((gridItem: HTMLNanoGridItemElement) => {\n gridItem.changeBP(this.isSizes);\n });\n return;\n }\n\n // this logic has been put into grid-item. Keep here for legacy for now\n let stateArr: Array<string> = [''],\n itemState: string = '',\n found: any,\n itemStates: Array<string>,\n classes: Array<string>,\n ctx: HTMLElement;\n\n if (!CANSHADOW) ctx = this.el.querySelector('.grid') \|\| this.el;\n else ctx = this.el;\n\n // item states come in 4 possible flavours at every breakpoint. E.g.\n // xl-col-span-2\n // xl-col-start-2\n // xl-row-span-2\n // xl-row-start-2\n\n // loop through all grid items with states.\n [].map.call(ctx.children, (gItem: HTMLElement) => {\n if (!gItem.hasAttribute('grid-states')) return;\n\n // gridItems.forEach(gItem => {\n\n // clear all previous grid state classnames\n classes = gItem.className\n .split(' ')\n .filter((c) => !c.startsWith('nano-grid-'));\n gItem.className = classes.join(' ').trim();\n\n // get all potential states this element can have\n itemStates = gItem.getAttribute('grid-states').split(' ');\n\n // loop through all potential state options: col & row span & start\n STATEOPTS.forEach((stateOpt) => {\n // reset found flag\n found = false;\n\n // loop through all the current valid breakpoints / sizes backwards because\n // we only care about the item's state at the largest current breakpoint.\n this.isSizes\n .slice()\n .reverse()\n .forEach(function (size) {\n if (found \|\| !size) return;\n found = itemStates.find(\n (state) => state.indexOf(`${size.size}-${stateOpt}`) === 0\n );\n\n // found a state at this current size. apply class.\n if (found) {\n // clear previous grid state classname\n classes = gItem.className\n .split(' ')\n .filter((c) => !c.includes('nano-grid-${stateOpt}'));\n gItem.className = classes.join(' ').trim();\n\n stateArr = found.split('-');\n\n // remove the size of the state\n stateArr.shift();\n itemState = stateArr.join('-');\n\n // add new class\n gItem.classList.add(`nano-grid-${itemState}`);\n }\n });\n });\n });\n }\n\n componentWillLoad() {\n let wrapper: HTMLElement, ctx;\n\n if (!CANSHADOW) ctx = this.el.querySelector('.grid') \|\| this.el;\n else ctx = this.el;\n\n [].map.call(ctx.children, (ele: HTMLElement) => {\n if (!CANSHADOW) {\n if (\n ele.classList.contains('nano-griditem') \|\|\n ele.nodeName === 'NANO-GRID-ITEM'\n )\n return;\n\n wrapper = document.createElement('div');\n if (ele.hasAttribute('grid-states')) {\n wrapper.setAttribute('grid-states', ele.getAttribute('grid-states'));\n ele.removeAttribute('grid-states');\n }\n\n this.el.insertBefore(wrapper, ele);\n wrapper.appendChild(ele);\n wrapper.classList.add('nano-griditem');\n } else if (ele.nodeName !== 'NANO-GRID-ITEM')\n ele.classList.add('nano-griditem');\n });\n }\n\n componentDidLoad() {\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n if (!entry.contentRect.width) return;\n this.currentWidth = entry.contentRect.width;\n this.applySizeClasses();\n }\n });\n this.ro.observe(this.el);\n }\n\n disconnectedCallback() {\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host\n class={{\n [this.generalClasses.join(' ')]: true,\n 'has-grid': !!this.gridClass,\n ready: this.ready,\n [this.gridClass]: true,\n }}\n is-legacy={!CANSHADOW ? true : undefined}\n >\n <div\n class={{\n grid: true,\n }}\n >\n <slot />\n </div>\n </Host>\n );\n }\n}\n\n// <Host class={{\n// [this.generalClasses.join(' ')]: true,\n// [this.gridClass]: true,\n// 'helper': this.showHelper,\n// 'has-grid': !!this.gridClass,\n// 'legacy': !CANSHADOW,\n// 'content-panel': this.contentPanel,\n// 'full-height': this.fullHeight,\n// 'ready': this.ready\n// }}></Host>\n"],"version":3}
1	+ {"file":"grid.js","mappings":"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","names":[],"sources":["./src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","./src/components/grid/grid.tsx"],"sourcesContent":["// we use &::slotted selectors to target ie ... this is a due to a bug with how stencil makes css scoping for browsers without shadow-dom. Need to be mindful incase they ever fix this!\n\n@import '../../global/style/nano-theme/base';\n\n// ie 11 fixes ... maximum numbers we can place on the grid ... upping this number decreases performance a lot.\n$max-grid-cols: 10;\n\n@mixin grid($size: 1) {\n @at-root :host(.nano-grid-#{$size}) {\n --current-grid-size: 'grid size: #{$size}';\n --col-width: calc(#{100 / $size}% - var(--grid-col-gap));\n --repeat-width: calc(100% / #{$size});\n\n .grid {\n grid-template-columns: repeat(#{$size}, minmax(var(--col-width), 1fr));\n\n $current-column: 1;\n $current-row: 1;\n\n @for $i from 1 through ($max-grid-cols * 2) {\n @if $current-column > $size {\n $current-column: 1;\n $current-row: $current-row + 1;\n }\n\n &::slotted(:nth-child(#{$i})) {\n -ms-grid-row: $current-row;\n -ms-grid-column: $current-column;\n // use margin because there's no grid gap.\n }\n $current-column: $current-column + 1;\n }\n }\n }\n}\n\n@mixin grid-spans {\n @for $i from 1 through $max-grid-cols {\n ::slotted(.nano-grid-col-start-#{$i}),\n &::slotted(.nano-grid-col-start-#{$i}) {\n grid-column-start: #{$i} !important;\n }\n\n ::slotted(.nano-grid-row-start-#{$i}),\n &::slotted(.nano-grid-row-start-#{$i}) {\n grid-row-start: #{$i} !important;\n }\n\n ::slotted(.nano-grid-col-span-#{$i}),\n &::slotted(.nano-grid-col-span-#{$i}) {\n grid-column-end: span #{$i} !important;\n }\n\n ::slotted(.nano-grid-row-span-#{$i}),\n &::slotted(.nano-grid-row-span-#{$i}) {\n grid-row-end: span #{$i} !important;\n }\n }\n}\n\n:host {\n /*\n @prop --grid-col-gap: gap between all columns. Defaults to theme's global padding\n * @prop --grid-row-gap: gap between all rows. Defaults to theme's global padding\n /\n\n --grid-col-gap: #{$spacing-medium};\n --grid-row-gap: #{$spacing-medium};\n --current-grid-size: \"'grid size: sm'\";\n\n display: block;\n opacity: 0;\n transition: 0.2s ease opacity;\n\n .grid {\n / autoprefixer: ignore next /\n display: grid;\n\n / autoprefixer: ignore next /\n grid-gap: var(--grid-row-gap) var(--grid-col-gap);\n height: inherit;\n min-height: inherit;\n\n &::slotted() {\n border: 0 solid transparent;\n background-clip: padding-box;\n border-width: var(--grid-row-gap) calc(var(--grid-col-gap) / 2);\n }\n }\n}\n\n:host(.ready) {\n opacity: 1;\n}\n\n:host(.has-grid) {\n .grid {\n display: grid;\n\n @include grid-spans;\n\n // ie 'grid gap'. use border because there's no grid gap.\n &::slotted() {\n border-width: calc(var(--grid-row-gap) / 2) calc(var(--grid-col-gap) / 2);\n }\n }\n}\n\n// All sorts of IE fuckery to recreate grid-gap when nested etc\n:host([is-legacy]) {\n overflow: hidden;\n\n .grid {\n margin-bottom: calc(var(--grid-row-gap) -0.5);\n margin-top: calc(var(--grid-row-gap) * -0.5);\n margin-left: calc(var(--grid-col-gap) * -0.5);\n margin-right: calc(var(--grid-col-gap) * -0.5);\n }\n}\n\n// nested\nnano-grid :host-context[is-legacy] {\n overflow: visible;\n\n .grid {\n &::slotted(:first-child) {\n border-top-width: calc(var(--grid-row-gap) / 2);\n }\n\n &::slotted(:last-child) {\n border-bottom-width: calc(var(--grid-row-gap) / 2);\n }\n }\n}\n\n:host([content-panel]:not([content-panel='false'])) {\n display: -ms-flexbox;\n -ms-flex-direction: column;\n\n .grid {\n grid-template-rows: auto 1fr;\n }\n}\n\n:host([full-height]:not([full-height='false'])) {\n height: 100%;\n\n .grid {\n grid-template-rows: 1fr;\n\n &::slotted() {\n min-height: 100%;\n }\n }\n}\n\n:host([show-helper]:not([show-helper='false'])) {\n .grid {\n position: relative;\n\n &::after {\n content: '';\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n pointer-events: none;\n background-image:\n repeating-linear-gradient(\n to right,\n hsla(204, 80%, 72%, 0.25),\n hsla(204, 80%, 72%, 0.25) var(--col-width),\n transparent var(--col-width),\n transparent var(--repeat-width)\n );\n background-size: calc(100% + var(--grid-col-gap)) 100%;\n z-index: 100;\n }\n\n &::before {\n content: var(--current-grid-size);\n font-size: 30px;\n position: absolute;\n width: 100%;\n left: 0;\n text-align: center;\n top: 50%;\n transform: translateY(-50%);\n color: rgba(0, 0, 0, 0.2);\n text-transform: uppercase;\n z-index: 99;\n pointer-events: none;\n }\n }\n}\n\n@for $i from 1 through $max-grid-cols {\n @include grid($i);\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Host,\n State,\n Watch,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { GridSizes } from '../../interface';\nimport { debounce } from '../../utils';\n\nconst STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\nconst CANSHADOW = !!document.head.attachShadow;\n\n/\n A context-aware CSS grid implementation.\n * Uses it's own width to choose column number - not screen width.\n /\n@Component({\n tag: 'nano-grid',\n styleUrl: 'grid.scss',\n shadow: true,\n})\nexport class Grid {\n @Element() private el: HTMLNanoGridElement;\n private ro: ResizeObserver;\n private generalClasses: Array<string> = [''];\n private gridClass: string = null;\n private isSizes: GridSizes[] = [null];\n private currentWidth: number;\n\n constructor() {\n this.stateChange = debounce(this.stateChange.bind(this), 100);\n }\n\n @State() ready: boolean = false;\n @State() isSmall = false;\n @State() isMedium = false;\n @State() isLarge = false;\n @State() isXL = false;\n @State() isXXL = false;\n\n /\n the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n /\n @Prop() sSize: number = 300;\n\n /\n the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n /\n @Prop() mSize: number = 550;\n\n /\n the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n /\n @Prop() lSize: number = 800;\n\n /\n the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n /\n @Prop() xlSize: number = 1000;\n\n /\n the number of columns the grid has at the small breakpoint.\n /\n @Prop() sCols: number;\n\n /\n the number of columns the grid has at the medium breakpoint.\n /\n @Prop() mCols: number;\n\n /\n the number of columns the grid has at the large breakpoint.\n /\n @Prop() lCols: number;\n\n /\n the number of columns the grid has at the xl breakpoint.\n /\n @Prop() xlCols: number;\n\n /\n the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)\n /\n @Prop() xxlCols: number;\n\n /\n shows a grid helper to visualise where columns are\n /\n @Prop({ reflect: true }) showHelper: boolean = false;\n\n /\n shortcut for a traditional website like grid (requires more than one row). The second row will auto expand to fill the grid height. The first row and > 2nd row will be the size of their content. e.g. header, body and footer.\n /\n @Prop({ reflect: true }) contentPanel: boolean = false;\n\n /\n Helper to make grid items expand to full height in IE11\n /\n @Prop({ reflect: true }) fullHeight: boolean = false;\n\n /\n Emitted when the `nano-grid` changes breakpoint\n */\n @Event() nanoBpChange: EventEmitter<string[]>;\n\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 propChanged() {\n this.applySizeClasses();\n }\n\n private applySizeClasses() {\n let size = this.currentWidth;\n\n this.isSmall = false;\n this.isMedium = false;\n this.isLarge = false;\n this.isXL = false;\n this.isXXL = false;\n\n this.generalClasses = [];\n this.gridClass = null;\n this.isSizes = [null];\n\n this.isSmall = true;\n this.generalClasses.push('is-small');\n if (this.sCols) this.gridClass = `nano-grid-${this.sCols}`;\n this.isSizes.push({ size: 's', active: true });\n\n if (size > this.sSize) {\n this.isMedium = true;\n this.generalClasses.push('is-medium');\n if (this.mCols) this.gridClass = `nano-grid-${this.mCols}`;\n this.isSizes.push({ size: 'm', active: true });\n }\n\n if (size > this.mSize) {\n this.isLarge = true;\n this.generalClasses.push('is-large');\n if (this.lCols) this.gridClass = `nano-grid-${this.lCols}`;\n this.isSizes.push({ size: 'l', active: true });\n }\n\n if (size > this.lSize) {\n this.isXL = true;\n this.generalClasses.push('is-xl');\n if (this.xlCols) this.gridClass = `nano-grid-${this.xlCols}`;\n this.isSizes.push({ size: 'xl', active: true });\n }\n\n if (size > this.xlSize) {\n this.isXXL = true;\n this.generalClasses.push('is-xxl');\n if (this.xxlCols) this.gridClass = `nano-grid-${this.xxlCols}`;\n this.isSizes.push({ size: 'xxl', active: true });\n }\n\n this.el.style.setProperty(\n '--current-grid-size',\n `'grid size: ${this.isSizes.slice().pop().size}'`\n );\n this.applyChildrenClasses();\n setTimeout(() => (this.ready = true), 0);\n }\n\n @Watch('isSmall')\n @Watch('isMedium')\n @Watch('isLarge')\n @Watch('isXL')\n @Watch('isXXL')\n stateChange() {\n this.nanoBpChange.emit(this.generalClasses);\n }\n\n private applyChildrenClasses() {\n let gridItems = this.el.querySelectorAll('nano-grid-item');\n if (gridItems.length) {\n gridItems.forEach((gridItem: HTMLNanoGridItemElement) => {\n gridItem.changeBP(this.isSizes);\n });\n return;\n }\n\n // this logic has been put into grid-item. Keep here for legacy for now\n let stateArr: Array<string> = [''],\n itemState: string = '',\n found: any,\n itemStates: Array<string>,\n classes: Array<string>,\n ctx: HTMLElement;\n\n if (!CANSHADOW) ctx = this.el.querySelector('.grid') \|\| this.el;\n else ctx = this.el;\n\n // item states come in 4 possible flavours at every breakpoint. E.g.\n // xl-col-span-2\n // xl-col-start-2\n // xl-row-span-2\n // xl-row-start-2\n\n // loop through all grid items with states.\n [].map.call(ctx.children, (gItem: HTMLElement) => {\n if (!gItem.hasAttribute('grid-states')) return;\n\n // gridItems.forEach(gItem => {\n\n // clear all previous grid state classnames\n classes = gItem.className\n .split(' ')\n .filter((c) => !c.startsWith('nano-grid-'));\n gItem.className = classes.join(' ').trim();\n\n // get all potential states this element can have\n itemStates = gItem.getAttribute('grid-states').split(' ');\n\n // loop through all potential state options: col & row span & start\n STATEOPTS.forEach((stateOpt) => {\n // reset found flag\n found = false;\n\n // loop through all the current valid breakpoints / sizes backwards because\n // we only care about the item's state at the largest current breakpoint.\n this.isSizes\n .slice()\n .reverse()\n .forEach(function (size) {\n if (found \|\| !size) return;\n found = itemStates.find(\n (state) => state.indexOf(`${size.size}-${stateOpt}`) === 0\n );\n\n // found a state at this current size. apply class.\n if (found) {\n // clear previous grid state classname\n classes = gItem.className\n .split(' ')\n .filter((c) => !c.includes('nano-grid-${stateOpt}'));\n gItem.className = classes.join(' ').trim();\n\n stateArr = found.split('-');\n\n // remove the size of the state\n stateArr.shift();\n itemState = stateArr.join('-');\n\n // add new class\n gItem.classList.add(`nano-grid-${itemState}`);\n }\n });\n });\n });\n }\n\n componentWillLoad() {\n let wrapper: HTMLElement, ctx;\n\n if (!CANSHADOW) ctx = this.el.querySelector('.grid') \|\| this.el;\n else ctx = this.el;\n\n [].map.call(ctx.children, (ele: HTMLElement) => {\n if (!CANSHADOW) {\n if (\n ele.classList.contains('nano-griditem') \|\|\n ele.nodeName === 'NANO-GRID-ITEM'\n )\n return;\n\n wrapper = document.createElement('div');\n if (ele.hasAttribute('grid-states')) {\n wrapper.setAttribute('grid-states', ele.getAttribute('grid-states'));\n ele.removeAttribute('grid-states');\n }\n\n this.el.insertBefore(wrapper, ele);\n wrapper.appendChild(ele);\n wrapper.classList.add('nano-griditem');\n } else if (ele.nodeName !== 'NANO-GRID-ITEM')\n ele.classList.add('nano-griditem');\n });\n }\n\n componentDidLoad() {\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n if (!entry.contentRect.width) return;\n this.currentWidth = entry.contentRect.width;\n this.applySizeClasses();\n }\n });\n this.ro.observe(this.el);\n }\n\n disconnectedCallback() {\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host\n class={{\n [this.generalClasses.join(' ')]: true,\n 'has-grid': !!this.gridClass,\n ready: this.ready,\n [this.gridClass]: true,\n }}\n is-legacy={!CANSHADOW ? true : undefined}\n >\n <div\n class={{\n grid: true,\n }}\n >\n <slot />\n </div>\n </Host>\n );\n }\n}\n\n// <Host class={{\n// [this.generalClasses.join(' ')]: true,\n// [this.gridClass]: true,\n// 'helper': this.showHelper,\n// 'has-grid': !!this.gridClass,\n// 'legacy': !CANSHADOW,\n// 'content-panel': this.contentPanel,\n// 'full-height': this.fullHeight,\n// 'ready': this.ready\n// }}></Host>\n"],"version":3}

package/dist/components/icon-button.js CHANGED Viewed

@@ -16,6 +16,10 @@ let IconButton = class extends HTMLElement {
     /** Set to true to disable the button. */
     this.disabled = false;
   }
+  /** Sets focus on the internal button */
+  async setFocus() {
+    this.button.focus();
+  }
   componentDidLoad() {
     focusVisible.observe(this.button);
   }
@@ -44,7 +48,8 @@ IconButton = /*@__PURE__*/ proxyCustomElement(IconButton, [2, "nano-icon-button"
     "label": [1],
     "disabled": [516],
     "href": [1],
-    "target": [1]
+    "target": [1],
+    "setFocus": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/icon-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"icon-button.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,ghEAAghE;;ICUzhE,UAAU;EALvB;;;;IAe2B,SAAI,GAAkC,QAAQ,CAAC;;IAa/C,aAAQ,GAAG,KAAK,CAAC;~~GA4C3C~~;~~EAlCC~~,gBAAgB;IACd,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACnC;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,MAAM;MAAE,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACpD;EAED,oBAAoB;IAClB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACrC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAI,GAAW,CAAC;IAElE,QACE,EAAC,OAAO,IACN,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;OACvC,gBACW,IAAI,CAAC,KAAK,EACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,SAAS,EAC5B,MAAM,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EAC1D,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,IAErD,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,iBAAc,MAAM,GAAG,CAChE,EACV;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=scoped","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --border-radius: defaults to #{$border-radius-medium};\n * @prop --border-radius: defaults to #{$border-radius-medium};\n * @prop --color: defaults to #{map.get($colors, palegrey)};\n * @prop --active-color: defaults to #{map.get($colors, darkblue--faded)};\n * @prop --hover-color: defaults to #{map.get($colors, blue)};\n * @prop --background: defaults to transparent;\n * @prop --padding: defaults to #{$spacing-small};\n /\n display: inline-block;\n\n --border-radius: #{$border-radius-medium};\n --active-color: #{map.get($colors, darkblue--faded)};\n --hover-color: #{map.get($colors, blue)};\n --nano-color-base: var(--color, #{map.get($colors, mediumgrey)});\n --background: transparent;\n --padding: #{$spacing-small};\n}\n\n.icon-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n border: none;\n border-radius: var(--border-radius);\n background: var(--background);\n font-size: inherit;\n color: var(--color);\n padding: var(--padding);\n cursor: pointer;\n appearance: none;\n -webkit-appearance: none;\n transition: box-shadow #{$transition-xfast} ease-in-out;\n\n &:hover:not(.icon-button--disabled),\n &:focus:not(.icon-button--disabled) {\n color: var(--hover-color);\n\n --nano-color-base: var(--hover-color);\n }\n\n &:active:not(.icon-button--disabled) {\n color: var(--active-color);\n\n --nano-color-base: var(--active-color);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.icon-button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.focus-visible.icon-button:focus {\n box-shadow: #{$control-focus-style};\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/* Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars. /\n\n@Component({\n tag: 'nano-icon-button',\n styleUrl: 'icon-button.scss',\n scoped: true,\n})\nexport class IconButton implements ComponentInterface {\n private button: HTMLButtonElement;\n\n /* The name of the icon to draw. /\n @Prop() iconName?: string;\n\n /* An external URL of an SVG file. /\n @Prop() iconSrc?: string;\n\n /* The default behavior of the button. /\n @Prop({ reflect: true }) type: 'submit' \| 'reset' \| 'button' = 'button';\n\n /* The name of the button, submitted as a pair with the button’s value as part of the form data. /\n @Prop({ reflect: true }) name?: string;\n\n /* Defines the value associated with the button’s name when it’s submitted with the form data. /\n @Prop({ reflect: true }) value?: string;\n\n /* A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does. /\n @Prop() label!: string;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered. /\n @Prop() href: string \| undefined;\n\n /* Specifies where to display the linked URL. Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. */\n @Prop() target: string \| undefined;\n\n componentDidLoad() {\n focusVisible.observe(this.button);\n }\n\n connectedCallback() {\n if (this.button) focusVisible.observe(this.button);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.button);\n }\n\n render() {\n const TagType = this.href === undefined ? 'button' : ('a' as any);\n\n return (\n <TagType\n part=\"base\"\n ref={(el) => (this.button = el)}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n aria-label={this.label}\n name={this.name}\n value={this.value}\n href={this.href \|\| undefined}\n target={this.href && this.target ? this.target : undefined}\n type={!this.href && this.type ? this.type : undefined}\n >\n <nano-icon name={this.iconName} src={this.iconSrc} aria-hidden=\"true\" />\n </TagType>\n );\n }\n}\n"],"version":3}
1	+ {"file":"icon-button.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,ghEAAghE;;ICUzhE,UAAU;EALvB;;;;IAe2B,SAAI,GAAkC,QAAQ,CAAC;;IAa/C,aAAQ,GAAG,KAAK,CAAC;GAkD3C;;EAtCC,MAAM,QAAQ;IACZ,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;GACrB;EAED,gBAAgB;IACd,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACnC;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,MAAM;MAAE,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACpD;EAED,oBAAoB;IAClB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACrC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAI,GAAW,CAAC;IAElE,QACE,EAAC,OAAO,IACN,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;OACvC,gBACW,IAAI,CAAC,KAAK,EACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,SAAS,EAC5B,MAAM,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EAC1D,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,IAErD,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,iBAAc,MAAM,GAAG,CAChE,EACV;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=scoped","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --border-radius: defaults to #{$border-radius-medium};\n * @prop --border-radius: defaults to #{$border-radius-medium};\n * @prop --color: defaults to #{map.get($colors, palegrey)};\n * @prop --active-color: defaults to #{map.get($colors, darkblue--faded)};\n * @prop --hover-color: defaults to #{map.get($colors, blue)};\n * @prop --background: defaults to transparent;\n * @prop --padding: defaults to #{$spacing-small};\n /\n display: inline-block;\n\n --border-radius: #{$border-radius-medium};\n --active-color: #{map.get($colors, darkblue--faded)};\n --hover-color: #{map.get($colors, blue)};\n --nano-color-base: var(--color, #{map.get($colors, mediumgrey)});\n --background: transparent;\n --padding: #{$spacing-small};\n}\n\n.icon-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n border: none;\n border-radius: var(--border-radius);\n background: var(--background);\n font-size: inherit;\n color: var(--color);\n padding: var(--padding);\n cursor: pointer;\n appearance: none;\n -webkit-appearance: none;\n transition: box-shadow #{$transition-xfast} ease-in-out;\n\n &:hover:not(.icon-button--disabled),\n &:focus:not(.icon-button--disabled) {\n color: var(--hover-color);\n\n --nano-color-base: var(--hover-color);\n }\n\n &:active:not(.icon-button--disabled) {\n color: var(--active-color);\n\n --nano-color-base: var(--active-color);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.icon-button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.focus-visible.icon-button:focus {\n box-shadow: #{$control-focus-style};\n}\n","import { Component, Prop, h, ComponentInterface, Method } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/* Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars. /\n\n@Component({\n tag: 'nano-icon-button',\n styleUrl: 'icon-button.scss',\n scoped: true,\n})\nexport class IconButton implements ComponentInterface {\n private button: HTMLButtonElement;\n\n /* The name of the icon to draw. /\n @Prop() iconName?: string;\n\n /* An external URL of an SVG file. /\n @Prop() iconSrc?: string;\n\n /* The default behavior of the button. /\n @Prop({ reflect: true }) type: 'submit' \| 'reset' \| 'button' = 'button';\n\n /* The name of the button, submitted as a pair with the button’s value as part of the form data. /\n @Prop({ reflect: true }) name?: string;\n\n /* Defines the value associated with the button’s name when it’s submitted with the form data. /\n @Prop({ reflect: true }) value?: string;\n\n /* A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does. /\n @Prop() label!: string;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered. /\n @Prop() href: string \| undefined;\n\n /* Specifies where to display the linked URL. Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. /\n @Prop() target: string \| undefined;\n\n /* Sets focus on the internal button */\n @Method()\n async setFocus() {\n this.button.focus();\n }\n\n componentDidLoad() {\n focusVisible.observe(this.button);\n }\n\n connectedCallback() {\n if (this.button) focusVisible.observe(this.button);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.button);\n }\n\n render() {\n const TagType = this.href === undefined ? 'button' : ('a' as any);\n\n return (\n <TagType\n part=\"base\"\n ref={(el) => (this.button = el)}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n aria-label={this.label}\n name={this.name}\n value={this.value}\n href={this.href \|\| undefined}\n target={this.href && this.target ? this.target : undefined}\n type={!this.href && this.type ? this.type : undefined}\n >\n <nano-icon name={this.iconName} src={this.iconSrc} aria-hidden=\"true\" />\n </TagType>\n );\n }\n}\n"],"version":3}

package/dist/components/index.js CHANGED Viewed

@@ -6,6 +6,7 @@ export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client'
 import { r as raf } from './index2.js';
 export { r as nanoRaf } from './index2.js';
 export { d as nanoDebounce, t as nanoThrottle } from './throttle.js';
+export { g as nanoGetTabElements } from './tabbable.js';
 const alertContent = (message, buttons = []) => {
   return `${message}
@@ -204,13 +205,6 @@ function nanoCreateDialog(body, buttons = [], dialogOptions) {
   }
 })();
-// Intersection observer
-if (!('IntersectionObserver' in window) ||
-  !('IntersectionObserverEntry' in window) ||
-  !('intersectionRatio' in window.IntersectionObserverEntry.prototype)) {
-  import(
-  /* webpackChunkName: 'polyfills-intersection-observer' */ './intersection-observer.js');
-}
 // scroll-behaviour
 if (!('scrollBehavior' in document.documentElement.style)) {
   setTimeout((_) => {

package/dist/components/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index.js","mappings":"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","names":[],"sources":["./src/components/alert/alert.helpers.ts","./src/components/dialog/dialog.helpers.ts","./node_modules/focus-options-polyfill/index.js","./src/global/script/global.ts"],"sourcesContent":["import { Color, AlertToastPosition } from '../../interface';\nimport { raf } from '../../utils';\n\ninterface ImperativeAlertOptions {\n color?: Color;\n duration?: number;\n closable?: boolean;\n}\n\ninterface ImperativeAlertButton {\n classes: string;\n content: string;\n handler?: (e: MouseEvent) => void;\n}\n\nconst alertContent = (\n message: string,\n buttons: ImperativeAlertButton[] = []\n) => {\n return `${message}\n ${\n buttons.length\n ? buttons\n .map(\n (btn, i) =>\n `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n )\n .join('')\n : ''\n }`;\n};\n\nconst addBtnHandlers = (\n alert: HTMLNanoAlertElement,\n buttons: ImperativeAlertButton[] = []\n) => {\n if (buttons.length) {\n Array.from(alert.querySelectorAll('button[slot=\"footer\"]')).map(\n (btn: HTMLElement) => {\n const foundBtn = buttons.find(\n (_fb, i) => btn.dataset.btn === i.toString()\n );\n if (foundBtn && foundBtn.handler) {\n btn.addEventListener('click', foundBtn.handler);\n }\n }\n );\n }\n};\n\n/*\n `nano-alert` helper to create toast notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param position - the position of the toast. Options are 'tr', 'tl', 'bl' & 'br'\n * @param icon - name for the `nano-icon`\n * @param alertOptions - { color: Color, duration: number, closable: boolean }\n * @returns `Promise<void>`\n /\nexport async function nanoShowToast(\n message: string,\n position: AlertToastPosition = 'tr',\n icon?: string \| undefined,\n alertOptions?: ImperativeAlertOptions,\n buttons: ImperativeAlertButton[] = []\n) {\n const opts: ImperativeAlertOptions = {\n color: 'primary',\n duration: 3000,\n closable: true,\n ...alertOptions,\n };\n icon = icon \|\| 'light/info-circle';\n const alert: HTMLNanoAlertElement = Object.assign(\n document.createElement('nano-alert'),\n {\n ...opts,\n open: false,\n innerHTML: `\n <nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>\n ${alertContent(message, buttons)}\n `,\n }\n );\n addBtnHandlers(alert, buttons);\n\n document.body.appendChild(alert);\n return new Promise<HTMLNanoAlertElement>((resolve) => {\n raf(async (_) => {\n await alert.toast(position);\n resolve(alert);\n });\n });\n}\n\n/\n `nano-alert` helper to create alert notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons - { classes: string; content: string; handler: () => {} }[]\n * @param icon - name for the `nano-icon`\n * @param label - descriptive label for assitive technology\n * @param alertOptions - { color: Color, duration: number, closable: boolean }\n * @returns `Promise<void>`\n /\nexport function nanoShowAlert(\n message: string,\n buttons: ImperativeAlertButton[] = [],\n label: string,\n icon: string \| undefined = 'light/info-circle',\n alertOptions: ImperativeAlertOptions = {}\n) {\n const opts: ImperativeAlertOptions = {\n color: 'primary',\n duration: Infinity,\n closable: false,\n ...alertOptions,\n };\n icon = icon \|\| 'light/info-circle';\n const alert: HTMLNanoAlertElement = Object.assign(\n document.createElement('nano-alert'),\n {\n ...opts,\n open: false,\n innerHTML: `\n ${icon ? `<nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>` : ''}\n ${alertContent(message, buttons)}\n `,\n }\n );\n addBtnHandlers(alert, buttons);\n\n document.body.appendChild(alert);\n return new Promise<HTMLNanoAlertElement>((resolve) => {\n setTimeout(async (_) => {\n await alert.alert(label);\n resolve(alert);\n }, 100);\n });\n}\n","interface ImperativeDialogOptions {\n noUserDismiss: boolean;\n noHeader?: boolean;\n noFooter?: boolean;\n label: string;\n}\n/\n `nano-dialog` helper to create dialog modals imperatively.\n * @param body - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons - { classes: string; content: string; handler: () => {} }[]\n * @param dialogOptions - { noUserDismiss: boolean, noHeader?: boolean, noFooter?: boolean, label: string }\n * @returns `Promise<void>`\n /\nexport function nanoCreateDialog(\n body: string,\n buttons: { classes: string; content: string; handler: () => {} }[] = [],\n dialogOptions?: ImperativeDialogOptions\n) {\n const opts: ImperativeDialogOptions = {\n noUserDismiss: false,\n label: 'Dialog',\n ...dialogOptions,\n };\n const dialog: HTMLNanoDialogElement = Object.assign(\n document.createElement('nano-dialog'),\n {\n ...opts,\n open: false,\n innerHTML: `\n ${body}\n ${\n buttons.length\n ? buttons\n .map(\n (btn, i) =>\n `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n )\n .join('')\n : ''\n }`,\n }\n );\n\n if (buttons.length) {\n Array.from(dialog.querySelectorAll('button[slot=\"footer\"]')).map(\n (btn: HTMLElement) => {\n const foundBtn = buttons.find(\n (_fb, i) => btn.dataset.btn === i.toString()\n );\n if (foundBtn && foundBtn.handler) {\n btn.addEventListener('click', foundBtn.handler);\n }\n }\n );\n }\n\n document.body.appendChild(dialog);\n return dialog;\n}\n","// focus - focusOptions - preventScroll polyfill\n(function() {\n if (\n typeof window === \"undefined\" \|\|\n typeof document === \"undefined\" \|\|\n typeof HTMLElement === \"undefined\"\n ) {\n return;\n }\n\n var supportsPreventScrollOption = false;\n try {\n var focusElem = document.createElement(\"div\");\n focusElem.addEventListener(\n \"focus\",\n function(event) {\n event.preventDefault();\n event.stopPropagation();\n },\n true\n );\n focusElem.focus(\n Object.defineProperty({}, \"preventScroll\", {\n get: function() {\n // Edge v18 gives a false positive for supporting inputs\n if (\n navigator &&\n typeof navigator.userAgent !== 'undefined' &&\n navigator.userAgent &&\n navigator.userAgent.match(/Edge\\/1[7-8]/)) {\n return supportsPreventScrollOption = false\n }\n\n supportsPreventScrollOption = true;\n }\n })\n );\n } catch (e) {}\n\n if (\n HTMLElement.prototype.nativeFocus === undefined &&\n !supportsPreventScrollOption\n ) {\n HTMLElement.prototype.nativeFocus = HTMLElement.prototype.focus;\n\n var calcScrollableElements = function(element) {\n var parent = element.parentNode;\n var scrollableElements = [];\n var rootScrollingElement =\n document.scrollingElement \|\| document.documentElement;\n\n while (parent && parent !== rootScrollingElement) {\n if (\n parent.offsetHeight < parent.scrollHeight \|\|\n parent.offsetWidth < parent.scrollWidth\n ) {\n scrollableElements.push([\n parent,\n parent.scrollTop,\n parent.scrollLeft\n ]);\n }\n parent = parent.parentNode;\n }\n parent = rootScrollingElement;\n scrollableElements.push([parent, parent.scrollTop, parent.scrollLeft]);\n\n return scrollableElements;\n };\n\n var restoreScrollPosition = function(scrollableElements) {\n for (var i = 0; i < scrollableElements.length; i++) {\n scrollableElements[i][0].scrollTop = scrollableElements[i][1];\n scrollableElements[i][0].scrollLeft = scrollableElements[i][2];\n }\n scrollableElements = [];\n };\n\n var patchedFocus = function(args) {\n if (args && args.preventScroll) {\n var evScrollableElements = calcScrollableElements(this);\n if (typeof setTimeout === 'function') {\n var thisElem = this;\n setTimeout(function () {\n thisElem.nativeFocus();\n restoreScrollPosition(evScrollableElements);\n }, 0);\n } else {\n this.nativeFocus();\n restoreScrollPosition(evScrollableElements);\n }\n }\n else {\n this.nativeFocus();\n }\n };\n\n HTMLElement.prototype.focus = patchedFocus;\n }\n})();\n","import { Build } from '@stencil/core';\n\n// focus options\n\nimport 'focus-options-polyfill';\n\n// Intersection observer\n\nif (\n !('IntersectionObserver' in window) \|\|\n !('IntersectionObserverEntry' in window) \|\|\n !('intersectionRatio' in window.IntersectionObserverEntry.prototype)\n) {\n import(\n / webpackChunkName: 'polyfills-intersection-observer' / 'intersection-observer'\n );\n}\n\n// scroll-behaviour\n\nif (!('scrollBehavior' in document.documentElement.style)) {\n setTimeout((_) => {\n import(\n / webpackChunkName: 'polyfills-scroll-behavior' */ 'scroll-behavior-polyfill'\n ).then((_) => {\n document.documentElement.style.scrollBehavior = 'smooth';\n });\n }, 0);\n} else document.documentElement.style.scrollBehavior = 'smooth';\n\n// fire global 'ready' event when everything is hydrated\n\nif (Build.isBrowser) {\n const docEle = document.documentElement;\n const docIsReady = () => {\n if (!docEle.classList.contains('hydrated')) return false;\n document.documentElement.dispatchEvent(\n new CustomEvent('nanoComponentsReady')\n );\n return true;\n };\n\n if (!docIsReady()) {\n let mutationO = new MutationObserver((_) => {\n if (docIsReady()) {\n mutationO.disconnect();\n mutationO = null;\n }\n });\n\n mutationO.observe(document.documentElement, {\n childList: false,\n subtree: false,\n attributes: true,\n });\n }\n}\n"],"version":3}
1	+ {"file":"index.js","mappings":"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","names":[],"sources":["./src/components/alert/alert.helpers.ts","./src/components/dialog/dialog.helpers.ts","./node_modules/focus-options-polyfill/index.js","./src/global/script/global.ts"],"sourcesContent":["import { Color, AlertToastPosition } from '../../interface';\nimport { raf } from '../../utils';\n\ninterface ImperativeAlertOptions {\n color?: Color;\n duration?: number;\n closable?: boolean;\n}\n\ninterface ImperativeAlertButton {\n classes: string;\n content: string;\n handler?: (e: MouseEvent) => void;\n}\n\nconst alertContent = (\n message: string,\n buttons: ImperativeAlertButton[] = []\n) => {\n return `${message}\n ${\n buttons.length\n ? buttons\n .map(\n (btn, i) =>\n `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n )\n .join('')\n : ''\n }`;\n};\n\nconst addBtnHandlers = (\n alert: HTMLNanoAlertElement,\n buttons: ImperativeAlertButton[] = []\n) => {\n if (buttons.length) {\n Array.from(alert.querySelectorAll('button[slot=\"footer\"]')).map(\n (btn: HTMLElement) => {\n const foundBtn = buttons.find(\n (_fb, i) => btn.dataset.btn === i.toString()\n );\n if (foundBtn && foundBtn.handler) {\n btn.addEventListener('click', foundBtn.handler);\n }\n }\n );\n }\n};\n\n/*\n `nano-alert` helper to create toast notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param position - the position of the toast. Options are 'tr', 'tl', 'bl' & 'br'\n * @param icon - name for the `nano-icon`\n * @param alertOptions - { color: Color, duration: number, closable: boolean }\n * @returns `Promise<void>`\n /\nexport async function nanoShowToast(\n message: string,\n position: AlertToastPosition = 'tr',\n icon?: string \| undefined,\n alertOptions?: ImperativeAlertOptions,\n buttons: ImperativeAlertButton[] = []\n) {\n const opts: ImperativeAlertOptions = {\n color: 'primary',\n duration: 3000,\n closable: true,\n ...alertOptions,\n };\n icon = icon \|\| 'light/info-circle';\n const alert: HTMLNanoAlertElement = Object.assign(\n document.createElement('nano-alert'),\n {\n ...opts,\n open: false,\n innerHTML: `\n <nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>\n ${alertContent(message, buttons)}\n `,\n }\n );\n addBtnHandlers(alert, buttons);\n\n document.body.appendChild(alert);\n return new Promise<HTMLNanoAlertElement>((resolve) => {\n raf(async (_) => {\n await alert.toast(position);\n resolve(alert);\n });\n });\n}\n\n/\n `nano-alert` helper to create alert notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons - { classes: string; content: string; handler: () => {} }[]\n * @param icon - name for the `nano-icon`\n * @param label - descriptive label for assitive technology\n * @param alertOptions - { color: Color, duration: number, closable: boolean }\n * @returns `Promise<void>`\n /\nexport function nanoShowAlert(\n message: string,\n buttons: ImperativeAlertButton[] = [],\n label: string,\n icon: string \| undefined = 'light/info-circle',\n alertOptions: ImperativeAlertOptions = {}\n) {\n const opts: ImperativeAlertOptions = {\n color: 'primary',\n duration: Infinity,\n closable: false,\n ...alertOptions,\n };\n icon = icon \|\| 'light/info-circle';\n const alert: HTMLNanoAlertElement = Object.assign(\n document.createElement('nano-alert'),\n {\n ...opts,\n open: false,\n innerHTML: `\n ${icon ? `<nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>` : ''}\n ${alertContent(message, buttons)}\n `,\n }\n );\n addBtnHandlers(alert, buttons);\n\n document.body.appendChild(alert);\n return new Promise<HTMLNanoAlertElement>((resolve) => {\n setTimeout(async (_) => {\n await alert.alert(label);\n resolve(alert);\n }, 100);\n });\n}\n","interface ImperativeDialogOptions {\n noUserDismiss: boolean;\n noHeader?: boolean;\n noFooter?: boolean;\n label: string;\n}\n/\n `nano-dialog` helper to create dialog modals imperatively.\n * @param body - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons - { classes: string; content: string; handler: () => {} }[]\n * @param dialogOptions - { noUserDismiss: boolean, noHeader?: boolean, noFooter?: boolean, label: string }\n * @returns `Promise<void>`\n /\nexport function nanoCreateDialog(\n body: string,\n buttons: { classes: string; content: string; handler: () => {} }[] = [],\n dialogOptions?: ImperativeDialogOptions\n) {\n const opts: ImperativeDialogOptions = {\n noUserDismiss: false,\n label: 'Dialog',\n ...dialogOptions,\n };\n const dialog: HTMLNanoDialogElement = Object.assign(\n document.createElement('nano-dialog'),\n {\n ...opts,\n open: false,\n innerHTML: `\n ${body}\n ${\n buttons.length\n ? buttons\n .map(\n (btn, i) =>\n `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n )\n .join('')\n : ''\n }`,\n }\n );\n\n if (buttons.length) {\n Array.from(dialog.querySelectorAll('button[slot=\"footer\"]')).map(\n (btn: HTMLElement) => {\n const foundBtn = buttons.find(\n (_fb, i) => btn.dataset.btn === i.toString()\n );\n if (foundBtn && foundBtn.handler) {\n btn.addEventListener('click', foundBtn.handler);\n }\n }\n );\n }\n\n document.body.appendChild(dialog);\n return dialog;\n}\n","// focus - focusOptions - preventScroll polyfill\n(function() {\n if (\n typeof window === \"undefined\" \|\|\n typeof document === \"undefined\" \|\|\n typeof HTMLElement === \"undefined\"\n ) {\n return;\n }\n\n var supportsPreventScrollOption = false;\n try {\n var focusElem = document.createElement(\"div\");\n focusElem.addEventListener(\n \"focus\",\n function(event) {\n event.preventDefault();\n event.stopPropagation();\n },\n true\n );\n focusElem.focus(\n Object.defineProperty({}, \"preventScroll\", {\n get: function() {\n // Edge v18 gives a false positive for supporting inputs\n if (\n navigator &&\n typeof navigator.userAgent !== 'undefined' &&\n navigator.userAgent &&\n navigator.userAgent.match(/Edge\\/1[7-8]/)) {\n return supportsPreventScrollOption = false\n }\n\n supportsPreventScrollOption = true;\n }\n })\n );\n } catch (e) {}\n\n if (\n HTMLElement.prototype.nativeFocus === undefined &&\n !supportsPreventScrollOption\n ) {\n HTMLElement.prototype.nativeFocus = HTMLElement.prototype.focus;\n\n var calcScrollableElements = function(element) {\n var parent = element.parentNode;\n var scrollableElements = [];\n var rootScrollingElement =\n document.scrollingElement \|\| document.documentElement;\n\n while (parent && parent !== rootScrollingElement) {\n if (\n parent.offsetHeight < parent.scrollHeight \|\|\n parent.offsetWidth < parent.scrollWidth\n ) {\n scrollableElements.push([\n parent,\n parent.scrollTop,\n parent.scrollLeft\n ]);\n }\n parent = parent.parentNode;\n }\n parent = rootScrollingElement;\n scrollableElements.push([parent, parent.scrollTop, parent.scrollLeft]);\n\n return scrollableElements;\n };\n\n var restoreScrollPosition = function(scrollableElements) {\n for (var i = 0; i < scrollableElements.length; i++) {\n scrollableElements[i][0].scrollTop = scrollableElements[i][1];\n scrollableElements[i][0].scrollLeft = scrollableElements[i][2];\n }\n scrollableElements = [];\n };\n\n var patchedFocus = function(args) {\n if (args && args.preventScroll) {\n var evScrollableElements = calcScrollableElements(this);\n if (typeof setTimeout === 'function') {\n var thisElem = this;\n setTimeout(function () {\n thisElem.nativeFocus();\n restoreScrollPosition(evScrollableElements);\n }, 0);\n } else {\n this.nativeFocus();\n restoreScrollPosition(evScrollableElements);\n }\n }\n else {\n this.nativeFocus();\n }\n };\n\n HTMLElement.prototype.focus = patchedFocus;\n }\n})();\n","import { Build } from '@stencil/core';\n\n// focus options\n\nimport 'focus-options-polyfill';\n\n// scroll-behaviour\n\nif (!('scrollBehavior' in document.documentElement.style)) {\n setTimeout((_) => {\n import(\n / webpackChunkName: 'polyfills-scroll-behavior' */ 'scroll-behavior-polyfill'\n ).then((_) => {\n document.documentElement.style.scrollBehavior = 'smooth';\n });\n }, 0);\n} else document.documentElement.style.scrollBehavior = 'smooth';\n\n// fire global 'ready' event when everything is hydrated\n\nif (Build.isBrowser) {\n const docEle = document.documentElement;\n const docIsReady = () => {\n if (!docEle.classList.contains('hydrated')) return false;\n document.documentElement.dispatchEvent(\n new CustomEvent('nanoComponentsReady')\n );\n return true;\n };\n\n if (!docIsReady()) {\n let mutationO = new MutationObserver((_) => {\n if (docIsReady()) {\n mutationO.disconnect();\n mutationO = null;\n }\n });\n\n mutationO.observe(document.documentElement, {\n childList: false,\n subtree: false,\n attributes: true,\n });\n }\n}\n"],"version":3}

package/dist/components/input.js CHANGED Viewed

@@ -173,6 +173,7 @@ let Input = class extends HTMLElement {
       this.nativeInput.dispatchEvent(event);
     };
     this.validate = debounce(this.validate, 50);
+    this.handleBlur = this.handleBlur.bind(this);
   }
   get nativeInputWrap() {
     return this._nativeInputWrap;
@@ -258,6 +259,15 @@ let Input = class extends HTMLElement {
       this.nativeInput.click();
     }
   }
+  /**
+   * Sets focus and select the text on the specified `nano-input`. Use this method instead of the global
+   * `input.select()`.
+   */
+  async select() {
+    if (this.nativeInput) {
+      this.nativeInput.select();
+    }
+  }
   /**
    * Returns the native `<input>` element used under the hood.
    */
@@ -287,11 +297,14 @@ let Input = class extends HTMLElement {
     const kev = e;
     let target;
     raf(() => {
-      if (kev.key) {
+      if (e instanceof KeyboardEvent && kev.key) {
         if (kev.key !== 'Tab')
           return;
         target = document.activeElement;
       }
+      else if (e instanceof FocusEvent) {
+        target = document.activeElement;
+      }
       else
         target = e.target;
       if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {
@@ -396,10 +409,10 @@ let Input = class extends HTMLElement {
       disabled,
       clearControl: this.clearInput,
     }))(this);
-    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': this.hasValue(), 'has-focus': this.hasFocus, 'is-invalid': this._invalid }) }, h(FormControlWrap, Object.assign({}, wrapOptions), h(FormControl, Object.assign({}, controlOptions, { onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }), this.type !== 'textarea' && (h("input", { id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h("textarea", { rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': this.hasValue(), 'has-focus': this.hasFocus, 'is-invalid': this._invalid }) }, h(FormControlWrap, Object.assign({}, wrapOptions), h(FormControl, Object.assign({}, controlOptions, { onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }), this.type !== 'textarea' && (h("input", { id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h("textarea", { rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
         'input__native-ctrl': true,
         input__resizable: this.resize === 'true',
-      }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate }))), h("slot", null))));
+      }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur }))), h("slot", null))));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -465,6 +478,7 @@ Input = /*@__PURE__*/ proxyCustomElement(Input, [6, "nano-input", {
     "_invalid": [32],
     "reportValidity": [64],
     "setFocus": [64],
+    "select": [64],
     "getInputElement": [64],
     "showError": [64]
   }, [[16, "reset", "onReset"], [17, "mousedown", "handleBlur"], [0, "keydown", "handleBlur"]]]);