npm - @nanoporetech-digital/components - Versions diffs - 5.10.0 → 5.11.0 - Mend

@nanoporetech-digital/components 5.10.0 → 5.11.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 (737) hide show

package/dist/components/nano-algolia-filter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-algolia-filter.js","mappings":"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","names":[],"sources":["./src/components/algolia/algolia-filter.scss?tag=nano-algolia-filter&encapsulation=shadow","./src/components/algolia/algolia-filter.tsx"],"sourcesContent":[":host {\n display: none;\n\n ::slotted([slot='filter-template']) {\n display: none !important;\n }\n}\n\n:host(.show-filter) {\n display: block;\n}\n","import {\n Component,\n h,\n Element,\n Host,\n Prop,\n Watch,\n State,\n EventEmitter,\n Event,\n writeTask,\n Listen,\n} from '@stencil/core';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\nimport {\n SearchChangeEvent,\n Wormhole,\n WormholeConsumerConstructor,\n} from '../algolia/algolia-data';\nimport type {\n IndexResult,\n FilterChangeEventDetail,\n AlgoliaFacet,\n} from '../../interface';\n\n/*\n Displays and syncs algolia filters\n * Must be nested within an nano-algolia component.\n * @slot filter-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot output - A placeholder for template output.\n /\n@Component({\n tag: 'nano-algolia-filter',\n shadow: true,\n styleUrl: 'algolia-filter.scss',\n})\nexport class AlgoliaFilter {\n @Element() el: HTMLNanoAlgoliaFilterElement;\n\n private templateStr: string;\n private templateSlot: HTMLElement;\n private outputSlot: HTMLElement;\n private outputEle: HTMLElement;\n private filterId: string = null;\n private tplDidRnder;\n private tplWillRnder = new Promise((resolve) => {\n this.tplDidRnder = resolve;\n });\n\n @State() changeEvent: SearchChangeEvent;\n @State() internalValue: Array<string> = [undefined];\n @State() showFilter: boolean = false;\n @State() indexResults: IndexResult = null;\n @State() filterChanged: string = null;\n @State() facets: AlgoliaFacet;\n @State() tplRenderFn: (...args: any[]) => string;\n @State() globalStoreMethod: StorageMethods;\n\n /\n Name of this filter - must match an appropriate algolia facet on a parent nano-algolia index to display\n /\n @Prop() filterName: string = null;\n\n /\n Set values of this filter. Will result in form elements being selected. '\|' delimited string or array.\n /\n @Prop({ mutable: true }) value: string \| Array<string> = '';\n\n /\n The internal operator joining filter values.\n /\n @Prop() operator: 'or' \| 'and' = 'or';\n\n /\n Store search queries (against this ID) to the component store.\n * Use in conjunction with storeMethod\n /\n @Prop() storeId?: string;\n\n /\n The method of storage.\n * Either session storage, url hash (after the '#') or url query (after the '?').\n /\n @Prop() storeMethod: StorageMethods = 'session';\n\n /\n Emitted when the filter value changes\n /\n @Event() nanoFilterChanged!: EventEmitter<FilterChangeEventDetail>;\n\n /\n Emitted when templates are updated\n */\n @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaFilterElement>;\n\n // Public facing. When changed attempts to 'check' any relevant fields in the template.\n @Watch('value')\n valueSet() {\n const valStr = this.value as string;\n let vals;\n\n if (typeof valStr === 'string')\n vals = valStr.length ? valStr.split('\|') : [];\n else vals = this.value as Array<string>;\n\n if (this.didValueChange(vals)) {\n const foundVals = this.setFieldValues(vals);\n // found in template, set the internal state (this emits the changed event)\n if (foundVals && foundVals.length) this.internalValue = vals;\n // not found in template, wait for it to render.\n else {\n this.tplWillRnder.then((_) => {\n this.setFieldValues(vals);\n this.internalValue = vals;\n });\n }\n }\n }\n\n // Value has changed and is reflected in template. Emit event.\n @Watch('internalValue')\n valueChanged() {\n this.value = this.internalValue;\n this.nanoFilterChanged.emit({\n filterId: this.filterId,\n facetName: this.filterName,\n value: this.internalValue,\n operator: this.operator,\n });\n }\n\n // New facets from algolia. Update template\n @Watch('facets')\n appliedFilterChanged() {\n if (\n this.filterName &&\n this.filterChanged &&\n (this.filterChanged !== this.filterId \|\| this.operator === 'and')\n ) {\n this.updateContent();\n }\n }\n\n @Watch('tplRenderFn')\n tplUpdate() {\n this.updateContent();\n }\n\n @Watch('indexResults')\n handleFilterChange() {\n if (this.indexResults && this.indexResults.appliedFilters) {\n const foundValue = this.indexResults.appliedFilters.find(\n (filter) => filter.name === this.filterName\n );\n if (!foundValue) return;\n\n this.tplWillRnder.then((_) => {\n const foundVals = this.setFieldValues(foundValue.values);\n if (foundVals && foundVals.length) this.value = foundVals;\n });\n }\n this.updateContent();\n }\n\n @Listen('nanoChange')\n @Listen('change')\n handleChangeEvent() {\n const vals = this.getFieldValues();\n if (this.didValueChange(vals)) {\n this.internalValue = vals;\n return true;\n }\n return false;\n }\n\n private updateContent() {\n const outputTo = this.outputSlot \|\| this.outputEle;\n if (!this.el) return;\n\n // there's no template so show output right away\n if (!this.templateStr) this.showFilter = true;\n // there's a template but no index set so hide filters atm\n else if (\n !this.filterName \|\|\n !outputTo \|\|\n (this.templateStr &&\n (!this.indexResults \|\| !this.indexResults.origFilters[this.filterName]))\n ) {\n this.showFilter = false;\n }\n\n // there's no output element so nothing else to do\n if (!outputTo) return;\n\n // there's no index set atm but get any static filter values so we can apply them\n if (!this.indexResults) {\n if (this.templateStr) {\n writeTask(() => {\n outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n orig: {},\n dyn: {},\n selected:\n this.internalValue && this.internalValue.length\n ? this.internalValue\n : this.value,\n });\n if (!this.value \|\| !this.value.length) this.handleChangeEvent();\n });\n } else if (!this.value \|\| !this.value.length) this.handleChangeEvent();\n return;\n }\n\n // everything is in place - render as normal and set values\n writeTask(() => {\n outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n orig: { ...this.indexResults.origFilters[this.filterName] },\n dyn: { ...this.indexResults.dynFilters[this.filterName] },\n selected:\n this.internalValue && this.internalValue.length\n ? this.internalValue\n : this.value,\n });\n this.tplDidRnder();\n this.setFieldValues();\n\n if (!this.showFilter) this.showFilter = true;\n this.nanoTplUpdated.emit(this.el);\n });\n }\n\n // go through form elements and extract their current value\n private getFieldValues() {\n const values = [];\n const fields = this.outputSlot.querySelectorAll(\n 'input[type=\"checkbox\"], input[type=\"radio\"], select'\n );\n\n for (let i = 0; i < fields.length; i++) {\n const field = fields[i] as HTMLInputElement;\n\n // If a multi-select, get all selections\n if (field.type === 'select-multiple') {\n const select: HTMLSelectElement = field as any;\n for (let n = 0; n < select.options.length; n++) {\n if (!select.options[n].selected \|\| !select.options[n].value.length)\n continue;\n values.push(select.options[n].value);\n }\n } else if (\n (field.type !== 'checkbox' && field.type !== 'radio') \|\|\n (field.checked && field.value.length)\n ) {\n values.push(field.value);\n }\n }\n return values;\n }\n\n // go through form elements and select / check them as appropriate\n private setFieldValues(vals?: string[]): void \| string[] {\n vals = vals \|\| this.internalValue;\n if (!vals) return;\n\n const found = [];\n const fields = this.outputSlot.querySelectorAll(\n 'input[type=\"checkbox\"], input[type=\"radio\"], select, nano-select, nano-checkbox'\n );\n\n for (let i = 0; i < fields.length; i++) {\n const field = fields[i] as HTMLInputElement;\n\n if (\n field.disabled \|\|\n field.type === 'file' \|\|\n field.type === 'reset' \|\|\n field.type === 'submit' \|\|\n field.type === 'button'\n )\n continue;\n\n if (field.type === 'select-multiple' \|\| field.type === 'select-one') {\n const select: HTMLSelectElement = field as any;\n for (let n = 0; n < select.options.length; n++) {\n if (!vals.includes(select.options[n].value))\n select.options[n].selected = false;\n else {\n found.push(select.value);\n select.options[n].selected = true;\n if (field.type === 'select-one')\n select.value = select.options[n].value;\n }\n }\n } else if (\n ['checkbox', 'radio', 'tag', 'segment', 'segment-pill'].includes(\n field.type\n )\n ) {\n if (vals.includes(field.value)) {\n found.push(field.value);\n field.checked = true;\n } else if (!vals.length && !field.value.length) {\n field.checked = true;\n } else field.checked = false;\n }\n }\n return found;\n }\n\n private didValueChange(newVal: Array<string>) {\n if (!!this.internalValue && !newVal) return true;\n if (!this.internalValue && !newVal) return false;\n if (this.internalValue && newVal.length !== this.internalValue.length)\n return true;\n\n let hasChanged = false;\n for (let i = 0; i < newVal.length; i++) {\n if (\n !hasChanged &&\n (!this.internalValue \|\| !this.internalValue.includes(newVal[i]))\n )\n hasChanged = true;\n }\n return hasChanged;\n }\n\n connectedCallback() {\n this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n this.filterId = this.filterName + '_' + filterIds++;\n\n if (!!this.templateSlot) {\n this.templateStr = this.templateSlot.innerHTML;\n this.templateStr = this.templateStr.replace(/=>/gm, '=>');\n }\n }\n\n componentWillLoad() {\n if (this.storeId)\n ComponentStore.init(\n this,\n ['value'],\n this.storeMethod \|\| this.globalStoreMethod,\n this.storeId\n );\n }\n\n componentDidLoad() {\n this.updateContent();\n\n if (\n this.templateStr &&\n this.filterName &&\n this.indexResults &&\n this.indexResults.origFilters[this.filterName]\n )\n this.showFilter = true;\n }\n\n render() {\n return (\n <Host\n class={{\n 'show-filter': this.showFilter,\n }}\n >\n <div ref={(div) => (this.outputEle = div)}>\n <slot name=\"output\" />\n </div>\n </Host>\n );\n }\n}\n\nWormhole(AlgoliaFilter as WormholeConsumerConstructor, [\n 'globalStoreMethod',\n 'indexResults',\n 'filterChanged',\n 'facets',\n 'tplRenderFn',\n 'changeEvent',\n]);\nlet filterIds = 0;\n"],"version":3}
1	+ {"file":"nano-algolia-filter.js","mappings":"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","names":[],"sources":["./src/components/algolia/algolia-filter.scss?tag=nano-algolia-filter&encapsulation=shadow","./src/components/algolia/algolia-filter.tsx"],"sourcesContent":[":host {\n display: none;\n\n ::slotted([slot='filter-template']) {\n display: none !important;\n }\n}\n\n:host(.show-filter) {\n display: block;\n}\n","import {\n Component,\n h,\n Element,\n Host,\n Prop,\n Watch,\n State,\n EventEmitter,\n Event,\n writeTask,\n Listen,\n} from '@stencil/core';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\nimport {\n SearchChangeEvent,\n Wormhole,\n WormholeConsumerConstructor,\n} from '../algolia/algolia-data';\nimport type {\n IndexResult,\n FilterChangeEventDetail,\n AlgoliaFacet,\n} from '../../interface';\n\n/*\n Displays and syncs algolia filters\n * Must be nested within an nano-algolia component.\n * @slot filter-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot output - A placeholder for template output.\n /\n@Component({\n tag: 'nano-algolia-filter',\n shadow: true,\n styleUrl: 'algolia-filter.scss',\n})\nexport class AlgoliaFilter {\n @Element() el: HTMLNanoAlgoliaFilterElement;\n\n private templateStr: string;\n private templateSlot: HTMLElement;\n private outputSlot: HTMLElement;\n private outputEle: HTMLElement;\n private filterId: string = null;\n private tplDidRnder;\n private tplWillRnder = new Promise((resolve) => {\n this.tplDidRnder = resolve;\n });\n\n @State() changeEvent: SearchChangeEvent;\n @State() internalValue: Array<string> = [undefined];\n @State() showFilter: boolean = false;\n @State() indexResults: IndexResult = null;\n @State() filterChanged: string = null;\n @State() facets: AlgoliaFacet;\n @State() tplRenderFn: (...args: any[]) => any;\n @State() globalStoreMethod: StorageMethods;\n\n /\n Name of this filter - must match an appropriate algolia facet on a parent nano-algolia index to display\n /\n @Prop() filterName: string = null;\n\n /\n Set values of this filter. Will result in form elements being selected. '\|' delimited string or array.\n /\n @Prop({ mutable: true }) value: string \| Array<string> = '';\n\n /\n The internal operator joining filter values.\n /\n @Prop() operator: 'or' \| 'and' = 'or';\n\n /\n Store search queries (against this ID) to the component store.\n * Use in conjunction with storeMethod\n /\n @Prop() storeId?: string;\n\n /\n The method of storage.\n * Either session storage, url hash (after the '#') or url query (after the '?').\n /\n @Prop() storeMethod: StorageMethods = 'session';\n\n /\n Emitted when the filter value changes\n /\n @Event() nanoFilterChanged!: EventEmitter<FilterChangeEventDetail>;\n\n /\n Emitted when templates are updated\n */\n @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaFilterElement>;\n\n // Public facing. When changed attempts to 'check' any relevant fields in the template.\n @Watch('value')\n valueSet() {\n const valStr = this.value as string;\n let vals;\n\n if (typeof valStr === 'string')\n vals = valStr.length ? valStr.split('\|') : [];\n else vals = this.value as Array<string>;\n\n if (this.didValueChange(vals)) {\n const foundVals = this.setFieldValues(vals);\n // found in template, set the internal state (this emits the changed event)\n if (foundVals && foundVals.length) this.internalValue = vals;\n // not found in template, wait for it to render.\n else {\n this.tplWillRnder.then((_) => {\n this.setFieldValues(vals);\n this.internalValue = vals;\n });\n }\n }\n }\n\n // Value has changed and is reflected in template. Emit event.\n @Watch('internalValue')\n valueChanged() {\n this.value = this.internalValue;\n this.nanoFilterChanged.emit({\n filterId: this.filterId,\n facetName: this.filterName,\n value: this.internalValue,\n operator: this.operator,\n });\n }\n\n // New facets from algolia. Update template\n @Watch('facets')\n appliedFilterChanged() {\n if (\n this.filterName &&\n this.filterChanged &&\n (this.filterChanged !== this.filterId \|\| this.operator === 'and')\n ) {\n this.updateContent();\n }\n }\n\n @Watch('tplRenderFn')\n tplUpdate() {\n this.updateContent();\n }\n\n @Watch('indexResults')\n handleFilterChange() {\n if (this.indexResults && this.indexResults.appliedFilters) {\n const foundValue = this.indexResults.appliedFilters.find(\n (filter) => filter.name === this.filterName\n );\n if (!foundValue) return;\n\n this.tplWillRnder.then((_) => {\n const foundVals = this.setFieldValues(foundValue.values);\n if (foundVals && foundVals.length) this.value = foundVals;\n });\n }\n this.updateContent();\n }\n\n @Listen('nanoChange')\n @Listen('change')\n handleChangeEvent() {\n const vals = this.getFieldValues();\n if (this.didValueChange(vals)) {\n this.internalValue = vals;\n return true;\n }\n return false;\n }\n\n private updateContent() {\n const outputTo = this.outputSlot \|\| this.outputEle;\n if (!this.el) return;\n\n // there's no template so show output right away\n if (!this.templateStr) this.showFilter = true;\n // there's a template but no index set so hide filters atm\n else if (\n !this.filterName \|\|\n !outputTo \|\|\n (this.templateStr &&\n (!this.indexResults \|\| !this.indexResults.origFilters[this.filterName]))\n ) {\n this.showFilter = false;\n }\n\n // there's no output element so nothing else to do\n if (!outputTo) return;\n\n // there's no index set atm but get any static filter values so we can apply them\n if (!this.indexResults) {\n if (this.templateStr) {\n writeTask(() => {\n outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n orig: {},\n dyn: {},\n selected:\n this.internalValue && this.internalValue.length\n ? this.internalValue\n : this.value,\n });\n if (!this.value \|\| !this.value.length) this.handleChangeEvent();\n });\n } else if (!this.value \|\| !this.value.length) this.handleChangeEvent();\n return;\n }\n\n // everything is in place - render as normal and set values\n writeTask(() => {\n outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n orig: { ...this.indexResults.origFilters[this.filterName] },\n dyn: { ...this.indexResults.dynFilters[this.filterName] },\n selected:\n this.internalValue && this.internalValue.length\n ? this.internalValue\n : this.value,\n });\n this.tplDidRnder();\n this.setFieldValues();\n\n if (!this.showFilter) this.showFilter = true;\n this.nanoTplUpdated.emit(this.el);\n });\n }\n\n // go through form elements and extract their current value\n private getFieldValues() {\n const values = [];\n const fields = this.outputSlot.querySelectorAll(\n 'input[type=\"checkbox\"], input[type=\"radio\"], select'\n );\n\n for (let i = 0; i < fields.length; i++) {\n const field = fields[i] as HTMLInputElement;\n\n // If a multi-select, get all selections\n if (field.type === 'select-multiple') {\n const select: HTMLSelectElement = field as any;\n for (let n = 0; n < select.options.length; n++) {\n if (!select.options[n].selected \|\| !select.options[n].value.length)\n continue;\n values.push(select.options[n].value);\n }\n } else if (\n (field.type !== 'checkbox' && field.type !== 'radio') \|\|\n (field.checked && field.value.length)\n ) {\n values.push(field.value);\n }\n }\n return values;\n }\n\n // go through form elements and select / check them as appropriate\n private setFieldValues(vals?: string[]): void \| string[] {\n vals = vals \|\| this.internalValue;\n if (!vals) return;\n\n const found = [];\n const fields = this.outputSlot.querySelectorAll(\n 'input[type=\"checkbox\"], input[type=\"radio\"], select, nano-select, nano-checkbox'\n );\n\n for (let i = 0; i < fields.length; i++) {\n const field = fields[i] as HTMLInputElement;\n\n if (\n field.disabled \|\|\n field.type === 'file' \|\|\n field.type === 'reset' \|\|\n field.type === 'submit' \|\|\n field.type === 'button'\n )\n continue;\n\n if (field.type === 'select-multiple' \|\| field.type === 'select-one') {\n const select: HTMLSelectElement = field as any;\n for (let n = 0; n < select.options.length; n++) {\n if (!vals.includes(select.options[n].value))\n select.options[n].selected = false;\n else {\n found.push(select.value);\n select.options[n].selected = true;\n if (field.type === 'select-one')\n select.value = select.options[n].value;\n }\n }\n } else if (\n ['checkbox', 'radio', 'tag', 'segment', 'segment-pill'].includes(\n field.type\n )\n ) {\n if (vals.includes(field.value)) {\n found.push(field.value);\n field.checked = true;\n } else if (!vals.length && !field.value.length) {\n field.checked = true;\n } else field.checked = false;\n }\n }\n return found;\n }\n\n private didValueChange(newVal: Array<string>) {\n if (!!this.internalValue && !newVal) return true;\n if (!this.internalValue && !newVal) return false;\n if (this.internalValue && newVal.length !== this.internalValue.length)\n return true;\n\n let hasChanged = false;\n for (let i = 0; i < newVal.length; i++) {\n if (\n !hasChanged &&\n (!this.internalValue \|\| !this.internalValue.includes(newVal[i]))\n )\n hasChanged = true;\n }\n return hasChanged;\n }\n\n connectedCallback() {\n this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n this.filterId = this.filterName + '_' + filterIds++;\n\n if (!!this.templateSlot) {\n this.templateStr = this.templateSlot.innerHTML;\n this.templateStr = this.templateStr.replace(/=>/gm, '=>');\n }\n }\n\n componentWillLoad() {\n if (this.storeId)\n ComponentStore.init(\n this,\n ['value'],\n this.storeMethod \|\| this.globalStoreMethod,\n this.storeId\n );\n }\n\n componentDidLoad() {\n this.updateContent();\n\n if (\n this.templateStr &&\n this.filterName &&\n this.indexResults &&\n this.indexResults.origFilters[this.filterName]\n )\n this.showFilter = true;\n }\n\n render() {\n return (\n <Host\n class={{\n 'show-filter': this.showFilter,\n }}\n >\n <div ref={(div) => (this.outputEle = div)}>\n <slot name=\"output\" />\n </div>\n </Host>\n );\n }\n}\n\nWormhole(AlgoliaFilter as WormholeConsumerConstructor, [\n 'globalStoreMethod',\n 'indexResults',\n 'filterChanged',\n 'facets',\n 'tplRenderFn',\n 'changeEvent',\n]);\nlet filterIds = 0;\n"],"version":3}

