@nanoporetech-digital/components 2.9.0 → 2.11.0

package/dist/esm-es5/nano-grid_3.entry.js

@@ -1,5 +1,5 @@
 var __awaiter=this&&this.__awaiter||function(i,r,t,o){function d(i){return i instanceof t?i:new t((function(r){r(i)}))}return new(t||(t=Promise))((function(t,s){function n(i){try{e(o.next(i))}catch(r){s(r)}}function g(i){try{e(o["throw"](i))}catch(r){s(r)}}function e(i){i.done?t(i.value):d(i.value).then(n,g)}e((o=o.apply(i,r||[])).next())}))};var __generator=this&&this.__generator||function(i,r){var t={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},o,d,s,n;return n={next:g(0),throw:g(1),return:g(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function g(i){return function(r){return e([i,r])}}function e(n){if(o)throw new TypeError("Generator is already executing.");while(t)try{if(o=1,d&&(s=n[0]&2?d["return"]:n[0]?d["throw"]||((s=d["return"])&&s.call(d),0):d.next)&&!(s=s.call(d,n[1])).done)return s;if(d=0,s)n=[n[0]&2,s.value];switch(n[0]){case 0:case 1:s=n;break;case 4:t.label++;return{value:n[1],done:false};case 5:t.label++;d=n[1];n=[0];continue;case 7:n=t.ops.pop();t.trys.pop();continue;default:if(!(s=t.trys,s=s.length>0&&s[s.length-1])&&(n[0]===6||n[0]===2)){t=0;continue}if(n[0]===3&&(!s||n[1]>s[0]&&n[1]<s[3])){t.label=n[1];break}if(n[0]===6&&t.label<s[1]){t.label=s[1];s=n;break}if(s&&t.label<s[2]){t.label=s[2];t.ops.push(n);break}if(s[2])t.ops.pop();t.trys.pop();continue}n=r.call(i,t)}catch(g){n=[6,g];d=0}finally{o=s=0}if(n[0]&5)throw n[1];return{value:n[0]?n[1]:void 0,done:true}}};
 /*!
  * Web Components for Nanopore digital Web Apps
- */import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-5f8d16e7.js";import{i as index}from"./ResizeObserver.es-724af9fd.js";import{d as debounce}from"./throttle-d3d933cd.js";var 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}';var STATEOPTS$1=["col-span","col-start","row-span","row-start"];var CANSHADOW=!!document.head.attachShadow;var Grid=function(){function i(i){registerInstance(this,i);this.nanoBpChange=createEvent(this,"nanoBpChange",7);this.generalClasses=[""];this.gridClass=null;this.isSizes=[null];this.ready=false;this.isSmall=false;this.isMedium=false;this.isLarge=false;this.isXL=false;this.isXXL=false;this.sSize=300;this.mSize=550;this.lSize=800;this.xlSize=1e3;this.showHelper=false;this.contentPanel=false;this.fullHeight=false;this.stateChange=debounce(this.stateChange.bind(this),100)}i.prototype.propChanged=function(){this.applySizeClasses()};i.prototype.applySizeClasses=function(){var i=this;var r=this.currentWidth;this.isSmall=false;this.isMedium=false;this.isLarge=false;this.isXL=false;this.isXXL=false;this.generalClasses=[];this.gridClass=null;this.isSizes=[null];this.isSmall=true;this.generalClasses.push("is-small");if(this.sCols)this.gridClass="nano-grid-"+this.sCols;this.isSizes.push({size:"s",active:true});if(r>this.sSize){this.isMedium=true;this.generalClasses.push("is-medium");if(this.mCols)this.gridClass="nano-grid-"+this.mCols;this.isSizes.push({size:"m",active:true})}if(r>this.mSize){this.isLarge=true;this.generalClasses.push("is-large");if(this.lCols)this.gridClass="nano-grid-"+this.lCols;this.isSizes.push({size:"l",active:true})}if(r>this.lSize){this.isXL=true;this.generalClasses.push("is-xl");if(this.xlCols)this.gridClass="nano-grid-"+this.xlCols;this.isSizes.push({size:"xl",active:true})}if(r>this.xlSize){this.isXXL=true;this.generalClasses.push("is-xxl");if(this.xxlCols)this.gridClass="nano-grid-"+this.xxlCols;this.isSizes.push({size:"xxl",active:true})}this.el.style.setProperty("--current-grid-size","'grid size: "+this.isSizes.slice().pop().size+"'");this.applyChildrenClasses();setTimeout((function(){return i.ready=true}),0)};i.prototype.stateChange=function(){this.nanoBpChange.emit(this.generalClasses)};i.prototype.applyChildrenClasses=function(){var i=this;var r=this.el.querySelectorAll("nano-grid-item");if(r.length){r.forEach((function(r){r.changeBP(i.isSizes)}));return}var t=[""],o="",d,s,n,g;if(!CANSHADOW)g=this.el.querySelector(".grid")||this.el;else g=this.el;[].map.call(g.children,(function(r){if(!r.hasAttribute("grid-states"))return;n=r.className.split(" ").filter((function(i){return!i.startsWith("nano-grid-")}));r.className=n.join(" ").trim();s=r.getAttribute("grid-states").split(" ");STATEOPTS$1.forEach((function(g){d=false;i.isSizes.slice().reverse().forEach((function(i){if(d||!i)return;d=s.find((function(r){return r.indexOf(i.size+"-"+g)===0}));if(d){n=r.className.split(" ").filter((function(i){return!i.includes("nano-grid-${stateOpt}")}));r.className=n.join(" ").trim();t=d.split("-");t.shift();o=t.join("-");r.classList.add("nano-grid-"+o)}}))}))}))};i.prototype.componentWillLoad=function(){var i=this;var r,t;if(!CANSHADOW)t=this.el.querySelector(".grid")||this.el;else t=this.el;[].map.call(t.children,(function(t){if(!CANSHADOW){if(t.classList.contains("nano-griditem")||t.nodeName==="NANO-GRID-ITEM")return;r=document.createElement("div");if(t.hasAttribute("grid-states")){r.setAttribute("grid-states",t.getAttribute("grid-states"));t.removeAttribute("grid-states")}i.el.insertBefore(r,t);r.appendChild(t);r.classList.add("nano-griditem")}else if(t.nodeName!=="NANO-GRID-ITEM")t.classList.add("nano-griditem")}))};i.prototype.componentDidLoad=function(){var i=this;this.ro=new index((function(r){for(var t=0,o=r;t<o.length;t++){var d=o[t];if(!d.contentRect.width)return;i.currentWidth=d.contentRect.width;i.applySizeClasses()}}));this.ro.observe(this.el)};i.prototype.disconnectedCallback=function(){if(this.ro)this.ro.disconnect()};i.prototype.render=function(){var i;return h(Host,{class:(i={},i[this.generalClasses.join(" ")]=true,i["has-grid"]=!!this.gridClass,i.ready=this.ready,i[this.gridClass]=true,i),"is-legacy":!CANSHADOW?true:undefined},h("div",{class:{grid:true}},h("slot",null)))};Object.defineProperty(i.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(i,"watchers",{get:function(){return{sSize:["propChanged"],mSize:["propChanged"],lSize:["propChanged"],xlSize:["propChanged"],sCols:["propChanged"],mCols:["propChanged"],lCols:["propChanged"],xlCols:["propChanged"],xxlCols:["propChanged"],isSmall:["stateChange"],isMedium:["stateChange"],isLarge:["stateChange"],isXL:["stateChange"],isXXL:["stateChange"]}},enumerable:false,configurable:true});return i}();Grid.style=gridCss;var gridItemCss=":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{display:block}";var STATEOPTS=["col-span","col-start","row-span","row-start"];var GridItem=function(){function i(i){registerInstance(this,i);this.currGridSizes=[null];this.gridStates=""}i.prototype.updateGridClasses=function(){this.applyChildrenClasses()};i.prototype.changeBP=function(i){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(r){if(this.currGridSizes===i)return[2];this.currGridSizes=i;if(!this.gridStates.length)return[2];this.applyChildrenClasses();return[2]}))}))};i.prototype.applyChildrenClasses=function(){var i=this;var r=[""],t="",o,d,s;s=this.el.className.split(" ").filter((function(i){return!i.startsWith("nano-grid-")}));this.el.className=s.join(" ").trim();d=this.gridStates.split(" ");STATEOPTS.forEach((function(n){o=false;i.currGridSizes.slice().reverse().forEach((function(g){if(o||!g)return;o=d.find((function(i){return i.indexOf(g.size+"-"+n)===0}));if(o){s=i.el.className.split(" ").filter((function(i){return!i.includes("nano-grid-${stateOpt}")}));i.el.className=s.join(" ").trim();r=o.split("-");r.shift();t=r.join("-");i.el.classList.add("nano-grid-"+t)}}))}))};i.prototype.render=function(){return h("slot",null)};Object.defineProperty(i.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(i,"watchers",{get:function(){return{gridStates:["updateGridClasses"]}},enumerable:false,configurable:true});return i}();GridItem.style=gridItemCss;var imgCss=":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{--padding:0;display:inline-block;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;background-size:cover;background-position:center}:host *{border-radius:inherit}:host([background]:not([background=false])){display:block}.img{position:relative;min-height:inherit;height:100%;display:block;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit;background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit}.img__loader,.img__observer{position:absolute;top:0;left:0;bottom:0;right:0;height:100%;width:100%;z-index:-1}.img__image,.img__bg{border-radius:inherit;display:block;opacity:0;-webkit-transition:0.5s ease opacity, 0.3s ease filter 0.4s;transition:0.5s ease opacity, 0.3s ease filter 0.4s;-webkit-filter:blur(5px);filter:blur(5px)}.img__image.loaded,.img__bg.loaded{opacity:1;-webkit-filter:blur(0.1px);filter:blur(0.1px)}@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{-webkit-filter:blur(0);filter:blur(0)}}}.img__image{-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit;max-width:100%;height:auto}.img__image.hide{visibility:hidden}.img__image.hide.no-height{height:1px;position:absolute;z-index:-1}.img__bg{background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;overflow:auto;padding:var(--padding)}.img__bg.no-height{position:absolute;top:0;left:0;right:0;bottom:0}";var Img=function(){function i(i){var r=this;registerInstance(this,i);this.nanoImgWillLoad=createEvent(this,"nanoImgWillLoad",7);this.nanoImgDidLoad=createEvent(this,"nanoImgDidLoad",7);this.nanoImgError=createEvent(this,"nanoImgError",7);this._srcSet={};this.hasLoaded=false;this.imgStates=null;this.lazy=true;this.autoHeight="content";this.onLoad=function(){r.nanoImgDidLoad.emit();setTimeout((function(){return r.hasLoaded=true}),50)};this.onError=function(){r.nanoImgError.emit()};this.onResize=function(i){Object.entries(i.detail).forEach((function(i){var t=i[0],o=i[1];r._srcSet[t].active=o}));var t=[];Object.keys(r._srcSet).sort().forEach((function(i){if(r._srcSet[i].active)t.push(r._srcSet[i].src)}));if(t.length)r._src=t.slice(-1)[0];else r._src=r.src}}i.prototype._srcChanged=function(){this.hasLoaded=false;this.addIO()};i.prototype.srcChanged=function(){this._src=this.src};i.prototype.srcSetChanged=function(){var i=this;if(!this.srcSet)return;delete this._srcSet;this._srcSet={};this.imgStates=this.srcSet.split(",").map((function(r){var t=r.split(" ").filter((function(i){return i.length})),o=t[0],d=t[1];i._srcSet[o]={src:d,active:false};return o})).join(", ")};i.prototype.lazyChanged=function(){if(!this.lazy)this.load()};i.prototype.addIO=function(){var i=this;if(!this._src||this.hasLoaded)return;if(!this.lazy){this.load();return}if(typeof window!=="undefined"&&"IntersectionObserver"in window&&"isIntersecting"in window.IntersectionObserverEntry.prototype){this.removeIO();this.io=new IntersectionObserver((function(r){if(r[0].isIntersecting){i.load();i.removeIO()}}));this.io.observe(this.host)}else setTimeout((function(){return i.load()}),200)};i.prototype.load=function(){this.loadError=this.onError;this.loadSrc=this._src;this.nanoImgWillLoad.emit()};i.prototype.removeIO=function(){if(this.io){this.io.disconnect();this.io=undefined}};i.prototype.connectedCallback=function(){this.srcChanged();this.srcSetChanged();this.lazyChanged()};i.prototype.componentDidLoad=function(){this.addIO()};i.prototype.disconnectedCallback=function(){this.removeIO()};i.prototype.render=function(){var i=!!this.loadSrc?{"background-image":"url("+this.loadSrc+")"}:{};return h("div",{class:"img"},h("nano-skeleton",{class:"img__loader"}),!!this.background&&h("div",{class:{loaded:this.hasLoaded,img__bg:true,"no-height":this.autoHeight==="image"},style:i},h("slot",null)),h("img",{class:{img__image:true,loaded:this.hasLoaded,hide:this.background,"no-height":this.autoHeight==="content"},decoding:"async",src:this.loadSrc,alt:this.alt,onLoad:this.onLoad,onError:this.loadError}),h("nano-resize-observe",{class:"img__observer",onNanoResizeStateChange:this.onResize,states:this.imgStates}))};Object.defineProperty(i.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(i,"watchers",{get:function(){return{_src:["_srcChanged"],src:["srcChanged"],srcSet:["srcSetChanged"],lazy:["lazyChanged"]}},enumerable:false,configurable:true});return i}();Img.style=imgCss;export{Grid as nano_grid,GridItem as nano_grid_item,Img as nano_img};
+ */import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-c42becad.js";import{d as debounce}from"./throttle-d3d933cd.js";var 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}';var STATEOPTS$1=["col-span","col-start","row-span","row-start"];var CANSHADOW=!!document.head.attachShadow;var Grid=function(){function i(i){registerInstance(this,i);this.nanoBpChange=createEvent(this,"nanoBpChange",7);this.generalClasses=[""];this.gridClass=null;this.isSizes=[null];this.ready=false;this.isSmall=false;this.isMedium=false;this.isLarge=false;this.isXL=false;this.isXXL=false;this.sSize=300;this.mSize=550;this.lSize=800;this.xlSize=1e3;this.showHelper=false;this.contentPanel=false;this.fullHeight=false;this.stateChange=debounce(this.stateChange.bind(this),100)}i.prototype.propChanged=function(){this.applySizeClasses()};i.prototype.applySizeClasses=function(){var i=this;var r=this.currentWidth;this.isSmall=false;this.isMedium=false;this.isLarge=false;this.isXL=false;this.isXXL=false;this.generalClasses=[];this.gridClass=null;this.isSizes=[null];this.isSmall=true;this.generalClasses.push("is-small");if(this.sCols)this.gridClass="nano-grid-"+this.sCols;this.isSizes.push({size:"s",active:true});if(r>this.sSize){this.isMedium=true;this.generalClasses.push("is-medium");if(this.mCols)this.gridClass="nano-grid-"+this.mCols;this.isSizes.push({size:"m",active:true})}if(r>this.mSize){this.isLarge=true;this.generalClasses.push("is-large");if(this.lCols)this.gridClass="nano-grid-"+this.lCols;this.isSizes.push({size:"l",active:true})}if(r>this.lSize){this.isXL=true;this.generalClasses.push("is-xl");if(this.xlCols)this.gridClass="nano-grid-"+this.xlCols;this.isSizes.push({size:"xl",active:true})}if(r>this.xlSize){this.isXXL=true;this.generalClasses.push("is-xxl");if(this.xxlCols)this.gridClass="nano-grid-"+this.xxlCols;this.isSizes.push({size:"xxl",active:true})}this.el.style.setProperty("--current-grid-size","'grid size: "+this.isSizes.slice().pop().size+"'");this.applyChildrenClasses();setTimeout((function(){return i.ready=true}),0)};i.prototype.stateChange=function(){this.nanoBpChange.emit(this.generalClasses)};i.prototype.applyChildrenClasses=function(){var i=this;var r=this.el.querySelectorAll("nano-grid-item");if(r.length){r.forEach((function(r){r.changeBP(i.isSizes)}));return}var t=[""],o="",d,s,n,g;if(!CANSHADOW)g=this.el.querySelector(".grid")||this.el;else g=this.el;[].map.call(g.children,(function(r){if(!r.hasAttribute("grid-states"))return;n=r.className.split(" ").filter((function(i){return!i.startsWith("nano-grid-")}));r.className=n.join(" ").trim();s=r.getAttribute("grid-states").split(" ");STATEOPTS$1.forEach((function(g){d=false;i.isSizes.slice().reverse().forEach((function(i){if(d||!i)return;d=s.find((function(r){return r.indexOf(i.size+"-"+g)===0}));if(d){n=r.className.split(" ").filter((function(i){return!i.includes("nano-grid-${stateOpt}")}));r.className=n.join(" ").trim();t=d.split("-");t.shift();o=t.join("-");r.classList.add("nano-grid-"+o)}}))}))}))};i.prototype.componentWillLoad=function(){var i=this;var r,t;if(!CANSHADOW)t=this.el.querySelector(".grid")||this.el;else t=this.el;[].map.call(t.children,(function(t){if(!CANSHADOW){if(t.classList.contains("nano-griditem")||t.nodeName==="NANO-GRID-ITEM")return;r=document.createElement("div");if(t.hasAttribute("grid-states")){r.setAttribute("grid-states",t.getAttribute("grid-states"));t.removeAttribute("grid-states")}i.el.insertBefore(r,t);r.appendChild(t);r.classList.add("nano-griditem")}else if(t.nodeName!=="NANO-GRID-ITEM")t.classList.add("nano-griditem")}))};i.prototype.componentDidLoad=function(){var i=this;this.ro=new ResizeObserver((function(r){for(var t=0,o=r;t<o.length;t++){var d=o[t];if(!d.contentRect.width)return;i.currentWidth=d.contentRect.width;i.applySizeClasses()}}));this.ro.observe(this.el)};i.prototype.disconnectedCallback=function(){if(this.ro)this.ro.disconnect()};i.prototype.render=function(){var i;return h(Host,{class:(i={},i[this.generalClasses.join(" ")]=true,i["has-grid"]=!!this.gridClass,i.ready=this.ready,i[this.gridClass]=true,i),"is-legacy":!CANSHADOW?true:undefined},h("div",{class:{grid:true}},h("slot",null)))};Object.defineProperty(i.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(i,"watchers",{get:function(){return{sSize:["propChanged"],mSize:["propChanged"],lSize:["propChanged"],xlSize:["propChanged"],sCols:["propChanged"],mCols:["propChanged"],lCols:["propChanged"],xlCols:["propChanged"],xxlCols:["propChanged"],isSmall:["stateChange"],isMedium:["stateChange"],isLarge:["stateChange"],isXL:["stateChange"],isXXL:["stateChange"]}},enumerable:false,configurable:true});return i}();Grid.style=gridCss;var gridItemCss=":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{display:block}";var STATEOPTS=["col-span","col-start","row-span","row-start"];var GridItem=function(){function i(i){registerInstance(this,i);this.currGridSizes=[null];this.gridStates=""}i.prototype.updateGridClasses=function(){this.applyChildrenClasses()};i.prototype.changeBP=function(i){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(r){if(this.currGridSizes===i)return[2];this.currGridSizes=i;if(!this.gridStates.length)return[2];this.applyChildrenClasses();return[2]}))}))};i.prototype.applyChildrenClasses=function(){var i=this;var r=[""],t="",o,d,s;s=this.el.className.split(" ").filter((function(i){return!i.startsWith("nano-grid-")}));this.el.className=s.join(" ").trim();d=this.gridStates.split(" ");STATEOPTS.forEach((function(n){o=false;i.currGridSizes.slice().reverse().forEach((function(g){if(o||!g)return;o=d.find((function(i){return i.indexOf(g.size+"-"+n)===0}));if(o){s=i.el.className.split(" ").filter((function(i){return!i.includes("nano-grid-${stateOpt}")}));i.el.className=s.join(" ").trim();r=o.split("-");r.shift();t=r.join("-");i.el.classList.add("nano-grid-"+t)}}))}))};i.prototype.render=function(){return h("slot",null)};Object.defineProperty(i.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(i,"watchers",{get:function(){return{gridStates:["updateGridClasses"]}},enumerable:false,configurable:true});return i}();GridItem.style=gridItemCss;var imgCss=":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{--padding:0;display:inline-block;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;background-size:cover;background-position:center}:host *{border-radius:inherit}:host([background]:not([background=false])){display:block}.img{position:relative;min-height:inherit;height:100%;display:block;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit;background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit}.img__loader,.img__observer{position:absolute;top:0;left:0;bottom:0;right:0;height:100%;width:100%;z-index:-1}.img__image,.img__bg{border-radius:inherit;display:block;opacity:0;-webkit-transition:0.5s ease opacity, 0.3s ease filter 0.4s;transition:0.5s ease opacity, 0.3s ease filter 0.4s;-webkit-filter:blur(5px);filter:blur(5px)}.img__image.loaded,.img__bg.loaded{opacity:1;-webkit-filter:blur(0.1px);filter:blur(0.1px)}@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{-webkit-filter:blur(0);filter:blur(0)}}}.img__image{-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit;max-width:100%;height:auto}.img__image.hide{visibility:hidden}.img__image.hide.no-height{height:1px;position:absolute;z-index:-1}.img__bg{background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;overflow:auto;padding:var(--padding)}.img__bg.no-height{position:absolute;top:0;left:0;right:0;bottom:0}";var Img=function(){function i(i){var r=this;registerInstance(this,i);this.nanoImgWillLoad=createEvent(this,"nanoImgWillLoad",7);this.nanoImgDidLoad=createEvent(this,"nanoImgDidLoad",7);this.nanoImgError=createEvent(this,"nanoImgError",7);this._srcSet={};this.hasLoaded=false;this.imgStates=null;this.lazy=true;this.autoHeight="content";this.onLoad=function(){r.nanoImgDidLoad.emit();setTimeout((function(){return r.hasLoaded=true}),50)};this.onError=function(){r.nanoImgError.emit()};this.onResize=function(i){Object.entries(i.detail).forEach((function(i){var t=i[0],o=i[1];r._srcSet[t].active=o}));var t=[];Object.keys(r._srcSet).sort().forEach((function(i){if(r._srcSet[i].active)t.push(r._srcSet[i].src)}));if(t.length)r._src=t.slice(-1)[0];else r._src=r.src}}i.prototype._srcChanged=function(){this.hasLoaded=false;this.addIO()};i.prototype.srcChanged=function(){this._src=this.src};i.prototype.srcSetChanged=function(){var i=this;if(!this.srcSet)return;delete this._srcSet;this._srcSet={};this.imgStates=this.srcSet.split(",").map((function(r){var t=r.split(" ").filter((function(i){return i.length})),o=t[0],d=t[1];i._srcSet[o]={src:d,active:false};return o})).join(", ")};i.prototype.lazyChanged=function(){if(!this.lazy)this.load()};i.prototype.addIO=function(){var i=this;if(!this._src||this.hasLoaded)return;if(!this.lazy){this.load();return}if(typeof window!=="undefined"&&"IntersectionObserver"in window&&"isIntersecting"in window.IntersectionObserverEntry.prototype){this.removeIO();this.io=new IntersectionObserver((function(r){if(r[0].isIntersecting){i.load();i.removeIO()}}));this.io.observe(this.host)}else setTimeout((function(){return i.load()}),200)};i.prototype.load=function(){this.loadError=this.onError;this.loadSrc=this._src;this.nanoImgWillLoad.emit()};i.prototype.removeIO=function(){if(this.io){this.io.disconnect();this.io=undefined}};i.prototype.connectedCallback=function(){this.srcChanged();this.srcSetChanged();this.lazyChanged()};i.prototype.componentDidLoad=function(){this.addIO()};i.prototype.disconnectedCallback=function(){this.removeIO()};i.prototype.render=function(){var i=!!this.loadSrc?{"background-image":"url("+this.loadSrc+")"}:{};return h("div",{class:"img"},h("nano-skeleton",{class:"img__loader"}),!!this.background&&h("div",{class:{loaded:this.hasLoaded,img__bg:true,"no-height":this.autoHeight==="image"},style:i},h("slot",null)),h("img",{class:{img__image:true,loaded:this.hasLoaded,hide:this.background,"no-height":this.autoHeight==="content"},decoding:"async",src:this.loadSrc,alt:this.alt,onLoad:this.onLoad,onError:this.loadError}),h("nano-resize-observe",{class:"img__observer",onNanoResizeStateChange:this.onResize,states:this.imgStates}))};Object.defineProperty(i.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(i,"watchers",{get:function(){return{_src:["_srcChanged"],src:["srcChanged"],srcSet:["srcSetChanged"],lazy:["lazyChanged"]}},enumerable:false,configurable:true});return i}();Img.style=imgCss;export{Grid as nano_grid,GridItem as nano_grid_item,Img as nano_img};
 //# sourceMappingURL=nano-grid_3.entry.js.map

