le-kit 0.1.4 → 0.1.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/le-kit/assets/custom-elements.json +4305 -0
- package/dist/le-kit/index-Da-89pOc.js +4522 -0
- package/dist/le-kit/{index-D21JjI31.js.map → index-Da-89pOc.js.map} +1 -1
- package/dist/le-kit/index.esm.js +116 -2
- package/dist/le-kit/index.esm.js.map +1 -1
- package/dist/{esm → le-kit}/le-box.entry.js +3 -3
- package/dist/le-kit/le-button.entry.esm.js.map +1 -0
- package/dist/le-kit/le-button.entry.js +90 -0
- package/dist/{esm → le-kit}/le-card.entry.js +3 -3
- package/dist/le-kit/le-checkbox.entry.esm.js.map +1 -0
- package/dist/le-kit/le-checkbox.entry.js +59 -0
- package/dist/le-kit/le-component.entry.esm.js.map +1 -0
- package/dist/{collection/components/le-component/le-component.js → le-kit/le-component.entry.js} +19 -134
- package/dist/le-kit/le-kit.css +1010 -1
- package/dist/le-kit/le-kit.esm.js +48 -2
- package/dist/le-kit/le-kit.esm.js.map +1 -1
- package/dist/{esm → le-kit}/le-number-input.entry.js +5 -5
- package/dist/le-kit/le-popover.entry.esm.js.map +1 -0
- package/dist/{components/le-popover2.js → le-kit/le-popover.entry.js} +9 -45
- package/dist/{esm → le-kit}/le-popup.entry.js +6 -6
- package/dist/{esm → le-kit}/le-round-progress.entry.js +2 -2
- package/dist/le-kit/le-slot.entry.esm.js.map +1 -0
- package/dist/{collection/components/le-slot/le-slot.js → le-kit/le-slot.entry.js} +30 -279
- package/dist/{esm → le-kit}/le-stack.entry.js +3 -3
- package/dist/le-kit/le-string-input.entry.esm.js.map +1 -0
- package/dist/le-kit/le-string-input.entry.js +93 -0
- package/dist/{esm → le-kit}/le-text.entry.js +3 -3
- package/dist/{esm → le-kit}/le-turntable.entry.js +2 -2
- package/dist/{esm/utils-CJLZrrdC.js → le-kit/utils-FDOApZ53.js} +3 -3
- package/dist/le-kit/{utils-apol-Xc_.js.map → utils-FDOApZ53.js.map} +1 -1
- package/package.json +1 -1
- package/dist/cjs/index-CO4npcak.js +0 -1796
- package/dist/cjs/index-CO4npcak.js.map +0 -1
- package/dist/cjs/index.cjs.js +0 -117
- package/dist/cjs/index.cjs.js.map +0 -1
- package/dist/cjs/le-box.cjs.entry.js +0 -184
- package/dist/cjs/le-box.entry.cjs.js.map +0 -1
- package/dist/cjs/le-button.le-checkbox.le-component.le-popover.le-slot.le-string-input.entry.cjs.js.map +0 -1
- package/dist/cjs/le-button_6.cjs.entry.js +0 -1199
- package/dist/cjs/le-card.cjs.entry.js +0 -29
- package/dist/cjs/le-card.entry.cjs.js.map +0 -1
- package/dist/cjs/le-kit.cjs.js +0 -25
- package/dist/cjs/le-kit.cjs.js.map +0 -1
- package/dist/cjs/le-number-input.cjs.entry.js +0 -202
- package/dist/cjs/le-number-input.entry.cjs.js.map +0 -1
- package/dist/cjs/le-popup.cjs.entry.js +0 -212
- package/dist/cjs/le-popup.entry.cjs.js.map +0 -1
- package/dist/cjs/le-round-progress.cjs.entry.js +0 -106
- package/dist/cjs/le-round-progress.entry.cjs.js.map +0 -1
- package/dist/cjs/le-stack.cjs.entry.js +0 -135
- package/dist/cjs/le-stack.entry.cjs.js.map +0 -1
- package/dist/cjs/le-text.cjs.entry.js +0 -335
- package/dist/cjs/le-text.entry.cjs.js.map +0 -1
- package/dist/cjs/le-turntable.cjs.entry.js +0 -139
- package/dist/cjs/le-turntable.entry.cjs.js.map +0 -1
- package/dist/cjs/loader.cjs.js +0 -13
- package/dist/cjs/loader.cjs.js.map +0 -1
- package/dist/cjs/utils-BeT0iyCQ.js +0 -152
- package/dist/cjs/utils-BeT0iyCQ.js.map +0 -1
- package/dist/collection/collection-manifest.json +0 -26
- package/dist/collection/components/le-box/le-box.default.css +0 -37
- package/dist/collection/components/le-box/le-box.js +0 -614
- package/dist/collection/components/le-box/le-box.js.map +0 -1
- package/dist/collection/components/le-button/le-button.default.css +0 -263
- package/dist/collection/components/le-button/le-button.js +0 -368
- package/dist/collection/components/le-button/le-button.js.map +0 -1
- package/dist/collection/components/le-card/le-card.default.css +0 -74
- package/dist/collection/components/le-card/le-card.js +0 -102
- package/dist/collection/components/le-card/le-card.js.map +0 -1
- package/dist/collection/components/le-checkbox/le-checkbox.css +0 -93
- package/dist/collection/components/le-checkbox/le-checkbox.js +0 -192
- package/dist/collection/components/le-checkbox/le-checkbox.js.map +0 -1
- package/dist/collection/components/le-component/le-component.css +0 -189
- package/dist/collection/components/le-component/le-component.js.map +0 -1
- package/dist/collection/components/le-number-input/le-number-input.css +0 -135
- package/dist/collection/components/le-number-input/le-number-input.js +0 -515
- package/dist/collection/components/le-number-input/le-number-input.js.map +0 -1
- package/dist/collection/components/le-popover/le-popover.css +0 -143
- package/dist/collection/components/le-popover/le-popover.js +0 -693
- package/dist/collection/components/le-popover/le-popover.js.map +0 -1
- package/dist/collection/components/le-popup/le-popup.api.js +0 -101
- package/dist/collection/components/le-popup/le-popup.api.js.map +0 -1
- package/dist/collection/components/le-popup/le-popup.css +0 -222
- package/dist/collection/components/le-popup/le-popup.js +0 -596
- package/dist/collection/components/le-popup/le-popup.js.map +0 -1
- package/dist/collection/components/le-round-progress/le-round-progress.css +0 -34
- package/dist/collection/components/le-round-progress/le-round-progress.js +0 -184
- package/dist/collection/components/le-round-progress/le-round-progress.js.map +0 -1
- package/dist/collection/components/le-slot/le-slot.default.css +0 -222
- package/dist/collection/components/le-slot/le-slot.js.map +0 -1
- package/dist/collection/components/le-stack/le-stack.default.css +0 -37
- package/dist/collection/components/le-stack/le-stack.js +0 -389
- package/dist/collection/components/le-stack/le-stack.js.map +0 -1
- package/dist/collection/components/le-string-input/le-string-input.css +0 -83
- package/dist/collection/components/le-string-input/le-string-input.js +0 -359
- package/dist/collection/components/le-string-input/le-string-input.js.map +0 -1
- package/dist/collection/components/le-text/le-text.default.css +0 -169
- package/dist/collection/components/le-text/le-text.js +0 -475
- package/dist/collection/components/le-text/le-text.js.map +0 -1
- package/dist/collection/components/le-turntable/le-turntable.css +0 -10
- package/dist/collection/components/le-turntable/le-turntable.js +0 -210
- package/dist/collection/components/le-turntable/le-turntable.js.map +0 -1
- package/dist/collection/global/app.js +0 -130
- package/dist/collection/global/app.js.map +0 -1
- package/dist/collection/index.js +0 -15
- package/dist/collection/index.js.map +0 -1
- package/dist/collection/types/blocks.js +0 -115
- package/dist/collection/types/blocks.js.map +0 -1
- package/dist/collection/types/options.js +0 -2
- package/dist/collection/types/options.js.map +0 -1
- package/dist/collection/utils/utils.js +0 -141
- package/dist/collection/utils/utils.js.map +0 -1
- package/dist/components/index.js +0 -127
- package/dist/components/index.js.map +0 -1
- package/dist/components/le-box.js +0 -256
- package/dist/components/le-box.js.map +0 -1
- package/dist/components/le-button.js +0 -9
- package/dist/components/le-button.js.map +0 -1
- package/dist/components/le-button2.js +0 -1408
- package/dist/components/le-button2.js.map +0 -1
- package/dist/components/le-card.js +0 -83
- package/dist/components/le-card.js.map +0 -1
- package/dist/components/le-checkbox.js +0 -9
- package/dist/components/le-checkbox.js.map +0 -1
- package/dist/components/le-component.js +0 -9
- package/dist/components/le-component.js.map +0 -1
- package/dist/components/le-number-input.js +0 -271
- package/dist/components/le-number-input.js.map +0 -1
- package/dist/components/le-popover.js +0 -9
- package/dist/components/le-popover.js.map +0 -1
- package/dist/components/le-popover2.js.map +0 -1
- package/dist/components/le-popup.js +0 -279
- package/dist/components/le-popup.js.map +0 -1
- package/dist/components/le-round-progress.js +0 -135
- package/dist/components/le-round-progress.js.map +0 -1
- package/dist/components/le-slot.js +0 -9
- package/dist/components/le-slot.js.map +0 -1
- package/dist/components/le-stack.js +0 -198
- package/dist/components/le-stack.js.map +0 -1
- package/dist/components/le-string-input.js +0 -9
- package/dist/components/le-string-input.js.map +0 -1
- package/dist/components/le-text.js +0 -398
- package/dist/components/le-text.js.map +0 -1
- package/dist/components/le-turntable.js +0 -164
- package/dist/components/le-turntable.js.map +0 -1
- package/dist/docs.d.ts +0 -443
- package/dist/docs.json +0 -5185
- package/dist/esm/index-D71TXvJa.js +0 -1781
- package/dist/esm/index-D71TXvJa.js.map +0 -1
- package/dist/esm/index.js +0 -106
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/le-box.entry.js.map +0 -1
- package/dist/esm/le-button.le-checkbox.le-component.le-popover.le-slot.le-string-input.entry.js.map +0 -1
- package/dist/esm/le-button_6.entry.js +0 -1192
- package/dist/esm/le-card.entry.js.map +0 -1
- package/dist/esm/le-kit.js +0 -21
- package/dist/esm/le-kit.js.map +0 -1
- package/dist/esm/le-number-input.entry.js.map +0 -1
- package/dist/esm/le-popup.entry.js.map +0 -1
- package/dist/esm/le-round-progress.entry.js.map +0 -1
- package/dist/esm/le-stack.entry.js.map +0 -1
- package/dist/esm/le-text.entry.js.map +0 -1
- package/dist/esm/le-turntable.entry.js.map +0 -1
- package/dist/esm/loader.js +0 -11
- package/dist/esm/loader.js.map +0 -1
- package/dist/esm/utils-CJLZrrdC.js.map +0 -1
- package/dist/index.cjs.js +0 -1
- package/dist/index.js +0 -1
- package/dist/le-kit/le-button.le-checkbox.le-component.le-popover.le-slot.le-string-input.entry.esm.js.map +0 -1
- package/dist/le-kit/p-024a764e.entry.js +0 -2
- package/dist/le-kit/p-024a764e.entry.js.map +0 -1
- package/dist/le-kit/p-073cf0b9.entry.js +0 -2
- package/dist/le-kit/p-073cf0b9.entry.js.map +0 -1
- package/dist/le-kit/p-0955b105.entry.js +0 -2
- package/dist/le-kit/p-0955b105.entry.js.map +0 -1
- package/dist/le-kit/p-18d79ee2.entry.js +0 -2
- package/dist/le-kit/p-18d79ee2.entry.js.map +0 -1
- package/dist/le-kit/p-4b1d3b6d.entry.js +0 -2
- package/dist/le-kit/p-4b1d3b6d.entry.js.map +0 -1
- package/dist/le-kit/p-79d179bd.entry.js +0 -2
- package/dist/le-kit/p-79d179bd.entry.js.map +0 -1
- package/dist/le-kit/p-D71TXvJa.js +0 -3
- package/dist/le-kit/p-D71TXvJa.js.map +0 -1
- package/dist/le-kit/p-c8a9288e.entry.js +0 -2
- package/dist/le-kit/p-c8a9288e.entry.js.map +0 -1
- package/dist/le-kit/p-cfc35bd3.entry.js +0 -2
- package/dist/le-kit/p-cfc35bd3.entry.js.map +0 -1
- package/dist/le-kit/p-d04da1f5.entry.js +0 -2
- package/dist/le-kit/p-d04da1f5.entry.js.map +0 -1
- package/dist/le-kit/p-qIai5-eB.js +0 -2
- package/dist/le-kit/p-qIai5-eB.js.map +0 -1
- package/dist/themes/base.css +0 -89
- package/dist/themes/dark.css +0 -100
- package/dist/themes/default.css +0 -108
- package/dist/themes/gradient.css +0 -100
- package/dist/themes/index.css +0 -413
- package/dist/themes/minimal.css +0 -100
- package/dist/themes/warm.css +0 -100
|
@@ -1,271 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
|
-
import { e as classnames, f as defineCustomElement$2, h as defineCustomElement$3, j as defineCustomElement$5, k as defineCustomElement$6, l as defineCustomElement$7 } from './le-button2.js';
|
|
3
|
-
import { d as defineCustomElement$4 } from './le-popover2.js';
|
|
4
|
-
|
|
5
|
-
const leNumberInputCss = ":host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999;--le-input-border-error:2px solid var(--le-color-danger, #dc3545);--le-input-error-color:var(--le-color-danger, #dc3545)}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-input-container.has-error{border:var(--le-input-border-error)}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;width:100%;height:calc(var(--le-input-height) - 2px);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;text-align:right;-moz-appearance:textfield;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-controls{display:flex;flex-direction:column;border-left:1px solid var(--le-color-border, #cccccc);height:100%}.le-input-control-btn{--le-button-border-radius:0;--le-button-padding-x:0;--le-button-padding-y:0;--le-button-small-font-size:9.5px;--le-button-small-padding:0 0.2rem;--le-button-icon-aspect-ratio:2;display:flex;align-items:center;justify-content:center;height:50%;cursor:pointer;background:none;border:none;color:var(--le-input-desc-color);font-size:10px;line-height:1}.le-input-control-btn:hover{background-color:rgba(0,0,0,0.05);color:var(--le-color-primary, #007bff)}.le-input-control-btn:active{background-color:rgba(0,0,0,0.1)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-error{font-size:0.85em;color:var(--le-input-error-color);margin-top:2px}";
|
|
6
|
-
|
|
7
|
-
const LeNumberInput$1 = /*@__PURE__*/ proxyCustomElement(class LeNumberInput extends HTMLElement {
|
|
8
|
-
constructor(registerHost) {
|
|
9
|
-
super();
|
|
10
|
-
if (registerHost !== false) {
|
|
11
|
-
this.__registerHost();
|
|
12
|
-
}
|
|
13
|
-
this.__attachShadow();
|
|
14
|
-
this.leChange = createEvent(this, "leChange", 7);
|
|
15
|
-
this.leInput = createEvent(this, "leInput", 7);
|
|
16
|
-
}
|
|
17
|
-
get el() { return this; }
|
|
18
|
-
/**
|
|
19
|
-
* The value of the input
|
|
20
|
-
*/
|
|
21
|
-
value;
|
|
22
|
-
/**
|
|
23
|
-
* The name of the input
|
|
24
|
-
*/
|
|
25
|
-
name;
|
|
26
|
-
/**
|
|
27
|
-
* Label for the input
|
|
28
|
-
*/
|
|
29
|
-
label;
|
|
30
|
-
/**
|
|
31
|
-
* Placeholder text
|
|
32
|
-
*/
|
|
33
|
-
placeholder;
|
|
34
|
-
/**
|
|
35
|
-
* Minimum allowed value
|
|
36
|
-
*/
|
|
37
|
-
min;
|
|
38
|
-
/**
|
|
39
|
-
* Maximum allowed value
|
|
40
|
-
*/
|
|
41
|
-
max;
|
|
42
|
-
/**
|
|
43
|
-
* Step value for increment/decrement
|
|
44
|
-
*/
|
|
45
|
-
step = 1;
|
|
46
|
-
/**
|
|
47
|
-
* Whether the input is required
|
|
48
|
-
*/
|
|
49
|
-
required = false;
|
|
50
|
-
/**
|
|
51
|
-
* Whether the input is disabled
|
|
52
|
-
*/
|
|
53
|
-
disabled = false;
|
|
54
|
-
/**
|
|
55
|
-
* Whether the input is read-only
|
|
56
|
-
*/
|
|
57
|
-
readonly = false;
|
|
58
|
-
/**
|
|
59
|
-
* Icon for the start icon
|
|
60
|
-
*/
|
|
61
|
-
iconStart;
|
|
62
|
-
/**
|
|
63
|
-
* Whether to show the spinner controls
|
|
64
|
-
*/
|
|
65
|
-
showSpinners = true;
|
|
66
|
-
/**
|
|
67
|
-
* External ID for linking with external systems
|
|
68
|
-
*/
|
|
69
|
-
externalId;
|
|
70
|
-
/**
|
|
71
|
-
* Internal validation state
|
|
72
|
-
*/
|
|
73
|
-
isValid = true;
|
|
74
|
-
validationMessage = '';
|
|
75
|
-
/**
|
|
76
|
-
* Emitted when the value changes (on blur or Enter)
|
|
77
|
-
*/
|
|
78
|
-
leChange;
|
|
79
|
-
/**
|
|
80
|
-
* Emitted when the input value changes (on keystroke/spin)
|
|
81
|
-
*/
|
|
82
|
-
leInput;
|
|
83
|
-
valueChanged() {
|
|
84
|
-
this.validate();
|
|
85
|
-
}
|
|
86
|
-
validate() {
|
|
87
|
-
if (this.required && (this.value === undefined || this.value === null || isNaN(this.value))) {
|
|
88
|
-
this.isValid = false;
|
|
89
|
-
this.validationMessage = 'This field is required';
|
|
90
|
-
return;
|
|
91
|
-
}
|
|
92
|
-
if (this.value !== undefined && this.value !== null && !isNaN(this.value)) {
|
|
93
|
-
if (this.min !== undefined && this.value < this.min) {
|
|
94
|
-
this.isValid = false;
|
|
95
|
-
this.validationMessage = `Value must be at least ${this.min}`;
|
|
96
|
-
return;
|
|
97
|
-
}
|
|
98
|
-
if (this.max !== undefined && this.value > this.max) {
|
|
99
|
-
this.isValid = false;
|
|
100
|
-
this.validationMessage = `Value must be at most ${this.max}`;
|
|
101
|
-
return;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
this.isValid = true;
|
|
105
|
-
this.validationMessage = '';
|
|
106
|
-
}
|
|
107
|
-
emitChange() {
|
|
108
|
-
this.leChange.emit({
|
|
109
|
-
value: this.value,
|
|
110
|
-
name: this.name,
|
|
111
|
-
externalId: this.externalId,
|
|
112
|
-
isValid: this.isValid
|
|
113
|
-
});
|
|
114
|
-
}
|
|
115
|
-
emitInput() {
|
|
116
|
-
this.leInput.emit({
|
|
117
|
-
value: this.value,
|
|
118
|
-
name: this.name,
|
|
119
|
-
externalId: this.externalId,
|
|
120
|
-
isValid: this.isValid
|
|
121
|
-
});
|
|
122
|
-
}
|
|
123
|
-
updateValue(newValue) {
|
|
124
|
-
if (this.disabled || this.readonly)
|
|
125
|
-
return;
|
|
126
|
-
// Round to avoid floating point errors
|
|
127
|
-
const precision = this.step.toString().split('.')[1]?.length || 0;
|
|
128
|
-
const rounded = parseFloat(newValue.toFixed(precision));
|
|
129
|
-
this.value = rounded;
|
|
130
|
-
this.validate();
|
|
131
|
-
this.emitInput();
|
|
132
|
-
}
|
|
133
|
-
handleInput = (ev) => {
|
|
134
|
-
const input = ev.target;
|
|
135
|
-
const val = parseFloat(input.value);
|
|
136
|
-
if (input.value === '') {
|
|
137
|
-
this.value = undefined;
|
|
138
|
-
}
|
|
139
|
-
else if (!isNaN(val)) {
|
|
140
|
-
this.value = val;
|
|
141
|
-
}
|
|
142
|
-
this.validate();
|
|
143
|
-
this.emitInput();
|
|
144
|
-
};
|
|
145
|
-
handleChange = () => {
|
|
146
|
-
this.validate();
|
|
147
|
-
this.emitChange();
|
|
148
|
-
};
|
|
149
|
-
handleKeyDown = (ev) => {
|
|
150
|
-
if (this.disabled || this.readonly)
|
|
151
|
-
return;
|
|
152
|
-
let multiplier = 1;
|
|
153
|
-
if (ev.shiftKey)
|
|
154
|
-
multiplier = 10;
|
|
155
|
-
if (ev.altKey)
|
|
156
|
-
multiplier = 0.1;
|
|
157
|
-
const current = this.value || 0;
|
|
158
|
-
if (ev.key === 'ArrowUp') {
|
|
159
|
-
ev.preventDefault();
|
|
160
|
-
this.updateValue(current + (this.step * multiplier));
|
|
161
|
-
}
|
|
162
|
-
else if (ev.key === 'ArrowDown') {
|
|
163
|
-
ev.preventDefault();
|
|
164
|
-
this.updateValue(current - (this.step * multiplier));
|
|
165
|
-
}
|
|
166
|
-
};
|
|
167
|
-
handleWheel = (ev) => {
|
|
168
|
-
if (this.disabled || this.readonly)
|
|
169
|
-
return;
|
|
170
|
-
// Only handle if input is focused to prevent accidental scrolling
|
|
171
|
-
if (document.activeElement !== ev.target)
|
|
172
|
-
return;
|
|
173
|
-
ev.preventDefault();
|
|
174
|
-
const current = this.value || 0;
|
|
175
|
-
if (ev.deltaY < 0) {
|
|
176
|
-
this.updateValue(current + this.step);
|
|
177
|
-
}
|
|
178
|
-
else {
|
|
179
|
-
this.updateValue(current - this.step);
|
|
180
|
-
}
|
|
181
|
-
};
|
|
182
|
-
increment = (ev) => {
|
|
183
|
-
ev.preventDefault(); // Prevent focus loss
|
|
184
|
-
const current = this.value || 0;
|
|
185
|
-
this.updateValue(current + this.step);
|
|
186
|
-
// Trigger change event for buttons as they are "final" actions usually
|
|
187
|
-
this.emitChange();
|
|
188
|
-
};
|
|
189
|
-
decrement = (ev) => {
|
|
190
|
-
ev.preventDefault();
|
|
191
|
-
const current = this.value || 0;
|
|
192
|
-
this.updateValue(current - this.step);
|
|
193
|
-
this.emitChange();
|
|
194
|
-
};
|
|
195
|
-
render() {
|
|
196
|
-
return (h("le-component", { key: '6af8d1fd4c89597f7da3be391cabccbb9d1f9800', component: "le-number-input", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: 'e4e0ad02f89b2eb8dd7649d2f2e70bc821cb2774', class: "le-input-wrapper" }, this.label && (h("label", { key: '30ad120d5571018ea9891340b5406f6939a1fe0e', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '27b835ad1559a1ea4366c4b7c2b31d412e8b8ef7', class: classnames('le-input-container', { 'has-error': !this.isValid }) }, this.iconStart && (h("span", { key: '0164cbb985b900b4b3136061a2609987a2c06e9f', class: "icon-start" }, this.iconStart)), h("input", { key: '6d68b764f45d61b7dd4ffe435bd9e9da04c4d87a', id: this.name, type: "number", name: this.name, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel }), this.showSpinners && (h("div", { key: '7ed04341c0c27a7d37afd4baf9698ea7776702f6', class: "le-input-controls" }, h("le-button", { key: '80c96f7cbee40efd2b79f33e8401a13f187092a6', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.increment, disabled: this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max), tabindex: "-1" }, h("span", { key: 'd56b463073ce8174c668138179f1bbc16c700d9f', slot: "icon-only" }, "\u2191")), h("le-button", { key: '74e70e65d6668cc1cee7abfaf464a60a29efa3f9', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.decrement, disabled: this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min), tabindex: "-1" }, h("span", { key: 'e2330cdf9f431b2c9f0953e42f71e897879d10fe', slot: "icon-only" }, "\u2193"))))), !this.isValid && h("div", { key: 'ba9bb8af8c4814b4316c1f0947c50a99fd24634c', class: "le-input-error" }, this.validationMessage), h("div", { key: '30e43ac088f995fe24ab47678ca70fe771b6f1ab', class: "le-input-description" }, h("le-slot", { key: '94f4bd21e32595470781eb6b004c9acbee72b81a', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: 'def94a79248d1887c5416ff95b2c625df85c68d0', name: "description" }))))));
|
|
197
|
-
}
|
|
198
|
-
static get watchers() { return {
|
|
199
|
-
"value": ["valueChanged"]
|
|
200
|
-
}; }
|
|
201
|
-
static get style() { return leNumberInputCss; }
|
|
202
|
-
}, [769, "le-number-input", {
|
|
203
|
-
"value": [1538],
|
|
204
|
-
"name": [1],
|
|
205
|
-
"label": [1],
|
|
206
|
-
"placeholder": [1],
|
|
207
|
-
"min": [2],
|
|
208
|
-
"max": [2],
|
|
209
|
-
"step": [2],
|
|
210
|
-
"required": [4],
|
|
211
|
-
"disabled": [4],
|
|
212
|
-
"readonly": [4],
|
|
213
|
-
"iconStart": [1, "icon-start"],
|
|
214
|
-
"showSpinners": [4, "show-spinners"],
|
|
215
|
-
"externalId": [1, "external-id"],
|
|
216
|
-
"isValid": [32],
|
|
217
|
-
"validationMessage": [32]
|
|
218
|
-
}, undefined, {
|
|
219
|
-
"value": ["valueChanged"]
|
|
220
|
-
}]);
|
|
221
|
-
function defineCustomElement$1() {
|
|
222
|
-
if (typeof customElements === "undefined") {
|
|
223
|
-
return;
|
|
224
|
-
}
|
|
225
|
-
const components = ["le-number-input", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
|
|
226
|
-
components.forEach(tagName => { switch (tagName) {
|
|
227
|
-
case "le-number-input":
|
|
228
|
-
if (!customElements.get(tagName)) {
|
|
229
|
-
customElements.define(tagName, LeNumberInput$1);
|
|
230
|
-
}
|
|
231
|
-
break;
|
|
232
|
-
case "le-button":
|
|
233
|
-
if (!customElements.get(tagName)) {
|
|
234
|
-
defineCustomElement$7();
|
|
235
|
-
}
|
|
236
|
-
break;
|
|
237
|
-
case "le-checkbox":
|
|
238
|
-
if (!customElements.get(tagName)) {
|
|
239
|
-
defineCustomElement$6();
|
|
240
|
-
}
|
|
241
|
-
break;
|
|
242
|
-
case "le-component":
|
|
243
|
-
if (!customElements.get(tagName)) {
|
|
244
|
-
defineCustomElement$5();
|
|
245
|
-
}
|
|
246
|
-
break;
|
|
247
|
-
case "le-popover":
|
|
248
|
-
if (!customElements.get(tagName)) {
|
|
249
|
-
defineCustomElement$4();
|
|
250
|
-
}
|
|
251
|
-
break;
|
|
252
|
-
case "le-slot":
|
|
253
|
-
if (!customElements.get(tagName)) {
|
|
254
|
-
defineCustomElement$3();
|
|
255
|
-
}
|
|
256
|
-
break;
|
|
257
|
-
case "le-string-input":
|
|
258
|
-
if (!customElements.get(tagName)) {
|
|
259
|
-
defineCustomElement$2();
|
|
260
|
-
}
|
|
261
|
-
break;
|
|
262
|
-
} });
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
const LeNumberInput = LeNumberInput$1;
|
|
266
|
-
const defineCustomElement = defineCustomElement$1;
|
|
267
|
-
|
|
268
|
-
export { LeNumberInput, defineCustomElement };
|
|
269
|
-
//# sourceMappingURL=le-number-input.js.map
|
|
270
|
-
|
|
271
|
-
//# sourceMappingURL=le-number-input.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"le-number-input.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,shFAAshF;;MCuBliFA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAA,WAAA,CAAA;;;;;;;;;;;AAGxB;;AAEG;AACqC,IAAA,KAAK;AAE7C;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,WAAW;AAEnB;;AAEG;AACK,IAAA,GAAG;AAEX;;AAEG;AACK,IAAA,GAAG;AAEX;;AAEG;IACK,IAAI,GAAW,CAAC;AAExB;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,SAAS;AAEjB;;AAEG;IACK,YAAY,GAAY,IAAI;AAEpC;;AAEG;AACK,IAAA,UAAU;AAElB;;AAEG;IACc,OAAO,GAAY,IAAI;IACvB,iBAAiB,GAAW,EAAE;AAE/C;;AAEG;AACM,IAAA,QAAQ;AAEjB;;AAEG;AACM,IAAA,OAAO;IAGhB,YAAY,GAAA;QACV,IAAI,CAAC,QAAQ,EAAE;;IAGT,QAAQ,GAAA;QACd,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;AAC3F,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,YAAA,IAAI,CAAC,iBAAiB,GAAG,wBAAwB;YACjD;;QAGF,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AACzE,YAAA,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;AACnD,gBAAA,IAAI,CAAC,OAAO,GAAG,KAAK;gBACpB,IAAI,CAAC,iBAAiB,GAAG,CAAA,uBAAA,EAA0B,IAAI,CAAC,GAAG,EAAE;gBAC7D;;AAEF,YAAA,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;AACnD,gBAAA,IAAI,CAAC,OAAO,GAAG,KAAK;gBACpB,IAAI,CAAC,iBAAiB,GAAG,CAAA,sBAAA,EAAyB,IAAI,CAAC,GAAG,EAAE;gBAC5D;;;AAIJ,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,QAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE;;IAGrB,UAAU,GAAA;AAChB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,OAAO,EAAE,IAAI,CAAC;AACf,SAAA,CAAC;;IAGI,SAAS,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;YAChB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,OAAO,EAAE,IAAI,CAAC;AACf,SAAA,CAAC;;AAGI,IAAA,WAAW,CAAC,QAAgB,EAAA;AAClC,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE;;QAGpC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC;QACjE,MAAM,OAAO,GAAG,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;AAEvD,QAAA,IAAI,CAAC,KAAK,GAAG,OAAO;QACpB,IAAI,CAAC,QAAQ,EAAE;QACf,IAAI,CAAC,SAAS,EAAE;;AAGV,IAAA,WAAW,GAAG,CAAC,EAAS,KAAI;AAClC,QAAA,MAAM,KAAK,GAAG,EAAE,CAAC,MAA0B;QAC3C,MAAM,GAAG,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC;AAEnC,QAAA,IAAI,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE;AACtB,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS;;AACjB,aAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;AACtB,YAAA,IAAI,CAAC,KAAK,GAAG,GAAG;;QAGlB,IAAI,CAAC,QAAQ,EAAE;QACf,IAAI,CAAC,SAAS,EAAE;AAClB,KAAC;IAEO,YAAY,GAAG,MAAK;QAC1B,IAAI,CAAC,QAAQ,EAAE;QACf,IAAI,CAAC,UAAU,EAAE;AACnB,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,EAAiB,KAAI;AAC5C,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE;QAEpC,IAAI,UAAU,GAAG,CAAC;QAClB,IAAI,EAAE,CAAC,QAAQ;YAAE,UAAU,GAAG,EAAE;QAChC,IAAI,EAAE,CAAC,MAAM;YAAE,UAAU,GAAG,GAAG;AAE/B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;AAE/B,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,SAAS,EAAE;YACxB,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,IAAI,CAAC,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,CAAC;;AAC/C,aAAA,IAAI,EAAE,CAAC,GAAG,KAAK,WAAW,EAAE;YACjC,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,IAAI,CAAC,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,CAAC;;AAExD,KAAC;AAEO,IAAA,WAAW,GAAG,CAAC,EAAc,KAAI;AACvC,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE;;AAEpC,QAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,EAAE,CAAC,MAAM;YAAE;QAE1C,EAAE,CAAC,cAAc,EAAE;AACnB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;AAE/B,QAAA,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;YACjB,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;;aAChC;YACL,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;;AAEzC,KAAC;AAEO,IAAA,SAAS,GAAG,CAAC,EAAS,KAAI;AAChC,QAAA,EAAE,CAAC,cAAc,EAAE,CAAC;AACpB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;QAC/B,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;;QAErC,IAAI,CAAC,UAAU,EAAE;AACnB,KAAC;AAEO,IAAA,SAAS,GAAG,CAAC,EAAS,KAAI;QAChC,EAAE,CAAC,cAAc,EAAE;AACnB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;QAC/B,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;QACrC,IAAI,CAAC,UAAU,EAAE;AACnB,KAAC;IAED,MAAM,GAAA;QACJ,QACE,CAAc,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAC,iBAAiB,EAAC,SAAS,EAAE,UAAU,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAA,EAC5F,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC1B,IAAI,CAAC,KAAK,KACT,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAA,EAAG,IAAI,CAAC,KAAK,CAAS,CACvE,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,UAAU,CAAC,oBAAoB,EAAE,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,EAAA,EACzE,IAAI,CAAC,SAAS,KACb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,SAAS,CAAQ,CACjD,EAED,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,CAAA,EAED,IAAI,CAAC,YAAY,KAChB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CACE,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,OAAO,qBAEZ,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC,EAC9F,QAAQ,EAAC,IAAI,EAAA,EAEb,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,WAAW,EAAA,EAAA,QAAA,CAAS,CACrB,EACZ,CACE,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,OAAO,qBAEZ,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC,EAC9F,QAAQ,EAAC,IAAI,EAAA,EAEb,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,WAAW,aAAS,CACrB,CACR,CACP,CACG,EAEL,CAAC,IAAI,CAAC,OAAO,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAE,EAAA,IAAI,CAAC,iBAAiB,CAAO,EAE5E,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,aAAa,EAAA,EACjE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,CAAQ,CACxB,CACN,CACF,CACO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["LeNumberInput","__stencil_proxyCustomElement"],"sources":["src/components/le-number-input/le-number-input.css?tag=le-number-input&encapsulation=shadow","src/components/le-number-input/le-number-input.tsx"],"sourcesContent":[":host {\n display: block;\n --le-input-bg: var(--le-color-surface, #ffffff);\n --le-input-color: var(--le-color-text-primary, #333333);\n --le-input-border: var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);\n --le-input-radius: var(--le-radius-sm, 4px);\n --le-input-padding: 2px 6px;\n --le-input-height: 1.5rem;\n --le-input-label-color: var(--le-color-text-primary, #333333);\n --le-input-desc-color: var(--le-color-text-secondary, #666666);\n --le-input-placeholder-color: #999999;\n --le-input-border-error: 2px solid var(--le-color-danger, #dc3545);\n --le-input-error-color: var(--le-color-danger, #dc3545);\n}\n\n.le-input-wrapper {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.le-input-label {\n display: block;\n font-size: 0.9em;\n font-weight: 500;\n color: var(--le-input-label-color);\n margin-bottom: 2px;\n}\n\n.le-input-container {\n position: relative;\n display: flex;\n align-items: center;\n background: var(--le-input-bg);\n border: var(--le-input-border);\n border-radius: var(--le-input-radius);\n transition: border-color 0.2s;\n}\n\n.le-input-container:focus-within {\n outline: 2px solid var(--le-color-focus);\n outline-offset: 2px;\n}\n\n.le-input-container.has-error {\n border: var(--le-input-border-error);\n}\n\n:host([disabled]) .le-input-container {\n opacity: 0.6;\n background-color: rgba(0,0,0,0.05);\n cursor: not-allowed;\n}\n\ninput {\n flex: 1;\n width: 100%;\n height: calc(var(--le-input-height) - 2px);\n padding: var(--le-input-padding);\n border: none;\n background: transparent;\n color: var(--le-input-color);\n font-family: inherit;\n font-size: inherit;\n outline: none;\n text-align: right; /* Aligned to end */\n -moz-appearance: textfield; /* Remove default spinners in Firefox */\n}\n\n/* Remove default spinners in Chrome/Safari/Edge */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\ninput::placeholder {\n color: var(--le-input-placeholder-color);\n}\n\n.icon-start, .icon-end {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n color: var(--le-input-desc-color);\n}\n\n.le-input-controls {\n display: flex;\n flex-direction: column;\n border-left: 1px solid var(--le-color-border, #cccccc);\n height: 100%;\n}\n\n.le-input-control-btn {\n --le-button-border-radius: 0;\n --le-button-padding-x: 0;\n --le-button-padding-y: 0;\n --le-button-small-font-size: 9.5px;\n --le-button-small-padding: 0 0.2rem;\n --le-button-icon-aspect-ratio: 2;\n\n display: flex;\n align-items: center;\n justify-content: center;\n height: 50%;\n cursor: pointer;\n background: none;\n border: none;\n color: var(--le-input-desc-color);\n font-size: 10px;\n line-height: 1;\n}\n\n.le-input-control-btn:hover {\n background-color: rgba(0,0,0,0.05);\n color: var(--le-color-primary, #007bff);\n}\n\n.le-input-control-btn:active {\n background-color: rgba(0,0,0,0.1);\n}\n\n.le-input-description {\n font-size: 0.85em;\n color: var(--le-input-desc-color);\n margin-top: 2px;\n}\n\n.le-input-error {\n font-size: 0.85em;\n color: var(--le-input-error-color);\n margin-top: 2px;\n}\n","import { Component, Prop, Event, EventEmitter, State, h, Element, Watch } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A number input component with validation, keyboard controls, and custom spinners.\n *\n * @slot - The label text for the input\n * @slot description - Additional description text displayed below the input\n * @slot icon-start - Icon to display at the start of the input\n *\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-border-error - Input border style when invalid\n * @cssprop --le-input-radius - Input border radius\n * @cssprop --le-input-padding - Input padding\n */\n@Component({\n tag: 'le-number-input',\n styleUrl: 'le-number-input.css',\n shadow: true,\n})\nexport class LeNumberInput {\n @Element() el: HTMLElement;\n\n /**\n * The value of the input\n */\n @Prop({ mutable: true, reflect: true }) value: number;\n\n /**\n * The name of the input\n */\n @Prop() name: string;\n\n /**\n * Label for the input\n */\n @Prop() label: string;\n\n /**\n * Placeholder text\n */\n @Prop() placeholder: string;\n\n /**\n * Minimum allowed value\n */\n @Prop() min?: number;\n\n /**\n * Maximum allowed value\n */\n @Prop() max?: number;\n\n /**\n * Step value for increment/decrement\n */\n @Prop() step: number = 1;\n\n /**\n * Whether the input is required\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether the input is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether the input is read-only\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Icon for the start icon\n */\n @Prop() iconStart?: string;\n\n /**\n * Whether to show the spinner controls\n */\n @Prop() showSpinners: boolean = true;\n\n /**\n * External ID for linking with external systems\n */\n @Prop() externalId: string;\n\n /**\n * Internal validation state\n */\n @State() private isValid: boolean = true;\n @State() private validationMessage: string = '';\n\n /**\n * Emitted when the value changes (on blur or Enter)\n */\n @Event() leChange: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n /**\n * Emitted when the input value changes (on keystroke/spin)\n */\n @Event() leInput: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n @Watch('value')\n valueChanged() {\n this.validate();\n }\n\n private validate() {\n if (this.required && (this.value === undefined || this.value === null || isNaN(this.value))) {\n this.isValid = false;\n this.validationMessage = 'This field is required';\n return;\n }\n\n if (this.value !== undefined && this.value !== null && !isNaN(this.value)) {\n if (this.min !== undefined && this.value < this.min) {\n this.isValid = false;\n this.validationMessage = `Value must be at least ${this.min}`;\n return;\n }\n if (this.max !== undefined && this.value > this.max) {\n this.isValid = false;\n this.validationMessage = `Value must be at most ${this.max}`;\n return;\n }\n }\n\n this.isValid = true;\n this.validationMessage = '';\n }\n\n private emitChange() {\n this.leChange.emit({\n value: this.value,\n name: this.name,\n externalId: this.externalId,\n isValid: this.isValid\n });\n }\n\n private emitInput() {\n this.leInput.emit({\n value: this.value,\n name: this.name,\n externalId: this.externalId,\n isValid: this.isValid\n });\n }\n\n private updateValue(newValue: number) {\n if (this.disabled || this.readonly) return;\n \n // Round to avoid floating point errors\n const precision = this.step.toString().split('.')[1]?.length || 0;\n const rounded = parseFloat(newValue.toFixed(precision));\n \n this.value = rounded;\n this.validate();\n this.emitInput();\n }\n\n private handleInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement;\n const val = parseFloat(input.value);\n \n if (input.value === '') {\n this.value = undefined;\n } else if (!isNaN(val)) {\n this.value = val;\n }\n \n this.validate();\n this.emitInput();\n };\n\n private handleChange = () => {\n this.validate();\n this.emitChange();\n };\n\n private handleKeyDown = (ev: KeyboardEvent) => {\n if (this.disabled || this.readonly) return;\n\n let multiplier = 1;\n if (ev.shiftKey) multiplier = 10;\n if (ev.altKey) multiplier = 0.1;\n\n const current = this.value || 0;\n\n if (ev.key === 'ArrowUp') {\n ev.preventDefault();\n this.updateValue(current + (this.step * multiplier));\n } else if (ev.key === 'ArrowDown') {\n ev.preventDefault();\n this.updateValue(current - (this.step * multiplier));\n }\n };\n\n private handleWheel = (ev: WheelEvent) => {\n if (this.disabled || this.readonly) return;\n // Only handle if input is focused to prevent accidental scrolling\n if (document.activeElement !== ev.target) return;\n\n ev.preventDefault();\n const current = this.value || 0;\n \n if (ev.deltaY < 0) {\n this.updateValue(current + this.step);\n } else {\n this.updateValue(current - this.step);\n }\n };\n\n private increment = (ev: Event) => {\n ev.preventDefault(); // Prevent focus loss\n const current = this.value || 0;\n this.updateValue(current + this.step);\n // Trigger change event for buttons as they are \"final\" actions usually\n this.emitChange();\n };\n\n private decrement = (ev: Event) => {\n ev.preventDefault();\n const current = this.value || 0;\n this.updateValue(current - this.step);\n this.emitChange();\n };\n\n render() {\n return (\n <le-component component=\"le-number-input\" hostClass={classnames({ 'disabled': this.disabled })}>\n <div class=\"le-input-wrapper\">\n {this.label && (\n <label class=\"le-input-label\" htmlFor={this.name}>{this.label}</label>\n )}\n \n <div class={classnames('le-input-container', { 'has-error': !this.isValid })}>\n {this.iconStart && (\n <span class=\"icon-start\">{this.iconStart}</span>\n )}\n \n <input\n id={this.name}\n type=\"number\"\n name={this.name}\n placeholder={this.placeholder}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n onInput={this.handleInput}\n onChange={this.handleChange}\n onKeyDown={this.handleKeyDown}\n onWheel={this.handleWheel}\n />\n \n {this.showSpinners && (\n <div class=\"le-input-controls\">\n <le-button\n mode=\"default\"\n variant=\"clear\" \n size=\"small\"\n icon-only\n class=\"le-input-control-btn\" \n onClick={this.increment}\n disabled={this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max)}\n tabindex=\"-1\"\n >\n <span slot=\"icon-only\">↑</span>\n </le-button>\n <le-button\n mode=\"default\"\n variant=\"clear\" \n size=\"small\" \n icon-only \n class=\"le-input-control-btn\" \n onClick={this.decrement}\n disabled={this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min)}\n tabindex=\"-1\"\n >\n <span slot=\"icon-only\">↓</span>\n </le-button>\n </div>\n )}\n </div>\n\n {!this.isValid && <div class=\"le-input-error\">{this.validationMessage}</div>}\n\n <div class=\"le-input-description\">\n <le-slot name=\"description\" type=\"text\" tag=\"p\" label=\"Description\">\n <slot name=\"description\"></slot>\n </le-slot>\n </div>\n </div>\n </le-component>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { L as LePopover$1, d as defineCustomElement$1 } from './le-popover2.js';
|
|
2
|
-
|
|
3
|
-
const LePopover = LePopover$1;
|
|
4
|
-
const defineCustomElement = defineCustomElement$1;
|
|
5
|
-
|
|
6
|
-
export { LePopover, defineCustomElement };
|
|
7
|
-
//# sourceMappingURL=le-popover.js.map
|
|
8
|
-
|
|
9
|
-
//# sourceMappingURL=le-popover.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"le-popover.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"le-popover2.js","mappings":";;AAAA,MAAM,YAAY,GAAG,uwHAAuwH;;MCmB/wH,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;;;;;;;;;;;AAGpB;;AAEG;AACqC,IAAA,IAAI;AAE5C;;AAEG;IACqC,IAAI,GAAY,KAAK;AAE7D;;AAEG;IACK,QAAQ,GAAiD,QAAQ;AAEzE;;AAEG;IACK,KAAK,GAA+B,OAAO;AAEnD;;AAEG;AACK,IAAA,YAAY;AAEpB;;AAEG;IACK,SAAS,GAAY,IAAI;AAEjC;;AAEG;IACK,mBAAmB,GAAY,IAAI;AAE3C;;AAEG;IACK,aAAa,GAAY,IAAI;AAErC;;AAEG;IACK,MAAM,GAAW,CAAC;AAE1B;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;IACK,QAAQ,GAAY,OAAO;AAEnC;;AAEG;AACK,IAAA,QAAQ;AAEhB;;AAEG;AACM,IAAA,aAAa;AAEtB;;AAEG;AACM,IAAA,cAAc;IAEN,YAAY,GAAY,KAAK;AAEtC,IAAA,SAAS;AACT,IAAA,SAAS;AACT,IAAA,QAAQ,GAAW,CAAc,WAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;IAC1E,aAAa,GAAc,EAAE;IAErC,gBAAgB,GAAA;;QAEd,IAAI,CAAC,SAAS,EAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,mBAAoC,CAAC;;QAGrF,QAAQ,CAAC,gBAAgB,CAAC,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,CAAC;;IAGhF,oBAAoB,GAAA;QAClB,IAAI,CAAC,SAAS,EAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,mBAAoC,CAAC;QACxF,QAAQ,CAAC,mBAAmB,CAAC,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,CAAC;QACjF,IAAI,CAAC,qBAAqB,EAAE;;AAG9B;;AAEG;AACK,IAAA,gBAAgB,CAAC,OAAgB,EAAA;QACvC,MAAM,aAAa,GAAc,EAAE;AACnC,QAAA,IAAI,MAAM,GAAG,OAAO,CAAC,aAAa;QAElC,OAAO,MAAM,EAAE;AACb,YAAA,MAAM,KAAK,GAAG,gBAAgB,CAAC,MAAM,CAAC;AACtC,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS;AACnE,YAAA,IAAI,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;AAClC,gBAAA,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;;AAE5B,YAAA,MAAM,GAAG,MAAM,CAAC,aAAa;;;AAI/B,QAAA,OAAO,aAAa;;AAGtB;;AAEG;IACK,kBAAkB,GAAA;QACxB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;QAErB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC;;AAG1D,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,IAAG;AAClC,YAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACzE,SAAC,CAAC;;AAGF,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACvE,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;AAGzE;;AAEG;IACK,qBAAqB,GAAA;AAC3B,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,IAAG;YAClC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;AACzD,SAAC,CAAC;QACF,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;QACvD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;AACvD,QAAA,IAAI,CAAC,aAAa,GAAG,EAAE;;IAGjB,YAAY,GAAG,MAAK;AAC1B,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,cAAc,EAAE;;AAEzB,KAAC;AAEO,IAAA,mBAAmB,GAAG,CAAC,KAAkB,KAAI;AACnD,QAAA,IAAI,KAAK,CAAC,QAAQ,KAAK,MAAM,EAAE;AAC7B,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI;YAChB,IAAI,CAAC,kBAAkB,EAAE;YACzB,IAAI,CAAC,cAAc,EAAE;AACrB,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;;aACpB;AACL,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK;YACzB,IAAI,CAAC,qBAAqB,EAAE;AAC5B,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE;;AAE9B,KAAC;AAEO,IAAA,sBAAsB,GAAG,CAAC,KAAY,KAAI;QAChD,MAAM,WAAW,GAAG,KAAoB;QACxC,IAAI,WAAW,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC,EAAE;YAAE;AAE7C,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,EAAE;;AAEf,KAAC;AAED;;AAEG;AAEH,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,sBAAsB,EAAE;AAC7D,YAAA,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE;AAC3B,SAAA,CAAC,CAAC;AAEH,QAAA,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE;;AAG/B;;AAEG;AAEH,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE;;AAG/B;;AAEG;AAEH,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,MAAM,IAAI,CAAC,IAAI,EAAE;;aACZ;AACL,YAAA,MAAM,IAAI,CAAC,IAAI,EAAE;;;AAIb,IAAA,kBAAkB,GAAG,CAAC,KAAiB,KAAI;QACjD,KAAK,CAAC,eAAe,EAAE;QACvB,IAAI,CAAC,MAAM,EAAE;AACf,KAAC;IAEO,cAAc,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;QAExC,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,qBAAqB,EAAE;QAC1D,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,qBAAqB,EAAE;AAC1D,QAAA,MAAM,aAAa,GAAG,MAAM,CAAC,UAAU;AACvC,QAAA,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW;QACzC,MAAM,eAAe,GAAG,CAAC;AAEzB,QAAA,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ;AAC5B,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK;;QAGtB,MAAM,UAAU,GAAG,cAAc,GAAG,WAAW,CAAC,MAAM,GAAG,eAAe;AACxE,QAAA,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,GAAG,eAAe;QACpD,MAAM,UAAU,GAAG,aAAa,GAAG,WAAW,CAAC,KAAK,GAAG,eAAe;AACtE,QAAA,MAAM,SAAS,GAAG,WAAW,CAAC,IAAI,GAAG,eAAe;AAEpD,QAAA,IAAI,QAAQ,KAAK,MAAM,EAAE;YACvB,IAAI,UAAU,IAAI,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;gBAClD,QAAQ,GAAG,QAAQ;;iBACd,IAAI,UAAU,IAAI,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;gBACzD,QAAQ,GAAG,KAAK;;iBACX,IAAI,UAAU,IAAI,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE;gBACxD,QAAQ,GAAG,OAAO;;iBACb,IAAI,SAAS,IAAI,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE;gBACvD,QAAQ,GAAG,MAAM;;iBACZ;AACL,gBAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,CAAC;gBACxE,IAAI,QAAQ,KAAK,UAAU;oBAAE,QAAQ,GAAG,QAAQ;qBAC3C,IAAI,QAAQ,KAAK,UAAU;oBAAE,QAAQ,GAAG,KAAK;qBAC7C,IAAI,QAAQ,KAAK,UAAU;oBAAE,QAAQ,GAAG,OAAO;;oBAC/C,QAAQ,GAAG,MAAM;;;;QAK1B,IAAI,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,QAAQ,EAAE;AAC/C,YAAA,IAAI,KAAK,KAAK,OAAO,IAAI,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,aAAa,GAAG,eAAe,EAAE;gBAC/F,KAAK,GAAG,KAAK;;AACR,iBAAA,IAAI,KAAK,KAAK,KAAK,IAAI,WAAW,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK,GAAG,eAAe,EAAE;gBACrF,KAAK,GAAG,OAAO;;AACV,iBAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;gBAC7B,MAAM,aAAa,GAAG,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC;gBAC9D,IAAI,aAAa,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC,GAAG,eAAe,EAAE;oBAC3D,KAAK,GAAG,OAAO;;AACV,qBAAA,IAAI,aAAa,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC,GAAG,aAAa,GAAG,eAAe,EAAE;oBAClF,KAAK,GAAG,KAAK;;;;;QAMnB,IAAI,GAAG,GAAW,CAAC;QACnB,IAAI,IAAI,GAAW,CAAC;QACpB,IAAI,SAAS,GAAkB,IAAI;QAEnC,QAAQ,QAAQ;AACd,YAAA,KAAK,KAAK;AACR,gBAAA,GAAG,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM;AACxD,gBAAA,IAAI,GAAG,GAAG,eAAe,EAAE;AACzB,oBAAA,SAAS,GAAG,WAAW,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,CAAC;oBAC/D,GAAG,GAAG,eAAe;;gBAEvB;AACF,YAAA,KAAK,QAAQ;gBACX,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM;gBACtC,IAAI,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,cAAc,GAAG,eAAe,EAAE;AAC/D,oBAAA,SAAS,GAAG,cAAc,GAAG,GAAG,GAAG,eAAe;;gBAEpD;AACF,YAAA,KAAK,MAAM;AACT,gBAAA,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM;AACzD,gBAAA,GAAG,GAAG,WAAW,CAAC,GAAG;gBACrB,IAAI,IAAI,GAAG,eAAe;oBAAE,IAAI,GAAG,eAAe;gBAClD;AACF,YAAA,KAAK,OAAO;gBACV,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM;AACtC,gBAAA,GAAG,GAAG,WAAW,CAAC,GAAG;gBACrB,IAAI,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,aAAa,GAAG,eAAe,EAAE;oBAC9D,IAAI,GAAG,aAAa,GAAG,WAAW,CAAC,KAAK,GAAG,eAAe;;gBAE5D;;;QAIJ,IAAI,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,QAAQ,EAAE;YAC/C,QAAQ,KAAK;AACX,gBAAA,KAAK,OAAO;AACV,oBAAA,IAAI,GAAG,WAAW,CAAC,IAAI;oBACvB;AACF,gBAAA,KAAK,QAAQ;AACX,oBAAA,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC;oBACvE;AACF,gBAAA,KAAK,KAAK;oBACR,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;oBAC5C;;;AAIJ,YAAA,IAAI,IAAI,GAAG,eAAe,EAAE;gBAC1B,IAAI,GAAG,eAAe;;iBACjB,IAAI,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,aAAa,GAAG,eAAe,EAAE;gBACrE,IAAI,GAAG,aAAa,GAAG,WAAW,CAAC,KAAK,GAAG,eAAe;;;;QAK9D,IAAI,QAAQ,KAAK,MAAM,IAAI,QAAQ,KAAK,OAAO,EAAE;YAC/C,QAAQ,KAAK;AACX,gBAAA,KAAK,OAAO;AACV,oBAAA,GAAG,GAAG,WAAW,CAAC,GAAG;oBACrB;AACF,gBAAA,KAAK,QAAQ;AACX,oBAAA,GAAG,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC;oBACvE;AACF,gBAAA,KAAK,KAAK;oBACR,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM;oBAC7C;;YAGJ,IAAI,GAAG,GAAG,eAAe;gBAAE,GAAG,GAAG,eAAe;YAChD,IAAI,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,cAAc,GAAG,eAAe,EAAE;AAC/D,gBAAA,SAAS,GAAG,cAAc,GAAG,GAAG,GAAG,eAAe;;;;QAKtD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,CAAA,EAAG,GAAG,CAAA,EAAA,CAAI;QACrC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,GAAG,CAAA,EAAG,IAAI,CAAA,EAAA,CAAI;QAEvC,IAAI,SAAS,KAAK,IAAI,IAAI,SAAS,GAAG,GAAG,EAAE;YACzC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,EAAG,SAAS,CAAA,EAAA,CAAI;YACjD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM;;aAClC;YACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE;YACnC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE;;AAGrC,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;;IAG1B,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAA2B;YAC5C,UAAU,EAAE,IAAI,CAAC,YAAY,GAAG,SAAS,GAAG,QAAQ;SACrD;QAED,IAAI,IAAI,CAAC,KAAK;AAAE,YAAA,aAAa,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;QAChD,IAAI,IAAI,CAAC,QAAQ;AAAE,YAAA,aAAa,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;QACzD,IAAI,IAAI,CAAC,QAAQ;AAAE,YAAA,aAAa,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;QAEzD,OAAO;AACL,YAAA,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAC1B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAClC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAA,EAEhC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACtD,CAAc,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,QAAA,CAAA,CACP,CACJ,CACH;AAEN,YAAA,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,IAAI,CAAC,mBAAmB,GAAG,MAAM,GAAG,QAAQ,EACrD,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAClC,KAAK,EAAE,aAAa,EAAA,EAEnB,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,SAAS,MACnC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC3B,IAAI,CAAC,YAAY,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,YAAY,CAAQ,EAC9E,IAAI,CAAC,SAAS,KACb,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,kBAAkB,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAAA,YAAA,EACf,OAAO,EAAA,EAAA,QAAA,CAGX,CACV,CACG,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT;SAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/le-popover/le-popover.css?tag=le-popover&encapsulation=shadow","src/components/le-popover/le-popover.tsx"],"sourcesContent":["/* ============================================\n le-popover.css\n Popover using native HTML Popover API\n ============================================ */\n\n:host {\n display: inline-block;\n position: relative;\n}\n\n/* ============================================\n Trigger\n ============================================ */\n\n.le-popover-trigger {\n display: inline-flex;\n cursor: pointer;\n}\n\n.le-popover-default-trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n border: 1px solid var(--le-color-border, #e0e0e0);\n border-radius: var(--le-radius-md, 6px);\n background: var(--le-color-surface, #fff);\n color: var(--le-color-text-secondary, #666);\n font-size: 16px;\n cursor: pointer;\n transition: all var(--le-transition-fast, 0.15s ease);\n}\n\n.le-popover-default-trigger:hover {\n border-color: var(--le-color-primary, #2196f3);\n color: var(--le-color-primary, #2196f3);\n background: var(--le-color-primary-light, rgba(33, 150, 243, 0.1));\n}\n\n/* ============================================\n Popover Content (native popover)\n ============================================ */\n\n.le-popover-content {\n /* Reset native popover defaults */\n margin: 0;\n padding: 0;\n border: none;\n background: transparent;\n \n /* Positioning - will be set via JS */\n position: fixed;\n inset: unset;\n \n /* Styling */\n background: var(--le-color-surface, #ffffff);\n border: 1px solid var(--le-color-border, #e0e0e0);\n border-radius: var(--le-radius-lg, 8px);\n box-shadow: var(--le-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));\n overflow: hidden;\n font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);\n font-size: var(--le-font-size-sm, 0.875rem);\n color: var(--le-color-text, #333);\n \n /* Animation */\n opacity: 0;\n transform: scale(0.95);\n transition: opacity 0.15s ease, transform 0.15s ease, display 0.15s ease allow-discrete;\n}\n\n/* When popover is open */\n.le-popover-content:popover-open {\n opacity: 1;\n transform: scale(1);\n}\n\n/* Starting style for animation (CSS Anchor Positioning spec) */\n@starting-style {\n .le-popover-content:popover-open {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n\n/* ============================================\n Header\n ============================================ */\n\n.le-popover-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-sm, 8px);\n border-bottom: 1px solid var(--le-color-border, #e0e0e0);\n background: var(--le-color-surface-alt, #f9f9f9);\n min-height: 32px;\n}\n\n.le-popover-title {\n font-weight: var(--le-font-weight-semibold, 600);\n font-size: var(--le-font-size-sm, 0.875rem);\n color: var(--le-color-text, #333);\n}\n\n.le-popover-close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--le-color-text-secondary, #666);\n font-size: 18px;\n line-height: 1;\n cursor: pointer;\n border-radius: var(--le-radius-sm, 4px);\n transition: background-color 0.15s, color 0.15s;\n}\n\n.le-popover-close:hover {\n background: var(--le-color-surface-hover, rgba(0, 0, 0, 0.05));\n color: var(--le-color-text, #333);\n}\n\n/* ============================================\n Body\n ============================================ */\n\n.le-popover-body {\n padding: var(--le-space-md, 12px);\n}\n\n/* ============================================\n Scrollable content\n ============================================ */\n\n.le-popover-content[style*=\"overflow-y: auto\"] .le-popover-body {\n overflow-y: auto;\n}\n","import { Component, Prop, Method, Event, EventEmitter, State, h, Element } from '@stencil/core';\n\n/**\n * A popover component for displaying floating content.\n * \n * Uses the native HTML Popover API for proper layering with dialogs\n * and other top-layer elements. Falls back gracefully in older browsers.\n *\n * @slot - Content to display inside the popover\n * @slot trigger - Element that triggers the popover (optional)\n * \n * @cmsInternal true\n * @cmsCategory System\n */\n@Component({\n tag: 'le-popover',\n styleUrl: 'le-popover.css',\n shadow: true,\n})\nexport class LePopover {\n @Element() el: HTMLElement;\n\n /**\n * Mode of the popover should be 'default' for internal use\n */\n @Prop({ mutable: true, reflect: true }) mode: 'default' | 'admin';\n\n /**\n * Whether the popover is currently open\n */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /**\n * Position of the popover relative to its trigger\n */\n @Prop() position: 'top' | 'bottom' | 'left' | 'right' | 'auto' = 'bottom';\n\n /**\n * Alignment of the popover\n */\n @Prop() align: 'start' | 'center' | 'end' = 'start';\n\n /**\n * Optional title for the popover header\n */\n @Prop() popoverTitle?: string;\n\n /**\n * Whether to show a close button in the header\n */\n @Prop() showClose: boolean = true;\n\n /**\n * Whether clicking outside closes the popover\n */\n @Prop() closeOnClickOutside: boolean = true;\n\n /**\n * Whether pressing Escape closes the popover\n */\n @Prop() closeOnEscape: boolean = true;\n\n /**\n * Offset from the trigger element (in pixels)\n */\n @Prop() offset: number = 8;\n\n /**\n * Fixed width for the popover (e.g., '300px', '20rem')\n */\n @Prop() width?: string;\n\n /**\n * Minimum width for the popover (e.g., '200px', '15rem')\n */\n @Prop() minWidth?: string = '200px';\n\n /**\n * Maximum width for the popover (e.g., '400px', '25rem')\n */\n @Prop() maxWidth?: string;\n\n /**\n * Emitted when the popover opens\n */\n @Event() lePopoverOpen: EventEmitter<void>;\n\n /**\n * Emitted when the popover closes\n */\n @Event() lePopoverClose: EventEmitter<void>;\n\n @State() private isPositioned: boolean = false;\n\n private triggerEl?: HTMLElement;\n private popoverEl?: HTMLElement;\n private uniqueId: string = `le-popover-${Math.random().toString(36).substr(2, 9)}`;\n private scrollParents: Element[] = [];\n\n componentDidLoad() {\n // Listen for toggle events from the native popover API\n this.popoverEl?.addEventListener('toggle', this.handlePopoverToggle as EventListener);\n \n // Listen for other popovers opening to close this one\n document.addEventListener('le-popover-will-open', this.handleOtherPopoverOpen);\n }\n\n disconnectedCallback() {\n this.popoverEl?.removeEventListener('toggle', this.handlePopoverToggle as EventListener);\n document.removeEventListener('le-popover-will-open', this.handleOtherPopoverOpen);\n this.removeScrollListeners();\n }\n\n /**\n * Find all scrollable parent elements\n */\n private getScrollParents(element: Element): Element[] {\n const scrollParents: Element[] = [];\n let parent = element.parentElement;\n \n while (parent) {\n const style = getComputedStyle(parent);\n const overflow = style.overflow + style.overflowY + style.overflowX;\n if (/(auto|scroll)/.test(overflow)) {\n scrollParents.push(parent);\n }\n parent = parent.parentElement;\n }\n \n // Always include window for page scroll\n return scrollParents;\n }\n\n /**\n * Add scroll listeners to all scrollable parents\n */\n private addScrollListeners() {\n if (!this.triggerEl) return;\n \n this.scrollParents = this.getScrollParents(this.triggerEl);\n \n // Listen to each scroll parent\n this.scrollParents.forEach(parent => {\n parent.addEventListener('scroll', this.handleScroll, { passive: true });\n });\n \n // Also listen to window scroll and resize\n window.addEventListener('scroll', this.handleScroll, { passive: true });\n window.addEventListener('resize', this.handleScroll, { passive: true });\n }\n\n /**\n * Remove scroll listeners\n */\n private removeScrollListeners() {\n this.scrollParents.forEach(parent => {\n parent.removeEventListener('scroll', this.handleScroll);\n });\n window.removeEventListener('scroll', this.handleScroll);\n window.removeEventListener('resize', this.handleScroll);\n this.scrollParents = [];\n }\n\n private handleScroll = () => {\n if (this.open) {\n this.updatePosition();\n }\n };\n\n private handlePopoverToggle = (event: ToggleEvent) => {\n if (event.newState === 'open') {\n this.open = true;\n this.addScrollListeners();\n this.updatePosition();\n this.lePopoverOpen.emit();\n } else {\n this.open = false;\n this.isPositioned = false;\n this.removeScrollListeners();\n this.lePopoverClose.emit();\n }\n };\n\n private handleOtherPopoverOpen = (event: Event) => {\n const customEvent = event as CustomEvent;\n if (customEvent.detail?.popover === this.el) return;\n \n if (this.open) {\n this.hide();\n }\n };\n\n /**\n * Opens the popover\n */\n @Method()\n async show() {\n document.dispatchEvent(new CustomEvent('le-popover-will-open', {\n detail: { popover: this.el }\n }));\n \n this.popoverEl?.showPopover();\n }\n\n /**\n * Closes the popover\n */\n @Method()\n async hide() {\n this.popoverEl?.hidePopover();\n }\n\n /**\n * Toggles the popover\n */\n @Method()\n async toggle() {\n if (this.open) {\n await this.hide();\n } else {\n await this.show();\n }\n }\n\n private handleTriggerClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.toggle();\n };\n\n private updatePosition() {\n if (!this.triggerEl || !this.popoverEl) return;\n\n const triggerRect = this.triggerEl.getBoundingClientRect();\n const popoverRect = this.popoverEl.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const viewportPadding = 8;\n\n let position = this.position;\n let align = this.align;\n\n // Auto-position logic\n const spaceBelow = viewportHeight - triggerRect.bottom - viewportPadding;\n const spaceAbove = triggerRect.top - viewportPadding;\n const spaceRight = viewportWidth - triggerRect.right - viewportPadding;\n const spaceLeft = triggerRect.left - viewportPadding;\n\n if (position === 'auto') {\n if (spaceBelow >= popoverRect.height + this.offset) {\n position = 'bottom';\n } else if (spaceAbove >= popoverRect.height + this.offset) {\n position = 'top';\n } else if (spaceRight >= popoverRect.width + this.offset) {\n position = 'right';\n } else if (spaceLeft >= popoverRect.width + this.offset) {\n position = 'left';\n } else {\n const maxSpace = Math.max(spaceBelow, spaceAbove, spaceRight, spaceLeft);\n if (maxSpace === spaceBelow) position = 'bottom';\n else if (maxSpace === spaceAbove) position = 'top';\n else if (maxSpace === spaceRight) position = 'right';\n else position = 'left';\n }\n }\n\n // Adjust alignment for horizontal overflow\n if (position === 'top' || position === 'bottom') {\n if (align === 'start' && triggerRect.left + popoverRect.width > viewportWidth - viewportPadding) {\n align = 'end';\n } else if (align === 'end' && triggerRect.right - popoverRect.width < viewportPadding) {\n align = 'start';\n } else if (align === 'center') {\n const triggerCenter = triggerRect.left + triggerRect.width / 2;\n if (triggerCenter - popoverRect.width / 2 < viewportPadding) {\n align = 'start';\n } else if (triggerCenter + popoverRect.width / 2 > viewportWidth - viewportPadding) {\n align = 'end';\n }\n }\n }\n\n // Calculate position\n let top: number = 0;\n let left: number = 0;\n let maxHeight: number | null = null;\n\n switch (position) {\n case 'top':\n top = triggerRect.top - popoverRect.height - this.offset;\n if (top < viewportPadding) {\n maxHeight = triggerRect.top - this.offset - viewportPadding * 2;\n top = viewportPadding;\n }\n break;\n case 'bottom':\n top = triggerRect.bottom + this.offset;\n if (top + popoverRect.height > viewportHeight - viewportPadding) {\n maxHeight = viewportHeight - top - viewportPadding;\n }\n break;\n case 'left':\n left = triggerRect.left - popoverRect.width - this.offset;\n top = triggerRect.top;\n if (left < viewportPadding) left = viewportPadding;\n break;\n case 'right':\n left = triggerRect.right + this.offset;\n top = triggerRect.top;\n if (left + popoverRect.width > viewportWidth - viewportPadding) {\n left = viewportWidth - popoverRect.width - viewportPadding;\n }\n break;\n }\n\n // Calculate horizontal alignment for top/bottom\n if (position === 'top' || position === 'bottom') {\n switch (align) {\n case 'start':\n left = triggerRect.left;\n break;\n case 'center':\n left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;\n break;\n case 'end':\n left = triggerRect.right - popoverRect.width;\n break;\n }\n \n // Constrain to viewport\n if (left < viewportPadding) {\n left = viewportPadding;\n } else if (left + popoverRect.width > viewportWidth - viewportPadding) {\n left = viewportWidth - popoverRect.width - viewportPadding;\n }\n }\n\n // Calculate vertical alignment for left/right\n if (position === 'left' || position === 'right') {\n switch (align) {\n case 'start':\n top = triggerRect.top;\n break;\n case 'center':\n top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;\n break;\n case 'end':\n top = triggerRect.bottom - popoverRect.height;\n break;\n }\n \n if (top < viewportPadding) top = viewportPadding;\n if (top + popoverRect.height > viewportHeight - viewportPadding) {\n maxHeight = viewportHeight - top - viewportPadding;\n }\n }\n\n // Apply styles\n this.popoverEl.style.top = `${top}px`;\n this.popoverEl.style.left = `${left}px`;\n \n if (maxHeight !== null && maxHeight > 100) {\n this.popoverEl.style.maxHeight = `${maxHeight}px`;\n this.popoverEl.style.overflowY = 'auto';\n } else {\n this.popoverEl.style.maxHeight = '';\n this.popoverEl.style.overflowY = '';\n }\n\n this.isPositioned = true;\n }\n\n render() {\n const popoverStyles: Record<string, string> = {\n visibility: this.isPositioned ? 'visible' : 'hidden',\n };\n \n if (this.width) popoverStyles.width = this.width;\n if (this.minWidth) popoverStyles.minWidth = this.minWidth;\n if (this.maxWidth) popoverStyles.maxWidth = this.maxWidth;\n\n return [\n <div \n class=\"le-popover-trigger\" \n ref={(el) => (this.triggerEl = el)}\n onClick={this.handleTriggerClick}\n >\n <slot name=\"trigger\">\n <button type=\"button\" class=\"le-popover-default-trigger\">\n <span>⊕</span>\n </button>\n </slot>\n </div>,\n \n <div\n id={this.uniqueId}\n class=\"le-popover-content\"\n popover={this.closeOnClickOutside ? 'auto' : 'manual'}\n ref={(el) => (this.popoverEl = el)}\n style={popoverStyles}\n >\n {(this.popoverTitle || this.showClose) && (\n <div class=\"le-popover-header\">\n {this.popoverTitle && <span class=\"le-popover-title\">{this.popoverTitle}</span>}\n {this.showClose && (\n <button \n type=\"button\" \n class=\"le-popover-close\"\n onClick={() => this.hide()}\n aria-label=\"Close\"\n >\n ×\n </button>\n )}\n </div>\n )}\n <div class=\"le-popover-body\">\n <slot></slot>\n </div>\n </div>\n ];\n }\n}\n"],"version":3}
|