npm - @nanoporetech-digital/components - Versions diffs - 7.5.5 → 7.7.0 - Mend

@nanoporetech-digital/components 7.5.5 → 7.7.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 (680) hide show

package/dist/collection/components/progress-bar/progress-bar.js CHANGED Viewed

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h } from "@stencil/core";
+import { Host } from "@stencil/core";
+import { h } from "../../utils/renderer";
 /**
  * Used to show the status of an ongoing operation.
  *
@@ -20,12 +21,14 @@ export class ProgressBar {
     /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */
     showPercent = false;
     render() {
-        return (h("div", { key: '40563d8a84636d568b0675808bd96cc84c0c4b97', part: "base", class: {
+        return (h(Host, { key: '36e2ed7f9fe6da4a7e85f26c87ab72dd0b300ebd', class: "nano-progress-bar" }, h("div", { key: '3c02d554bcb4727c0a03769be1cd6c57693868f9', part: "base", class: {
                 'progress-bar': true,
                 'progress-bar--indeterminate': this.indeterminate,
-            }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, h("div", { key: '32f65f980f9ef0a118ef005ff4ad68c8116b544b', part: "indicator", class: "progress-bar__indicator", style: {
+            }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, h("div", { key: '31a54ba3593cda595dc3566d86e763d8bb2701cf', part: "indicator", class: "progress-bar__indicator", style: {
                 width: !this.indeterminate ? `${this.value}%` : undefined,
-            } }, h("span", { key: '30a5b0e7663a5772c23ff75fc0b4b6bcd59f72ef', part: "label", class: "progress-bar__label" }, h("slot", { key: '1a80db1cb1f65e85f7ba78373e9f2aa7642a542e' }, !this.indeterminate && this.showPercent ? `${this.value}%` : '')))));
+            } }, h("span", { key: '91539c8c325358a416ca7b15e341ee0d70d31845', part: "label", class: "progress-bar__label" }, h("slot", { key: '6f24df7fdfbe3272581eac957cbe8b9ded8bc781' }, !this.indeterminate && this.showPercent
+            ? `${this.value}%`
+            : ''))))));
     }
     static get is() { return "nano-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-bar/progress-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,~~CAAC~~,EAAE,~~OAAO~~,EAAE,MAAM,eAAe,CAAC;~~AAE5D~~;;;;;;;;GAQG;AAOH,MAAM,OAAO,WAAW;IACX,IAAI,CAA6B;IAE5C,+CAA+C;IACvC,KAAK,GAAG,CAAC,CAAC;IAElB,sHAAsH;IAC9G,aAAa,GAAG,KAAK,CAAC;IAE9B,oHAAoH;IAC5G,WAAW,GAAG,KAAK,CAAC;IAE5B,MAAM;QACJ,OAAO,CACL,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;~~gBACL~~,cAAc,EAAE,IAAI;~~gBACpB~~,6BAA6B,EAAE,IAAI,CAAC,aAAa;~~aAClD~~,EACD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,gBACxB,UAAU,mBACP,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;~~YAErD~~,4DACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;~~oBACL~~,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS;~~iBAC1D~~;~~gBAED~~,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB;~~oBAC5C~~,+DACG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,~~CAAC,~~GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,~~CAAC,~~EAAE,~~CAC3D~~,CACF,CACH,CACF,~~CACP~~,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, ~~Element~~ } from '@stencil/core';\n\n/*\n Used to show the status of an ongoing operation.\n \n @slot - A label to show inside the indicator.\n \n @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n /\n\n@Component({\n tag: 'nano-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true,\n})\nexport class ProgressBar {\n @Element() host: HTMLNanoProgressBarElement;\n\n /* The progress bar's percentage, 0 to 100. /\n @Prop() value = 0;\n\n /* When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. /\n @Prop() indeterminate = false;\n\n /* Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot. */\n @Prop() showPercent = false;\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'progress-bar': true,\n 'progress-bar--indeterminate': this.indeterminate,\n }}\n role=\"progressbar\"\n title={this.host.title \|\| undefined}\n aria-label=\"Progress\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow={this.indeterminate ? null : this.value}\n >\n <div\n part=\"indicator\"\n class=\"progress-bar__indicator\"\n style={{\n width: !this.indeterminate ? `${this.value}%` : undefined,\n }}\n >\n <span part=\"label\" class=\"progress-bar__label\">\n <slot>\n {!this.indeterminate && this.showPercent ? `${this.value}%` : ''}\n </slot>\n </span>\n </div>\n </~~div~~>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AAEzC;;;;;;;;GAQG;AAOH,MAAM,OAAO,WAAW;IACX,IAAI,CAA6B;IAE5C,+CAA+C;IACvC,KAAK,GAAG,CAAC,CAAC;IAElB,sHAAsH;IAC9G,aAAa,GAAG,KAAK,CAAC;IAE9B,oHAAoH;IAC5G,WAAW,GAAG,KAAK,CAAC;IAE5B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,mBAAmB;YAC7B,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;oBACL,cAAc,EAAE,IAAI;oBACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;iBAClD,EACD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,gBACxB,UAAU,mBACP,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;gBAErD,4DACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;wBACL,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS;qBAC1D;oBAED,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB;wBAC5C,+DACG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW;4BACtC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG;4BAClB,CAAC,CAAC,EAAE,CACD,CACF,CACH,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Element, Host } from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\n/*\n Used to show the status of an ongoing operation.\n \n @slot - A label to show inside the indicator.\n \n @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n /\n\n@Component({\n tag: 'nano-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true,\n})\nexport class ProgressBar {\n @Element() host: HTMLNanoProgressBarElement;\n\n /* The progress bar's percentage, 0 to 100. /\n @Prop() value = 0;\n\n /* When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. /\n @Prop() indeterminate = false;\n\n /* Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot. */\n @Prop() showPercent = false;\n\n render() {\n return (\n <Host class=\"nano-progress-bar\">\n <div\n part=\"base\"\n class={{\n 'progress-bar': true,\n 'progress-bar--indeterminate': this.indeterminate,\n }}\n role=\"progressbar\"\n title={this.host.title \|\| undefined}\n aria-label=\"Progress\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow={this.indeterminate ? null : this.value}\n >\n <div\n part=\"indicator\"\n class=\"progress-bar__indicator\"\n style={{\n width: !this.indeterminate ? `${this.value}%` : undefined,\n }}\n >\n <span part=\"label\" class=\"progress-bar__label\">\n <slot>\n {!this.indeterminate && this.showPercent\n ? `${this.value}%`\n : ''}\n </slot>\n </span>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/range/range.js CHANGED Viewed

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { Host, h, } from "@stencil/core";
+import { Host, } from "@stencil/core";
+import { h } from "../../utils/renderer";
 import { renderHiddenInput } from "../../utils/form";
 import { clamp } from "../../utils/math";
 import { createColorClasses } from "../../utils/theme";
@@ -344,6 +345,7 @@ export class Range {
                 'range-pressed': pressedKnob !== undefined,
                 'range-has-pin': pin,
                 'range-snaps': this.snaps,
+                'nano-range': true,
             }) }, h("div", { class: "range-wrap" }, h("slot", { name: "start" }), h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl) }, ticks.map((tick) => (h("span", { style: tickStyle(tick), role: "presentation", class: {
                 'range-tick': true,
                 'range-tick-active': tick.active,

package/dist/collection/components/range/range.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"range.js","sourceRoot":"","sources":["../../../../src/components/range/range.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { renderHiddenInput } from '../../utils/form';\nimport { clamp } from '../../utils/math';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounceEvent } from '../../utils/throttle';\nimport {\n KnobName,\n RangeChangeEventDetail,\n RangeValue,\n} from './range-interface';\nimport type {\n Color,\n Gesture,\n GestureDetail,\n StyleEventDetail,\n} from '../../types/shared';\n\n/*\n The Range slider lets users select from a range of values by moving\n * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n \n Labels can be placed on either side of the range by adding the\n * `slot=\"start\"` or `slot=\"end\"` to the element.\n \n @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.\n /\n@Component({\n tag: 'nano-range',\n styleUrl: 'range.scss',\n scoped: true,\n})\nexport class Range implements ComponentInterface {\n private noUpdate = false;\n private rect!: ClientRect;\n private hasFocus = false;\n private rangeSlider?: HTMLElement;\n private gesture?: Gesture;\n\n @Element() el!: HTMLNanoRangeElement;\n\n @State() private ratioA = 0;\n @State() private ratioB = 0;\n @State() private pressedKnob: KnobName;\n\n /\n The color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`\n /\n @Prop() color?: Color;\n\n /\n How long, in milliseconds, to wait to trigger the\n * `nanoChange` event after each change in the range value.\n /\n @Prop() debounce = 0;\n\n @Watch('debounce')\n protected debounceChanged() {\n this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n }\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name = '';\n\n /\n Show two knobs.\n /\n @Prop() dualKnobs = false;\n\n /\n Minimum integer value of the range.\n /\n @Prop() min = 0;\n @Watch('min')\n protected minChanged() {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n }\n\n /\n Maximum integer value of the range.\n /\n @Prop() max = 100;\n @Watch('max')\n protected maxChanged() {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n }\n\n /\n If `true`, a pin with integer value is shown when the knob\n * is pressed.\n /\n @Prop() pin = false;\n\n /\n If `true`, the knob snaps to tick marks evenly spaced based\n * on the step property value.\n /\n @Prop() snaps = false;\n\n /\n Specifies the value granularity.\n /\n @Prop() step = 1;\n\n /\n If `true`, tick marks are displayed based on the step value.\n * Only applies when `snaps` is `true`.\n /\n @Prop() ticks = false;\n\n /\n If `true`, the user cannot interact with the range.\n /\n @Prop() disabled = false;\n @Watch('disabled')\n protected disabledChanged() {\n if (this.gesture) {\n this.gesture.enable(!this.disabled);\n }\n this.emitStyle();\n }\n\n /\n the value of the range.\n /\n @Prop({ mutable: true }) value: RangeValue = 0;\n @Watch('value')\n protected valueChanged(value: RangeValue) {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n\n value = this.ensureValueInBounds(value);\n\n this.nanoChange.emit({ value });\n }\n\n private clampBounds = (value: any): number => {\n return clamp(this.min, value, this.max);\n };\n\n private ensureValueInBounds = (value: any) => {\n if (this.dualKnobs) {\n return {\n lower: this.clampBounds(value.lower),\n upper: this.clampBounds(value.upper),\n };\n } else {\n return this.clampBounds(value);\n }\n };\n\n /\n Emitted when the value property has changed.\n /\n @Event() nanoChange!: EventEmitter<RangeChangeEventDetail>;\n\n /\n Emitted when the styles change.\n * @internal\n /\n @Event() nanoStyle!: EventEmitter<StyleEventDetail>;\n\n /\n Emitted when the range has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Emitted when the range loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n connectedCallback() {\n this.updateRatio();\n this.debounceChanged();\n this.disabledChanged();\n }\n\n disconnectedCallback() {\n if (this.gesture) {\n this.gesture.destroy();\n this.gesture = undefined;\n }\n }\n\n async componentDidLoad() {\n const rangeSlider = this.rangeSlider;\n if (rangeSlider) {\n this.gesture = (await import('../../utils/gesture/index')).createGesture({\n el: rangeSlider,\n gestureName: 'range',\n gesturePriority: 100,\n threshold: 0,\n onStart: (ev) => this.onStart(ev),\n onMove: (ev) => this.onMove(ev),\n onEnd: (ev) => this.onEnd(ev),\n });\n this.gesture.enable(!this.disabled);\n }\n }\n\n private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {\n let step = this.step;\n step = step > 0 ? step : 1;\n step = step / (this.max - this.min);\n if (!isIncrease) {\n step = -1;\n }\n if (knob === 'A') {\n this.ratioA = clamp(0, this.ratioA + step, 1);\n } else {\n this.ratioB = clamp(0, this.ratioB + step, 1);\n }\n this.updateValue();\n };\n\n private getValue(): RangeValue {\n const value = this.value \|\| 0;\n if (this.dualKnobs) {\n if (typeof value === 'object') {\n return value;\n }\n return {\n lower: 0,\n upper: value,\n };\n } else {\n if (typeof value === 'object') {\n return value.upper;\n }\n return value;\n }\n }\n\n private emitStyle() {\n this.nanoStyle.emit({\n interactive: true,\n 'interactive-disabled': this.disabled,\n });\n }\n\n private onStart(detail: GestureDetail) {\n const rect = (this.rect = this.rangeSlider.getBoundingClientRect() as any);\n const currentX = detail.currentX;\n\n // figure out which knob they started closer to\n let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n if (document.dir === 'rtl') {\n ratio = 1 - ratio;\n }\n\n this.pressedKnob =\n !this.dualKnobs \|\|\n Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)\n ? 'A'\n : 'B';\n\n this.setFocus(this.pressedKnob);\n\n // update the active knob's position\n this.update(currentX);\n }\n\n private onMove(detail: GestureDetail) {\n this.update(detail.currentX);\n }\n\n private onEnd(detail: GestureDetail) {\n this.update(detail.currentX);\n this.pressedKnob = undefined;\n }\n\n private update(currentX: number) {\n // figure out where the pointer is currently at\n // update the knob being interacted with\n const rect = this.rect;\n let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n if (document.dir === 'rtl') {\n ratio = 1 - ratio;\n }\n\n if (this.snaps) {\n // snaps the ratio to the current value\n ratio = valueToRatio(\n ratioToValue(ratio, this.min, this.max, this.step),\n this.min,\n this.max\n );\n }\n\n // update which knob is pressed\n if (this.pressedKnob === 'A') {\n this.ratioA = ratio;\n } else {\n this.ratioB = ratio;\n }\n\n // Update input value\n this.updateValue();\n }\n\n private get valA() {\n return ratioToValue(this.ratioA, this.min, this.max, this.step);\n }\n\n private get valB() {\n return ratioToValue(this.ratioB, this.min, this.max, this.step);\n }\n\n private get ratioLower() {\n if (this.dualKnobs) {\n return Math.min(this.ratioA, this.ratioB);\n }\n return 0;\n }\n\n private get ratioUpper() {\n if (this.dualKnobs) {\n return Math.max(this.ratioA, this.ratioB);\n }\n return this.ratioA;\n }\n\n private updateRatio() {\n const value = this.getValue() as any;\n const { min, max } = this;\n if (this.dualKnobs) {\n this.ratioA = valueToRatio(value.lower, min, max);\n this.ratioB = valueToRatio(value.upper, min, max);\n } else {\n this.ratioA = valueToRatio(value, min, max);\n }\n }\n\n private updateValue() {\n this.noUpdate = true;\n\n const { valA, valB } = this;\n this.value = !this.dualKnobs\n ? valA\n : {\n lower: Math.min(valA, valB),\n upper: Math.max(valA, valB),\n };\n\n this.noUpdate = false;\n }\n\n private setFocus(knob: KnobName) {\n if (this.el.shadowRoot) {\n const knobEl: HTMLElement = this.el.shadowRoot.querySelector(\n knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n );\n if (knobEl) {\n knobEl.focus();\n }\n }\n }\n\n private onBlur = () => {\n if (this.hasFocus) {\n this.hasFocus = false;\n this.nanoBlur.emit();\n this.emitStyle();\n }\n };\n\n private onFocus = () => {\n if (!this.hasFocus) {\n this.hasFocus = true;\n this.nanoFocus.emit();\n this.emitStyle();\n }\n };\n\n render() {\n const {\n min,\n max,\n step,\n el,\n handleKeyboard,\n pressedKnob,\n disabled,\n pin,\n ratioLower,\n ratioUpper,\n } = this;\n\n const barStart = `${ratioLower * 100}%`;\n const barEnd = `${100 - ratioUpper * 100}%`;\n\n const doc = document;\n const isRTL = doc.dir === 'rtl';\n const start = isRTL ? 'right' : 'left';\n const end = isRTL ? 'left' : 'right';\n\n const tickStyle = (tick: any) => {\n return {\n [start]: tick[start],\n };\n };\n\n const barStyle = {\n [start]: barStart,\n [end]: barEnd,\n };\n\n const ticks = [];\n if (this.snaps && this.ticks) {\n for (let value = min; value <= max; value += step) {\n const ratio = valueToRatio(value, min, max);\n\n const tick: any = {\n ratio,\n active: ratio >= ratioLower && ratio <= ratioUpper,\n };\n\n tick[start] = `${ratio * 100}%`;\n\n ticks.push(tick);\n }\n }\n\n renderHiddenInput(el, this.name, JSON.stringify(this.getValue()), disabled);\n\n return (\n <Host\n onFocusin={this.onFocus}\n onFocusout={this.onBlur}\n class={createColorClasses(this.color, {\n 'range-disabled': disabled,\n 'range-pressed': pressedKnob !== undefined,\n 'range-has-pin': pin,\n 'range-snaps': this.snaps,\n })}\n >\n <div class=\"range-wrap\">\n <slot name=\"start\"></slot>\n <div\n class=\"range-slider\"\n ref={(rangeEl) => (this.rangeSlider = rangeEl)}\n >\n {ticks.map((tick) => (\n <span\n style={tickStyle(tick)}\n role=\"presentation\"\n class={{\n 'range-tick': true,\n 'range-tick-active': tick.active,\n }}\n part={tick.active ? 'tick-active' : 'tick'}\n />\n ))}\n\n <div class=\"range-bar\" role=\"presentation\" part=\"bar\" />\n <div\n class=\"range-bar range-bar-active\"\n role=\"presentation\"\n style={barStyle}\n part=\"bar-active\"\n />\n\n {renderKnob(isRTL, {\n knob: 'A',\n pressed: pressedKnob === 'A',\n value: this.valA,\n ratio: this.ratioA,\n pin,\n disabled,\n handleKeyboard,\n min,\n max,\n })}\n\n {this.dualKnobs &&\n renderKnob(isRTL, {\n knob: 'B',\n pressed: pressedKnob === 'B',\n value: this.valB,\n ratio: this.ratioB,\n pin,\n disabled,\n handleKeyboard,\n min,\n max,\n })}\n </div>\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n\ninterface RangeKnob {\n knob: KnobName;\n value: number;\n ratio: number;\n min: number;\n max: number;\n disabled: boolean;\n pressed: boolean;\n pin: boolean;\n\n handleKeyboard: (name: KnobName, isIncrease: boolean) => void;\n}\n\nconst renderKnob = (\n isRTL: boolean,\n {\n knob,\n value,\n ratio,\n min,\n max,\n disabled,\n pressed,\n pin,\n handleKeyboard,\n }: RangeKnob\n) => {\n const start = isRTL ? 'right' : 'left';\n\n const knobStyle = () => {\n const style: any = {};\n style[start] = `${ratio * 100}%`;\n return style;\n };\n\n return (\n <div\n onKeyDown={(ev: KeyboardEvent) => {\n const key = ev.key;\n if (key === 'ArrowLeft' \|\| key === 'ArrowDown') {\n handleKeyboard(knob, false);\n ev.preventDefault();\n ev.stopPropagation();\n } else if (key === 'ArrowRight' \|\| key === 'ArrowUp') {\n handleKeyboard(knob, true);\n ev.preventDefault();\n ev.stopPropagation();\n }\n }}\n class={{\n 'range-knob-handle': true,\n 'range-knob-a': knob === 'A',\n 'range-knob-b': knob === 'B',\n 'range-knob-pressed': pressed,\n 'range-knob-min': value === min,\n 'range-knob-max': value === max,\n }}\n style={knobStyle()}\n role=\"slider\"\n tabindex={disabled ? -1 : 0}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-disabled={disabled ? 'true' : null}\n aria-valuenow={value}\n >\n {pin && (\n <div class=\"range-pin\" role=\"presentation\" part=\"pin\">\n {Math.round(value)}\n </div>\n )}\n <div class=\"range-knob\" role=\"presentation\" part=\"knob\" />\n </div>\n );\n};\n\nconst ratioToValue = (\n ratio: number,\n min: number,\n max: number,\n step: number\n): number => {\n let value = (max - min) * ratio;\n if (step > 0) {\n value = Math.round(value / step) * step + min;\n }\n return clamp(min, value, max);\n};\n\nconst valueToRatio = (value: number, min: number, max: number): number => {\n return clamp(0, (value - min) / (max - min), 1);\n};\n"]}
1	+ {"version":3,"file":"range.js","sourceRoot":"","sources":["../../../../src/components/range/range.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { renderHiddenInput } from '../../utils/form';\nimport { clamp } from '../../utils/math';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounceEvent } from '../../utils/throttle';\nimport {\n KnobName,\n RangeChangeEventDetail,\n RangeValue,\n} from './range-interface';\nimport type {\n Color,\n Gesture,\n GestureDetail,\n StyleEventDetail,\n} from '../../types/shared';\n\n/*\n The Range slider lets users select from a range of values by moving\n * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n \n Labels can be placed on either side of the range by adding the\n * `slot=\"start\"` or `slot=\"end\"` to the element.\n \n @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.\n /\n@Component({\n tag: 'nano-range',\n styleUrl: 'range.scss',\n scoped: true,\n})\nexport class Range implements ComponentInterface {\n private noUpdate = false;\n private rect!: ClientRect;\n private hasFocus = false;\n private rangeSlider?: HTMLElement;\n private gesture?: Gesture;\n\n @Element() el!: HTMLNanoRangeElement;\n\n @State() private ratioA = 0;\n @State() private ratioB = 0;\n @State() private pressedKnob: KnobName;\n\n /\n The color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`\n /\n @Prop() color?: Color;\n\n /\n How long, in milliseconds, to wait to trigger the\n * `nanoChange` event after each change in the range value.\n /\n @Prop() debounce = 0;\n\n @Watch('debounce')\n protected debounceChanged() {\n this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n }\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name = '';\n\n /\n Show two knobs.\n /\n @Prop() dualKnobs = false;\n\n /\n Minimum integer value of the range.\n /\n @Prop() min = 0;\n @Watch('min')\n protected minChanged() {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n }\n\n /\n Maximum integer value of the range.\n /\n @Prop() max = 100;\n @Watch('max')\n protected maxChanged() {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n }\n\n /\n If `true`, a pin with integer value is shown when the knob\n * is pressed.\n /\n @Prop() pin = false;\n\n /\n If `true`, the knob snaps to tick marks evenly spaced based\n * on the step property value.\n /\n @Prop() snaps = false;\n\n /\n Specifies the value granularity.\n /\n @Prop() step = 1;\n\n /\n If `true`, tick marks are displayed based on the step value.\n * Only applies when `snaps` is `true`.\n /\n @Prop() ticks = false;\n\n /\n If `true`, the user cannot interact with the range.\n /\n @Prop() disabled = false;\n @Watch('disabled')\n protected disabledChanged() {\n if (this.gesture) {\n this.gesture.enable(!this.disabled);\n }\n this.emitStyle();\n }\n\n /\n the value of the range.\n /\n @Prop({ mutable: true }) value: RangeValue = 0;\n @Watch('value')\n protected valueChanged(value: RangeValue) {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n\n value = this.ensureValueInBounds(value);\n\n this.nanoChange.emit({ value });\n }\n\n private clampBounds = (value: any): number => {\n return clamp(this.min, value, this.max);\n };\n\n private ensureValueInBounds = (value: any) => {\n if (this.dualKnobs) {\n return {\n lower: this.clampBounds(value.lower),\n upper: this.clampBounds(value.upper),\n };\n } else {\n return this.clampBounds(value);\n }\n };\n\n /\n Emitted when the value property has changed.\n /\n @Event() nanoChange!: EventEmitter<RangeChangeEventDetail>;\n\n /\n Emitted when the styles change.\n * @internal\n /\n @Event() nanoStyle!: EventEmitter<StyleEventDetail>;\n\n /\n Emitted when the range has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Emitted when the range loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n connectedCallback() {\n this.updateRatio();\n this.debounceChanged();\n this.disabledChanged();\n }\n\n disconnectedCallback() {\n if (this.gesture) {\n this.gesture.destroy();\n this.gesture = undefined;\n }\n }\n\n async componentDidLoad() {\n const rangeSlider = this.rangeSlider;\n if (rangeSlider) {\n this.gesture = (await import('../../utils/gesture/index')).createGesture({\n el: rangeSlider,\n gestureName: 'range',\n gesturePriority: 100,\n threshold: 0,\n onStart: (ev) => this.onStart(ev),\n onMove: (ev) => this.onMove(ev),\n onEnd: (ev) => this.onEnd(ev),\n });\n this.gesture.enable(!this.disabled);\n }\n }\n\n private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {\n let step = this.step;\n step = step > 0 ? step : 1;\n step = step / (this.max - this.min);\n if (!isIncrease) {\n step = -1;\n }\n if (knob === 'A') {\n this.ratioA = clamp(0, this.ratioA + step, 1);\n } else {\n this.ratioB = clamp(0, this.ratioB + step, 1);\n }\n this.updateValue();\n };\n\n private getValue(): RangeValue {\n const value = this.value \|\| 0;\n if (this.dualKnobs) {\n if (typeof value === 'object') {\n return value;\n }\n return {\n lower: 0,\n upper: value,\n };\n } else {\n if (typeof value === 'object') {\n return value.upper;\n }\n return value;\n }\n }\n\n private emitStyle() {\n this.nanoStyle.emit({\n interactive: true,\n 'interactive-disabled': this.disabled,\n });\n }\n\n private onStart(detail: GestureDetail) {\n const rect = (this.rect = this.rangeSlider.getBoundingClientRect() as any);\n const currentX = detail.currentX;\n\n // figure out which knob they started closer to\n let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n if (document.dir === 'rtl') {\n ratio = 1 - ratio;\n }\n\n this.pressedKnob =\n !this.dualKnobs \|\|\n Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)\n ? 'A'\n : 'B';\n\n this.setFocus(this.pressedKnob);\n\n // update the active knob's position\n this.update(currentX);\n }\n\n private onMove(detail: GestureDetail) {\n this.update(detail.currentX);\n }\n\n private onEnd(detail: GestureDetail) {\n this.update(detail.currentX);\n this.pressedKnob = undefined;\n }\n\n private update(currentX: number) {\n // figure out where the pointer is currently at\n // update the knob being interacted with\n const rect = this.rect;\n let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n if (document.dir === 'rtl') {\n ratio = 1 - ratio;\n }\n\n if (this.snaps) {\n // snaps the ratio to the current value\n ratio = valueToRatio(\n ratioToValue(ratio, this.min, this.max, this.step),\n this.min,\n this.max\n );\n }\n\n // update which knob is pressed\n if (this.pressedKnob === 'A') {\n this.ratioA = ratio;\n } else {\n this.ratioB = ratio;\n }\n\n // Update input value\n this.updateValue();\n }\n\n private get valA() {\n return ratioToValue(this.ratioA, this.min, this.max, this.step);\n }\n\n private get valB() {\n return ratioToValue(this.ratioB, this.min, this.max, this.step);\n }\n\n private get ratioLower() {\n if (this.dualKnobs) {\n return Math.min(this.ratioA, this.ratioB);\n }\n return 0;\n }\n\n private get ratioUpper() {\n if (this.dualKnobs) {\n return Math.max(this.ratioA, this.ratioB);\n }\n return this.ratioA;\n }\n\n private updateRatio() {\n const value = this.getValue() as any;\n const { min, max } = this;\n if (this.dualKnobs) {\n this.ratioA = valueToRatio(value.lower, min, max);\n this.ratioB = valueToRatio(value.upper, min, max);\n } else {\n this.ratioA = valueToRatio(value, min, max);\n }\n }\n\n private updateValue() {\n this.noUpdate = true;\n\n const { valA, valB } = this;\n this.value = !this.dualKnobs\n ? valA\n : {\n lower: Math.min(valA, valB),\n upper: Math.max(valA, valB),\n };\n\n this.noUpdate = false;\n }\n\n private setFocus(knob: KnobName) {\n if (this.el.shadowRoot) {\n const knobEl: HTMLElement = this.el.shadowRoot.querySelector(\n knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n );\n if (knobEl) {\n knobEl.focus();\n }\n }\n }\n\n private onBlur = () => {\n if (this.hasFocus) {\n this.hasFocus = false;\n this.nanoBlur.emit();\n this.emitStyle();\n }\n };\n\n private onFocus = () => {\n if (!this.hasFocus) {\n this.hasFocus = true;\n this.nanoFocus.emit();\n this.emitStyle();\n }\n };\n\n render() {\n const {\n min,\n max,\n step,\n el,\n handleKeyboard,\n pressedKnob,\n disabled,\n pin,\n ratioLower,\n ratioUpper,\n } = this;\n\n const barStart = `${ratioLower * 100}%`;\n const barEnd = `${100 - ratioUpper * 100}%`;\n\n const doc = document;\n const isRTL = doc.dir === 'rtl';\n const start = isRTL ? 'right' : 'left';\n const end = isRTL ? 'left' : 'right';\n\n const tickStyle = (tick: any) => {\n return {\n [start]: tick[start],\n };\n };\n\n const barStyle = {\n [start]: barStart,\n [end]: barEnd,\n };\n\n const ticks = [];\n if (this.snaps && this.ticks) {\n for (let value = min; value <= max; value += step) {\n const ratio = valueToRatio(value, min, max);\n\n const tick: any = {\n ratio,\n active: ratio >= ratioLower && ratio <= ratioUpper,\n };\n\n tick[start] = `${ratio * 100}%`;\n\n ticks.push(tick);\n }\n }\n\n renderHiddenInput(el, this.name, JSON.stringify(this.getValue()), disabled);\n\n return (\n <Host\n onFocusin={this.onFocus}\n onFocusout={this.onBlur}\n class={createColorClasses(this.color, {\n 'range-disabled': disabled,\n 'range-pressed': pressedKnob !== undefined,\n 'range-has-pin': pin,\n 'range-snaps': this.snaps,\n 'nano-range': true,\n })}\n >\n <div class=\"range-wrap\">\n <slot name=\"start\"></slot>\n <div\n class=\"range-slider\"\n ref={(rangeEl) => (this.rangeSlider = rangeEl)}\n >\n {ticks.map((tick) => (\n <span\n style={tickStyle(tick)}\n role=\"presentation\"\n class={{\n 'range-tick': true,\n 'range-tick-active': tick.active,\n }}\n part={tick.active ? 'tick-active' : 'tick'}\n />\n ))}\n\n <div class=\"range-bar\" role=\"presentation\" part=\"bar\" />\n <div\n class=\"range-bar range-bar-active\"\n role=\"presentation\"\n style={barStyle}\n part=\"bar-active\"\n />\n\n {renderKnob(isRTL, {\n knob: 'A',\n pressed: pressedKnob === 'A',\n value: this.valA,\n ratio: this.ratioA,\n pin,\n disabled,\n handleKeyboard,\n min,\n max,\n })}\n\n {this.dualKnobs &&\n renderKnob(isRTL, {\n knob: 'B',\n pressed: pressedKnob === 'B',\n value: this.valB,\n ratio: this.ratioB,\n pin,\n disabled,\n handleKeyboard,\n min,\n max,\n })}\n </div>\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n\ninterface RangeKnob {\n knob: KnobName;\n value: number;\n ratio: number;\n min: number;\n max: number;\n disabled: boolean;\n pressed: boolean;\n pin: boolean;\n\n handleKeyboard: (name: KnobName, isIncrease: boolean) => void;\n}\n\nconst renderKnob = (\n isRTL: boolean,\n {\n knob,\n value,\n ratio,\n min,\n max,\n disabled,\n pressed,\n pin,\n handleKeyboard,\n }: RangeKnob\n) => {\n const start = isRTL ? 'right' : 'left';\n\n const knobStyle = () => {\n const style: any = {};\n style[start] = `${ratio * 100}%`;\n return style;\n };\n\n return (\n <div\n onKeyDown={(ev: KeyboardEvent) => {\n const key = ev.key;\n if (key === 'ArrowLeft' \|\| key === 'ArrowDown') {\n handleKeyboard(knob, false);\n ev.preventDefault();\n ev.stopPropagation();\n } else if (key === 'ArrowRight' \|\| key === 'ArrowUp') {\n handleKeyboard(knob, true);\n ev.preventDefault();\n ev.stopPropagation();\n }\n }}\n class={{\n 'range-knob-handle': true,\n 'range-knob-a': knob === 'A',\n 'range-knob-b': knob === 'B',\n 'range-knob-pressed': pressed,\n 'range-knob-min': value === min,\n 'range-knob-max': value === max,\n }}\n style={knobStyle()}\n role=\"slider\"\n tabindex={disabled ? -1 : 0}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-disabled={disabled ? 'true' : null}\n aria-valuenow={value}\n >\n {pin && (\n <div class=\"range-pin\" role=\"presentation\" part=\"pin\">\n {Math.round(value)}\n </div>\n )}\n <div class=\"range-knob\" role=\"presentation\" part=\"knob\" />\n </div>\n );\n};\n\nconst ratioToValue = (\n ratio: number,\n min: number,\n max: number,\n step: number\n): number => {\n let value = (max - min) * ratio;\n if (step > 0) {\n value = Math.round(value / step) * step + min;\n }\n return clamp(min, value, max);\n};\n\nconst valueToRatio = (value: number, min: number, max: number): number => {\n return clamp(0, (value - min) / (max - min), 1);\n};\n"]}

package/dist/collection/components/rating/rating.css CHANGED Viewed

@@ -67,7 +67,7 @@
   line-height: 0;
   justify-content: space-between;
 }
-.rating__symbols--inactive .rating__symbol > :not(nano-icon) {
+.rating__symbols--inactive .rating__symbol > :not(.nano-icon) {
   background-color: currentcolor !important;
 }
 .rating__symbols > * {

package/dist/collection/components/rating/rating.js CHANGED Viewed

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, } from "@stencil/core";
+import { Host, } from "@stencil/core";
+import { h } from "../../utils/renderer";
 import { focusVisible } from "../../utils/focus-visible";
 import { clamp } from "../../utils/math";
 /**
@@ -170,23 +171,23 @@ export class Rating {
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (h("div", { key: '71577f298741ece02dc6655e5275d00dedd37b86', class: "rating-wrap" }, h("div", { key: '1970dd80f9783316eddb98501f1e5f1e8e0325c9', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+        return (h(Host, { key: 'e7aec714fffd7abf991de7f31712d6a85a67ee75', class: "nano-rating" }, h("div", { key: '1865bfccf63d3b544e394abb8e4c9141636dd930', class: "rating-wrap" }, h("div", { key: '5cb091e86a3b68cdc44ed0f181ba9e99cecfd8da', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
                 rating: true,
                 'rating--readonly': this.readonly,
                 'rating--disabled': this.disabled,
-            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: '4d341aa10271c68e94379babdd4f88d9c436dbcb', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
+            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: '118a16e603a53cbfc515297eb347705277118ca1', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
             },
             // Users can click the current value to clear the rating. When this happens, we set this.isHovering to
             // false to prevent the hover state from confusing them as they move the mouse out of the control. This
             // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
-            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '13a214cc0d52fedcf48953e17e0d2e2e14ded9f9', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: 'b299dae6997acbcece7582efd9f99858cf30b22b', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
                 clip: this.clip(displayValue),
             } }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
-            }, innerHTML: this.symbol(index + 1) })))), h("input", { key: '4dd7a72137134862bea4524ce4e54a828640ba3d', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly }))));
+            }, innerHTML: this.symbol(index + 1) })))), h("input", { key: '7e134eb0de5e255b474e567406a0ae4f027aa83b', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
     }
     static get is() { return "nano-rating"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/rating/rating.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"rating.js","sourceRoot":"","sources":["../../../../src/components/rating/rating.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n ComponentInterface,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils/math';\n\n/*\n Rating - a form element to allow the viewing and input of user feedback.\n /\n@Component({\n tag: 'nano-rating',\n styleUrl: 'rating.scss',\n scoped: true,\n})\nexport class Rating implements ComponentInterface {\n private rating: HTMLElement;\n private isRtl: boolean;\n private indicator: HTMLElement;\n\n @Element() host: HTMLNanoRatingElement;\n\n @State() hoverValue = 0;\n @State() isHovering = false;\n\n /\n The current rating.\n /\n @Prop({ mutable: true, reflect: true }) value = 0;\n\n /\n The highest rating to show.\n /\n @Prop() max = 5;\n\n /\n The minimum increment value allowed by the control.\n /\n @Prop() precision = 1;\n\n /\n Makes the rating readonly.\n /\n @Prop() readonly = false;\n\n /\n Disables the rating.\n /\n @Prop() disabled = false;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name = '';\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() symbolName = 'solid/star';\n\n /\n A function that returns the symbols to display.\n * Allows for more granular control than `symbol-name`.\n * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n * @param _number\n * @returns an html string used to render your rating symbol\n /\n @Prop() symbol = (_number: number) =>\n '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n @Watch('value')\n handleValueChange() {\n this.nanoChange.emit();\n }\n\n @Watch('symbolName')\n handleSymbolChange() {\n if (!this.symbol)\n this.symbol = (_: number) =>\n '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n }\n\n /\n Emitted when the rating's value changes.\n /\n @Event() nanoChange!: EventEmitter<void>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n /\n Emitted when the input has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Sets focus on the rating.\n /\n @Method()\n async setFocus() {\n this.rating.focus();\n }\n\n /\n Removes focus from the rating.\n /\n @Method()\n async removeFocus() {\n this.rating.blur();\n }\n\n private getValueFromMousePosition(event: MouseEvent) {\n const containerLeft = this.rating.getBoundingClientRect().left;\n const containerWidth = this.rating.getBoundingClientRect().width;\n\n let num: number;\n num = this.roundToPrecision(\n ((event.clientX - containerLeft) / containerWidth) this.max,\n this.precision\n );\n if (this.isRtl) num = this.max + this.precision - num;\n\n return clamp(num, 0, this.max);\n }\n\n private roundToPrecision(numberToRound: number, precision = 0.5) {\n const multiplier = 1 / precision;\n return Math.ceil(numberToRound * multiplier) / multiplier;\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n const newValue = this.getValueFromMousePosition(event);\n this.value = newValue === this.value ? 0 : newValue;\n this.isHovering = false;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n if (event.key === 'ArrowLeft') {\n const decrement = event.shiftKey ? 1 : this.precision;\n this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n event.preventDefault();\n }\n\n if (event.key === 'ArrowRight') {\n const increment = event.shiftKey ? 1 : this.precision;\n this.value = this.roundToPrecision(\n Math.min(this.max, this.value + increment)\n );\n event.preventDefault();\n }\n\n if (event.key === 'Home') {\n this.value = 0;\n event.preventDefault();\n }\n\n if (event.key === 'End') {\n this.value = this.max;\n event.preventDefault();\n }\n };\n\n private handleMouseEnter = () => {\n this.isHovering = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovering = false;\n };\n\n private handleFocus = () => {\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.nanoBlur.emit();\n };\n\n private handleMouseMove = (event: MouseEvent) => {\n this.hoverValue = this.getValueFromMousePosition(event);\n };\n\n private clip(displayValue: number) {\n if (!this.rating) return;\n const tw = this.rating.getBoundingClientRect().width;\n if (this.isRtl)\n return `rect(0, ${tw}px, 2em, ${\n tw - (tw / 100) * ((displayValue / this.max) * 100)\n }px)`;\n return `rect(0, ${\n (tw / 100) * ((displayValue / this.max) * 100)\n }px, 2em, 0)`;\n }\n\n componentDidLoad() {\n focusVisible.observe(this.rating);\n setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n }\n\n connectedCallback() {\n this.isRtl =\n this.host.dir === 'rtl' \|\| this.host.ownerDocument.dir === 'rtl';\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.rating);\n }\n\n render() {\n this.isRtl =\n this.host.dir === 'rtl' \|\| this.host.ownerDocument.dir === 'rtl';\n\n const counter = Array.from(Array(this.max).keys());\n\n let displayValue = 0;\n if (this.disabled \|\| this.readonly) {\n displayValue = this.value;\n } else {\n displayValue = this.isHovering ? this.hoverValue : this.value;\n }\n\n return (\n <div class=\"rating-wrap\">\n <div\n dir={this.isRtl ? 'rtl' : null}\n ref={(el) => (this.rating = el)}\n part=\"base\"\n class={{\n rating: true,\n 'rating--readonly': this.readonly,\n 'rating--disabled': this.disabled,\n }}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-readonly={this.readonly ? 'true' : 'false'}\n aria-valuenow={this.value}\n aria-valuemin={0}\n aria-valuemax={this.max}\n tabIndex={this.disabled ? -1 : 0}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onMouseMove={this.handleMouseMove}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n >\n <span class=\"rating__symbols rating__symbols--inactive\">\n {counter.map((index) => (\n <span\n class={{\n rating__symbol: true,\n 'rating__symbol--hover':\n this.isHovering && Math.ceil(displayValue) === index + 1,\n }}\n // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n onMouseEnter={this.handleMouseEnter}\n innerHTML={this.symbol(index + 1)}\n />\n ))}\n </span>\n\n <span\n ref={(span) => (this.indicator = span)}\n class=\"rating__symbols rating__symbols--indicator\"\n style={{\n clip: this.clip(displayValue),\n }}\n >\n {counter.map((index) => (\n <span\n class={{\n rating__symbol: true,\n 'rating__symbol--hover':\n this.isHovering && Math.ceil(displayValue) === index + 1,\n }}\n innerHTML={this.symbol(index + 1)}\n />\n ))}\n </span>\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n disabled={this.disabled \|\| this.readonly}\n />\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"rating.js","sourceRoot":"","sources":["../../../../src/components/rating/rating.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n ComponentInterface,\n Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils/math';\n\n/*\n Rating - a form element to allow the viewing and input of user feedback.\n /\n@Component({\n tag: 'nano-rating',\n styleUrl: 'rating.scss',\n scoped: true,\n})\nexport class Rating implements ComponentInterface {\n private rating: HTMLElement;\n private isRtl: boolean;\n private indicator: HTMLElement;\n\n @Element() host: HTMLNanoRatingElement;\n\n @State() hoverValue = 0;\n @State() isHovering = false;\n\n /\n The current rating.\n /\n @Prop({ mutable: true, reflect: true }) value = 0;\n\n /\n The highest rating to show.\n /\n @Prop() max = 5;\n\n /\n The minimum increment value allowed by the control.\n /\n @Prop() precision = 1;\n\n /\n Makes the rating readonly.\n /\n @Prop() readonly = false;\n\n /\n Disables the rating.\n /\n @Prop() disabled = false;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name = '';\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() symbolName = 'solid/star';\n\n /\n A function that returns the symbols to display.\n * Allows for more granular control than `symbol-name`.\n * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n * @param _number\n * @returns an html string used to render your rating symbol\n /\n @Prop() symbol = (_number: number) =>\n '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n @Watch('value')\n handleValueChange() {\n this.nanoChange.emit();\n }\n\n @Watch('symbolName')\n handleSymbolChange() {\n if (!this.symbol)\n this.symbol = (_: number) =>\n '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n }\n\n /\n Emitted when the rating's value changes.\n /\n @Event() nanoChange!: EventEmitter<void>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n /\n Emitted when the input has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Sets focus on the rating.\n /\n @Method()\n async setFocus() {\n this.rating.focus();\n }\n\n /\n Removes focus from the rating.\n /\n @Method()\n async removeFocus() {\n this.rating.blur();\n }\n\n private getValueFromMousePosition(event: MouseEvent) {\n const containerLeft = this.rating.getBoundingClientRect().left;\n const containerWidth = this.rating.getBoundingClientRect().width;\n\n let num: number;\n num = this.roundToPrecision(\n ((event.clientX - containerLeft) / containerWidth) this.max,\n this.precision\n );\n if (this.isRtl) num = this.max + this.precision - num;\n\n return clamp(num, 0, this.max);\n }\n\n private roundToPrecision(numberToRound: number, precision = 0.5) {\n const multiplier = 1 / precision;\n return Math.ceil(numberToRound * multiplier) / multiplier;\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n const newValue = this.getValueFromMousePosition(event);\n this.value = newValue === this.value ? 0 : newValue;\n this.isHovering = false;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n if (event.key === 'ArrowLeft') {\n const decrement = event.shiftKey ? 1 : this.precision;\n this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n event.preventDefault();\n }\n\n if (event.key === 'ArrowRight') {\n const increment = event.shiftKey ? 1 : this.precision;\n this.value = this.roundToPrecision(\n Math.min(this.max, this.value + increment)\n );\n event.preventDefault();\n }\n\n if (event.key === 'Home') {\n this.value = 0;\n event.preventDefault();\n }\n\n if (event.key === 'End') {\n this.value = this.max;\n event.preventDefault();\n }\n };\n\n private handleMouseEnter = () => {\n this.isHovering = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovering = false;\n };\n\n private handleFocus = () => {\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.nanoBlur.emit();\n };\n\n private handleMouseMove = (event: MouseEvent) => {\n this.hoverValue = this.getValueFromMousePosition(event);\n };\n\n private clip(displayValue: number) {\n if (!this.rating) return;\n const tw = this.rating.getBoundingClientRect().width;\n if (this.isRtl)\n return `rect(0, ${tw}px, 2em, ${\n tw - (tw / 100) * ((displayValue / this.max) * 100)\n }px)`;\n return `rect(0, ${\n (tw / 100) * ((displayValue / this.max) * 100)\n }px, 2em, 0)`;\n }\n\n componentDidLoad() {\n focusVisible.observe(this.rating);\n setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n }\n\n connectedCallback() {\n this.isRtl =\n this.host.dir === 'rtl' \|\| this.host.ownerDocument.dir === 'rtl';\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.rating);\n }\n\n render() {\n this.isRtl =\n this.host.dir === 'rtl' \|\| this.host.ownerDocument.dir === 'rtl';\n\n const counter = Array.from(Array(this.max).keys());\n\n let displayValue = 0;\n if (this.disabled \|\| this.readonly) {\n displayValue = this.value;\n } else {\n displayValue = this.isHovering ? this.hoverValue : this.value;\n }\n\n return (\n <Host class=\"nano-rating\">\n <div class=\"rating-wrap\">\n <div\n dir={this.isRtl ? 'rtl' : null}\n ref={(el) => (this.rating = el)}\n part=\"base\"\n class={{\n rating: true,\n 'rating--readonly': this.readonly,\n 'rating--disabled': this.disabled,\n }}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-readonly={this.readonly ? 'true' : 'false'}\n aria-valuenow={this.value}\n aria-valuemin={0}\n aria-valuemax={this.max}\n tabIndex={this.disabled ? -1 : 0}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onMouseMove={this.handleMouseMove}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n >\n <span class=\"rating__symbols rating__symbols--inactive\">\n {counter.map((index) => (\n <span\n class={{\n rating__symbol: true,\n 'rating__symbol--hover':\n this.isHovering && Math.ceil(displayValue) === index + 1,\n }}\n // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n onMouseEnter={this.handleMouseEnter}\n innerHTML={this.symbol(index + 1)}\n />\n ))}\n </span>\n\n <span\n ref={(span) => (this.indicator = span)}\n class=\"rating__symbols rating__symbols--indicator\"\n style={{\n clip: this.clip(displayValue),\n }}\n >\n {counter.map((index) => (\n <span\n class={{\n rating__symbol: true,\n 'rating__symbol--hover':\n this.isHovering && Math.ceil(displayValue) === index + 1,\n }}\n innerHTML={this.symbol(index + 1)}\n />\n ))}\n </span>\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n disabled={this.disabled \|\| this.readonly}\n />\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/resize-observe/resize-observe.js CHANGED Viewed

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, Host, readTask, } from "@stencil/core";
+import { Host, readTask, } from "@stencil/core";
+import { h } from "../../utils/renderer";
 /**
  * A Resize-Observer utility component.
  * Takes a string list of sizes and optional class-names.
@@ -228,7 +229,7 @@ export class ResizeObserve {
             this.ro.disconnect();
     }
     render() {
-        return (h(Host, { key: '09a3b9f8a724f07ba84eec73378725dec973773a' }, h("slot", { key: '2f990e9c1ee91e1392a370d07ff988cb3abc3e42' }), !!this.notifyContentFit &&
+        return (h(Host, { key: 'b34bd4742548d018aeae0f3ab98e85611287ec07', class: "nano-resize-observe" }, h("slot", { key: 'f9220f1781302bed070ba24f297dfa168fdf0549' }), !!this.notifyContentFit &&
             (this.contentFitX !== null || this.contentFitY !== null) && [
             this.contentFitX ? (h("slot", { name: "content-fit-x" })) : (h("slot", { name: "content-nofit-x" })),
             this.contentFitY ? (h("slot", { name: "content-fit-y" })) : (h("slot", { name: "content-nofit-y" })),

package/dist/collection/components/resize-observe/resize-observe.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"resize-observe.js","sourceRoot":"","sources":["../../../../src/components/resize-observe/resize-observe.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Host,\n State,\n Watch,\n ComponentInterface,\n Event,\n EventEmitter,\n readTask,\n} from '@stencil/core';\nimport { ResizeStateChangeEventDetail } from './resize-observe-interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n h: Map<number, ResizeObserverState>;\n w: Map<number, ResizeObserverState>;\n}\n\n/*\n A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names.\n * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * Additionally, can fire events when content no-longer fits within the element.\n * @slot - Main slot for any content.\n * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n * @slot content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n /\n@Component({\n tag: 'nano-resize-observe',\n styles: `:host { display: block }`,\n shadow: true,\n})\nexport class ResizeObserve implements ComponentInterface {\n private ro: ResizeObserver;\n private appliedStates: StateMaps;\n private isReady = false;\n\n @Element() host: HTMLNanoResizeObserveElement;\n @State() currentWidth: number;\n @State() currentHeight: number;\n @State() classNames: string[] = [];\n @State() contentFitX = null;\n @State() contentFitY = null;\n\n @Watch('classNames')\n classNameChange() {\n this.host.className = this.classNames.join(' ');\n if (!this.isReady && this.classNames.includes('is-ready')) {\n this.isReady = true;\n this.nanoResizeObserverReady.emit();\n }\n }\n\n /* Fire `nanoResizeContentFitChange` events notifying\n * whether content currently fits or does not on the x, y or both axis'.\n * Also makes the `content-fit-...` slots available /\n @Prop() notifyContentFit: 'x' \| 'y' \| 'xy';\n\n /* string list of sizes and optional class-names.\n * Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n * Format: `states=\"800w, 300h class1 class2\"` /\n @Prop() states: string;\n\n @Watch('states')\n newStatesProp() {\n this.statesChanged();\n }\n\n /* A resize break point is switched on or off /\n @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n /* Fires after the initial loading and assessment /\n @Event() nanoResizeObserverReady!: EventEmitter<void>;\n\n /* Fires when the content either begins or stops fitting.\n * Will only work when `notifyContentFit` is set. /\n @Event() nanoResizeContentFitChange!: EventEmitter<{\n x: boolean;\n y: boolean;\n }>;\n\n /* Fires after any resizing */\n @Event() nanoResize!: EventEmitter<ResizeObserverEntry[]>;\n\n @Watch('currentHeight')\n @Watch('currentWidth')\n dimensionChanged() {\n this.assessChanges();\n }\n\n @Watch('states')\n statesChanged() {\n if (!this.states) return;\n\n const toBpDir = (bpDir: string) => {\n const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n };\n this.appliedStates = { h: new Map(), w: new Map() };\n\n // parse state string\n this.states.split(',').map((st) => {\n st = st.trim();\n if (st.includes(' ')) {\n const [key, ...classes] = st.split(' ');\n const { bp, dir } = toBpDir(key);\n this.appliedStates[dir as keyof StateMaps].set(bp, {\n states: classes,\n applied: false,\n });\n } else {\n const { bp, dir } = toBpDir(st);\n this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n }\n });\n }\n\n private assesContentFit() {\n if (!this.notifyContentFit) return;\n\n const findNonContentsEle = (ele: Element) => {\n if (window.getComputedStyle(ele).display !== 'contents') return ele;\n\n const recurse = (e: Element): Element \| null => {\n return Array.from(e.children).find((cEle: HTMLElement) => {\n if (window.getComputedStyle(cEle).display !== 'contents') return cEle;\n recurse(cEle);\n });\n };\n return recurse(ele);\n };\n\n let didChange = false;\n const measureEle = findNonContentsEle(this.host.firstElementChild);\n\n if (measureEle) {\n if (this.notifyContentFit && this.notifyContentFit.includes('x')) {\n if (\n this.currentWidth < measureEle.scrollWidth &&\n this.contentFitX !== false\n ) {\n didChange = true;\n this.contentFitX = false;\n } else if (\n this.currentWidth >= measureEle.scrollWidth &&\n this.contentFitX !== true\n ) {\n didChange = true;\n this.contentFitX = true;\n }\n }\n\n if (this.notifyContentFit && this.notifyContentFit.includes('y')) {\n if (\n this.currentHeight < measureEle.scrollHeight &&\n this.contentFitY !== false\n ) {\n didChange = true;\n this.contentFitY = false;\n } else if (\n this.currentHeight >= measureEle.scrollHeight &&\n this.contentFitY !== true\n ) {\n didChange = true;\n this.contentFitY = true;\n }\n }\n\n if (didChange) {\n this.nanoResizeContentFitChange.emit({\n x: this.contentFitX,\n y: this.contentFitY,\n });\n }\n }\n }\n\n private assessChanges = () => {\n if (!this.currentWidth && !this.currentHeight) return;\n readTask(() => this.assesContentFit());\n\n if (!this.states \|\| !this.appliedStates) return;\n\n const changedStates: StateMaps = { h: new Map(), w: new Map() };\n let hasChanged = false;\n\n Object.keys(this.appliedStates).forEach((dimType) => {\n let dim: number;\n if (dimType === 'h') dim = this.currentHeight;\n else dim = this.currentWidth;\n\n this.appliedStates[dimType].forEach(\n (state: ResizeObserverState, bp: number) => {\n if (dim >= bp && state.applied === false) {\n state.applied = true;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n } else if (dim < bp && state.applied === true) {\n state.applied = false;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n }\n }\n );\n });\n if (hasChanged) this.applyChanges(changedStates);\n else if (!this.classNames.includes('is-ready'))\n this.classNames = [...this.classNames, 'is-ready'];\n };\n\n private applyChanges(changes: StateMaps) {\n if (!this.states) return;\n\n let classNames = [...this.classNames];\n Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n changes[dimType].forEach((state) => {\n if (!state.states) return;\n state.states.map((st) => {\n if (state.applied) {\n classNames.push(st);\n classNames = classNames.filter((cl) => cl !== 'not-' + st);\n } else {\n classNames.push('not-' + st);\n classNames = classNames.filter((cl) => cl !== st);\n }\n });\n });\n });\n this.classNames = ['is-ready', ...classNames];\n this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n }\n\n private toSimpleObj(stateMaps: StateMaps) {\n const retObj = {};\n Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n retObj[bp + dimType] = state.applied;\n });\n });\n return retObj;\n }\n\n private attachRO() {\n if (!window['ResizeObserver']) return;\n\n this.ro = new ResizeObserver((ro) => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = Math.ceil(width);\n this.currentHeight = Math.ceil(height);\n this.nanoResize.emit(ro);\n });\n this.ro.observe(this.host);\n }\n\n componentWillLoad() {\n this.classNames = Array.from(this.host.classList);\n\n this.statesChanged();\n // set all class as 'not-' by deafult\n this.applyChanges(this.appliedStates);\n\n if (!this.currentWidth && !this.currentHeight) {\n readTask(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = Math.ceil(width);\n this.currentHeight = Math.ceil(height);\n });\n } else {\n this.assessChanges();\n }\n }\n\n connectedCallback() {\n if (!this.ro) this.attachRO();\n }\n\n disconnectedCallback() {\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host>\n <slot />\n {!!this.notifyContentFit &&\n (this.contentFitX !== null \|\| this.contentFitY !== null) && [\n this.contentFitX ? (\n <slot name=\"content-fit-x\" />\n ) : (\n <slot name=\"content-nofit-x\" />\n ),\n this.contentFitY ? (\n <slot name=\"content-fit-y\" />\n ) : (\n <slot name=\"content-nofit-y\" />\n ),\n ]}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"resize-observe.js","sourceRoot":"","sources":["../../../../src/components/resize-observe/resize-observe.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,KAAK,EACL,KAAK,EAEL,KAAK,EAEL,QAAQ,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AASzC;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,aAAa;IAChB,EAAE,CAAiB;IACnB,aAAa,CAAY;IACzB,OAAO,GAAG,KAAK,CAAC;IAEb,IAAI,CAA+B;IACrC,YAAY,CAAS;IACrB,aAAa,CAAS;IACtB,UAAU,GAAa,EAAE,CAAC;IAC1B,WAAW,GAAG,IAAI,CAAC;IACnB,WAAW,GAAG,IAAI,CAAC;IAG5B,eAAe;QACb,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAChD,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;YAC1D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,CAAC;QACtC,CAAC;IACH,CAAC;IAED;;0DAEsD;IAC9C,gBAAgB,CAAmB;IAE3C;;qDAEiD;IACzC,MAAM,CAAS;IAGvB,aAAa;QACX,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,iDAAiD;IACxC,qBAAqB,CAA8C;IAE5E,qDAAqD;IAC5C,uBAAuB,CAAsB;IAEtD;wDACoD;IAC3C,0BAA0B,CAGhC;IAEH,+BAA+B;IACtB,UAAU,CAAuC;IAI1D,gBAAgB;QACd,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAGD,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO;QAEzB,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE;YAChC,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;YAChE,OAAO,EAAE,EAAE,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QACzD,CAAC,CAAC;QACF,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,CAAC;QAEpD,qBAAqB;QACrB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE;YAChC,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC;YACf,IAAI,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBACrB,MAAM,CAAC,GAAG,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACxC,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;gBACjC,IAAI,CAAC,aAAa,CAAC,GAAsB,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE;oBACjD,MAAM,EAAE,OAAO;oBACf,OAAO,EAAE,KAAK;iBACf,CAAC,CAAC;YACL,CAAC;iBAAM,CAAC;gBACN,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;gBAChC,IAAI,CAAC,aAAa,CAAC,GAAsB,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;YACzE,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAAE,OAAO;QAEnC,MAAM,kBAAkB,GAAG,CAAC,GAAY,EAAE,EAAE;YAC1C,IAAI,MAAM,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,OAAO,KAAK,UAAU;gBAAE,OAAO,GAAG,CAAC;YAEpE,MAAM,OAAO,GAAG,CAAC,CAAU,EAAkB,EAAE;gBAC7C,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,IAAiB,EAAE,EAAE;oBACvD,IAAI,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,UAAU;wBAAE,OAAO,IAAI,CAAC;oBACtE,OAAO,CAAC,IAAI,CAAC,CAAC;gBAChB,CAAC,CAAC,CAAC;YACL,CAAC,CAAC;YACF,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC;QACtB,CAAC,CAAC;QAEF,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,MAAM,UAAU,GAAG,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAEnE,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBACjE,IACE,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,WAAW;oBAC1C,IAAI,CAAC,WAAW,KAAK,KAAK,EAC1B,CAAC;oBACD,SAAS,GAAG,IAAI,CAAC;oBACjB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;gBAC3B,CAAC;qBAAM,IACL,IAAI,CAAC,YAAY,IAAI,UAAU,CAAC,WAAW;oBAC3C,IAAI,CAAC,WAAW,KAAK,IAAI,EACzB,CAAC;oBACD,SAAS,GAAG,IAAI,CAAC;oBACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBAC1B,CAAC;YACH,CAAC;YAED,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBACjE,IACE,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,YAAY;oBAC5C,IAAI,CAAC,WAAW,KAAK,KAAK,EAC1B,CAAC;oBACD,SAAS,GAAG,IAAI,CAAC;oBACjB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;gBAC3B,CAAC;qBAAM,IACL,IAAI,CAAC,aAAa,IAAI,UAAU,CAAC,YAAY;oBAC7C,IAAI,CAAC,WAAW,KAAK,IAAI,EACzB,CAAC;oBACD,SAAS,GAAG,IAAI,CAAC;oBACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBAC1B,CAAC;YACH,CAAC;YAED,IAAI,SAAS,EAAE,CAAC;gBACd,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC;oBACnC,CAAC,EAAE,IAAI,CAAC,WAAW;oBACnB,CAAC,EAAE,IAAI,CAAC,WAAW;iBACpB,CAAC,CAAC;YACL,CAAC;QACH,CAAC;IACH,CAAC;IAEO,aAAa,GAAG,GAAG,EAAE;QAC3B,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,aAAa;YAAE,OAAO;QACtD,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;QAEvC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,aAAa;YAAE,OAAO;QAEhD,MAAM,aAAa,GAAc,EAAE,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,CAAC;QAChE,IAAI,UAAU,GAAG,KAAK,CAAC;QAEvB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAClD,IAAI,GAAW,CAAC;YAChB,IAAI,OAAO,KAAK,GAAG;gBAAE,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC;;gBACzC,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC;YAE7B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,CACjC,CAAC,KAA0B,EAAE,EAAU,EAAE,EAAE;gBACzC,IAAI,GAAG,IAAI,EAAE,IAAI,KAAK,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;oBACzC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;oBACrB,aAAa,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;oBACtC,UAAU,GAAG,IAAI,CAAC;gBACpB,CAAC;qBAAM,IAAI,GAAG,GAAG,EAAE,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;oBAC9C,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;oBACtB,aAAa,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;oBACtC,UAAU,GAAG,IAAI,CAAC;gBACpB,CAAC;YACH,CAAC,CACF,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,IAAI,UAAU;YAAE,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;aAC5C,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC;YAC5C,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;IACvD,CAAC,CAAC;IAEM,YAAY,CAAC,OAAkB;QACrC,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO;QAEzB,IAAI,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,OAAwB,EAAE,EAAE;YACxD,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBACjC,IAAI,CAAC,KAAK,CAAC,MAAM;oBAAE,OAAO;gBAC1B,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE;oBACtB,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;wBAClB,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;wBACpB,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,MAAM,GAAG,EAAE,CAAC,CAAC;oBAC7D,CAAC;yBAAM,CAAC;wBACN,UAAU,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;wBAC7B,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;oBACpD,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,GAAG,CAAC,UAAU,EAAE,GAAG,UAAU,CAAC,CAAC;QAC9C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7D,CAAC;IAEO,WAAW,CAAC,SAAoB;QACtC,MAAM,MAAM,GAAG,EAAE,CAAC;QAClB,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,OAAwB,EAAE,EAAE;YAC1D,SAAS,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,KAA0B,EAAE,EAAU,EAAE,EAAE;gBACpE,MAAM,CAAC,EAAE,GAAG,OAAO,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC;YACvC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,OAAO,MAAM,CAAC;IAChB,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;YAAE,OAAO;QAEtC,IAAI,CAAC,EAAE,GAAG,IAAI,cAAc,CAAC,CAAC,EAAE,EAAE,EAAE;YAClC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC5D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACrC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACvC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC3B,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAElD,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,qCAAqC;QACrC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAEtC,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YAC9C,QAAQ,CAAC,GAAG,EAAE;gBACZ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBAC5D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACrC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACzC,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,EAAE;YAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;IAChC,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,EAAE;YAAE,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,qBAAqB;YAC/B,8DAAQ;YACP,CAAC,CAAC,IAAI,CAAC,gBAAgB;gBACtB,CAAC,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,IAAI;gBAC1D,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACjB,YAAM,IAAI,EAAC,eAAe,GAAG,CAC9B,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAChC;gBACD,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACjB,YAAM,IAAI,EAAC,eAAe,GAAG,CAC9B,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAChC;aACF,CACE,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Prop,\n Element,\n Host,\n State,\n Watch,\n ComponentInterface,\n Event,\n EventEmitter,\n readTask,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { ResizeStateChangeEventDetail } from './resize-observe-interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n h: Map<number, ResizeObserverState>;\n w: Map<number, ResizeObserverState>;\n}\n\n/*\n A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names.\n * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * Additionally, can fire events when content no-longer fits within the element.\n * @slot - Main slot for any content.\n * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n * @slot content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n /\n@Component({\n tag: 'nano-resize-observe',\n styles: `:host { display: block }`,\n shadow: true,\n})\nexport class ResizeObserve implements ComponentInterface {\n private ro: ResizeObserver;\n private appliedStates: StateMaps;\n private isReady = false;\n\n @Element() host: HTMLNanoResizeObserveElement;\n @State() currentWidth: number;\n @State() currentHeight: number;\n @State() classNames: string[] = [];\n @State() contentFitX = null;\n @State() contentFitY = null;\n\n @Watch('classNames')\n classNameChange() {\n this.host.className = this.classNames.join(' ');\n if (!this.isReady && this.classNames.includes('is-ready')) {\n this.isReady = true;\n this.nanoResizeObserverReady.emit();\n }\n }\n\n /* Fire `nanoResizeContentFitChange` events notifying\n * whether content currently fits or does not on the x, y or both axis'.\n * Also makes the `content-fit-...` slots available /\n @Prop() notifyContentFit: 'x' \| 'y' \| 'xy';\n\n /* string list of sizes and optional class-names.\n * Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n * Format: `states=\"800w, 300h class1 class2\"` /\n @Prop() states: string;\n\n @Watch('states')\n newStatesProp() {\n this.statesChanged();\n }\n\n /* A resize break point is switched on or off /\n @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n /* Fires after the initial loading and assessment /\n @Event() nanoResizeObserverReady!: EventEmitter<void>;\n\n /* Fires when the content either begins or stops fitting.\n * Will only work when `notifyContentFit` is set. /\n @Event() nanoResizeContentFitChange!: EventEmitter<{\n x: boolean;\n y: boolean;\n }>;\n\n /* Fires after any resizing */\n @Event() nanoResize!: EventEmitter<ResizeObserverEntry[]>;\n\n @Watch('currentHeight')\n @Watch('currentWidth')\n dimensionChanged() {\n this.assessChanges();\n }\n\n @Watch('states')\n statesChanged() {\n if (!this.states) return;\n\n const toBpDir = (bpDir: string) => {\n const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n };\n this.appliedStates = { h: new Map(), w: new Map() };\n\n // parse state string\n this.states.split(',').map((st) => {\n st = st.trim();\n if (st.includes(' ')) {\n const [key, ...classes] = st.split(' ');\n const { bp, dir } = toBpDir(key);\n this.appliedStates[dir as keyof StateMaps].set(bp, {\n states: classes,\n applied: false,\n });\n } else {\n const { bp, dir } = toBpDir(st);\n this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n }\n });\n }\n\n private assesContentFit() {\n if (!this.notifyContentFit) return;\n\n const findNonContentsEle = (ele: Element) => {\n if (window.getComputedStyle(ele).display !== 'contents') return ele;\n\n const recurse = (e: Element): Element \| null => {\n return Array.from(e.children).find((cEle: HTMLElement) => {\n if (window.getComputedStyle(cEle).display !== 'contents') return cEle;\n recurse(cEle);\n });\n };\n return recurse(ele);\n };\n\n let didChange = false;\n const measureEle = findNonContentsEle(this.host.firstElementChild);\n\n if (measureEle) {\n if (this.notifyContentFit && this.notifyContentFit.includes('x')) {\n if (\n this.currentWidth < measureEle.scrollWidth &&\n this.contentFitX !== false\n ) {\n didChange = true;\n this.contentFitX = false;\n } else if (\n this.currentWidth >= measureEle.scrollWidth &&\n this.contentFitX !== true\n ) {\n didChange = true;\n this.contentFitX = true;\n }\n }\n\n if (this.notifyContentFit && this.notifyContentFit.includes('y')) {\n if (\n this.currentHeight < measureEle.scrollHeight &&\n this.contentFitY !== false\n ) {\n didChange = true;\n this.contentFitY = false;\n } else if (\n this.currentHeight >= measureEle.scrollHeight &&\n this.contentFitY !== true\n ) {\n didChange = true;\n this.contentFitY = true;\n }\n }\n\n if (didChange) {\n this.nanoResizeContentFitChange.emit({\n x: this.contentFitX,\n y: this.contentFitY,\n });\n }\n }\n }\n\n private assessChanges = () => {\n if (!this.currentWidth && !this.currentHeight) return;\n readTask(() => this.assesContentFit());\n\n if (!this.states \|\| !this.appliedStates) return;\n\n const changedStates: StateMaps = { h: new Map(), w: new Map() };\n let hasChanged = false;\n\n Object.keys(this.appliedStates).forEach((dimType) => {\n let dim: number;\n if (dimType === 'h') dim = this.currentHeight;\n else dim = this.currentWidth;\n\n this.appliedStates[dimType].forEach(\n (state: ResizeObserverState, bp: number) => {\n if (dim >= bp && state.applied === false) {\n state.applied = true;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n } else if (dim < bp && state.applied === true) {\n state.applied = false;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n }\n }\n );\n });\n if (hasChanged) this.applyChanges(changedStates);\n else if (!this.classNames.includes('is-ready'))\n this.classNames = [...this.classNames, 'is-ready'];\n };\n\n private applyChanges(changes: StateMaps) {\n if (!this.states) return;\n\n let classNames = [...this.classNames];\n Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n changes[dimType].forEach((state) => {\n if (!state.states) return;\n state.states.map((st) => {\n if (state.applied) {\n classNames.push(st);\n classNames = classNames.filter((cl) => cl !== 'not-' + st);\n } else {\n classNames.push('not-' + st);\n classNames = classNames.filter((cl) => cl !== st);\n }\n });\n });\n });\n this.classNames = ['is-ready', ...classNames];\n this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n }\n\n private toSimpleObj(stateMaps: StateMaps) {\n const retObj = {};\n Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n retObj[bp + dimType] = state.applied;\n });\n });\n return retObj;\n }\n\n private attachRO() {\n if (!window['ResizeObserver']) return;\n\n this.ro = new ResizeObserver((ro) => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = Math.ceil(width);\n this.currentHeight = Math.ceil(height);\n this.nanoResize.emit(ro);\n });\n this.ro.observe(this.host);\n }\n\n componentWillLoad() {\n this.classNames = Array.from(this.host.classList);\n\n this.statesChanged();\n // set all class as 'not-' by deafult\n this.applyChanges(this.appliedStates);\n\n if (!this.currentWidth && !this.currentHeight) {\n readTask(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = Math.ceil(width);\n this.currentHeight = Math.ceil(height);\n });\n } else {\n this.assessChanges();\n }\n }\n\n connectedCallback() {\n if (!this.ro) this.attachRO();\n }\n\n disconnectedCallback() {\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host class=\"nano-resize-observe\">\n <slot />\n {!!this.notifyContentFit &&\n (this.contentFitX !== null \|\| this.contentFitY !== null) && [\n this.contentFitX ? (\n <slot name=\"content-fit-x\" />\n ) : (\n <slot name=\"content-nofit-x\" />\n ),\n this.contentFitY ? (\n <slot name=\"content-fit-y\" />\n ) : (\n <slot name=\"content-nofit-y\" />\n ),\n ]}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/select/select.css CHANGED Viewed

@@ -442,10 +442,6 @@ label.visually-hide,
   color: var(--nano-color-base);
 }
-:host-context(nano-item:not(.item-label)) {
-  --padding-start: 0;
-}
 :host([disabled]:not([disabled=false])) * {
   pointer-events: none !important;
 }
@@ -654,7 +650,7 @@ select {
   inset-block-start: 0;
   font-size: 1em;
 }
-.select__multi-value-remove nano-icon {
+.select__multi-value-remove .nano-icon {
   --color: var(--multi-input-value-text-color);
 }

package/dist/collection/components/select/select.js CHANGED Viewed

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { Build, Host, h, } from "@stencil/core";
+import { Build, Host, } from "@stencil/core";
+import { h } from "../../utils/renderer";
 import { getActiveElement } from "../../utils/active-element";
 import { closestElement } from "../../utils/dom";
 import { createColorClasses } from "../../utils/theme";
@@ -705,7 +706,7 @@ export class Select {
             disabled,
             clearControl: this.clearSelect,
         }))(this);
-        return (h(Host, { key: 'c502d4583477fe519d887218489a85dadc646b54', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: '536c9704da65bc7e7415e679382384c076696d51', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
                 ...createColorClasses(this.color),
                 'has-value': !!this.value.length || !!this.inputSearchVal.length,
                 'has-focus': this.hasFocus,
@@ -716,15 +717,16 @@ export class Select {
                 'has-multiple': this.multiple,
                 'has-clr-btn': this.clearSelect,
                 masked: this.mask,
-            } }, h(FormControlWrap, { key: '3f49832dcd734add1f1f0d0b3c2eb019265e77a6', ...wrapOptions }, h(FormControl, { key: '76c78e814fd758013ca71bcbfb52e85c590d3fe2', ...controlOptions, onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }, this.multiple && (h("div", { key: '221256f2fa8a23e0cca276a0a9d52e8217a4f25f', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
-            this.mask && (h("div", { key: '62f2382db6a70c475a472652b5e6782410597ce7', class: "select__mask" }, this.getLabel(this.value))),
-            h("input", { key: 'd6ad0f054432a260fec28d42e8b9857ac3940b15', id: this.selectId, class: "select__native-input", ref: (input) => (this.inputCtrl = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
-        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '35f1f561b12baf5ac99d31f4b023ae560241ffdb', onNanoOptionsUpdated: this.setOptions, ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selctMulti' : 'select', onNanoSelect: this.setValue, onNanoDeselect: (e) => {
+                'nano-select': true,
+            } }, h(FormControlWrap, { key: 'c7fd0db291f3362fcdfca52f443899260a284490', ...wrapOptions }, h(FormControl, { key: '9ea819ba91334497b7ef3e5fddf9308acc1aded9', ...controlOptions, onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }, this.multiple && (h("div", { key: 'f467f7b65f6edb3e98a5dcd99a4a4b275152b323', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+            this.mask && (h("div", { key: '9f993b544220f7be26b9ed9d33fe1516c7652da5', class: "select__mask" }, this.getLabel(this.value))),
+            h("input", { key: 'f3b4f85878ac17e3b9701a217a69e96bb68ea5e0', id: this.selectId, class: "select__native-input", ref: (input) => (this.inputCtrl = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
+        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '52a43b32040be9aad63e1f6975e0ab9e9202aacd', onNanoOptionsUpdated: this.setOptions, ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selctMulti' : 'select', onNanoSelect: this.setValue, onNanoDeselect: (e) => {
                 e.preventDefault();
                 this.removeValue(e.detail.value);
             }, options: this._options.length ? this._options : undefined }, this.allowCustomValues &&
             this.multiple &&
-            !!this.inputSearchVal && (h("nano-option", { key: '72f666535c2c4a5dcf87f21a25b5fbdf18ac3bd6', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '45b9dd148ffffcf7c3fa971d031ae80c7d9c8ba1', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '3c8708ac47ed4b000d8cc087c6cffddd058c7493' }))), h("select", { key: 'd2f28c4bc3f6bc5495a9f3df6b19dc4c99778543', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
+            !!this.inputSearchVal && (h("nano-option", { key: '8c051e25608cb6790bde692084c965bc064db0fa', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '8f8b1abae976d352d71f3e74c9636ffc10800326', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '139819ef432722a337fe9c9bb2c3713f8e1d4130' }))), h("select", { key: '15f20b80edea9e26b60c3c6d494d928e4cc479cc', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
             this.valArray.map((val) => {
                 return (h("option", { value: val, selected: true }, val));
             }), !this.allowCustomValues &&