package/dist/esm-es5/nano-grid_3.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","src/components/grid/grid.tsx","src/components/grid/grid-item.scss?tag=nano-grid-item&encapsulation=shadow","src/components/grid/grid-item.tsx","src/components/img/img.scss?tag=nano-img&encapsulation=shadow","src/components/img/img.tsx"],"names":["gridCss","STATEOPTS","CANSHADOW","document","head","attachShadow","Grid","hostRef","this","generalClasses","gridClass","isSizes","ready","isSmall","isMedium","isLarge","isXL","isXXL","sSize","mSize","lSize","xlSize","showHelper","contentPanel","fullHeight","stateChange","debounce","bind","prototype","propChanged","applySizeClasses","_this","size","currentWidth","push","sCols","active","mCols","lCols","xlCols","xxlCols","el","style","setProperty","slice","pop","applyChildrenClasses","setTimeout","nanoBpChange","emit","gridItems","querySelectorAll","length","forEach","gridItem","changeBP","stateArr","itemState","found","itemStates","classes","ctx","querySelector","map","call","children","gItem","hasAttribute","className","split","filter","c","startsWith","join","trim","getAttribute","stateOpt","reverse","find","state","indexOf","includes","shift","classList","add","componentWillLoad","wrapper","ele","contains","nodeName","createElement","setAttribute","removeAttribute","insertBefore","appendChild","componentDidLoad","ro","ResizeObserver","entries","_i","entries_1","entry","contentRect","width","observe","disconnectedCallback","disconnect","render","h","Host","class","_a","is-legacy","undefined","grid","gridItemCss","GridItem","class_1","currGridSizes","gridStates","updateGridClasses","newGridSizes","imgCss","Img","_srcSet","hasLoaded","imgStates","lazy","autoHeight","onLoad","nanoImgDidLoad","onError","nanoImgError","onResize","e","Object","detail","bp","srcOpts","keys","sort","src","_src","_srcChanged","addIO","srcChanged","srcSetChanged","srcSet","bpSrc","lazyChanged","load","window","IntersectionObserverEntry","removeIO","io","IntersectionObserver","data","isIntersecting","host","loadError","loadSrc","nanoImgWillLoad","connectedCallback","bgStyle","background-image","background","loaded","img__bg","no-height","img__image","hide","decoding","alt","onNanoResizeStateChange","states"],"mappings":"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","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",":host {\n  display: block;\n}\n","import { Component, h, Prop, Element, Method, Watch } from '@stencil/core';\nimport { GridSizes } from '../../interface';\n\nconst STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\n\n/**\n * Grid items to be used with [grid](/story/nano-components-grid) elements\n */\n@Component({\n  tag: 'nano-grid-item',\n  styleUrl: 'grid-item.scss',\n  shadow: true,\n})\nexport class GridItem {\n  private currGridSizes: GridSizes[] = [null];\n\n  @Element() private el: HTMLNanoGridItemElement;\n  /**\n   * How to position this item within it's parent grid at different break points. Examples:\n   * xl-col-span-2\n   * l-col-start-2\n   * xxl-row-span-2\n   * m-row-start-2\n   */\n  @Prop() gridStates: string = '';\n\n  @Watch('gridStates')\n  updateGridClasses() {\n    this.applyChildrenClasses();\n  }\n\n  /**\n   * Called by parent grid to trigger new classes\n   * @internal\n   */\n  @Method()\n  async changeBP(newGridSizes: GridSizes[]) {\n    if (this.currGridSizes === newGridSizes) return;\n    this.currGridSizes = newGridSizes;\n\n    if (!this.gridStates.length) return;\n    this.applyChildrenClasses();\n  }\n\n  private applyChildrenClasses() {\n    let stateArr: Array<string> = [''],\n      itemState: string = '',\n      found: any,\n      itemStates: Array<string>,\n      classes: Array<string>;\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    // clear all previous grid state classnames\n    classes = this.el.className\n      .split(' ')\n      .filter((c) => !c.startsWith('nano-grid-'));\n    this.el.className = classes.join(' ').trim();\n\n    // get all potential states this element can have\n    itemStates = this.gridStates.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.currGridSizes\n        .slice()\n        .reverse()\n        .forEach((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 = this.el.className\n              .split(' ')\n              .filter((c) => !c.includes('nano-grid-${stateOpt}'));\n            this.el.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            this.el.classList.add(`nano-grid-${itemState}`);\n          }\n        });\n    });\n  }\n\n  render() {\n    return <slot />;\n  }\n}\n",":host {\n  /**\n   * @prop --padding: padding around any content. Only relevent on `<nano-img background>`\n  */\n  --padding: 0;\n\n  display: inline-block;\n  object-fit: cover;\n  object-position: center;\n  background-size: cover;\n  background-position: center;\n\n  * {\n    border-radius: inherit;\n  }\n}\n\n:host([background]:not([background='false'])) {\n  display: block;\n}\n\n.img {\n  position: relative;\n  min-height: inherit;\n  height: 100%;\n  display: block;\n  object-fit: inherit;\n  object-position: inherit;\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n}\n\n.img__loader,\n.img__observer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  height: 100%;\n  width: 100%;\n  z-index: -1;\n}\n\n.img__image,\n.img__bg {\n  border-radius: inherit;\n  display: block;\n  opacity: 0;\n  transition: 0.5s ease opacity, 0.3s ease filter 0.4s;\n  filter: blur(5px);\n\n  &.loaded {\n    opacity: 1;\n    filter: blur(0.1px);\n\n    @media not all and (min-resolution: 0.001dpcm) {\n      @supports (-webkit-appearance: none) {\n        filter: blur(0);\n      }\n    }\n  }\n}\n\n.img__image {\n  object-fit: inherit;\n  object-position: inherit;\n  max-width: 100%;\n  height: auto;\n\n  &.hide {\n    visibility: hidden;\n\n    &.no-height {\n      height: 1px;\n      position: absolute;\n      z-index: -1;\n    }\n  }\n}\n\n.img__bg {\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n  overflow: auto;\n  padding: var(--padding);\n\n  &.no-height {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Prop,\n  Watch,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\nimport { ResizeStateChangeEventDetail } from '../../interface';\n\n/**\n * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n */\n@Component({\n  tag: 'nano-img',\n  styleUrl: 'img.scss',\n  shadow: true,\n})\nexport class Img implements ComponentInterface {\n  private io?: IntersectionObserver;\n  private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n  @Element() host!: HTMLNanoImgElement;\n\n  @State() loadSrc?: string;\n  @State() loadError?: () => void;\n  @State() hasLoaded: boolean = false;\n  @State() imgStates: string = null;\n  @State() _src: string;\n  @Watch('_src')\n  _srcChanged() {\n    this.hasLoaded = false;\n    this.addIO();\n  }\n\n  /** This attribute defines the alternative text describing the image.\n   * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. */\n  @Prop() alt?: string;\n\n  /** The image URL. This attribute is mandatory for the `<img>` element. */\n  @Prop() src!: string;\n  @Watch('src')\n  srcChanged() {\n    this._src = this.src;\n  }\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() srcSet?: string;\n  @Watch('srcSet')\n  srcSetChanged() {\n    if (!this.srcSet) return;\n\n    delete this._srcSet;\n    this._srcSet = {};\n\n    this.imgStates = this.srcSet\n      .split(',')\n      .map((bpSrc) => {\n        const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n        this._srcSet[bp] = { src: src, active: false };\n        return bp;\n      })\n      .join(', ');\n  }\n\n  /** Render image lazily, when it comes into the browser viewport **/\n  @Prop() lazy: boolean = true;\n  @Watch('lazy')\n  lazyChanged() {\n    if (!this.lazy) this.load();\n  }\n\n  /** Render the image as a background image **/\n  @Prop() background?: boolean;\n\n  /** When the image is rendered as a background, and there is no preset dimensions of the component,\n   * you can set how the component height will be set. Via image size or via the content **/\n  @Prop() autoHeight: 'content' | 'image' = 'content';\n\n  /** Emitted when the img src has been set */\n  @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n  /** Emitted when the image has finished loading */\n  @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n  /** Emitted when the img fails to load */\n  @Event() nanoImgError!: EventEmitter<void>;\n\n  private addIO() {\n    if (!this._src || this.hasLoaded) return;\n    if (!this.lazy) {\n      this.load();\n      return;\n    }\n    if (\n      typeof (window as any) !== 'undefined' &&\n      'IntersectionObserver' in window &&\n      'isIntersecting' in window.IntersectionObserverEntry.prototype\n    ) {\n      this.removeIO();\n      this.io = new IntersectionObserver((data) => {\n        if (data[0].isIntersecting) {\n          this.load();\n          this.removeIO();\n        }\n      });\n\n      this.io.observe(this.host);\n    } else setTimeout(() => this.load(), 200);\n  }\n\n  private load() {\n    this.loadError = this.onError;\n    this.loadSrc = this._src;\n    this.nanoImgWillLoad.emit();\n  }\n\n  private onLoad = () => {\n    this.nanoImgDidLoad.emit();\n    setTimeout(() => (this.hasLoaded = true), 50);\n  };\n\n  private onError = () => {\n    this.nanoImgError.emit();\n  };\n\n  private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n    Object.entries(e.detail).forEach(([bp, active]) => {\n      this._srcSet[bp].active = active;\n    });\n\n    // sort and find the highest sized matching image.\n    const srcOpts = [];\n    Object.keys(this._srcSet)\n      .sort()\n      .forEach((bp) => {\n        if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n      });\n\n    if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n    // no matching image? Set back to default\n    else this._src = this.src;\n  };\n\n  private removeIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  connectedCallback() {\n    this.srcChanged();\n    this.srcSetChanged();\n    this.lazyChanged();\n  }\n\n  componentDidLoad() {\n    this.addIO();\n  }\n\n  disconnectedCallback() {\n    this.removeIO();\n  }\n\n  render() {\n    const bgStyle = !!this.loadSrc\n      ? { 'background-image': `url(${this.loadSrc})` }\n      : {};\n    return (\n      <div class=\"img\">\n        <nano-skeleton class=\"img__loader\"></nano-skeleton>\n        {!!this.background && (\n          <div\n            class={{\n              loaded: this.hasLoaded,\n              img__bg: true,\n              'no-height': this.autoHeight === 'image',\n            }}\n            style={bgStyle}\n          >\n            <slot />\n          </div>\n        )}\n        <img\n          class={{\n            img__image: true,\n            loaded: this.hasLoaded,\n            hide: this.background,\n            'no-height': this.autoHeight === 'content',\n          }}\n          decoding=\"async\"\n          src={this.loadSrc}\n          alt={this.alt}\n          onLoad={this.onLoad}\n          onError={this.loadError}\n        />\n        <nano-resize-observe\n          class=\"img__observer\"\n          onNanoResizeStateChange={this.onResize}\n          states={this.imgStates}\n        />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","src/components/grid/grid.tsx","src/components/grid/grid-item.scss?tag=nano-grid-item&encapsulation=shadow","src/components/grid/grid-item.tsx","src/components/img/img.scss?tag=nano-img&encapsulation=shadow","src/components/img/img.tsx"],"names":["gridCss","STATEOPTS","CANSHADOW","document","head","attachShadow","Grid","hostRef","this","generalClasses","gridClass","isSizes","ready","isSmall","isMedium","isLarge","isXL","isXXL","sSize","mSize","lSize","xlSize","showHelper","contentPanel","fullHeight","stateChange","debounce","bind","prototype","propChanged","applySizeClasses","_this","size","currentWidth","push","sCols","active","mCols","lCols","xlCols","xxlCols","el","style","setProperty","slice","pop","applyChildrenClasses","setTimeout","nanoBpChange","emit","gridItems","querySelectorAll","length","forEach","gridItem","changeBP","stateArr","itemState","found","itemStates","classes","ctx","querySelector","map","call","children","gItem","hasAttribute","className","split","filter","c","startsWith","join","trim","getAttribute","stateOpt","reverse","find","state","indexOf","includes","shift","classList","add","componentWillLoad","wrapper","ele","contains","nodeName","createElement","setAttribute","removeAttribute","insertBefore","appendChild","componentDidLoad","ro","ResizeObserver","entries","_i","entries_1","entry","contentRect","width","observe","disconnectedCallback","disconnect","render","h","Host","class","_a","is-legacy","undefined","grid","gridItemCss","GridItem","class_1","currGridSizes","gridStates","updateGridClasses","newGridSizes","imgCss","Img","_srcSet","hasLoaded","imgStates","lazy","autoHeight","onLoad","nanoImgDidLoad","onError","nanoImgError","onResize","e","Object","detail","bp","srcOpts","keys","sort","src","_src","_srcChanged","addIO","srcChanged","srcSetChanged","srcSet","bpSrc","lazyChanged","load","window","IntersectionObserverEntry","removeIO","io","IntersectionObserver","data","isIntersecting","host","loadError","loadSrc","nanoImgWillLoad","connectedCallback","bgStyle","background-image","background","loaded","img__bg","no-height","img__image","hide","decoding","alt","onNanoResizeStateChange","states"],"mappings":"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","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",":host {\n  display: block;\n}\n","import { Component, h, Prop, Element, Method, Watch } from '@stencil/core';\nimport { GridSizes } from '../../interface';\n\nconst STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\n\n/**\n * Grid items to be used with [grid](/story/nano-components-grid) elements\n */\n@Component({\n  tag: 'nano-grid-item',\n  styleUrl: 'grid-item.scss',\n  shadow: true,\n})\nexport class GridItem {\n  private currGridSizes: GridSizes[] = [null];\n\n  @Element() private el: HTMLNanoGridItemElement;\n  /**\n   * How to position this item within it's parent grid at different break points. Examples:\n   * xl-col-span-2\n   * l-col-start-2\n   * xxl-row-span-2\n   * m-row-start-2\n   */\n  @Prop() gridStates: string = '';\n\n  @Watch('gridStates')\n  updateGridClasses() {\n    this.applyChildrenClasses();\n  }\n\n  /**\n   * Called by parent grid to trigger new classes\n   * @internal\n   */\n  @Method()\n  async changeBP(newGridSizes: GridSizes[]) {\n    if (this.currGridSizes === newGridSizes) return;\n    this.currGridSizes = newGridSizes;\n\n    if (!this.gridStates.length) return;\n    this.applyChildrenClasses();\n  }\n\n  private applyChildrenClasses() {\n    let stateArr: Array<string> = [''],\n      itemState: string = '',\n      found: any,\n      itemStates: Array<string>,\n      classes: Array<string>;\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    // clear all previous grid state classnames\n    classes = this.el.className\n      .split(' ')\n      .filter((c) => !c.startsWith('nano-grid-'));\n    this.el.className = classes.join(' ').trim();\n\n    // get all potential states this element can have\n    itemStates = this.gridStates.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.currGridSizes\n        .slice()\n        .reverse()\n        .forEach((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 = this.el.className\n              .split(' ')\n              .filter((c) => !c.includes('nano-grid-${stateOpt}'));\n            this.el.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            this.el.classList.add(`nano-grid-${itemState}`);\n          }\n        });\n    });\n  }\n\n  render() {\n    return <slot />;\n  }\n}\n",":host {\n  /**\n   * @prop --padding: padding around any content. Only relevent on `<nano-img background>`\n  */\n  --padding: 0;\n\n  display: inline-block;\n  object-fit: cover;\n  object-position: center;\n  background-size: cover;\n  background-position: center;\n\n  * {\n    border-radius: inherit;\n  }\n}\n\n:host([background]:not([background='false'])) {\n  display: block;\n}\n\n.img {\n  position: relative;\n  min-height: inherit;\n  height: 100%;\n  display: block;\n  object-fit: inherit;\n  object-position: inherit;\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n}\n\n.img__loader,\n.img__observer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  height: 100%;\n  width: 100%;\n  z-index: -1;\n}\n\n.img__image,\n.img__bg {\n  border-radius: inherit;\n  display: block;\n  opacity: 0;\n  transition: 0.5s ease opacity, 0.3s ease filter 0.4s;\n  filter: blur(5px);\n\n  &.loaded {\n    opacity: 1;\n    filter: blur(0.1px);\n\n    @media not all and (min-resolution: 0.001dpcm) {\n      @supports (-webkit-appearance: none) {\n        filter: blur(0);\n      }\n    }\n  }\n}\n\n.img__image {\n  object-fit: inherit;\n  object-position: inherit;\n  max-width: 100%;\n  height: auto;\n\n  &.hide {\n    visibility: hidden;\n\n    &.no-height {\n      height: 1px;\n      position: absolute;\n      z-index: -1;\n    }\n  }\n}\n\n.img__bg {\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n  overflow: auto;\n  padding: var(--padding);\n\n  &.no-height {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Prop,\n  Watch,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\nimport { ResizeStateChangeEventDetail } from '../../interface';\n\n/**\n * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n */\n@Component({\n  tag: 'nano-img',\n  styleUrl: 'img.scss',\n  shadow: true,\n})\nexport class Img implements ComponentInterface {\n  private io?: IntersectionObserver;\n  private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n  @Element() host!: HTMLNanoImgElement;\n\n  @State() loadSrc?: string;\n  @State() loadError?: () => void;\n  @State() hasLoaded: boolean = false;\n  @State() imgStates: string = null;\n  @State() _src: string;\n  @Watch('_src')\n  _srcChanged() {\n    this.hasLoaded = false;\n    this.addIO();\n  }\n\n  /** This attribute defines the alternative text describing the image.\n   * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. */\n  @Prop() alt?: string;\n\n  /** The image URL. This attribute is mandatory for the `<img>` element. */\n  @Prop() src!: string;\n  @Watch('src')\n  srcChanged() {\n    this._src = this.src;\n  }\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() srcSet?: string;\n  @Watch('srcSet')\n  srcSetChanged() {\n    if (!this.srcSet) return;\n\n    delete this._srcSet;\n    this._srcSet = {};\n\n    this.imgStates = this.srcSet\n      .split(',')\n      .map((bpSrc) => {\n        const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n        this._srcSet[bp] = { src: src, active: false };\n        return bp;\n      })\n      .join(', ');\n  }\n\n  /** Render image lazily, when it comes into the browser viewport **/\n  @Prop() lazy: boolean = true;\n  @Watch('lazy')\n  lazyChanged() {\n    if (!this.lazy) this.load();\n  }\n\n  /** Render the image as a background image **/\n  @Prop() background?: boolean;\n\n  /** When the image is rendered as a background, and there is no preset dimensions of the component,\n   * you can set how the component height will be set. Via image size or via the content **/\n  @Prop() autoHeight: 'content' | 'image' = 'content';\n\n  /** Emitted when the img src has been set */\n  @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n  /** Emitted when the image has finished loading */\n  @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n  /** Emitted when the img fails to load */\n  @Event() nanoImgError!: EventEmitter<void>;\n\n  private addIO() {\n    if (!this._src || this.hasLoaded) return;\n    if (!this.lazy) {\n      this.load();\n      return;\n    }\n    if (\n      typeof (window as any) !== 'undefined' &&\n      'IntersectionObserver' in window &&\n      'isIntersecting' in window.IntersectionObserverEntry.prototype\n    ) {\n      this.removeIO();\n      this.io = new IntersectionObserver((data) => {\n        if (data[0].isIntersecting) {\n          this.load();\n          this.removeIO();\n        }\n      });\n\n      this.io.observe(this.host);\n    } else setTimeout(() => this.load(), 200);\n  }\n\n  private load() {\n    this.loadError = this.onError;\n    this.loadSrc = this._src;\n    this.nanoImgWillLoad.emit();\n  }\n\n  private onLoad = () => {\n    this.nanoImgDidLoad.emit();\n    setTimeout(() => (this.hasLoaded = true), 50);\n  };\n\n  private onError = () => {\n    this.nanoImgError.emit();\n  };\n\n  private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n    Object.entries(e.detail).forEach(([bp, active]) => {\n      this._srcSet[bp].active = active;\n    });\n\n    // sort and find the highest sized matching image.\n    const srcOpts = [];\n    Object.keys(this._srcSet)\n      .sort()\n      .forEach((bp) => {\n        if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n      });\n\n    if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n    // no matching image? Set back to default\n    else this._src = this.src;\n  };\n\n  private removeIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  connectedCallback() {\n    this.srcChanged();\n    this.srcSetChanged();\n    this.lazyChanged();\n  }\n\n  componentDidLoad() {\n    this.addIO();\n  }\n\n  disconnectedCallback() {\n    this.removeIO();\n  }\n\n  render() {\n    const bgStyle = !!this.loadSrc\n      ? { 'background-image': `url(${this.loadSrc})` }\n      : {};\n    return (\n      <div class=\"img\">\n        <nano-skeleton class=\"img__loader\"></nano-skeleton>\n        {!!this.background && (\n          <div\n            class={{\n              loaded: this.hasLoaded,\n              img__bg: true,\n              'no-height': this.autoHeight === 'image',\n            }}\n            style={bgStyle}\n          >\n            <slot />\n          </div>\n        )}\n        <img\n          class={{\n            img__image: true,\n            loaded: this.hasLoaded,\n            hide: this.background,\n            'no-height': this.autoHeight === 'content',\n          }}\n          decoding=\"async\"\n          src={this.loadSrc}\n          alt={this.alt}\n          onLoad={this.onLoad}\n          onError={this.loadError}\n        />\n        <nano-resize-observe\n          class=\"img__observer\"\n          onNanoResizeStateChange={this.onResize}\n          states={this.imgStates}\n        />\n      </div>\n    );\n  }\n}\n"]}

package/dist/esm-es5/nano-hero.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as registerInstance,h,e as Host,g as getElement}from"./index-5f8d16e7.js";import{h as hasShadowDom}from"./index-bf53664b.js";var heroCss=":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{display:block;--nano-loader-base:#4a4a4a;--nano-loader-tint:#7d7d7d;--theme-color:#fff;--theme-tint-color:#90c6e7;--scrim-color:0, 0, 0;--scrim-direction:90deg;--scrim-opacity-from:0.25;--scrim-opacity-to:0.7;--padding:0;--quote-size:1.3rem;color:var(--theme-color)}:host(.is-xl){--quote-size:3rem}:host([theme=light]){--nano-loader-base:#fff;--nano-loader-tint:white;--theme-color:#4a4a4a;--scrim-color:255, 255, 255;--scrim-opacity-from:0.25;--scrim-opacity-to:1;--scrim-direction:270deg;color:var(--theme-color)}:host([theme=light]) .hero__primary-content{--color:#4a4a4a}.hero{position:relative}.hero--rtl{--scrim-direction:270deg}.hero--secondary:not(.hero--iconbox){--scrim-direction:0deg}.hero__bg-wrap{overflow:hidden}.hero__bg-slot{position:absolute;top:0;bottom:0;left:0;right:0}.hero__ctas{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:32px 32px 0;margin-bottom:-64px;position:relative;z-index:1}@media (max-width: 52em){.hero__ctas{display:none}}@media (max-width: 58em){.hero__ctas{margin-bottom:-48px}}.hero__ctas ::slotted(a.button[slot=secondary-ctas]),.hero__ctas::slotted(a.button[slot=secondary-ctas]){padding:0.25rem 0.5rem !important;font-size:0.875rem !important;margin:0 0.25rem !important}.hero__img{display:block;--padding:inherit}.hero__breadcrumbs{display:none;margin:20px 14px 0;line-height:14px}.hero--breadcrumb .hero__breadcrumbs{display:block}.is-xl .hero__breadcrumbs{margin:0 50px;max-width:50%}.is-xxl .hero__breadcrumbs{margin:0 83px}.hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero__breadcrumbs::slotted(*[slot=breadcrumb]){font-size:0.85rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;font-stretch:125%;display:inline-block;margin-bottom:16px;position:relative;z-index:2}.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero--hasbg .hero__breadcrumbs::slotted(*[slot=breadcrumb]){text-shadow:1px 1px rgba(0, 0, 0, 0.15)}.hero__breadcrumbs ::slotted(a[slot=breadcrumb]),.hero__breadcrumbs::slotted(a[slot=breadcrumb]){color:var(--theme-tint-color) !important;cursor:pointer}.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]),.hero__breadcrumbs::slotted(.slash[slot=breadcrumb]){color:var(--theme-color);position:relative;margin:0 0.5rem;display:inline-block}.hero__scrim{position:absolute;left:0;right:0;bottom:0;top:0;z-index:0;background:-webkit-gradient(linear, left top, left bottom, from(var(--scrim-direction)), color-stop(0%, rgba(var(--scrim-color), var(--scrim-opacity-from))), to(rgba(var(--scrim-color), var(--scrim-opacity-to))));background:linear-gradient(var(--scrim-direction), rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%, rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%)}.hero--scrim .hero__scrim{background:none}.hero__content{max-width:1440px;--grid-row-gap:0;margin:0 auto;position:relative}.hero__content.is-xl{margin-top:50px;max-width:1540px}.hero__content.is-xxl{margin-top:83px;max-width:1606px}.hero__primary{margin:16px}.hero--breadcrumb .hero__primary{margin:0 16px}.hero--backbtn .hero__primary{margin-left:0}.hero__primary ::slotted(nano-icon-button[slot=back-btn]),.hero__primary::slotted(nano-icon-button[slot=back-btn]){font-size:2rem}.is-xl .hero__primary{margin:0 0 50px 50px}.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:-3rem;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:unset;margin-right:unset;-webkit-margin-start:-3rem;margin-inline-start:-3rem;-webkit-margin-end:0;margin-inline-end:0}}.is-xxl .hero__primary{margin:0 0 83px 83px}.hero__primary-content{max-width:45rem;--color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex}.hero--backbtn .hero__primary-content>div{padding:10px 0 0 0}.hero__primary-content ::slotted(h1[slot=primary-content]),.hero__primary-content::slotted(h1[slot=primary-content]){line-height:26px !important;margin-top:0 !important;margin-bottom:18px !important;font-size:2rem !important}.is-xl .hero__primary-content ::slotted(h1[slot=primary-content]),.is-xl .hero__primary-content::slotted(h1[slot=primary-content]){line-height:31px !important;margin-bottom:30px !important}.is-xl .hero__primary-content ::slotted(.button[slot=primary-content]),.is-xl .hero__primary-content::slotted(.button[slot=primary-content]){margin-top:20px !important}.hero__secondary{display:none;height:100%;padding:0 14px 20px}.hero--secondary .hero__secondary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.is-xl .hero__secondary{padding:0 50px 50px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.is-xxl .hero__secondary{padding:0 83px 83px}.hero__icon-box{background:rgba(0, 0, 0, 0.7);padding:24px;width:100%;margin-bottom:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:white}.is-xl .hero__icon-box{max-width:410px;-webkit-box-flex:0;-ms-flex:0 1 410px;flex:0 1 410px}.hero__icon-box::slotted([slot=icon-box-item] nano-icon){color:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px}.hero__icon-box ::slotted([slot=icon-box-item]){--nano-color-base:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.8125rem;margin-bottom:20px}.hero__icon-box ::slotted(.last[slot=icon-box-item]),.hero__icon-box::slotted(.last[slot=icon-box-item]){margin-bottom:0}.hero__quote-content{margin-top:auto;text-align:center;width:100%}.is-xl .hero__quote-content{max-width:500px;-webkit-box-flex:0;-ms-flex:0 1 500px;flex:0 1 500px;text-align:initial}.hero__quote::before,.hero__quote::after{content:'\"';font-size:var(--quote-size);font-weight:700;font-style:italic;line-height:0;color:#abb6b8;display:inline;position:relative}.hero__quote ::slotted([slot=quote]),.hero__quote::slotted([slot=quote]){font-size:var(--quote-size);font-weight:300;font-style:italic;display:inline}.hero__quote-author{text-align:right;text-align:end;font-size:1rem;opacity:0.8}.hero--sub .hero__content.is-xl{margin-top:40px}.hero--sub .hero__content.is-xl .hero__primary{margin:0 0 40px 50px}.hero--sub .hero__content.is-xl .hero__secondary{padding:0 50px 50px 40px}.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(.button[slot=primary-content]){margin-top:8px !important}.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(h1[slot=primary-content]){margin-bottom:18px !important}.hero--sub .hero__content.is-xxl .hero__primary{margin:0 0 40px 83px}.hero--sub .hero__content.is-xxl .hero__secondary{padding:0 83px 83px 40px}";var Hero=function(){function t(t){var o=this;registerInstance(this,t);this.isLegacy=false;this.gridSizes=[];this.imgSrcSet=null;this.largeScreenBP=900;this.theme="dark";this.level="top";this.handleGridChange=function(t){o.gridSizes=t.detail};this.HeroContent=function(){return[!o.hasIconBox&&o.hasCtas?h("div",{class:"hero__ctas"},h("slot",{name:"secondary-ctas"})):"",h("div",{class:"hero__scrim"},h("slot",{name:"scrim"})),h("nano-grid",{onNanoBpChange:o.handleGridChange,class:"hero__content",xlCols:2,xlSize:o.largeScreenBP},h("nano-grid-item",{gridStates:"xl-col-span-2"},h("div",{class:"hero__breadcrumbs"},h("slot",{name:"breadcrumb"}))),h("nano-grid-item",{gridStates:o.hasSecondaryContent?"xl-col-span-1 xl-col-start-1 xl-row-start-2":"xl-col-span-2 xl-col-start-1 xl-row-start-2"},h("div",{class:"hero__primary"},h("div",{class:"hero__primary-content"},h("slot",{name:"back-btn"}),h("div",null,h("slot",{name:"primary-content"}))))),o.hasSecondaryContent&&h("nano-grid-item",{gridStates:"xl-col-span-1 xl-col-start-2 xl-row-start-2"},h("div",{class:"hero__secondary"},h("slot",{name:"secondary-content"}),o.hasIconBox&&h("div",{class:"hero__icon-box"},h("slot",{name:"icon-box"}),h("slot",{name:"icon-box-item"})),o.hasQuote&&h("div",{class:"hero__quote-content"},h("span",{class:"hero__quote"},h("slot",{name:"quote"})),h("div",{class:"hero__quote-author"},h("slot",{name:"quote-author"}))))))]}}t.prototype.breadCrumbChange=function(){this.breadCrumbs.filter((function(t){return t.tagName==="A"&&!t.nextElementSibling.classList.contains("slash")})).forEach((function(t){t.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))};t.prototype.iconBoxItemChange=function(){this.iconBoxItems.forEach((function(t){return t.classList.remove("last")}));if(this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList)this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")};t.prototype.slotChangeObserver=function(){var t=this;if(this.mo)this.mo.disconnect();var o=this.mo=new MutationObserver((function(){return t.processSlottedContent()}));o.observe(this.host,{childList:true})};t.prototype.processSlottedContent=function(){this.hasCtas=!!this.host.querySelector('[slot="secondary-ctas"]');this.iconBoxItems=Array.from(this.host.querySelectorAll('[slot="icon-box-item"]'));this.hasIconBox=!!this.host.querySelector('[slot="icon-box"]')||!!this.iconBoxItems.length;this.hasScrim=!!this.host.querySelector('[slot="scrim"]');this.breadCrumbs=Array.from(this.host.querySelectorAll('[slot="breadcrumb"]'));this.hasSecondaryContent=!!this.host.querySelector('[slot="icon-box"]')||!!this.host.querySelector('[slot="quote"]')||!!this.host.querySelector('[slot="icon-box-item"]')||!!this.host.querySelector('[slot="secondary-content"]');this.hasBg=!!this.host.querySelector('[slot="background"]')||!!this.imgSrc;this.hasBackBtn=!!this.host.querySelector('[slot="back-btn"]');this.hasQuote=!!this.host.querySelector('[slot="quote"]')};t.prototype.connectedCallback=function(){this.isLegacy=!hasShadowDom(this.host)};t.prototype.disconnectedCallback=function(){if(this.mo)this.mo.disconnect()};t.prototype.componentDidLoad=function(){this.slotChangeObserver()};t.prototype.componentWillLoad=function(){this.processSlottedContent()};t.prototype.render=function(){var t;var o=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";return h(Host,{class:(t={},t[this.gridSizes.join(" ")]=true,t)},h("div",{class:{hero:true,"hero--light":this.theme==="light","hero--secondary":this.hasSecondaryContent,"hero--iconbox":this.hasIconBox,"hero--rtl":o,"hero--scrim":this.hasScrim,"hero--legacy":this.isLegacy,"hero--breadcrumb":!!this.breadCrumbs.length,"hero--hasbg":this.hasBg,"hero--backbtn":this.hasBackBtn,"hero--sub":this.level==="sub"}},h("div",{class:"hero__bg-wrap"},!!this.imgSrc&&h("nano-img",{class:"hero__img",lazy:false,background:true,srcSet:this.imgSrcSet,src:this.imgSrc},h(this.HeroContent,null)),!this.imgSrc&&[h("div",{class:"hero__bg-slot"},h("slot",{name:"background"})),h(this.HeroContent,null)])))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}},enumerable:false,configurable:true});return t}();Hero.style=heroCss;export{Hero as nano_hero};
+import{r as registerInstance,h,e as Host,g as getElement}from"./index-c42becad.js";import{h as hasShadowDom}from"./index-bf53664b.js";var heroCss=":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{display:block;--nano-loader-base:#4a4a4a;--nano-loader-tint:#7d7d7d;--theme-color:#fff;--theme-tint-color:#90c6e7;--scrim-color:0, 0, 0;--scrim-direction:90deg;--scrim-opacity-from:0.25;--scrim-opacity-to:0.7;--padding:0;--quote-size:1.3rem;color:var(--theme-color)}:host(.is-xl){--quote-size:3rem}:host([theme=light]){--nano-loader-base:#fff;--nano-loader-tint:white;--theme-color:#4a4a4a;--scrim-color:255, 255, 255;--scrim-opacity-from:0.25;--scrim-opacity-to:1;--scrim-direction:270deg;color:var(--theme-color)}:host([theme=light]) .hero__primary-content{--color:#4a4a4a}.hero{position:relative}.hero--rtl{--scrim-direction:270deg}.hero--secondary:not(.hero--iconbox){--scrim-direction:0deg}.hero__bg-wrap{overflow:hidden}.hero__bg-slot{position:absolute;top:0;bottom:0;left:0;right:0}.hero__ctas{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:32px 32px 0;margin-bottom:-64px;position:relative;z-index:1}@media (max-width: 52em){.hero__ctas{display:none}}@media (max-width: 58em){.hero__ctas{margin-bottom:-48px}}.hero__ctas ::slotted(a.button[slot=secondary-ctas]),.hero__ctas::slotted(a.button[slot=secondary-ctas]){padding:0.25rem 0.5rem !important;font-size:0.875rem !important;margin:0 0.25rem !important}.hero__img{display:block;--padding:inherit}.hero__breadcrumbs{display:none;margin:20px 14px 0;line-height:14px}.hero--breadcrumb .hero__breadcrumbs{display:block}.is-xl .hero__breadcrumbs{margin:0 50px;max-width:50%}.is-xxl .hero__breadcrumbs{margin:0 83px}.hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero__breadcrumbs::slotted(*[slot=breadcrumb]){font-size:0.85rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;font-stretch:125%;display:inline-block;margin-bottom:16px;position:relative;z-index:2}.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero--hasbg .hero__breadcrumbs::slotted(*[slot=breadcrumb]){text-shadow:1px 1px rgba(0, 0, 0, 0.15)}.hero__breadcrumbs ::slotted(a[slot=breadcrumb]),.hero__breadcrumbs::slotted(a[slot=breadcrumb]){color:var(--theme-tint-color) !important;cursor:pointer}.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]),.hero__breadcrumbs::slotted(.slash[slot=breadcrumb]){color:var(--theme-color);position:relative;margin:0 0.5rem;display:inline-block}.hero__scrim{position:absolute;left:0;right:0;bottom:0;top:0;z-index:0;background:-webkit-gradient(linear, left top, left bottom, from(var(--scrim-direction)), color-stop(0%, rgba(var(--scrim-color), var(--scrim-opacity-from))), to(rgba(var(--scrim-color), var(--scrim-opacity-to))));background:linear-gradient(var(--scrim-direction), rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%, rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%)}.hero--scrim .hero__scrim{background:none}.hero__content{max-width:1440px;--grid-row-gap:0;margin:0 auto;position:relative}.hero__content.is-xl{margin-top:50px;max-width:1540px}.hero__content.is-xxl{margin-top:83px;max-width:1606px}.hero__primary{margin:16px}.hero--breadcrumb .hero__primary{margin:0 16px}.hero--backbtn .hero__primary{margin-left:0}.hero__primary ::slotted(nano-icon-button[slot=back-btn]),.hero__primary::slotted(nano-icon-button[slot=back-btn]){font-size:2rem}.is-xl .hero__primary{margin:0 0 50px 50px}.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:-3rem;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:unset;margin-right:unset;-webkit-margin-start:-3rem;margin-inline-start:-3rem;-webkit-margin-end:0;margin-inline-end:0}}.is-xxl .hero__primary{margin:0 0 83px 83px}.hero__primary-content{max-width:45rem;--color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex}.hero--backbtn .hero__primary-content>div{padding:10px 0 0 0}.hero__primary-content ::slotted(h1[slot=primary-content]),.hero__primary-content::slotted(h1[slot=primary-content]){line-height:26px !important;margin-top:0 !important;margin-bottom:18px !important;font-size:2rem !important}.is-xl .hero__primary-content ::slotted(h1[slot=primary-content]),.is-xl .hero__primary-content::slotted(h1[slot=primary-content]){line-height:31px !important;margin-bottom:30px !important}.is-xl .hero__primary-content ::slotted(.button[slot=primary-content]),.is-xl .hero__primary-content::slotted(.button[slot=primary-content]){margin-top:20px !important}.hero__secondary{display:none;height:100%;padding:0 14px 20px}.hero--secondary .hero__secondary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.is-xl .hero__secondary{padding:0 50px 50px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.is-xxl .hero__secondary{padding:0 83px 83px}.hero__icon-box{background:rgba(0, 0, 0, 0.7);padding:24px;width:100%;margin-bottom:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:white}.is-xl .hero__icon-box{max-width:410px;-webkit-box-flex:0;-ms-flex:0 1 410px;flex:0 1 410px}.hero__icon-box::slotted([slot=icon-box-item] nano-icon){color:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px}.hero__icon-box ::slotted([slot=icon-box-item]){--nano-color-base:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.8125rem;margin-bottom:20px}.hero__icon-box ::slotted(.last[slot=icon-box-item]),.hero__icon-box::slotted(.last[slot=icon-box-item]){margin-bottom:0}.hero__quote-content{margin-top:auto;text-align:center;width:100%}.is-xl .hero__quote-content{max-width:500px;-webkit-box-flex:0;-ms-flex:0 1 500px;flex:0 1 500px;text-align:initial}.hero__quote::before,.hero__quote::after{content:'\"';font-size:var(--quote-size);font-weight:700;font-style:italic;line-height:0;color:#abb6b8;display:inline;position:relative}.hero__quote ::slotted([slot=quote]),.hero__quote::slotted([slot=quote]){font-size:var(--quote-size);font-weight:300;font-style:italic;display:inline}.hero__quote-author{text-align:right;text-align:end;font-size:1rem;opacity:0.8}.hero--sub .hero__content.is-xl{margin-top:40px}.hero--sub .hero__content.is-xl .hero__primary{margin:0 0 40px 50px}.hero--sub .hero__content.is-xl .hero__secondary{padding:0 50px 50px 40px}.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(.button[slot=primary-content]){margin-top:8px !important}.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(h1[slot=primary-content]){margin-bottom:18px !important}.hero--sub .hero__content.is-xxl .hero__primary{margin:0 0 40px 83px}.hero--sub .hero__content.is-xxl .hero__secondary{padding:0 83px 83px 40px}";var Hero=function(){function t(t){var o=this;registerInstance(this,t);this.isLegacy=false;this.gridSizes=[];this.imgSrcSet=null;this.largeScreenBP=900;this.theme="dark";this.level="top";this.handleGridChange=function(t){o.gridSizes=t.detail};this.HeroContent=function(){return[!o.hasIconBox&&o.hasCtas?h("div",{class:"hero__ctas"},h("slot",{name:"secondary-ctas"})):"",h("div",{class:"hero__scrim"},h("slot",{name:"scrim"})),h("nano-grid",{onNanoBpChange:o.handleGridChange,class:"hero__content",xlCols:2,xlSize:o.largeScreenBP},h("nano-grid-item",{gridStates:"xl-col-span-2"},h("div",{class:"hero__breadcrumbs"},h("slot",{name:"breadcrumb"}))),h("nano-grid-item",{gridStates:o.hasSecondaryContent?"xl-col-span-1 xl-col-start-1 xl-row-start-2":"xl-col-span-2 xl-col-start-1 xl-row-start-2"},h("div",{class:"hero__primary"},h("div",{class:"hero__primary-content"},h("slot",{name:"back-btn"}),h("div",null,h("slot",{name:"primary-content"}))))),o.hasSecondaryContent&&h("nano-grid-item",{gridStates:"xl-col-span-1 xl-col-start-2 xl-row-start-2"},h("div",{class:"hero__secondary"},h("slot",{name:"secondary-content"}),o.hasIconBox&&h("div",{class:"hero__icon-box"},h("slot",{name:"icon-box"}),h("slot",{name:"icon-box-item"})),o.hasQuote&&h("div",{class:"hero__quote-content"},h("span",{class:"hero__quote"},h("slot",{name:"quote"})),h("div",{class:"hero__quote-author"},h("slot",{name:"quote-author"}))))))]}}t.prototype.breadCrumbChange=function(){this.breadCrumbs.filter((function(t){return t.tagName==="A"&&!t.nextElementSibling.classList.contains("slash")})).forEach((function(t){t.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))};t.prototype.iconBoxItemChange=function(){this.iconBoxItems.forEach((function(t){return t.classList.remove("last")}));if(this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList)this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")};t.prototype.slotChangeObserver=function(){var t=this;if(this.mo)this.mo.disconnect();var o=this.mo=new MutationObserver((function(){return t.processSlottedContent()}));o.observe(this.host,{childList:true})};t.prototype.processSlottedContent=function(){this.hasCtas=!!this.host.querySelector('[slot="secondary-ctas"]');this.iconBoxItems=Array.from(this.host.querySelectorAll('[slot="icon-box-item"]'));this.hasIconBox=!!this.host.querySelector('[slot="icon-box"]')||!!this.iconBoxItems.length;this.hasScrim=!!this.host.querySelector('[slot="scrim"]');this.breadCrumbs=Array.from(this.host.querySelectorAll('[slot="breadcrumb"]'));this.hasSecondaryContent=!!this.host.querySelector('[slot="icon-box"]')||!!this.host.querySelector('[slot="quote"]')||!!this.host.querySelector('[slot="icon-box-item"]')||!!this.host.querySelector('[slot="secondary-content"]');this.hasBg=!!this.host.querySelector('[slot="background"]')||!!this.imgSrc;this.hasBackBtn=!!this.host.querySelector('[slot="back-btn"]');this.hasQuote=!!this.host.querySelector('[slot="quote"]')};t.prototype.connectedCallback=function(){this.isLegacy=!hasShadowDom(this.host)};t.prototype.disconnectedCallback=function(){if(this.mo)this.mo.disconnect()};t.prototype.componentDidLoad=function(){this.slotChangeObserver()};t.prototype.componentWillLoad=function(){this.processSlottedContent()};t.prototype.render=function(){var t;var o=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";return h(Host,{class:(t={},t[this.gridSizes.join(" ")]=true,t)},h("div",{class:{hero:true,"hero--light":this.theme==="light","hero--secondary":this.hasSecondaryContent,"hero--iconbox":this.hasIconBox,"hero--rtl":o,"hero--scrim":this.hasScrim,"hero--legacy":this.isLegacy,"hero--breadcrumb":!!this.breadCrumbs.length,"hero--hasbg":this.hasBg,"hero--backbtn":this.hasBackBtn,"hero--sub":this.level==="sub"}},h("div",{class:"hero__bg-wrap"},!!this.imgSrc&&h("nano-img",{class:"hero__img",lazy:false,background:true,srcSet:this.imgSrcSet,src:this.imgSrc},h(this.HeroContent,null)),!this.imgSrc&&[h("div",{class:"hero__bg-slot"},h("slot",{name:"background"})),h(this.HeroContent,null)])))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}},enumerable:false,configurable:true});return t}();Hero.style=heroCss;export{Hero as nano_hero};
 //# sourceMappingURL=nano-hero.entry.js.map

