@shoper/phoenix_design_system 1.1.0-9 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +7 -1
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js +6 -4
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_control.js +1 -1
- package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_control.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.js +20 -5
- package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option_content.js +0 -1
- package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option_content.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js +1 -0
- package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/components/select_close_btn.js +37 -0
- package/build/cjs/packages/phoenix/src/components/form/select/components/select_close_btn.js.map +1 -0
- package/build/cjs/packages/phoenix/src/components/form/select/components/select_components_constatns.js +2 -0
- package/build/cjs/packages/phoenix/src/components/form/select/components/select_components_constatns.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js +23 -8
- package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.js +3 -1
- package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/controllers/base_select_controller.js +2 -1
- package/build/cjs/packages/phoenix/src/components/form/select/controllers/base_select_controller.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js +2 -0
- package/build/cjs/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js +2 -1
- package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/select.js +88 -31
- package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js +6 -1
- package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
- package/build/cjs/packages/phoenix/src/directives/observable_directive.js +1 -1
- package/build/cjs/packages/phoenix/src/directives/observable_directive.js.map +1 -1
- package/build/cjs/packages/phoenix/src/index.js +7 -7
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +1 -0
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +7 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.d.ts +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js +6 -4
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_control.js +1 -1
- package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_control.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.d.ts +4 -2
- package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.js +20 -5
- package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option_content.js +0 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option_content.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +1 -0
- package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/select_close_btn.d.ts +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/select_close_btn.js +34 -28
- package/build/esm/packages/phoenix/src/components/form/select/components/select_close_btn.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/select_components_constatns.js +2 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/select_components_constatns.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.d.ts +3 -0
- package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js +23 -8
- package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.d.ts +2 -0
- package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.js +3 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.js +2 -1
- package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js +2 -0
- package/build/esm/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js +2 -1
- package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +8 -0
- package/build/esm/packages/phoenix/src/components/form/select/select.js +89 -32
- package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/select_constants.d.ts +4 -0
- package/build/esm/packages/phoenix/src/components/form/select/select_constants.js +6 -2
- package/build/esm/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/directives/observable_directive.js +1 -1
- package/build/esm/packages/phoenix/src/directives/observable_directive.js.map +1 -1
- package/build/esm/packages/phoenix/src/index.js +1 -1
- package/package.json +1 -1
|
@@ -6,6 +6,8 @@ export declare class HSelect extends PhoenixLightLitElement {
|
|
|
6
6
|
controlName: string;
|
|
7
7
|
multiselect: boolean;
|
|
8
8
|
opened: boolean;
|
|
9
|
+
offset: number;
|
|
10
|
+
error: boolean;
|
|
9
11
|
private _searchValue;
|
|
10
12
|
private _selectController;
|
|
11
13
|
private _$options;
|
|
@@ -15,10 +17,14 @@ export declare class HSelect extends PhoenixLightLitElement {
|
|
|
15
17
|
private _$dropdownContent;
|
|
16
18
|
private _selectContext;
|
|
17
19
|
private _listBoxController;
|
|
20
|
+
private _optionsObserver;
|
|
18
21
|
constructor();
|
|
19
22
|
updated(changedProperties: PropertyValues): void;
|
|
23
|
+
private _focusElementAfterSelectOpened;
|
|
20
24
|
connectedCallback(): void;
|
|
25
|
+
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
|
|
21
26
|
firstUpdated(props: PropertyValues): void;
|
|
27
|
+
private _setDropdownContentWidth;
|
|
22
28
|
private _setupEvents;
|
|
23
29
|
private _handleOptionDeselect;
|
|
24
30
|
private _updateOptionsView;
|
|
@@ -32,5 +38,7 @@ export declare class HSelect extends PhoenixLightLitElement {
|
|
|
32
38
|
addOption(option: SelectOption, position?: number): void;
|
|
33
39
|
removeOption(optionValue: string): void;
|
|
34
40
|
replaceOptions(options: SelectOption[]): void;
|
|
41
|
+
disconnectedCallback(): void;
|
|
42
|
+
private _handleResize;
|
|
35
43
|
protected render(): TemplateResult;
|
|
36
44
|
}
|
|
@@ -5,24 +5,27 @@ import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/
|
|
|
5
5
|
import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
|
|
6
6
|
import { property } from '@lit/reactive-element/decorators.js';
|
|
7
7
|
import { SELECT_RELATED_COMPONENTS_NAMES, SELECT_CLOSE_BTN_EVENT_NAMES } from './components/select_components_constatns.js';
|
|
8
|
-
import {
|
|
8
|
+
import { HIcon } from '../../icon/icon.js';
|
|
9
|
+
import { SELECT_SLOT_NAMES, SELECT_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_RESIZE_DEBOUNCE_TIME } from './select_constants.js';
|
|
9
10
|
import { Observer } from '../../../core/classes/observer/observer.js';
|
|
10
11
|
import { observe } from '../../../directives/observable_directive.js';
|
|
11
12
|
import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
|
|
12
13
|
import { createRef, ref } from 'lit-html/directives/ref.js';
|
|
14
|
+
import debounce_1 from '../../../../../../external/lodash/debounce.js';
|
|
13
15
|
import { MultiSelectController } from './controllers/multi_select_controller.js';
|
|
14
16
|
import { SelectController } from './controllers/select_controller.js';
|
|
15
17
|
import { HSelectSearch } from './components/search/select_search.js';
|
|
16
18
|
import { ListBoxKeyboardController } from '../../../controllers/list_box_controller/list_box_keyboard_controller.js';
|
|
17
|
-
import { HIcon } from '../../icon/icon.js';
|
|
18
19
|
import { SelectOptionMapper } from './model/select_option_mapper.js';
|
|
19
20
|
import { SelectControlUtils } from './select_utils.js';
|
|
21
|
+
import { HSelectCloseBtn } from './components/select_close_btn.js';
|
|
20
22
|
|
|
21
23
|
let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
22
24
|
constructor() {
|
|
23
25
|
super();
|
|
24
26
|
this.multiselect = false;
|
|
25
27
|
this.opened = false;
|
|
28
|
+
this.offset = 2;
|
|
26
29
|
this._searchValue = '';
|
|
27
30
|
this._$options = {};
|
|
28
31
|
this._$dropdown = createRef();
|
|
@@ -30,6 +33,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
30
33
|
this._$optionsList = createRef();
|
|
31
34
|
this._$dropdownContent = createRef();
|
|
32
35
|
this._selectContext = new ContextProviderController(this);
|
|
36
|
+
this._setDropdownContentWidth = () => {
|
|
37
|
+
if (this._$dropdownContent.value)
|
|
38
|
+
this._$dropdownContent.value.style.width = `${this.getBoundingClientRect().width}px`;
|
|
39
|
+
};
|
|
33
40
|
this._handleOptionDeselect = (event) => {
|
|
34
41
|
const selectedOption = this._selectController.getSelectOption(event.detail);
|
|
35
42
|
if (!selectedOption)
|
|
@@ -62,6 +69,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
62
69
|
};
|
|
63
70
|
this._closeSelect = () => {
|
|
64
71
|
var _a;
|
|
72
|
+
if (!this.opened)
|
|
73
|
+
return;
|
|
65
74
|
(_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
|
|
66
75
|
this._searchValue = '';
|
|
67
76
|
this.opened = false;
|
|
@@ -69,19 +78,35 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
69
78
|
this._clearOptions = () => {
|
|
70
79
|
this._selectController.deselectOptions();
|
|
71
80
|
};
|
|
81
|
+
this._handleResize = debounce_1(() => {
|
|
82
|
+
this._closeSelect();
|
|
83
|
+
this._setDropdownContentWidth();
|
|
84
|
+
}, SELECT_RESIZE_DEBOUNCE_TIME);
|
|
72
85
|
const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
|
|
73
86
|
$options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
|
|
74
87
|
}
|
|
75
88
|
updated(changedProperties) {
|
|
76
89
|
super.updated(changedProperties);
|
|
77
|
-
if (changedProperties.has('opened'))
|
|
78
|
-
this.opened
|
|
90
|
+
if (changedProperties.has('opened')) {
|
|
91
|
+
if (this.opened) {
|
|
92
|
+
this.classList.add(SELECT_CSS_CLASSES.selectOpened);
|
|
93
|
+
this._focusElementAfterSelectOpened();
|
|
94
|
+
}
|
|
95
|
+
else {
|
|
96
|
+
this.classList.remove(SELECT_CSS_CLASSES.selectOpened);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
79
99
|
if (this._$optionsList.value && !this._listBoxController)
|
|
80
100
|
this._listBoxController = new ListBoxKeyboardController({
|
|
81
101
|
host: this,
|
|
82
102
|
$list: this._$optionsList.value
|
|
83
103
|
});
|
|
84
104
|
}
|
|
105
|
+
_focusElementAfterSelectOpened() {
|
|
106
|
+
var _a, _b;
|
|
107
|
+
const $searchInput = (_a = this._$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
|
|
108
|
+
$searchInput ? $searchInput.focus() : (_b = this._$optionsList.value) === null || _b === void 0 ? void 0 : _b.focus();
|
|
109
|
+
}
|
|
85
110
|
connectedCallback() {
|
|
86
111
|
super.connectedCallback();
|
|
87
112
|
this.classList.add(SELECT_CSS_CLASSES.select);
|
|
@@ -89,7 +114,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
89
114
|
this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
|
|
90
115
|
this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiselect);
|
|
91
116
|
const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
|
|
92
|
-
this.
|
|
117
|
+
this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
|
|
118
|
+
this._selectController.options$.subscribe(this._optionsObserver);
|
|
93
119
|
this._$options = $options.reduce((acc, $option) => {
|
|
94
120
|
if (acc[$option.value] !== undefined)
|
|
95
121
|
throw Error('Select options must hava a unique values.');
|
|
@@ -98,17 +124,27 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
98
124
|
[$option.value]: $option
|
|
99
125
|
};
|
|
100
126
|
}, {});
|
|
101
|
-
|
|
127
|
+
const options = $options.map(SelectOptionMapper.toModel);
|
|
128
|
+
this._selectController.options$.notify(options);
|
|
129
|
+
if (options.length)
|
|
130
|
+
this._selectController.selectedOptions$.notify(options.filter((option) => option.selected));
|
|
102
131
|
this._setupEvents();
|
|
103
132
|
}
|
|
133
|
+
attributeChangedCallback(name, _old, value) {
|
|
134
|
+
super.attributeChangedCallback(name, _old, value);
|
|
135
|
+
switch (name) {
|
|
136
|
+
case 'error':
|
|
137
|
+
this.error ? this.classList.add(SELECT_CSS_CLASSES.selectError) : this.classList.remove(SELECT_CSS_CLASSES.selectError);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
104
140
|
firstUpdated(props) {
|
|
105
141
|
super.firstUpdated(props);
|
|
106
|
-
|
|
107
|
-
this._$dropdownContent.value.style.width = `${this.getBoundingClientRect().width}px`;
|
|
142
|
+
this._setDropdownContentWidth();
|
|
108
143
|
}
|
|
109
144
|
_setupEvents() {
|
|
110
145
|
this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
|
|
111
146
|
this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
|
|
147
|
+
window.addEventListener('resize', this._handleResize);
|
|
112
148
|
}
|
|
113
149
|
_appendNewHTMLOption(option, position) {
|
|
114
150
|
const $list = this._$optionsList.value;
|
|
@@ -141,6 +177,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
141
177
|
replaceOptions(options) {
|
|
142
178
|
this._selectController.replaceOptions(options);
|
|
143
179
|
}
|
|
180
|
+
disconnectedCallback() {
|
|
181
|
+
super.disconnectedCallback();
|
|
182
|
+
this._selectController.options$.unsubscribe(this._optionsObserver);
|
|
183
|
+
window.removeEventListener('resize', this._handleResize);
|
|
184
|
+
}
|
|
144
185
|
render() {
|
|
145
186
|
var _a;
|
|
146
187
|
const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
|
|
@@ -150,41 +191,48 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
150
191
|
@dropdown.showed=${() => (this.opened = true)}
|
|
151
192
|
@dropdown.hidden=${this._closeSelect}
|
|
152
193
|
name=${this.controlName}
|
|
194
|
+
offset=${this.offset}
|
|
153
195
|
>
|
|
154
|
-
<h-dropdown-toggler name=${this.controlName}
|
|
155
|
-
${this.getSlot(SELECT_SLOT_NAMES.input)}
|
|
156
|
-
</h-dropdown-toggler>
|
|
196
|
+
<h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.input)} </h-dropdown-toggler>
|
|
157
197
|
|
|
158
198
|
<h-dropdown-content class=${SELECT_CSS_CLASSES.selectContent} ${ref(this._$dropdownContent)} name=${this.controlName}>
|
|
159
|
-
<h-select-close-btn @
|
|
199
|
+
<h-select-close-btn @selectCloseBtn.close=${this._closeSelect}></h-select-close-btn>
|
|
160
200
|
|
|
161
201
|
${options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
|
|
162
202
|
? html `<h-select-search
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
203
|
+
class=${SELECT_CSS_CLASSES.selectSearch}
|
|
204
|
+
${ref(this._$search)}
|
|
205
|
+
.value=${this._searchValue}
|
|
206
|
+
@selectSearch.search=${this._handleSearch}
|
|
207
|
+
></h-select-search>`
|
|
168
208
|
: nothing}
|
|
169
209
|
${this.hasSlot(SELECT_SLOT_NAMES.content)
|
|
170
210
|
? html `
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
211
|
+
<h-options
|
|
212
|
+
class=${SELECT_CSS_CLASSES.selectOptions}
|
|
213
|
+
${ref(this._$optionsList)}
|
|
214
|
+
@selectOptions.clicked=${this._handleOptionClicked}
|
|
215
|
+
>
|
|
216
|
+
${this.getSlot(SELECT_SLOT_NAMES.content)}
|
|
217
|
+
</h-options>
|
|
218
|
+
`
|
|
219
|
+
: nothing}
|
|
220
|
+
${!this._selectController.visibleOptionsCount
|
|
221
|
+
? html `<div>
|
|
222
|
+
<p class=${SELECT_CSS_CLASSES.selectNoResult}>
|
|
223
|
+
Brak wyników dla: <em class=${SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
|
|
224
|
+
</p>
|
|
225
|
+
</div>`
|
|
179
226
|
: nothing}
|
|
180
|
-
${!this._selectController.visibleOptionsCount ? html `<p>brak wyników dla ${this._searchValue}</p>` : nothing}
|
|
181
227
|
${this.multiselect && this._selectController.selectedOptionsCount >= 1
|
|
182
228
|
? html `
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
229
|
+
<section class=${SELECT_CSS_CLASSES.selectFooter}>
|
|
230
|
+
<button class="btn btn_secondary btn_xs" @click=${this._clearOptions}>clear</button>
|
|
231
|
+
<h-select-close-btn class="btn btn_primary btn_xs" @selectCloseBtn.close=${this._closeSelect}
|
|
232
|
+
>ok</h-select-close-btn
|
|
233
|
+
>
|
|
234
|
+
</section>
|
|
235
|
+
`
|
|
188
236
|
: nothing}
|
|
189
237
|
</h-dropdown-content>
|
|
190
238
|
</h-dropdown>
|
|
@@ -195,7 +243,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
195
243
|
};
|
|
196
244
|
HSelect._components = {
|
|
197
245
|
search: HSelectSearch,
|
|
198
|
-
icon: HIcon
|
|
246
|
+
icon: HIcon,
|
|
247
|
+
closeBtn: HSelectCloseBtn
|
|
199
248
|
};
|
|
200
249
|
__decorate([
|
|
201
250
|
property({ type: String }),
|
|
@@ -209,6 +258,14 @@ __decorate([
|
|
|
209
258
|
property({ type: Boolean }),
|
|
210
259
|
__metadata("design:type", Boolean)
|
|
211
260
|
], HSelect.prototype, "opened", void 0);
|
|
261
|
+
__decorate([
|
|
262
|
+
property({ type: Number }),
|
|
263
|
+
__metadata("design:type", Number)
|
|
264
|
+
], HSelect.prototype, "offset", void 0);
|
|
265
|
+
__decorate([
|
|
266
|
+
property({ type: Boolean }),
|
|
267
|
+
__metadata("design:type", Boolean)
|
|
268
|
+
], HSelect.prototype, "error", void 0);
|
|
212
269
|
__decorate([
|
|
213
270
|
state(),
|
|
214
271
|
__metadata("design:type", String)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -11,11 +11,15 @@ export declare const SELECT_EVENT_NAMES: {
|
|
|
11
11
|
readonly deselectOption: "selectOption.deselect";
|
|
12
12
|
};
|
|
13
13
|
export declare const MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = 6;
|
|
14
|
+
export declare const SELECT_RESIZE_DEBOUNCE_TIME = 100;
|
|
14
15
|
export declare const SELECT_CSS_CLASSES: {
|
|
15
16
|
readonly select: "select";
|
|
16
17
|
readonly selectOpened: "select_opened";
|
|
18
|
+
readonly selectError: "select_error";
|
|
17
19
|
readonly selectSearch: "select__search";
|
|
18
20
|
readonly selectOptions: "select__options";
|
|
19
21
|
readonly selectContent: "select__content";
|
|
20
22
|
readonly selectFooter: "select__footer";
|
|
23
|
+
readonly selectNoResult: "select__no-result";
|
|
24
|
+
readonly selectSearchedPhrase: "select__searched-phrase";
|
|
21
25
|
};
|
|
@@ -11,15 +11,19 @@ const SELECT_EVENT_NAMES = {
|
|
|
11
11
|
deselectOption: 'selectOption.deselect'
|
|
12
12
|
};
|
|
13
13
|
const MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = 6;
|
|
14
|
+
const SELECT_RESIZE_DEBOUNCE_TIME = 100;
|
|
14
15
|
const baseSelectClass = 'select';
|
|
15
16
|
const SELECT_CSS_CLASSES = {
|
|
16
17
|
select: baseSelectClass,
|
|
17
18
|
selectOpened: `${baseSelectClass}_opened`,
|
|
19
|
+
selectError: `${baseSelectClass}_error`,
|
|
18
20
|
selectSearch: `${baseSelectClass}__search`,
|
|
19
21
|
selectOptions: `${baseSelectClass}__options`,
|
|
20
22
|
selectContent: `${baseSelectClass}__content`,
|
|
21
|
-
selectFooter: `${baseSelectClass}__footer
|
|
23
|
+
selectFooter: `${baseSelectClass}__footer`,
|
|
24
|
+
selectNoResult: `${baseSelectClass}__no-result`,
|
|
25
|
+
selectSearchedPhrase: `${baseSelectClass}__searched-phrase`
|
|
22
26
|
};
|
|
23
27
|
|
|
24
|
-
export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_SLOT_NAMES };
|
|
28
|
+
export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_RESIZE_DEBOUNCE_TIME, SELECT_SLOT_NAMES };
|
|
25
29
|
//# sourceMappingURL=select_constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { noChange } from 'lit';
|
|
2
|
-
import { Observer } from '../core/classes/observer/observer.js';
|
|
3
2
|
import { directive as e } from '../../../../external/lit/external/lit-html/directive.js';
|
|
4
3
|
import { AsyncDirective as c } from '../../../../external/lit/external/lit-html/async-directive.js';
|
|
4
|
+
import { Observer } from '../core/classes/observer/observer.js';
|
|
5
5
|
|
|
6
6
|
class ObserveDirective extends c {
|
|
7
7
|
render(observable, render) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,yDAAiE;AAChG,oCAAoC,+DAAuE;AAC3G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -2,6 +2,7 @@ export { DEFAULT_SLOT_NAME } from './core/phoenix_light_lit_element/phoenix_ligh
|
|
|
2
2
|
export { PhoenixLightLitElement } from './core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
3
3
|
export { KeystrokesController } from './controllers/keystrokes_controller/keystrokes_controller.js';
|
|
4
4
|
export { BtnController } from './controllers/btn_controller/btn_controller.js';
|
|
5
|
+
export { HIcon } from './components/icon/icon.js';
|
|
5
6
|
export { HOption } from './components/form/select/components/option/select_option.js';
|
|
6
7
|
export { HOptionContent } from './components/form/select/components/option/select_option_content.js';
|
|
7
8
|
export { HOptions } from './components/form/select/components/select_options.js';
|
|
@@ -17,7 +18,6 @@ export { ToggleElementAriaController } from './controllers/toggle_element_aria_c
|
|
|
17
18
|
export { HDropdownToggler } from './components/dropdown/dropdown_toggler.js';
|
|
18
19
|
export { RelativePositionController } from './controllers/relative_position_controller/relative_position_controller.js';
|
|
19
20
|
export { HDropdown } from './components/dropdown/dropdown.js';
|
|
20
|
-
export { HIcon } from './components/icon/icon.js';
|
|
21
21
|
export { HSelect } from './components/form/select/select.js';
|
|
22
22
|
export { HModal } from './components/modal/modal.js';
|
|
23
23
|
export { HModalOpener } from './components/modal/modal_opener.js';
|