@shoper/phoenix_design_system 1.2.13-2 → 1.2.13-3
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 +6 -2
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js +5 -1
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/select.js +0 -20
- package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +2 -0
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +7 -3
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.d.ts +3 -0
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js +5 -2
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_types.d.ts +2 -0
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_types.js +1 -0
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_types.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +0 -3
- package/build/esm/packages/phoenix/src/components/form/select/select.js +0 -20
- package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
|
|
6
|
-
require('lit/decorators');
|
|
7
6
|
var utilities = require('@dreamcommerce/utilities');
|
|
8
7
|
var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
9
8
|
var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
|
|
@@ -197,7 +196,8 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
197
196
|
};
|
|
198
197
|
this.isOpened = () => this.opened;
|
|
199
198
|
this._positionDropdownContent = () => {
|
|
200
|
-
|
|
199
|
+
if (this.wdith === dropdown_constants.DROPDOWN_CONTENT_WIDTH.full)
|
|
200
|
+
this._setDropdownContentWidth(this._getDropdownContentWidth());
|
|
201
201
|
requestAnimationFrame(() => {
|
|
202
202
|
this.opened && window.innerWidth < global_constants.BREAKPOINTS.xs
|
|
203
203
|
? this._positionController.disableRelativePositioning()
|
|
@@ -375,6 +375,10 @@ tslib_es6.__decorate([
|
|
|
375
375
|
decorators_js.property({ type: Number }),
|
|
376
376
|
tslib_es6.__metadata("design:type", Object)
|
|
377
377
|
], exports.HDropdown.prototype, "offset", void 0);
|
|
378
|
+
tslib_es6.__decorate([
|
|
379
|
+
decorators_js.property({ type: String }),
|
|
380
|
+
tslib_es6.__metadata("design:type", String)
|
|
381
|
+
], exports.HDropdown.prototype, "wdith", void 0);
|
|
378
382
|
tslib_es6.__decorate([
|
|
379
383
|
decorators_js.property({ type: String }),
|
|
380
384
|
tslib_es6.__metadata("design:type", Object)
|
|
@@ -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
|
|
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,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -21,7 +21,10 @@ const DROPDOWN_TOGGLER_CSS_CLASS = `${DROPDOWN_CSS_CLASS}__toggler`;
|
|
|
21
21
|
const DROPDOWN_CONTENT_VISIBLE_CLASS = `${DROPDOWN_CONTENT_CSS_CLASS}_visible`;
|
|
22
22
|
const DROPDOWN_CONTENT_SHOW = `${DROPDOWN_CONTENT_CSS_CLASS}_show`;
|
|
23
23
|
const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CSS_CLASS}_hide`;
|
|
24
|
-
const DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = 'toggleOnHover';
|
|
24
|
+
const DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = 'toggleOnHover';
|
|
25
|
+
const DROPDOWN_CONTENT_WIDTH = {
|
|
26
|
+
full: 'full'
|
|
27
|
+
};
|
|
25
28
|
|
|
26
29
|
exports.DEFAULT_DROPDOWN_PORTAL_NAME = DEFAULT_DROPDOWN_PORTAL_NAME;
|
|
27
30
|
exports.DROPDOWN_CONTAINER_NAME = DROPDOWN_CONTAINER_NAME;
|
|
@@ -30,6 +33,7 @@ exports.DROPDOWN_CONTENT_HIDE = DROPDOWN_CONTENT_HIDE;
|
|
|
30
33
|
exports.DROPDOWN_CONTENT_NAME = DROPDOWN_CONTENT_NAME;
|
|
31
34
|
exports.DROPDOWN_CONTENT_SHOW = DROPDOWN_CONTENT_SHOW;
|
|
32
35
|
exports.DROPDOWN_CONTENT_VISIBLE_CLASS = DROPDOWN_CONTENT_VISIBLE_CLASS;
|
|
36
|
+
exports.DROPDOWN_CONTENT_WIDTH = DROPDOWN_CONTENT_WIDTH;
|
|
33
37
|
exports.DROPDOWN_CSS_CLASS = DROPDOWN_CSS_CLASS;
|
|
34
38
|
exports.DROPDOWN_EVENTS = DROPDOWN_EVENTS;
|
|
35
39
|
exports.DROPDOWN_NAME = DROPDOWN_NAME;
|
|
@@ -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;"}
|
|
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;"}
|
|
@@ -16,7 +16,6 @@ var observable_directive = require('../../../directives/observable_directive.js'
|
|
|
16
16
|
var select_toggler = require('./components/toggler/select_toggler.js');
|
|
17
17
|
var context_provider_controller = require('../../../core/context/context_provider_controller.js');
|
|
18
18
|
var ref_js = require('lit-html/directives/ref.js');
|
|
19
|
-
var global_constants = require('../../../global_constants.js');
|
|
20
19
|
var dropdown_content = require('../../dropdown/dropdown_content.js');
|
|
21
20
|
var dropdown_toggler = require('../../dropdown/dropdown_toggler.js');
|
|
22
21
|
var debounce = require('../../../../../../external/lodash/debounce.js');
|
|
@@ -44,17 +43,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
44
43
|
this._$optionsList = ref_js.createRef();
|
|
45
44
|
this._$dropdownContent = ref_js.createRef();
|
|
46
45
|
this._selectContext = new context_provider_controller.ContextProviderController(this);
|
|
47
|
-
this._setDropdownContentWidth = (width) => {
|
|
48
|
-
const $dropdown = this._$dropdownContent.value;
|
|
49
|
-
if (!$dropdown)
|
|
50
|
-
return;
|
|
51
|
-
if (!width) {
|
|
52
|
-
$dropdown.style.removeProperty('width');
|
|
53
|
-
return;
|
|
54
|
-
}
|
|
55
|
-
if (width)
|
|
56
|
-
$dropdown.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
|
|
57
|
-
};
|
|
58
46
|
this._handleOptionDeselect = (event) => {
|
|
59
47
|
const selectedOption = this._selectController.getOption(event.detail);
|
|
60
48
|
if (!selectedOption)
|
|
@@ -102,7 +90,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
102
90
|
};
|
|
103
91
|
this._handleResize = debounce['default'](() => {
|
|
104
92
|
this._closeSelect();
|
|
105
|
-
this._setDropdownContentWidth(this._getDropdownContentWidth());
|
|
106
93
|
}, select_constants.SELECT_RESIZE_DEBOUNCE_TIME);
|
|
107
94
|
const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
|
|
108
95
|
$options.forEach(($option) => $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content));
|
|
@@ -193,10 +180,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
193
180
|
this.disabled ? this.classList.add(select_constants.SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(select_constants.SELECT_CSS_CLASSES.selectDisabled);
|
|
194
181
|
}
|
|
195
182
|
}
|
|
196
|
-
firstUpdated(props) {
|
|
197
|
-
super.firstUpdated(props);
|
|
198
|
-
this._setDropdownContentWidth(this._getDropdownContentWidth());
|
|
199
|
-
}
|
|
200
183
|
_setupEvents() {
|
|
201
184
|
this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
|
|
202
185
|
this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
|
|
@@ -253,9 +236,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
253
236
|
this._$options = {};
|
|
254
237
|
window.removeEventListener('resize', this._handleResize);
|
|
255
238
|
}
|
|
256
|
-
_getDropdownContentWidth() {
|
|
257
|
-
return document.documentElement.clientWidth < global_constants.BREAKPOINTS.xs ? undefined : this.getBoundingClientRect().width;
|
|
258
|
-
}
|
|
259
239
|
_getClonedPlaceholderElement() {
|
|
260
240
|
return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
|
|
261
241
|
}
|
|
@@ -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;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;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;"}
|
|
@@ -3,6 +3,7 @@ import { TemplateResult } from 'lit-html';
|
|
|
3
3
|
import { HDropdownContent } from './dropdown_content';
|
|
4
4
|
import { HDropdownToggler } from './dropdown_toggler';
|
|
5
5
|
import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
|
|
6
|
+
import type { TDropdownContentWidth } from "./dropdown_types";
|
|
6
7
|
export declare class HDropdown extends PhoenixLightLitElement implements IDropdown {
|
|
7
8
|
opened: boolean;
|
|
8
9
|
direction: TDropdownDirection;
|
|
@@ -10,6 +11,7 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
|
|
|
10
11
|
name: string;
|
|
11
12
|
transition: string;
|
|
12
13
|
offset: number;
|
|
14
|
+
wdith: TDropdownContentWidth;
|
|
13
15
|
portalTarget: string;
|
|
14
16
|
$dropdownToggler: HDropdownToggler | null;
|
|
15
17
|
$dropdownContent: HDropdownContent | null;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
|
|
2
|
-
import 'lit/decorators';
|
|
3
2
|
import { UiDomUtils } from '@dreamcommerce/utilities';
|
|
4
3
|
import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
5
4
|
import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
|
|
@@ -7,7 +6,7 @@ import { property } from '@lit/reactive-element/decorators.js';
|
|
|
7
6
|
import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
|
|
8
7
|
import { html } from 'lit-html';
|
|
9
8
|
import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
|
|
10
|
-
import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
|
|
9
|
+
import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_WIDTH, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
|
|
11
10
|
import { DIRECTIONS, RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
|
|
12
11
|
import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
|
|
13
12
|
import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
|
|
@@ -193,7 +192,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
193
192
|
};
|
|
194
193
|
this.isOpened = () => this.opened;
|
|
195
194
|
this._positionDropdownContent = () => {
|
|
196
|
-
|
|
195
|
+
if (this.wdith === DROPDOWN_CONTENT_WIDTH.full)
|
|
196
|
+
this._setDropdownContentWidth(this._getDropdownContentWidth());
|
|
197
197
|
requestAnimationFrame(() => {
|
|
198
198
|
this.opened && window.innerWidth < BREAKPOINTS.xs
|
|
199
199
|
? this._positionController.disableRelativePositioning()
|
|
@@ -371,6 +371,10 @@ __decorate([
|
|
|
371
371
|
property({ type: Number }),
|
|
372
372
|
__metadata("design:type", Object)
|
|
373
373
|
], HDropdown.prototype, "offset", void 0);
|
|
374
|
+
__decorate([
|
|
375
|
+
property({ type: String }),
|
|
376
|
+
__metadata("design:type", String)
|
|
377
|
+
], HDropdown.prototype, "wdith", void 0);
|
|
374
378
|
__decorate([
|
|
375
379
|
property({ type: String }),
|
|
376
380
|
__metadata("design:type", Object)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;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,4CAAgD;AACvF;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -17,3 +17,6 @@ export declare const DROPDOWN_CONTENT_VISIBLE_CLASS: string;
|
|
|
17
17
|
export declare const DROPDOWN_CONTENT_SHOW: string;
|
|
18
18
|
export declare const DROPDOWN_CONTENT_HIDE: string;
|
|
19
19
|
export declare const DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = "toggleOnHover";
|
|
20
|
+
export declare const DROPDOWN_CONTENT_WIDTH: {
|
|
21
|
+
readonly full: "full";
|
|
22
|
+
};
|
|
@@ -17,7 +17,10 @@ const DROPDOWN_TOGGLER_CSS_CLASS = `${DROPDOWN_CSS_CLASS}__toggler`;
|
|
|
17
17
|
const DROPDOWN_CONTENT_VISIBLE_CLASS = `${DROPDOWN_CONTENT_CSS_CLASS}_visible`;
|
|
18
18
|
const DROPDOWN_CONTENT_SHOW = `${DROPDOWN_CONTENT_CSS_CLASS}_show`;
|
|
19
19
|
const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CSS_CLASS}_hide`;
|
|
20
|
-
const DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = 'toggleOnHover';
|
|
20
|
+
const DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = 'toggleOnHover';
|
|
21
|
+
const DROPDOWN_CONTENT_WIDTH = {
|
|
22
|
+
full: 'full'
|
|
23
|
+
};
|
|
21
24
|
|
|
22
|
-
export { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CSS_CLASS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CSS_CLASS, DROPDOWN_EVENTS, DROPDOWN_NAME, DROPDOWN_TOGGLER_CSS_CLASS, DROPDOWN_TOGGLER_NAME, DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME };
|
|
25
|
+
export { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CSS_CLASS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_WIDTH, DROPDOWN_CSS_CLASS, DROPDOWN_EVENTS, DROPDOWN_NAME, DROPDOWN_TOGGLER_CSS_CLASS, DROPDOWN_TOGGLER_NAME, DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME };
|
|
23
26
|
//# sourceMappingURL=dropdown_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;"}
|
|
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;"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Any } from 'ts-toolbelt';
|
|
2
2
|
import { VERTICAL_DIRECTIONS } from "../../controllers/relative_position_controller/relative_position_controller_constants";
|
|
3
|
+
import { DROPDOWN_CONTENT_WIDTH } from "./dropdown_constants";
|
|
3
4
|
export declare type TDropdownSelectors = {
|
|
4
5
|
getDropdownPortalTargetName(): string;
|
|
5
6
|
getDropdownContainerName(): string;
|
|
@@ -17,3 +18,4 @@ export declare type TDropdownHideEvent = Event & {
|
|
|
17
18
|
};
|
|
18
19
|
};
|
|
19
20
|
export declare type TDropdownDirection = typeof VERTICAL_DIRECTIONS[Any.Keys<typeof VERTICAL_DIRECTIONS>];
|
|
21
|
+
export declare type TDropdownContentWidth = Any.Keys<typeof DROPDOWN_CONTENT_WIDTH>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown_types.js","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/dropdown_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAoC,8FAA8F,CAAC"}
|
|
1
|
+
{"version":3,"file":"dropdown_types.js","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/dropdown_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAoC,8FAA8F,CAAC;AACnI,OAAuC,qDAAqD,CAAC"}
|
|
@@ -36,8 +36,6 @@ export declare class HSelect extends PhoenixLightLitElement {
|
|
|
36
36
|
private _focusElementAfterSelectOpened;
|
|
37
37
|
connectedCallback(): void;
|
|
38
38
|
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
|
|
39
|
-
firstUpdated(props: PropertyValues): void;
|
|
40
|
-
private _setDropdownContentWidth;
|
|
41
39
|
private _setupEvents;
|
|
42
40
|
private _handleOptionDeselect;
|
|
43
41
|
private _updateOptionsView;
|
|
@@ -57,7 +55,6 @@ export declare class HSelect extends PhoenixLightLitElement {
|
|
|
57
55
|
replace(options: SelectOption[]): void;
|
|
58
56
|
disconnectedCallback(): void;
|
|
59
57
|
private _handleResize;
|
|
60
|
-
private _getDropdownContentWidth;
|
|
61
58
|
private _getClonedPlaceholderElement;
|
|
62
59
|
private _searchNoResult;
|
|
63
60
|
protected render(): TemplateResult;
|
|
@@ -12,7 +12,6 @@ import { observe } from '../../../directives/observable_directive.js';
|
|
|
12
12
|
import { HSelectToggler } from './components/toggler/select_toggler.js';
|
|
13
13
|
import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
|
|
14
14
|
import { createRef, ref } from 'lit-html/directives/ref.js';
|
|
15
|
-
import { BREAKPOINTS } from '../../../global_constants.js';
|
|
16
15
|
import { HDropdownContent } from '../../dropdown/dropdown_content.js';
|
|
17
16
|
import { HDropdownToggler } from '../../dropdown/dropdown_toggler.js';
|
|
18
17
|
import debounce_1 from '../../../../../../external/lodash/debounce.js';
|
|
@@ -40,17 +39,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
40
39
|
this._$optionsList = createRef();
|
|
41
40
|
this._$dropdownContent = createRef();
|
|
42
41
|
this._selectContext = new ContextProviderController(this);
|
|
43
|
-
this._setDropdownContentWidth = (width) => {
|
|
44
|
-
const $dropdown = this._$dropdownContent.value;
|
|
45
|
-
if (!$dropdown)
|
|
46
|
-
return;
|
|
47
|
-
if (!width) {
|
|
48
|
-
$dropdown.style.removeProperty('width');
|
|
49
|
-
return;
|
|
50
|
-
}
|
|
51
|
-
if (width)
|
|
52
|
-
$dropdown.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
|
|
53
|
-
};
|
|
54
42
|
this._handleOptionDeselect = (event) => {
|
|
55
43
|
const selectedOption = this._selectController.getOption(event.detail);
|
|
56
44
|
if (!selectedOption)
|
|
@@ -98,7 +86,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
98
86
|
};
|
|
99
87
|
this._handleResize = debounce_1(() => {
|
|
100
88
|
this._closeSelect();
|
|
101
|
-
this._setDropdownContentWidth(this._getDropdownContentWidth());
|
|
102
89
|
}, SELECT_RESIZE_DEBOUNCE_TIME);
|
|
103
90
|
const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
|
|
104
91
|
$options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
|
|
@@ -189,10 +176,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
189
176
|
this.disabled ? this.classList.add(SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(SELECT_CSS_CLASSES.selectDisabled);
|
|
190
177
|
}
|
|
191
178
|
}
|
|
192
|
-
firstUpdated(props) {
|
|
193
|
-
super.firstUpdated(props);
|
|
194
|
-
this._setDropdownContentWidth(this._getDropdownContentWidth());
|
|
195
|
-
}
|
|
196
179
|
_setupEvents() {
|
|
197
180
|
this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
|
|
198
181
|
this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
|
|
@@ -249,9 +232,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
249
232
|
this._$options = {};
|
|
250
233
|
window.removeEventListener('resize', this._handleResize);
|
|
251
234
|
}
|
|
252
|
-
_getDropdownContentWidth() {
|
|
253
|
-
return document.documentElement.clientWidth < BREAKPOINTS.xs ? undefined : this.getBoundingClientRect().width;
|
|
254
|
-
}
|
|
255
235
|
_getClonedPlaceholderElement() {
|
|
256
236
|
return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
|
|
257
237
|
}
|
|
@@ -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
|
|
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,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;"}
|