package/dist/esm-es5/nano-icon-button.entry.js

@@ -1,5 +1,5 @@
+var __awaiter=this&&this.__awaiter||function(n,o,t,e){function i(n){return n instanceof t?n:new t((function(o){o(n)}))}return new(t||(t=Promise))((function(t,r){function a(n){try{c(e.next(n))}catch(o){r(o)}}function s(n){try{c(e["throw"](n))}catch(o){r(o)}}function c(n){n.done?t(n.value):i(n.value).then(a,s)}c((e=e.apply(n,o||[])).next())}))};var __generator=this&&this.__generator||function(n,o){var t={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},e,i,r,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(n){return function(o){return c([n,o])}}function c(a){if(e)throw new TypeError("Generator is already executing.");while(t)try{if(e=1,i&&(r=a[0]&2?i["return"]:a[0]?i["throw"]||((r=i["return"])&&r.call(i),0):i.next)&&!(r=r.call(i,a[1])).done)return r;if(i=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:t.label++;return{value:a[1],done:false};case 5:t.label++;i=a[1];a=[0];continue;case 7:a=t.ops.pop();t.trys.pop();continue;default:if(!(r=t.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){t=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){t.label=a[1];break}if(a[0]===6&&t.label<r[1]){t.label=r[1];r=a;break}if(r&&t.label<r[2]){t.label=r[2];t.ops.push(a);break}if(r[2])t.ops.pop();t.trys.pop();continue}a=o.call(n,t)}catch(s){a=[6,s];i=0}finally{e=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};
 /*!
  * Web Components for Nanopore digital Web Apps
- */
-import{r as registerInstance,h}from"./index-5f8d16e7.js";import{f as focusVisible}from"./focus-visible-8b2c14da.js";var iconButtonCss=".sc-nano-icon-button-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-icon-button,*.sc-nano-icon-button::before,*.sc-nano-icon-button::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-icon-button{display:none !important}.sc-nano-icon-button-h{display:inline-block;--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px)}.icon-button.sc-nano-icon-button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;border-radius:var(--border-radius);background:var(--background);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;-webkit-transition:-webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:-webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out, -webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out}.icon-button.sc-nano-icon-button:hover:not(.icon-button--disabled),.icon-button.sc-nano-icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button.sc-nano-icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button.sc-nano-icon-button:focus{outline:none}.icon-button--disabled.sc-nano-icon-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button.sc-nano-icon-button:focus{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";var IconButton=function(){function o(o){registerInstance(this,o);this.type="button";this.disabled=false}o.prototype.componentDidLoad=function(){focusVisible.observe(this.button)};o.prototype.connectedCallback=function(){if(this.button)focusVisible.observe(this.button)};o.prototype.disconnectedCallback=function(){focusVisible.unobserve(this.button)};o.prototype.render=function(){var o=this;var n=this.href===undefined?"button":"a";return h(n,{part:"base",ref:function(n){return o.button=n},class:{"icon-button":true,"icon-button--disabled":this.disabled},"aria-label":this.label,name:this.name,value:this.value,href:this.href||undefined,target:this.href&&this.target?this.target:undefined,type:!this.href&&this.type?this.type:undefined},h("nano-icon",{name:this.iconName,src:this.iconSrc,"aria-hidden":"true"}))};return o}();IconButton.style=iconButtonCss;export{IconButton as nano_icon_button};
+ */import{r as registerInstance,h}from"./index-c42becad.js";import{f as focusVisible}from"./focus-visible-8b2c14da.js";var iconButtonCss=".sc-nano-icon-button-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-icon-button,*.sc-nano-icon-button::before,*.sc-nano-icon-button::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-icon-button{display:none !important}.sc-nano-icon-button-h{display:inline-block;--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px)}.icon-button.sc-nano-icon-button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;border-radius:var(--border-radius);background:var(--background);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;-webkit-transition:-webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:-webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out, -webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out}.icon-button.sc-nano-icon-button:hover:not(.icon-button--disabled),.icon-button.sc-nano-icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button.sc-nano-icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button.sc-nano-icon-button:focus{outline:none}.icon-button--disabled.sc-nano-icon-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button.sc-nano-icon-button:focus{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";var IconButton=function(){function n(n){registerInstance(this,n);this.type="button";this.disabled=false}n.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){this.button.focus();return[2]}))}))};n.prototype.componentDidLoad=function(){focusVisible.observe(this.button)};n.prototype.connectedCallback=function(){if(this.button)focusVisible.observe(this.button)};n.prototype.disconnectedCallback=function(){focusVisible.unobserve(this.button)};n.prototype.render=function(){var n=this;var o=this.href===undefined?"button":"a";return h(o,{part:"base",ref:function(o){return n.button=o},class:{"icon-button":true,"icon-button--disabled":this.disabled},"aria-label":this.label,name:this.name,value:this.value,href:this.href||undefined,target:this.href&&this.target?this.target:undefined,type:!this.href&&this.type?this.type:undefined},h("nano-icon",{name:this.iconName,src:this.iconSrc,"aria-hidden":"true"}))};return n}();IconButton.style=iconButtonCss;export{IconButton as nano_icon_button};
 //# sourceMappingURL=nano-icon-button.entry.js.map

