npm - @nanoporetech-digital/components - Versions diffs - 1.13.21 → 1.15.0 - Mend

@nanoporetech-digital/components 1.13.21 → 1.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (706) hide show

package/dist/esm/nano-global-search-results.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-20becda2.js';
+import { r as registerInstance, h, e as Host, g as getElement } from './index-912ef959.js';
 import { i as index } from './ResizeObserver.es-e35e1ee3.js';
-const globalSearchResultsCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block;-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}.main-search{display:-webkit-box;display:-ms-flexbox;display:flex;background:white;font-size:14px;min-height:calc(100vh - 63px);-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.main-search__wrap{display:contents;height:100%}.main-search ul{margin:0;padding:0;list-style:none}.main-search li{margin:0;padding:0}.main-search button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none}.main-search .icon-button{color:inherit;-ms-flex-item-align:normal;-ms-grid-row-align:normal;align-self:normal;padding:9px 7px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.main-search__topbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:1em}.main-search__topbar::after{content:\"\";width:calc(100% - 30px);left:30px;position:relative;border-bottom:1px solid #e5eef1;padding-top:0.9em}.main-search__applied-filters{border:solid 1px #e4e6e8;text-transform:uppercase;border-radius:3px;font-weight:bold;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:0.9;padding:5px 5px 0 5px;letter-spacing:2px;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:0.5rem}.main-search__applied-filters span{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host(.small) .main-search__applied-filters{display:none}.main-search__applied-nofilter{margin-left:0;margin-right:5px;margin-top:0;margin-bottom:3px;padding-left:7px;padding-right:7px;padding-top:10px;padding-bottom:10px;font-size:12px;color:rgba(69, 85, 86, 0.85)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-nofilter{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-nofilter{padding-left:unset;padding-right:unset;-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px}}.main-search__applied-filter{padding-left:8px;padding-right:2px;padding-top:5px;padding-bottom:5px;margin-left:0;margin-right:5px;margin-top:0;margin-bottom:5px;color:#455556;font-size:11px;border-radius:2px;border:solid 1px rgba(0, 132, 169, 0.5);background-color:rgba(0, 132, 169, 0.2);line-height:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:2px;padding-inline-end:2px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}.main-search__applied-filter .icon-button{padding-left:10px;padding-right:4px;padding-top:2px;padding-bottom:1px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter .icon-button{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:4px;padding-inline-end:4px}}.main-search__applied-filter .icon-button nano-icon{pointer-events:none}.main-search .topbar__bkbtn{position:relative;left:-7px}:host(.small) .main-search .topbar__query{display:none}.main-search .topbar__filtering{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:1em;margin-right:0;margin-top:0;margin-bottom:0;-webkit-box-flex:1;-ms-flex:1;flex:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__filtering{margin-left:unset;margin-right:unset;-webkit-margin-start:1em;margin-inline-start:1em;-webkit-margin-end:0;margin-inline-end:0}}.main-search .topbar__order{min-width:165px;max-width:165px;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__order{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .main-search .topbar__order{max-width:300px}.main-search .topbar nano-select{opacity:1;-webkit-transition:0.1s ease opacity;transition:0.1s ease opacity}.main-search .topbar nano-select:not(.hydrated){opacity:0}.main-search .topbar__show-filters{margin-left:0.5em;margin-right:0;margin-top:0;margin-bottom:0;text-transform:uppercase;display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__show-filters{margin-left:unset;margin-right:unset;-webkit-margin-start:0.5em;margin-inline-start:0.5em;-webkit-margin-end:0;margin-inline-end:0}}.main-search .topbar__show-filters nano-icon{font-size:20px}:host(.small) .main-search .topbar__show-filters{display:-webkit-box;display:-ms-flexbox;display:flex}.main-search .topbar__filter-count{width:12px;height:12px;-webkit-box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);border:solid 1px #005c76;background-color:#005c76;color:white;font-size:7px;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:1;margin-bottom:3px}.main-search__results{font-size:14px;padding:1em 40px;color:rgba(69, 85, 86, 0.85);width:70%;height:100%}@media (max-width: 576px){.main-search__results{padding:1em 20px}}:host(.small) .main-search__results{width:100%}.main-search__filters{outline:none;padding-left:0;padding-right:40px;padding-top:1.8em;padding-bottom:1em;-webkit-box-flex:1;-ms-flex:1 1 30%;flex:1 1 30%;-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__filters{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:40px;padding-inline-end:40px}}@media (max-width: 576px){.main-search__filters{padding-right:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__filters{padding-right:unset;-webkit-padding-end:20px;padding-inline-end:20px}}}:host(:not(.small)) .main-search__filters{max-width:350px;min-width:220px}.filters{color:#455556;background:white;font-size:14px}:host(.small) .filters{position:fixed;width:0;height:0;z-index:10;top:0;right:0;-webkit-transition:all 0s ease 0.5s;transition:all 0s ease 0.5s;background:none}:host(.small) .filters.show{height:100vh;width:100vw;-webkit-transition:all 0s ease 0s;transition:all 0s ease 0s}:host(.small) .filters.show::after{opacity:1}:host(.small) .filters::after{content:\"\";background:rgba(0, 0, 0, 0.5);position:absolute;left:0;top:0;right:0;bottom:0;z-index:-1;opacity:0;-webkit-transition:0.1s ease opacity;transition:0.1s ease opacity}.filters__close-filters{display:none !important;font-size:1.4em}:host(.small) .filters__close-filters{display:inline-block !important;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.small) .filters__close-filters{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .filters-wrap{position:absolute;top:0;right:0;background:#f7f6f6;-webkit-transform:translateX(100%);transform:translateX(100%);width:300px;min-width:200px;max-width:80vw;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease;padding:1em;color:black;height:100vh}:host(.small) .filters.show .filters-wrap{-webkit-transform:translateX(0%);transform:translateX(0%);-webkit-box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1);box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1)}.filters ul{margin:0;padding:0;list-style:none}.filters li{margin:0;padding:0}.filters nano-details{--padding:0.8em;margin:0.8em 0}.filters nano-details strong[slot]{display:block;padding-left:calc(20px - 0.8em)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters nano-details strong[slot]{padding-left:unset;-webkit-padding-start:calc(20px - 0.8em);padding-inline-start:calc(20px - 0.8em);}}.filters nano-details nano-icon[slot=icon-end]{padding-left:calc(20px - 0.8em);padding-right:calc(20px - 0.8em)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters nano-details nano-icon[slot=icon-end]{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(20px - 0.8em);padding-inline-start:calc(20px - 0.8em);-webkit-padding-end:calc(20px - 0.8em);padding-inline-end:calc(20px - 0.8em)}}.filters li:last-child .filter-label{margin-bottom:0}.filters .filter-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;margin:0.5em 0;line-height:1.4;z-index:0}.filters .filter-label::before{margin-left:0;margin-right:1em;margin-top:0;margin-bottom:0;content:\"\";border:1px solid #0084a9;background:#fff;border-radius:3px;height:1em;width:1em;min-width:1em;min-height:1em;display:inline-block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters .filter-label::before{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:1em;margin-inline-end:1em}}.filters .filter-label::after{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='%23ffffff'%20d='M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z'/></svg>\");content:\"\";height:0.7em;width:0.7em;position:absolute;left:2px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:1;display:block;background-size:100%;background-position:center center;background-repeat:no-repeat}:host([dir=rtl]) .filters .filter-label::after{right:1px;left:auto}.filters .filter-cb{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.filters .filter-cb:checked+.filter-label::before{background:#245a6f}.filters .filter-cb:focus+.filter-label::before{-webkit-box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7)}.filters-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.filters-reset{color:#0084a9;font-size:12px;text-decoration:underline;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters-reset{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .filters-reset{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.filters-title{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;text-transform:uppercase;color:rgba(69, 85, 86, 0.85);font-weight:bold;font-size:14px}:host(.small) .filters-title{display:none}.result{text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:14px;border-bottom:1px solid #e4e6e8}.result *{word-wrap:break-word;word-break:break-word}.result__title{color:#0084a9;font-size:16px;line-height:1.43;margin:1em 0 0.5em 0;text-decoration:underline;width:70%;display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:500}.result__title nano-icon{margin-left:0;margin-right:0.5em;margin-top:0;margin-bottom:0;min-width:20px;min-height:20px;opacity:0.8}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.result__title nano-icon{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0.5em;margin-inline-end:0.5em}}@media (max-width: 768px){.result__title{width:100%}}.result__body{color:#455556;font-size:14px;line-height:1.67;width:70%}@media (max-width: 768px){.result__body{width:100%}}.result__date{font-size:10px;line-height:1.6;color:#455556;text-align:right;margin:auto 0;width:30%}@media (max-width: 768px){.result__date{width:100%;margin:0.8em 0 0 0}}";
+const globalSearchResultsCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block;-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}.main-search{display:-webkit-box;display:-ms-flexbox;display:flex;background:white;font-size:14px;min-height:calc(100vh - 63px);-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.main-search__wrap{display:contents;height:100%}.main-search ul{margin:0;padding:0;list-style:none}.main-search li{margin:0;padding:0}.main-search button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none}.main-search .icon-button{color:inherit;-ms-flex-item-align:normal;-ms-grid-row-align:normal;align-self:normal;padding:9px 7px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.main-search__topbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:1em}.main-search__topbar::after{content:\"\";width:calc(100% - 30px);left:30px;position:relative;border-bottom:1px solid #e5eef1;padding-top:0.9em}.main-search__applied-filters{border:solid 1px #e4e6e8;text-transform:uppercase;border-radius:3px;font-weight:bold;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:0.9;padding:5px 5px 0 5px;letter-spacing:2px;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:0.5rem}.main-search__applied-filters span{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host(.small) .main-search__applied-filters{display:none}.main-search__applied-nofilter{margin-left:0;margin-right:5px;margin-top:0;margin-bottom:3px;padding-left:7px;padding-right:7px;padding-top:10px;padding-bottom:10px;font-size:12px;color:rgba(69, 85, 86, 0.85)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-nofilter{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-nofilter{padding-left:unset;padding-right:unset;-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px}}.main-search__applied-filter{padding-left:8px;padding-right:2px;padding-top:5px;padding-bottom:5px;margin-left:0;margin-right:5px;margin-top:0;margin-bottom:5px;color:#455556;font-size:11px;border-radius:2px;border:solid 1px rgba(0, 132, 169, 0.5);background-color:rgba(0, 132, 169, 0.2);line-height:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:2px;padding-inline-end:2px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}.main-search__applied-filter .icon-button{padding-left:10px;padding-right:4px;padding-top:2px;padding-bottom:1px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter .icon-button{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:4px;padding-inline-end:4px}}.main-search__applied-filter .icon-button nano-icon{pointer-events:none}.main-search .topbar__bkbtn{position:relative;left:-7px}:host(.small) .main-search .topbar__query{display:none}.main-search .topbar__filtering{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:1em;margin-right:0;margin-top:0;margin-bottom:0;-webkit-box-flex:1;-ms-flex:1;flex:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__filtering{margin-left:unset;margin-right:unset;-webkit-margin-start:1em;margin-inline-start:1em;-webkit-margin-end:0;margin-inline-end:0}}.main-search .topbar__order{min-width:165px;max-width:165px;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__order{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .main-search .topbar__order{max-width:300px}.main-search .topbar nano-select{opacity:1;-webkit-transition:0.1s ease opacity;transition:0.1s ease opacity}.main-search .topbar nano-select:not(.hydrated){opacity:0}.main-search .topbar__show-filters{margin-left:0.5em;margin-right:0;margin-top:0;margin-bottom:0;text-transform:uppercase;display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__show-filters{margin-left:unset;margin-right:unset;-webkit-margin-start:0.5em;margin-inline-start:0.5em;-webkit-margin-end:0;margin-inline-end:0}}.main-search .topbar__show-filters nano-icon{font-size:20px}:host(.small) .main-search .topbar__show-filters{display:-webkit-box;display:-ms-flexbox;display:flex}.main-search .topbar__filter-count{width:12px;height:12px;-webkit-box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);border:solid 1px #005c76;background-color:#005c76;color:white;font-size:7px;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:1;margin-bottom:3px}.main-search__results{font-size:14px;padding:1em 40px;color:rgba(69, 85, 86, 0.85);width:70%;height:100%}@media (max-width: 576px){.main-search__results{padding:1em 20px}}:host(.small) .main-search__results{width:100%}.main-search__filters{outline:none;padding-left:0;padding-right:40px;padding-top:1.8em;padding-bottom:1em;-webkit-box-flex:1;-ms-flex:1 1 30%;flex:1 1 30%;-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__filters{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:40px;padding-inline-end:40px}}@media (max-width: 576px){.main-search__filters{padding-right:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__filters{padding-right:unset;-webkit-padding-end:20px;padding-inline-end:20px}}}:host(:not(.small)) .main-search__filters{max-width:350px;min-width:220px}.filters{color:#455556;background:white;font-size:14px}:host(.small) .filters{position:fixed;width:0;height:0;z-index:10;top:0;right:0;-webkit-transition:all 0s ease 0.5s;transition:all 0s ease 0.5s;background:none}:host(.small) .filters.show{height:100vh;width:100vw;-webkit-transition:all 0s ease 0s;transition:all 0s ease 0s}:host(.small) .filters.show::after{opacity:1}:host(.small) .filters::after{content:\"\";background:rgba(0, 0, 0, 0.5);position:absolute;left:0;top:0;right:0;bottom:0;z-index:-1;opacity:0;-webkit-transition:0.1s ease opacity;transition:0.1s ease opacity}.filters__close-filters{display:none !important;font-size:1.4em}:host(.small) .filters__close-filters{display:inline-block !important;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.small) .filters__close-filters{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .filters-wrap{position:absolute;top:0;right:0;background:#f7f6f6;-webkit-transform:translateX(100%);transform:translateX(100%);width:300px;min-width:200px;max-width:80vw;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease;padding:1em;color:black;height:100vh}:host(.small) .filters.show .filters-wrap{-webkit-transform:translateX(0%);transform:translateX(0%);-webkit-box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1);box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1)}.filters ul{margin:0;padding:0;list-style:none}.filters li{margin:0;padding:0}.filters nano-details{--padding:0.8em;margin:0.8em 0}.filters nano-details strong[slot]{display:block;padding-left:calc(20px - 0.8em)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters nano-details strong[slot]{padding-left:unset;-webkit-padding-start:calc(20px - 0.8em);padding-inline-start:calc(20px - 0.8em);}}.filters nano-details nano-icon[slot=icon-end]{padding-left:calc(20px - 0.8em);padding-right:calc(20px - 0.8em)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters nano-details nano-icon[slot=icon-end]{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(20px - 0.8em);padding-inline-start:calc(20px - 0.8em);-webkit-padding-end:calc(20px - 0.8em);padding-inline-end:calc(20px - 0.8em)}}.filters li:last-child .filter-label{margin-bottom:0}.filters .filter-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;margin:0.5em 0;line-height:1.4;z-index:0}.filters .filter-label::before{margin-left:0;margin-right:1em;margin-top:0;margin-bottom:0;content:\"\";border:1px solid #007495;background:#fff;border-radius:3px;height:1em;width:1em;min-width:1em;min-height:1em;display:inline-block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters .filter-label::before{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:1em;margin-inline-end:1em}}.filters .filter-label::after{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='%23ffffff'%20d='M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z'/></svg>\");content:\"\";height:0.7em;width:0.7em;position:absolute;left:2px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:1;display:block;background-size:100%;background-position:center center;background-repeat:no-repeat}:host([dir=rtl]) .filters .filter-label::after{right:1px;left:auto}.filters .filter-cb{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.filters .filter-cb:checked+.filter-label::before{background:#245a6f}.filters .filter-cb:focus+.filter-label::before{-webkit-box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7)}.filters-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.filters-reset{color:#007495;font-size:12px;text-decoration:underline;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters-reset{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .filters-reset{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.filters-title{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;text-transform:uppercase;color:rgba(69, 85, 86, 0.85);font-weight:bold;font-size:14px}:host(.small) .filters-title{display:none}.result{text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:14px;border-bottom:1px solid #e4e6e8}.result *{word-wrap:break-word;word-break:break-word}.result__title{color:#007495;font-size:16px;line-height:1.43;margin:1em 0 0.5em 0;text-decoration:underline;width:70%;display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:500}.result__title nano-icon{margin-left:0;margin-right:0.5em;margin-top:0;margin-bottom:0;min-width:20px;min-height:20px;opacity:0.8}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.result__title nano-icon{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0.5em;margin-inline-end:0.5em}}@media (max-width: 768px){.result__title{width:100%}}.result__body{color:#455556;font-size:14px;line-height:1.67;width:70%}@media (max-width: 768px){.result__body{width:100%}}.result__date{font-size:10px;line-height:1.6;color:#455556;text-align:right;margin:auto 0;width:30%}@media (max-width: 768px){.result__date{width:100%;margin:0.8em 0 0 0}}";
 let GlobalSearchResults = class {
   constructor(hostRef) {

package/dist/esm/nano-grid_3.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, e as Host, g as getElement, c as createEvent } from './index-20becda2.js';
+import { r as registerInstance, h, e as Host, g as getElement, c as createEvent } from './index-912ef959.js';
 import { i as index } from './ResizeObserver.es-e35e1ee3.js';
 const gridCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}: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}";