package/dist/components/nano-algolia-pagination.js CHANGED Viewed

@@ -37,17 +37,12 @@ const AlgoliaPagination = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       this.show = false;
       return;
     }
-    // this.outputTo.innerHTML = this.tplRenderFn(this.templateStr, {
-    //   orig: { ...this.currentIndex.origFilters[this.filterName] },
-    //   dyn: { ...this.currentIndex.dynFilters[this.filterName] }
-    // });
   }
   componentWillLoad() {
     this.templateSlot = this.el.querySelector('[slot="filter-template"]');
     this.outputSlot = this.el.querySelector('[slot="output"]');
     if (!!this.templateSlot)
       this.templateStr = this.templateSlot.innerHTML;
-    // this.boundChangeEvent = this.handleChangeEvent.bind(this);
   }
   componentDidLoad() {
     this.updateContent();

package/dist/components/nano-algolia-pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-algolia-pagination.js","mappings":";;;;;;MAsBa,iBAAiB;;;;;;uBASG,IAAI;qBACL,KAAK;qBACL,KAAK;gBACV,IAAI;;wBAEQ,IAAI;0BACN,KAAK;qBAGZ,IAAI;;EAQhC,iBAAiB,MAAK;EAGtB,oBAAoB;IAClB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;GAClC;;EAID,MAAM,QAAQ,MAAK;;EAInB,MAAM,QAAQ,MAAK;;EAInB,MAAM,QAAQ,CAAC,IAAY;IACzB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACpB;EAEO,aAAa;IACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC;IAClD,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MAC7D,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,OAAO;KACR~~;;;;;GAMF~~;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;IACtE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAE3D,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY;MAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC~~;;GAEzE~~;EAED,gBAAgB;IACd,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI,CAAC,IAAI;OAC7B,IAED,WAAK,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,IACvC,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;AAGH;AACA,QAAQ,CAAC,iBAAgD,EAAE;EACzD,cAAc;EACd,eAAe;EACf,aAAa;CACd,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/algolia/algolia-pagination.tsx"],"sourcesContent":["import {\n Component,\n h,\n Element,\n Host,\n Prop,\n Watch,\n State,\n Method,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { Wormhole, WormholeConsumerConstructor } from '../algolia/algolia-data';\nimport type { IndexResult } from '../../interface';\n\n/*\n Displays results from Algolia searches.\n * TODO / WIP /\n@Component({\n tag: 'nano-algolia-pagination',\n shadow: true,\n})\nexport class AlgoliaPagination {\n @Element() el: HTMLNanoAlgoliaPaginationElement;\n\n private outputEle: HTMLDivElement;\n private outputSlot: HTMLElement;\n private outputTo: HTMLElement;\n private templateStr: string;\n private templateSlot: HTMLElement;\n\n @State() currentPage: number = null;\n @State() canGoPrev: boolean = false;\n @State() canGoNext: boolean = false;\n @State() show: boolean = true;\n @State() tplRenderFn: (...args: any[]) => ~~string~~;\n @State() indexResults: IndexResult = null;\n @State() infiniteScroll: boolean = false;\n\n /* Max number of page numbers to show /\n @Prop() maxToShow: number = null;\n\n /\n Emitted when the page number changes\n /\n @Event() nanoPageChanged!: EventEmitter<{ page: number }>;\n\n @Watch('currentPage')\n currentPageChange() {}\n\n @Watch('infiniteScroll')\n infiniteScrollChange() {\n this.show = !this.infiniteScroll;\n }\n\n /* Go to next page from current /\n @Method()\n async nextPage() {}\n\n /* Go to previous page from current /\n @Method()\n async prevPage() {}\n\n /* Go to a particular page */\n @Method()\n async goToPage(page: number) {\n console.info(page);\n }\n\n private updateContent() {\n this.outputTo = this.outputSlot \|\| this.outputEle;\n if (!this.templateStr \|\| !this.outputTo \|\| !this.indexResults) {\n this.show = false;\n return;\n }\n\n // this.outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n // orig: { ...this.currentIndex.origFilters[this.filterName] },\n // dyn: { ...this.currentIndex.dynFilters[this.filterName] }\n // });\n }\n\n componentWillLoad() {\n this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n\n if (!!this.templateSlot) this.templateStr = this.templateSlot.innerHTML;\n ~~// this.boundChangeEvent = this.handleChangeEvent.bind(this);\n~~ }\n\n componentDidLoad() {\n this.updateContent();\n }\n\n render() {\n return (\n <Host\n class={{\n 'show-pagination': this.show,\n }}\n >\n <div ref={(div) => (this.outputEle = div)}>\n <slot name=\"output\" />\n </div>\n </Host>\n );\n }\n}\n\n// Use the injectProps method to pass from the tunnel as props to the component\nWormhole(AlgoliaPagination as WormholeConsumerConstructor, [\n 'indexResults',\n 'filterChanged',\n 'tplRenderFn',\n]);\n"],"version":3}
1	+ {"file":"nano-algolia-pagination.js","mappings":";;;;;;MAsBa,iBAAiB;;;;;;uBASG,IAAI;qBACL,KAAK;qBACL,KAAK;gBACV,IAAI;;wBAEQ,IAAI;0BACN,KAAK;qBAGZ,IAAI;;EAQhC,iBAAiB,MAAK;EAGtB,oBAAoB;IAClB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;GAClC;;EAID,MAAM,QAAQ,MAAK;;EAInB,MAAM,QAAQ,MAAK;;EAInB,MAAM,QAAQ,CAAC,IAAY;IACzB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACpB;EAEO,aAAa;IACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC;IAClD,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MAC7D,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,OAAO;KACR;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;IACtE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAE3D,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY;MAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;GACzE;EAED,gBAAgB;IACd,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI,CAAC,IAAI;OAC7B,IAED,WAAK,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,IACvC,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;AAGH;AACA,QAAQ,CAAC,iBAAgD,EAAE;EACzD,cAAc;EACd,eAAe;EACf,aAAa;CACd,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/algolia/algolia-pagination.tsx"],"sourcesContent":["import {\n Component,\n h,\n Element,\n Host,\n Prop,\n Watch,\n State,\n Method,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { Wormhole, WormholeConsumerConstructor } from '../algolia/algolia-data';\nimport type { IndexResult } from '../../interface';\n\n/*\n Displays results from Algolia searches.\n * TODO / WIP /\n@Component({\n tag: 'nano-algolia-pagination',\n shadow: true,\n})\nexport class AlgoliaPagination {\n @Element() el: HTMLNanoAlgoliaPaginationElement;\n\n private outputEle: HTMLDivElement;\n private outputSlot: HTMLElement;\n private outputTo: HTMLElement;\n private templateStr: string;\n private templateSlot: HTMLElement;\n\n @State() currentPage: number = null;\n @State() canGoPrev: boolean = false;\n @State() canGoNext: boolean = false;\n @State() show: boolean = true;\n @State() tplRenderFn: (...args: any[]) => any;\n @State() indexResults: IndexResult = null;\n @State() infiniteScroll: boolean = false;\n\n /* Max number of page numbers to show /\n @Prop() maxToShow: number = null;\n\n /\n Emitted when the page number changes\n /\n @Event() nanoPageChanged!: EventEmitter<{ page: number }>;\n\n @Watch('currentPage')\n currentPageChange() {}\n\n @Watch('infiniteScroll')\n infiniteScrollChange() {\n this.show = !this.infiniteScroll;\n }\n\n /* Go to next page from current /\n @Method()\n async nextPage() {}\n\n /* Go to previous page from current /\n @Method()\n async prevPage() {}\n\n /* Go to a particular page */\n @Method()\n async goToPage(page: number) {\n console.info(page);\n }\n\n private updateContent() {\n this.outputTo = this.outputSlot \|\| this.outputEle;\n if (!this.templateStr \|\| !this.outputTo \|\| !this.indexResults) {\n this.show = false;\n return;\n }\n }\n\n componentWillLoad() {\n this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n\n if (!!this.templateSlot) this.templateStr = this.templateSlot.innerHTML;\n }\n\n componentDidLoad() {\n this.updateContent();\n }\n\n render() {\n return (\n <Host\n class={{\n 'show-pagination': this.show,\n }}\n >\n <div ref={(div) => (this.outputEle = div)}>\n <slot name=\"output\" />\n </div>\n </Host>\n );\n }\n}\n\n// Use the injectProps method to pass from the tunnel as props to the component\nWormhole(AlgoliaPagination as WormholeConsumerConstructor, [\n 'indexResults',\n 'filterChanged',\n 'tplRenderFn',\n]);\n"],"version":3}

package/dist/components/nano-algolia-results.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-algolia-results.js","mappings":"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","names":[],"sources":["./src/components/algolia/algolia-results.tsx"],"sourcesContent":["import {\n Component,\n h,\n Element,\n Host,\n Watch,\n State,\n Build,\n EventEmitter,\n Event,\n Prop,\n readTask,\n} from '@stencil/core';\nimport { Wormhole, SearchChangeEvent } from '../algolia/algolia-data';\nimport type {\n IndexResult,\n AlgoliaResultHit,\n PageChangeEventDetail,\n AlgoliaFacet,\n} from '../../interface';\n\n/*\n Displays and syncs results from Algolia searches.\n * Must be nested within an nano-algolia component.\n * @slot start-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot start-output - A placeholder for template output.\n * @slot result-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot result-output - A placeholder for template output.\n * @slot end-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot end-output - A placeholder for template output.\n /\n@Component({\n tag: 'nano-algolia-results',\n shadow: true,\n})\nexport class AlgoliaResults {\n @Element() el: HTMLNanoAlgoliaResultsElement;\n\n private resultTpl: string;\n private resultTplSlot: HTMLElement;\n private startTpl: string;\n private startTplSlot: HTMLElement;\n private endTpl: string;\n private endTplSlot: HTMLElement;\n private outputSlot: HTMLElement;\n private outputEle: HTMLDivElement;\n private outputTo: HTMLElement;\n private startOutputSlot: HTMLElement;\n private endOutputSlot: HTMLElement;\n\n private io?: IntersectionObserver;\n private infiniteScrollBar: HTMLDivElement;\n private append: boolean = false;\n private shouldClear: boolean = true;\n private currHitNum: number = 0;\n\n @State() showResults: boolean = false;\n @State() tplRenderFn: (...args: any[]) => string;\n @State() results: AlgoliaResultHit[] = null;\n @State() indexResults: IndexResult = null;\n @State() resultsPage: number = 0;\n @State() changeEvent: SearchChangeEvent = SearchChangeEvent.Init;\n @State() facets: AlgoliaFacet;\n @State() isLoading: boolean = true;\n\n /\n Load and append pages automatically on scroll\n /\n @Prop() infiniteScroll: boolean = false;\n\n /\n Whether new pages loaded by pagination will replace or be appended to the results block\n * (this will be ignored if 'infiniteScroll' is set to true)\n /\n @Prop() appendPages: boolean = false;\n\n /\n Emitted when the page number changes\n /\n @Event() nanoPageChanged!: EventEmitter<PageChangeEventDetail>;\n\n /\n Emitted when templates are updated\n */\n @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaResultsElement>;\n\n // For append / infinite-scroll it's useful to have a universal index on render\n @Watch('results')\n addContentIndex() {\n this.shouldPageClear();\n if (this.shouldClear \|\| this.resultsPage === 0) this.currHitNum = 0;\n if (this.indexResults && this.indexResults.results) {\n this.indexResults.results.map((res) => {\n (res as any)._uIndex = this.currHitNum++;\n });\n }\n }\n\n // Update content template and perhaps add IO for infinite scrolling\n @Watch('results')\n @Watch('tplRenderFn')\n resultsChange() {\n this.shouldPageClear();\n // console.log('going to do update', this.resultsPage, this.results.length);\n this.updateResultContent();\n this.infiniteScrollChange();\n }\n\n // We have a foot / head slot template.\n // Can be useful to display current filter / search meta\n @Watch('facets')\n headerFooterChange() {\n this.updateStartEndContent();\n }\n\n @Watch('appendPages')\n appendChange() {\n this.append = this.infiniteScroll ? true : this.appendPages;\n }\n\n @Watch('infiniteScroll')\n infiniteScrollChange() {\n this.append = this.infiniteScroll ? true : this.appendPages;\n this.infiniteScroll ? this.attachIO() : this.detachIO();\n }\n\n @Watch('resultsPage')\n handlePageChage() {\n this.infiniteScroll ? this.attachIO() : this.detachIO();\n }\n\n @Watch('isLoading')\n handleLoading() {\n if (!this.isLoading) this.infiniteScrollChange();\n }\n\n // Decide whether incoming content should clear or not.\n // if incoming change event is from a pagechange AND the current page is 0 OR appendPages option set...\n // Then leave up to the current, set append behaviour. Other clear it all out.\n private shouldPageClear() {\n this.shouldClear =\n this.changeEvent === SearchChangeEvent.Page ? !this.append : true;\n }\n\n // Called by IO. Emits page change event to parent which then iterated the global page count.\n private nextPage() {\n this.shouldClear = !this.append;\n this.nanoPageChanged.emit({ page: this.resultsPage + 1 });\n }\n\n private attachIO() {\n if (\n !this.infiniteScrollBar \|\|\n !this.infiniteScroll \|\|\n this.io \|\|\n !Build.isBrowser \|\|\n typeof window === 'undefined' \|\|\n !(window as any).IntersectionObserver\n )\n return;\n\n this.io = new (window as any).IntersectionObserver(\n async (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting \|\| (data[1] && data[1].isIntersecting)) {\n this.nextPage();\n this.detachIO();\n }\n },\n { document, rootMargin: '100px', threshold: 1 }\n );\n this.io.observe(this.infiniteScrollBar);\n }\n\n private detachIO() {\n if (this.io) {\n this.io.disconnect();\n this.io = null;\n }\n }\n\n private updateStartEndContent() {\n // clear start slot if present\n if (this.startTpl && this.startOutputSlot) {\n this.startOutputSlot.innerHTML = this.tplRenderFn(\n this.startTpl,\n this.indexResults\n );\n }\n // clear end slot if present\n if (this.endOutputSlot && this.endTpl) {\n this.endOutputSlot.innerHTML = this.tplRenderFn(\n this.endTpl,\n this.indexResults\n );\n }\n this.nanoTplUpdated.emit(this.el);\n }\n\n private updateResultContent() {\n this.outputTo = this.outputSlot \|\| this.outputEle;\n\n if (!this.resultTpl \|\| !this.indexResults) return;\n\n // after filtering or new index - clear all content.\n // after pagination when the 'appendPages' set to true - don't clear results content\n if (this.shouldClear) this.outputTo.innerHTML = '';\n\n if (!this.tplRenderFn) return;\n\n const div = document.createElement('div');\n div.innerHTML = this.tplRenderFn(this.resultTpl, this.indexResults);\n\n Array.from(div.children).forEach((child) => {\n this.outputTo.appendChild(child);\n });\n\n this.shouldClear = true;\n this.nanoTplUpdated.emit(this.el);\n }\n\n connectedCallback() {\n readTask(() => {\n this.startTplSlot = this.el.querySelector('[slot=\"start-template\"]');\n this.startOutputSlot = this.el.querySelector('[slot=\"start-output\"]');\n if (!!this.startTplSlot) {\n this.startTpl = this.startTplSlot.innerHTML;\n this.startTpl = this.startTpl.replace(/=>/gm, '=>');\n }\n\n this.resultTplSlot = this.el.querySelector('[slot=\"result-template\"]');\n this.outputSlot = this.el.querySelector('[slot=\"result-output\"]');\n if (!!this.resultTplSlot) {\n this.resultTpl = this.resultTplSlot.innerHTML;\n this.resultTpl = this.resultTpl.replace(/=>/gm, '=>');\n }\n\n this.endTplSlot = this.el.querySelector('[slot=\"end-template\"]');\n this.endOutputSlot = this.el.querySelector('[slot=\"end-output\"]');\n if (!!this.endTplSlot) {\n this.endTpl = this.endTplSlot.innerHTML;\n this.endTpl = this.endTpl.replace(/=>/gm, '=>');\n }\n if (this.indexResults) {\n this.addContentIndex();\n this.updateResultContent();\n }\n });\n }\n\n componentDidLoad() {\n this.updateStartEndContent();\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n render() {\n return (\n <Host\n class={{\n 'show-results': this.showResults,\n }}\n >\n <div class=\"default\">\n <slot />\n </div>\n <div ref={(div) => (this.outputEle = div)}>\n <slot name=\"start-output\" />\n <slot name=\"result-output\" />\n <div ref={(div) => (this.infiniteScrollBar = div)}></div>\n <slot name=\"end-output\" />\n </div>\n </Host>\n );\n }\n}\n\nWormhole(AlgoliaResults, [\n 'indexResults',\n 'results',\n 'tplRenderFn',\n 'resultsPage',\n 'changeEvent',\n 'facets',\n 'isLoading',\n]);\n"],"version":3}
1	+ {"file":"nano-algolia-results.js","mappings":";;;;;;MAmCa,cAAc;;;;;;;IAiBjB,WAAM,GAAY,KAAK,CAAC;IACxB,gBAAW,GAAY,IAAI,CAAC;IAC5B,eAAU,GAAW,CAAC,CAAC;uBAEC,KAAK;;mBAEE,IAAI;wBACN,IAAI;uBACV,CAAC;uBACU,iBAAiB,CAAC,IAAI;;qBAElC,IAAI;0BAKA,KAAK;uBAMR,KAAK;;;EAcpC,eAAe;IACb,IAAI,CAAC,eAAe,EAAE,CAAC;IACvB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC;MAAE,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;IACpE,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;MAClD,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG;QAC/B,GAAW,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;OAC1C,CAAC,CAAC;KACJ;GACF;;EAKD,aAAa;IACX,IAAI,CAAC,eAAe,EAAE,CAAC;;IAEvB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC3B,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC7B;;;EAKD,kBAAkB;IAChB,IAAI,CAAC,qBAAqB,EAAE,CAAC;GAC9B;EAGD,YAAY;IACV,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;GAC7D;EAGD,oBAAoB;IAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;IAC5D,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;GACzD;EAGD,eAAe;IACb,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;GACzD;EAGD,aAAa;IACX,IAAI,CAAC,IAAI,CAAC,SAAS;MAAE,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAClD;;;;EAKO,eAAe;IACrB,IAAI,CAAC,WAAW;MACd,IAAI,CAAC,WAAW,KAAK,iBAAiB,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACrE;;EAGO,QAAQ;IACd,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE,CAAC,CAAC;GAC3D;EAEO,QAAQ;IACd,IACE,CAAC,IAAI,CAAC,iBAAiB;MACvB,CAAC,IAAI,CAAC,cAAc;MACpB,IAAI,CAAC,EAAE;MACP,CAAC,KAAK,CAAC,SAAS;MAChB,OAAO,MAAM,KAAK,WAAW;MAC7B,CAAE,MAAc,CAAC,oBAAoB;MAErC,OAAO;IAET,IAAI,CAAC,EAAE,GAAG,IAAK,MAAc,CAAC,oBAAoB,CAChD,OAAO,IAAiC;MACtC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE;QACjE,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,QAAQ,EAAE,CAAC;OACjB;KACF,EACD,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,CAChD,CAAC;IACF,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;GACzC;EAEO,QAAQ;IACd,IAAI,IAAI,CAAC,EAAE,EAAE;MACX,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;MACrB,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC;KAChB;GACF;EAEO,qBAAqB;;IAE3B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,EAAE;MACzC,IAAI,CAAC,eAAe,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAC/C,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,YAAY,CAClB,CAAC;KACH;;IAED,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,EAAE;MACrC,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAC7C,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,YAAY,CAClB,CAAC;KACH;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GACnC;EAEO,mBAAmB;IACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC;IAElD,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,YAAY;MAAE,OAAO;;;IAIlD,IAAI,IAAI,CAAC,WAAW;MAAE,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,EAAE,CAAC;IAEnD,IAAI,CAAC,IAAI,CAAC,WAAW;MAAE,OAAO;IAE9B,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAEpE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK;MACrC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KAClC,CAAC,CAAC;IAEH,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GACnC;EAED,iBAAiB;IACf,QAAQ,CAAC;MACP,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;MACrE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;MACtE,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE;QACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;QAC5C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;OACxD;MAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;MACvE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;MAClE,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE;QACxB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC;QAC9C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;OAC1D;MAED,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;MACjE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;MAClE,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE;QACrB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;QACxC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;OACpD;MACD,IAAI,IAAI,CAAC,YAAY,EAAE;QACrB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,mBAAmB,EAAE,CAAC;OAC5B;KACF,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,qBAAqB,EAAE,CAAC;GAC9B;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,EAAE,EAAE;MACX,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;MACrB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;KACrB;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,cAAc,EAAE,IAAI,CAAC,WAAW;OACjC,IAED,WAAK,KAAK,EAAC,SAAS,IAClB,eAAQ,CACJ,EACN,WAAK,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,IACvC,YAAM,IAAI,EAAC,cAAc,GAAG,EAC5B,YAAM,IAAI,EAAC,eAAe,GAAG,EAC7B,WAAK,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,GAAQ,EACzD,YAAM,IAAI,EAAC,YAAY,GAAG,CACtB,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;AAGH,QAAQ,CAAC,cAAc,EAAE;EACvB,cAAc;EACd,SAAS;EACT,aAAa;EACb,aAAa;EACb,aAAa;EACb,QAAQ;EACR,WAAW;CACZ,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/algolia/algolia-results.tsx"],"sourcesContent":["import {\n Component,\n h,\n Element,\n Host,\n Watch,\n State,\n Build,\n EventEmitter,\n Event,\n Prop,\n readTask,\n} from '@stencil/core';\nimport { Wormhole, SearchChangeEvent } from '../algolia/algolia-data';\nimport type {\n IndexResult,\n AlgoliaResultHit,\n PageChangeEventDetail,\n AlgoliaFacet,\n} from '../../interface';\n\n/*\n Displays and syncs results from Algolia searches.\n * Must be nested within an nano-algolia component.\n * @slot start-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot start-output - A placeholder for template output.\n * @slot result-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot result-output - A placeholder for template output.\n * @slot end-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot end-output - A placeholder for template output.\n /\n@Component({\n tag: 'nano-algolia-results',\n shadow: true,\n})\nexport class AlgoliaResults {\n @Element() el: HTMLNanoAlgoliaResultsElement;\n\n private resultTpl: string;\n private resultTplSlot: HTMLElement;\n private startTpl: string;\n private startTplSlot: HTMLElement;\n private endTpl: string;\n private endTplSlot: HTMLElement;\n private outputSlot: HTMLElement;\n private outputEle: HTMLDivElement;\n private outputTo: HTMLElement;\n private startOutputSlot: HTMLElement;\n private endOutputSlot: HTMLElement;\n\n private io?: IntersectionObserver;\n private infiniteScrollBar: HTMLDivElement;\n private append: boolean = false;\n private shouldClear: boolean = true;\n private currHitNum: number = 0;\n\n @State() showResults: boolean = false;\n @State() tplRenderFn: (...args: any[]) => any;\n @State() results: AlgoliaResultHit[] = null;\n @State() indexResults: IndexResult = null;\n @State() resultsPage: number = 0;\n @State() changeEvent: SearchChangeEvent = SearchChangeEvent.Init;\n @State() facets: AlgoliaFacet;\n @State() isLoading: boolean = true;\n\n /\n Load and append pages automatically on scroll\n /\n @Prop() infiniteScroll: boolean = false;\n\n /\n Whether new pages loaded by pagination will replace or be appended to the results block\n * (this will be ignored if 'infiniteScroll' is set to true)\n /\n @Prop() appendPages: boolean = false;\n\n /\n Emitted when the page number changes\n /\n @Event() nanoPageChanged!: EventEmitter<PageChangeEventDetail>;\n\n /\n Emitted when templates are updated\n */\n @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaResultsElement>;\n\n // For append / infinite-scroll it's useful to have a universal index on render\n @Watch('results')\n addContentIndex() {\n this.shouldPageClear();\n if (this.shouldClear \|\| this.resultsPage === 0) this.currHitNum = 0;\n if (this.indexResults && this.indexResults.results) {\n this.indexResults.results.map((res) => {\n (res as any)._uIndex = this.currHitNum++;\n });\n }\n }\n\n // Update content template and perhaps add IO for infinite scrolling\n @Watch('results')\n @Watch('tplRenderFn')\n resultsChange() {\n this.shouldPageClear();\n // console.log('going to do update', this.resultsPage, this.results.length);\n this.updateResultContent();\n this.infiniteScrollChange();\n }\n\n // We have a foot / head slot template.\n // Can be useful to display current filter / search meta\n @Watch('facets')\n headerFooterChange() {\n this.updateStartEndContent();\n }\n\n @Watch('appendPages')\n appendChange() {\n this.append = this.infiniteScroll ? true : this.appendPages;\n }\n\n @Watch('infiniteScroll')\n infiniteScrollChange() {\n this.append = this.infiniteScroll ? true : this.appendPages;\n this.infiniteScroll ? this.attachIO() : this.detachIO();\n }\n\n @Watch('resultsPage')\n handlePageChage() {\n this.infiniteScroll ? this.attachIO() : this.detachIO();\n }\n\n @Watch('isLoading')\n handleLoading() {\n if (!this.isLoading) this.infiniteScrollChange();\n }\n\n // Decide whether incoming content should clear or not.\n // if incoming change event is from a pagechange AND the current page is 0 OR appendPages option set...\n // Then leave up to the current, set append behaviour. Other clear it all out.\n private shouldPageClear() {\n this.shouldClear =\n this.changeEvent === SearchChangeEvent.Page ? !this.append : true;\n }\n\n // Called by IO. Emits page change event to parent which then iterated the global page count.\n private nextPage() {\n this.shouldClear = !this.append;\n this.nanoPageChanged.emit({ page: this.resultsPage + 1 });\n }\n\n private attachIO() {\n if (\n !this.infiniteScrollBar \|\|\n !this.infiniteScroll \|\|\n this.io \|\|\n !Build.isBrowser \|\|\n typeof window === 'undefined' \|\|\n !(window as any).IntersectionObserver\n )\n return;\n\n this.io = new (window as any).IntersectionObserver(\n async (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting \|\| (data[1] && data[1].isIntersecting)) {\n this.nextPage();\n this.detachIO();\n }\n },\n { document, rootMargin: '100px', threshold: 1 }\n );\n this.io.observe(this.infiniteScrollBar);\n }\n\n private detachIO() {\n if (this.io) {\n this.io.disconnect();\n this.io = null;\n }\n }\n\n private updateStartEndContent() {\n // clear start slot if present\n if (this.startTpl && this.startOutputSlot) {\n this.startOutputSlot.innerHTML = this.tplRenderFn(\n this.startTpl,\n this.indexResults\n );\n }\n // clear end slot if present\n if (this.endOutputSlot && this.endTpl) {\n this.endOutputSlot.innerHTML = this.tplRenderFn(\n this.endTpl,\n this.indexResults\n );\n }\n this.nanoTplUpdated.emit(this.el);\n }\n\n private updateResultContent() {\n this.outputTo = this.outputSlot \|\| this.outputEle;\n\n if (!this.resultTpl \|\| !this.indexResults) return;\n\n // after filtering or new index - clear all content.\n // after pagination when the 'appendPages' set to true - don't clear results content\n if (this.shouldClear) this.outputTo.innerHTML = '';\n\n if (!this.tplRenderFn) return;\n\n const div = document.createElement('div');\n div.innerHTML = this.tplRenderFn(this.resultTpl, this.indexResults);\n\n Array.from(div.children).forEach((child) => {\n this.outputTo.appendChild(child);\n });\n\n this.shouldClear = true;\n this.nanoTplUpdated.emit(this.el);\n }\n\n connectedCallback() {\n readTask(() => {\n this.startTplSlot = this.el.querySelector('[slot=\"start-template\"]');\n this.startOutputSlot = this.el.querySelector('[slot=\"start-output\"]');\n if (!!this.startTplSlot) {\n this.startTpl = this.startTplSlot.innerHTML;\n this.startTpl = this.startTpl.replace(/=>/gm, '=>');\n }\n\n this.resultTplSlot = this.el.querySelector('[slot=\"result-template\"]');\n this.outputSlot = this.el.querySelector('[slot=\"result-output\"]');\n if (!!this.resultTplSlot) {\n this.resultTpl = this.resultTplSlot.innerHTML;\n this.resultTpl = this.resultTpl.replace(/=>/gm, '=>');\n }\n\n this.endTplSlot = this.el.querySelector('[slot=\"end-template\"]');\n this.endOutputSlot = this.el.querySelector('[slot=\"end-output\"]');\n if (!!this.endTplSlot) {\n this.endTpl = this.endTplSlot.innerHTML;\n this.endTpl = this.endTpl.replace(/=>/gm, '=>');\n }\n if (this.indexResults) {\n this.addContentIndex();\n this.updateResultContent();\n }\n });\n }\n\n componentDidLoad() {\n this.updateStartEndContent();\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n render() {\n return (\n <Host\n class={{\n 'show-results': this.showResults,\n }}\n >\n <div class=\"default\">\n <slot />\n </div>\n <div ref={(div) => (this.outputEle = div)}>\n <slot name=\"start-output\" />\n <slot name=\"result-output\" />\n <div ref={(div) => (this.infiniteScrollBar = div)}></div>\n <slot name=\"end-output\" />\n </div>\n </Host>\n );\n }\n}\n\nWormhole(AlgoliaResults, [\n 'indexResults',\n 'results',\n 'tplRenderFn',\n 'resultsPage',\n 'changeEvent',\n 'facets',\n 'isLoading',\n]);\n"],"version":3}

package/dist/components/nano-checkbox-group.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { g as getClassMap } from './theme.js';
 import { d as debounce } from './throttle.js';
-const checkboxGroupCss = ".sc-nano-checkbox-group-h{box-sizing:border-box}*.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}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentcolor\");--label-color--invalid:var(--nano-input-label-color-invalid, \"currentcolor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:6px;--control-margin-start:0}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:6px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1.5;white-space:normal;display:block;width:100%}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__more.sc-nano-checkbox-group{height:1em;-webkit-margin-before:calc(var(--label-padding) - var(--control-margin-bottom));margin-block-start:calc(var(--label-padding) - var(--control-margin-bottom));-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-after:var(--label-padding);margin-block-end:var(--label-padding);-webkit-margin-start:3px;margin-inline-start:3px;position:relative}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:flex;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-inline:var(--control-margin-start) var(--control-margin-end);margin-block:var(--control-margin-top) var(--control-margin-bottom)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{-webkit-margin-start:var(--control-margin-start);margin-inline-start:var(--control-margin-start);-webkit-margin-end:var(--control-margin-end);margin-inline-end:var(--control-margin-end)}}";
+const checkboxGroupCss = ".sc-nano-checkbox-group-h{box-sizing:border-box}*.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}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentcolor\");--label-color--invalid:var(--nano-input-label-color-invalid, \"currentcolor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:6px;--control-margin-start:0}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:6px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1.5;white-space:normal;display:block;inline-size:100%}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__legend.visually-hide.sc-nano-checkbox-group{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanogroupcb__more.sc-nano-checkbox-group{block-size:1em;margin-block:calc(var(--label-padding) - var(--control-margin-bottom)) var(--label-padding);margin-inline:3px 0;position:relative}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:flex;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-inline:var(--control-margin-start) var(--control-margin-end);margin-block:var(--control-margin-top) var(--control-margin-bottom)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-inline:var(--control-margin-start) var(--control-margin-end)}}";
 const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -55,6 +55,7 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.max = null;
     this.disabled = null;
     this.legend = '';
+    this.hideLegend = false;
     this._invalid = false;
     this.value = undefined;
   }