package/dist/esm-es5/nano-icon-button.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=scoped","src/components/icon-button/icon-button.tsx"],"names":["iconButtonCss","IconButton","hostRef","this","type","disabled","prototype","componentDidLoad","focusVisible","observe","button","connectedCallback","disconnectedCallback","unobserve","render","_this","TagType","href","undefined","h","part","ref","el","class","icon-button","icon-button--disabled","aria-label","label","name","value","target","iconName","src","iconSrc","aria-hidden"],"mappings":";;;oHAAA,IAAMA,cAAgB,qhECUTC,WAAU,WALvB,SAAAA,EAAAC,4BAe2BC,KAAAC,KAAsC,SAatCD,KAAAE,SAAW,MAUpCJ,EAAAK,UAAAC,iBAAA,WACEC,aAAaC,QAAQN,KAAKO,SAG5BT,EAAAK,UAAAK,kBAAA,WACE,GAAIR,KAAKO,OAAQF,aAAaC,QAAQN,KAAKO,SAG7CT,EAAAK,UAAAM,qBAAA,WACEJ,aAAaK,UAAUV,KAAKO,SAG9BT,EAAAK,UAAAQ,OAAA,WAAA,IAAAC,EAAAZ,KACE,IAAMa,EAAUb,KAAKc,OAASC,UAAY,SAAY,IAEtD,OACEC,EAACH,EAAO,CACNI,KAAK,OACLC,IAAK,SAACC,GAAE,OAAMP,EAAKL,OAASY,GAC5BC,MAAO,CACLC,cAAe,KACfC,wBAAyBtB,KAAKE,UAC/BqB,aACWvB,KAAKwB,MACjBC,KAAMzB,KAAKyB,KACXC,MAAO1B,KAAK0B,MACZZ,KAAMd,KAAKc,MAAQC,UACnBY,OAAQ3B,KAAKc,MAAQd,KAAK2B,OAAS3B,KAAK2B,OAASZ,UACjDd,MAAOD,KAAKc,MAAQd,KAAKC,KAAOD,KAAKC,KAAOc,WAE5CC,EAAA,YAAA,CAAWS,KAAMzB,KAAK4B,SAAUC,IAAK7B,KAAK8B,QAAOC,cAAc,oBA/DhD","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,"sources":["src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=scoped","src/components/icon-button/icon-button.tsx"],"names":["iconButtonCss","IconButton","class_1","hostRef","this","type","disabled","prototype","setFocus","button","focus","componentDidLoad","focusVisible","observe","connectedCallback","disconnectedCallback","unobserve","render","_this","TagType","href","undefined","h","part","ref","el","class","icon-button","icon-button--disabled","aria-label","label","name","value","target","iconName","src","iconSrc","aria-hidden"],"mappings":";;;uHAAA,IAAMA,cAAgB,qhECUTC,WAAU,WALvB,SAAAC,EAAAC,4BAe2BC,KAAAC,KAAsC,SAatCD,KAAAE,SAAW,MAY9BJ,EAAAK,UAAAC,SAAN,gGACEJ,KAAKK,OAAOC,yBAGdR,EAAAK,UAAAI,iBAAA,WACEC,aAAaC,QAAQT,KAAKK,SAG5BP,EAAAK,UAAAO,kBAAA,WACE,GAAIV,KAAKK,OAAQG,aAAaC,QAAQT,KAAKK,SAG7CP,EAAAK,UAAAQ,qBAAA,WACEH,aAAaI,UAAUZ,KAAKK,SAG9BP,EAAAK,UAAAU,OAAA,WAAA,IAAAC,EAAAd,KACE,IAAMe,EAAUf,KAAKgB,OAASC,UAAY,SAAY,IAEtD,OACEC,EAACH,EAAO,CACNI,KAAK,OACLC,IAAK,SAACC,GAAE,OAAMP,EAAKT,OAASgB,GAC5BC,MAAO,CACLC,cAAe,KACfC,wBAAyBxB,KAAKE,UAC/BuB,aACWzB,KAAK0B,MACjBC,KAAM3B,KAAK2B,KACXC,MAAO5B,KAAK4B,MACZZ,KAAMhB,KAAKgB,MAAQC,UACnBY,OAAQ7B,KAAKgB,MAAQhB,KAAK6B,OAAS7B,KAAK6B,OAASZ,UACjDhB,MAAOD,KAAKgB,MAAQhB,KAAKC,KAAOD,KAAKC,KAAOgB,WAE5CC,EAAA,YAAA,CAAWS,KAAM3B,KAAK8B,SAAUC,IAAK/B,KAAKgC,QAAOC,cAAc,oBArEhD","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"]}