package/dist/esm/nano-grid_3.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-grid.nano-grid-item.nano-img.entry.js","mappings":"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","names":["STATEOPTS","ResizeObserver"],"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"],"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 { Component, h, Prop, Element, Host, State, Watch } from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { GridSizes } from '../../interface';\nimport { testLegacyStyle } from '../../utils/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 @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 @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 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 connectedCallback() {\n testLegacyStyle(this.el);\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 // console.log(this.currentWidth, this.generalClasses.join(' '), this.gridClass, this.showHelper, this.gridClass)\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}
1	+ {"file":"nano-grid.nano-grid-item.nano-img.entry.js","mappings":"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","names":["STATEOPTS","ResizeObserver"],"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"],"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 { Component, h, Prop, Element, Host, State, Watch } from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { GridSizes } from '../../interface';\nimport { testLegacyStyle } 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 @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 @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 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 connectedCallback() {\n testLegacyStyle(this.el);\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 // console.log(this.currentWidth, this.generalClasses.join(' '), this.gridClass, this.showHelper, this.gridClass)\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}

package/dist/esm/nano-hero.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, g as getElement } from './index-20becda2.js';
-import { h as hasShadowDom } from './utils-fd1ada22.js';
+import { r as registerInstance, h, g as getElement } from './index-912ef959.js';
+import { h as hasShadowDom } from './index-269c88a9.js';
 const heroCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}: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;color:var(--theme-color)}: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:2.5rem;font-weight:700;font-style:italic;color:#abb6b8;display:inline}.hero__quote ::slotted([slot=quote]),.hero__quote::slotted([slot=quote]){font-size:32px;font-weight:300;font-style:italic;display:inline}.is-xl .hero__quote ::slotted([slot=quote]),.is-xl .hero__quote::slotted([slot=quote]){font-size:42px}.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}";