@@ -213,7 +214,8 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     requestAnimationFrame(() => (this.ignoreValueSet = false));
   }
   setCbValue() {
-    this.checkboxes.forEach((cb) => {
+    var _a;
+    (_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a.forEach((cb) => {
       if (cb.value === this.value ||
         (Array.isArray(this.value) && this.value.includes(cb.value))) {
         cb.checked = true;
@@ -244,6 +246,7 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.customValidate = this.customValidate.bind(this);
     this.handleDisabledChange();
     this.handleSlotChange();
+    this.setCbValue();
   }
   connectedCallback() {
     this.attachSlotObserver();
@@ -262,7 +265,10 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   render() {
     const legendId = this.grpId + '-lbl';
     const moreId = this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';
-    return (h(Host, Object.assign({}, this.checkboxTypes), h("fieldset", { disabled: this.disabled, class: { nanogroupcb: true, 'show-error': this.showErrorMsg } }, h("legend", { class: "nanogroupcb__legend", id: legendId }, this.legend), h("div", { class: "nanogroupcb__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, h("slot", null)), (this.showInlineError || this.hasHelperSlot) && (h("div", { class: "nanogroupcb__more", id: moreId }, !!this.showInlineError ? (h("div", { class: "nanogroupcb__error" }, this.errorMessage)) : (''), h("div", { class: "nanogroupcb__help" }, h("slot", { name: "helper" })))))));
+    return (h(Host, Object.assign({}, this.checkboxTypes), h("fieldset", { disabled: this.disabled, class: { nanogroupcb: true, 'show-error': this.showErrorMsg } }, h("legend", { id: legendId, class: {
+        nanogroupcb__legend: true,
+        'visually-hide': this.hideLegend,
+      } }, h("slot", { name: "legend" }, this.legend)), h("div", { class: "nanogroupcb__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, h("slot", null)), (this.showInlineError || this.hasHelperSlot) && (h("div", { class: "nanogroupcb__more", id: moreId }, !!this.showInlineError ? (h("div", { class: "nanogroupcb__error" }, this.errorMessage)) : (''), h("div", { class: "nanogroupcb__help" }, h("slot", { name: "helper" })))))));
   }
   get host() { return this; }
   static get watchers() { return {
@@ -281,6 +287,7 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "max": [2],
     "disabled": [516],
     "legend": [1],
+    "hideLegend": [4, "hide-legend"],
     "invalid": [2564],
     "validityMessage": [2049, "validity-message"],
     "value": [1025],

package/dist/components/nano-checkbox-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-checkbox-group.js","mappings":"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","names":[],"sources":["./src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","./src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n /*\n @prop --control-margin-top: Margin between controls. Default depends on control type;\n * @prop --control-margin-end: Margin between controls. Default depends on control type;\n * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n * @prop --invalid-msg-font-size: Default #{$input-help-font-size};\n\n * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{$input-help-color};\n\n * @prop --label-color: Default #{$label-color};\n * @prop --label-color--invalid: Default #{$label-color-invalid};\n * @prop --label-font-size: Default #{$label-font-size};\n * @prop --label-padding: space between legend and control. Default #{$input-padding-bottom};\n /\n\n --control-margin-top: 0;\n --control-margin-end: 0;\n --control-margin-bottom: 0;\n --control-margin-start: 0;\n --invalid-msg-color: #{nano-color(danger, base)};\n --invalid-msg-font-size: #{$input-help-font-size};\n --help-msg-color: #{$input-help-color};\n --label-color: #{$label-color};\n --label-color--invalid: #{$label-color-invalid};\n --label-font-size: #{$label-font-size};\n --label-padding: #{$input-padding-bottom};\n\n display: block;\n\n {\n box-sizing: inherit;\n }\n}\n\n:host([types-tag]),\n:host([types-segment]) {\n --control-margin-top: 0;\n --control-margin-end: 8px;\n --control-margin-bottom: 6px;\n --control-margin-start: 0;\n}\n\n:host([types-checkbox]),\n:host([types-radio]) {\n --control-margin-top: 0;\n --control-margin-end: 10px;\n --control-margin-bottom: 6px;\n --control-margin-start: 0;\n}\n\n.nanogroupcb {\n border: none;\n margin: 0;\n padding: 0;\n\n &__error,\n &__help,\n &__more {\n display: block;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &__legend {\n font-size: var(--label-font-size);\n padding: 0 0 var(--label-padding);\n margin: 0;\n line-height: 1.5;\n white-space: normal;\n display: block;\n width: 100%;\n\n :host([invalid]:not([invalid='false'])) & {\n color: var(--label-color--invalid);\n }\n }\n\n &__more {\n height: 1em;\n margin-block-start:\n calc(\n var(--label-padding) - var(--control-margin-bottom)\n );\n margin-inline-end: 0;\n margin-block-end: var(--label-padding);\n margin-inline-start: 3px;\n position: relative;\n }\n\n &__error,\n &__help {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__error {\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n opacity: 0;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__help {\n font-style: italic;\n opacity: 1;\n color: var(--help-msg-color);\n\n .show-error & {\n opacity: 0;\n }\n }\n\n &__cbs {\n margin: 0;\n padding: 0;\n line-height: 1;\n display: flex;\n flex-wrap: wrap;\n\n ::slotted(:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n --check-base-size: 1.2em;\n\n font-size: 0.85em;\n }\n\n ::slotted() {\n margin-inline: var(--control-margin-start) var(--control-margin-end);\n margin-block: var(--control-margin-top) var(--control-margin-bottom);\n }\n }\n}\n\n/* autoprefixer: ignore next /\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n .nanogroupcb__cbs {\n &::slotted(),\n ::slotted() {\n margin-inline-start: var(--control-margin-start);\n margin-inline-end: var(--control-margin-end);\n }\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n ComponentInterface,\n State,\n Listen,\n Watch,\n Host,\n Method,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { getClassMap } from '../../utils/theme';\nimport { debounce } from '../../utils/throttle';\nimport type {\n CssClassMap,\n ControlValidityEventDetail,\n ControlValidity,\n} from '../../interface';\n\n/\n `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n \n @slot - Used for grouping checkboxes inside the group wrapper\n * @slot helper - helper text to accompany the form field underneath.\n /\n@Component({\n tag: 'nano-checkbox-group',\n styleUrl: 'checkbox-group.scss',\n scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n private mo?: MutationObserver;\n private checkboxTypes: CssClassMap;\n private grpId = `nano-checkbox-group-${grpIds++}`;\n private ignoreValueSet = false;\n\n @Element() host: HTMLNanoCheckboxGroupElement;\n\n // internal state\n\n @State() checkboxes?: HTMLNanoCheckboxElement[];\n @State() nativeCbs: HTMLInputElement[];\n @State() errorMessage: string = '';\n @State() showErrorMsg = false;\n @State() hasHelperSlot = false;\n\n // public properties\n\n /\n When should the field perform validation\n /\n @Prop({ mutable: true }) validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' =\n 'submitThenDirty';\n\n /\n Whether to show validation errors underneath input\n /\n @Prop() showInlineError = true;\n\n /\n The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n * A validation error will be thrown if not enough controls are checked.\n /\n @Prop() min: number = 0;\n\n /\n The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n * Other controls will automatically be disabled upon reaching this number.\n /\n @Prop() max: number = null;\n\n /\n Disable all the nested form controls\n /\n @Prop({ reflect: true }) disabled: boolean \| null = null;\n\n /\n A common label for children controls\n /\n @Prop() legend: string = '';\n\n /\n This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n /\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n @State() _invalid = false;\n\n /\n Current validation message - if any. @readonly\n /\n @Prop()\n get validityMessage() {\n return this.errorMessage;\n }\n\n /* The current, collective checkbox value /\n @Prop({ mutable: true }) value: string[] \| string;\n\n @Watch('value')\n handleValuePropChange() {\n this.nanoChange.emit(this.value);\n\n // this change is coming from a checkbox being checked\n // so don't then change the checkbox state\n // (would cause an infinite loop)\n if (this.ignoreValueSet) return;\n\n // value has changed via prop directly, so update the checkbox's state\n this.setCbValue();\n }\n\n // Public methods\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n /\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n return new Promise((resolve) => {\n if (validateFirst) {\n this.customValidate();\n this.showInlineValidation();\n }\n setTimeout(() => {\n resolve({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n });\n }, 50);\n });\n }\n\n /\n Invalidate the field and show a custom error message.\n * To clear the error you will need to re-call this method with an empty string.\n * @param message - the error message to show\n * @param optVal - optionally supply an option value to target which checkbox to show invalidate against (default is the first)\n /\n @Method()\n async showError(message: string, optVal?: string) {\n let cb: HTMLNanoCheckboxElement;\n if (!this.checkboxes) return;\n if (optVal) cb = this.checkboxes.find((c) => c.value === optVal);\n if (!cb) cb = this.checkboxes[0];\n if (!cb) return;\n\n this.errorMessage = message;\n await cb.setError(message);\n if (!!this.showInlineError) this.showInlineValidation();\n }\n\n // Events\n\n /\n Called when a nested checkbox changes\n /\n @Event() nanoChange: EventEmitter<string \| string[]>;\n\n /\n Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n /\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // listeners & watchers\n\n @Listen('nanoChange')\n handleValueChange(ev: CustomEvent) {\n if (ev.target === this.host) return;\n this.setInteralValue();\n }\n\n /\n Notes on validation... custom validation messages should be set\n * no matter whether we show inline messages or native html5.\n * this will mean forms cannot submit when there are pending validation issues.\n */\n @Listen('nanoChange')\n @Watch('min')\n @Watch('max')\n handleCbChange() {\n if (this.invalid) this.showErrorMsg = this._invalid = false;\n this.customValidate();\n\n if (this.validateOn !== 'dirty') return;\n this.showInlineValidation();\n }\n\n @Watch('nativeCbs')\n customValidate() {\n if (!this.nativeCbs \|\| !this.nativeCbs.length \|\| !this.checkboxes) return;\n\n const onlyRadios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n\n if (\n onlyRadios &&\n onlyRadios.length &&\n (this.showErrorMsg \|\| this.validateOn === 'dirty')\n ) {\n const required = onlyRadios.find((cb) => cb.required);\n const checked = onlyRadios.filter((cb) => cb.checked);\n\n if (required && checked) {\n this.checkboxes.forEach((rd) => rd.reportValidity(false));\n return false;\n } else if (required && !checked) return true;\n }\n\n // we only care about checkbox controls.\n const onlyCbs = this.nativeCbs.filter((cb) => cb?.type === 'checkbox');\n if (!onlyCbs \|\| !onlyCbs.length) return;\n\n const checked = onlyCbs.filter((cb) => cb.checked);\n const required = onlyCbs.find((cb) => cb.required);\n let invalid = false;\n\n if (required && !checked.find((cb) => cb === required)) return true;\n\n this.checkboxes.forEach((cb, i) => {\n const nativeCb = this.nativeCbs[i];\n cb.setError('');\n nativeCb.setCustomValidity('');\n\n if (this.min && checked.length < this.min) {\n this.errorMessage = `You must select a minimum of ${this.min} values.`;\n invalid = true;\n }\n if (this.max && checked.length > this.max) {\n this.errorMessage = `Only up to ${this.max} values are allowed.`;\n invalid = true;\n }\n\n if (invalid) {\n cb.setError(this.errorMessage, this.showErrorMsg);\n // bit fugly. We're just doing this 'cos stencil\n // methods are async and we want the validity message\n // asap to keep things in sync\n nativeCb.setCustomValidity(this.errorMessage);\n }\n });\n return invalid;\n }\n\n @Watch('checkboxes')\n handleComponentChange() {\n if (!this.checkboxes?.length) return;\n\n this.checkboxTypes = getClassMap(\n this.checkboxes.map((cb) => 'types-' + cb.type)\n );\n }\n\n @Watch('disabled')\n @Watch('checkboxes')\n handleDisabledChange() {\n if (this.disabled === null \|\| !this.checkboxes?.length) return;\n this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n }\n\n // private methods\n\n private setInteralValue() {\n this.ignoreValueSet = true;\n const radios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n if (radios?.length) {\n this.value = radios.find((cb) => cb.checked)?.value \|\| null;\n return;\n }\n this.value = this.checkboxes.flatMap((cb) =>\n cb.checked ? [cb.value] : []\n );\n requestAnimationFrame(() => (this.ignoreValueSet = false));\n }\n\n private setCbValue() {\n this.checkboxes.forEach((cb) => {\n if (\n cb.value === this.value \|\|\n (Array.isArray(this.value) && this.value.includes(cb.value))\n ) {\n cb.checked = true;\n }\n });\n }\n\n private attachSlotObserver() {\n if (!!this.mo \|\| !window['MutationObserver']) return;\n const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n mo.observe(this.host, { childList: true });\n }\n\n private async handleSlotChange() {\n this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));\n this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n this.nativeCbs = await Promise.all(\n this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n acc.push(cb.getInputElement());\n return acc;\n }, [])\n );\n\n this.nativeCbs.forEach((cb) => {\n if (cb) cb.addEventListener('invalid', this.handleInvalid);\n });\n }\n\n private handleInvalid = (ev: Event) => {\n this._invalid = true;\n\n if (this.validateOn === 'submit') {\n this._invalid = this.showErrorMsg = this.customValidate();\n }\n if (!!this.showInlineError) ev.preventDefault();\n\n this.showInlineValidation(ev);\n };\n\n private showInlineValidation = (ev?: Event) => {\n if (!this.nativeCbs \|\| !this.nativeCbs.length) return;\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n this.showErrorMsg = false;\n this._invalid = false;\n\n this.nativeCbs.forEach((cb, _i) => {\n if (!cb.validity.valid) {\n this.errorMessage = cb.validationMessage;\n this.showErrorMsg = true;\n this._invalid = true;\n }\n });\n\n this.nanoValidate.emit({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n originalEvent: ev,\n });\n };\n\n // stencil hooks\n\n componentWillLoad() {\n this.showInlineValidation = debounce(this.showInlineValidation, 50);\n this.customValidate = this.customValidate.bind(this);\n this.handleDisabledChange();\n this.handleSlotChange();\n }\n\n connectedCallback() {\n this.attachSlotObserver();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n\n this.nativeCbs.forEach((cb) => {\n if (cb) cb.removeEventListener('invalid', this.handleInvalid);\n });\n }\n\n componentDidLoad() {\n this.handleComponentChange();\n }\n\n render() {\n const legendId = this.grpId + '-lbl';\n const moreId =\n this.showInlineError \|\| this.hasHelperSlot ? this.grpId + '-more' : '';\n\n return (\n <Host {...this.checkboxTypes}>\n <fieldset\n disabled={this.disabled}\n class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n >\n <legend class=\"nanogroupcb__legend\" id={legendId}>\n {this.legend}\n </legend>\n <div\n class=\"nanogroupcb__cbs\"\n role=\"group\"\n aria-labelledby={legendId + ' ' + moreId}\n >\n <slot />\n </div>\n {(this.showInlineError \|\| this.hasHelperSlot) && (\n <div class=\"nanogroupcb__more\" id={moreId}>\n {!!this.showInlineError ? (\n <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n ) : (\n ''\n )}\n <div class=\"nanogroupcb__help\">\n <slot name=\"helper\" />\n </div>\n </div>\n )}\n </fieldset>\n </Host>\n );\n }\n}\n\nlet grpIds = 0;\n"],"version":3}
1	+ {"file":"nano-checkbox-group.js","mappings":";;;;;;;AAAA,MAAM,gBAAgB,GAAG,0vHAA0vH;;MCmCtwH,aAAa;;;;;;IAGhB,UAAK,GAAG,uBAAuB,MAAM,EAAE,EAAE,CAAC;IAC1C,mBAAc,GAAG,KAAK,CAAC;IA4RvB,kBAAa,GAAG,CAAC,EAAS;MAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MAErB,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;QAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;OAC3D;MACD,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe;QAAE,EAAE,CAAC,cAAc,EAAE,CAAC;MAEhD,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAC;KAC/B,CAAC;IAEM,yBAAoB,GAAG,CAAC,EAAU;MACxC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM;QAAE,OAAO;MACtD,IAAI,IAAI,CAAC,UAAU,KAAK,iBAAiB;QAAE,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;MACrE,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;MAC1B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MAEtB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;QAC5B,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE;UACtB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,iBAAiB,CAAC;UACzC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;UACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;OACF,CAAC,CAAC;MAEH,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;QACrB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;QACtB,YAAY,EAAE,IAAI,CAAC,YAAY;QAC/B,aAAa,EAAE,EAAE;OAClB,CAAC,CAAC;KACJ,CAAC;;;wBAlT8B,EAAE;wBACV,KAAK;yBACJ,KAAK;sBAQ5B,iBAAiB;2BAKO,IAAI;eAMR,CAAC;eAMD,IAAI;oBAK0B,IAAI;kBAK/B,EAAE;sBAKI,KAAK;oBAUhB,KAAK;;;;;;;EAJzB,IACI,OAAO;IACT,OAAO,IAAI,CAAC,QAAQ,CAAC;GACtB;;;;EAMD,IACI,eAAe;IACjB,OAAO,IAAI,CAAC,YAAY,CAAC;GAC1B;EAMD,qBAAqB;IACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;;;IAKjC,IAAI,IAAI,CAAC,cAAc;MAAE,OAAO;;IAGhC,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;;;;;;;EAUD,MAAM,cAAc,CAAC,aAAsB;IACzC,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;MACzB,IAAI,aAAa,EAAE;QACjB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;OAC7B;MACD,UAAU,CAAC;QACT,OAAO,CAAC;UACN,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;UACtB,YAAY,EAAE,IAAI,CAAC,YAAY;SAChC,CAAC,CAAC;OACJ,EAAE,EAAE,CAAC,CAAC;KACR,CAAC,CAAC;GACJ;;;;;;;EASD,MAAM,SAAS,CAAC,OAAe,EAAE,MAAe;IAC9C,IAAI,EAA2B,CAAC;IAChC,IAAI,CAAC,IAAI,CAAC,UAAU;MAAE,OAAO;IAC7B,IAAI,MAAM;MAAE,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC;IACjE,IAAI,CAAC,EAAE;MAAE,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE;MAAE,OAAO;IAEhB,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;IAC5B,MAAM,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC3B,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe;MAAE,IAAI,CAAC,oBAAoB,EAAE,CAAC;GACzD;;EAkBD,iBAAiB,CAAC,EAAe;IAC/B,IAAI,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI;MAAE,OAAO;IACpC,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;;;;;;EAUD,cAAc;IACZ,IAAI,IAAI,CAAC,OAAO;MAAE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IAC5D,IAAI,CAAC,cAAc,EAAE,CAAC;IAEtB,IAAI,IAAI,CAAC,UAAU,KAAK,OAAO;MAAE,OAAO;IACxC,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC7B;EAGD,cAAc;IACZ,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU;MAAE,OAAO;IAE1E,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,IAAI,MAAK,OAAO,CAAC,CAAC;IAEvE,IACE,UAAU;MACV,UAAU,CAAC,MAAM;OAChB,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,UAAU,KAAK,OAAO,CAAC,EAClD;MACA,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,QAAQ,CAAC,CAAC;MACtD,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC;MAEtD,IAAI,QAAQ,IAAI,OAAO,EAAE;QACvB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1D,OAAO,KAAK,CAAC;OACd;WAAM,IAAI,QAAQ,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;KAC9C;;IAGD,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,IAAI,MAAK,UAAU,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM;MAAE,OAAO;IAExC,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,QAAQ,CAAC,CAAC;IACnD,IAAI,OAAO,GAAG,KAAK,CAAC;IAEpB,IAAI,QAAQ,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,QAAQ,CAAC;MAAE,OAAO,IAAI,CAAC;IAEpE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC;MAC5B,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;MACnC,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;MAChB,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;MAE/B,IAAI,IAAI,CAAC,GAAG,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE;QACzC,IAAI,CAAC,YAAY,GAAG,gCAAgC,IAAI,CAAC,GAAG,UAAU,CAAC;QACvE,OAAO,GAAG,IAAI,CAAC;OAChB;MACD,IAAI,IAAI,CAAC,GAAG,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE;QACzC,IAAI,CAAC,YAAY,GAAG,cAAc,IAAI,CAAC,GAAG,sBAAsB,CAAC;QACjE,OAAO,GAAG,IAAI,CAAC;OAChB;MAED,IAAI,OAAO,EAAE;QACX,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;;;;QAIlD,QAAQ,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;OAC/C;KACF,CAAC,CAAC;IACH,OAAO,OAAO,CAAC;GAChB;EAGD,qBAAqB;;IACnB,IAAI,EAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,CAAA;MAAE,OAAO;IAErC,IAAI,CAAC,aAAa,GAAG,WAAW,CAC9B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,QAAQ,GAAG,EAAE,CAAC,IAAI,CAAC,CAChD,CAAC;GACH;EAID,oBAAoB;;IAClB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,EAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,CAAA;MAAE,OAAO;IAC/D,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;GAC5D;;EAIO,eAAe;;IACrB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,IAAI,MAAK,OAAO,CAAC,CAAC;IACnE,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,EAAE;MAClB,IAAI,CAAC,KAAK,GAAG,CAAA,MAAA,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC,0CAAE,KAAK,KAAI,IAAI,CAAC;MAC5D,OAAO;KACR;IACD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAAE,KACtC,EAAE,CAAC,OAAO,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,CAC7B,CAAC;IACF,qBAAqB,CAAC,OAAO,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,CAAC,CAAC;GAC5D;EAEO,UAAU;;IAChB,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO,CAAC,CAAC,EAAE;MAC1B,IACE,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;SACtB,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAC5D;QACA,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC;OACnB;KACF,CAAC,CAAC;GACJ;EAEO,kBAAkB;IACxB,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC;MAAE,OAAO;IACrD,MAAM,EAAE,IAAI,IAAI,CAAC,EAAE,GAAG,IAAI,gBAAgB,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAC3E,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;GAC5C;EAEO,MAAM,gBAAgB;IAC5B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;IAC1E,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAElE,IAAI,CAAC,SAAS,GAAG,MAAM,OAAO,CAAC,GAAG,CAChC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,GAAqC,EAAE,EAAE;MAC/D,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC;MAC/B,OAAO,GAAG,CAAC;KACZ,EAAE,EAAE,CAAC,CACP,CAAC;IAEF,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE;MACxB,IAAI,EAAE;QAAE,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC5D,CAAC,CAAC;GACJ;;EAoCD,iBAAiB;IACf,IAAI,CAAC,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;IACpE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrD,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC5B,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACxB,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAED,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,EAAE;MAAE,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IAElC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE;MACxB,IAAI,EAAE;QAAE,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC/D,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,qBAAqB,EAAE,CAAC;GAC9B;EAED,MAAM;IACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;IACrC,MAAM,MAAM,GACV,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,CAAC;IAEzE,QACE,EAAC,IAAI,oBAAK,IAAI,CAAC,aAAa,GAC1B,gBACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,IAE7D,cACE,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAE;QACL,mBAAmB,EAAE,IAAI;QACzB,eAAe,EAAE,IAAI,CAAC,UAAU;OACjC,IAED,YAAM,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CACjC,EACT,WACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,OAAO,qBACK,QAAQ,GAAG,GAAG,GAAG,MAAM,IAExC,eAAQ,CACJ,EACL,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,aAAa,MAC1C,WAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,MAAM,IACtC,CAAC,CAAC,IAAI,CAAC,eAAe,IACrB,WAAK,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,YAAY,CAAO,KAEzD,EAAE,CACH,EACD,WAAK,KAAK,EAAC,mBAAmB,IAC5B,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACP,CACQ,CACN,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","./src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n /*\n @prop --control-margin-top: Margin between controls. Default depends on control type;\n * @prop --control-margin-end: Margin between controls. Default depends on control type;\n * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n * @prop --invalid-msg-font-size: Default #{$input-help-font-size};\n\n * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{$input-help-color};\n\n * @prop --label-color: Default #{$label-color};\n * @prop --label-color--invalid: Default #{$label-color-invalid};\n * @prop --label-font-size: Default #{$label-font-size};\n * @prop --label-padding: space between legend and control. Default #{$input-padding-bottom};\n /\n\n --control-margin-top: 0;\n --control-margin-end: 0;\n --control-margin-bottom: 0;\n --control-margin-start: 0;\n --invalid-msg-color: #{nano-color(danger, base)};\n --invalid-msg-font-size: #{$input-help-font-size};\n --help-msg-color: #{$input-help-color};\n --label-color: #{$label-color};\n --label-color--invalid: #{$label-color-invalid};\n --label-font-size: #{$label-font-size};\n --label-padding: #{$input-padding-bottom};\n\n display: block;\n\n {\n box-sizing: inherit;\n }\n}\n\n:host([types-tag]),\n:host([types-segment]) {\n --control-margin-top: 0;\n --control-margin-end: 8px;\n --control-margin-bottom: 6px;\n --control-margin-start: 0;\n}\n\n:host([types-checkbox]),\n:host([types-radio]) {\n --control-margin-top: 0;\n --control-margin-end: 10px;\n --control-margin-bottom: 6px;\n --control-margin-start: 0;\n}\n\n.nanogroupcb {\n border: none;\n margin: 0;\n padding: 0;\n\n &__error,\n &__help,\n &__more {\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &__legend {\n font-size: var(--label-font-size);\n padding: 0 0 var(--label-padding);\n margin: 0;\n line-height: 1.5;\n white-space: normal;\n display: block;\n inline-size: 100%;\n\n :host([invalid]:not([invalid='false'])) & {\n color: var(--label-color--invalid);\n }\n\n &.visually-hide {\n @include visually-hide;\n }\n }\n\n &__more {\n block-size: 1em;\n margin-block:\n calc(\n var(--label-padding) - var(--control-margin-bottom)\n ) var(--label-padding);\n margin-inline: 3px 0;\n position: relative;\n }\n\n &__error,\n &__help {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__error {\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n opacity: 0;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__help {\n font-style: italic;\n opacity: 1;\n color: var(--help-msg-color);\n\n .show-error & {\n opacity: 0;\n }\n }\n\n &__cbs {\n margin: 0;\n padding: 0;\n line-height: 1;\n display: flex;\n flex-wrap: wrap;\n\n ::slotted(:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n --check-base-size: 1.2em;\n\n font-size: 0.85em;\n }\n\n ::slotted() {\n margin-inline: var(--control-margin-start) var(--control-margin-end);\n margin-block: var(--control-margin-top) var(--control-margin-bottom);\n }\n }\n}\n\n/* autoprefixer: ignore next /\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n .nanogroupcb__cbs {\n &::slotted(),\n ::slotted() {\n margin-inline: var(--control-margin-start) var(--control-margin-end);\n }\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n ComponentInterface,\n State,\n Listen,\n Watch,\n Host,\n Method,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { getClassMap } from '../../utils/theme';\nimport { debounce } from '../../utils/throttle';\nimport type {\n CssClassMap,\n ControlValidityEventDetail,\n ControlValidity,\n} from '../../interface';\n\n/\n `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n \n @slot - Used for grouping checkboxes inside the group wrapper\n * @slot legend - if you do not set a legend attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n /\n@Component({\n tag: 'nano-checkbox-group',\n styleUrl: 'checkbox-group.scss',\n scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n private mo?: MutationObserver;\n private checkboxTypes: CssClassMap;\n private grpId = `nano-checkbox-group-${grpIds++}`;\n private ignoreValueSet = false;\n\n @Element() host: HTMLNanoCheckboxGroupElement;\n\n // internal state\n\n @State() checkboxes?: HTMLNanoCheckboxElement[];\n @State() nativeCbs: HTMLInputElement[];\n @State() errorMessage: string = '';\n @State() showErrorMsg = false;\n @State() hasHelperSlot = false;\n\n // public properties\n\n /\n When should the field perform validation\n /\n @Prop({ mutable: true }) validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' =\n 'submitThenDirty';\n\n /\n Whether to show validation errors underneath input\n /\n @Prop() showInlineError = true;\n\n /\n The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n * A validation error will be thrown if not enough controls are checked.\n /\n @Prop() min: number = 0;\n\n /\n The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n * Other controls will automatically be disabled upon reaching this number.\n /\n @Prop() max: number = null;\n\n /\n Disable all the nested form controls\n /\n @Prop({ reflect: true }) disabled: boolean \| null = null;\n\n /\n A common label for children controls\n /\n @Prop() legend: string = '';\n\n /\n Visually hide the legend but still available to screen readers.\n /\n @Prop() hideLegend?: boolean = false;\n\n /\n This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n /\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n @State() _invalid = false;\n\n /\n Current validation message - if any. @readonly\n /\n @Prop()\n get validityMessage() {\n return this.errorMessage;\n }\n\n /* The current, collective checkbox value /\n @Prop({ mutable: true }) value: string[] \| string;\n\n @Watch('value')\n handleValuePropChange() {\n this.nanoChange.emit(this.value);\n\n // this change is coming from a checkbox being checked\n // so don't then change the checkbox state\n // (would cause an infinite loop)\n if (this.ignoreValueSet) return;\n\n // value has changed via prop directly, so update the checkbox's state\n this.setCbValue();\n }\n\n // Public methods\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n /\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n return new Promise((resolve) => {\n if (validateFirst) {\n this.customValidate();\n this.showInlineValidation();\n }\n setTimeout(() => {\n resolve({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n });\n }, 50);\n });\n }\n\n /\n Invalidate the field and show a custom error message.\n * To clear the error you will need to re-call this method with an empty string.\n * @param message - the error message to show\n * @param optVal - optionally supply an option value to target which checkbox to show invalidate against (default is the first)\n /\n @Method()\n async showError(message: string, optVal?: string) {\n let cb: HTMLNanoCheckboxElement;\n if (!this.checkboxes) return;\n if (optVal) cb = this.checkboxes.find((c) => c.value === optVal);\n if (!cb) cb = this.checkboxes[0];\n if (!cb) return;\n\n this.errorMessage = message;\n await cb.setError(message);\n if (!!this.showInlineError) this.showInlineValidation();\n }\n\n // Events\n\n /\n Called when a nested checkbox changes\n /\n @Event() nanoChange: EventEmitter<string \| string[]>;\n\n /\n Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n /\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // listeners & watchers\n\n @Listen('nanoChange')\n handleValueChange(ev: CustomEvent) {\n if (ev.target === this.host) return;\n this.setInteralValue();\n }\n\n /\n Notes on validation... custom validation messages should be set\n * no matter whether we show inline messages or native html5.\n * this will mean forms cannot submit when there are pending validation issues.\n */\n @Listen('nanoChange')\n @Watch('min')\n @Watch('max')\n handleCbChange() {\n if (this.invalid) this.showErrorMsg = this._invalid = false;\n this.customValidate();\n\n if (this.validateOn !== 'dirty') return;\n this.showInlineValidation();\n }\n\n @Watch('nativeCbs')\n customValidate() {\n if (!this.nativeCbs \|\| !this.nativeCbs.length \|\| !this.checkboxes) return;\n\n const onlyRadios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n\n if (\n onlyRadios &&\n onlyRadios.length &&\n (this.showErrorMsg \|\| this.validateOn === 'dirty')\n ) {\n const required = onlyRadios.find((cb) => cb.required);\n const checked = onlyRadios.filter((cb) => cb.checked);\n\n if (required && checked) {\n this.checkboxes.forEach((rd) => rd.reportValidity(false));\n return false;\n } else if (required && !checked) return true;\n }\n\n // we only care about checkbox controls.\n const onlyCbs = this.nativeCbs.filter((cb) => cb?.type === 'checkbox');\n if (!onlyCbs \|\| !onlyCbs.length) return;\n\n const checked = onlyCbs.filter((cb) => cb.checked);\n const required = onlyCbs.find((cb) => cb.required);\n let invalid = false;\n\n if (required && !checked.find((cb) => cb === required)) return true;\n\n this.checkboxes.forEach((cb, i) => {\n const nativeCb = this.nativeCbs[i];\n cb.setError('');\n nativeCb.setCustomValidity('');\n\n if (this.min && checked.length < this.min) {\n this.errorMessage = `You must select a minimum of ${this.min} values.`;\n invalid = true;\n }\n if (this.max && checked.length > this.max) {\n this.errorMessage = `Only up to ${this.max} values are allowed.`;\n invalid = true;\n }\n\n if (invalid) {\n cb.setError(this.errorMessage, this.showErrorMsg);\n // bit fugly. We're just doing this 'cos stencil\n // methods are async and we want the validity message\n // asap to keep things in sync\n nativeCb.setCustomValidity(this.errorMessage);\n }\n });\n return invalid;\n }\n\n @Watch('checkboxes')\n handleComponentChange() {\n if (!this.checkboxes?.length) return;\n\n this.checkboxTypes = getClassMap(\n this.checkboxes.map((cb) => 'types-' + cb.type)\n );\n }\n\n @Watch('disabled')\n @Watch('checkboxes')\n handleDisabledChange() {\n if (this.disabled === null \|\| !this.checkboxes?.length) return;\n this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n }\n\n // private methods\n\n private setInteralValue() {\n this.ignoreValueSet = true;\n const radios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n if (radios?.length) {\n this.value = radios.find((cb) => cb.checked)?.value \|\| null;\n return;\n }\n this.value = this.checkboxes.flatMap((cb) =>\n cb.checked ? [cb.value] : []\n );\n requestAnimationFrame(() => (this.ignoreValueSet = false));\n }\n\n private setCbValue() {\n this.checkboxes?.forEach((cb) => {\n if (\n cb.value === this.value \|\|\n (Array.isArray(this.value) && this.value.includes(cb.value))\n ) {\n cb.checked = true;\n }\n });\n }\n\n private attachSlotObserver() {\n if (!!this.mo \|\| !window['MutationObserver']) return;\n const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n mo.observe(this.host, { childList: true });\n }\n\n private async handleSlotChange() {\n this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));\n this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n this.nativeCbs = await Promise.all(\n this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n acc.push(cb.getInputElement());\n return acc;\n }, [])\n );\n\n this.nativeCbs.forEach((cb) => {\n if (cb) cb.addEventListener('invalid', this.handleInvalid);\n });\n }\n\n private handleInvalid = (ev: Event) => {\n this._invalid = true;\n\n if (this.validateOn === 'submit') {\n this._invalid = this.showErrorMsg = this.customValidate();\n }\n if (!!this.showInlineError) ev.preventDefault();\n\n this.showInlineValidation(ev);\n };\n\n private showInlineValidation = (ev?: Event) => {\n if (!this.nativeCbs \|\| !this.nativeCbs.length) return;\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n this.showErrorMsg = false;\n this._invalid = false;\n\n this.nativeCbs.forEach((cb, _i) => {\n if (!cb.validity.valid) {\n this.errorMessage = cb.validationMessage;\n this.showErrorMsg = true;\n this._invalid = true;\n }\n });\n\n this.nanoValidate.emit({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n originalEvent: ev,\n });\n };\n\n // stencil hooks\n\n componentWillLoad() {\n this.showInlineValidation = debounce(this.showInlineValidation, 50);\n this.customValidate = this.customValidate.bind(this);\n this.handleDisabledChange();\n this.handleSlotChange();\n this.setCbValue();\n }\n\n connectedCallback() {\n this.attachSlotObserver();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n\n this.nativeCbs.forEach((cb) => {\n if (cb) cb.removeEventListener('invalid', this.handleInvalid);\n });\n }\n\n componentDidLoad() {\n this.handleComponentChange();\n }\n\n render() {\n const legendId = this.grpId + '-lbl';\n const moreId =\n this.showInlineError \|\| this.hasHelperSlot ? this.grpId + '-more' : '';\n\n return (\n <Host {...this.checkboxTypes}>\n <fieldset\n disabled={this.disabled}\n class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n >\n <legend\n id={legendId}\n class={{\n nanogroupcb__legend: true,\n 'visually-hide': this.hideLegend,\n }}\n >\n <slot name=\"legend\">{this.legend}</slot>\n </legend>\n <div\n class=\"nanogroupcb__cbs\"\n role=\"group\"\n aria-labelledby={legendId + ' ' + moreId}\n >\n <slot />\n </div>\n {(this.showInlineError \|\| this.hasHelperSlot) && (\n <div class=\"nanogroupcb__more\" id={moreId}>\n {!!this.showInlineError ? (\n <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n ) : (\n ''\n )}\n <div class=\"nanogroupcb__help\">\n <slot name=\"helper\" />\n </div>\n </div>\n )}\n </fieldset>\n </Host>\n );\n }\n}\n\nlet grpIds = 0;\n"],"version":3}

package/dist/components/nano-checkbox.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { f as focusVisible } from './focus-visible.js';
 import { c as createColorClasses } from './theme.js';
-const checkboxCss = ".sc-nano-checkbox-h{box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}.sc-nano-checkbox-h{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--invalid-shadow:0 0 0 0.1875rem  #ef4135;--padding:initial;--check-bg-color:#fff;--check-border-color:#b5aea7;--check-border-size:1px;--check-border-style:var(--check-border-size) solid var(--check-border-color);--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--label-spacing:10px 0;--tagbox-rgb:144 198 231;--tagbox-border-color:rgb(var(--tagbox-rgb) / 50%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 20%);--tagbox-border-radius:0;--segment-color:#007495;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgb(0 0 0 / 20%);--cb-border-radius:2px;--radio-border-radius:50%;--switch-inactive-color:rgb(181 174 167 / 70%);--switch-active-color:#007495;display:inline-block;max-width:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[type=radio][checked].sc-nano-checkbox-h:not([checked=false]){--check-border-size:0.3125em}[type=segment].sc-nano-checkbox-h{--check-border-style:none;--control-padding:0.7em 1em 0.7em 1em}[type=segment-pill].sc-nano-checkbox-h{--check-border-color:rgba(181, 174, 167, 0.5);--segment-border-radius:5px;--control-padding:0.7em 1em 0.7em 1em}.nano-color.sc-nano-checkbox-h{--tagbox-rgb:var(--nano-color-base-rgb);--focus-shadow:0 0 0 0.1875rem var(--nano-color-shade)}[checked].sc-nano-checkbox-h:not([checked=false]){--tagbox-border-color:rgb(var(--tagbox-rgb) / 80%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 50%)}[has-focus].sc-nano-checkbox-h:not([has-focus=false]){--cb-border-radius:5px}[disabled].sc-nano-checkbox-h:not([disabled=false]){opacity:0.7;--tagbox-rgb:104 117 118;--check-bg-color:rgba(104, 117, 118, 0.5);--check-checked-bg-color:rgba(104, 117, 118, 0.5);--segment-color:#455556}.nanocb.sc-nano-checkbox{padding:var(--padding);cursor:pointer;display:flex;align-items:center;line-height:1.2;position:relative}.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius, 3px);font-size:var(--check-base-size);position:relative;height:1.5em;width:1.5em;min-width:1.5em;border:var(--check-border-style);box-shadow:0 1px 4px rgba(0, 0, 0, 0.2)}.nanocb__input.sc-nano-checkbox::before{border-radius:var(--cb-border-radius);position:absolute;content:\"\";inset-inline-start:calc(0.725em - var(--check-border-size));inset-block-start:calc(0.725em - var(--check-border-size));width:0;height:0;border:2px solid var(--check-checked-higlight-color);transform:scale(0)}.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox{background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox::after{border-radius:var(--cb-border-radius);position:absolute;content:\"\";inset-inline-start:calc(0.825em - var(--check-border-size));inset-block-start:calc(0.825em - var(--check-border-size));height:0;width:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;transform:rotate(0deg) scale(0);opacity:1;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__input--switch.sc-nano-checkbox{border-radius:1em !important;width:2.4em;height:1.3em;background:var(--switch-inactive-color)}[type=switch].sc-nano-checkbox-h:not([disabled]) .nanocb__input--switch.sc-nano-checkbox:hover::after{scale:1.1 1}.nanocb__input--switch.sc-nano-checkbox::after{position:relative;content:\"\";display:block;border-radius:inherit;height:80%;width:40%;background:var(--check-checked-higlight-color);transform-origin:left;inset-inline-start:6%;inset-block-start:10%;transition:0.1s ease scale, 0.15s ease left}.nanocb__input--segment.sc-nano-checkbox,.nanocb__input--segment-pill.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--segment.sc-nano-checkbox::before,.nanocb__input--segment-pill.sc-nano-checkbox::before{display:none}.nanocb__input--tag.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--tag.sc-nano-checkbox::before{display:none}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow)}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--invalid-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow)}.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--focus-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border-color:var(--check-checked-border-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{color:var(--check-checked-higlight-color);background-color:var(--check-checked-bg-color);box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-checked-higlight-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::after{border:solid var(--check-checked-border-color);border-width:0 0.125em 0.125em 0;opacity:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::before{border-radius:var(--radio-border-radius)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:rotate(45deg) scale(1);opacity:1;inset-inline-start:calc(0.575em - var(--check-border-size));inset-block-start:calc(0.2875em - var(--check-border-size));width:0.375em;height:0.75em;border-radius:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox::after{transform:rotate(45deg)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--switch.sc-nano-checkbox{background:var(--switch-active-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--switch.sc-nano-checkbox::after{inset-inline-start:56%;transform-origin:right}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox{border-radius:var(--input-border-radius, 5px);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-bg-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:scale(1);opacity:1;inset-inline-start:0.3125em;inset-block-start:0;width:0.7em;height:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-inline:var(--label-spacing);padding-block:0;display:flex;align-items:center;font-stretch:condensed;line-height:1;flex:1;justify-content:space-between}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);box-shadow:var(--segment-shadow);display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);align-items:center;width:100%}.sc-nano-checkbox-h:first-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:var(--segment-border-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--segment-border-radius);-webkit-border-end:none;border-inline-end:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0;-webkit-border-end:none;border-inline-end:none}.sc-nano-checkbox-h:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:0;border-start-end-radius:var(--segment-border-radius);border-end-end-radius:var(--segment-border-radius);border-end-start-radius:0}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius);border:var(--check-border-style)}.nanocb__label--tag.sc-nano-checkbox{letter-spacing:2px;font-weight:400;font-size:0.65em;line-height:1.4;padding:var(--control-padding);border:2px solid #b5aea7;border-color:var(--tagbox-border-color);background-color:var(--tagbox-bg-color);transition:all 0.2s;border-radius:var(--cb-border-radius);width:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:\"+\";margin-inline:0.3125em 0;margin-block:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;transform:rotate(0deg);transform-origin:center}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}";
+const checkboxCss = ".sc-nano-checkbox-h{box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}.sc-nano-checkbox-h{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--invalid-shadow:0 0 0 0.1875rem  #ef4135;--padding:initial;--check-bg-color:#fff;--check-border-color:#b5aea7;--check-border-size:1px;--check-border-style:var(--check-border-size) solid var(--check-border-color);--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--label-spacing:10px 0;--tagbox-rgb:144 198 231;--tagbox-border-color:rgb(var(--tagbox-rgb) / 50%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 20%);--tagbox-border-radius:0;--segment-color:#007495;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgb(0 0 0 / 20%);--cb-border-radius:2px;--radio-border-radius:50%;--switch-inactive-color:rgb(181 174 167 / 70%);--switch-active-color:#007495;display:inline-block;max-inline-size:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[type=radio][checked].sc-nano-checkbox-h:not([checked=false]){--check-border-size:0.3125em}[type=segment].sc-nano-checkbox-h{--check-border-style:none;--control-padding:0.7em 1em 0.7em 1em}[type=segment-pill].sc-nano-checkbox-h{--check-border-color:rgba(181, 174, 167, 0.5);--segment-border-radius:5px;--control-padding:0.7em 1em 0.7em 1em}.nano-color.sc-nano-checkbox-h{--tagbox-rgb:var(--nano-color-base-rgb);--focus-shadow:0 0 0 0.1875rem var(--nano-color-shade)}[checked].sc-nano-checkbox-h:not([checked=false]){--tagbox-border-color:rgb(var(--tagbox-rgb) / 80%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 50%)}[has-focus].sc-nano-checkbox-h:not([has-focus=false]){--cb-border-radius:5px}[disabled].sc-nano-checkbox-h:not([disabled=false]){opacity:0.7;--tagbox-rgb:104 117 118;--check-bg-color:rgba(104, 117, 118, 0.5);--check-checked-bg-color:rgba(104, 117, 118, 0.5);--segment-color:#455556}.nanocb.sc-nano-checkbox{padding:var(--padding);cursor:pointer;display:flex;align-items:center;line-height:1.2;position:relative}.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius, 3px);font-size:var(--check-base-size);position:relative;block-size:1.5em;inline-size:1.5em;min-inline-size:1.5em;border:var(--check-border-style);box-shadow:0 1px 4px rgba(0, 0, 0, 0.2)}.nanocb__input.sc-nano-checkbox::before{border-radius:var(--cb-border-radius);position:absolute;content:\"\";inset-inline-start:calc(0.725em - var(--check-border-size));inset-block-start:calc(0.725em - var(--check-border-size));inline-size:0;block-size:0;border:2px solid var(--check-checked-higlight-color);transform:scale(0)}.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox{background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox::after{border-radius:var(--cb-border-radius);position:absolute;content:\"\";inset-inline-start:calc(0.825em - var(--check-border-size));inset-block-start:calc(0.825em - var(--check-border-size));block-size:0;inline-size:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;transform:rotate(0deg) scale(0);opacity:1;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__input--switch.sc-nano-checkbox{border-radius:1em !important;inline-size:2.4em;block-size:1.3em;background:var(--switch-inactive-color)}[type=switch].sc-nano-checkbox-h:not([disabled]) .nanocb__input--switch.sc-nano-checkbox:hover::after{scale:1.1 1}.nanocb__input--switch.sc-nano-checkbox::after{position:relative;content:\"\";display:block;border-radius:inherit;block-size:80%;inline-size:40%;background:var(--check-checked-higlight-color);transform-origin:left;inset-inline-start:6%;inset-block-start:10%;transition:0.1s ease scale, 0.15s ease left}.nanocb__input--segment.sc-nano-checkbox,.nanocb__input--segment-pill.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--segment.sc-nano-checkbox::before,.nanocb__input--segment-pill.sc-nano-checkbox::before{display:none}.nanocb__input--tag.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--tag.sc-nano-checkbox::before{display:none}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow)}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--invalid-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow)}.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--focus-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border-color:var(--check-checked-border-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{color:var(--check-checked-higlight-color);background-color:var(--check-checked-bg-color);box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-checked-higlight-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::after{border:solid var(--check-checked-border-color);border-width:0 0.125em 0.125em 0;opacity:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::before{border-radius:var(--radio-border-radius)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:rotate(45deg) scale(1);opacity:1;inset-inline-start:calc(0.575em - var(--check-border-size));inset-block-start:calc(0.2875em - var(--check-border-size));inline-size:0.375em;block-size:0.75em;border-radius:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox::after{transform:rotate(45deg)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--switch.sc-nano-checkbox{background:var(--switch-active-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--switch.sc-nano-checkbox::after{inset-inline-start:56%;transform-origin:right}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox{border-radius:var(--input-border-radius, 5px);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-bg-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:scale(1);opacity:1;inset-inline-start:0.3125em;inset-block-start:0;inline-size:0.7em;block-size:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-inline:var(--label-spacing);padding-block:0;display:flex;align-items:center;font-stretch:condensed;line-height:1;flex:1;justify-content:space-between}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);box-shadow:var(--segment-shadow);display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);align-items:center;inline-size:100%}.sc-nano-checkbox-h:first-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:var(--segment-border-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--segment-border-radius);border-inline-end:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0;border-inline-end:none}.sc-nano-checkbox-h:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:0;border-start-end-radius:var(--segment-border-radius);border-end-end-radius:var(--segment-border-radius);border-end-start-radius:0}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius);border:var(--check-border-style)}.nanocb__label--tag.sc-nano-checkbox{letter-spacing:2px;font-weight:400;font-size:0.65em;line-height:1.4;padding:var(--control-padding);border:2px solid #b5aea7;border-color:var(--tagbox-border-color);background-color:var(--tagbox-bg-color);transition:all 0.2s;border-radius:var(--cb-border-radius);inline-size:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:\"+\";margin-inline:0.3125em 0;margin-block:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;transform:rotate(0deg);transform-origin:center}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}";
 let checkboxIds = 0;
 const Checkbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -47,6 +47,8 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.form = undefined;
   }
   async handleCheckedChange() {
+    if (!this.input)
+      return;
     this.input.checked = this.checked;
     if (this.inputType === 'radio' && this.name && this.checked) {
       const form = this.host.closest('form');