@shoper/phoenix_design_system 1.2.3-7 → 1.2.3-9
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/external/lit/external/lit-html/directives/template-content.js +15 -0
- package/build/cjs/external/lit/external/lit-html/directives/template-content.js.map +1 -0
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +4 -18
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js +4 -3
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.js +18 -0
- package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.js +5 -6
- 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/toggler/select_toggler.js +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/controllers/base_select_controller.js +13 -13
- package/build/cjs/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js +6 -6
- package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_controller.js +2 -2
- package/build/cjs/packages/phoenix/src/components/form/select/select.js +87 -25
- 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 +5 -0
- package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js +6 -0
- package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/modal/modal.js +1 -1
- package/build/cjs/packages/phoenix/src/components/toggle/toggle.js +43 -0
- package/build/cjs/packages/phoenix/src/components/toggle/toggle.js.map +1 -0
- package/build/cjs/packages/phoenix/src/components/toggle/toggle_button.js +57 -0
- package/build/cjs/packages/phoenix/src/components/toggle/toggle_button.js.map +1 -0
- package/build/cjs/packages/phoenix/src/components/toggle/toggle_constants.js +15 -0
- package/build/cjs/packages/phoenix/src/components/toggle/toggle_constants.js.map +1 -0
- package/build/cjs/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js +6 -2
- package/build/cjs/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js.map +1 -1
- package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js +16 -3
- package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js.map +1 -1
- package/build/cjs/packages/phoenix/src/index.js +18 -0
- package/build/cjs/packages/phoenix/src/index.js.map +1 -1
- package/build/esm/external/lit/external/lit-html/directives/template-content.js +11 -0
- package/build/esm/external/lit/external/lit-html/directives/template-content.js.map +1 -0
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +0 -2
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +4 -18
- 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 -0
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js +4 -3
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.d.ts +3 -0
- package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.js +18 -0
- package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.d.ts +2 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.js +5 -6
- 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/toggler/select_toggler.js +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.d.ts +10 -10
- package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.js +13 -13
- package/build/esm/packages/phoenix/src/components/form/select/controllers/multi_select_controller.d.ts +3 -3
- package/build/esm/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js +6 -6
- package/build/esm/packages/phoenix/src/components/form/select/controllers/select_controller.d.ts +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/controllers/select_controller.js +2 -2
- package/build/esm/packages/phoenix/src/components/form/select/controllers/select_controllers_types.d.ts +9 -9
- package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +16 -3
- package/build/esm/packages/phoenix/src/components/form/select/select.js +88 -26
- 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 +5 -1
- package/build/esm/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/select_types.d.ts +2 -0
- package/build/esm/packages/phoenix/src/components/form/select/select_types.js +2 -0
- package/build/esm/packages/phoenix/src/components/form/select/select_types.js.map +1 -0
- package/build/esm/packages/phoenix/src/components/form/select/select_utils.d.ts +2 -0
- package/build/esm/packages/phoenix/src/components/form/select/select_utils.js +6 -0
- package/build/esm/packages/phoenix/src/components/form/select/select_utils.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/modal/modal.js +1 -1
- package/build/esm/packages/phoenix/src/components/toggle/toggle.d.ts +11 -0
- package/build/esm/packages/phoenix/src/components/toggle/toggle.js +41 -0
- package/build/esm/packages/phoenix/src/components/toggle/toggle.js.map +1 -0
- package/build/esm/packages/phoenix/src/components/toggle/toggle_button.d.ts +14 -0
- package/build/esm/packages/phoenix/src/components/toggle/toggle_button.js +55 -0
- package/build/esm/packages/phoenix/src/components/toggle/toggle_button.js.map +1 -0
- package/build/esm/packages/phoenix/src/components/toggle/toggle_constants.d.ts +6 -0
- package/build/esm/packages/phoenix/src/components/toggle/toggle_constants.js +9 -0
- package/build/esm/packages/phoenix/src/components/toggle/toggle_constants.js.map +1 -0
- package/build/esm/packages/phoenix/src/components/toggle/toggle_types.d.ts +3 -0
- package/build/esm/packages/phoenix/src/components/toggle/toggle_types.js +2 -0
- package/build/esm/packages/phoenix/src/components/toggle/toggle_types.js.map +1 -0
- package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js +6 -2
- package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js.map +1 -1
- package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.d.ts +1 -0
- package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js +16 -3
- package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js.map +1 -1
- package/build/esm/packages/phoenix/src/index.d.ts +4 -0
- package/build/esm/packages/phoenix/src/index.js +3 -0
- package/build/esm/packages/phoenix/src/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var litHtml = require('../lit-html.js');
|
|
6
|
+
var directive = require('../directive.js');
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* @license
|
|
10
|
+
* Copyright 2020 Google LLC
|
|
11
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
12
|
+
*/const o=directive.directive(class extends directive.Directive{constructor(t){if(super(t),t.type!==directive.PartType.CHILD)throw Error("templateContent can only be used in child bindings")}render(r){return this.ft===r?litHtml.noChange:(this.ft=r,document.importNode(r.content,!0))}});
|
|
13
|
+
|
|
14
|
+
exports.templateContent = o;
|
|
15
|
+
//# sourceMappingURL=template-content.js.map
|
|
@@ -0,0 +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;"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
|
|
6
|
-
|
|
6
|
+
require('lit/decorators');
|
|
7
7
|
var utilities = require('@dreamcommerce/utilities');
|
|
8
8
|
var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
9
9
|
var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
|
|
@@ -31,7 +31,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
31
31
|
this.offset = 0;
|
|
32
32
|
this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
|
|
33
33
|
this._backdropController = new backdrop_controller.BackdropController();
|
|
34
|
-
this._lastFocusableElement = undefined;
|
|
35
34
|
this._handleClickOutside = async (target) => {
|
|
36
35
|
var _a, _b;
|
|
37
36
|
if (!this.opened)
|
|
@@ -64,12 +63,10 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
64
63
|
}, 0);
|
|
65
64
|
const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
|
|
66
65
|
setTimeout(() => {
|
|
67
|
-
var _a
|
|
66
|
+
var _a;
|
|
68
67
|
this._dispatchShowDropdownEvent();
|
|
69
68
|
(_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
|
|
70
69
|
this._toggleScroll();
|
|
71
|
-
if (!this._lastFocusableElement)
|
|
72
|
-
this._lastFocusableElement = (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.lastElementChild;
|
|
73
70
|
resolve();
|
|
74
71
|
}, transitionDuration);
|
|
75
72
|
});
|
|
@@ -155,14 +152,11 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
155
152
|
this._handleFocusOnNextElement(ev);
|
|
156
153
|
};
|
|
157
154
|
this._handleFocusOnNextElement = async (ev) => {
|
|
155
|
+
var _a;
|
|
158
156
|
ev.preventDefault();
|
|
159
157
|
const $focusableElements = utilities.UiDomUtils.getFocusableElements(document.body);
|
|
160
158
|
const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
|
|
161
|
-
const $nextElementToFocus = $focusableElements
|
|
162
|
-
if (index > indexOfDropdownToggler && !currentElement.closest(`${dropdown_constants.DROPDOWN_TOGGLER_NAME}[name="${this.name}"]`))
|
|
163
|
-
return currentElement;
|
|
164
|
-
return null;
|
|
165
|
-
});
|
|
159
|
+
const $nextElementToFocus = (_a = $focusableElements[indexOfDropdownToggler + 1]) !== null && _a !== void 0 ? _a : $focusableElements[0];
|
|
166
160
|
await this._hideDropdownsSequentially();
|
|
167
161
|
await this.hide();
|
|
168
162
|
this._focusOnNextElementAfterToggler($nextElementToFocus);
|
|
@@ -223,12 +217,8 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
223
217
|
});
|
|
224
218
|
}
|
|
225
219
|
async connectedCallback() {
|
|
226
|
-
var _a;
|
|
227
220
|
super.connectedCallback();
|
|
228
221
|
HDropdown_1._appendDropdownPortal();
|
|
229
|
-
if (!this._rootDropdown)
|
|
230
|
-
this._rootDropdown =
|
|
231
|
-
((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'h-dropdown-content' ? this._findRootDropdown(this.parentElement) : this;
|
|
232
222
|
if (!this.$dropdownContent)
|
|
233
223
|
this.$dropdownContent = this.querySelector(dropdown_constants.DROPDOWN_CONTENT_NAME);
|
|
234
224
|
if (!this.$dropdownToggler)
|
|
@@ -374,10 +364,6 @@ tslib_es6.__decorate([
|
|
|
374
364
|
decorators_js.property({ type: String }),
|
|
375
365
|
tslib_es6.__metadata("design:type", Object)
|
|
376
366
|
], exports.HDropdown.prototype, "portalTarget", void 0);
|
|
377
|
-
tslib_es6.__decorate([
|
|
378
|
-
decorators.state(),
|
|
379
|
-
tslib_es6.__metadata("design:type", Object)
|
|
380
|
-
], exports.HDropdown.prototype, "_lastFocusableElement", void 0);
|
|
381
367
|
exports.HDropdown = HDropdown_1 = tslib_es6.__decorate([
|
|
382
368
|
phoenix_custom_element.phoenixCustomElement('h-dropdown'),
|
|
383
369
|
tslib_es6.__metadata("design:paramtypes", [])
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,14 +11,14 @@ var dropdown_constants = require('./dropdown_constants.js');
|
|
|
11
11
|
|
|
12
12
|
exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
13
13
|
constructor() {
|
|
14
|
-
super(
|
|
14
|
+
super();
|
|
15
15
|
this.name = '';
|
|
16
|
+
this.slot = this.hasAttribute('slot') ? this.slot : 'content';
|
|
16
17
|
}
|
|
17
18
|
connectedCallback() {
|
|
18
19
|
super.connectedCallback();
|
|
19
20
|
this.classList.add(dropdown_constants.DROPDOWN_CONTENT_CSS_CLASS);
|
|
20
21
|
this.setAttribute('role', 'menu');
|
|
21
|
-
this.slot = this.hasAttribute('slot') ? this.slot : 'content';
|
|
22
22
|
Array.from(this.children).forEach((element) => {
|
|
23
23
|
element.setAttribute('role', 'menuitem');
|
|
24
24
|
});
|
|
@@ -33,6 +33,7 @@ tslib_es6.__decorate([
|
|
|
33
33
|
tslib_es6.__metadata("design:type", Object)
|
|
34
34
|
], exports.HDropdownContent.prototype, "name", void 0);
|
|
35
35
|
exports.HDropdownContent = tslib_es6.__decorate([
|
|
36
|
-
phoenix_custom_element.phoenixCustomElement('h-dropdown-content')
|
|
36
|
+
phoenix_custom_element.phoenixCustomElement('h-dropdown-content'),
|
|
37
|
+
tslib_es6.__metadata("design:paramtypes", [])
|
|
37
38
|
], exports.HDropdownContent);
|
|
38
39
|
//# sourceMappingURL=dropdown_content.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -108,6 +108,24 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
|
|
|
108
108
|
const $fileInput = this._getInputRefValue();
|
|
109
109
|
return $fileInput.files;
|
|
110
110
|
}
|
|
111
|
+
set files(files) {
|
|
112
|
+
if (!files)
|
|
113
|
+
return;
|
|
114
|
+
const $fileInput = this._getInputRefValue();
|
|
115
|
+
const dataTransfer = new DataTransfer();
|
|
116
|
+
for (let i = 0; i < files.length; i++) {
|
|
117
|
+
const file = files.item(i);
|
|
118
|
+
dataTransfer.items.add(file);
|
|
119
|
+
}
|
|
120
|
+
if ($fileInput)
|
|
121
|
+
$fileInput.files = dataTransfer.files;
|
|
122
|
+
}
|
|
123
|
+
get name() {
|
|
124
|
+
return this.controlName;
|
|
125
|
+
}
|
|
126
|
+
get id() {
|
|
127
|
+
return this.controlId;
|
|
128
|
+
}
|
|
111
129
|
_addEventListeners() {
|
|
112
130
|
this.addEventListener(file_picker_constants.FILE_ITEM_EVENT_NAMES.removed, this._removeFileItem);
|
|
113
131
|
this.addEventListener(file_picker_constants.FILE_PICKER_LABEL_EVENT_NAMES.filePickerLabelClickedByEnterKey, this._triggerClickOnLabel);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.js
CHANGED
|
@@ -9,6 +9,7 @@ var decorators_js = require('@lit/reactive-element/decorators.js');
|
|
|
9
9
|
var select_components_constatns = require('../select_components_constatns.js');
|
|
10
10
|
var btn_controller = require('../../../../../controllers/btn_controller/btn_controller.js');
|
|
11
11
|
var select_option_constants = require('./select_option_constants.js');
|
|
12
|
+
require('@lit/reactive-element');
|
|
12
13
|
|
|
13
14
|
exports.HOption = class HOption extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
14
15
|
constructor() {
|
|
@@ -37,12 +38,10 @@ exports.HOption = class HOption extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
37
38
|
_setupEvents() {
|
|
38
39
|
this.addEventListener('click', this._dispatchClickedEvent);
|
|
39
40
|
}
|
|
40
|
-
|
|
41
|
-
super.
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
|
|
45
|
-
}
|
|
41
|
+
updated(changedProperties) {
|
|
42
|
+
super.updated(changedProperties);
|
|
43
|
+
if (changedProperties.has('selected'))
|
|
44
|
+
this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
|
|
46
45
|
}
|
|
47
46
|
_addSelectedIcon() {
|
|
48
47
|
this._$checkedIcon = document.createElement('h-icon');
|
package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js
CHANGED
|
@@ -55,7 +55,7 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
|
|
|
55
55
|
${observable_directive.observe(this.selectedOptions$, (selectOptions) => {
|
|
56
56
|
var _a;
|
|
57
57
|
if (!selectOptions.length)
|
|
58
|
-
return litHtml.html `${(_a = this.getSlot(select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a :
|
|
58
|
+
return litHtml.html `${(_a = this.getSlot(select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : litHtml.html `<span class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerPlaceholder}>Select</span>`}`;
|
|
59
59
|
return litHtml.html ` <ul class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
|
|
60
60
|
${this.isMultiselect
|
|
61
61
|
? selectOptions.map((option) => litHtml.html ` <li>
|
package/build/cjs/packages/phoenix/src/components/form/select/controllers/base_select_controller.js
CHANGED
|
@@ -29,16 +29,16 @@ class BaseSelectController {
|
|
|
29
29
|
this._optionsObserver = new observer.Observer(this._calculateValuesRelatedToOptions);
|
|
30
30
|
this.options$.subscribe(this._optionsObserver);
|
|
31
31
|
}
|
|
32
|
-
|
|
33
|
-
option.selected ? this.
|
|
32
|
+
toggle(option) {
|
|
33
|
+
option.selected ? this.deselect(option) : this.select(option);
|
|
34
34
|
}
|
|
35
|
-
|
|
35
|
+
remove(optionValue) {
|
|
36
36
|
const options = this.options$.getValue();
|
|
37
37
|
if (!options)
|
|
38
38
|
return;
|
|
39
39
|
this.options$.notify(options.filter((option) => option.value !== optionValue));
|
|
40
40
|
}
|
|
41
|
-
|
|
41
|
+
add(option, position) {
|
|
42
42
|
var _a;
|
|
43
43
|
const options = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
|
|
44
44
|
if (position === undefined) {
|
|
@@ -48,22 +48,22 @@ class BaseSelectController {
|
|
|
48
48
|
}
|
|
49
49
|
this.options$.notify([...options.slice(0, position - 1), option, ...options.slice(position - 1)]);
|
|
50
50
|
}
|
|
51
|
-
|
|
51
|
+
replace(options) {
|
|
52
52
|
this.options$.notify(options);
|
|
53
53
|
}
|
|
54
|
-
|
|
54
|
+
deselectAll() {
|
|
55
55
|
var _a;
|
|
56
56
|
(_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
|
|
57
57
|
this.selectedOptions$.notify([]);
|
|
58
|
-
this.
|
|
58
|
+
this.requestUpdate();
|
|
59
59
|
}
|
|
60
|
-
|
|
60
|
+
deselect(option) {
|
|
61
61
|
var _a;
|
|
62
62
|
(_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
|
|
63
63
|
this.selectedOptions$.notify([]);
|
|
64
|
-
this.
|
|
64
|
+
this.requestUpdate();
|
|
65
65
|
}
|
|
66
|
-
|
|
66
|
+
filter(value) {
|
|
67
67
|
const selectOptions = this.options$.getValue();
|
|
68
68
|
if (!selectOptions)
|
|
69
69
|
return;
|
|
@@ -72,16 +72,16 @@ class BaseSelectController {
|
|
|
72
72
|
filtered.forEach((option) => {
|
|
73
73
|
option.hidden = false;
|
|
74
74
|
});
|
|
75
|
-
this.
|
|
75
|
+
this.requestUpdate();
|
|
76
76
|
}
|
|
77
|
-
|
|
77
|
+
requestUpdate() {
|
|
78
78
|
const selectOptions = this.options$.getValue();
|
|
79
79
|
if (!selectOptions)
|
|
80
80
|
return;
|
|
81
81
|
this.options$.notify([...selectOptions]);
|
|
82
82
|
this.host.requestUpdate();
|
|
83
83
|
}
|
|
84
|
-
|
|
84
|
+
getOption(selectValue) {
|
|
85
85
|
var _a;
|
|
86
86
|
return (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.find((option) => option.value === selectValue);
|
|
87
87
|
}
|
package/build/cjs/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js
CHANGED
|
@@ -5,18 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var base_select_controller = require('./base_select_controller.js');
|
|
6
6
|
|
|
7
7
|
class MultiSelectController extends base_select_controller.BaseSelectController {
|
|
8
|
-
|
|
9
|
-
option.selected ? this.
|
|
8
|
+
toggle(option) {
|
|
9
|
+
option.selected ? this.deselect(option) : this.select(option);
|
|
10
10
|
}
|
|
11
|
-
|
|
11
|
+
select(option) {
|
|
12
12
|
option.selected = true;
|
|
13
13
|
this.selectedOptions$.notify((selectedOptions) => [...selectedOptions, option]);
|
|
14
|
-
this.
|
|
14
|
+
this.requestUpdate();
|
|
15
15
|
}
|
|
16
|
-
|
|
16
|
+
deselect(option) {
|
|
17
17
|
option.selected = false;
|
|
18
18
|
this.selectedOptions$.notify((selectedOptions) => selectedOptions.filter((currOption) => currOption.value !== option.value));
|
|
19
|
-
this.
|
|
19
|
+
this.requestUpdate();
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
|
package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_controller.js
CHANGED
|
@@ -5,13 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var base_select_controller = require('./base_select_controller.js');
|
|
6
6
|
|
|
7
7
|
class SelectController extends base_select_controller.BaseSelectController {
|
|
8
|
-
|
|
8
|
+
select(option) {
|
|
9
9
|
var _a;
|
|
10
10
|
const selectedOptions = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
|
|
11
11
|
selectedOptions.forEach((option) => (option.selected = false));
|
|
12
12
|
option.selected = true;
|
|
13
13
|
this.selectedOptions$.notify([option]);
|
|
14
|
-
this.
|
|
14
|
+
this.requestUpdate();
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
|
|
@@ -30,9 +30,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
30
30
|
constructor() {
|
|
31
31
|
var _a;
|
|
32
32
|
super();
|
|
33
|
-
this.
|
|
33
|
+
this.multiple = false;
|
|
34
34
|
this.opened = false;
|
|
35
35
|
this.offset = 2;
|
|
36
|
+
this.type = select_constants.SELECT_TYPES.select;
|
|
36
37
|
this._searchValue = '';
|
|
37
38
|
this._$options = {};
|
|
38
39
|
this._$dropdown = ref_js.createRef();
|
|
@@ -41,14 +42,22 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
41
42
|
this._$dropdownContent = ref_js.createRef();
|
|
42
43
|
this._selectContext = new context_provider_controller.ContextProviderController(this);
|
|
43
44
|
this._setDropdownContentWidth = (width) => {
|
|
44
|
-
|
|
45
|
-
|
|
45
|
+
const $dropdown = this._$dropdownContent.value;
|
|
46
|
+
if (!$dropdown)
|
|
47
|
+
return;
|
|
48
|
+
if (!width) {
|
|
49
|
+
$dropdown.style.removeProperty('width');
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
if (width)
|
|
53
|
+
$dropdown.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
|
|
46
54
|
};
|
|
47
55
|
this._handleOptionDeselect = (event) => {
|
|
48
|
-
const selectedOption = this._selectController.
|
|
56
|
+
const selectedOption = this._selectController.getOption(event.detail);
|
|
49
57
|
if (!selectedOption)
|
|
50
58
|
return;
|
|
51
|
-
this._selectController.
|
|
59
|
+
this._selectController.deselect(selectedOption);
|
|
60
|
+
this._dispatchChangeEvent();
|
|
52
61
|
};
|
|
53
62
|
this._updateOptionsView = (options) => {
|
|
54
63
|
if (options.length < Object.keys(this._$options).length)
|
|
@@ -63,16 +72,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
63
72
|
select_utils.SelectControlUtils.syncHTMLOptionWithModel(option, $option);
|
|
64
73
|
if (!selected)
|
|
65
74
|
return;
|
|
66
|
-
$option.setAttribute(this.
|
|
75
|
+
$option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
|
|
67
76
|
});
|
|
68
77
|
};
|
|
69
78
|
this._handleOptionClicked = (event) => {
|
|
70
|
-
|
|
71
|
-
if (!selectedOption)
|
|
72
|
-
return;
|
|
73
|
-
this._selectController.toggleOption(selectedOption);
|
|
74
|
-
if (!this.multiselect)
|
|
75
|
-
this._closeSelect();
|
|
79
|
+
this._selectOption(event.detail.$option.value);
|
|
76
80
|
};
|
|
77
81
|
this._handleDropdownHidden = () => {
|
|
78
82
|
this._searchValue = '';
|
|
@@ -85,7 +89,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
85
89
|
(_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
|
|
86
90
|
};
|
|
87
91
|
this._clearOptions = () => {
|
|
88
|
-
this._selectController.
|
|
92
|
+
this._selectController.deselectAll();
|
|
93
|
+
this._dispatchChangeEvent();
|
|
94
|
+
};
|
|
95
|
+
this._dispatchChangeEvent = () => {
|
|
96
|
+
this.dispatchEvent(new Event('change'));
|
|
89
97
|
};
|
|
90
98
|
this._handleResize = debounce['default'](() => {
|
|
91
99
|
this._closeSelect();
|
|
@@ -94,6 +102,39 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
94
102
|
const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
|
|
95
103
|
$options.forEach(($option) => $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content));
|
|
96
104
|
this.$placeholder = (_a = this.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) !== null && _a !== void 0 ? _a : 'Select';
|
|
105
|
+
if (this.multiple)
|
|
106
|
+
this.type = select_constants.SELECT_TYPES.multiple;
|
|
107
|
+
}
|
|
108
|
+
get selectedIndex() {
|
|
109
|
+
const selectedOptions = this._selectController.selectedOptions$.getValue();
|
|
110
|
+
if (!selectedOptions || selectedOptions.length === 0)
|
|
111
|
+
return -1;
|
|
112
|
+
const htmlOptions = Object.values(this._$options);
|
|
113
|
+
return this.multiple
|
|
114
|
+
? select_utils.SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
|
|
115
|
+
: select_utils.SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
|
|
116
|
+
}
|
|
117
|
+
set selectedIndex(index) {
|
|
118
|
+
const option = Object.values(this._$options)[index];
|
|
119
|
+
if (!option) {
|
|
120
|
+
this._selectController.deselectAll();
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
123
|
+
this._selectOption(option.value);
|
|
124
|
+
}
|
|
125
|
+
get selectedOptions() {
|
|
126
|
+
var _a;
|
|
127
|
+
const selectedOptions = (_a = this._selectController.selectedOptions$.getValue()) !== null && _a !== void 0 ? _a : [];
|
|
128
|
+
return selectedOptions.filter((option) => option.selected).map((option) => this._$options[option.value]);
|
|
129
|
+
}
|
|
130
|
+
get name() {
|
|
131
|
+
return this.controlName;
|
|
132
|
+
}
|
|
133
|
+
get id() {
|
|
134
|
+
return this.controlId;
|
|
135
|
+
}
|
|
136
|
+
get options() {
|
|
137
|
+
return Object.values(this._$options);
|
|
97
138
|
}
|
|
98
139
|
updated(changedProperties) {
|
|
99
140
|
super.updated(changedProperties);
|
|
@@ -120,9 +161,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
120
161
|
connectedCallback() {
|
|
121
162
|
super.connectedCallback();
|
|
122
163
|
this.classList.add(select_constants.SELECT_CSS_CLASSES.select);
|
|
123
|
-
this._selectController = this.
|
|
164
|
+
this._selectController = this.multiple ? new multi_select_controller.MultiSelectController({ host: this }) : new select_controller.SelectController({ host: this });
|
|
124
165
|
this._selectContext.provide(select_constants.SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
|
|
125
|
-
this._selectContext.provide(select_constants.SELECT_CONTEXTS.isMultiselect, this.
|
|
166
|
+
this._selectContext.provide(select_constants.SELECT_CONTEXTS.isMultiselect, this.multiple);
|
|
126
167
|
const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
|
|
127
168
|
this._optionsObserver = new observer.Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
|
|
128
169
|
this._selectController.options$.subscribe(this._optionsObserver);
|
|
@@ -166,29 +207,38 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
166
207
|
const { value, selected } = option;
|
|
167
208
|
const $option = select_utils.SelectControlUtils.createHTMLOption(option);
|
|
168
209
|
if (selected)
|
|
169
|
-
$option.setAttribute(this.
|
|
210
|
+
$option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
|
|
170
211
|
this._$options[value] = $option;
|
|
171
212
|
select_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
|
|
172
213
|
}
|
|
173
214
|
_removeHTMLOptions(optionsValues) {
|
|
174
215
|
this._$options = select_utils.SelectControlUtils.removeHTMLOptions(Object.values(this._$options), optionsValues);
|
|
175
216
|
}
|
|
217
|
+
_selectOption(value) {
|
|
218
|
+
const option = this._selectController.getOption(value);
|
|
219
|
+
if (!option)
|
|
220
|
+
return;
|
|
221
|
+
this._selectController.toggle(option);
|
|
222
|
+
if (!this.multiple)
|
|
223
|
+
this._closeSelect();
|
|
224
|
+
this._dispatchChangeEvent();
|
|
225
|
+
}
|
|
176
226
|
_handleSearch({ detail }) {
|
|
177
227
|
this._searchValue = detail;
|
|
178
228
|
}
|
|
179
229
|
update(changedProperties) {
|
|
180
230
|
super.update(changedProperties);
|
|
181
231
|
if (changedProperties.has('_searchValue'))
|
|
182
|
-
this._selectController.
|
|
232
|
+
this._selectController.filter(this._searchValue);
|
|
183
233
|
}
|
|
184
|
-
|
|
185
|
-
this._selectController.
|
|
234
|
+
add(option, position) {
|
|
235
|
+
this._selectController.add(option, position);
|
|
186
236
|
}
|
|
187
237
|
removeOption(optionValue) {
|
|
188
|
-
this._selectController.
|
|
238
|
+
this._selectController.remove(optionValue);
|
|
189
239
|
}
|
|
190
|
-
|
|
191
|
-
this._selectController.
|
|
240
|
+
replace(options) {
|
|
241
|
+
this._selectController.replace(options);
|
|
192
242
|
}
|
|
193
243
|
disconnectedCallback() {
|
|
194
244
|
super.disconnectedCallback();
|
|
@@ -257,7 +307,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
257
307
|
</p>
|
|
258
308
|
</div>`
|
|
259
309
|
: lit.nothing}
|
|
260
|
-
${this.
|
|
310
|
+
${this.multiple && this._selectController.selectedOptionsCount >= 1
|
|
261
311
|
? lit.html `
|
|
262
312
|
<section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
|
|
263
313
|
<button class="${select_constants.SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>clear</button>
|
|
@@ -281,13 +331,17 @@ exports.HSelect._components = {
|
|
|
281
331
|
toggler: select_toggler.HSelectToggler
|
|
282
332
|
};
|
|
283
333
|
tslib_es6.__decorate([
|
|
284
|
-
decorators_js.property({ type: String }),
|
|
334
|
+
decorators_js.property({ type: String, attribute: 'control-name' }),
|
|
285
335
|
tslib_es6.__metadata("design:type", String)
|
|
286
336
|
], exports.HSelect.prototype, "controlName", void 0);
|
|
337
|
+
tslib_es6.__decorate([
|
|
338
|
+
decorators_js.property({ type: String, attribute: 'control-id' }),
|
|
339
|
+
tslib_es6.__metadata("design:type", String)
|
|
340
|
+
], exports.HSelect.prototype, "controlId", void 0);
|
|
287
341
|
tslib_es6.__decorate([
|
|
288
342
|
decorators_js.property({ type: Boolean }),
|
|
289
343
|
tslib_es6.__metadata("design:type", Boolean)
|
|
290
|
-
], exports.HSelect.prototype, "
|
|
344
|
+
], exports.HSelect.prototype, "multiple", void 0);
|
|
291
345
|
tslib_es6.__decorate([
|
|
292
346
|
decorators_js.property({ type: Boolean }),
|
|
293
347
|
tslib_es6.__metadata("design:type", Boolean)
|
|
@@ -304,6 +358,14 @@ tslib_es6.__decorate([
|
|
|
304
358
|
decorators_js.property({ type: Boolean }),
|
|
305
359
|
tslib_es6.__metadata("design:type", Boolean)
|
|
306
360
|
], exports.HSelect.prototype, "disabled", void 0);
|
|
361
|
+
tslib_es6.__decorate([
|
|
362
|
+
decorators_js.property({ type: String }),
|
|
363
|
+
tslib_es6.__metadata("design:type", String)
|
|
364
|
+
], exports.HSelect.prototype, "type", void 0);
|
|
365
|
+
tslib_es6.__decorate([
|
|
366
|
+
decorators_js.property({ type: Boolean }),
|
|
367
|
+
tslib_es6.__metadata("design:type", Boolean)
|
|
368
|
+
], exports.HSelect.prototype, "required", void 0);
|
|
307
369
|
tslib_es6.__decorate([
|
|
308
370
|
decorators.state(),
|
|
309
371
|
tslib_es6.__metadata("design:type", String)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -10,6 +10,10 @@ const SELECT_SLOT_NAMES = {
|
|
|
10
10
|
content: 'content',
|
|
11
11
|
toggler: 'toggler'
|
|
12
12
|
};
|
|
13
|
+
const SELECT_TYPES = {
|
|
14
|
+
select: 'select-one',
|
|
15
|
+
multiple: 'select-multiple'
|
|
16
|
+
};
|
|
13
17
|
const SELECT_EVENT_NAMES = {
|
|
14
18
|
selectOption: 'selectOption.select',
|
|
15
19
|
deselectOption: 'selectOption.deselect'
|
|
@@ -42,4 +46,5 @@ exports.SELECT_CSS_CLASSES = SELECT_CSS_CLASSES;
|
|
|
42
46
|
exports.SELECT_EVENT_NAMES = SELECT_EVENT_NAMES;
|
|
43
47
|
exports.SELECT_RESIZE_DEBOUNCE_TIME = SELECT_RESIZE_DEBOUNCE_TIME;
|
|
44
48
|
exports.SELECT_SLOT_NAMES = SELECT_SLOT_NAMES;
|
|
49
|
+
exports.SELECT_TYPES = SELECT_TYPES;
|
|
45
50
|
//# 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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -46,6 +46,12 @@ class SelectControlUtils {
|
|
|
46
46
|
}
|
|
47
47
|
$list.append($option);
|
|
48
48
|
}
|
|
49
|
+
static getFirstIndexSelectedOption(options) {
|
|
50
|
+
return options.findIndex((option) => option.selected);
|
|
51
|
+
}
|
|
52
|
+
static getLastIndexOfSelectedOption(options) {
|
|
53
|
+
return [...options].reverse().findIndex((option) => option.selected);
|
|
54
|
+
}
|
|
49
55
|
}
|
|
50
56
|
|
|
51
57
|
exports.SelectControlUtils = SelectControlUtils;
|
|
@@ -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;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -6,11 +6,11 @@ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
|
|
|
6
6
|
var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
7
7
|
var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
|
|
8
8
|
var decorators_js = require('@lit/reactive-element/decorators.js');
|
|
9
|
+
require('@lit/reactive-element');
|
|
9
10
|
var litHtml = require('lit-html');
|
|
10
11
|
var ref_js = require('lit-html/directives/ref.js');
|
|
11
12
|
var portal_constants = require('../portal/portal_constants.js');
|
|
12
13
|
var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
|
|
13
|
-
require('@lit/reactive-element');
|
|
14
14
|
var modal_constants = require('./modal_constants.js');
|
|
15
15
|
|
|
16
16
|
var HModal_1;
|