package/dist/esm-es5/nano-icon.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{k as getAssetPath,r as registerInstance,h,e as Host,g as getElement}from"./index-5f8d16e7.js";import{c as createColorClasses}from"./theme-1d4c8719.js";var CACHED_MAP;var getIconMap=function(){if(!CACHED_MAP){var n=window;n.Nanoicons=n.Nanoicons||{};CACHED_MAP=n.Nanoicons.map=n.Nanoicons.map||new Map}return CACHED_MAP};var getUrl=function(n){var t=getSrc(n.src);if(t){return t}t=getName(n.name,n.icon);if(t){return getNamedUrl(t)}if(n.icon){t=getSrc(n.icon);if(t){return t}}return null};var getNamedUrl=function(n){var t=getIconMap().get(n);if(t){return t}return getAssetPath("../node_modules/@fortawesome/fontawesome-pro/svgs/"+n+".svg")};var getName=function(n,t){if(!n&&t&&!isSrc(t)){n=t}if(isStr(n)){n=toLower(n)}if(!isStr(n)||n.trim()===""){return null}var i=n.replace(/[a-z]|-|\/|\d/gi,"");if(i!==""){console.warn("invalid characters in icon name "+n);return null}return n};var getSrc=function(n){if(isStr(n)){n=n.trim();if(isSrc(n)){return n}}return null};var isSrc=function(n){return n.length>0&&/(\/|\.)/.test(n)};var isStr=function(n){return typeof n==="string"};var toLower=function(n){return n.toLowerCase()};var validateContent=function(n){if(n){var t=document.createElement("div");t.innerHTML=n;for(var i=t.childNodes.length-1;i>=0;i--){if(t.childNodes[i].nodeName.toLowerCase()!=="svg"){t.removeChild(t.childNodes[i])}}var e=t.firstElementChild;if(e&&e.nodeName.toLowerCase()==="svg"){var r=e.getAttribute("class")||"";e.setAttribute("class",(r+" sc-nano-icon s-nano-icon svg").trim());if(isValid(e)){return t.innerHTML}}}return""};var isValid=function(n){if(n.nodeType===1){if(n.nodeName.toLowerCase()==="script"){return false}for(var t=0;t<n.attributes.length;t++){var i=n.attributes[t].value;if(isStr(i)&&i.toLowerCase().indexOf("on")===0){return false}}for(var t=0;t<n.childNodes.length;t++){if(!isValid(n.childNodes[t])){return false}}}return true};var iconContent=new Map;var requests=new Map;var getSvgContent=function(n){var t=requests.get(n);if(!t){t=fetch(n).then((function(t){if(t.ok){return t.text().then((function(t){iconContent.set(n,validateContent(t))}))}iconContent.set(n,"")}));requests.set(n,t)}return t};var iconCss=':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{--color:var(--nano-color-base, "currentColor");--primary-color:var(--nano-color-tint, "currentColor");--secondary-color:var(--nano-color-shade, "currentColor");--stroke-width:32px;--primary-opacity:0.8;--secondary-opacity:1;--icon-size:var(--nano-icon-size, 1em);--icon-margin-top:var(--nano-icon-margin-top, 0);--icon-margin-end:var(--nano-icon-margin-end, 0);--icon-margin-bottom:var(--nano-icon-margin-bottom, 0);--icon-margin-start:var(--nano-icon-margin-start, 0);display:inline-block;width:var(--icon-size);height:var(--icon-size);min-width:var(--icon-size);min-height:var(--icon-size);contain:strict;fill:currentColor;-webkit-box-sizing:content-box !important;box-sizing:content-box !important;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease;color:var(--color);margin-left:var(--icon-margin-start);margin-right:var(--icon-margin-end);margin-top:var(--icon-margin-top);margin-bottom:var(--icon-margin-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--icon-margin-start);margin-inline-start:var(--icon-margin-start);-webkit-margin-end:var(--icon-margin-end);margin-inline-end:var(--icon-margin-end)}}:host .nanoicon{stroke:currentColor}.nanoicon-fill-none{fill:none}.nanoicon-stroke-width{stroke-width:32px;stroke-width:var(--stroke-width)}.icon-inner,.nanoicon,svg,.svg{display:block;height:100%;width:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}';var CANSHADOW=!!document.head.attachShadow;var Icon=function(){function n(n){registerInstance(this,n);this.isVisible=false;this.isLoading=true;this.lazy=true}n.prototype.setAriaLabel=function(){if(!this.ariaLabel){var n=getName(this.name,this.icon);if(n){this.ariaLabel=n.split("/").slice(-1)[0].replace(/\-/g," ")}}};n.prototype.connectedCallback=function(){var n=this;this.waitUntilVisible(this.el,"50px",(function(){n.isVisible=true;n.loadIcon()}))};n.prototype.disconnectedCallback=function(){if(this.io){this.io.disconnect();this.io=undefined}};n.prototype.componentWillLoad=function(){this.setAriaLabel()};n.prototype.waitUntilVisible=function(n,t,i){var e=this;if(CANSHADOW&&this.lazy&&typeof window!=="undefined"&&window.IntersectionObserver){var r=this.io=new window.IntersectionObserver((function(n){if(n[0].isIntersecting||n[1]&&n[1].isIntersecting){r.disconnect();e.io=undefined;i()}}),{rootMargin:t});r.observe(n)}else{i()}};n.prototype.loadIcon=function(){var n=this;if(this.isVisible){var t=getUrl(this);if(t){if(iconContent.has(t)){this.svgContent=iconContent.get(t);this.isLoading=false}else{getSvgContent(t).then((function(){n.svgContent=iconContent.get(t);n.isLoading=false}))}}}this.setAriaLabel()};n.prototype.render=function(){var n;var t=this.flipRtl||this.name&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&this.el.ownerDocument.dir==="rtl"&&this.flipRtl!==false;return h(Host,{role:"img",class:Object.assign(Object.assign({},createColorClasses(this.color)),(n={loading:this.isLoading},n["icon-"+this.size]=!!this.size,n["flip-rtl"]=!!t,n))},this.svgContent?h("div",{class:"icon-inner",innerHTML:this.svgContent}):h("div",{class:"icon-inner"}))};Object.defineProperty(n,"assetsDirs",{get:function(){return["../../../node_modules/@fortawesome/fontawesome-pro/svgs"]},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}},enumerable:false,configurable:true});return n}();Icon.style=iconCss;export{Icon as nano_icon};
+import{l as getAssetPath,r as registerInstance,h,e as Host,g as getElement}from"./index-c42becad.js";import{c as createColorClasses}from"./theme-1d4c8719.js";var CACHED_MAP;var getIconMap=function(){if(!CACHED_MAP){var n=window;n.Nanoicons=n.Nanoicons||{};CACHED_MAP=n.Nanoicons.map=n.Nanoicons.map||new Map}return CACHED_MAP};var getUrl=function(n){var t=getSrc(n.src);if(t){return t}t=getName(n.name,n.icon);if(t){return getNamedUrl(t)}if(n.icon){t=getSrc(n.icon);if(t){return t}}return null};var getNamedUrl=function(n){var t=getIconMap().get(n);if(t){return t}return getAssetPath("../node_modules/@fortawesome/fontawesome-pro/svgs/"+n+".svg")};var getName=function(n,t){if(!n&&t&&!isSrc(t)){n=t}if(isStr(n)){n=toLower(n)}if(!isStr(n)||n.trim()===""){return null}var i=n.replace(/[a-z]|-|\/|\d/gi,"");if(i!==""){console.warn("invalid characters in icon name "+n);return null}return n};var getSrc=function(n){if(isStr(n)){n=n.trim();if(isSrc(n)){return n}}return null};var isSrc=function(n){return n.length>0&&/(\/|\.)/.test(n)};var isStr=function(n){return typeof n==="string"};var toLower=function(n){return n.toLowerCase()};var validateContent=function(n){if(n){var t=document.createElement("div");t.innerHTML=n;for(var i=t.childNodes.length-1;i>=0;i--){if(t.childNodes[i].nodeName.toLowerCase()!=="svg"){t.removeChild(t.childNodes[i])}}var e=t.firstElementChild;if(e&&e.nodeName.toLowerCase()==="svg"){var r=e.getAttribute("class")||"";e.setAttribute("class",(r+" sc-nano-icon s-nano-icon svg").trim());if(isValid(e)){return t.innerHTML}}}return""};var isValid=function(n){if(n.nodeType===1){if(n.nodeName.toLowerCase()==="script"){return false}for(var t=0;t<n.attributes.length;t++){var i=n.attributes[t].value;if(isStr(i)&&i.toLowerCase().indexOf("on")===0){return false}}for(var t=0;t<n.childNodes.length;t++){if(!isValid(n.childNodes[t])){return false}}}return true};var iconContent=new Map;var requests=new Map;var getSvgContent=function(n){var t=requests.get(n);if(!t){t=fetch(n).then((function(t){if(t.ok){return t.text().then((function(t){iconContent.set(n,validateContent(t))}))}iconContent.set(n,"")}));requests.set(n,t)}return t};var iconCss=':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{--color:var(--nano-color-base, "currentColor");--primary-color:var(--nano-color-tint, "currentColor");--secondary-color:var(--nano-color-shade, "currentColor");--stroke-width:32px;--primary-opacity:0.8;--secondary-opacity:1;--icon-size:var(--nano-icon-size, 1em);--icon-margin-top:var(--nano-icon-margin-top, 0);--icon-margin-end:var(--nano-icon-margin-end, 0);--icon-margin-bottom:var(--nano-icon-margin-bottom, 0);--icon-margin-start:var(--nano-icon-margin-start, 0);display:inline-block;width:var(--icon-size);height:var(--icon-size);min-width:var(--icon-size);min-height:var(--icon-size);contain:strict;fill:currentColor;-webkit-box-sizing:content-box !important;box-sizing:content-box !important;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease;color:var(--color);margin-left:var(--icon-margin-start);margin-right:var(--icon-margin-end);margin-top:var(--icon-margin-top);margin-bottom:var(--icon-margin-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--icon-margin-start);margin-inline-start:var(--icon-margin-start);-webkit-margin-end:var(--icon-margin-end);margin-inline-end:var(--icon-margin-end)}}:host .nanoicon{stroke:currentColor}.nanoicon-fill-none{fill:none}.nanoicon-stroke-width{stroke-width:32px;stroke-width:var(--stroke-width)}.icon-inner,.nanoicon,svg,.svg{display:block;height:100%;width:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}';var CANSHADOW=!!document.head.attachShadow;var Icon=function(){function n(n){registerInstance(this,n);this.isVisible=false;this.isLoading=true;this.lazy=true}n.prototype.setAriaLabel=function(){if(!this.ariaLabel){var n=getName(this.name,this.icon);if(n){this.ariaLabel=n.split("/").slice(-1)[0].replace(/\-/g," ")}}};n.prototype.connectedCallback=function(){var n=this;this.waitUntilVisible(this.el,"50px",(function(){n.isVisible=true;n.loadIcon()}))};n.prototype.disconnectedCallback=function(){if(this.io){this.io.disconnect();this.io=undefined}};n.prototype.componentWillLoad=function(){this.setAriaLabel()};n.prototype.waitUntilVisible=function(n,t,i){var e=this;if(CANSHADOW&&this.lazy&&typeof window!=="undefined"&&window.IntersectionObserver){var r=this.io=new window.IntersectionObserver((function(n){if(n[0].isIntersecting||n[1]&&n[1].isIntersecting){r.disconnect();e.io=undefined;i()}}),{rootMargin:t});r.observe(n)}else{i()}};n.prototype.loadIcon=function(){var n=this;if(this.isVisible){var t=getUrl(this);if(t){if(iconContent.has(t)){this.svgContent=iconContent.get(t);this.isLoading=false}else{getSvgContent(t).then((function(){n.svgContent=iconContent.get(t);n.isLoading=false}))}}}this.setAriaLabel()};n.prototype.render=function(){var n;var t=this.flipRtl||this.name&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&this.el.ownerDocument.dir==="rtl"&&this.flipRtl!==false;return h(Host,{role:"img",class:Object.assign(Object.assign({},createColorClasses(this.color)),(n={loading:this.isLoading},n["icon-"+this.size]=!!this.size,n["flip-rtl"]=!!t,n))},this.svgContent?h("div",{class:"icon-inner",innerHTML:this.svgContent}):h("div",{class:"icon-inner"}))};Object.defineProperty(n,"assetsDirs",{get:function(){return["../../../node_modules/@fortawesome/fontawesome-pro/svgs"]},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}},enumerable:false,configurable:true});return n}();Icon.style=iconCss;export{Icon as nano_icon};
 //# sourceMappingURL=nano-icon.entry.js.map