@nanoporetech-digital/components 8.23.11 → 8.24.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.
- package/dist/cjs/{fade-kpIGI6CJ.js → fade-Cgz_uvea.js} +1 -1
- package/dist/cjs/{fullscreen-Cuh4s9g3.js → fullscreen-CiU1Fy55.js} +1 -1
- package/dist/cjs/{lazyload-tvpXnTYY.js → lazyload-vgYlCqUh.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/nano-alert.cjs.entry.js +1 -1
- package/dist/cjs/nano-avatar_5.cjs.entry.js +3 -5
- package/dist/cjs/nano-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/nano-card-carousel.cjs.entry.js +1 -1
- package/dist/cjs/nano-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/nano-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/nano-collapsible-comparison.cjs.entry.js +1 -1
- package/dist/cjs/nano-components.cjs.js +1 -1
- package/dist/cjs/{nano-data-table-BC1htsdm.js → nano-data-table-UXM5xpCO.js} +2 -2
- package/dist/cjs/nano-data-table.cjs.entry.js +1 -1
- package/dist/cjs/nano-datalist_3.cjs.entry.js +2 -2
- package/dist/cjs/nano-date-picker_2.cjs.entry.js +2 -2
- package/dist/cjs/nano-details.cjs.entry.js +1 -1
- package/dist/cjs/nano-dialog.cjs.entry.js +1 -1
- package/dist/cjs/nano-dropdown_2.cjs.entry.js +2 -2
- package/dist/cjs/nano-file-upload.cjs.entry.js +1 -1
- package/dist/cjs/nano-footer.cjs.entry.js +1 -1
- package/dist/cjs/nano-global-nav.cjs.entry.js +14 -14
- package/dist/cjs/nano-icon-button_2.cjs.entry.js +2 -2
- package/dist/cjs/nano-icon.cjs.entry.js +2 -6
- package/dist/cjs/nano-in-page-nav.cjs.entry.js +1 -1
- package/dist/cjs/nano-increment.cjs.entry.js +1 -1
- package/dist/cjs/nano-input-otp.cjs.entry.js +1 -1
- package/dist/cjs/nano-masked-overflow.cjs.entry.js +1 -1
- package/dist/cjs/nano-menu-drawer.cjs.entry.js +1 -1
- package/dist/cjs/nano-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/nano-range.cjs.entry.js +1 -1
- package/dist/cjs/nano-rating.cjs.entry.js +1 -1
- package/dist/cjs/{nano-slides-DcXrQQgs.js → nano-slides-D-ELnUF-.js} +4 -4
- package/dist/cjs/nano-slides.cjs.entry.js +1 -1
- package/dist/cjs/nano-spinner.cjs.entry.js +1 -1
- package/dist/cjs/nano-split-pane.cjs.entry.js +1 -1
- package/dist/cjs/nano-step-accordion.cjs.entry.js +1 -1
- package/dist/cjs/nano-step-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/nano-tab-group.cjs.entry.js +1 -1
- package/dist/cjs/nano-tab.cjs.entry.js +1 -1
- package/dist/cjs/{table.worker-BXs-g6xI.js → table.worker-B-rQpQoz.js} +1 -1
- package/dist/collection/components/alert/alert.css +15 -15
- package/dist/collection/components/badge/badge.js +0 -21
- package/dist/collection/components/breadcrumb/breadcrumb.css +12 -12
- package/dist/collection/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/collection/components/card-carousel/card-carousel.css +5 -5
- package/dist/collection/components/checkbox/checkbox-group.css +6 -6
- package/dist/collection/components/checkbox/checkbox.css +21 -21
- package/dist/collection/components/collapsible-comparison/collapsible-comparison.css +4 -4
- package/dist/collection/components/content-links/content-links.css +4 -4
- package/dist/collection/components/cta/cta.js +8 -5
- package/dist/collection/components/data-table/table.css +12 -12
- package/dist/collection/components/datalist/datalist.css +2 -2
- package/dist/collection/components/date-picker/date-picker.css +7 -7
- package/dist/collection/components/details/details.css +7 -7
- package/dist/collection/components/dialog/dialog.css +11 -11
- package/dist/collection/components/drawer/drawer.css +13 -13
- package/dist/collection/components/dropdown/dropdown.css +2 -2
- package/dist/collection/components/file-upload/file-upload.css +18 -18
- package/dist/collection/components/footer/footer.css +3 -3
- package/dist/collection/components/global-nav/global-nav.css +26 -25
- package/dist/collection/components/global-nav/global-nav.js +13 -13
- package/dist/collection/components/global-search-results/global-search-results.css +24 -24
- package/dist/collection/components/icon/icon.css +1 -5
- package/dist/collection/components/icon/icon.js +1 -24
- package/dist/collection/components/icon-button/icon-button.css +4 -4
- package/dist/collection/components/in-page-nav/in-page-nav.css +9 -9
- package/dist/collection/components/increment/increment.css +5 -5
- package/dist/collection/components/input/input.css +20 -20
- package/dist/collection/components/input-otp/input-otp.css +7 -7
- package/dist/collection/components/masked-overflow/masked-overflow.css +5 -5
- package/dist/collection/components/menu/menu.css +3 -3
- package/dist/collection/components/menu-drawer/menu-drawer.css +6 -6
- package/dist/collection/components/option/option.css +12 -12
- package/dist/collection/components/progress-bar/progress-bar.css +5 -5
- package/dist/collection/components/range/range.css +15 -15
- package/dist/collection/components/rating/rating.css +5 -5
- package/dist/collection/components/select/select.css +20 -20
- package/dist/collection/components/slides/slides.css +11 -11
- package/dist/collection/components/spinner/spinner.css +5 -5
- package/dist/collection/components/split-pane/split-pane.css +4 -4
- package/dist/collection/components/step-accordion/step-accordion.css +10 -10
- package/dist/collection/components/step-breadcrumb/step-breadcrumb.css +17 -17
- package/dist/collection/components/table/table.css +3 -3
- package/dist/collection/components/tabs/tab-group.css +6 -6
- package/dist/collection/components/tabs/tab.css +15 -14
- package/dist/collection/components/tag/tag.css +4 -4
- package/dist/collection/components/tooltip/tooltip.css +4 -4
- package/dist/components/badge.js +0 -3
- package/dist/components/cta.js +1 -1
- package/dist/components/datalist.js +1 -1
- package/dist/components/date-picker.js +1 -1
- package/dist/components/details.js +1 -1
- package/dist/components/drawer.js +1 -1
- package/dist/components/dropdown.js +1 -1
- package/dist/components/global-search-results.js +1 -1
- package/dist/components/icon-button.js +1 -1
- package/dist/components/icon.js +2 -7
- package/dist/components/input.js +1 -1
- package/dist/components/masked-overflow.js +1 -1
- package/dist/components/menu.js +1 -1
- package/dist/components/nano-alert.js +1 -1
- package/dist/components/nano-breadcrumb.js +1 -1
- package/dist/components/nano-card-carousel.js +1 -1
- package/dist/components/nano-checkbox-group.js +1 -1
- package/dist/components/nano-checkbox.js +1 -1
- package/dist/components/nano-collapsible-comparison.js +1 -1
- package/dist/components/nano-data-table.js +1 -1
- package/dist/components/nano-dialog.js +1 -1
- package/dist/components/nano-file-upload.js +1 -1
- package/dist/components/nano-footer.js +1 -1
- package/dist/components/nano-global-nav.js +14 -14
- package/dist/components/nano-in-page-nav.js +1 -1
- package/dist/components/nano-increment.js +1 -1
- package/dist/components/nano-input-otp.js +1 -1
- package/dist/components/nano-menu-drawer.js +1 -1
- package/dist/components/nano-range.js +1 -1
- package/dist/components/nano-rating.js +1 -1
- package/dist/components/nano-split-pane.js +1 -1
- package/dist/components/nano-step-accordion.js +1 -1
- package/dist/components/nano-step-breadcrumb.js +1 -1
- package/dist/components/nano-tab-group.js +1 -1
- package/dist/components/nano-tab.js +1 -1
- package/dist/components/option.js +1 -1
- package/dist/components/progress-bar.js +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/slides.js +1 -1
- package/dist/components/spinner.js +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/esm/{fade-Y5mYUwiO.js → fade-DHblf0j-.js} +1 -1
- package/dist/esm/{fullscreen-Ct2ACI6T.js → fullscreen-D2561t_N.js} +1 -1
- package/dist/esm/{lazyload-ZYbHlu3K.js → lazyload-DN6DHpMi.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/nano-alert.entry.js +1 -1
- package/dist/esm/nano-avatar_5.entry.js +3 -5
- package/dist/esm/nano-breadcrumb.entry.js +1 -1
- package/dist/esm/nano-card-carousel.entry.js +1 -1
- package/dist/esm/nano-checkbox-group.entry.js +1 -1
- package/dist/esm/nano-checkbox.entry.js +1 -1
- package/dist/esm/nano-collapsible-comparison.entry.js +1 -1
- package/dist/esm/nano-components.js +1 -1
- package/dist/esm/{nano-data-table-Bn4l0Q3q.js → nano-data-table-07vJ2bHA.js} +2 -2
- package/dist/esm/nano-data-table.entry.js +1 -1
- package/dist/esm/nano-datalist_3.entry.js +2 -2
- package/dist/esm/nano-date-picker_2.entry.js +2 -2
- package/dist/esm/nano-details.entry.js +1 -1
- package/dist/esm/nano-dialog.entry.js +1 -1
- package/dist/esm/nano-dropdown_2.entry.js +2 -2
- package/dist/esm/nano-file-upload.entry.js +1 -1
- package/dist/esm/nano-footer.entry.js +1 -1
- package/dist/esm/nano-global-nav.entry.js +14 -14
- package/dist/esm/nano-icon-button_2.entry.js +2 -2
- package/dist/esm/nano-icon.entry.js +2 -6
- package/dist/esm/nano-in-page-nav.entry.js +1 -1
- package/dist/esm/nano-increment.entry.js +1 -1
- package/dist/esm/nano-input-otp.entry.js +1 -1
- package/dist/esm/nano-masked-overflow.entry.js +1 -1
- package/dist/esm/nano-menu-drawer.entry.js +1 -1
- package/dist/esm/nano-progress-bar.entry.js +1 -1
- package/dist/esm/nano-range.entry.js +1 -1
- package/dist/esm/nano-rating.entry.js +1 -1
- package/dist/esm/{nano-slides-0qDi5Vv7.js → nano-slides-D0dTkk-b.js} +4 -4
- package/dist/esm/nano-slides.entry.js +1 -1
- package/dist/esm/nano-spinner.entry.js +1 -1
- package/dist/esm/nano-split-pane.entry.js +1 -1
- package/dist/esm/nano-step-accordion.entry.js +1 -1
- package/dist/esm/nano-step-breadcrumb.entry.js +1 -1
- package/dist/esm/nano-tab-group.entry.js +1 -1
- package/dist/esm/nano-tab.entry.js +1 -1
- package/dist/esm/{table.worker-BMDbprO8.js → table.worker-Ssz8Z5u_.js} +1 -1
- package/dist/nano-components/{fade-Y5mYUwiO.js → fade-DHblf0j-.js} +1 -1
- package/dist/nano-components/{fullscreen-Ct2ACI6T.js → fullscreen-D2561t_N.js} +1 -1
- package/dist/nano-components/{lazyload-ZYbHlu3K.js → lazyload-DN6DHpMi.js} +1 -1
- package/dist/nano-components/nano-alert.entry.js +1 -1
- package/dist/nano-components/nano-avatar_5.entry.js +1 -1
- package/dist/nano-components/nano-breadcrumb.entry.js +1 -1
- package/dist/nano-components/nano-card-carousel.entry.js +1 -1
- package/dist/nano-components/nano-checkbox-group.entry.js +1 -1
- package/dist/nano-components/nano-checkbox.entry.js +1 -1
- package/dist/nano-components/nano-collapsible-comparison.entry.js +1 -1
- package/dist/nano-components/nano-components.css +121 -223
- package/dist/nano-components/nano-components.esm.js +1 -1
- package/dist/nano-components/{nano-data-table-Bn4l0Q3q.js → nano-data-table-07vJ2bHA.js} +1 -1
- package/dist/nano-components/nano-data-table.entry.js +1 -1
- package/dist/nano-components/nano-datalist_3.entry.js +1 -1
- package/dist/nano-components/nano-date-picker_2.entry.js +1 -1
- package/dist/nano-components/nano-details.entry.js +1 -1
- package/dist/nano-components/nano-dialog.entry.js +1 -1
- package/dist/nano-components/nano-dropdown_2.entry.js +1 -1
- package/dist/nano-components/nano-file-upload.entry.js +1 -1
- package/dist/nano-components/nano-footer.entry.js +1 -1
- package/dist/nano-components/nano-global-nav.entry.js +1 -1
- package/dist/nano-components/nano-icon-button_2.entry.js +1 -1
- package/dist/nano-components/nano-icon.entry.js +1 -1
- package/dist/nano-components/nano-in-page-nav.entry.js +1 -1
- package/dist/nano-components/nano-increment.entry.js +1 -1
- package/dist/nano-components/nano-input-otp.entry.js +1 -1
- package/dist/nano-components/nano-masked-overflow.entry.js +1 -1
- package/dist/nano-components/nano-menu-drawer.entry.js +1 -1
- package/dist/nano-components/nano-progress-bar.entry.js +1 -1
- package/dist/nano-components/nano-range.entry.js +1 -1
- package/dist/nano-components/nano-rating.entry.js +1 -1
- package/dist/nano-components/{nano-slides-0qDi5Vv7.js → nano-slides-D0dTkk-b.js} +3 -3
- package/dist/nano-components/nano-slides.entry.js +1 -1
- package/dist/nano-components/nano-spinner.entry.js +1 -1
- package/dist/nano-components/nano-split-pane.entry.js +1 -1
- package/dist/nano-components/nano-step-accordion.entry.js +1 -1
- package/dist/nano-components/nano-step-breadcrumb.entry.js +1 -1
- package/dist/nano-components/nano-tab-group.entry.js +1 -1
- package/dist/nano-components/nano-tab.entry.js +1 -1
- package/dist/nano-components/{table.worker-BMDbprO8.js → table.worker-Ssz8Z5u_.js} +1 -1
- package/dist/style/components.css +1 -1
- package/dist/style/components.css.map +1 -1
- package/dist/style/core.css +1 -1
- package/dist/style/core.css.map +1 -1
- package/dist/style/dark.css +1 -1
- package/dist/style/dark.css.map +1 -1
- package/dist/style/light.css +1 -1
- package/dist/style/light.css.map +1 -1
- package/dist/style/nano.css +1 -1
- package/dist/style/nano.css.map +1 -1
- package/dist/types/components/badge/badge.d.ts +0 -2
- package/dist/types/components/cta/cta.d.ts +1 -1
- package/dist/types/components/icon/icon.d.ts +0 -4
- package/dist/types/components.d.ts +2 -18
- package/docs-json.json +151 -187
- package/docs-vscode.json +2 -41
- package/hydrate/index.js +56 -64
- package/hydrate/index.mjs +56 -64
- package/package.json +3 -3
- /package/dist/types/builds/{sN_eAsgS → zUbCqThW}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/generate-vue-component.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS → zUbCqThW}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/index.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS → zUbCqThW}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/output-vue.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS → zUbCqThW}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/plugin.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS → zUbCqThW}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/types.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS → zUbCqThW}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/utils.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS → zUbCqThW}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS → zUbCqThW}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS → zUbCqThW}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS/0/Digital/nano-components/packages/components/.stencil/wdio.conf.d.ts → zUbCqThW/0/Digital/nano-components/packages/components/.stencil/wdio.config.d.ts} +0 -0
- /package/dist/{wdio.conf.js → wdio.config.js} +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{r as o,c as e,g as s,B as i,a as n}from"./index-BM3Om9WE.js";import{g as t}from"./theme-aiuyr36I.js";import{d as a}from"./throttle-C93FMm2Z.js";import{t as r,h as c}from"./renderer-DpNDfhNy.js";const h=class{constructor(s){o(this,s),this.nanoChange=e(this,"nanoChange",7),this.nanoValidate=e(this,"nanoValidate",7)}mo;checkboxTypes;grpId="nano-checkbox-group-"+l++;ignoreValueSet=!1;get host(){return s(this)}checkboxes;nativeCbs;errorMessage="";showErrorMsg=!1;hasHelperSlot=!1;validateOn="submitThenDirty";showInlineError=!0;min=0;max=null;disabled=null;_legend="";get legend(){return!this._legend.endsWith("*")&&this.nativeCbs?.find((o=>!!o.required))?this._legend+" *":this._legend}set legend(o){this._legend=o}hideLegend=!1;get invalid(){return this._invalid}_invalid=!1;get validityMessage(){return this.errorMessage}value;handleValuePropChange(){this.nanoChange.emit(this.value),this.ignoreValueSet||this.setCbValue()}async reportValidity(o){return new Promise((e=>{requestAnimationFrame((()=>{o&&(this.customValidate(),this.showInlineValidation()),e({isValid:!this.invalid,errorMessage:this.errorMessage})}))}))}async showError(o,e){let s;this.checkboxes&&(e&&(s=this.checkboxes.find((o=>o.value===e))),s||(s=this.checkboxes[0]),s&&(this.errorMessage=o,await s.setError(o),this.showInlineValidation()))}nanoChange;nanoValidate;handleValueChange(o){o.target!==this.host&&(this.setInternalValue(),this.handleCbChange())}handleCbChange(){this.invalid&&(this.showErrorMsg=this._invalid=!1),this.customValidate(),"dirty"===this.validateOn&&this.showInlineValidation()}customValidate(){if(!this.nativeCbs||!this.nativeCbs.length||!this.checkboxes)return;this.checkboxes.forEach(((o,e)=>{const s=this.nativeCbs[e];o.setError(""),s.setCustomValidity("")}));const o=this.nativeCbs.filter((o=>"radio"===o?.type));if(o&&o.length){const e=o.find((o=>o.required)),s=o.find((o=>o.checked));if(e&&s)return!1;if(e&&!s)return!0}const e=this.nativeCbs.filter((o=>"checkbox"===o?.type));if(!e||!e.length)return;const s=e.filter((o=>o.checked)),i=e.find((o=>o.required));let n=!1;return!(!i||s.find((o=>o===i)))||(this.checkboxes.forEach(((o,e)=>{const i=this.nativeCbs[e];let t="";this.min&&s.length<this.min&&(t=`You must select a minimum of ${this.min} values.`,n=!0),this.max&&s.length>this.max&&(t=`Only up to ${this.max} values are allowed.`,n=!0),n&&(o.setError(t,this.showErrorMsg),i.setCustomValidity(t))})),n)}handleComponentChange(){this.checkboxes?.length&&(this.checkboxTypes=t(this.checkboxes.map((o=>"types-"+(o.type||"checkbox")))),this.checkboxTypes["nano-checkbox-group"]=!0)}handleDisabledChange(){null!==this.disabled&&this.checkboxes?.length&&this.checkboxes.map((o=>o.disabled=this.disabled))}setInternalValue(){if(!this.nativeCbs?.length)return;this.ignoreValueSet=!0;const o=this.nativeCbs.filter((o=>"radio"===o?.type));o?.length?this.value=o.find((o=>o.checked))?.value||null:(this.value=this.checkboxes.flatMap((o=>o.checked?[o.value]:[])),requestAnimationFrame((()=>this.ignoreValueSet=!1)))}setCbValue(){this.checkboxes?.forEach((o=>{let e=this.value;"string"==typeof this.value&&this.value.includes(",")&&(e=this.value.split(",")),(o.value===e||o.value===this.value||Array.isArray(e)&&e.includes(o.value))&&(o.checked=!0)}))}attachSlotObserver(){this.mo||i.isServer||(this.mo=new MutationObserver((()=>this.handleSlotChange()))).observe(this.host,{childList:!0})}async handleSlotChange(){this.checkboxes=Array.from(this.host.querySelectorAll(r("nano-checkbox"))),this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]'),this.nativeCbs=await Promise.all(this.checkboxes.reduce(((o,e)=>(o.push(e.getInputElement()),o)),[])),this.nativeCbs.forEach((o=>{o&&o.addEventListener("invalid",this.handleInvalid)}))}handleInvalid=o=>{this._invalid=!0,this.showInlineError&&o.preventDefault(),"submit"===this.validateOn&&this.customValidate(),this.showInlineValidation(o)};showInlineValidation=o=>{this.nativeCbs&&this.nativeCbs.length&&this.showInlineError&&("submitThenDirty"===this.validateOn&&(this.validateOn="dirty"),this.showErrorMsg=!1,this._invalid=!1,this.errorMessage="",this.checkboxes.forEach(((o,e)=>{const s=this.nativeCbs[e];s.validity.valid||(s.validationMessage&&(this.errorMessage=s.validationMessage,this.showErrorMsg=!0,o.reportValidity(!1)),this._invalid=!0)})),this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:o}))};componentWillLoad(){this.handleValueChange=this.handleValueChange.bind(this),this.handleValueChange=a(this.handleValueChange,1),this.handleDisabledChange(),this.handleSlotChange(),this.setCbValue(),this.handleComponentChange()}connectedCallback(){this.attachSlotObserver()}disconnectedCallback(){this.mo&&this.mo.disconnect(),this.nativeCbs?.length&&this.nativeCbs.forEach((o=>{o&&o.removeEventListener("invalid",this.handleInvalid)}))}render(){const o=this.grpId+"-lbl",e=this.showInlineError||this.hasHelperSlot?this.grpId+"-more":"";return c(n,{key:"1fe168a0ae6c9ff13e16a7450f3c12b202384606",class:this.checkboxTypes},c("fieldset",{key:"9117864beeed6cccfcabec4807e57be62c4ce256",disabled:this.disabled,class:{cbgroup:!0,"has-error":this.showErrorMsg&&!!this.errorMessage,"has-helper":this.hasHelperSlot}},c("legend",{key:"54acc123b2485ac7c99588242984718f89749310",id:o,class:{cbgroup__legend:!0,"visually-hide":this.hideLegend}},c("slot",{key:"993175e12a774aa90ab912e2acbb87d7026a04cf",name:"legend"},this.legend)),c("div",{key:"c41df0938840d3ab6e46f1ed3b8d4bc34723ffd6",class:"cbgroup__cbs",role:"group","aria-labelledby":o+" "+e},c("slot",{key:"e6cac76be3682e7952f3eab723717219fb3a8217"})),(this.showInlineError||this.hasHelperSlot)&&c("div",{key:"140659b9f029f0c8877ba16388819fae65a57734",class:"cbgroup__more",id:e},this.showInlineError?c("div",{class:"cbgroup__error"},this.errorMessage):"",c("div",{key:"ae25dc05a2a58d411436523237e023052b332ee8",class:"cbgroup__help"},c("slot",{key:"66fc22533b0cc2af58c12a136a91e98afd29d9b9",name:"helper"})))))}static get watchers(){return{value:["handleValuePropChange"],min:["handleCbChange"],max:["handleCbChange"],nativeCbs:["customValidate"],checkboxes:["handleComponentChange","handleDisabledChange"],disabled:["handleDisabledChange"]}}};let l=0;h.style=".sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-group-h{--label-color:var(--nano-color-
|
|
4
|
+
import{r as o,c as e,g as s,B as i,a as n}from"./index-BM3Om9WE.js";import{g as t}from"./theme-aiuyr36I.js";import{d as a}from"./throttle-C93FMm2Z.js";import{t as r,h as c}from"./renderer-DpNDfhNy.js";const h=class{constructor(s){o(this,s),this.nanoChange=e(this,"nanoChange",7),this.nanoValidate=e(this,"nanoValidate",7)}mo;checkboxTypes;grpId="nano-checkbox-group-"+l++;ignoreValueSet=!1;get host(){return s(this)}checkboxes;nativeCbs;errorMessage="";showErrorMsg=!1;hasHelperSlot=!1;validateOn="submitThenDirty";showInlineError=!0;min=0;max=null;disabled=null;_legend="";get legend(){return!this._legend.endsWith("*")&&this.nativeCbs?.find((o=>!!o.required))?this._legend+" *":this._legend}set legend(o){this._legend=o}hideLegend=!1;get invalid(){return this._invalid}_invalid=!1;get validityMessage(){return this.errorMessage}value;handleValuePropChange(){this.nanoChange.emit(this.value),this.ignoreValueSet||this.setCbValue()}async reportValidity(o){return new Promise((e=>{requestAnimationFrame((()=>{o&&(this.customValidate(),this.showInlineValidation()),e({isValid:!this.invalid,errorMessage:this.errorMessage})}))}))}async showError(o,e){let s;this.checkboxes&&(e&&(s=this.checkboxes.find((o=>o.value===e))),s||(s=this.checkboxes[0]),s&&(this.errorMessage=o,await s.setError(o),this.showInlineValidation()))}nanoChange;nanoValidate;handleValueChange(o){o.target!==this.host&&(this.setInternalValue(),this.handleCbChange())}handleCbChange(){this.invalid&&(this.showErrorMsg=this._invalid=!1),this.customValidate(),"dirty"===this.validateOn&&this.showInlineValidation()}customValidate(){if(!this.nativeCbs||!this.nativeCbs.length||!this.checkboxes)return;this.checkboxes.forEach(((o,e)=>{const s=this.nativeCbs[e];o.setError(""),s.setCustomValidity("")}));const o=this.nativeCbs.filter((o=>"radio"===o?.type));if(o&&o.length){const e=o.find((o=>o.required)),s=o.find((o=>o.checked));if(e&&s)return!1;if(e&&!s)return!0}const e=this.nativeCbs.filter((o=>"checkbox"===o?.type));if(!e||!e.length)return;const s=e.filter((o=>o.checked)),i=e.find((o=>o.required));let n=!1;return!(!i||s.find((o=>o===i)))||(this.checkboxes.forEach(((o,e)=>{const i=this.nativeCbs[e];let t="";this.min&&s.length<this.min&&(t=`You must select a minimum of ${this.min} values.`,n=!0),this.max&&s.length>this.max&&(t=`Only up to ${this.max} values are allowed.`,n=!0),n&&(o.setError(t,this.showErrorMsg),i.setCustomValidity(t))})),n)}handleComponentChange(){this.checkboxes?.length&&(this.checkboxTypes=t(this.checkboxes.map((o=>"types-"+(o.type||"checkbox")))),this.checkboxTypes["nano-checkbox-group"]=!0)}handleDisabledChange(){null!==this.disabled&&this.checkboxes?.length&&this.checkboxes.map((o=>o.disabled=this.disabled))}setInternalValue(){if(!this.nativeCbs?.length)return;this.ignoreValueSet=!0;const o=this.nativeCbs.filter((o=>"radio"===o?.type));o?.length?this.value=o.find((o=>o.checked))?.value||null:(this.value=this.checkboxes.flatMap((o=>o.checked?[o.value]:[])),requestAnimationFrame((()=>this.ignoreValueSet=!1)))}setCbValue(){this.checkboxes?.forEach((o=>{let e=this.value;"string"==typeof this.value&&this.value.includes(",")&&(e=this.value.split(",")),(o.value===e||o.value===this.value||Array.isArray(e)&&e.includes(o.value))&&(o.checked=!0)}))}attachSlotObserver(){this.mo||i.isServer||(this.mo=new MutationObserver((()=>this.handleSlotChange()))).observe(this.host,{childList:!0})}async handleSlotChange(){this.checkboxes=Array.from(this.host.querySelectorAll(r("nano-checkbox"))),this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]'),this.nativeCbs=await Promise.all(this.checkboxes.reduce(((o,e)=>(o.push(e.getInputElement()),o)),[])),this.nativeCbs.forEach((o=>{o&&o.addEventListener("invalid",this.handleInvalid)}))}handleInvalid=o=>{this._invalid=!0,this.showInlineError&&o.preventDefault(),"submit"===this.validateOn&&this.customValidate(),this.showInlineValidation(o)};showInlineValidation=o=>{this.nativeCbs&&this.nativeCbs.length&&this.showInlineError&&("submitThenDirty"===this.validateOn&&(this.validateOn="dirty"),this.showErrorMsg=!1,this._invalid=!1,this.errorMessage="",this.checkboxes.forEach(((o,e)=>{const s=this.nativeCbs[e];s.validity.valid||(s.validationMessage&&(this.errorMessage=s.validationMessage,this.showErrorMsg=!0,o.reportValidity(!1)),this._invalid=!0)})),this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:o}))};componentWillLoad(){this.handleValueChange=this.handleValueChange.bind(this),this.handleValueChange=a(this.handleValueChange,1),this.handleDisabledChange(),this.handleSlotChange(),this.setCbValue(),this.handleComponentChange()}connectedCallback(){this.attachSlotObserver()}disconnectedCallback(){this.mo&&this.mo.disconnect(),this.nativeCbs?.length&&this.nativeCbs.forEach((o=>{o&&o.removeEventListener("invalid",this.handleInvalid)}))}render(){const o=this.grpId+"-lbl",e=this.showInlineError||this.hasHelperSlot?this.grpId+"-more":"";return c(n,{key:"1fe168a0ae6c9ff13e16a7450f3c12b202384606",class:this.checkboxTypes},c("fieldset",{key:"9117864beeed6cccfcabec4807e57be62c4ce256",disabled:this.disabled,class:{cbgroup:!0,"has-error":this.showErrorMsg&&!!this.errorMessage,"has-helper":this.hasHelperSlot}},c("legend",{key:"54acc123b2485ac7c99588242984718f89749310",id:o,class:{cbgroup__legend:!0,"visually-hide":this.hideLegend}},c("slot",{key:"993175e12a774aa90ab912e2acbb87d7026a04cf",name:"legend"},this.legend)),c("div",{key:"c41df0938840d3ab6e46f1ed3b8d4bc34723ffd6",class:"cbgroup__cbs",role:"group","aria-labelledby":o+" "+e},c("slot",{key:"e6cac76be3682e7952f3eab723717219fb3a8217"})),(this.showInlineError||this.hasHelperSlot)&&c("div",{key:"140659b9f029f0c8877ba16388819fae65a57734",class:"cbgroup__more",id:e},this.showInlineError?c("div",{class:"cbgroup__error"},this.errorMessage):"",c("div",{key:"ae25dc05a2a58d411436523237e023052b332ee8",class:"cbgroup__help"},c("slot",{key:"66fc22533b0cc2af58c12a136a91e98afd29d9b9",name:"helper"})))))}static get watchers(){return{value:["handleValuePropChange"],min:["handleCbChange"],max:["handleCbChange"],nativeCbs:["customValidate"],checkboxes:["handleComponentChange","handleDisabledChange"],disabled:["handleDisabledChange"]}}};let l=0;h.style=".sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-group-h{--label-color:var(--nano-color-surface-contrast);--label-font-size:var(--nano-font-size-xs);--invalid-msg-color:var(--nano-color-fill-danger-hover);--help-msg-color:var(--nano-color-surface-contrast);--more-font-size:var(--nano-font-size-2xs);--gap:var(--nano-spacing-md);display:block;inline-size:100%}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{box-sizing:inherit}.cbgroup.sc-nano-checkbox-group{margin:0;padding:0;border:0}.cbgroup__error.sc-nano-checkbox-group,.cbgroup__help.sc-nano-checkbox-group,.cbgroup__more.sc-nano-checkbox-group{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cbgroup__error.sc-nano-checkbox-group,.cbgroup__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--more-font-size);line-height:1.2;transition:0.3s ease-out opacity;font-style:italic}.show-error.sc-nano-checkbox-group .cbgroup__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .cbgroup__help.sc-nano-checkbox-group{opacity:1}.cbgroup__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);opacity:0}.has-error.sc-nano-checkbox-group .cbgroup__error.sc-nano-checkbox-group{opacity:1}.cbgroup__help.sc-nano-checkbox-group{opacity:1;color:var(--help-msg-color)}.has-error.sc-nano-checkbox-group .cbgroup__help.sc-nano-checkbox-group{opacity:0}.cbgroup__more.sc-nano-checkbox-group{block-size:1em;margin-block:var(--nano-spacing-sm) 0;position:relative;opacity:0;display:none;transition:all var(--nano-transition-fast) ease;transition-behavior:allow-discrete}.has-helper.sc-nano-checkbox-group .cbgroup__more.sc-nano-checkbox-group,.has-error.sc-nano-checkbox-group .cbgroup__more.sc-nano-checkbox-group{display:block;opacity:1}.cbgroup__legend.sc-nano-checkbox-group{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding:0 0 0.9375rem;margin:0;display:block;inline-size:100%}.cbgroup__legend.visually-hide.sc-nano-checkbox-group{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.cbgroup__cbs.sc-nano-checkbox-group{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--gap)}.types-segment.sc-nano-checkbox-group-h .cbgroup__cbs.sc-nano-checkbox-group{flex-direction:row;--gap:0}.types-tag.sc-nano-checkbox-group-h .cbgroup__cbs.sc-nano-checkbox-group{flex-direction:row;--gap:var(--nano-spacing-sm)}";export{h as nano_checkbox_group}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{r as n,c as o,e as c,g as a,a as e}from"./index-BM3Om9WE.js";import{t as i,h as s}from"./renderer-DpNDfhNy.js";let r=0;const b=class{constructor(c){n(this,c),this.nanoChange=o(this,"nanoChange",7),this.nanoFocus=o(this,"nanoFocus",7),this.nanoBlur=o(this,"nanoBlur",7)}inputId="nano-cb-"+r++;input;_slotWrapper;get slotWrapper(){return this._slotWrapper}set slotWrapper(n){this._slotWrapper=n,c((()=>{this.hasLabel=!!n?.querySelectorAll("*").length||!!this.label}))}get host(){return a(this)}inputType="checkbox";hasLabel=!0;hasFocus=!1;checked=!1;async handleCheckedChange(){if(this.input){if(this.input.checked=this.checked,"radio"===this.inputType&&this.name&&this.checked&&this.host.isConnected){const n=this.host.closest("form"),o=this.host.getRootNode();let c;c=n?Array.from(n.querySelectorAll(`${i("nano-checkbox")}[name="${this.name}"]`)):Array.from(o.querySelectorAll(`${i("nano-checkbox")}[name="${this.name}"]`))?.filter((n=>!n.closest("form"))),c.map((n=>{n!==this.host&&(n.checked=!1)}))}this.nanoChange.emit({value:this.value,checked:this.checked})}}disabled=!1;value="on";name;required=!1;type="checkbox";typeChange(){this.inputType=["checkbox","switch","tag"].includes(this.type)?"checkbox":"radio"}label;hideLabel=!1;indeterminate=!1;handleIndeterminateChange(){this.checked=!1,this.input.indeterminate=this.indeterminate}get invalid(){return this._invalid}_invalid=!1;get validityMessage(){return this.input?this.input.validationMessage:""}form;nanoChange;nanoFocus;nanoBlur;async getInputElement(){if(this.input)return this.input}async reportValidity(n=!1){return n&&this.input.reportValidity(),this._invalid=!this.input.validity.valid,{isValid:!this.invalid,errorMessage:this.input.validationMessage}}async setError(n,o=!0){this.input&&(o&&(this._invalid=!!n.length),this.input.setCustomValidity(n))}async setFocus(){this.input&&this.input.focus()}async removeFocus(){this.input&&this.input.blur()}onHostClick(n){this.host!==n.target&&this.host.contains(n.target)||(this.checked=!this.checked)}onReset(n){(this.form?document.querySelector("#"+this.form):this.host.closest("form"))&&n.target===this.host.closest("form")&&(this.checked=!1)}handleInvalid=n=>{this._invalid=!n.target.validity.valid};handleChange=n=>{this.checked=n.target.checked,this.indeterminate=!1};handleFocus=()=>{this.hasFocus=!0,this.nanoFocus.emit()};handleBlur=()=>{this.hasFocus=!1,this.nanoBlur.emit()};isRadioChecked(){requestAnimationFrame((()=>this.checked=this.input.checked))}componentWillLoad(){this.typeChange(),this.hasLabel=!!this.host.querySelectorAll("*").length||!!this.label}componentDidLoad(){this.input.indeterminate=this.indeterminate,this.isRadioChecked()}render(){const n=this.inputId+"-lbl";return s(e,{key:"4f3947cf07b077e7ae28748515f1e2997931906e"},s("label",{key:"286a3e5f4c13c79883120aa20d6659a131f013f8",class:{nanocb:!0,"nanocb--checked":this.checked,"nanocb--invalid":this.invalid,"nanocb--disabled":this.disabled,"nanocb--focused":this.hasFocus,"nanocb--indeterminate":this.indeterminate,["nanocb__"+this.type]:!0},htmlFor:this.inputId},s("input",{key:"efb1fbaef6017dba124b2919e7975722b371bb4e",type:this.inputType,name:this.name,form:this.form,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":this.hasLabel?n:void 0,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:n=>this.input=n,id:this.inputId,onInvalid:this.handleInvalid}),s("span",{key:"172e0eb05c62daef3f2cbb5eaebdebed2ba19f35",class:"nanocb__input"}),this.hasLabel&&s("div",{key:"0662be227b2cb39c9c062b5b66da97f89bc7c94a",id:n,class:{nanocb__label:!0,[`nanocb__label--${this.type}`]:!0,"nanocb__label--hidden":this.hideLabel}},!!this.label?.length&&s("span",{key:"b4a03cea8fa9a0ac7781676a45af3dd7a826c2e0"},this.label),s("span",{key:"a6e9c1c733cd6d0285ed5bd9a22bb8f548ee9260",hidden:!!this.label?.length,ref:n=>this.slotWrapper=n},s("slot",{key:"3db145f44f978a49e445677a98b527f1b590beca"})))))}static get watchers(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}}};b.style='.sc-nano-checkbox-h,*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-h,*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-h,*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-h,*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-h{--border-color:var(--nano-color-primary-1000);--label-color:var(--nano-color-base-1000);--spacing:var(--nano-spacing-sm);--active-background:var(--nano-color-primary-1000);--active-foreground:var(--nano-color-basic-white);--error-color:var(--nano-color-danger-1100);--disabled-label-color:var(--nano-color-neutral-1000);--disabled-background:var(--nano-color-neutral-300);--disabled-foreground:var(--nano-color-neutral-700);--disabled-border-color:var(--nano-color-neutral-1000);display:inline-block;max-inline-size:100%}.nanocb.sc-nano-checkbox{cursor:pointer;display:flex;align-items:center;line-height:1.2;position:relative;font-size:1rem}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus-visible~.nanocb__input.sc-nano-checkbox{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox{background-color:var(--active-background)}.nanocb.nanocb--disabled.sc-nano-checkbox{cursor:not-allowed}.sc-nano-checkbox-h:not([hide-label]) .nanocb.sc-nano-checkbox{gap:var(--spacing)}.sc-nano-checkbox-h:not([type=tag]) .nanocb__label--hidden.sc-nano-checkbox,.sc-nano-checkbox-h:not([type=segment]) .nanocb__label--hidden.sc-nano-checkbox{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox,.nanocb__checkbox.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{display:grid;place-content:center center;block-size:1.125em;inline-size:1.125em;min-inline-size:1.125em;min-block-size:1.125em;border-radius:1px;border:1px solid var(--border-color)}.nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after,.nanocb__checkbox.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{content:"";grid-column:1;grid-row:1;border:solid var(--active-foreground);border-width:0 0.125em 0.125em 0;opacity:1;transition:scale var(--nano-transition-x-fast) ease-out;transform-origin:center;rotate:45deg;scale:0;inline-size:0.325em;block-size:0.5625em;margin-block-start:-0.1875em}.nanocb--indeterminate.sc-nano-checkbox .nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after,.nanocb--indeterminate.sc-nano-checkbox .nanocb__checkbox.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__radio.sc-nano-checkbox .nanocb__label.sc-nano-checkbox,.nanocb__checkbox.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--label-color)}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after,.nanocb__checkbox.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after{scale:1}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox::after,.nanocb__checkbox.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox::after{scale:1;rotate:0deg;block-size:1px;inline-size:0.625em;border-width:0 0 0.125em;margin-block-start:0}.nanocb__radio.nanocb--invalid.sc-nano-checkbox .nanocb__input.sc-nano-checkbox,.nanocb__checkbox.nanocb--invalid.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{outline:1px solid var(--error-color);outline-offset:1px}.nanocb__radio.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox,.nanocb__checkbox.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{border:1px solid var(--disabled-border-color);background:var(--disabled-background)}.nanocb__radio.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after,.nanocb__checkbox.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{display:none}.nanocb__radio.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox,.nanocb__checkbox.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{color:var(--disabled-label-color)}.nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{border-radius:50%}.nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{border-radius:50%;background:var(--active-foreground);border:none;margin:0 !important}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after{scale:1;opacity:1;block-size:0.5em;inline-size:0.5em}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox{background-color:transparent}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox::after{display:none}.nanocb__switch.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{inline-size:2.1875em;block-size:1.125em;border:1px solid var(--border-color);border-radius:var(--nano-border-radius-pill)}.nanocb__switch.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{content:"";position:relative;display:block;border-radius:var(--nano-border-radius-circle);block-size:0.75em;inline-size:0.75em;background-color:var(--active-background);transform-origin:left;inset-inline-start:0.125em;inset-block-start:50%;transform:translateY(-50%);transition:0.1s ease scale, 0.1s ease background-color, 0.15s ease left}.nanocb__switch.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after{inset-inline-start:1.1875em;transform-origin:right;background-color:var(--active-foreground)}.nanocb__switch.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--label-color)}.nanocb__switch.nanocb--invalid.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{outline:1px solid var(--error-color);outline-offset:1px}.nanocb__switch.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{border:1px solid var(--disabled-background);background:var(--disabled-background)}.nanocb__switch.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{background:var(--disabled-foreground)}.nanocb__switch.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{color:var(--disabled-label-color)}[type=segment].sc-nano-checkbox-h{display:inline-block}.nanocb__segment.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{display:none}.nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--label-color);padding:0.4375em 0.9375em;border:1px solid var(--active-background)}.sc-nano-checkbox-h:first-of-type .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{border-inline-end:1px solid var(--nano-color-neutral-300);border-start-start-radius:var(--nano-border-radius-pill);border-end-start-radius:var(--nano-border-radius-pill)}.sc-nano-checkbox-h:not(:last-of-type .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox,.sc-nano-checkbox-h:first-of-type) .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{border-inline-start:none;border-inline-end:1px solid var(--nano-color-neutral-300)}.sc-nano-checkbox-h:last-of-type .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{border-inline-start:none;border-inline-end:1px solid var(--active-background) !important;border-start-end-radius:var(--nano-border-radius-pill);border-end-end-radius:var(--nano-border-radius-pill)}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{border:1px solid var(--active-background)}.nanocb__segment.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__label.sc-nano-checkbox{color:var(--active-foreground);background-color:var(--active-background);box-shadow:2px 2px 3px 0 rgba(0, 0, 0, 0.2) inset}.nanocb__segment.sc-nano-checkbox input.sc-nano-checkbox:focus-visible:focus~.nanocb__label.sc-nano-checkbox{outline:var(--nano-focus-ring);outline-offset:1px;z-index:1}.nanocb__segment.nanocb--invalid.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{outline:1px solid var(--error-color);outline-offset:1px}.nanocb__segment.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{background-color:var(--disabled-background);color:var(--disabled-label-color)}[type=tag].sc-nano-checkbox-h{display:inline-block}.nanocb__tag.sc-nano-checkbox{display:inline-flex;align-items:center;gap:6px;padding:8px;border:1px solid var(--active-background);color:var(--nano-color-primary-1100);font-size:var(--nano-font-size-2xs);font-weight:bold;transition:background-color var(--nano-transition-x-fast) ease-out}.nanocb__tag.sc-nano-checkbox:hover{background-color:var(--nano-color-primary-100)}.nanocb__tag.sc-nano-checkbox:has(input:checked){background-color:var(--nano-color-primary-300)}.nanocb__tag.sc-nano-checkbox:has(input:focus-visible:focus){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}.nanocb__tag.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{order:0;-webkit-user-select:none;user-select:none}.nanocb__tag.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{order:1;display:grid;place-content:center center;block-size:1.125em;inline-size:1.125em;border-radius:1px;border:1px solid var(--border-color);outline:none !important}.nanocb__tag.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{content:"";grid-column:1;grid-row:1;block-size:0;inline-size:0;border:solid var(--active-foreground);border-width:0 0.125em 0.125em 0;opacity:1;transition:scale var(--nano-transition-x-fast) ease-out;transform-origin:center;rotate:45deg;scale:0}.nanocb--indeterminate.sc-nano-checkbox .nanocb__tag.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__tag.nanocb--invalid.sc-nano-checkbox{outline:1px solid var(--error-color);outline-offset:1px}.nanocb__tag.nanocb--disabled.sc-nano-checkbox{background:var(--disabled-background);border:1px solid var(--disabled-border-color)}.nanocb__tag.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{border:1px solid var(--disabled-border-color);background:var(--disabled-background)}.nanocb__tag.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{display:none}.nanocb__tag.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{color:var(--disabled-label-color)}.nanocb__tag.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after{scale:1;inline-size:0.325em;block-size:0.5625em;margin-block-start:-0.1875em}';export{b as nano_checkbox}
|
|
4
|
+
import{r as n,c as o,e as c,g as a,a as e}from"./index-BM3Om9WE.js";import{t as i,h as s}from"./renderer-DpNDfhNy.js";let r=0;const b=class{constructor(c){n(this,c),this.nanoChange=o(this,"nanoChange",7),this.nanoFocus=o(this,"nanoFocus",7),this.nanoBlur=o(this,"nanoBlur",7)}inputId="nano-cb-"+r++;input;_slotWrapper;get slotWrapper(){return this._slotWrapper}set slotWrapper(n){this._slotWrapper=n,c((()=>{this.hasLabel=!!n?.querySelectorAll("*").length||!!this.label}))}get host(){return a(this)}inputType="checkbox";hasLabel=!0;hasFocus=!1;checked=!1;async handleCheckedChange(){if(this.input){if(this.input.checked=this.checked,"radio"===this.inputType&&this.name&&this.checked&&this.host.isConnected){const n=this.host.closest("form"),o=this.host.getRootNode();let c;c=n?Array.from(n.querySelectorAll(`${i("nano-checkbox")}[name="${this.name}"]`)):Array.from(o.querySelectorAll(`${i("nano-checkbox")}[name="${this.name}"]`))?.filter((n=>!n.closest("form"))),c.map((n=>{n!==this.host&&(n.checked=!1)}))}this.nanoChange.emit({value:this.value,checked:this.checked})}}disabled=!1;value="on";name;required=!1;type="checkbox";typeChange(){this.inputType=["checkbox","switch","tag"].includes(this.type)?"checkbox":"radio"}label;hideLabel=!1;indeterminate=!1;handleIndeterminateChange(){this.checked=!1,this.input.indeterminate=this.indeterminate}get invalid(){return this._invalid}_invalid=!1;get validityMessage(){return this.input?this.input.validationMessage:""}form;nanoChange;nanoFocus;nanoBlur;async getInputElement(){if(this.input)return this.input}async reportValidity(n=!1){return n&&this.input.reportValidity(),this._invalid=!this.input.validity.valid,{isValid:!this.invalid,errorMessage:this.input.validationMessage}}async setError(n,o=!0){this.input&&(o&&(this._invalid=!!n.length),this.input.setCustomValidity(n))}async setFocus(){this.input&&this.input.focus()}async removeFocus(){this.input&&this.input.blur()}onHostClick(n){this.host!==n.target&&this.host.contains(n.target)||(this.checked=!this.checked)}onReset(n){(this.form?document.querySelector("#"+this.form):this.host.closest("form"))&&n.target===this.host.closest("form")&&(this.checked=!1)}handleInvalid=n=>{this._invalid=!n.target.validity.valid};handleChange=n=>{this.checked=n.target.checked,this.indeterminate=!1};handleFocus=()=>{this.hasFocus=!0,this.nanoFocus.emit()};handleBlur=()=>{this.hasFocus=!1,this.nanoBlur.emit()};isRadioChecked(){requestAnimationFrame((()=>this.checked=this.input.checked))}componentWillLoad(){this.typeChange(),this.hasLabel=!!this.host.querySelectorAll("*").length||!!this.label}componentDidLoad(){this.input.indeterminate=this.indeterminate,this.isRadioChecked()}render(){const n=this.inputId+"-lbl";return s(e,{key:"4f3947cf07b077e7ae28748515f1e2997931906e"},s("label",{key:"286a3e5f4c13c79883120aa20d6659a131f013f8",class:{nanocb:!0,"nanocb--checked":this.checked,"nanocb--invalid":this.invalid,"nanocb--disabled":this.disabled,"nanocb--focused":this.hasFocus,"nanocb--indeterminate":this.indeterminate,["nanocb__"+this.type]:!0},htmlFor:this.inputId},s("input",{key:"efb1fbaef6017dba124b2919e7975722b371bb4e",type:this.inputType,name:this.name,form:this.form,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":this.hasLabel?n:void 0,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:n=>this.input=n,id:this.inputId,onInvalid:this.handleInvalid}),s("span",{key:"172e0eb05c62daef3f2cbb5eaebdebed2ba19f35",class:"nanocb__input"}),this.hasLabel&&s("div",{key:"0662be227b2cb39c9c062b5b66da97f89bc7c94a",id:n,class:{nanocb__label:!0,[`nanocb__label--${this.type}`]:!0,"nanocb__label--hidden":this.hideLabel}},!!this.label?.length&&s("span",{key:"b4a03cea8fa9a0ac7781676a45af3dd7a826c2e0"},this.label),s("span",{key:"a6e9c1c733cd6d0285ed5bd9a22bb8f548ee9260",hidden:!!this.label?.length,ref:n=>this.slotWrapper=n},s("slot",{key:"3db145f44f978a49e445677a98b527f1b590beca"})))))}static get watchers(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}}};b.style='.sc-nano-checkbox-h,*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-h,*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-h,*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-h,*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-h{--border-color:var(--nano-color-border-accent);--label-color:var(--nano-color-text-default);--spacing:var(--nano-spacing-sm);--active-background:var(--nano-color-fill-primary);--active-foreground:var(--nano-color-basic-white);--error-color:var(--nano-color-fill-danger);--disabled-label-color:var(--nano-color-text-disabled);--disabled-background:var(--nano-color-fill-disabled);--disabled-foreground:var(--nano-color-fill-neutral);--disabled-border-color:var(--nano-color-border-disabled);display:inline-block;max-inline-size:100%}.nanocb.sc-nano-checkbox{cursor:pointer;display:flex;align-items:center;line-height:1.2;position:relative;font-size:1rem}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus-visible~.nanocb__input.sc-nano-checkbox{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox{background-color:var(--active-background)}.nanocb.nanocb--disabled.sc-nano-checkbox{cursor:not-allowed}.sc-nano-checkbox-h:not([hide-label]) .nanocb.sc-nano-checkbox{gap:var(--spacing)}.sc-nano-checkbox-h:not([type=tag]) .nanocb__label--hidden.sc-nano-checkbox,.sc-nano-checkbox-h:not([type=segment]) .nanocb__label--hidden.sc-nano-checkbox{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox,.nanocb__checkbox.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{display:grid;place-content:center center;block-size:1.125em;inline-size:1.125em;min-inline-size:1.125em;min-block-size:1.125em;border-radius:1px;border:1px solid var(--border-color)}.nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after,.nanocb__checkbox.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{content:"";grid-column:1;grid-row:1;border:solid var(--active-foreground);border-width:0 0.125em 0.125em 0;opacity:1;transition:scale var(--nano-transition-x-fast) ease-out;transform-origin:center;rotate:45deg;scale:0;inline-size:0.325em;block-size:0.5625em;margin-block-start:-0.1875em}.nanocb--indeterminate.sc-nano-checkbox .nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after,.nanocb--indeterminate.sc-nano-checkbox .nanocb__checkbox.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__radio.sc-nano-checkbox .nanocb__label.sc-nano-checkbox,.nanocb__checkbox.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--label-color)}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after,.nanocb__checkbox.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after{scale:1}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox::after,.nanocb__checkbox.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox::after{scale:1;rotate:0deg;block-size:1px;inline-size:0.625em;border-width:0 0 0.125em;margin-block-start:0}.nanocb__radio.nanocb--invalid.sc-nano-checkbox .nanocb__input.sc-nano-checkbox,.nanocb__checkbox.nanocb--invalid.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{outline:1px solid var(--error-color);outline-offset:1px}.nanocb__radio.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox,.nanocb__checkbox.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{border:1px solid var(--disabled-border-color);background:var(--disabled-background)}.nanocb__radio.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after,.nanocb__checkbox.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{display:none}.nanocb__radio.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox,.nanocb__checkbox.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{color:var(--disabled-label-color)}.nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{border-radius:50%}.nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{border-radius:50%;background:var(--active-foreground);border:none;margin:0 !important}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after{scale:1;opacity:1;block-size:0.5em;inline-size:0.5em}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox{background-color:transparent}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox::after{display:none}.nanocb__switch.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{inline-size:2.1875em;block-size:1.125em;border:1px solid var(--border-color);border-radius:var(--nano-border-radius-pill)}.nanocb__switch.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{content:"";position:relative;display:block;border-radius:var(--nano-border-radius-circle);block-size:0.75em;inline-size:0.75em;background-color:var(--active-background);transform-origin:left;inset-inline-start:0.125em;inset-block-start:50%;transform:translateY(-50%);transition:0.1s ease scale, 0.1s ease background-color, 0.15s ease left}.nanocb__switch.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after{inset-inline-start:1.1875em;transform-origin:right;background-color:var(--active-foreground)}.nanocb__switch.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--label-color)}.nanocb__switch.nanocb--invalid.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{outline:1px solid var(--error-color);outline-offset:1px}.nanocb__switch.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{border:1px solid var(--disabled-background);background:var(--disabled-background)}.nanocb__switch.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{background:var(--disabled-foreground)}.nanocb__switch.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{color:var(--disabled-label-color)}[type=segment].sc-nano-checkbox-h{display:inline-block}.nanocb__segment.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{display:none}.nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--label-color);padding:0.4375em 0.9375em;border:1px solid var(--active-background)}.sc-nano-checkbox-h:first-of-type .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{border-inline-end:1px solid var(--nano-color-fill-neutral-weak);border-start-start-radius:var(--nano-border-radius-pill);border-end-start-radius:var(--nano-border-radius-pill)}.sc-nano-checkbox-h:not(:last-of-type .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox,.sc-nano-checkbox-h:first-of-type) .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{border-inline-start:none;border-inline-end:1px solid var(--nano-color-fill-neutral-weak)}.sc-nano-checkbox-h:last-of-type .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{border-inline-start:none;border-inline-end:1px solid var(--active-background) !important;border-start-end-radius:var(--nano-border-radius-pill);border-end-end-radius:var(--nano-border-radius-pill)}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{border:1px solid var(--active-background)}.nanocb__segment.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__label.sc-nano-checkbox{color:var(--active-foreground);background-color:var(--active-background);box-shadow:2px 2px 3px 0 rgba(0, 0, 0, 0.2) inset}.nanocb__segment.sc-nano-checkbox input.sc-nano-checkbox:focus-visible:focus~.nanocb__label.sc-nano-checkbox{outline:var(--nano-focus-ring);outline-offset:1px;z-index:1}.nanocb__segment.nanocb--invalid.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{outline:1px solid var(--error-color);outline-offset:1px}.nanocb__segment.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{background-color:var(--disabled-background);color:var(--disabled-label-color)}[type=tag].sc-nano-checkbox-h{display:inline-block}.nanocb__tag.sc-nano-checkbox{display:inline-flex;align-items:center;gap:6px;padding:8px;border:1px solid var(--active-background);color:var(--nano-color-text-link);font-size:var(--nano-font-size-2xs);font-weight:bold;transition:background-color var(--nano-transition-x-fast) ease-out}.nanocb__tag.sc-nano-checkbox:hover{background-color:var(--nano-color-fill-secondary-hover)}.nanocb__tag.sc-nano-checkbox:has(input:checked){background-color:var(--nano-color-fill-secondary-pressed)}.nanocb__tag.sc-nano-checkbox:has(input:focus-visible:focus){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}.nanocb__tag.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{order:0;-webkit-user-select:none;user-select:none}.nanocb__tag.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{order:1;display:grid;place-content:center center;block-size:1.125em;inline-size:1.125em;border-radius:1px;border:1px solid var(--border-color);outline:none !important}.nanocb__tag.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{content:"";grid-column:1;grid-row:1;block-size:0;inline-size:0;border:solid var(--active-foreground);border-width:0 0.125em 0.125em 0;opacity:1;transition:scale var(--nano-transition-x-fast) ease-out;transform-origin:center;rotate:45deg;scale:0}.nanocb--indeterminate.sc-nano-checkbox .nanocb__tag.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__tag.nanocb--invalid.sc-nano-checkbox{outline:1px solid var(--error-color);outline-offset:1px}.nanocb__tag.nanocb--disabled.sc-nano-checkbox{background:var(--disabled-background);border:1px solid var(--disabled-border-color)}.nanocb__tag.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{border:1px solid var(--disabled-border-color);background:var(--disabled-background)}.nanocb__tag.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{display:none}.nanocb__tag.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{color:var(--disabled-label-color)}.nanocb__tag.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after{scale:1;inline-size:0.325em;block-size:0.5625em;margin-block-start:-0.1875em}';export{b as nano_checkbox}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{r as n,c as o,g as a,a as e}from"./index-BM3Om9WE.js";import{h as t}from"./renderer-DpNDfhNy.js";import{a as i}from"./style-Ds52s5za.js";const r=class{constructor(a){n(this,a),this.nanoToggle=o(this,"nanoToggle",7)}get details(){return this.el.querySelectorAll("nano-details")}get el(){return a(this)}open=!1;showLabel="Show details";hideLabel="Hide details";nanoToggle;handleOpenChange(){this.details?.forEach((n=>{n.open=!!this.open})),this.nanoToggle.emit(this.open)}handleClick=()=>{this.open=!this.open};getToggleLabel=()=>this.open?this.hideLabel:this.showLabel;componentWillLoad(){i(this.el.shadowRoot)}componentDidLoad(){this.open&&this.details?.forEach((n=>{n.open=!0}))}render(){return t(e,{key:"5cced0d90a9447ca3b8ee481478aacbeeb4d4484",class:"nano-collapsible-comparison"},t("div",{key:"ae25da89fa04b0a5c89210ba8292cf1db8190a30",class:"collapsible-comparison"},t("div",{key:"7cfd1c96cc5c1553d50193a8bec9abd260e08dfc",part:"header"},t("div",{key:"ccc5102295b9ca9404d3c358f4d9a885d45b5885",class:"header"},t("slot",{key:"7d5b2f2d074b3d6b99f126b4bec77afa1d285ea8",name:"heading"}),t("nano-cta",{key:"a10b35f5779d035d1331cdbd55c42d3007d7ce2c",size:"large",icon:this.open?"up":"down",secondary:!0},t("button",{key:"59fde8b32c34ec3df61f96c767ce44e18482a2d5",onClick:this.handleClick},this.getToggleLabel())),t("nano-icon-button",{key:"7f9174c6d81455fc4d3fcae99b684e26de44d7ec",label:this.getToggleLabel(),onClick:this.handleClick,iconName:"light/chevron-down",class:this.open?"open":""})),t("div",{key:"1f92af4c863a0a643e47e225781bb67e32efea3e",class:"headings"},t("slot",{key:"5744549ec533f0d1019138325310cdd6a6dd1d55",name:"comparison-headings"}))),t("div",{key:"fb9b8acb4315686fcabd5771989c2f2bed298895",class:"content"},t("slot",{key:"77821b17b1e3384126a1d7f7714f8779924b4b2d",name:"content"}))))}static get watchers(){return{open:["handleOpenChange"]}}};r.style=":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host {\n /**\n * @prop --color-bg - Background color of the component. Defaults to var(--nano-color-
|
|
4
|
+
import{r as n,c as o,g as a,a as e}from"./index-BM3Om9WE.js";import{h as t}from"./renderer-DpNDfhNy.js";import{a as i}from"./style-Ds52s5za.js";const r=class{constructor(a){n(this,a),this.nanoToggle=o(this,"nanoToggle",7)}get details(){return this.el.querySelectorAll("nano-details")}get el(){return a(this)}open=!1;showLabel="Show details";hideLabel="Hide details";nanoToggle;handleOpenChange(){this.details?.forEach((n=>{n.open=!!this.open})),this.nanoToggle.emit(this.open)}handleClick=()=>{this.open=!this.open};getToggleLabel=()=>this.open?this.hideLabel:this.showLabel;componentWillLoad(){i(this.el.shadowRoot)}componentDidLoad(){this.open&&this.details?.forEach((n=>{n.open=!0}))}render(){return t(e,{key:"5cced0d90a9447ca3b8ee481478aacbeeb4d4484",class:"nano-collapsible-comparison"},t("div",{key:"ae25da89fa04b0a5c89210ba8292cf1db8190a30",class:"collapsible-comparison"},t("div",{key:"7cfd1c96cc5c1553d50193a8bec9abd260e08dfc",part:"header"},t("div",{key:"ccc5102295b9ca9404d3c358f4d9a885d45b5885",class:"header"},t("slot",{key:"7d5b2f2d074b3d6b99f126b4bec77afa1d285ea8",name:"heading"}),t("nano-cta",{key:"a10b35f5779d035d1331cdbd55c42d3007d7ce2c",size:"large",icon:this.open?"up":"down",secondary:!0},t("button",{key:"59fde8b32c34ec3df61f96c767ce44e18482a2d5",onClick:this.handleClick},this.getToggleLabel())),t("nano-icon-button",{key:"7f9174c6d81455fc4d3fcae99b684e26de44d7ec",label:this.getToggleLabel(),onClick:this.handleClick,iconName:"light/chevron-down",class:this.open?"open":""})),t("div",{key:"1f92af4c863a0a643e47e225781bb67e32efea3e",class:"headings"},t("slot",{key:"5744549ec533f0d1019138325310cdd6a6dd1d55",name:"comparison-headings"}))),t("div",{key:"fb9b8acb4315686fcabd5771989c2f2bed298895",class:"content"},t("slot",{key:"77821b17b1e3384126a1d7f7714f8779924b4b2d",name:"content"}))))}static get watchers(){return{open:["handleOpenChange"]}}};r.style=":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host {\n /**\n * @prop --color-bg - Background color of the component. Defaults to var(--nano-color-background-default).\n * @prop --color-border - Border color of the component. Defaults to var(--nano-color-surface-sunken).\n * @prop --outer-spacing - Horizontal padding of the component. Defaults to var(--nano-spacing-l1-default).\n */\n}\n:host .collapsible-comparison {\n background-color: var(--color-bg);\n color: var(--nano-color-text-default);\n padding: var(--outer-spacing) 0;\n container-type: inline-size;\n}\n:host .header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-block-end: var(--nano-spacing-xl);\n}\n:host .headings {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--nano-spacing-xl);\n}\n:host nano-icon-button {\n display: none;\n}\n@container (max-width: 400px) {\n :host nano-cta {\n display: none;\n }\n :host nano-icon-button {\n --color: var(--nano-color-icon-primary);\n display: block;\n margin-inline-start: auto;\n font-size: var(--nano-font-size-xl);\n transition: 0.3s ease transform;\n }\n :host nano-icon-button.open {\n transform: rotate(180deg);\n }\n}";export{r as nano_collapsible_comparison}
|