package/dist/esm/nano-hero.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-hero.entry.js","mappings":"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","names":[],"sources":["./src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","./src/components/hero/hero.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n /*\n @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n * @prop --theme-color: Text color. Default depends on theme;\n * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{$color-lightblue};\n * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n /\n\n display: block;\n\n --nano-loader-base: #{$color-black};\n --nano-loader-tint: #{lighten($color-black, 20%)};\n --theme-color: #{$color-white};\n --theme-tint-color: #{$color-lightblue};\n --scrim-color: 0, 0, 0;\n --scrim-direction: 90deg;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 0.7;\n --padding: 0;\n\n color: var(--theme-color);\n}\n\n:host([theme='light']) {\n --nano-loader-base: #{$color-white};\n --nano-loader-tint: #{lighten($color-white, 20%)};\n --theme-color: #{$color-black};\n --scrim-color: 255, 255, 255;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 1;\n --scrim-direction: 270deg;\n\n color: var(--theme-color);\n\n .hero__primary-content {\n --color: #{$color-black};\n }\n}\n\n.hero {\n position: relative;\n\n &--rtl {\n --scrim-direction: 270deg;\n }\n\n &--secondary:not(.hero--iconbox) {\n --scrim-direction: 0deg;\n }\n\n &__bg-wrap {\n overflow: hidden;\n }\n\n &__bg-slot {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n }\n\n &__ctas {\n @media (max-width: 52em) {\n display: none;\n }\n\n @media (max-width: 58em) {\n margin-bottom: -48px;\n }\n\n display: flex;\n justify-content: flex-end;\n padding: 32px 32px 0;\n margin-bottom: -64px;\n position: relative;\n z-index: 1;\n\n ::slotted(a.button[slot='secondary-ctas']),\n &::slotted(a.button[slot='secondary-ctas']) {\n padding: 0.25rem 0.5rem !important;\n font-size: 0.875rem !important;\n margin: 0 0.25rem !important;\n }\n }\n\n &__img {\n display: block;\n\n --padding: inherit;\n }\n\n &__breadcrumbs {\n display: none;\n margin: 20px 14px 0;\n line-height: 14px;\n\n .hero--breadcrumb & {\n display: block;\n }\n\n .is-xl & {\n margin: 0 50px;\n max-width: 50%;\n }\n\n .is-xxl & {\n margin: 0 83px;\n }\n\n ::slotted([slot='breadcrumb']),\n &::slotted([slot='breadcrumb']) {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 600;\n font-stretch: 125%;\n display: inline-block;\n margin-bottom: 16px;\n position: relative;\n z-index: 2;\n\n .hero--hasbg & {\n text-shadow: 1px 1px rgb(0 0 0 / 15%);\n }\n }\n\n ::slotted(a[slot='breadcrumb']),\n &::slotted(a[slot='breadcrumb']) {\n color: var(--theme-tint-color) !important;\n cursor: pointer;\n }\n\n ::slotted(.slash[slot='breadcrumb']),\n &::slotted(.slash[slot='breadcrumb']) {\n color: var(--theme-color);\n position: relative;\n margin: 0 0.5rem;\n display: inline-block;\n }\n }\n\n &__scrim {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n z-index: 0;\n background:\n linear-gradient(\n var(--scrim-direction),\n rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%,\n rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%\n );\n\n .hero--scrim & {\n background: none;\n }\n }\n\n &__content {\n max-width: 1440px;\n\n --grid-row-gap: 0;\n\n margin: 0 auto;\n position: relative;\n\n &.is-xl {\n margin-top: 50px;\n max-width: 1540px;\n }\n\n &.is-xxl {\n margin-top: 83px;\n max-width: 1606px;\n }\n }\n\n &__primary {\n margin: 16px;\n\n .hero--breadcrumb & {\n margin: 0 16px;\n }\n\n .hero--backbtn & {\n margin-left: 0;\n }\n\n ::slotted(nano-icon-button[slot='back-btn']),\n &::slotted(nano-icon-button[slot='back-btn']) {\n font-size: 2rem;\n }\n\n .is-xl & {\n margin: 0 0 50px 50px;\n\n ::slotted(nano-icon-button[slot='back-btn']),\n &::slotted(nano-icon-button[slot='back-btn']) {\n @include margin(0, 0, 0, -3rem);\n }\n }\n\n .is-xxl & {\n margin: 0 0 83px 83px;\n }\n }\n\n &__primary-content {\n max-width: 45rem;\n\n --color: #fff;\n\n display: flex;\n\n .hero--backbtn & {\n > div {\n padding: 10px 0 0 0;\n }\n }\n\n ::slotted(h1[slot='primary-content']),\n &::slotted(h1[slot='primary-content']) {\n line-height: 26px !important;\n margin-top: 0 !important;\n margin-bottom: 18px !important;\n font-size: 2rem !important;\n }\n\n .is-xl & {\n ::slotted(h1[slot='primary-content']),\n &::slotted(h1[slot='primary-content']) {\n line-height: 31px !important;\n margin-bottom: 30px !important;\n }\n\n ::slotted(.button[slot='primary-content']),\n &::slotted(.button[slot='primary-content']) {\n margin-top: 20px !important;\n }\n }\n }\n\n &__secondary {\n display: none;\n height: 100%;\n padding: 0 14px 20px;\n\n .hero--secondary & {\n display: flex;\n align-items: center;\n }\n\n .is-xl & {\n padding: 0 50px 50px;\n justify-content: flex-end;\n }\n\n .is-xxl & {\n padding: 0 83px 83px;\n }\n }\n\n &__icon-box {\n background: rgba(0, 0, 0, 0.7);\n padding: 24px;\n width: 100%;\n margin-bottom: auto;\n display: flex;\n flex-direction: column;\n color: white;\n\n .is-xl & {\n max-width: 410px;\n flex: 0 1 410px;\n }\n\n // for silly IE\n &::slotted([slot='icon-box-item'] nano-icon) {\n color: var(--theme-tint-color);\n\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n }\n\n ::slotted([slot='icon-box-item']) {\n --nano-color-base: var(--theme-tint-color);\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n\n display: flex;\n align-items: center;\n font-size: 0.8125rem;\n margin-bottom: 20px;\n }\n\n ::slotted(.last[slot='icon-box-item']),\n &::slotted(.last[slot='icon-box-item']) {\n margin-bottom: 0;\n }\n }\n\n &__quote-content {\n margin-top: auto;\n text-align: center;\n width: 100%;\n\n .is-xl & {\n max-width: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n }\n\n &__quote {\n &::before,\n &::after {\n content: '\"';\n font-size: 2.5rem;\n font-weight: 700;\n font-style: italic;\n color: #abb6b8;\n display: inline;\n }\n\n ::slotted([slot='quote']),\n &::slotted([slot='quote']) {\n font-size: 32px;\n font-weight: 300;\n font-style: italic;\n display: inline;\n\n .is-xl & {\n font-size: 42px;\n }\n }\n }\n\n &__quote-author {\n text-align: right;\n text-align: end;\n font-size: 1rem;\n opacity: 0.8;\n }\n\n &--sub {\n .hero__content.is-xl {\n margin-top: 40px;\n\n .hero__primary {\n margin: 0 0 40px 50px;\n }\n\n .hero__secondary {\n padding: 0 50px 50px 40px;\n }\n\n ::slotted(.button[slot='primary-content']),\n &::slotted(.button[slot='primary-content']) {\n margin-top: 8px !important;\n }\n\n ::slotted(h1[slot='primary-content']),\n &::slotted(h1[slot='primary-content']) {\n margin-bottom: 18px !important;\n }\n }\n\n .hero__content.is-xxl {\n .hero__primary {\n margin: 0 0 40px 83px;\n }\n\n .hero__secondary {\n padding: 0 83px 83px 40px;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n h,\n ComponentInterface,\n VNode,\n State,\n Element,\n Watch,\n} from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\n/\n Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n /\n@Component({\n tag: 'nano-hero',\n styleUrl: 'hero.scss',\n shadow: true,\n})\nexport class Hero implements ComponentInterface {\n private mo?: MutationObserver;\n private isLegacy = false;\n\n @Element() host: HTMLNanoHeroElement;\n\n @State() hasIconBox: boolean;\n @State() hasScrim: boolean;\n @State() hasSecondaryContent: boolean;\n @State() hasQuote: boolean;\n @State() hasBg: boolean;\n @State() hasBackBtn: boolean;\n @State() hasCtas: boolean;\n @State() breadCrumbs: Element[];\n @Watch('breadCrumbs')\n breadCrumbChange() {\n // safari doesn't support ::slotted()::after ... so this :/\n this.breadCrumbs\n .filter(\n (crumb) =>\n crumb.tagName === 'A' &&\n !crumb.nextElementSibling.classList.contains('slash')\n )\n .forEach((crumb) => {\n crumb.insertAdjacentHTML(\n 'afterend',\n '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n );\n });\n }\n @State() iconBoxItems: Element[];\n @Watch('iconBoxItems')\n iconBoxItemChange() {\n this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n if (\n this.iconBoxItems[this.iconBoxItems.length - 1] &&\n this.iconBoxItems[this.iconBoxItems.length - 1].classList\n )\n this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n }\n\n /* src for backgronund image. For more control use the `background` slot instead. /\n @Prop() imgSrc?: string;\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() imgSrcSet?: string = null;\n\n /* The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) /\n @Prop() largeScreenBP: number = 900;\n\n /* Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) /\n @Prop() theme: 'dark' \| 'light' = 'dark';\n\n /* Set the content structure level of the hero. Defaults to 'top' */\n @Prop() level: 'top' \| 'sub' = 'top';\n\n private slotChangeObserver() {\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true });\n }\n\n private processSlottedContent() {\n this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n this.iconBoxItems = Array.from(\n this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n );\n this.hasIconBox =\n !!this.host.querySelector('[slot=\"icon-box\"]') \|\|\n !!this.iconBoxItems.length;\n this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n this.breadCrumbs = Array.from(\n this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n );\n this.hasSecondaryContent =\n !!this.host.querySelector('[slot=\"icon-box\"]') \|\|\n !!this.host.querySelector('[slot=\"quote\"]') \|\|\n !!this.host.querySelector('[slot=\"icon-box-item\"]') \|\|\n !!this.host.querySelector('[slot=\"secondary-content\"]');\n this.hasBg =\n !!this.host.querySelector('[slot=\"background\"]') \|\| !!this.imgSrc;\n this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n }\n\n connectedCallback() {\n this.isLegacy = !hasShadowDom(this.host);\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private HeroContent = (): VNode[] => {\n return [\n !this.hasIconBox && this.hasCtas ? (\n <div class=\"hero__ctas\">\n <slot name=\"secondary-ctas\" />\n </div>\n ) : (\n ''\n ),\n <div class=\"hero__scrim\">\n <slot name=\"scrim\" />\n </div>,\n <nano-grid class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\n <nano-grid-item gridStates=\"xl-col-span-2\">\n <div class=\"hero__breadcrumbs\">\n <slot name=\"breadcrumb\" />\n </div>\n </nano-grid-item>\n <nano-grid-item\n gridStates={\n this.hasSecondaryContent\n ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n }\n >\n <div class=\"hero__primary\">\n <div class=\"hero__primary-content\">\n <slot name=\"back-btn\" />\n <div>\n <slot name=\"primary-content\" />\n </div>\n </div>\n </div>\n </nano-grid-item>\n {this.hasSecondaryContent && (\n <nano-grid-item gridStates=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n <div class=\"hero__secondary\">\n <slot name=\"secondary-content\" />\n {this.hasIconBox && (\n <div class=\"hero__icon-box\">\n <slot name=\"icon-box\" />\n <slot name=\"icon-box-item\" />\n </div>\n )}\n {this.hasQuote && (\n <div class=\"hero__quote-content\">\n <span class=\"hero__quote\">\n <slot name=\"quote\" />\n </span>\n <div class=\"hero__quote-author\">\n <slot name=\"quote-author\" />\n </div>\n </div>\n )}\n </div>\n </nano-grid-item>\n )}\n </nano-grid>,\n ];\n };\n\n render() {\n const rtl =\n this.host.dir === 'rtl' \|\|\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <div\n class={{\n hero: true,\n 'hero--light': this.theme === 'light',\n 'hero--secondary': this.hasSecondaryContent,\n 'hero--iconbox': this.hasIconBox,\n 'hero--rtl': rtl,\n 'hero--scrim': this.hasScrim,\n 'hero--legacy': this.isLegacy,\n 'hero--breadcrumb': !!this.breadCrumbs.length,\n 'hero--hasbg': this.hasBg,\n 'hero--backbtn': this.hasBackBtn,\n 'hero--sub': this.level === 'sub',\n }}\n >\n <div class=\"hero__bg-wrap\">\n {!!this.imgSrc && (\n <nano-img\n class=\"hero__img\"\n lazy={false}\n background\n srcSet={this.imgSrcSet}\n src={this.imgSrc}\n >\n <this.HeroContent />\n </nano-img>\n )}\n {!this.imgSrc && [\n <div class=\"hero__bg-slot\">\n <slot name=\"background\" />\n </div>,\n <this.HeroContent />,\n ]}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-hero.entry.js","mappings":"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","names":[],"sources":["./src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","./src/components/hero/hero.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n /*\n @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n * @prop --theme-color: Text color. Default depends on theme;\n * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{$color-lightblue};\n * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n /\n\n display: block;\n\n --nano-loader-base: #{$color-black};\n --nano-loader-tint: #{lighten($color-black, 20%)};\n --theme-color: #{$color-white};\n --theme-tint-color: #{$color-lightblue};\n --scrim-color: 0, 0, 0;\n --scrim-direction: 90deg;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 0.7;\n --padding: 0;\n\n color: var(--theme-color);\n}\n\n:host([theme='light']) {\n --nano-loader-base: #{$color-white};\n --nano-loader-tint: #{lighten($color-white, 20%)};\n --theme-color: #{$color-black};\n --scrim-color: 255, 255, 255;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 1;\n --scrim-direction: 270deg;\n\n color: var(--theme-color);\n\n .hero__primary-content {\n --color: #{$color-black};\n }\n}\n\n.hero {\n position: relative;\n\n &--rtl {\n --scrim-direction: 270deg;\n }\n\n &--secondary:not(.hero--iconbox) {\n --scrim-direction: 0deg;\n }\n\n &__bg-wrap {\n overflow: hidden;\n }\n\n &__bg-slot {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n }\n\n &__ctas {\n @media (max-width: 52em) {\n display: none;\n }\n\n @media (max-width: 58em) {\n margin-bottom: -48px;\n }\n\n display: flex;\n justify-content: flex-end;\n padding: 32px 32px 0;\n margin-bottom: -64px;\n position: relative;\n z-index: 1;\n\n ::slotted(a.button[slot='secondary-ctas']),\n &::slotted(a.button[slot='secondary-ctas']) {\n padding: 0.25rem 0.5rem !important;\n font-size: 0.875rem !important;\n margin: 0 0.25rem !important;\n }\n }\n\n &__img {\n display: block;\n\n --padding: inherit;\n }\n\n &__breadcrumbs {\n display: none;\n margin: 20px 14px 0;\n line-height: 14px;\n\n .hero--breadcrumb & {\n display: block;\n }\n\n .is-xl & {\n margin: 0 50px;\n max-width: 50%;\n }\n\n .is-xxl & {\n margin: 0 83px;\n }\n\n ::slotted([slot='breadcrumb']),\n &::slotted([slot='breadcrumb']) {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 600;\n font-stretch: 125%;\n display: inline-block;\n margin-bottom: 16px;\n position: relative;\n z-index: 2;\n\n .hero--hasbg & {\n text-shadow: 1px 1px rgb(0 0 0 / 15%);\n }\n }\n\n ::slotted(a[slot='breadcrumb']),\n &::slotted(a[slot='breadcrumb']) {\n color: var(--theme-tint-color) !important;\n cursor: pointer;\n }\n\n ::slotted(.slash[slot='breadcrumb']),\n &::slotted(.slash[slot='breadcrumb']) {\n color: var(--theme-color);\n position: relative;\n margin: 0 0.5rem;\n display: inline-block;\n }\n }\n\n &__scrim {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n z-index: 0;\n background:\n linear-gradient(\n var(--scrim-direction),\n rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%,\n rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%\n );\n\n .hero--scrim & {\n background: none;\n }\n }\n\n &__content {\n max-width: 1440px;\n\n --grid-row-gap: 0;\n\n margin: 0 auto;\n position: relative;\n\n &.is-xl {\n margin-top: 50px;\n max-width: 1540px;\n }\n\n &.is-xxl {\n margin-top: 83px;\n max-width: 1606px;\n }\n }\n\n &__primary {\n margin: 16px;\n\n .hero--breadcrumb & {\n margin: 0 16px;\n }\n\n .hero--backbtn & {\n margin-left: 0;\n }\n\n ::slotted(nano-icon-button[slot='back-btn']),\n &::slotted(nano-icon-button[slot='back-btn']) {\n font-size: 2rem;\n }\n\n .is-xl & {\n margin: 0 0 50px 50px;\n\n ::slotted(nano-icon-button[slot='back-btn']),\n &::slotted(nano-icon-button[slot='back-btn']) {\n @include margin(0, 0, 0, -3rem);\n }\n }\n\n .is-xxl & {\n margin: 0 0 83px 83px;\n }\n }\n\n &__primary-content {\n max-width: 45rem;\n\n --color: #fff;\n\n display: flex;\n\n .hero--backbtn & {\n > div {\n padding: 10px 0 0 0;\n }\n }\n\n ::slotted(h1[slot='primary-content']),\n &::slotted(h1[slot='primary-content']) {\n line-height: 26px !important;\n margin-top: 0 !important;\n margin-bottom: 18px !important;\n font-size: 2rem !important;\n }\n\n .is-xl & {\n ::slotted(h1[slot='primary-content']),\n &::slotted(h1[slot='primary-content']) {\n line-height: 31px !important;\n margin-bottom: 30px !important;\n }\n\n ::slotted(.button[slot='primary-content']),\n &::slotted(.button[slot='primary-content']) {\n margin-top: 20px !important;\n }\n }\n }\n\n &__secondary {\n display: none;\n height: 100%;\n padding: 0 14px 20px;\n\n .hero--secondary & {\n display: flex;\n align-items: center;\n }\n\n .is-xl & {\n padding: 0 50px 50px;\n justify-content: flex-end;\n }\n\n .is-xxl & {\n padding: 0 83px 83px;\n }\n }\n\n &__icon-box {\n background: rgba(0, 0, 0, 0.7);\n padding: 24px;\n width: 100%;\n margin-bottom: auto;\n display: flex;\n flex-direction: column;\n color: white;\n\n .is-xl & {\n max-width: 410px;\n flex: 0 1 410px;\n }\n\n // for silly IE\n &::slotted([slot='icon-box-item'] nano-icon) {\n color: var(--theme-tint-color);\n\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n }\n\n ::slotted([slot='icon-box-item']) {\n --nano-color-base: var(--theme-tint-color);\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n\n display: flex;\n align-items: center;\n font-size: 0.8125rem;\n margin-bottom: 20px;\n }\n\n ::slotted(.last[slot='icon-box-item']),\n &::slotted(.last[slot='icon-box-item']) {\n margin-bottom: 0;\n }\n }\n\n &__quote-content {\n margin-top: auto;\n text-align: center;\n width: 100%;\n\n .is-xl & {\n max-width: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n }\n\n &__quote {\n &::before,\n &::after {\n content: '\"';\n font-size: 2.5rem;\n font-weight: 700;\n font-style: italic;\n color: #abb6b8;\n display: inline;\n }\n\n ::slotted([slot='quote']),\n &::slotted([slot='quote']) {\n font-size: 32px;\n font-weight: 300;\n font-style: italic;\n display: inline;\n\n .is-xl & {\n font-size: 42px;\n }\n }\n }\n\n &__quote-author {\n text-align: right;\n text-align: end;\n font-size: 1rem;\n opacity: 0.8;\n }\n\n &--sub {\n .hero__content.is-xl {\n margin-top: 40px;\n\n .hero__primary {\n margin: 0 0 40px 50px;\n }\n\n .hero__secondary {\n padding: 0 50px 50px 40px;\n }\n\n ::slotted(.button[slot='primary-content']),\n &::slotted(.button[slot='primary-content']) {\n margin-top: 8px !important;\n }\n\n ::slotted(h1[slot='primary-content']),\n &::slotted(h1[slot='primary-content']) {\n margin-bottom: 18px !important;\n }\n }\n\n .hero__content.is-xxl {\n .hero__primary {\n margin: 0 0 40px 83px;\n }\n\n .hero__secondary {\n padding: 0 83px 83px 40px;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n h,\n ComponentInterface,\n VNode,\n State,\n Element,\n Watch,\n} from '@stencil/core';\nimport { hasShadowDom } from '../../utils';\n\n/\n Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n /\n@Component({\n tag: 'nano-hero',\n styleUrl: 'hero.scss',\n shadow: true,\n})\nexport class Hero implements ComponentInterface {\n private mo?: MutationObserver;\n private isLegacy = false;\n\n @Element() host: HTMLNanoHeroElement;\n\n @State() hasIconBox: boolean;\n @State() hasScrim: boolean;\n @State() hasSecondaryContent: boolean;\n @State() hasQuote: boolean;\n @State() hasBg: boolean;\n @State() hasBackBtn: boolean;\n @State() hasCtas: boolean;\n @State() breadCrumbs: Element[];\n @Watch('breadCrumbs')\n breadCrumbChange() {\n // safari doesn't support ::slotted()::after ... so this :/\n this.breadCrumbs\n .filter(\n (crumb) =>\n crumb.tagName === 'A' &&\n !crumb.nextElementSibling.classList.contains('slash')\n )\n .forEach((crumb) => {\n crumb.insertAdjacentHTML(\n 'afterend',\n '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n );\n });\n }\n @State() iconBoxItems: Element[];\n @Watch('iconBoxItems')\n iconBoxItemChange() {\n this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n if (\n this.iconBoxItems[this.iconBoxItems.length - 1] &&\n this.iconBoxItems[this.iconBoxItems.length - 1].classList\n )\n this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n }\n\n /* src for backgronund image. For more control use the `background` slot instead. /\n @Prop() imgSrc?: string;\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() imgSrcSet?: string = null;\n\n /* The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) /\n @Prop() largeScreenBP: number = 900;\n\n /* Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) /\n @Prop() theme: 'dark' \| 'light' = 'dark';\n\n /* Set the content structure level of the hero. Defaults to 'top' */\n @Prop() level: 'top' \| 'sub' = 'top';\n\n private slotChangeObserver() {\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true });\n }\n\n private processSlottedContent() {\n this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n this.iconBoxItems = Array.from(\n this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n );\n this.hasIconBox =\n !!this.host.querySelector('[slot=\"icon-box\"]') \|\|\n !!this.iconBoxItems.length;\n this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n this.breadCrumbs = Array.from(\n this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n );\n this.hasSecondaryContent =\n !!this.host.querySelector('[slot=\"icon-box\"]') \|\|\n !!this.host.querySelector('[slot=\"quote\"]') \|\|\n !!this.host.querySelector('[slot=\"icon-box-item\"]') \|\|\n !!this.host.querySelector('[slot=\"secondary-content\"]');\n this.hasBg =\n !!this.host.querySelector('[slot=\"background\"]') \|\| !!this.imgSrc;\n this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n }\n\n connectedCallback() {\n this.isLegacy = !hasShadowDom(this.host);\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private HeroContent = (): VNode[] => {\n return [\n !this.hasIconBox && this.hasCtas ? (\n <div class=\"hero__ctas\">\n <slot name=\"secondary-ctas\" />\n </div>\n ) : (\n ''\n ),\n <div class=\"hero__scrim\">\n <slot name=\"scrim\" />\n </div>,\n <nano-grid class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\n <nano-grid-item gridStates=\"xl-col-span-2\">\n <div class=\"hero__breadcrumbs\">\n <slot name=\"breadcrumb\" />\n </div>\n </nano-grid-item>\n <nano-grid-item\n gridStates={\n this.hasSecondaryContent\n ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n }\n >\n <div class=\"hero__primary\">\n <div class=\"hero__primary-content\">\n <slot name=\"back-btn\" />\n <div>\n <slot name=\"primary-content\" />\n </div>\n </div>\n </div>\n </nano-grid-item>\n {this.hasSecondaryContent && (\n <nano-grid-item gridStates=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n <div class=\"hero__secondary\">\n <slot name=\"secondary-content\" />\n {this.hasIconBox && (\n <div class=\"hero__icon-box\">\n <slot name=\"icon-box\" />\n <slot name=\"icon-box-item\" />\n </div>\n )}\n {this.hasQuote && (\n <div class=\"hero__quote-content\">\n <span class=\"hero__quote\">\n <slot name=\"quote\" />\n </span>\n <div class=\"hero__quote-author\">\n <slot name=\"quote-author\" />\n </div>\n </div>\n )}\n </div>\n </nano-grid-item>\n )}\n </nano-grid>,\n ];\n };\n\n render() {\n const rtl =\n this.host.dir === 'rtl' \|\|\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <div\n class={{\n hero: true,\n 'hero--light': this.theme === 'light',\n 'hero--secondary': this.hasSecondaryContent,\n 'hero--iconbox': this.hasIconBox,\n 'hero--rtl': rtl,\n 'hero--scrim': this.hasScrim,\n 'hero--legacy': this.isLegacy,\n 'hero--breadcrumb': !!this.breadCrumbs.length,\n 'hero--hasbg': this.hasBg,\n 'hero--backbtn': this.hasBackBtn,\n 'hero--sub': this.level === 'sub',\n }}\n >\n <div class=\"hero__bg-wrap\">\n {!!this.imgSrc && (\n <nano-img\n class=\"hero__img\"\n lazy={false}\n background\n srcSet={this.imgSrcSet}\n src={this.imgSrc}\n >\n <this.HeroContent />\n </nano-img>\n )}\n {!this.imgSrc && [\n <div class=\"hero__bg-slot\">\n <slot name=\"background\" />\n </div>,\n <this.HeroContent />,\n ]}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/nano-icon-button.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { r as registerInstance, h } from './index-20becda2.js';
+import { r as registerInstance, h } from './index-912ef959.js';
 import { f as focusVisible } from './focus-visible-d6d6c6fb.js';
-const 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}.sc-nano-icon-button-h{display:inline-block;--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#0084a9;--nano-color-base:var(--color, #687576);--background:transparent}.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(--nano-spacing-small, 8px);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)))}";
+const 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}.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}.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(--nano-spacing-small, 8px);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)))}";
 let IconButton = class {
   constructor(hostRef) {

package/dist/esm/nano-icon.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { k as getAssetPath, r as registerInstance, h, e as Host, g as getElement } from './index-20becda2.js';
+import { k as getAssetPath, r as registerInstance, h, e as Host, g as getElement } from './index-912ef959.js';
 import { c as createColorClasses } from './theme-f5a16c79.js';
 let CACHED_MAP;