@genesislcap/foundation-ui 14.141.1 → 14.141.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +748 -729
- package/dist/dts/multiselect/multiselect-consts.d.ts +1 -2
- package/dist/dts/multiselect/multiselect-consts.d.ts.map +1 -1
- package/dist/dts/multiselect/multiselect.d.ts +16 -2
- package/dist/dts/multiselect/multiselect.d.ts.map +1 -1
- package/dist/esm/multiselect/multiselect-consts.js +0 -1
- package/dist/esm/multiselect/multiselect.js +53 -15
- package/package.json +10 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multiselect-consts.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect-consts.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAClB,KAAK,UAAU;IACf,KAAK,UAAU;
|
|
1
|
+
{"version":3,"file":"multiselect-consts.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect-consts.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAClB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB"}
|
|
@@ -13,6 +13,7 @@ export type MultiselectOption = {
|
|
|
13
13
|
*/
|
|
14
14
|
export declare class Multiselect extends FoundationElement {
|
|
15
15
|
name: string;
|
|
16
|
+
autoPosition: boolean;
|
|
16
17
|
all: boolean;
|
|
17
18
|
allSelected: boolean;
|
|
18
19
|
search: boolean;
|
|
@@ -33,6 +34,11 @@ export declare class Multiselect extends FoundationElement {
|
|
|
33
34
|
selectedOptions: string[];
|
|
34
35
|
filteredAvailableOptions: MultiselectOption[];
|
|
35
36
|
scrollContainer: HTMLElement;
|
|
37
|
+
/**
|
|
38
|
+
* Controls the positioning of the multiselect dropdown. Accepts the following values:
|
|
39
|
+
* - Position.ABOVE: Forces the dropdown to always open above the input field.
|
|
40
|
+
* - Position.BELOW: Forces the dropdown to always open below the input field.
|
|
41
|
+
*/
|
|
36
42
|
position: Position;
|
|
37
43
|
onAllSelectedCallback: (allSelected: boolean) => void;
|
|
38
44
|
private initialisedOptions;
|
|
@@ -40,10 +46,18 @@ export declare class Multiselect extends FoundationElement {
|
|
|
40
46
|
optionsElement: HTMLElement;
|
|
41
47
|
connectedCallback(): void;
|
|
42
48
|
disconnectedCallback(): void;
|
|
49
|
+
toggle(): void;
|
|
43
50
|
optionsChanged(): void;
|
|
44
51
|
selectedOptionsChanged(): void;
|
|
45
|
-
|
|
46
|
-
|
|
52
|
+
/**
|
|
53
|
+
* Sets the dropdown position based on the current configuration.
|
|
54
|
+
* @remarks
|
|
55
|
+
* If `autoPosition` is `true`, this method calculates the available space above and below the input field in the viewport and positions the dropdown accordingly.
|
|
56
|
+
* This ensures the dropdown is always visible to the user. If `autoPosition` is `false`, the dropdown position is locked to either 'above' or 'below', as specified by the `position` attribute.
|
|
57
|
+
* This method is intended for internal use by the component and is marked as private.
|
|
58
|
+
* @private
|
|
59
|
+
*/
|
|
60
|
+
private setDropdownPosition;
|
|
47
61
|
optionGetter(option: MultiselectOption): string;
|
|
48
62
|
getItemLabel(option: MultiselectOption): any;
|
|
49
63
|
isOptionDisabled(option: MultiselectOption): boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAO9D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMhD,eAAO,MAAM,kCAAkC,EAAE,cAA0B,CAAC;AAE5E,eAAO,MAAM,wBAAwB,IAAK,CAAC;AAE3C,MAAM,MAAM,iBAAiB,GACzB;IACE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GACD,MAAM,CAAC;AAEX;;GAEG;AACH,qBAAa,WAAY,SAAQ,iBAAiB;IAC1C,IAAI,SAAM;
|
|
1
|
+
{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAO9D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMhD,eAAO,MAAM,kCAAkC,EAAE,cAA0B,CAAC;AAE5E,eAAO,MAAM,wBAAwB,IAAK,CAAC;AAE3C,MAAM,MAAM,iBAAiB,GACzB;IACE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GACD,MAAM,CAAC;AAEX;;GAEG;AACH,qBAAa,WAAY,SAAQ,iBAAiB;IAC1C,IAAI,SAAM;IACuC,YAAY,EAAE,OAAO,CAAQ;IACzD,GAAG,UAAQ;IACX,WAAW,UAAS;IACpB,MAAM,UAAQ;IACd,QAAQ,UAAS;IACjB,KAAK,UAAS;IACnC,QAAQ,EAAE,MAAM,CAAiB;IACvC,eAAe,CAAC,QAAQ,KAAA,EAAE,QAAQ,EAAE,MAAM;IAG1C,qBAAqB,MAAC;IACV,mBAAmB,EAAE,IAAI,EAAE,CAAC;IAC5B,iBAAiB,EAAE,qBAAqB,EAAE,CAAC;IAC3C,cAAc,MAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;IACtC,OAAO,CAAC,YAAY,CAAiD;IACzD,IAAI,UAAS;IACzB,WAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO;IAYhC,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAClC,eAAe,EAAE,MAAM,EAAE,CAAM;IAC/B,wBAAwB,EAAE,iBAAiB,EAAE,CAAqB;IAClE,eAAe,EAAE,WAAW,CAAC;IAEzC;;;;OAIG;IACS,QAAQ,EAAE,QAAQ,CAAkB;IAEpC,qBAAqB,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAElE,OAAO,CAAC,kBAAkB,CAAkB;IAE5C,SAAS,EAAE,UAAU,CAAC;IACtB,cAAc,EAAE,WAAW,CAAC;IAE5B,iBAAiB;IAOjB,oBAAoB;IAKpB,MAAM;IAON,cAAc;IAQd,sBAAsB;IAOtB;;;;;;;OAOG;IACH,OAAO,CAAC,mBAAmB;IAqC3B,YAAY,CAAC,MAAM,EAAE,iBAAiB;IAOtC,YAAY,CAAC,MAAM,EAAE,iBAAiB;IAetC,gBAAgB,CAAC,MAAM,EAAE,iBAAiB;IAQ1C,IACI,eAAe,WAyBlB;IAED,IACI,cAAc,WAEjB;IAED,IACI,aAAa,YAIhB;IAED,IACI,oBAAoB,YAEvB;IAED,gBAAgB,CAAC,gBAAgB,EAAE,iBAAiB,GAAG,OAAO;IAI9D,iBAAiB,CAAC,gBAAgB,EAAE,iBAAiB;IAarD,sBAAsB;IAItB,iBAAiB;IAajB,YAAY;IAUZ,SAAS;IAST,cAAc;IAkBd,aAAa,CAAC,KAAK,EAAE,KAAK;IAK1B,OAAO,CAAC,kBAAkB;CAK3B;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;sBAMhC,CAAC"}
|
|
@@ -5,7 +5,7 @@ import { FoundationElement } from '@microsoft/fast-foundation';
|
|
|
5
5
|
import debounce from 'lodash.debounce';
|
|
6
6
|
import { dataserverCriteriaBuilder, logger, requestServerCriteriaBuilder, wasClickOutsideElement, } from '../utils';
|
|
7
7
|
import { Position } from './multiselect-consts';
|
|
8
|
-
import { multiselectStyles as styles
|
|
8
|
+
import { multiselectStyles as styles } from './multiselect.styles';
|
|
9
9
|
import { multiselectTemplate as template } from './multiselect.template';
|
|
10
10
|
const DEBOUNCE_TIME = 500;
|
|
11
11
|
export const foundationMultiselectShadowOptions = undefined;
|
|
@@ -17,6 +17,7 @@ export class Multiselect extends FoundationElement {
|
|
|
17
17
|
constructor() {
|
|
18
18
|
super(...arguments);
|
|
19
19
|
this.name = '';
|
|
20
|
+
this.autoPosition = true;
|
|
20
21
|
this.all = true;
|
|
21
22
|
this.allSelected = false;
|
|
22
23
|
this.search = true;
|
|
@@ -28,6 +29,11 @@ export class Multiselect extends FoundationElement {
|
|
|
28
29
|
this.options = [];
|
|
29
30
|
this.selectedOptions = [];
|
|
30
31
|
this.filteredAvailableOptions = [...this.options];
|
|
32
|
+
/**
|
|
33
|
+
* Controls the positioning of the multiselect dropdown. Accepts the following values:
|
|
34
|
+
* - Position.ABOVE: Forces the dropdown to always open above the input field.
|
|
35
|
+
* - Position.BELOW: Forces the dropdown to always open below the input field.
|
|
36
|
+
*/
|
|
31
37
|
this.position = Position.BELOW;
|
|
32
38
|
this.initialisedOptions = false;
|
|
33
39
|
}
|
|
@@ -58,6 +64,12 @@ export class Multiselect extends FoundationElement {
|
|
|
58
64
|
super.disconnectedCallback();
|
|
59
65
|
document.removeEventListener('mousedown', this.clickOutside);
|
|
60
66
|
}
|
|
67
|
+
toggle() {
|
|
68
|
+
if (!this.open) {
|
|
69
|
+
this.setDropdownPosition();
|
|
70
|
+
}
|
|
71
|
+
this.open = !this.open;
|
|
72
|
+
}
|
|
61
73
|
optionsChanged() {
|
|
62
74
|
if (this.allSelected && !this.initialisedOptions) {
|
|
63
75
|
this.selectedOptions = this.options.map((option) => this.optionGetter(option));
|
|
@@ -70,22 +82,45 @@ export class Multiselect extends FoundationElement {
|
|
|
70
82
|
return;
|
|
71
83
|
}
|
|
72
84
|
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
85
|
+
/**
|
|
86
|
+
* Sets the dropdown position based on the current configuration.
|
|
87
|
+
* @remarks
|
|
88
|
+
* If `autoPosition` is `true`, this method calculates the available space above and below the input field in the viewport and positions the dropdown accordingly.
|
|
89
|
+
* This ensures the dropdown is always visible to the user. If `autoPosition` is `false`, the dropdown position is locked to either 'above' or 'below', as specified by the `position` attribute.
|
|
90
|
+
* This method is intended for internal use by the component and is marked as private.
|
|
91
|
+
* @private
|
|
92
|
+
*/
|
|
79
93
|
setDropdownPosition() {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
94
|
+
let calculatedPosition = this.position;
|
|
95
|
+
if (this.autoPosition) {
|
|
96
|
+
let container = this.assignedSlot ? this.assignedSlot.parentElement : this.parentElement;
|
|
97
|
+
while (container && !container.classList.contains('content-wrapper')) {
|
|
98
|
+
container = container.parentElement;
|
|
99
|
+
}
|
|
100
|
+
if (!container) {
|
|
101
|
+
const multiselectRect = this.getBoundingClientRect();
|
|
102
|
+
const viewportHeight = window.innerHeight;
|
|
103
|
+
const spaceAbove = multiselectRect.top;
|
|
104
|
+
const spaceBelow = viewportHeight - multiselectRect.bottom;
|
|
105
|
+
calculatedPosition =
|
|
106
|
+
spaceBelow < multiselectRect.height && spaceAbove > spaceBelow
|
|
107
|
+
? Position.ABOVE
|
|
108
|
+
: Position.BELOW;
|
|
109
|
+
}
|
|
110
|
+
else {
|
|
111
|
+
const containerRect = container.getBoundingClientRect();
|
|
112
|
+
const thisRect = this.getBoundingClientRect();
|
|
113
|
+
const midPoint = containerRect.top + containerRect.height / 2;
|
|
114
|
+
calculatedPosition = thisRect.top < midPoint ? Position.BELOW : Position.ABOVE;
|
|
115
|
+
}
|
|
86
116
|
}
|
|
87
|
-
|
|
88
|
-
|
|
117
|
+
if (calculatedPosition === Position.ABOVE) {
|
|
118
|
+
this.optionsElement.classList.add('position-above');
|
|
119
|
+
this.optionsElement.classList.remove('position-below');
|
|
120
|
+
}
|
|
121
|
+
else if (calculatedPosition === Position.BELOW) {
|
|
122
|
+
this.optionsElement.classList.add('position-below');
|
|
123
|
+
this.optionsElement.classList.remove('position-above');
|
|
89
124
|
}
|
|
90
125
|
}
|
|
91
126
|
optionGetter(option) {
|
|
@@ -221,6 +256,9 @@ export class Multiselect extends FoundationElement {
|
|
|
221
256
|
__decorate([
|
|
222
257
|
attr
|
|
223
258
|
], Multiselect.prototype, "name", void 0);
|
|
259
|
+
__decorate([
|
|
260
|
+
attr({ mode: 'boolean', attribute: 'auto-position' })
|
|
261
|
+
], Multiselect.prototype, "autoPosition", void 0);
|
|
224
262
|
__decorate([
|
|
225
263
|
attr({ mode: 'boolean' })
|
|
226
264
|
], Multiselect.prototype, "all", void 0);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genesislcap/foundation-ui",
|
|
3
3
|
"description": "Genesis Foundation UI",
|
|
4
|
-
"version": "14.141.
|
|
4
|
+
"version": "14.141.2",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "SEE LICENSE IN license.txt",
|
|
7
7
|
"main": "dist/esm/index.js",
|
|
@@ -74,8 +74,8 @@
|
|
|
74
74
|
"test:debug": "genx test --debug"
|
|
75
75
|
},
|
|
76
76
|
"devDependencies": {
|
|
77
|
-
"@genesislcap/foundation-testing": "14.141.
|
|
78
|
-
"@genesislcap/genx": "14.141.
|
|
77
|
+
"@genesislcap/foundation-testing": "14.141.2",
|
|
78
|
+
"@genesislcap/genx": "14.141.2",
|
|
79
79
|
"copyfiles": "^2.4.1",
|
|
80
80
|
"rimraf": "^3.0.2",
|
|
81
81
|
"rxjs": "^7.5.4"
|
|
@@ -86,12 +86,12 @@
|
|
|
86
86
|
"@fortawesome/free-regular-svg-icons": "^6.2.1",
|
|
87
87
|
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
|
88
88
|
"@genesiscommunitysuccess/analyzer-import-alias-plugin": "^4.0.0",
|
|
89
|
-
"@genesislcap/foundation-comms": "14.141.
|
|
90
|
-
"@genesislcap/foundation-criteria": "14.141.
|
|
91
|
-
"@genesislcap/foundation-errors": "14.141.
|
|
92
|
-
"@genesislcap/foundation-logger": "14.141.
|
|
93
|
-
"@genesislcap/foundation-notifications": "14.141.
|
|
94
|
-
"@genesislcap/foundation-utils": "14.141.
|
|
89
|
+
"@genesislcap/foundation-comms": "14.141.2",
|
|
90
|
+
"@genesislcap/foundation-criteria": "14.141.2",
|
|
91
|
+
"@genesislcap/foundation-errors": "14.141.2",
|
|
92
|
+
"@genesislcap/foundation-logger": "14.141.2",
|
|
93
|
+
"@genesislcap/foundation-notifications": "14.141.2",
|
|
94
|
+
"@genesislcap/foundation-utils": "14.141.2",
|
|
95
95
|
"@microsoft/fast-colors": "^5.3.1",
|
|
96
96
|
"@microsoft/fast-components": "^2.30.6",
|
|
97
97
|
"@microsoft/fast-element": "^1.12.0",
|
|
@@ -113,5 +113,5 @@
|
|
|
113
113
|
"access": "public"
|
|
114
114
|
},
|
|
115
115
|
"customElements": "dist/custom-elements.json",
|
|
116
|
-
"gitHead": "
|
|
116
|
+
"gitHead": "51b9d2cd8291ce37769cbbb5135f19b8a726f642"
|
|
117
117
|
}
|