@zywave/zui-slider 4.2.0-pre.0 → 4.2.0-pre.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +6 -0
- package/dist/zui-slider.d.ts +1 -0
- package/dist/zui-slider.js +3 -0
- package/dist/zui-slider.js.map +1 -1
- package/package.json +3 -3
- package/src/zui-slider.ts +4 -0
package/dist/zui-slider.d.ts
CHANGED
|
@@ -23,6 +23,7 @@ import { ZuiFormAssociatedElement } from '@zywave/zui-base';
|
|
|
23
23
|
*/
|
|
24
24
|
export declare class ZuiSlider extends ZuiFormAssociatedElement {
|
|
25
25
|
#private;
|
|
26
|
+
protected get _focusControlSelector(): string;
|
|
26
27
|
protected get _formValue(): string;
|
|
27
28
|
protected formResetCallback(): void;
|
|
28
29
|
get value(): string;
|
package/dist/zui-slider.js
CHANGED
package/dist/zui-slider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-slider.js","sourceRoot":"","sources":["../src/zui-slider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,OAAO,SAAU,SAAQ,wBAAwB;IAAvD;;QASE,kBAAa,GAAG,GAAG,WAAW,GAAG,CAAC,EAAE,CAAC;QAErC,WAAM,GAAG,GAAG,WAAW,GAAG,CAAC,EAAE,CAAC;QAmB9B;;WAEG;QACyB,QAAG,GAAG,CAAC,CAAC;QAEpC;;WAEG;QAC2C,QAAG,GAAG,GAAG,CAAC;QAExD;;WAEG;QACyB,SAAI,GAAG,CAAC,CAAC;QAErC;;WAEG;QACgD,WAAM,GAAG,KAAK,CAAC;IAsFpE,CAAC;IArIC,IAAc,UAAU;QACtB,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAES,iBAAiB;QACzB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;IAClC,CAAC;IAED,aAAa,CAAwB;IAErC,MAAM,CAAwB;IAG9B,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,KAAK,CAAC,GAAG;QACX,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,GAAG,GAAG,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;QAClC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;IAED,IAAI,aAAa;QACf,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC;IAsBD,IAAI,QAAQ;QACV,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;IACzE,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,0GAA0G;QAC1G,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC;QACrD,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC;QACjD,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC;QAEjD,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAEhD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IACvC,CAAC;IAED,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC;QAC5E,MAAM,MAAM,GAAG;YACb,UAAU,EAAE,6BAA6B,aAAa,QAAQ,aAAa,IAAI,IAAI,CAAC,QAAQ,0BAA0B,IAAI,CAAC,QAAQ,8BAA8B;SAClK,CAAC;QACF,OAAO,IAAI,CAAA;gBACC,QAAQ,CAAC,MAAM,CAAC;;kBAEd,IAAI,CAAC,KAAK;gBACZ,IAAI,CAAC,GAAG;gBACR,IAAI,CAAC,GAAG;iBACP,IAAI,CAAC,IAAI;qBACL,IAAI,CAAC,QAAQ;kBAChB,IAAI,CAAC,QAAQ;mBACZ,IAAI,CAAC,SAAS;UACvB,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IAC7B,CAAC;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO,IAAI,CAAA,EAAE,CAAC;QAChB,CAAC;QACD,MAAM,WAAW,GAAG,kCAAkC,IAAI,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC;QAC5E,MAAM,MAAM,GAAG;YACb,IAAI,EAAE,QAAQ,IAAI,CAAC,QAAQ,OAAO,WAAW,cAAc;SAC5D,CAAC;QACF,OAAO,IAAI,CAAA,eAAe,QAAQ,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,SAAS,CAAC;IACpE,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;IACpD,CAAC;IAEO,SAAS;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACvF,CAAC;IAEO,iBAAiB,CAAC,KAAsB,EAAE,GAA4B,EAAE,GAA4B;QAC1G,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;YACjB,OAAO,KAAK,CAAC;QACf,CAAC;QACD,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC;QACtB,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC;QAEtB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;QACD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;QACxB,CAAC;QACD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;QACxB,CAAC;QAED,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;YAChB,KAAK,GAAG,GAAG,CAAC;QACd,CAAC;aAAM,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;YACvB,KAAK,GAAG,GAAG,CAAC;QACd,CAAC;QAED,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;IAC1B,CAAC;CACF;AAxHC;IADC,QAAQ,EAAE;sCAGV;AAiB2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAS;AAKU;IAA7C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;sCAAW;AAK5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAU;AAKc;IAAlD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;yCAAgB;AAwFpE,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC","sourcesContent":["import { ZuiFormAssociatedElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { style } from './zui-slider-css.js';\n\nconst DEFAULT_MAX = 100;\n\n/**\n * A range form control for choosing values along a slider.\n * @element zui-slider\n *\n * @attr {string | null} [name=null] - The name of this element that is associated with form submission\n * @attr {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @attr {boolean} [readonly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @attr {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @attr {number} [value=50] - Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n *\n * @prop {string | null} [name=null] - The name of this element that is associated with form submission\n * @prop {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @prop {boolean} [readOnly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @prop {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @prop {number} [valueAsNumber=50] - Returns the value of the element, interpreted as one of the following, in order: A number, NaN if conversion is impossible\n * @prop {string} [value='50'] - Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @prop {number} [progress=50] - Determines visual placement of the slider thumb along the line\n *\n * @cssprop [--zui-slider-thumb-size=1.875rem (30px)] - Point of contact to grab and slide to change value\n *\n * @event {CustomEvent} change - Fires when value changes, details contain `value`\n */\nexport class ZuiSlider extends ZuiFormAssociatedElement {\n protected get _formValue() {\n return this.value;\n }\n\n protected formResetCallback() {\n this.value = this.#defaultValue;\n }\n\n #defaultValue = `${DEFAULT_MAX / 2}`;\n\n #value = `${DEFAULT_MAX / 2}`;\n\n @property()\n get value() {\n return this.#value;\n }\n\n set value(val) {\n const oldVal = this.#value;\n val = this._ensureValidValue(val);\n this.#value = val;\n this._setFormValue(this.#value);\n this.requestUpdate('value', oldVal);\n }\n\n get valueAsNumber() {\n return parseFloat(this.#value);\n }\n\n /**\n * Represents the maximum permitted value\n */\n @property({ type: Number }) min = 0;\n\n /**\n * Represents the maximum permitted value\n */\n @property({ type: Number, attribute: 'max' }) max = 100;\n\n /**\n * Represents the stepping interval, used both for user interface and validation purposes\n */\n @property({ type: Number }) step = 0;\n\n /**\n * Represents that this control must be filled in for form submission\n */\n @property({ type: Boolean, attribute: 'no-text' }) noText = false;\n\n get progress() {\n return ((this.valueAsNumber - this.min) / (this.max - this.min)) * 100;\n }\n\n static get styles() {\n return [super.styles, style];\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // we want to go a little faster than LitElement and behave more like native HTML Form Associated Elements\n let value = this.getAttribute('value') ?? this.value;\n const max = this.getAttribute('max') ?? this.max;\n const min = this.getAttribute('min') ?? this.min;\n\n value = this._ensureValidValue(value, min, max);\n\n this.#defaultValue = value;\n this._setFormValue(value.toString());\n }\n\n render() {\n const progressColor = this.disabled ? 'var(--zui-gray)' : 'var(--zui-blue)';\n const styles = {\n background: `linear-gradient(to right, ${progressColor} 0%, ${progressColor} ${this.progress}%, var(--zui-gray-200) ${this.progress}%, var(--zui-gray-200) 100%)`,\n };\n return html`<input\n style=${styleMap(styles)}\n type=\"range\"\n .value=\"${this.value}\"\n .min=\"${this.min}\"\n .max=\"${this.max}\"\n .step=\"${this.step}\"\n ?disabled=\"${this.disabled}\"\n @input=\"${this._onInput}\"\n @change=\"${this._onChange}\"\n />${this._renderText()}`;\n }\n\n private _renderText() {\n if (this.noText) {\n return html``;\n }\n const thumbOffset = `var(--zui-slider-thumb-size) * ${this.progress / 100}`;\n const styles = {\n left: `calc(${this.progress}% - ${thumbOffset} + 0.125rem)`,\n };\n return html`<span style=${styleMap(styles)}>${this.value}</span>`;\n }\n\n private _onInput(e: Event) {\n this.value = (e.target as HTMLInputElement).value;\n }\n\n private _onChange() {\n this.dispatchEvent(new CustomEvent('change', { detail: this.value, bubbles: true }));\n }\n\n private _ensureValidValue(value: string | number, min?: number | string | null, max?: number | string | null) {\n if (value === '') {\n return value;\n }\n min = min ?? this.min;\n max = max ?? this.max;\n\n if (typeof value === 'string') {\n value = parseFloat(value);\n }\n if (typeof min === 'string') {\n min = parseFloat(min);\n }\n if (typeof max === 'string') {\n max = parseFloat(max);\n }\n\n if (value < min) {\n value = min;\n } else if (value > max) {\n value = max;\n }\n\n return value.toString();\n }\n}\n\nwindow.customElements.define('zui-slider', ZuiSlider);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-slider': ZuiSlider;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"zui-slider.js","sourceRoot":"","sources":["../src/zui-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiFormAssociatedElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { style } from './zui-slider-css.js';\n\nconst DEFAULT_MAX = 100;\n\n/**\n * A range form control for choosing values along a slider.\n * @element zui-slider\n *\n * @attr {string | null} [name=null] - The name of this element that is associated with form submission\n * @attr {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @attr {boolean} [readonly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @attr {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @attr {number} [value=50] - Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n *\n * @prop {string | null} [name=null] - The name of this element that is associated with form submission\n * @prop {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @prop {boolean} [readOnly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @prop {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @prop {number} [valueAsNumber=50] - Returns the value of the element, interpreted as one of the following, in order: A number, NaN if conversion is impossible\n * @prop {string} [value='50'] - Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @prop {number} [progress=50] - Determines visual placement of the slider thumb along the line\n *\n * @cssprop [--zui-slider-thumb-size=1.875rem (30px)] - Point of contact to grab and slide to change value\n *\n * @event {CustomEvent} change - Fires when value changes, details contain `value`\n */\nexport class ZuiSlider extends ZuiFormAssociatedElement {\n protected get _focusControlSelector() {\n return 'input';\n }\n\n protected get _formValue() {\n return this.value;\n }\n\n protected formResetCallback() {\n this.value = this.#defaultValue;\n }\n\n #defaultValue = `${DEFAULT_MAX / 2}`;\n\n #value = `${DEFAULT_MAX / 2}`;\n\n @property()\n get value() {\n return this.#value;\n }\n\n set value(val) {\n const oldVal = this.#value;\n val = this._ensureValidValue(val);\n this.#value = val;\n this._setFormValue(this.#value);\n this.requestUpdate('value', oldVal);\n }\n\n get valueAsNumber() {\n return parseFloat(this.#value);\n }\n\n /**\n * Represents the maximum permitted value\n */\n @property({ type: Number }) min = 0;\n\n /**\n * Represents the maximum permitted value\n */\n @property({ type: Number, attribute: 'max' }) max = 100;\n\n /**\n * Represents the stepping interval, used both for user interface and validation purposes\n */\n @property({ type: Number }) step = 0;\n\n /**\n * Represents that this control must be filled in for form submission\n */\n @property({ type: Boolean, attribute: 'no-text' }) noText = false;\n\n get progress() {\n return ((this.valueAsNumber - this.min) / (this.max - this.min)) * 100;\n }\n\n static get styles() {\n return [super.styles, style];\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // we want to go a little faster than LitElement and behave more like native HTML Form Associated Elements\n let value = this.getAttribute('value') ?? this.value;\n const max = this.getAttribute('max') ?? this.max;\n const min = this.getAttribute('min') ?? this.min;\n\n value = this._ensureValidValue(value, min, max);\n\n this.#defaultValue = value;\n this._setFormValue(value.toString());\n }\n\n render() {\n const progressColor = this.disabled ? 'var(--zui-gray)' : 'var(--zui-blue)';\n const styles = {\n background: `linear-gradient(to right, ${progressColor} 0%, ${progressColor} ${this.progress}%, var(--zui-gray-200) ${this.progress}%, var(--zui-gray-200) 100%)`,\n };\n return html`<input\n style=${styleMap(styles)}\n type=\"range\"\n .value=\"${this.value}\"\n .min=\"${this.min}\"\n .max=\"${this.max}\"\n .step=\"${this.step}\"\n ?disabled=\"${this.disabled}\"\n @input=\"${this._onInput}\"\n @change=\"${this._onChange}\"\n />${this._renderText()}`;\n }\n\n private _renderText() {\n if (this.noText) {\n return html``;\n }\n const thumbOffset = `var(--zui-slider-thumb-size) * ${this.progress / 100}`;\n const styles = {\n left: `calc(${this.progress}% - ${thumbOffset} + 0.125rem)`,\n };\n return html`<span style=${styleMap(styles)}>${this.value}</span>`;\n }\n\n private _onInput(e: Event) {\n this.value = (e.target as HTMLInputElement).value;\n }\n\n private _onChange() {\n this.dispatchEvent(new CustomEvent('change', { detail: this.value, bubbles: true }));\n }\n\n private _ensureValidValue(value: string | number, min?: number | string | null, max?: number | string | null) {\n if (value === '') {\n return value;\n }\n min = min ?? this.min;\n max = max ?? this.max;\n\n if (typeof value === 'string') {\n value = parseFloat(value);\n }\n if (typeof min === 'string') {\n min = parseFloat(min);\n }\n if (typeof max === 'string') {\n max = parseFloat(max);\n }\n\n if (value < min) {\n value = min;\n } else if (value > max) {\n value = max;\n }\n\n return value.toString();\n }\n}\n\nwindow.customElements.define('zui-slider', ZuiSlider);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-slider': ZuiSlider;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zywave/zui-slider",
|
|
3
|
-
"version": "4.2.0-pre.
|
|
3
|
+
"version": "4.2.0-pre.1",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
"access": "public"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@zywave/zui-base": "^4.4.0-pre.
|
|
24
|
+
"@zywave/zui-base": "^4.4.0-pre.1"
|
|
25
25
|
},
|
|
26
26
|
"customElements": "dist/custom-elements.json",
|
|
27
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "be9f692297fbee1cf28bf0e38333d392052dd5f7"
|
|
28
28
|
}
|
package/src/zui-slider.ts
CHANGED
|
@@ -29,6 +29,10 @@ const DEFAULT_MAX = 100;
|
|
|
29
29
|
* @event {CustomEvent} change - Fires when value changes, details contain `value`
|
|
30
30
|
*/
|
|
31
31
|
export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
32
|
+
protected get _focusControlSelector() {
|
|
33
|
+
return 'input';
|
|
34
|
+
}
|
|
35
|
+
|
|
32
36
|
protected get _formValue() {
|
|
33
37
|
return this.value;
|
|
34
38
|
}
|