@jumpgroup/jump-design-system 0.3.4 → 0.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/jump-quantity.cjs.entry.js +2 -2
- package/dist/cjs/jump-quantity.cjs.entry.js.map +1 -1
- package/dist/collection/components/jump-quantity/jump-quantity.js +2 -2
- package/dist/collection/components/jump-quantity/jump-quantity.js.map +1 -1
- package/dist/components/jump-quantity.js +2 -2
- package/dist/components/jump-quantity.js.map +1 -1
- package/dist/esm/jump-quantity.entry.js +2 -2
- package/dist/esm/jump-quantity.entry.js.map +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js +1 -1
- package/dist/jump-design-system/{p-4e4cbdaf.entry.js → p-8628896f.entry.js} +2 -2
- package/dist/jump-design-system/{p-4e4cbdaf.entry.js.map → p-8628896f.entry.js.map} +1 -1
- package/package.json +1 -1
|
@@ -62,10 +62,10 @@ const JumpQuantity = class {
|
|
|
62
62
|
}
|
|
63
63
|
render() {
|
|
64
64
|
return (index.h(index.Host, { key: '8dfa03a154994f2875c8e807ee718802ec7c456c', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && index.h("label", { key: '7419fc79da61afc0122305fbb62e36dc822a71a4' }, this.label), index.h("div", { key: '3cf6c104a074519f1c96698bd359176c86d0ee84', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
|
|
65
|
-
index.h("jump-button", { key: '
|
|
65
|
+
index.h("jump-button", { key: 'b0dabd107b4ae730993293c423aefa4e03122212', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'small' }, index.h("jump-icon", { key: '749285f9518b323bbb4a8610e191a2bd4bc92b52', library: "lucide", name: "minus", size: "small" })), index.h("input", { key: '486240097b83c8c6b814cd01a6ef58262e774cd3', ref: (el) => {
|
|
66
66
|
this.inputEl = el;
|
|
67
67
|
}, type: 'number', value: this.value, onInput: (event) => this.handleChange(event), min: this.min, max: this.max, step: this.step, "aria-hasbuttons": this.showButtons }), this.showButtons &&
|
|
68
|
-
index.h("jump-button", { key: '
|
|
68
|
+
index.h("jump-button", { key: 'cc88125f73adf613b60a597e386c5cf8299b2516', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'small' }, index.h("jump-icon", { key: 'd601c6ef113227ee07a15a15684b94865d11bbc8', library: "lucide", name: "plus", size: "small" })))));
|
|
69
69
|
}
|
|
70
70
|
static get formAssociated() { return true; }
|
|
71
71
|
get el() { return index.getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-quantity.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,q5BAAq5B,CAAC;AAC96B,2BAAe,eAAe;;MCOjB,YAAY;;;;;;;;;;;mBAKD,CAAC;;oBAEA,CAAC;qBACA,EAAE;oBACuB,SAAS;uBACb,UAAU;2BACxB,IAAI;;;IAQnC,aAAa,CAAC,QAAQ,EAAE,QAAQ;QAC9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACf,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvC;;;;IAMD,MAAM,QAAQ;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC;KACnB;IAGD,MAAM,KAAK;QACT,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;KACvB;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;KACpD;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;KACjC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACjC;;IAGD,UAAU,CAAC,KAAK;QACd,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;YACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;SACvB;KACF;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,qBAAmB,IAAI,CAAC,WAAW,IACnF,IAAI,CAAC,KAAK,IAAID,sEAAQ,IAAI,CAAC,KAAK,CAAS,EAC1CA,kEAAK,KAAK,EAAE,6BAA6B,IACxC,IAAI,CAAC,WAAW;YACbA,0EAAa,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EACpF,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,
|
|
1
|
+
{"file":"jump-quantity.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,q5BAAq5B,CAAC;AAC96B,2BAAe,eAAe;;MCOjB,YAAY;;;;;;;;;;;mBAKD,CAAC;;oBAEA,CAAC;qBACA,EAAE;oBACuB,SAAS;uBACb,UAAU;2BACxB,IAAI;;;IAQnC,aAAa,CAAC,QAAQ,EAAE,QAAQ;QAC9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACf,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvC;;;;IAMD,MAAM,QAAQ;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC;KACnB;IAGD,MAAM,KAAK;QACT,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;KACvB;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;KACpD;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;KACjC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACjC;;IAGD,UAAU,CAAC,KAAK;QACd,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;YACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;SACvB;KACF;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,qBAAmB,IAAI,CAAC,WAAW,IACnF,IAAI,CAAC,KAAK,IAAID,sEAAQ,IAAI,CAAC,KAAK,CAAS,EAC1CA,kEAAK,KAAK,EAAE,6BAA6B,IACxC,IAAI,CAAC,WAAW;YACbA,0EAAa,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EACpF,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,IACzCA,wEAAW,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAa,CACtD,EAChBA,oEAAO,GAAG,EAAE,CAAC,EAAE;gBACb,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;aACnB,EACM,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,qBACE,IAAI,CAAC,WAAW,GACtC,EACD,IAAI,CAAC,WAAW;YACfA,0EAAa,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EACpF,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,IACzCA,wEAAW,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,GAAa,CACrD,CACZ,CACD,EACP;KACH;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/jump-quantity/jump-quantity.scss?tag=jump-quantity&encapsulation=shadow","src/components/jump-quantity/jump-quantity.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n align-items: flex-start;\n justify-content: center;\n flex-direction: column;\n gap: 0.75rem;\n\n [data-variant='horizontal'] {\n flex-direction: row;\n }\n\n label {\n color: var(--neutral-grey-secondary);\n font-size: 0.875rem;\n }\n\n input {\n //remove user agent styles\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n margin: 0;\n\n //remove + and - buttons\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n outline: none;\n\n &:focus {\n border-color: var(--secondary-standard);\n }\n\n border: 1px solid transparent;\n border-radius: 3px;\n padding: 0.5rem;\n height: 16px;\n width: 40px;\n font-size: 0.875rem;\n text-align: center;\n\n &:not([aria-hasbuttons]) {\n border-color: var(--neutral-grey-secondary);\n }\n\n &[type='button'] {\n cursor: pointer;\n }\n }\n\n ::slotted(jump-button) {\n --jump-button-padding: 0;\n }\n\n\n .jump-quantity__InnerWrapper {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: center;\n gap: 0;\n }\n}\n","import { Component, Host, AttachInternals, Watch, Method, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n tag: 'jump-quantity',\n styleUrl: 'jump-quantity.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class JumpQuantity {\n\n @AttachInternals() internals: ElementInternals;\n @Element() el;\n\n @Prop() min: number = 1;\n @Prop() max: number;\n @Prop() step: number = 1;\n @Prop() label: string = '';\n @Prop() type: 'buttons' | 'dropdown' | 'input' = 'buttons';\n @Prop() variant: 'vertical' | 'horizontal' = 'vertical';\n @Prop() showButtons: boolean = true;\n @Prop() value: number;\n\n @Event({ eventName: 'jump-change' }) change;\n\n inputEl: HTMLInputElement;\n\n @Watch('value')\n onValueChange(newValue, oldValue) {\n this.change.emit({\n value: newValue,\n oldValue: oldValue,\n });\n this.internals.setFormValue(newValue);\n }\n\n /**\n * Get the current value\n */\n @Method()\n async getValue() {\n return this.value;\n }\n\n @Method()\n async reset() {\n this.value = this.min;\n }\n\n componentWillLoad() {\n this.value = this.min;\n this.internals.setFormValue(this.value.toString());\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue('');\n }\n\n handleChange(event) {\n this.value = event.target.value;\n }\n\n //avoid user can change the value below the min\n handleBlur(event) {\n if (event.target.value < this.min) {\n this.value = this.min;\n }\n }\n\n render() {\n return (\n <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n {this.label && <label>{this.label}</label>}\n <div class={`jump-quantity__InnerWrapper`}>\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value - this.step} disabled={this.value <= this.min}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"minus\" size=\"small\"></jump-icon>\n </jump-button>}\n <input ref={(el) => {\n this.inputEl = el;\n }}\n type='number'\n value={this.value}\n onInput={(event) => this.handleChange(event)}\n min={this.min}\n max={this.max}\n step={this.step}\n aria-hasbuttons={this.showButtons}\n />\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value + this.step} disabled={this.value >= this.max}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"plus\" size=\"small\"></jump-icon>\n </jump-button>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -45,10 +45,10 @@ export class JumpQuantity {
|
|
|
45
45
|
}
|
|
46
46
|
render() {
|
|
47
47
|
return (h(Host, { key: '8dfa03a154994f2875c8e807ee718802ec7c456c', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: '7419fc79da61afc0122305fbb62e36dc822a71a4' }, this.label), h("div", { key: '3cf6c104a074519f1c96698bd359176c86d0ee84', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
|
|
48
|
-
h("jump-button", { key: '
|
|
48
|
+
h("jump-button", { key: 'b0dabd107b4ae730993293c423aefa4e03122212', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'small' }, h("jump-icon", { key: '749285f9518b323bbb4a8610e191a2bd4bc92b52', library: "lucide", name: "minus", size: "small" })), h("input", { key: '486240097b83c8c6b814cd01a6ef58262e774cd3', ref: (el) => {
|
|
49
49
|
this.inputEl = el;
|
|
50
50
|
}, type: 'number', value: this.value, onInput: (event) => this.handleChange(event), min: this.min, max: this.max, step: this.step, "aria-hasbuttons": this.showButtons }), this.showButtons &&
|
|
51
|
-
h("jump-button", { key: '
|
|
51
|
+
h("jump-button", { key: 'cc88125f73adf613b60a597e386c5cf8299b2516', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'small' }, h("jump-icon", { key: 'd601c6ef113227ee07a15a15684b94865d11bbc8', library: "lucide", name: "plus", size: "small" })))));
|
|
52
52
|
}
|
|
53
53
|
static get is() { return "jump-quantity"; }
|
|
54
54
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-quantity.js","sourceRoot":"","sources":["../../../src/components/jump-quantity/jump-quantity.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, AttachInternals, Watch, Method, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n tag: 'jump-quantity',\n styleUrl: 'jump-quantity.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class JumpQuantity {\n\n @AttachInternals() internals: ElementInternals;\n @Element() el;\n\n @Prop() min: number = 1;\n @Prop() max: number;\n @Prop() step: number = 1;\n @Prop() label: string = '';\n @Prop() type: 'buttons' | 'dropdown' | 'input' = 'buttons';\n @Prop() variant: 'vertical' | 'horizontal' = 'vertical';\n @Prop() showButtons: boolean = true;\n @Prop() value: number;\n\n @Event({ eventName: 'jump-change' }) change;\n\n inputEl: HTMLInputElement;\n\n @Watch('value')\n onValueChange(newValue, oldValue) {\n this.change.emit({\n value: newValue,\n oldValue: oldValue,\n });\n this.internals.setFormValue(newValue);\n }\n\n /**\n * Get the current value\n */\n @Method()\n async getValue() {\n return this.value;\n }\n\n @Method()\n async reset() {\n this.value = this.min;\n }\n\n componentWillLoad() {\n this.value = this.min;\n this.internals.setFormValue(this.value.toString());\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue('');\n }\n\n handleChange(event) {\n this.value = event.target.value;\n }\n\n //avoid user can change the value below the min\n handleBlur(event) {\n if (event.target.value < this.min) {\n this.value = this.min;\n }\n }\n\n render() {\n return (\n <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n {this.label && <label>{this.label}</label>}\n <div class={`jump-quantity__InnerWrapper`}>\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value - this.step} disabled={this.value <= this.min}\n variant='neutral' size='small'
|
|
1
|
+
{"version":3,"file":"jump-quantity.js","sourceRoot":"","sources":["../../../src/components/jump-quantity/jump-quantity.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, AttachInternals, Watch, Method, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n tag: 'jump-quantity',\n styleUrl: 'jump-quantity.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class JumpQuantity {\n\n @AttachInternals() internals: ElementInternals;\n @Element() el;\n\n @Prop() min: number = 1;\n @Prop() max: number;\n @Prop() step: number = 1;\n @Prop() label: string = '';\n @Prop() type: 'buttons' | 'dropdown' | 'input' = 'buttons';\n @Prop() variant: 'vertical' | 'horizontal' = 'vertical';\n @Prop() showButtons: boolean = true;\n @Prop() value: number;\n\n @Event({ eventName: 'jump-change' }) change;\n\n inputEl: HTMLInputElement;\n\n @Watch('value')\n onValueChange(newValue, oldValue) {\n this.change.emit({\n value: newValue,\n oldValue: oldValue,\n });\n this.internals.setFormValue(newValue);\n }\n\n /**\n * Get the current value\n */\n @Method()\n async getValue() {\n return this.value;\n }\n\n @Method()\n async reset() {\n this.value = this.min;\n }\n\n componentWillLoad() {\n this.value = this.min;\n this.internals.setFormValue(this.value.toString());\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue('');\n }\n\n handleChange(event) {\n this.value = event.target.value;\n }\n\n //avoid user can change the value below the min\n handleBlur(event) {\n if (event.target.value < this.min) {\n this.value = this.min;\n }\n }\n\n render() {\n return (\n <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n {this.label && <label>{this.label}</label>}\n <div class={`jump-quantity__InnerWrapper`}>\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value - this.step} disabled={this.value <= this.min}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"minus\" size=\"small\"></jump-icon>\n </jump-button>}\n <input ref={(el) => {\n this.inputEl = el;\n }}\n type='number'\n value={this.value}\n onInput={(event) => this.handleChange(event)}\n min={this.min}\n max={this.max}\n step={this.step}\n aria-hasbuttons={this.showButtons}\n />\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value + this.step} disabled={this.value >= this.max}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"plus\" size=\"small\"></jump-icon>\n </jump-button>}\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -56,10 +56,10 @@ const JumpQuantity$1 = /*@__PURE__*/ proxyCustomElement(class JumpQuantity exten
|
|
|
56
56
|
}
|
|
57
57
|
render() {
|
|
58
58
|
return (h(Host, { key: '8dfa03a154994f2875c8e807ee718802ec7c456c', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: '7419fc79da61afc0122305fbb62e36dc822a71a4' }, this.label), h("div", { key: '3cf6c104a074519f1c96698bd359176c86d0ee84', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
|
|
59
|
-
h("jump-button", { key: '
|
|
59
|
+
h("jump-button", { key: 'b0dabd107b4ae730993293c423aefa4e03122212', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'small' }, h("jump-icon", { key: '749285f9518b323bbb4a8610e191a2bd4bc92b52', library: "lucide", name: "minus", size: "small" })), h("input", { key: '486240097b83c8c6b814cd01a6ef58262e774cd3', ref: (el) => {
|
|
60
60
|
this.inputEl = el;
|
|
61
61
|
}, type: 'number', value: this.value, onInput: (event) => this.handleChange(event), min: this.min, max: this.max, step: this.step, "aria-hasbuttons": this.showButtons }), this.showButtons &&
|
|
62
|
-
h("jump-button", { key: '
|
|
62
|
+
h("jump-button", { key: 'cc88125f73adf613b60a597e386c5cf8299b2516', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'small' }, h("jump-icon", { key: 'd601c6ef113227ee07a15a15684b94865d11bbc8', library: "lucide", name: "plus", size: "small" })))));
|
|
63
63
|
}
|
|
64
64
|
static get formAssociated() { return true; }
|
|
65
65
|
get el() { return this; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-quantity.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,q5BAAq5B,CAAC;AAC96B,2BAAe,eAAe;;MCOjBA,cAAY;;;;;;;mBAKD,CAAC;;oBAEA,CAAC;qBACA,EAAE;oBACuB,SAAS;uBACb,UAAU;2BACxB,IAAI;;;IAQnC,aAAa,CAAC,QAAQ,EAAE,QAAQ;QAC9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACf,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvC;;;;IAMD,MAAM,QAAQ;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC;KACnB;IAGD,MAAM,KAAK;QACT,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;KACvB;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;KACpD;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;KACjC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACjC;;IAGD,UAAU,CAAC,KAAK;QACd,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;YACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;SACvB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,qBAAmB,IAAI,CAAC,WAAW,IACnF,IAAI,CAAC,KAAK,IAAI,gEAAQ,IAAI,CAAC,KAAK,CAAS,EAC1C,4DAAK,KAAK,EAAE,6BAA6B,IACxC,IAAI,CAAC,WAAW;YACb,oEAAa,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EACpF,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,
|
|
1
|
+
{"file":"jump-quantity.js","mappings":"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","names":["JumpQuantity"],"sources":["src/components/jump-quantity/jump-quantity.scss?tag=jump-quantity&encapsulation=shadow","src/components/jump-quantity/jump-quantity.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n align-items: flex-start;\n justify-content: center;\n flex-direction: column;\n gap: 0.75rem;\n\n [data-variant='horizontal'] {\n flex-direction: row;\n }\n\n label {\n color: var(--neutral-grey-secondary);\n font-size: 0.875rem;\n }\n\n input {\n //remove user agent styles\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n margin: 0;\n\n //remove + and - buttons\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n outline: none;\n\n &:focus {\n border-color: var(--secondary-standard);\n }\n\n border: 1px solid transparent;\n border-radius: 3px;\n padding: 0.5rem;\n height: 16px;\n width: 40px;\n font-size: 0.875rem;\n text-align: center;\n\n &:not([aria-hasbuttons]) {\n border-color: var(--neutral-grey-secondary);\n }\n\n &[type='button'] {\n cursor: pointer;\n }\n }\n\n ::slotted(jump-button) {\n --jump-button-padding: 0;\n }\n\n\n .jump-quantity__InnerWrapper {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: center;\n gap: 0;\n }\n}\n","import { Component, Host, AttachInternals, Watch, Method, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n tag: 'jump-quantity',\n styleUrl: 'jump-quantity.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class JumpQuantity {\n\n @AttachInternals() internals: ElementInternals;\n @Element() el;\n\n @Prop() min: number = 1;\n @Prop() max: number;\n @Prop() step: number = 1;\n @Prop() label: string = '';\n @Prop() type: 'buttons' | 'dropdown' | 'input' = 'buttons';\n @Prop() variant: 'vertical' | 'horizontal' = 'vertical';\n @Prop() showButtons: boolean = true;\n @Prop() value: number;\n\n @Event({ eventName: 'jump-change' }) change;\n\n inputEl: HTMLInputElement;\n\n @Watch('value')\n onValueChange(newValue, oldValue) {\n this.change.emit({\n value: newValue,\n oldValue: oldValue,\n });\n this.internals.setFormValue(newValue);\n }\n\n /**\n * Get the current value\n */\n @Method()\n async getValue() {\n return this.value;\n }\n\n @Method()\n async reset() {\n this.value = this.min;\n }\n\n componentWillLoad() {\n this.value = this.min;\n this.internals.setFormValue(this.value.toString());\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue('');\n }\n\n handleChange(event) {\n this.value = event.target.value;\n }\n\n //avoid user can change the value below the min\n handleBlur(event) {\n if (event.target.value < this.min) {\n this.value = this.min;\n }\n }\n\n render() {\n return (\n <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n {this.label && <label>{this.label}</label>}\n <div class={`jump-quantity__InnerWrapper`}>\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value - this.step} disabled={this.value <= this.min}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"minus\" size=\"small\"></jump-icon>\n </jump-button>}\n <input ref={(el) => {\n this.inputEl = el;\n }}\n type='number'\n value={this.value}\n onInput={(event) => this.handleChange(event)}\n min={this.min}\n max={this.max}\n step={this.step}\n aria-hasbuttons={this.showButtons}\n />\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value + this.step} disabled={this.value >= this.max}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"plus\" size=\"small\"></jump-icon>\n </jump-button>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -58,10 +58,10 @@ const JumpQuantity = class {
|
|
|
58
58
|
}
|
|
59
59
|
render() {
|
|
60
60
|
return (h(Host, { key: '8dfa03a154994f2875c8e807ee718802ec7c456c', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: '7419fc79da61afc0122305fbb62e36dc822a71a4' }, this.label), h("div", { key: '3cf6c104a074519f1c96698bd359176c86d0ee84', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
|
|
61
|
-
h("jump-button", { key: '
|
|
61
|
+
h("jump-button", { key: 'b0dabd107b4ae730993293c423aefa4e03122212', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'small' }, h("jump-icon", { key: '749285f9518b323bbb4a8610e191a2bd4bc92b52', library: "lucide", name: "minus", size: "small" })), h("input", { key: '486240097b83c8c6b814cd01a6ef58262e774cd3', ref: (el) => {
|
|
62
62
|
this.inputEl = el;
|
|
63
63
|
}, type: 'number', value: this.value, onInput: (event) => this.handleChange(event), min: this.min, max: this.max, step: this.step, "aria-hasbuttons": this.showButtons }), this.showButtons &&
|
|
64
|
-
h("jump-button", { key: '
|
|
64
|
+
h("jump-button", { key: 'cc88125f73adf613b60a597e386c5cf8299b2516', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'small' }, h("jump-icon", { key: 'd601c6ef113227ee07a15a15684b94865d11bbc8', library: "lucide", name: "plus", size: "small" })))));
|
|
65
65
|
}
|
|
66
66
|
static get formAssociated() { return true; }
|
|
67
67
|
get el() { return getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-quantity.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,q5BAAq5B,CAAC;AAC96B,2BAAe,eAAe;;MCOjB,YAAY;;;;;;;;;;;mBAKD,CAAC;;oBAEA,CAAC;qBACA,EAAE;oBACuB,SAAS;uBACb,UAAU;2BACxB,IAAI;;;IAQnC,aAAa,CAAC,QAAQ,EAAE,QAAQ;QAC9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACf,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvC;;;;IAMD,MAAM,QAAQ;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC;KACnB;IAGD,MAAM,KAAK;QACT,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;KACvB;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;KACpD;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;KACjC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACjC;;IAGD,UAAU,CAAC,KAAK;QACd,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;YACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;SACvB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,qBAAmB,IAAI,CAAC,WAAW,IACnF,IAAI,CAAC,KAAK,IAAI,gEAAQ,IAAI,CAAC,KAAK,CAAS,EAC1C,4DAAK,KAAK,EAAE,6BAA6B,IACxC,IAAI,CAAC,WAAW;YACb,oEAAa,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EACpF,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,
|
|
1
|
+
{"file":"jump-quantity.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,q5BAAq5B,CAAC;AAC96B,2BAAe,eAAe;;MCOjB,YAAY;;;;;;;;;;;mBAKD,CAAC;;oBAEA,CAAC;qBACA,EAAE;oBACuB,SAAS;uBACb,UAAU;2BACxB,IAAI;;;IAQnC,aAAa,CAAC,QAAQ,EAAE,QAAQ;QAC9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACf,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvC;;;;IAMD,MAAM,QAAQ;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC;KACnB;IAGD,MAAM,KAAK;QACT,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;KACvB;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;KACpD;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;KACjC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACjC;;IAGD,UAAU,CAAC,KAAK;QACd,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;YACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;SACvB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,qBAAmB,IAAI,CAAC,WAAW,IACnF,IAAI,CAAC,KAAK,IAAI,gEAAQ,IAAI,CAAC,KAAK,CAAS,EAC1C,4DAAK,KAAK,EAAE,6BAA6B,IACxC,IAAI,CAAC,WAAW;YACb,oEAAa,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EACpF,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,IACzC,kEAAW,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAa,CACtD,EAChB,8DAAO,GAAG,EAAE,CAAC,EAAE;gBACb,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;aACnB,EACM,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,qBACE,IAAI,CAAC,WAAW,GACtC,EACD,IAAI,CAAC,WAAW;YACf,oEAAa,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EACpF,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,IACzC,kEAAW,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,GAAa,CACrD,CACZ,CACD,EACP;KACH;;;;;;;;;;;","names":[],"sources":["src/components/jump-quantity/jump-quantity.scss?tag=jump-quantity&encapsulation=shadow","src/components/jump-quantity/jump-quantity.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n align-items: flex-start;\n justify-content: center;\n flex-direction: column;\n gap: 0.75rem;\n\n [data-variant='horizontal'] {\n flex-direction: row;\n }\n\n label {\n color: var(--neutral-grey-secondary);\n font-size: 0.875rem;\n }\n\n input {\n //remove user agent styles\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n margin: 0;\n\n //remove + and - buttons\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n outline: none;\n\n &:focus {\n border-color: var(--secondary-standard);\n }\n\n border: 1px solid transparent;\n border-radius: 3px;\n padding: 0.5rem;\n height: 16px;\n width: 40px;\n font-size: 0.875rem;\n text-align: center;\n\n &:not([aria-hasbuttons]) {\n border-color: var(--neutral-grey-secondary);\n }\n\n &[type='button'] {\n cursor: pointer;\n }\n }\n\n ::slotted(jump-button) {\n --jump-button-padding: 0;\n }\n\n\n .jump-quantity__InnerWrapper {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: center;\n gap: 0;\n }\n}\n","import { Component, Host, AttachInternals, Watch, Method, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n tag: 'jump-quantity',\n styleUrl: 'jump-quantity.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class JumpQuantity {\n\n @AttachInternals() internals: ElementInternals;\n @Element() el;\n\n @Prop() min: number = 1;\n @Prop() max: number;\n @Prop() step: number = 1;\n @Prop() label: string = '';\n @Prop() type: 'buttons' | 'dropdown' | 'input' = 'buttons';\n @Prop() variant: 'vertical' | 'horizontal' = 'vertical';\n @Prop() showButtons: boolean = true;\n @Prop() value: number;\n\n @Event({ eventName: 'jump-change' }) change;\n\n inputEl: HTMLInputElement;\n\n @Watch('value')\n onValueChange(newValue, oldValue) {\n this.change.emit({\n value: newValue,\n oldValue: oldValue,\n });\n this.internals.setFormValue(newValue);\n }\n\n /**\n * Get the current value\n */\n @Method()\n async getValue() {\n return this.value;\n }\n\n @Method()\n async reset() {\n this.value = this.min;\n }\n\n componentWillLoad() {\n this.value = this.min;\n this.internals.setFormValue(this.value.toString());\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue('');\n }\n\n handleChange(event) {\n this.value = event.target.value;\n }\n\n //avoid user can change the value below the min\n handleBlur(event) {\n if (event.target.value < this.min) {\n this.value = this.min;\n }\n }\n\n render() {\n return (\n <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n {this.label && <label>{this.label}</label>}\n <div class={`jump-quantity__InnerWrapper`}>\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value - this.step} disabled={this.value <= this.min}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"minus\" size=\"small\"></jump-icon>\n </jump-button>}\n <input ref={(el) => {\n this.inputEl = el;\n }}\n type='number'\n value={this.value}\n onInput={(event) => this.handleChange(event)}\n min={this.min}\n max={this.max}\n step={this.step}\n aria-hasbuttons={this.showButtons}\n />\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value + this.step} disabled={this.value >= this.max}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"plus\" size=\"small\"></jump-icon>\n </jump-button>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-4d6cc90d.js";export{s as setNonce}from"./p-4d6cc90d.js";import{g as a}from"./p-e1255160.js";const i=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};i().then((async e=>{await a();return t([["p-c2bc6395",[[1,"jump-button",{disabled:[4],variant:[1],outline:[4],size:[1],full:[4],pill:[4],text:[4],onlyIcon:[4,"only-icon"],href:[1],target:[1],type:[1],name:[1],value:[1],ariaLabel:[1,"aria-label"],class:[1],buttonId:[1,"button-id"]}],[1,"jump-icon",{class:[1],library:[1],name:[1],category:[1],size:[1],label:[1],src:[1]}]]],["p-b92e6459",[[1,"jump-card-ecommerce",{onlyIconButton:[4,"only-icon-button"],hasBackground:[4,"has-background"],badge:[1],favorite:[1540],hasFavorite:[4,"has-favorite"],link:[1],img:[1],imgAlt:[1,"img-alt"],hoverImg:[1,"hover-img"],hoverImgAlt:[1,"hover-img-alt"],videoSrc:[1,"video-src"],notificationUrl:[1,"notification-url"],notificationText:[1,"notification-text"],productName:[1,"product-name"],subtitle:[1],productId:[1,"product-id"],price:[2],salePrice:[2,"sale-price"],currency:[1],outOfStock:[1540,"out-of-stock"],outOfStockText:[1,"out-of-stock-text"],addToCartText:[1,"add-to-cart-text"],waitingListText:[1,"waiting-list-text"],addToWaitingList:[4,"add-to-waiting-list"],addedToCart:[4,"added-to-cart"],endAddedToCart:[4,"end-added-to-cart"],variations:[32]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["p-529a09f6",[[1,"jump-filter",{direction:[1],filterHeading:[1,"filter-heading"],filterButtonLabel:[1,"filter-button-label"],filterButtonIcon:[1,"filter-button-icon"],mobileThreshold:[2,"mobile-threshold"],filters:[8],activeFilters:[32],showMobileFilters:[32],isMobile:[32],getFilters:[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]]]]],["p-65ac4e72",[[1,"jump-filtergroup",{name:[1],heading:[1],otherLabel:[1,"other-label"],lessLabel:[1,"less-label"],maxElements:[2,"max-elements"],variant:[1],values:[32],value:[32],slotItems:[32],inputs:[32],showMore:[32],getValues:[64],getActiveAmount:[64],getInputs:[64],getName:[64]}]]],["p-95460fa4",[[1,"jump-pagination",{pagLabel:[1,"pag-label"],last:[2],showFirstAndLast:[4,"show-first-and-last"],current:[32]},null,{current:["watchcurrent"]}]]],["p-594b15ee",[[0,"jump-pagination-table",{elementsRanges:[16],elPerPage:[2,"el-per-page"],pagLabel:[513,"pag-label"],labelElementsPerPage:[513,"label-elements-per-page"],total:[514],first:[514],last:[514],showFirstAndLast:[516,"show-first-and-last"]},null,{elPerPage:["elPerPageChanged"]}]]],["p-
|
|
1
|
+
import{p as e,b as t}from"./p-4d6cc90d.js";export{s as setNonce}from"./p-4d6cc90d.js";import{g as a}from"./p-e1255160.js";const i=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};i().then((async e=>{await a();return t([["p-c2bc6395",[[1,"jump-button",{disabled:[4],variant:[1],outline:[4],size:[1],full:[4],pill:[4],text:[4],onlyIcon:[4,"only-icon"],href:[1],target:[1],type:[1],name:[1],value:[1],ariaLabel:[1,"aria-label"],class:[1],buttonId:[1,"button-id"]}],[1,"jump-icon",{class:[1],library:[1],name:[1],category:[1],size:[1],label:[1],src:[1]}]]],["p-b92e6459",[[1,"jump-card-ecommerce",{onlyIconButton:[4,"only-icon-button"],hasBackground:[4,"has-background"],badge:[1],favorite:[1540],hasFavorite:[4,"has-favorite"],link:[1],img:[1],imgAlt:[1,"img-alt"],hoverImg:[1,"hover-img"],hoverImgAlt:[1,"hover-img-alt"],videoSrc:[1,"video-src"],notificationUrl:[1,"notification-url"],notificationText:[1,"notification-text"],productName:[1,"product-name"],subtitle:[1],productId:[1,"product-id"],price:[2],salePrice:[2,"sale-price"],currency:[1],outOfStock:[1540,"out-of-stock"],outOfStockText:[1,"out-of-stock-text"],addToCartText:[1,"add-to-cart-text"],waitingListText:[1,"waiting-list-text"],addToWaitingList:[4,"add-to-waiting-list"],addedToCart:[4,"added-to-cart"],endAddedToCart:[4,"end-added-to-cart"],variations:[32]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["p-529a09f6",[[1,"jump-filter",{direction:[1],filterHeading:[1,"filter-heading"],filterButtonLabel:[1,"filter-button-label"],filterButtonIcon:[1,"filter-button-icon"],mobileThreshold:[2,"mobile-threshold"],filters:[8],activeFilters:[32],showMobileFilters:[32],isMobile:[32],getFilters:[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]]]]],["p-65ac4e72",[[1,"jump-filtergroup",{name:[1],heading:[1],otherLabel:[1,"other-label"],lessLabel:[1,"less-label"],maxElements:[2,"max-elements"],variant:[1],values:[32],value:[32],slotItems:[32],inputs:[32],showMore:[32],getValues:[64],getActiveAmount:[64],getInputs:[64],getName:[64]}]]],["p-95460fa4",[[1,"jump-pagination",{pagLabel:[1,"pag-label"],last:[2],showFirstAndLast:[4,"show-first-and-last"],current:[32]},null,{current:["watchcurrent"]}]]],["p-594b15ee",[[0,"jump-pagination-table",{elementsRanges:[16],elPerPage:[2,"el-per-page"],pagLabel:[513,"pag-label"],labelElementsPerPage:[513,"label-elements-per-page"],total:[514],first:[514],last:[514],showFirstAndLast:[516,"show-first-and-last"]},null,{elPerPage:["elPerPageChanged"]}]]],["p-8628896f",[[65,"jump-quantity",{min:[2],max:[2],step:[2],label:[1],type:[1],variant:[1],showButtons:[4,"show-buttons"],value:[2],getValue:[64],reset:[64]},null,{value:["onValueChange"]}]]],["p-8efeaa79",[[1,"jump-tab-item",{identifier:[1],iconName:[1,"icon-name"],iconPosition:[1,"icon-position"],label:[1],active:[4],disabled:[4],variant:[32]}]]],["p-56609b82",[[1,"jump-accordion"]]],["p-c1665537",[[4,"jump-card",{horizontal:[4],dark:[4],shadow:[4],border:[4],borderRadius:[4,"border-radius"],topBorderContentRadius:[4,"top-border-content-radius"],boxed:[4],roundedMedia:[4,"rounded-media"],imgSrc:[1,"img-src"],imgAlt:[1,"img-alt"],videoSrc:[1,"video-src"]}]]],["p-bc64407a",[[1,"jump-card-ecommerce-option",{code:[1],imgUrl:[1,"img-url"],label:[1],sku:[1]}]]],["p-d2ee7b9b",[[1,"jump-tab",{tabGroupName:[1,"tab-group-name"],variant:[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["p-5da7839d",[[1,"jump-tab-panel",{identifier:[1],active:[4]}]]],["p-8343b4f5",[[1,"jump-badge",{label:[1],variant:[1],dimension:[1],soft:[4],outline:[4]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=jump-design-system.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,H as
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as e,h as i,H as s,g as a}from"./p-4d6cc90d.js";const n=":host{display:inline-flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:0.75rem}:host [data-variant=horizontal]{flex-direction:row}:host label{color:var(--neutral-grey-secondary);font-size:0.875rem}:host input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;margin:0;outline:none;border:1px solid transparent;border-radius:3px;padding:0.5rem;height:16px;width:40px;font-size:0.875rem;text-align:center}:host input::-webkit-inner-spin-button,:host input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host input:focus{border-color:var(--secondary-standard)}:host input:not([aria-hasbuttons]){border-color:var(--neutral-grey-secondary)}:host input[type=button]{cursor:pointer}:host ::slotted(jump-button){--jump-button-padding:0}:host .jump-quantity__InnerWrapper{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:0}";const r=n;const o=class{constructor(i){t(this,i);this.change=e(this,"jump-change",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.min=1;this.max=undefined;this.step=1;this.label="";this.type="buttons";this.variant="vertical";this.showButtons=true;this.value=undefined}onValueChange(t,e){this.change.emit({value:t,oldValue:e});this.internals.setFormValue(t)}async getValue(){return this.value}async reset(){this.value=this.min}componentWillLoad(){this.value=this.min;this.internals.setFormValue(this.value.toString())}formResetCallback(){this.internals.setValidity({});this.internals.setFormValue("")}handleChange(t){this.value=t.target.value}handleBlur(t){if(t.target.value<this.min){this.value=this.min}}render(){return i(s,{key:"8dfa03a154994f2875c8e807ee718802ec7c456c",value:this.value,"data-variant":this.variant,"data-hasbuttons":this.showButtons},this.label&&i("label",{key:"7419fc79da61afc0122305fbb62e36dc822a71a4"},this.label),i("div",{key:"3cf6c104a074519f1c96698bd359176c86d0ee84",class:`jump-quantity__InnerWrapper`},this.showButtons&&i("jump-button",{key:"b0dabd107b4ae730993293c423aefa4e03122212",onClick:()=>this.value=this.value-this.step,disabled:this.value<=this.min,variant:"neutral",size:"small"},i("jump-icon",{key:"749285f9518b323bbb4a8610e191a2bd4bc92b52",library:"lucide",name:"minus",size:"small"})),i("input",{key:"486240097b83c8c6b814cd01a6ef58262e774cd3",ref:t=>{this.inputEl=t},type:"number",value:this.value,onInput:t=>this.handleChange(t),min:this.min,max:this.max,step:this.step,"aria-hasbuttons":this.showButtons}),this.showButtons&&i("jump-button",{key:"cc88125f73adf613b60a597e386c5cf8299b2516",onClick:()=>this.value=this.value+this.step,disabled:this.value>=this.max,variant:"neutral",size:"small"},i("jump-icon",{key:"d601c6ef113227ee07a15a15684b94865d11bbc8",library:"lucide",name:"plus",size:"small"}))))}static get formAssociated(){return true}get el(){return a(this)}static get watchers(){return{value:["onValueChange"]}}};o.style=r;export{o as jump_quantity};
|
|
2
|
+
//# sourceMappingURL=p-8628896f.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["jumpQuantityCss","JumpQuantityStyle0","JumpQuantity","onValueChange","newValue","oldValue","this","change","emit","value","internals","setFormValue","getValue","reset","min","componentWillLoad","toString","formResetCallback","setValidity","handleChange","event","target","handleBlur","render","h","Host","key","variant","showButtons","label","class","onClick","step","disabled","size","library","name","ref","el","inputEl","type","onInput","max"],"sources":["src/components/jump-quantity/jump-quantity.scss?tag=jump-quantity&encapsulation=shadow","src/components/jump-quantity/jump-quantity.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n align-items: flex-start;\n justify-content: center;\n flex-direction: column;\n gap: 0.75rem;\n\n [data-variant='horizontal'] {\n flex-direction: row;\n }\n\n label {\n color: var(--neutral-grey-secondary);\n font-size: 0.875rem;\n }\n\n input {\n //remove user agent styles\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n margin: 0;\n\n //remove + and - buttons\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n outline: none;\n\n &:focus {\n border-color: var(--secondary-standard);\n }\n\n border: 1px solid transparent;\n border-radius: 3px;\n padding: 0.5rem;\n height: 16px;\n width: 40px;\n font-size: 0.875rem;\n text-align: center;\n\n &:not([aria-hasbuttons]) {\n border-color: var(--neutral-grey-secondary);\n }\n\n &[type='button'] {\n cursor: pointer;\n }\n }\n\n ::slotted(jump-button) {\n --jump-button-padding: 0;\n }\n\n\n .jump-quantity__InnerWrapper {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: center;\n gap: 0;\n }\n}\n","import { Component, Host, AttachInternals, Watch, Method, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n tag: 'jump-quantity',\n styleUrl: 'jump-quantity.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class JumpQuantity {\n\n @AttachInternals() internals: ElementInternals;\n @Element() el;\n\n @Prop() min: number = 1;\n @Prop() max: number;\n @Prop() step: number = 1;\n @Prop() label: string = '';\n @Prop() type: 'buttons' | 'dropdown' | 'input' = 'buttons';\n @Prop() variant: 'vertical' | 'horizontal' = 'vertical';\n @Prop() showButtons: boolean = true;\n @Prop() value: number;\n\n @Event({ eventName: 'jump-change' }) change;\n\n inputEl: HTMLInputElement;\n\n @Watch('value')\n onValueChange(newValue, oldValue) {\n this.change.emit({\n value: newValue,\n oldValue: oldValue,\n });\n this.internals.setFormValue(newValue);\n }\n\n /**\n * Get the current value\n */\n @Method()\n async getValue() {\n return this.value;\n }\n\n @Method()\n async reset() {\n this.value = this.min;\n }\n\n componentWillLoad() {\n this.value = this.min;\n this.internals.setFormValue(this.value.toString());\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue('');\n }\n\n handleChange(event) {\n this.value = event.target.value;\n }\n\n //avoid user can change the value below the min\n handleBlur(event) {\n if (event.target.value < this.min) {\n this.value = this.min;\n }\n }\n\n render() {\n return (\n <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n {this.label && <label>{this.label}</label>}\n <div class={`jump-quantity__InnerWrapper`}>\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value - this.step} disabled={this.value <= this.min}\n variant='neutral' size='small'
|
|
1
|
+
{"version":3,"names":["jumpQuantityCss","JumpQuantityStyle0","JumpQuantity","onValueChange","newValue","oldValue","this","change","emit","value","internals","setFormValue","getValue","reset","min","componentWillLoad","toString","formResetCallback","setValidity","handleChange","event","target","handleBlur","render","h","Host","key","variant","showButtons","label","class","onClick","step","disabled","size","library","name","ref","el","inputEl","type","onInput","max"],"sources":["src/components/jump-quantity/jump-quantity.scss?tag=jump-quantity&encapsulation=shadow","src/components/jump-quantity/jump-quantity.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n align-items: flex-start;\n justify-content: center;\n flex-direction: column;\n gap: 0.75rem;\n\n [data-variant='horizontal'] {\n flex-direction: row;\n }\n\n label {\n color: var(--neutral-grey-secondary);\n font-size: 0.875rem;\n }\n\n input {\n //remove user agent styles\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n margin: 0;\n\n //remove + and - buttons\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n outline: none;\n\n &:focus {\n border-color: var(--secondary-standard);\n }\n\n border: 1px solid transparent;\n border-radius: 3px;\n padding: 0.5rem;\n height: 16px;\n width: 40px;\n font-size: 0.875rem;\n text-align: center;\n\n &:not([aria-hasbuttons]) {\n border-color: var(--neutral-grey-secondary);\n }\n\n &[type='button'] {\n cursor: pointer;\n }\n }\n\n ::slotted(jump-button) {\n --jump-button-padding: 0;\n }\n\n\n .jump-quantity__InnerWrapper {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: center;\n gap: 0;\n }\n}\n","import { Component, Host, AttachInternals, Watch, Method, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n tag: 'jump-quantity',\n styleUrl: 'jump-quantity.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class JumpQuantity {\n\n @AttachInternals() internals: ElementInternals;\n @Element() el;\n\n @Prop() min: number = 1;\n @Prop() max: number;\n @Prop() step: number = 1;\n @Prop() label: string = '';\n @Prop() type: 'buttons' | 'dropdown' | 'input' = 'buttons';\n @Prop() variant: 'vertical' | 'horizontal' = 'vertical';\n @Prop() showButtons: boolean = true;\n @Prop() value: number;\n\n @Event({ eventName: 'jump-change' }) change;\n\n inputEl: HTMLInputElement;\n\n @Watch('value')\n onValueChange(newValue, oldValue) {\n this.change.emit({\n value: newValue,\n oldValue: oldValue,\n });\n this.internals.setFormValue(newValue);\n }\n\n /**\n * Get the current value\n */\n @Method()\n async getValue() {\n return this.value;\n }\n\n @Method()\n async reset() {\n this.value = this.min;\n }\n\n componentWillLoad() {\n this.value = this.min;\n this.internals.setFormValue(this.value.toString());\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue('');\n }\n\n handleChange(event) {\n this.value = event.target.value;\n }\n\n //avoid user can change the value below the min\n handleBlur(event) {\n if (event.target.value < this.min) {\n this.value = this.min;\n }\n }\n\n render() {\n return (\n <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n {this.label && <label>{this.label}</label>}\n <div class={`jump-quantity__InnerWrapper`}>\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value - this.step} disabled={this.value <= this.min}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"minus\" size=\"small\"></jump-icon>\n </jump-button>}\n <input ref={(el) => {\n this.inputEl = el;\n }}\n type='number'\n value={this.value}\n onInput={(event) => this.handleChange(event)}\n min={this.min}\n max={this.max}\n step={this.step}\n aria-hasbuttons={this.showButtons}\n />\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value + this.step} disabled={this.value >= this.max}\n variant='neutral' size='small'>\n <jump-icon library=\"lucide\" name=\"plus\" size=\"small\"></jump-icon>\n </jump-button>}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAkB,s5BACxB,MAAAC,EAAeD,E,MCOFE,EAAY,M,sOAKD,E,6BAEC,E,WACC,G,UACyB,U,aACJ,W,iBACd,K,qBAQ/B,aAAAC,CAAcC,EAAUC,GACtBC,KAAKC,OAAOC,KAAK,CACfC,MAAOL,EACPC,SAAUA,IAEZC,KAAKI,UAAUC,aAAaP,E,CAO9B,cAAMQ,GACJ,OAAON,KAAKG,K,CAId,WAAMI,GACJP,KAAKG,MAAQH,KAAKQ,G,CAGpB,iBAAAC,GACET,KAAKG,MAAQH,KAAKQ,IAClBR,KAAKI,UAAUC,aAAaL,KAAKG,MAAMO,W,CAGzC,iBAAAC,GACEX,KAAKI,UAAUQ,YAAY,IAC3BZ,KAAKI,UAAUC,aAAa,G,CAG9B,YAAAQ,CAAaC,GACXd,KAAKG,MAAQW,EAAMC,OAAOZ,K,CAI5B,UAAAa,CAAWF,GACT,GAAIA,EAAMC,OAAOZ,MAAQH,KAAKQ,IAAK,CACjCR,KAAKG,MAAQH,KAAKQ,G,EAItB,MAAAS,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACjB,MAAOH,KAAKG,MAAK,eAAgBH,KAAKqB,QAAO,kBAAmBrB,KAAKsB,aACxEtB,KAAKuB,OAASL,EAAA,SAAAE,IAAA,4CAAQpB,KAAKuB,OAC5BL,EAAA,OAAAE,IAAA,2CAAKI,MAAO,+BACXxB,KAAKsB,aACFJ,EAAA,eAAAE,IAAA,2CAAaK,QAAS,IAAMzB,KAAKG,MAAQH,KAAKG,MAAQH,KAAK0B,KAAMC,SAAU3B,KAAKG,OAASH,KAAKQ,IACjFa,QAAQ,UAAUO,KAAK,SAClCV,EAAA,aAAAE,IAAA,2CAAWS,QAAQ,SAASC,KAAK,QAAQF,KAAK,WAElDV,EAAA,SAAAE,IAAA,2CAAOW,IAAMC,IACXhC,KAAKiC,QAAUD,CAAE,EAEZE,KAAK,SACL/B,MAAOH,KAAKG,MACZgC,QAAUrB,GAAUd,KAAKa,aAAaC,GACtCN,IAAKR,KAAKQ,IACV4B,IAAKpC,KAAKoC,IACVV,KAAM1B,KAAK0B,KAAI,kBACE1B,KAAKsB,cAE5BtB,KAAKsB,aACJJ,EAAA,eAAAE,IAAA,2CAAaK,QAAS,IAAMzB,KAAKG,MAAQH,KAAKG,MAAQH,KAAK0B,KAAMC,SAAU3B,KAAKG,OAASH,KAAKoC,IACjFf,QAAQ,UAAUO,KAAK,SAClCV,EAAA,aAAAE,IAAA,2CAAWS,QAAQ,SAASC,KAAK,OAAOF,KAAK,Y"}
|