@shoper/phoenix_design_system 1.2.13 → 1.2.14
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/color_swatches/color_item/color_item.js +12 -7
- package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item_constants.js +12 -0
- package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item_constants.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js +50 -19
- package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_constants.js +1 -4
- package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_constants.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +20 -1
- 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/color_swatches_control/color_swatches_control.js +32 -6
- package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control_constants.js +4 -0
- package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control_constants.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.js +6 -1
- package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/radio/radio_constants.js +9 -1
- package/build/cjs/packages/phoenix/src/components/form/radio/radio_constants.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.js +23 -7
- 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/select_components_constatns.js +4 -2
- 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/select_options.js +9 -2
- package/build/cjs/packages/phoenix/src/components/form/select/components/select_options.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/controllers/base_select_controller.js +11 -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/model/select_option.js +2 -1
- package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js +1 -0
- 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 +25 -29
- package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
- package/build/cjs/packages/phoenix/src/index.js +10 -7
- package/build/cjs/packages/phoenix/src/index.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.d.ts +3 -1
- package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.js +13 -8
- package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_constants.d.ts +9 -0
- package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_constants.js +11 -1
- package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_types.d.ts +3 -5
- package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_types.js +2 -1
- package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_types.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.d.ts +8 -3
- package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js +51 -20
- package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.d.ts +1 -3
- package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.js +1 -4
- package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_types.d.ts +8 -3
- package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_types.js +1 -1
- package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_types.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +4 -0
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +21 -2
- 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/color_swatches_control/color_swatches_control.d.ts +6 -0
- package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js +34 -8
- package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control_constants.d.ts +3 -0
- package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control_constants.js +4 -1
- package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.js +6 -1
- package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/radio/radio_constants.d.ts +6 -0
- package/build/esm/packages/phoenix/src/components/form/radio/radio_constants.js +9 -2
- package/build/esm/packages/phoenix/src/components/form/radio/radio_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.d.ts +4 -0
- package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.js +23 -7
- 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/select_components_constatns.d.ts +2 -0
- package/build/esm/packages/phoenix/src/components/form/select/components/select_components_constatns.js +4 -2
- 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/select_options.d.ts +2 -0
- package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js +9 -2
- package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.d.ts +1 -0
- package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.js +11 -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/select_controllers_types.d.ts +1 -0
- package/build/esm/packages/phoenix/src/components/form/select/model/select_option.d.ts +1 -0
- package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js +2 -1
- package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/model/select_option_constants.d.ts +1 -0
- package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js +1 -0
- 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 +2 -3
- package/build/esm/packages/phoenix/src/components/form/select/select.js +25 -29
- package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
- package/build/esm/packages/phoenix/src/index.d.ts +3 -0
- package/build/esm/packages/phoenix/src/index.js +3 -2
- package/build/esm/packages/phoenix/src/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import '@phoenixRoot/components/color_swatches/color_item/color_item';
|
|
2
2
|
//# sourceMappingURL=color_swatches_types.js.map
|
package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color_swatches_types.js","sourceRoot":"","sources":["../../../../../../../src/components/color_swatches/color_swatches_types.ts"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"color_swatches_types.js","sourceRoot":"","sources":["../../../../../../../src/components/color_swatches/color_swatches_types.ts"],"names":[],"mappings":"AAAA,OAA2B,8DAA8D,CAAC"}
|
|
@@ -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
|
+
contentWidth: TDropdownContentWidth;
|
|
13
15
|
portalTarget: string;
|
|
14
16
|
$dropdownToggler: HDropdownToggler | null;
|
|
15
17
|
$dropdownContent: HDropdownContent | null;
|
|
@@ -45,6 +47,8 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
|
|
|
45
47
|
private _setupInitialDropdownProperties;
|
|
46
48
|
isOpened: () => boolean;
|
|
47
49
|
private _positionDropdownContent;
|
|
50
|
+
private _getDropdownContentWidth;
|
|
51
|
+
private _setDropdownContentWidth;
|
|
48
52
|
disconnectedCallback(): void;
|
|
49
53
|
render(): TemplateResult;
|
|
50
54
|
}
|
|
@@ -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,12 +192,25 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
193
192
|
};
|
|
194
193
|
this.isOpened = () => this.opened;
|
|
195
194
|
this._positionDropdownContent = () => {
|
|
195
|
+
if (this.contentWidth === DROPDOWN_CONTENT_WIDTH.full)
|
|
196
|
+
this._setDropdownContentWidth(this._getDropdownContentWidth());
|
|
196
197
|
requestAnimationFrame(() => {
|
|
197
198
|
this.opened && window.innerWidth < BREAKPOINTS.xs
|
|
198
199
|
? this._positionController.disableRelativePositioning()
|
|
199
200
|
: this._positionController.position();
|
|
200
201
|
});
|
|
201
202
|
};
|
|
203
|
+
this._setDropdownContentWidth = (width) => {
|
|
204
|
+
const $dropdown = this.$dropdownContent;
|
|
205
|
+
if (!$dropdown)
|
|
206
|
+
return;
|
|
207
|
+
if (!width) {
|
|
208
|
+
$dropdown.style.removeProperty('width');
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
211
|
+
if (width)
|
|
212
|
+
$dropdown.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
|
|
213
|
+
};
|
|
202
214
|
new KeystrokesController({
|
|
203
215
|
host: this,
|
|
204
216
|
target: document.body,
|
|
@@ -308,6 +320,9 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
308
320
|
if (!this._hasScrollableClassInitially)
|
|
309
321
|
this._hasScrollableClassInitially = this.$dropdownContent.classList.contains(SCROLLABLE_CLASS_NAME);
|
|
310
322
|
}
|
|
323
|
+
_getDropdownContentWidth() {
|
|
324
|
+
return document.documentElement.clientWidth < BREAKPOINTS.xs ? undefined : this.getBoundingClientRect().width;
|
|
325
|
+
}
|
|
311
326
|
disconnectedCallback() {
|
|
312
327
|
var _a;
|
|
313
328
|
super.disconnectedCallback();
|
|
@@ -356,6 +371,10 @@ __decorate([
|
|
|
356
371
|
property({ type: Number }),
|
|
357
372
|
__metadata("design:type", Object)
|
|
358
373
|
], HDropdown.prototype, "offset", void 0);
|
|
374
|
+
__decorate([
|
|
375
|
+
property({ type: String, attribute: 'content-width' }),
|
|
376
|
+
__metadata("design:type", String)
|
|
377
|
+
], HDropdown.prototype, "contentWidth", void 0);
|
|
359
378
|
__decorate([
|
|
360
379
|
property({ type: String }),
|
|
361
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"}
|
|
@@ -7,7 +7,13 @@ export declare class HColorSwatchesControl extends PhoenixLightLitElement {
|
|
|
7
7
|
required: boolean;
|
|
8
8
|
error: boolean;
|
|
9
9
|
selectedColors: string[];
|
|
10
|
+
selectColors(values: string[]): void;
|
|
11
|
+
clearAllColors(): void;
|
|
12
|
+
private _$colorSwatches;
|
|
10
13
|
connectedCallback(): void;
|
|
14
|
+
private _getSelectedColors;
|
|
15
|
+
private _getAllColorItems;
|
|
16
|
+
private _getSelectedColorItems;
|
|
11
17
|
private _setupEvents;
|
|
12
18
|
protected render(): TemplateResult | void;
|
|
13
19
|
}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
|
|
2
2
|
import { html } from 'lit';
|
|
3
|
-
import { property
|
|
4
|
-
import { ArrayUtils } from '@dreamcommerce/utilities';
|
|
3
|
+
import { property } from 'lit/decorators';
|
|
5
4
|
import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
6
5
|
import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
|
|
7
6
|
import classnames from '../../../../external/classnames/index.js';
|
|
8
7
|
import { INPUT_CONTROL_TYPES } from '../input/input_constants.js';
|
|
9
|
-
import { COLOR_SWATCHES_CONTROL_CSS_CLASSES } from './color_swatches_control_constants.js';
|
|
8
|
+
import { COLOR_SWATCHES_CONTROL_CSS_CLASSES, COLOR_SWATCHES_CONTROL_EVENT_NAMES } from './color_swatches_control_constants.js';
|
|
10
9
|
import { COLOR_SWATCHES_EVENT_NAMES } from '../../color_swatches/color_swatches_constants.js';
|
|
11
10
|
|
|
12
11
|
let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitElement {
|
|
@@ -14,6 +13,18 @@ let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitE
|
|
|
14
13
|
super(...arguments);
|
|
15
14
|
this.selectedColors = [];
|
|
16
15
|
}
|
|
16
|
+
selectColors(values) {
|
|
17
|
+
if (!this._$colorSwatches)
|
|
18
|
+
return;
|
|
19
|
+
const $colors = values === null || values === void 0 ? void 0 : values.map((value) => this.querySelector(`h-color-item[value="${value}"]`)).filter(($color) => $color);
|
|
20
|
+
this._$colorSwatches.selectColors($colors);
|
|
21
|
+
this.requestUpdate();
|
|
22
|
+
}
|
|
23
|
+
clearAllColors() {
|
|
24
|
+
var _a;
|
|
25
|
+
(_a = this._$colorSwatches) === null || _a === void 0 ? void 0 : _a.clearAllColors();
|
|
26
|
+
this.requestUpdate();
|
|
27
|
+
}
|
|
17
28
|
connectedCallback() {
|
|
18
29
|
super.connectedCallback();
|
|
19
30
|
this._setupEvents();
|
|
@@ -22,13 +33,28 @@ let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitE
|
|
|
22
33
|
[COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlDisabled]: this.disabled,
|
|
23
34
|
[COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlError]: this.error
|
|
24
35
|
});
|
|
36
|
+
this._$colorSwatches = this.querySelector('h-color-swatches');
|
|
25
37
|
if (cssClasses)
|
|
26
38
|
this.classList.add(cssClasses);
|
|
39
|
+
this._getSelectedColors();
|
|
40
|
+
}
|
|
41
|
+
_getSelectedColors() {
|
|
42
|
+
this.selectedColors = this._getSelectedColorItems().map((selectedColor) => { var _a; return (_a = selectedColor.value) !== null && _a !== void 0 ? _a : selectedColor.color; });
|
|
43
|
+
}
|
|
44
|
+
_getAllColorItems() {
|
|
45
|
+
return [...this.querySelectorAll('h-color-item[selected]')];
|
|
46
|
+
}
|
|
47
|
+
_getSelectedColorItems() {
|
|
48
|
+
return this._getAllColorItems().filter(($color) => $color.selected);
|
|
27
49
|
}
|
|
28
50
|
_setupEvents() {
|
|
29
|
-
this.addEventListener(COLOR_SWATCHES_EVENT_NAMES.
|
|
30
|
-
|
|
31
|
-
this.selectedColors =
|
|
51
|
+
this.addEventListener(COLOR_SWATCHES_EVENT_NAMES.change, (event) => {
|
|
52
|
+
event.preventDefault();
|
|
53
|
+
this.selectedColors = event.detail.values;
|
|
54
|
+
this.dispatchEvent(new CustomEvent(COLOR_SWATCHES_CONTROL_EVENT_NAMES.change, {
|
|
55
|
+
bubbles: true,
|
|
56
|
+
detail: event.detail
|
|
57
|
+
}));
|
|
32
58
|
});
|
|
33
59
|
}
|
|
34
60
|
render() {
|
|
@@ -44,7 +70,7 @@ __decorate([
|
|
|
44
70
|
__metadata("design:type", String)
|
|
45
71
|
], HColorSwatchesControl.prototype, "controlId", void 0);
|
|
46
72
|
__decorate([
|
|
47
|
-
property({ type: String }),
|
|
73
|
+
property({ type: String, attribute: 'control-name' }),
|
|
48
74
|
__metadata("design:type", String)
|
|
49
75
|
], HColorSwatchesControl.prototype, "controlName", void 0);
|
|
50
76
|
__decorate([
|
|
@@ -60,7 +86,7 @@ __decorate([
|
|
|
60
86
|
__metadata("design:type", Boolean)
|
|
61
87
|
], HColorSwatchesControl.prototype, "error", void 0);
|
|
62
88
|
__decorate([
|
|
63
|
-
|
|
89
|
+
property(),
|
|
64
90
|
__metadata("design:type", Array)
|
|
65
91
|
], HColorSwatchesControl.prototype, "selectedColors", void 0);
|
|
66
92
|
HColorSwatchesControl = __decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,3 +3,6 @@ export declare const COLOR_SWATCHES_CONTROL_CSS_CLASSES: {
|
|
|
3
3
|
readonly colorSwatchesControlDisabled: "color-swatches-control_disabled";
|
|
4
4
|
readonly colorSwatchesControlError: "color-swatches-control_error";
|
|
5
5
|
};
|
|
6
|
+
export declare const COLOR_SWATCHES_CONTROL_EVENT_NAMES: {
|
|
7
|
+
readonly change: "colorSwatchesControl.change";
|
|
8
|
+
};
|
|
@@ -3,7 +3,10 @@ const COLOR_SWATCHES_CONTROL_CSS_CLASSES = {
|
|
|
3
3
|
colorSwatchesControl: baseColorSwatchesControlClass,
|
|
4
4
|
colorSwatchesControlDisabled: `${baseColorSwatchesControlClass}_disabled`,
|
|
5
5
|
colorSwatchesControlError: `${baseColorSwatchesControlClass}_error`
|
|
6
|
+
};
|
|
7
|
+
const COLOR_SWATCHES_CONTROL_EVENT_NAMES = {
|
|
8
|
+
change: 'colorSwatchesControl.change'
|
|
6
9
|
};
|
|
7
10
|
|
|
8
|
-
export { COLOR_SWATCHES_CONTROL_CSS_CLASSES };
|
|
11
|
+
export { COLOR_SWATCHES_CONTROL_CSS_CLASSES, COLOR_SWATCHES_CONTROL_EVENT_NAMES };
|
|
9
12
|
//# sourceMappingURL=color_swatches_control_constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}
|
|
@@ -15,6 +15,10 @@ let HFilePicker = class HFilePicker extends PhoenixLightLitElement {
|
|
|
15
15
|
constructor() {
|
|
16
16
|
super(...arguments);
|
|
17
17
|
this.type = INPUT_CONTROL_TYPES.file;
|
|
18
|
+
this.labelText = 'Wgraj plik';
|
|
19
|
+
this.labelIconName = 'icon-upload';
|
|
20
|
+
this.removeButtonText = 'Usuń plik';
|
|
21
|
+
this.removeButtonIconName = 'icon-x';
|
|
18
22
|
this._$fileInputRef = createRef();
|
|
19
23
|
this._handleChangeEvent = (event) => {
|
|
20
24
|
const filesList = this._getFiles(event);
|
|
@@ -59,6 +63,7 @@ let HFilePicker = class HFilePicker extends PhoenixLightLitElement {
|
|
|
59
63
|
super.connectedCallback();
|
|
60
64
|
this._addEventListeners();
|
|
61
65
|
const cssClasses = classnames({
|
|
66
|
+
[FILE_PICKER_CONTROL_CSS_CLASSES.filePicker]: true,
|
|
62
67
|
[FILE_PICKER_CONTROL_CSS_CLASSES.filePickerDisabled]: this.disabled,
|
|
63
68
|
[FILE_PICKER_CONTROL_CSS_CLASSES.filePickerRequired]: this.required,
|
|
64
69
|
[FILE_PICKER_CONTROL_CSS_CLASSES.filePickerError]: this.error
|
|
@@ -91,7 +96,7 @@ let HFilePicker = class HFilePicker extends PhoenixLightLitElement {
|
|
|
91
96
|
/>`
|
|
92
97
|
: nothing}
|
|
93
98
|
${((_b = this._file) === null || _b === void 0 ? void 0 : _b.name)
|
|
94
|
-
? html
|
|
99
|
+
? html ` <h-file
|
|
95
100
|
name="${this._file.name}"
|
|
96
101
|
id="${this._file.id}"
|
|
97
102
|
remove-button-text="${this.removeButtonText}"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,0CAA8C;AACrE;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -8,6 +8,12 @@ export declare const RADIO_CONTROL_CSS_CLASSES: {
|
|
|
8
8
|
readonly radioControl: "radio__control";
|
|
9
9
|
readonly radioInput: "radio__input";
|
|
10
10
|
readonly radioLabel: "radio__label";
|
|
11
|
+
readonly radioBox: "radio-box";
|
|
12
|
+
readonly radioBoxDisabled: "radio-box_disabled";
|
|
13
|
+
};
|
|
14
|
+
export declare const RADIO_CONTROL_VARIANTS: {
|
|
15
|
+
readonly classic: "classic";
|
|
16
|
+
readonly box: "box";
|
|
11
17
|
};
|
|
12
18
|
export declare const RADIO_SLOTS: {
|
|
13
19
|
readonly label: "label";
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
const baseRadioControlClass = 'radio';
|
|
2
|
+
const baseRadioBoxControlClass = 'radio-box';
|
|
2
3
|
const RADIO_CONTROL_CSS_CLASSES = {
|
|
3
4
|
radio: baseRadioControlClass,
|
|
4
5
|
radioError: `${baseRadioControlClass}_error`,
|
|
@@ -8,7 +9,13 @@ const RADIO_CONTROL_CSS_CLASSES = {
|
|
|
8
9
|
radioDescription: `${baseRadioControlClass}__description`,
|
|
9
10
|
radioControl: `${baseRadioControlClass}__control`,
|
|
10
11
|
radioInput: `${baseRadioControlClass}__input`,
|
|
11
|
-
radioLabel: `${baseRadioControlClass}__label
|
|
12
|
+
radioLabel: `${baseRadioControlClass}__label`,
|
|
13
|
+
radioBox: baseRadioBoxControlClass,
|
|
14
|
+
radioBoxDisabled: `${baseRadioBoxControlClass}_disabled`
|
|
15
|
+
};
|
|
16
|
+
const RADIO_CONTROL_VARIANTS = {
|
|
17
|
+
classic: 'classic',
|
|
18
|
+
box: 'box'
|
|
12
19
|
};
|
|
13
20
|
const RADIO_SLOTS = {
|
|
14
21
|
label: 'label',
|
|
@@ -18,5 +25,5 @@ const RADIO_CONTROL_EVENTS = {
|
|
|
18
25
|
change: 'change'
|
|
19
26
|
};
|
|
20
27
|
|
|
21
|
-
export { RADIO_CONTROL_CSS_CLASSES, RADIO_CONTROL_EVENTS, RADIO_SLOTS };
|
|
28
|
+
export { RADIO_CONTROL_CSS_CLASSES, RADIO_CONTROL_EVENTS, RADIO_CONTROL_VARIANTS, RADIO_SLOTS };
|
|
22
29
|
//# sourceMappingURL=radio_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;"}
|
|
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;"}
|
package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.d.ts
CHANGED
|
@@ -5,12 +5,16 @@ export declare class HOption extends PhoenixLightLitElement {
|
|
|
5
5
|
selected: boolean;
|
|
6
6
|
disabled: boolean;
|
|
7
7
|
hidden: boolean;
|
|
8
|
+
inactive: boolean;
|
|
9
|
+
clickable: boolean;
|
|
8
10
|
private _btnController;
|
|
9
11
|
private _$checkedIcon?;
|
|
10
12
|
connectedCallback(): void;
|
|
11
13
|
private _setupEvents;
|
|
12
14
|
private _dispatchClickedEvent;
|
|
13
15
|
updated(changedProperties: PropertyValues): void;
|
|
16
|
+
private _dispatchSelectUpdated;
|
|
17
|
+
private _dispatchEvent;
|
|
14
18
|
private _addSelectedIcon;
|
|
15
19
|
private _removeSelectedIcon;
|
|
16
20
|
}
|
package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.js
CHANGED
|
@@ -11,14 +11,9 @@ let HOption = class HOption extends PhoenixLightLitElement {
|
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments);
|
|
13
13
|
this._dispatchClickedEvent = () => {
|
|
14
|
-
if (this.disabled)
|
|
14
|
+
if (this.disabled && !this.clickable)
|
|
15
15
|
return;
|
|
16
|
-
this.
|
|
17
|
-
bubbles: true,
|
|
18
|
-
detail: {
|
|
19
|
-
$option: this
|
|
20
|
-
}
|
|
21
|
-
}));
|
|
16
|
+
this._dispatchEvent(SELECT_OPTION_EVENT_NAMES.clicked);
|
|
22
17
|
};
|
|
23
18
|
}
|
|
24
19
|
connectedCallback() {
|
|
@@ -38,6 +33,19 @@ let HOption = class HOption extends PhoenixLightLitElement {
|
|
|
38
33
|
super.updated(changedProperties);
|
|
39
34
|
if (changedProperties.has('selected'))
|
|
40
35
|
this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
|
|
36
|
+
if (changedProperties.has('inactive') || changedProperties.has('hidden') || changedProperties.has('disabled'))
|
|
37
|
+
this._dispatchSelectUpdated();
|
|
38
|
+
}
|
|
39
|
+
_dispatchSelectUpdated() {
|
|
40
|
+
this._dispatchEvent(SELECT_OPTION_EVENT_NAMES.updated);
|
|
41
|
+
}
|
|
42
|
+
_dispatchEvent(eventName) {
|
|
43
|
+
this.dispatchEvent(new CustomEvent(eventName, {
|
|
44
|
+
bubbles: true,
|
|
45
|
+
detail: {
|
|
46
|
+
$option: this
|
|
47
|
+
}
|
|
48
|
+
}));
|
|
41
49
|
}
|
|
42
50
|
_addSelectedIcon() {
|
|
43
51
|
this._$checkedIcon = document.createElement('h-icon');
|
|
@@ -66,6 +74,14 @@ __decorate([
|
|
|
66
74
|
property({ type: Boolean, reflect: true }),
|
|
67
75
|
__metadata("design:type", Boolean)
|
|
68
76
|
], HOption.prototype, "hidden", void 0);
|
|
77
|
+
__decorate([
|
|
78
|
+
property({ type: Boolean, reflect: true }),
|
|
79
|
+
__metadata("design:type", Boolean)
|
|
80
|
+
], HOption.prototype, "inactive", void 0);
|
|
81
|
+
__decorate([
|
|
82
|
+
property({ type: Boolean, reflect: true }),
|
|
83
|
+
__metadata("design:type", Boolean)
|
|
84
|
+
], HOption.prototype, "clickable", void 0);
|
|
69
85
|
HOption = __decorate([
|
|
70
86
|
phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.option)
|
|
71
87
|
], HOption);
|
package/build/esm/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,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,8 +1,10 @@
|
|
|
1
1
|
export declare const SELECT_OPTION_EVENT_NAMES: {
|
|
2
2
|
readonly clicked: "selectOption.clicked";
|
|
3
|
+
readonly updated: "selectOption.updated";
|
|
3
4
|
};
|
|
4
5
|
export declare const SELECT_OPTIONS_EVENT_NAMES: {
|
|
5
6
|
readonly clicked: "selectOptions.clicked";
|
|
7
|
+
readonly updated: "selectOptions.updated";
|
|
6
8
|
};
|
|
7
9
|
export declare const SELECT_SEARCH_EVENT_NAMES: {
|
|
8
10
|
readonly search: "selectSearch.search";
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
const SELECT_OPTION_EVENT_NAMES = {
|
|
2
|
-
clicked: 'selectOption.clicked'
|
|
2
|
+
clicked: 'selectOption.clicked',
|
|
3
|
+
updated: 'selectOption.updated'
|
|
3
4
|
};
|
|
4
5
|
const SELECT_OPTIONS_EVENT_NAMES = {
|
|
5
|
-
clicked: 'selectOptions.clicked'
|
|
6
|
+
clicked: 'selectOptions.clicked',
|
|
7
|
+
updated: 'selectOptions.updated'
|
|
6
8
|
};
|
|
7
9
|
const SELECT_SEARCH_EVENT_NAMES = {
|
|
8
10
|
search: 'selectSearch.search'
|
|
@@ -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;"}
|
|
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;"}
|
|
@@ -8,16 +8,23 @@ let HOptions = class HOptions extends PhoenixLightLitElement {
|
|
|
8
8
|
constructor() {
|
|
9
9
|
super();
|
|
10
10
|
this._dispatchClickedEvent = ({ detail }) => {
|
|
11
|
-
this.
|
|
11
|
+
this._dispatchEvent(SELECT_OPTIONS_EVENT_NAMES.clicked, detail.$option);
|
|
12
|
+
};
|
|
13
|
+
this._dispatchUpdatedEvent = ({ detail }) => {
|
|
14
|
+
this._dispatchEvent(SELECT_OPTIONS_EVENT_NAMES.updated, detail.$option);
|
|
15
|
+
};
|
|
16
|
+
this._dispatchEvent = (eventName, $option) => {
|
|
17
|
+
this.dispatchEvent(new CustomEvent(eventName, {
|
|
12
18
|
bubbles: true,
|
|
13
19
|
detail: {
|
|
14
|
-
$option
|
|
20
|
+
$option
|
|
15
21
|
}
|
|
16
22
|
}));
|
|
17
23
|
};
|
|
18
24
|
this.setAttribute('role', 'listbox');
|
|
19
25
|
UiDomUtils.makeNavigable(this);
|
|
20
26
|
this.addEventListener(SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
|
|
27
|
+
this.addEventListener(SELECT_OPTION_EVENT_NAMES.updated, this._dispatchUpdatedEvent);
|
|
21
28
|
}
|
|
22
29
|
};
|
|
23
30
|
HOptions = __decorate([
|
package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,kDAAsD;AAC7F;AACA;AACA;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,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -20,6 +20,7 @@ export declare abstract class BaseSelectController implements ISelectController,
|
|
|
20
20
|
replace(options: SelectOption[]): void;
|
|
21
21
|
deselectAll(): void;
|
|
22
22
|
deselect(option: SelectOption): void;
|
|
23
|
+
updateOption(value: string, newOptions: Partial<SelectOption>): void;
|
|
23
24
|
filter(value: string): void;
|
|
24
25
|
protected requestUpdate(): void;
|
|
25
26
|
getOption(selectValue: string): SelectOption | undefined;
|
package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.js
CHANGED
|
@@ -59,8 +59,18 @@ class BaseSelectController {
|
|
|
59
59
|
this.selectedOptions$.notify([]);
|
|
60
60
|
this.requestUpdate();
|
|
61
61
|
}
|
|
62
|
+
updateOption(value, newOptions) {
|
|
63
|
+
const option = this.getOption(value);
|
|
64
|
+
if (!option)
|
|
65
|
+
return;
|
|
66
|
+
Object.entries(newOptions).forEach(([key, value]) => {
|
|
67
|
+
option[key] = value;
|
|
68
|
+
});
|
|
69
|
+
this.requestUpdate();
|
|
70
|
+
}
|
|
62
71
|
filter(value) {
|
|
63
|
-
|
|
72
|
+
var _a;
|
|
73
|
+
const selectOptions = (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.filter((option) => !option.inactive);
|
|
64
74
|
if (!selectOptions)
|
|
65
75
|
return;
|
|
66
76
|
const filtered = SearchingUtils.fuzzySearch(value, selectOptions, 'content');
|
|
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,10 +1,11 @@
|
|
|
1
1
|
class SelectOption {
|
|
2
|
-
constructor({ selected = false, hidden = false, disabled = false, value, content }) {
|
|
2
|
+
constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false }) {
|
|
3
3
|
this.value = value;
|
|
4
4
|
this.selected = selected;
|
|
5
5
|
this.hidden = hidden;
|
|
6
6
|
this.disabled = disabled;
|
|
7
7
|
this.content = content;
|
|
8
|
+
this.inactive = inactive;
|
|
8
9
|
}
|
|
9
10
|
static create(options) {
|
|
10
11
|
return new SelectOption(options);
|
|
@@ -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;"}
|
|
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;"}
|
package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map
CHANGED
|
@@ -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;"}
|
|
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;"}
|