@limetech/lime-elements 37.81.5 → 38.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/dist/cjs/keycodes-8e70d9e0.js +25 -0
- package/dist/cjs/keycodes-8e70d9e0.js.map +1 -0
- package/dist/cjs/limel-action-bar_2.cjs.entry.js +1 -1
- package/dist/cjs/limel-breadcrumbs_7.cjs.entry.js +16 -21
- package/dist/cjs/limel-breadcrumbs_7.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-chart.cjs.entry.js +33 -2
- package/dist/cjs/limel-chart.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-chip_2.cjs.entry.js +10 -11
- package/dist/cjs/limel-chip_2.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-picker.cjs.entry.js +6 -11
- package/dist/cjs/limel-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-popover_2.cjs.entry.js +1 -1
- package/dist/cjs/limel-select.cjs.entry.js +3 -3
- package/dist/cjs/limel-select.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-snackbar.cjs.entry.js +1 -1
- package/dist/cjs/limel-snackbar.cjs.entry.js.map +1 -1
- package/dist/collection/components/chart/chart.css +16 -36
- package/dist/collection/components/chart/chart.js +55 -1
- package/dist/collection/components/chart/chart.js.map +1 -1
- package/dist/collection/components/chart/chart.types.js.map +1 -1
- package/dist/collection/components/chip/chip.js +2 -3
- package/dist/collection/components/chip/chip.js.map +1 -1
- package/dist/collection/components/chip-set/chip-set-input-helpers.js +9 -9
- package/dist/collection/components/chip-set/chip-set-input-helpers.js.map +1 -1
- package/dist/collection/components/input-field/input-field.js +8 -13
- package/dist/collection/components/input-field/input-field.js.map +1 -1
- package/dist/collection/components/menu/menu.js +7 -7
- package/dist/collection/components/menu/menu.js.map +1 -1
- package/dist/collection/components/menu-surface/menu-surface.js +3 -3
- package/dist/collection/components/menu-surface/menu-surface.js.map +1 -1
- package/dist/collection/components/picker/picker.js +6 -11
- package/dist/collection/components/picker/picker.js.map +1 -1
- package/dist/collection/components/select/select.js +3 -3
- package/dist/collection/components/select/select.js.map +1 -1
- package/dist/collection/components/snackbar/snackbar.css +1 -1
- package/dist/collection/components/snackbar/snackbar.js.map +1 -1
- package/dist/collection/util/keycodes.js +0 -10
- package/dist/collection/util/keycodes.js.map +1 -1
- package/dist/esm/keycodes-e2e44b7e.js +14 -0
- package/dist/esm/keycodes-e2e44b7e.js.map +1 -0
- package/dist/esm/limel-action-bar_2.entry.js +1 -1
- package/dist/esm/limel-breadcrumbs_7.entry.js +16 -21
- package/dist/esm/limel-breadcrumbs_7.entry.js.map +1 -1
- package/dist/esm/limel-chart.entry.js +34 -3
- package/dist/esm/limel-chart.entry.js.map +1 -1
- package/dist/esm/limel-chip_2.entry.js +10 -11
- package/dist/esm/limel-chip_2.entry.js.map +1 -1
- package/dist/esm/limel-picker.entry.js +6 -11
- package/dist/esm/limel-picker.entry.js.map +1 -1
- package/dist/esm/limel-popover_2.entry.js +1 -1
- package/dist/esm/limel-select.entry.js +3 -3
- package/dist/esm/limel-select.entry.js.map +1 -1
- package/dist/esm/limel-snackbar.entry.js +1 -1
- package/dist/esm/limel-snackbar.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-0468e34c.entry.js +2 -0
- package/dist/lime-elements/p-0468e34c.entry.js.map +1 -0
- package/dist/lime-elements/p-0f735cdc.entry.js +266 -0
- package/dist/lime-elements/p-0f735cdc.entry.js.map +1 -0
- package/dist/lime-elements/{p-1d6e22e3.entry.js → p-25fcb5b7.entry.js} +5 -5
- package/dist/lime-elements/p-25fcb5b7.entry.js.map +1 -0
- package/dist/lime-elements/{p-7f0b768e.entry.js → p-54ac08f5.entry.js} +2 -2
- package/dist/lime-elements/p-54b4a06b.entry.js +2 -0
- package/dist/lime-elements/p-54b4a06b.entry.js.map +1 -0
- package/dist/lime-elements/p-aa25f475.js +2 -0
- package/dist/lime-elements/p-aa25f475.js.map +1 -0
- package/dist/lime-elements/p-c5969548.entry.js +2 -0
- package/dist/lime-elements/p-c5969548.entry.js.map +1 -0
- package/dist/lime-elements/p-ddc35d44.entry.js +2 -0
- package/dist/lime-elements/p-ddc35d44.entry.js.map +1 -0
- package/dist/lime-elements/{p-e446b6c9.entry.js → p-ffe954d4.entry.js} +2 -2
- package/dist/types/components/chart/chart.d.ts +9 -0
- package/dist/types/components/chart/chart.types.d.ts +6 -0
- package/dist/types/components/snackbar/snackbar.d.ts +6 -6
- package/dist/types/components.d.ts +12 -0
- package/dist/types/util/keycodes.d.ts +0 -10
- package/package.json +1 -1
- package/dist/cjs/keycodes-3949f425.js +0 -45
- package/dist/cjs/keycodes-3949f425.js.map +0 -1
- package/dist/esm/keycodes-bf11a644.js +0 -24
- package/dist/esm/keycodes-bf11a644.js.map +0 -1
- package/dist/lime-elements/p-0eef63d5.entry.js +0 -2
- package/dist/lime-elements/p-0eef63d5.entry.js.map +0 -1
- package/dist/lime-elements/p-1d6e22e3.entry.js.map +0 -1
- package/dist/lime-elements/p-37dd03bf.entry.js +0 -2
- package/dist/lime-elements/p-37dd03bf.entry.js.map +0 -1
- package/dist/lime-elements/p-6fcb6a4a.entry.js +0 -266
- package/dist/lime-elements/p-6fcb6a4a.entry.js.map +0 -1
- package/dist/lime-elements/p-70adc8a9.entry.js +0 -2
- package/dist/lime-elements/p-70adc8a9.entry.js.map +0 -1
- package/dist/lime-elements/p-e03dfe70.js +0 -2
- package/dist/lime-elements/p-e03dfe70.js.map +0 -1
- package/dist/lime-elements/p-e3f90432.entry.js +0 -2
- package/dist/lime-elements/p-e3f90432.entry.js.map +0 -1
- /package/dist/lime-elements/{p-7f0b768e.entry.js.map → p-54ac08f5.entry.js.map} +0 -0
- /package/dist/lime-elements/{p-e446b6c9.entry.js.map → p-ffe954d4.entry.js.map} +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h, } from '@stencil/core';
|
|
2
2
|
import { createRandomString } from '../../util/random-string';
|
|
3
3
|
import { zipObject, isFunction } from 'lodash-es';
|
|
4
|
-
import { ARROW_DOWN,
|
|
4
|
+
import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, TAB, } from '../../util/keycodes';
|
|
5
5
|
const DEFAULT_ROOT_BREADCRUMBS_ITEM = {
|
|
6
6
|
text: '',
|
|
7
7
|
icon: {
|
|
@@ -119,12 +119,12 @@ export class Menu {
|
|
|
119
119
|
// Will change focus to the first/last item in the dropdown
|
|
120
120
|
// list to enable selection with the keyboard
|
|
121
121
|
this.handleInputKeyDown = (event) => {
|
|
122
|
-
const isForwardTab =
|
|
122
|
+
const isForwardTab = event.key === TAB &&
|
|
123
123
|
!event.altKey &&
|
|
124
124
|
!event.metaKey &&
|
|
125
125
|
!event.shiftKey;
|
|
126
|
-
const isUp = event.key === ARROW_UP
|
|
127
|
-
const isDown = event.key === ARROW_DOWN
|
|
126
|
+
const isUp = event.key === ARROW_UP;
|
|
127
|
+
const isDown = event.key === ARROW_DOWN;
|
|
128
128
|
if (!isForwardTab && !isUp && !isDown) {
|
|
129
129
|
return;
|
|
130
130
|
}
|
|
@@ -150,12 +150,12 @@ export class Menu {
|
|
|
150
150
|
// And can go forward/back with righ/left arrow keys
|
|
151
151
|
this.handleMenuKeyDown = (event) => {
|
|
152
152
|
var _a;
|
|
153
|
-
const isBackwardTab =
|
|
153
|
+
const isBackwardTab = event.key === TAB &&
|
|
154
154
|
!event.altKey &&
|
|
155
155
|
!event.metaKey &&
|
|
156
156
|
event.shiftKey;
|
|
157
|
-
const isLeft = event.key === ARROW_LEFT
|
|
158
|
-
const isRight = event.key === ARROW_RIGHT
|
|
157
|
+
const isLeft = event.key === ARROW_LEFT;
|
|
158
|
+
const isRight = event.key === ARROW_RIGHT;
|
|
159
159
|
if (!isBackwardTab && !isLeft && !isRight) {
|
|
160
160
|
return;
|
|
161
161
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAgBlD,OAAO,EACH,UAAU,EACV,mBAAmB,EACnB,UAAU,EACV,mBAAmB,EACnB,WAAW,EACX,oBAAoB,EACpB,QAAQ,EACR,iBAAiB,EACjB,GAAG,EACH,YAAY,GACf,MAAM,qBAAqB,CAAC;AAM7B,MAAM,6BAA6B,GAAoB;EACnD,IAAI,EAAE,EAAE;EACR,IAAI,EAAE;IACF,IAAI,EAAE,MAAM;GACf;EACD,IAAI,EAAE,WAAW;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AAMH,MAAM,OAAO,IAAI;EAiIb;IA6FQ,iBAAY,GAAG,GAAG,EAAE;MACxB,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACxC,OAAO;OACV;MAED,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;MAE9C,OAAO,CACH,WACI,KAAK,EAAE;UACH,KAAK,EAAE,aAAa,CAAC,sBAAsB,CAAC;UAC5C,OAAO,EAAE,MAAM;UACf,aAAa,EAAE,QAAQ;UACvB,iBAAiB,EAAE,QAAQ;UAC3B,OAAO,EAAE,UAAU;SACtB;QAED,qBAAe,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,KAAK,GAAI,CAC/C,CACT,CAAC;IACN,CAAC,CAAC;IAEM,qBAAgB,GAAG,GAAG,EAAE;MAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;MACpD,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE;QAC1B,OAAO;OACV;MAED,OAAO,CACH,yBACI,KAAK,EAAE;UACH,eAAe,EAAE,oCAAoC;UACrD,aAAa,EAAE,GAAG;SACrB,EACD,QAAQ,EAAE,IAAI,CAAC,uBAAuB,EACtC,KAAK,EAAE,gBAAgB,GACzB,CACL,CAAC;IACN,CAAC,CAAC;IAEM,4BAAuB,GAAG,CAC9B,KAAiD,EACnD,EAAE;MACA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE;QACxB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7B,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhB,OAAO;OACV;MAED,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC7C,CAAC,CAAC;IAEM,sBAAiB,GAAG,GAAG,EAAE;MAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAChB,OAAO;OACV;MAED,OAAO,CACH,yBACI,QAAQ,EAAC,GAAG,EACZ,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAC1B,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,QAAQ,EACpB,KAAK,EAAE;UACH,OAAO,EAAE,SAAS;UAClB,YAAY,EAAE,YAAY;SAC7B,EACD,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,QAAQ,EAAE,IAAI,CAAC,eAAe,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,GACpC,CACL,CAAC;IACN,CAAC,CAAC;IAEM,uBAAkB,GAAG,GAAG,EAAE;;MAC9B,IACI,IAAI,CAAC,OAAO;QACZ,IAAI,CAAC,eAAe;QACpB,CAAC,IAAI,CAAC,kBAAkB;QACxB,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC;SAClC,MAAA,IAAI,CAAC,aAAa,0CAAE,MAAM,CAAA,EAC5B;QACE,OAAO,IAAI,CAAC;OACf;MAED,OAAO,CACH,SACI,KAAK,EAAE;UACH,OAAO,EAAE,QAAQ;UACjB,YAAY,EAAE,QAAQ;SACzB,IAEA,IAAI,CAAC,kBAAkB,CACxB,CACP,CAAC;IACN,CAAC,CAAC;IAEM,mBAAc,GAAG,GAAG,EAAE;MAC1B,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;MAE9B,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,OAAO,EAAE;QACtC,KAAK,GAAG,EAAE,CAAC;OACd;MAED,OAAO,CACH,uBACI,KAAK,EAAE;UACH,YAAY,EAAE,MAAM;UACpB,WAAW,EAAE,GAAG;SACnB,EACD,KAAK,EAAE;UACH,uCAAuC,EAAE,IAAI,CAAC,UAAU;SAC3D,EACD,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,IAAI,CAAC,cAAc,EACxB,SAAS,EAAE,IAAI,CAAC,iBAAiB,GACnC,CACL,CAAC;IACN,CAAC,CAAC;IAEM,oBAAe,GAAG,KAAK,EAC3B,KAAyC,EAC3C,EAAE;MACA,KAAK,CAAC,eAAe,EAAE,CAAC;MAExB,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;MAC3B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;MACzB,IAAI,KAAK,KAAK,EAAE,EAAE;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAE7B,OAAO;OACV;MAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;MAE5B,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;MAE1C,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;QAC5B,OAAO;OACV;MAED,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;MAC5B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IACjC,CAAC,CAAC;IAEF,yCAAyC;IACzC,2DAA2D;IAC3D,6CAA6C;IACrC,uBAAkB,GAAG,CAAC,KAAoB,EAAE,EAAE;MAClD,MAAM,YAAY,GACd,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,OAAO,KAAK,YAAY,CAAC;QACrD,CAAC,KAAK,CAAC,MAAM;QACb,CAAC,KAAK,CAAC,OAAO;QACd,CAAC,KAAK,CAAC,QAAQ,CAAC;MACpB,MAAM,IAAI,GACN,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,KAAK,iBAAiB,CAAC;MAClE,MAAM,MAAM,GACR,KAAK,CAAC,GAAG,KAAK,UAAU,IAAI,KAAK,CAAC,OAAO,KAAK,mBAAmB,CAAC;MAEtE,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE;QACnC,OAAO;OACV;MAED,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;QACZ,OAAO;OACV;MAED,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MAEvB,IAAI,YAAY,IAAI,MAAM,EAAE;QACxB,MAAM,SAAS,GACX,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CACjC,2BAA2B,CAC9B,CAAC;QACN,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;QACjC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,EAAE,CAAC;QAErB,OAAO;OACV;MAED,IAAI,IAAI,EAAE;QACN,MAAM,SAAS,GACX,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CACjC,2BAA2B,CAC9B,CAAC;QACN,MAAM,WAAW,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACpD,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,EAAE,CAAC;OACxB;IACL,CAAC,CAAC;IAEF,gCAAgC;IAChC,2DAA2D;IAC3D,oDAAoD;IAC5C,sBAAiB,GAAG,CAAC,KAAoB,EAAE,EAAE;;MACjD,MAAM,aAAa,GACf,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,OAAO,KAAK,YAAY,CAAC;QACrD,CAAC,KAAK,CAAC,MAAM;QACb,CAAC,KAAK,CAAC,OAAO;QACd,KAAK,CAAC,QAAQ,CAAC;MAEnB,MAAM,MAAM,GACR,KAAK,CAAC,GAAG,KAAK,UAAU,IAAI,KAAK,CAAC,OAAO,KAAK,mBAAmB,CAAC;MAEtE,MAAM,OAAO,GACT,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,OAAO,KAAK,oBAAoB,CAAC;MAExE,IAAI,CAAC,aAAa,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE;QACvC,OAAO;OACV;MAED,IAAI,aAAa,EAAE;QACf,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,EAAE,CAAC;OAC7B;WAAM,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QACzB,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,OAAO,EAAE;UACT,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;SAC/B;aAAM,IAAI,MAAM,EAAE;UACf,IAAI,CAAC,MAAM,EAAE,CAAC;SACjB;OACJ;IACL,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACvB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;MACtB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;MAC1B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IACjC,CAAC,CAAC;IAEM,mBAAc,GAAG,GAAa,EAAE;;MACpC,MAAM,UAAU,GAAG,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,0CAAE,aAAa,CACnD,iCAAiC,CACpC,CAAC;MACF,MAAM,SAAS,GAAG,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,YAAY,CAAC,YAAY,CAAC,CAAC;MACrE,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,KAAI,GAAG,EAAE,EAAE,CAAC,CAAC;MAExD,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,CAAa,CAAC;IACpD,CAAC,CAAC;IAEM,cAAS,GAAG,CAAC,WAAqB,EAAE,EAAE;MAC1C,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEM,WAAM,GAAG,GAAG,EAAE;MAClB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACtB,kCAAkC;QAClC,OAAO;OACV;MAED,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC;MAC9C,IAAI,CAAC,MAAM,EAAE;QACT,qDAAqD;QACrD,8BAA8B;QAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7B,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhB,OAAO;OACV;MAED,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEM,yBAAoB,GAAG,CAAC,OAAoB,EAAE,EAAE;MACpD,MAAM,UAAU,GAAG;QACf,eAAe,EAAE,IAAI;QACrB,eAAe,EAAE,IAAI,CAAC,IAAI;QAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;QAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,QAAQ;OACjB,CAAC;MAEF,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;QACnD,IAAI,CAAC,KAAK,EAAE;UACR,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;SAChC;aAAM;UACH,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;SAC5C;OACJ;IACL,CAAC,CAAC;IAEM,YAAO,GAAG,GAAG,EAAE;MACnB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;MACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC/B,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAiB,EAAE,EAAE;MAC3C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO;OACV;MAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3B,CAAC,CAAC;IAEM,iBAAY,GAAG,KAAK,EACxB,QAAkB,EAClB,wBAAiC,IAAI,EACvC,EAAE;MACA,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QAC7D,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;QAC/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAEjC,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhB,OAAO;OACV;WAAM,IAAI,UAAU,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAC,EAAE;QACpC,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAmB,CAAC;QAChD,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,MAAM,QAAQ,GAAG,MAAM,UAAU,CAAC,QAAQ,CAAC,CAAC;QAE5C,IAAI,IAAI,CAAC,gBAAgB,KAAK,QAAQ,EAAE;UACpC,OAAO;SACV;QAED,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAE7B,IAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,EAAE;UAClB,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;UAC/B,IAAI,CAAC,WAAW,EAAE,CAAC;UACnB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;UAEjC,IAAI,CAAC,QAAQ,EAAE,CAAC;UAEhB,OAAO;SACV;OACJ;MAED,IAAI,CAAC,qBAAqB,EAAE;QACxB,OAAO;OACV;MAED,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;MACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;MAE7B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;MAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;MAC3B,IAAI,CAAC,QAAQ,EAAE,CAAC;IACpB,CAAC,CAAC;IAEM,aAAQ,GAAG,CAAC,KAA4B,EAAE,EAAE;MAChD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACpC,CAAC,CAAC;IAqBM,mBAAc,GAAG,CAAC,OAAiC,EAAE,EAAE;MAC3D,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;IACxB,CAAC,CAAC;IAEM,aAAQ,GAAG,GAAG,EAAE;MACpB,UAAU,CAAC,GAAG,EAAE;QACZ,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,EAAE;UACnC,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,GAAG,EAAE;YAC3C,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACrC,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE;cACpD,OAAO;aACV;YAED,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;UAC7B,CAAC,CAAC,CAAC;UACH,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACtC;aAAM,IAAI,IAAI,CAAC,IAAI,EAAE;UAClB,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,GAAG,EAAE;YAC3C,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC9B,IAAI,CAAC,aAAa,EAAE,CAAC;UACzB,CAAC,CAAC,CAAC;UACH,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC/B;MACL,CAAC,EAAE,CAAC,CAAC,CAAC;IACV,CAAC,CAAC;IAEM,qBAAgB,GAAG,CAAC,OAAmC,EAAE,EAAE;MAC/D,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;IAC/B,CAAC,CAAC;IAEM,kBAAa,GAAG,GAAG,EAAE;;MACzB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;QACZ,OAAO;OACV;MAED,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAA4B,CAAC;MACxE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,EAAE,CAAC;MAEtB,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;MAC5D,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAC1B,SAAS,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAC5C,CAAC,CACJ,CAAC;MACF,MAAM,YAAY,GAAkB,KAAK,CAAC,IAAI,CAC1C,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAC7D,CAAC;MACF,MAAA,YAAY,CAAC,aAAa,CAAC,0CAAE,KAAK,EAAE,CAAC;IACzC,CAAC,CAAC;IAMM,4BAAuB,GAAG,GAAG,EAAE;MACnC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,EAAE;QAC5C,OAAO,sBAAe,CAAC;OAC1B;IACL,CAAC,CAAC;IAEM,yBAAoB,GAAG,CAAC,IAA8B,EAAE,EAAE,CAC9D,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC;IAE9C,kBAAa,GAAG,CAAC,GAAqB,EAAE,EAAE;MAC9C,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;IAC9B,CAAC,CAAC;iBAzpB8C,EAAE;oBAMhC,KAAK;yBAMe,cAAc;wBAMhB,oBAAoB;gBAM1C,KAAK;sBAMC,KAAK;sBAML,KAAK;mBAaR,KAAK;;oBAoBa,6BAA6B;;;;;;IAwD5D,IAAI,CAAC,QAAQ,GAAG,kBAAkB,EAAE,CAAC;GACxC;EAEM,kBAAkB;IACrB,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/D,WAAW,CAAC,gBAAgB,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;EACtE,CAAC;EAEM,MAAM;IACT,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAE9C,MAAM,cAAc,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAC/D,oBAAoB,CACvB,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,CAC7C,aAAa,CAAC,sBAAsB,CAAC,CACxC,CAAC;IAEF,OAAO,CACH,WAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc;MAC9D,YAAM,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,EAAC,SAAS,GAAG;MAC/C,IAAI,CAAC,uBAAuB,EAAE;MAC/B,oBACI,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAC,UAAU,EACnB,cAAc,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE;QAE7C,0BACI,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,OAAO,EACvB,KAAK,kCACE,aAAa,KAChB,sBAAsB,EAAE,gBAAgB,EACxC,8BAA8B,EAAE,MAAM,EACtC,qCAAqC,EAAE,QAAQ,KAEnD,KAAK,EAAE;YACH,iBAAiB,EAAE,IAAI,CAAC,UAAU;WACrC;UAEA,IAAI,CAAC,iBAAiB,EAAE;UACxB,IAAI,CAAC,gBAAgB,EAAE;UACvB,IAAI,CAAC,YAAY,EAAE;UACnB,IAAI,CAAC,kBAAkB,EAAE;UACzB,IAAI,CAAC,cAAc,EAAE,CACL,CACV,CACb,CACT,CAAC;EACN,CAAC;EAGS,YAAY;IAClB,IAAI,CAAC,WAAW,EAAE,CAAC;IACnB,IAAI,CAAC,QAAQ,EAAE,CAAC;EACpB,CAAC;EAGS,WAAW,CAAC,QAAiB;IACnC,MAAM,MAAM,GAAG,QAAQ,CAAC;IACxB,IAAI,MAAM,EAAE;MACR,IAAI,CAAC,QAAQ,EAAE,CAAC;KACnB;SAAM;MACH,IAAI,CAAC,WAAW,EAAE,CAAC;KACtB;EACL,CAAC;EAEO,mBAAmB;IACvB,MAAM,eAAe,GAAoB,EAAE,CAAC;IAC5C,IAAI,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;IACtC,OAAO,WAAW,EAAE;MAChB,eAAe,CAAC,IAAI,CAAC;QACjB,IAAI,EAAE,WAAW,CAAC,IAAI;QACtB,IAAI,EAAE,WAAW,CAAC,IAAI;QACtB,QAAQ,EAAE,WAAW;OACxB,CAAC,CAAC;MACH,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC;KACxC;IAED,IACI,eAAe,CAAC,MAAM;MACtB,IAAI,CAAC,QAAQ,KAAK,6BAA6B,EACjD;MACE,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACvC;IAED,OAAO,eAAe,CAAC,OAAO,EAAE,CAAC;EACrC,CAAC;EA+WO,gBAAgB;IACpB,MAAM,aAAa,GAAG;MAClB,sBAAsB;MACtB,4BAA4B;MAC5B,4BAA4B;MAC5B,iBAAiB;MACjB,uCAAuC;MACvC,iCAAiC;KAC3B,CAAC;IACX,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;MAC1C,OAAO,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;IAIH,OAAO,SAAS,CAAC,aAAa,EAAE,MAAM,CAA6B,CAAC;EACxE,CAAC;EAmDO,UAAU,CAAC,IAA8B;IAC7C,OAAO,CAAC,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC;EAClC,CAAC;EAeO,mBAAmB,CAAC,WAAmB;;IAC3C,IAAI,WAAW,EAAE;MACb,OAAO,WAAW,CAAC;KACtB;IAED,IAAI,IAAI,CAAC,YAAY,KAAK,sBAAsB,EAAE;MAC9C,MAAM,gBAAgB,GAAG,MAAA,IAAI,CAAC,cAAc,0CAAE,gBAAgB,EAAE,CAAC;MAEjE,IACI,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,MAAM,CAAA;QACzB,CAAC,CAAA,MAAA,gBAAgB,CAAC,CAAC,CAAC,0CAAE,WAAW,CAAA,EACnC;QACE,OAAO,EAAE,CAAC;OACb;MAED,OAAO,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC;KACjD;SAAM,IAAI,IAAI,CAAC,YAAY,KAAK,mBAAmB,EAAE;MAClD,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,WAAW,CAAA,EAAE;QACzB,OAAO,EAAE,CAAC;OACb;MAED,OAAO,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,WAAW,IAAI,CAAC;KACxC;IAED,OAAO,EAAE,CAAC;EACd,CAAC;EAED,IAAY,YAAY;;IACpB,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE;MACvD,OAAO,IAAI,CAAC,aAAa,CAAC;KAC7B;SAAM,IAAI,KAAK,CAAC,OAAO,CAAC,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK,CAAC,EAAE;MAClD,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iCACxC,IAAI,KACP,UAAU,EAAE,IAAI,CAAC,cAAc,IACjC,CAAC,CAAC;KACP;IAED,OAAO,IAAI,CAAC,KAAK,CAAC;EACtB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n h,\n Prop,\n Element,\n Watch,\n State,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject, isFunction } from 'lodash-es';\nimport {\n LimelBreadcrumbsCustomEvent,\n LimelInputFieldCustomEvent,\n} from '../../components';\n\nimport { BreadcrumbsItem } from '../breadcrumbs/breadcrumbs.types';\nimport { ListSeparator } from '../list/list-item.types';\nimport {\n OpenDirection,\n MenuItem,\n MenuLoader,\n SurfaceWidth,\n MenuSearcher,\n} from './menu.types';\n\nimport {\n ARROW_DOWN,\n ARROW_DOWN_KEY_CODE,\n ARROW_LEFT,\n ARROW_LEFT_KEY_CODE,\n ARROW_RIGHT,\n ARROW_RIGHT_KEY_CODE,\n ARROW_UP,\n ARROW_UP_KEY_CODE,\n TAB,\n TAB_KEY_CODE,\n} from '../../util/keycodes';\n\ninterface MenuCrumbItem extends BreadcrumbsItem {\n menuItem?: MenuItem;\n}\n\nconst DEFAULT_ROOT_BREADCRUMBS_ITEM: BreadcrumbsItem = {\n text: '',\n icon: {\n name: 'home',\n },\n type: 'icon-only',\n};\n\n/**\n * @slot trigger - Element to use as a trigger for the menu.\n * @exampleComponent limel-example-menu-basic\n * @exampleComponent limel-example-menu-disabled\n * @exampleComponent limel-example-menu-open-direction\n * @exampleComponent limel-example-menu-surface-width\n * @exampleComponent limel-example-menu-separators\n * @exampleComponent limel-example-menu-icons\n * @exampleComponent limel-example-menu-badge-icons\n * @exampleComponent limel-example-menu-grid\n * @exampleComponent limel-example-menu-hotkeys\n * @exampleComponent limel-example-menu-secondary-text\n * @exampleComponent limel-example-menu-notification\n * @exampleComponent limel-example-menu-sub-menus\n * @exampleComponent limel-example-menu-sub-menu-lazy-loading\n * @exampleComponent limel-example-menu-sub-menu-lazy-loading-infinite\n * @exampleComponent limel-example-menu-searchable\n * @exampleComponent limel-example-menu-composite\n */\n@Component({\n tag: 'limel-menu',\n shadow: true,\n styleUrl: 'menu.scss',\n})\nexport class Menu {\n /**\n * A list of items and separators to show in the menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator> = [];\n\n /**\n * Sets the disabled state of the menu.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Decides the menu's location in relation to its trigger\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-start';\n\n /**\n * Decides the width of menu's dropdown\n */\n @Prop({ reflect: true })\n public surfaceWidth: SurfaceWidth = 'inherit-from-items';\n\n /**\n * Sets the open state of the menu.\n */\n @Prop({ mutable: true, reflect: true })\n public open = false;\n\n /**\n * Defines whether the menu should show badges.\n */\n @Prop({ reflect: true })\n public badgeIcons = false;\n\n /**\n * Renders list items in a grid layout, rather than a vertical list\n */\n @Prop({ reflect: true })\n public gridLayout = false;\n\n /**\n * :::warning Internal Use Only\n * This property is for internal use only. We need it for now, but want to\n * find a better implementation of the functionality it currently enables.\n * If and when we do so, this property will be removed without prior\n * notice. If you use it, your code _will_ break in the future.\n * :::\n *\n * @internal\n */\n @Prop({ reflect: true })\n public loading = false;\n\n /**\n * :::warning Internal Use Only\n * This property is for internal use only. We need it for now, but want to\n * find a better implementation of the functionality it currently enables.\n * If and when we do so, this property will be removed without prior\n * notice. If you use it, your code _will_ break in the future.\n * :::\n *\n * @internal\n */\n @Prop({ mutable: true })\n public currentSubMenu: MenuItem;\n\n /**\n * A root breadcrumb item to show above the menu items.\n * Clicking it navigates back from a sub-menu to the root menu.\n */\n @Prop()\n public rootItem: BreadcrumbsItem = DEFAULT_ROOT_BREADCRUMBS_ITEM;\n\n /**\n * Is emitted when the menu is cancelled.\n */\n @Event()\n public cancel: EventEmitter<void>;\n\n /**\n * Is emitted when a menu item is selected.\n */\n @Event()\n public select: EventEmitter<MenuItem>;\n\n /**\n * A search function that takes a search-string as an argument,\n * and returns a promise that will eventually be resolved with\n * an array of `MenuItem`:s.\n *\n * See the docs for the type `MenuSearcher` for type information on\n * the searcher function itself.\n */\n @Prop()\n public searcher: MenuSearcher;\n\n /**\n * Message to display when search returns 0 results.\n */\n @Prop()\n public emptyResultMessage?: string;\n\n /**\n * Is emitted when a menu item with a sub-menu is selected.\n */\n @Event()\n public navigateMenu: EventEmitter<MenuItem | null>;\n\n @Element()\n private host: HTMLLimelMenuElement;\n\n @State()\n private loadingSubItems: boolean;\n\n @State()\n private searchValue: string;\n\n @State()\n private searchResults: Array<MenuItem | ListSeparator> | null;\n\n private list: HTMLLimelMenuListElement;\n private searchInput: HTMLLimelInputFieldElement;\n private portalId: string;\n private triggerElement: HTMLSlotElement;\n private selectedMenuItem?: MenuItem;\n\n constructor() {\n this.portalId = createRandomString();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n const menuSurfaceWidth = this.getMenuSurfaceWidth(\n cssProperties['--menu-surface-width'],\n );\n\n return (\n <div class=\"mdc-menu-surface--anchor\" onClick={this.onTriggerClick}>\n <slot ref={this.setTriggerRef} name=\"trigger\" />\n {this.renderNotificationBadge()}\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n openDirection={this.openDirection}\n position=\"absolute\"\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-menu-surface\n open={this.open}\n onDismiss={this.onClose}\n style={{\n ...cssProperties,\n '--mdc-menu-min-width': menuSurfaceWidth,\n '--limel-menu-surface-display': 'flex',\n '--limel-menu-surface-flex-direction': 'column',\n }}\n class={{\n 'has-grid-layout': this.gridLayout,\n }}\n >\n {this.renderSearchField()}\n {this.renderBreadcrumb()}\n {this.renderLoader()}\n {this.renderEmptyMessage()}\n {this.renderMenuList()}\n </limel-menu-surface>\n </limel-portal>\n </div>\n );\n }\n\n @Watch('items')\n protected itemsWatcher() {\n this.clearSearch();\n this.setFocus();\n }\n\n @Watch('open')\n protected openWatcher(newValue: boolean) {\n const opened = newValue;\n if (opened) {\n this.setFocus();\n } else {\n this.clearSearch();\n }\n }\n\n private getBreadcrumbsItems() {\n const breadCrumbItems: MenuCrumbItem[] = [];\n let currentItem = this.currentSubMenu;\n while (currentItem) {\n breadCrumbItems.push({\n text: currentItem.text,\n icon: currentItem.icon,\n menuItem: currentItem,\n });\n currentItem = currentItem.parentItem;\n }\n\n if (\n breadCrumbItems.length ||\n this.rootItem !== DEFAULT_ROOT_BREADCRUMBS_ITEM\n ) {\n breadCrumbItems.push(this.rootItem);\n }\n\n return breadCrumbItems.reverse();\n }\n\n private renderLoader = () => {\n if (!this.loadingSubItems && !this.loading) {\n return;\n }\n\n const cssProperties = this.getCssProperties();\n\n return (\n <div\n style={{\n width: cssProperties['--menu-surface-width'],\n display: 'flex',\n 'align-items': 'center',\n 'justify-content': 'center',\n padding: '0.5rem 0',\n }}\n >\n <limel-spinner size=\"mini\" limeBranded={false} />\n </div>\n );\n };\n\n private renderBreadcrumb = () => {\n const breadcrumbsItems = this.getBreadcrumbsItems();\n if (!breadcrumbsItems.length) {\n return;\n }\n\n return (\n <limel-breadcrumbs\n style={{\n 'border-bottom': 'solid 1px rgb(var(--contrast-500))',\n 'flex-shrink': '0',\n }}\n onSelect={this.handleBreadcrumbsSelect}\n items={breadcrumbsItems}\n />\n );\n };\n\n private handleBreadcrumbsSelect = (\n event: LimelBreadcrumbsCustomEvent<MenuCrumbItem>,\n ) => {\n if (!event.detail.menuItem) {\n this.currentSubMenu = null;\n this.clearSearch();\n this.navigateMenu.emit(null);\n\n this.setFocus();\n\n return;\n }\n\n this.handleSelect(event.detail.menuItem);\n };\n\n private renderSearchField = () => {\n if (!this.searcher) {\n return;\n }\n\n return (\n <limel-input-field\n tabindex=\"0\"\n ref={this.setSearchElement}\n type=\"search\"\n leadingIcon=\"search\"\n style={{\n padding: '0.25rem',\n 'box-sizing': 'border-box',\n }}\n value={this.searchValue}\n onChange={this.handleTextInput}\n onKeyDown={this.handleInputKeyDown}\n />\n );\n };\n\n private renderEmptyMessage = () => {\n if (\n this.loading ||\n this.loadingSubItems ||\n !this.emptyResultMessage ||\n !Array.isArray(this.searchResults) ||\n this.searchResults?.length\n ) {\n return null;\n }\n\n return (\n <p\n style={{\n padding: '0 1rem',\n 'text-align': 'center',\n }}\n >\n {this.emptyResultMessage}\n </p>\n );\n };\n\n private renderMenuList = () => {\n let items = this.visibleItems;\n\n if (this.loadingSubItems || this.loading) {\n items = [];\n }\n\n return (\n <limel-menu-list\n style={{\n 'overflow-y': 'auto',\n 'flex-grow': '1',\n }}\n class={{\n 'has-grid-layout has-interactive-items': this.gridLayout,\n }}\n items={items}\n badgeIcons={this.badgeIcons}\n onSelect={this.onSelect}\n ref={this.setListElement}\n onKeyDown={this.handleMenuKeyDown}\n />\n );\n };\n\n private handleTextInput = async (\n event: LimelInputFieldCustomEvent<string>,\n ) => {\n event.stopPropagation();\n\n const query = event.detail;\n this.searchValue = query;\n if (query === '') {\n this.searchResults = null;\n this.loadingSubItems = false;\n\n return;\n }\n\n this.loadingSubItems = true;\n\n const result = await this.searcher(query);\n\n if (this.searchValue !== query) {\n return;\n }\n\n this.searchResults = result;\n this.loadingSubItems = false;\n };\n\n // Key handler for the input search field\n // Will change focus to the first/last item in the dropdown\n // list to enable selection with the keyboard\n private handleInputKeyDown = (event: KeyboardEvent) => {\n const isForwardTab =\n (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n !event.altKey &&\n !event.metaKey &&\n !event.shiftKey;\n const isUp =\n event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;\n const isDown =\n event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;\n\n if (!isForwardTab && !isUp && !isDown) {\n return;\n }\n\n if (!this.list) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n\n if (isForwardTab || isDown) {\n const listItems =\n this.list.shadowRoot.querySelectorAll<HTMLElement>(\n '.mdc-deprecated-list-item',\n );\n const listElement = listItems[0];\n listElement?.focus();\n\n return;\n }\n\n if (isUp) {\n const listItems =\n this.list.shadowRoot.querySelectorAll<HTMLElement>(\n '.mdc-deprecated-list-item',\n );\n const listElement = listItems[listItems.length - 1];\n listElement?.focus();\n }\n };\n\n // Key handler for the menu list\n // Will change focus to the search field if using shift+tab\n // And can go forward/back with righ/left arrow keys\n private handleMenuKeyDown = (event: KeyboardEvent) => {\n const isBackwardTab =\n (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n !event.altKey &&\n !event.metaKey &&\n event.shiftKey;\n\n const isLeft =\n event.key === ARROW_LEFT || event.keyCode === ARROW_LEFT_KEY_CODE;\n\n const isRight =\n event.key === ARROW_RIGHT || event.keyCode === ARROW_RIGHT_KEY_CODE;\n\n if (!isBackwardTab && !isLeft && !isRight) {\n return;\n }\n\n if (isBackwardTab) {\n event.stopPropagation();\n event.preventDefault();\n this.searchInput?.focus();\n } else if (!this.gridLayout) {\n const currentItem = this.getCurrentItem();\n\n event.stopPropagation();\n event.preventDefault();\n if (isRight) {\n this.goForward(currentItem);\n } else if (isLeft) {\n this.goBack();\n }\n }\n };\n\n private clearSearch = () => {\n this.searchValue = '';\n this.searchResults = null;\n this.loadingSubItems = false;\n };\n\n private getCurrentItem = (): MenuItem => {\n const activeItem = this.list?.shadowRoot?.querySelector(\n '[role=\"menuitem\"][tabindex=\"0\"]',\n );\n const attrIndex = activeItem?.attributes?.getNamedItem('data-index');\n const dataIndex = parseInt(attrIndex?.value || '0', 10);\n\n return this.visibleItems[dataIndex] as MenuItem;\n };\n\n private goForward = (currentItem: MenuItem) => {\n this.handleSelect(currentItem, false);\n };\n\n private goBack = () => {\n if (!this.currentSubMenu) {\n // Already in the root of the menu\n return;\n }\n\n const parent = this.currentSubMenu.parentItem;\n if (!parent) {\n // If only one step down, go to the root of the menu.\n // No need to load a sub-menu.\n this.currentSubMenu = null;\n this.clearSearch();\n this.navigateMenu.emit(null);\n\n this.setFocus();\n\n return;\n }\n\n this.handleSelect(parent);\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n 'aria-controls': this.portalId,\n disabled: this.disabled,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n\n private onClose = () => {\n this.cancel.emit();\n this.open = false;\n this.currentSubMenu = null;\n };\n\n private onTriggerClick = (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) {\n return;\n }\n\n this.open = !this.open;\n };\n\n private handleSelect = async (\n menuItem: MenuItem,\n selectOnEmptyChildren: boolean = true,\n ) => {\n if (Array.isArray(menuItem?.items) && menuItem.items.length > 0) {\n this.selectedMenuItem = menuItem;\n this.clearSearch();\n this.currentSubMenu = menuItem;\n this.navigateMenu.emit(menuItem);\n\n this.setFocus();\n\n return;\n } else if (isFunction(menuItem?.items)) {\n const menuLoader = menuItem.items as MenuLoader;\n this.selectedMenuItem = menuItem;\n this.loadingSubItems = true;\n const subItems = await menuLoader(menuItem);\n\n if (this.selectedMenuItem !== menuItem) {\n return;\n }\n\n menuItem.items = subItems;\n this.loadingSubItems = false;\n\n if (subItems?.length) {\n this.currentSubMenu = menuItem;\n this.clearSearch();\n this.navigateMenu.emit(menuItem);\n\n this.setFocus();\n\n return;\n }\n }\n\n if (!selectOnEmptyChildren) {\n return;\n }\n\n this.selectedMenuItem = menuItem;\n this.loadingSubItems = false;\n\n this.select.emit(menuItem);\n this.open = false;\n this.currentSubMenu = null;\n this.setFocus();\n };\n\n private onSelect = (event: CustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.handleSelect(event.detail);\n };\n\n private getCssProperties() {\n const propertyNames = [\n '--menu-surface-width',\n '--list-grid-item-max-width',\n '--list-grid-item-min-width',\n '--list-grid-gap',\n '--notification-badge-background-color',\n '--notification-badge-text-color',\n ] as const;\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n type PropName = (typeof propertyNames)[number];\n\n return zipObject(propertyNames, values) as Record<PropName, string>;\n }\n\n private setListElement = (element: HTMLLimelMenuListElement) => {\n this.list = element;\n };\n\n private setFocus = () => {\n setTimeout(() => {\n if (this.searchInput && this.searcher) {\n const observer = new IntersectionObserver(() => {\n observer.unobserve(this.searchInput);\n if (this.searchInput === window.document.activeElement) {\n return;\n }\n\n this.searchInput.focus();\n });\n observer.observe(this.searchInput);\n } else if (this.list) {\n const observer = new IntersectionObserver(() => {\n observer.unobserve(this.list);\n this.focusMenuItem();\n });\n observer.observe(this.list);\n }\n }, 0);\n };\n\n private setSearchElement = (element: HTMLLimelInputFieldElement) => {\n this.searchInput = element;\n };\n\n private focusMenuItem = () => {\n if (!this.list) {\n return;\n }\n\n const activeElement = this.list.shadowRoot.activeElement as HTMLElement;\n activeElement?.blur();\n\n const menuItems = this.visibleItems.filter(this.isMenuItem);\n const selectedIndex = Math.max(\n menuItems.findIndex((item) => item.selected),\n 0,\n );\n const menuElements: HTMLElement[] = Array.from(\n this.list.shadowRoot.querySelectorAll('[role=\"menuitem\"]'),\n );\n menuElements[selectedIndex]?.focus();\n };\n\n private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n\n private renderNotificationBadge = () => {\n if (this.items.some(this.hasNotificationBadge)) {\n return <limel-badge />;\n }\n };\n\n private hasNotificationBadge = (item: MenuItem | ListSeparator) =>\n this.isMenuItem(item) && item.badge !== undefined;\n\n private setTriggerRef = (elm?: HTMLSlotElement) => {\n this.triggerElement = elm;\n };\n\n private getMenuSurfaceWidth(customWidth: string): string {\n if (customWidth) {\n return customWidth;\n }\n\n if (this.surfaceWidth === 'inherit-from-trigger') {\n const assignedTriggers = this.triggerElement?.assignedElements();\n\n if (\n !assignedTriggers?.length ||\n !assignedTriggers[0]?.clientWidth\n ) {\n return '';\n }\n\n return `${assignedTriggers[0].clientWidth}px`;\n } else if (this.surfaceWidth === 'inherit-from-menu') {\n if (!this.host?.clientWidth) {\n return '';\n }\n\n return `${this.host?.clientWidth}px`;\n }\n\n return '';\n }\n\n private get visibleItems(): Array<MenuItem | ListSeparator> {\n if (Array.isArray(this.searchResults) && this.searchValue) {\n return this.searchResults;\n } else if (Array.isArray(this.currentSubMenu?.items)) {\n return this.currentSubMenu.items.map((item) => ({\n ...item,\n parentItem: this.currentSubMenu,\n }));\n }\n\n return this.items;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n h,\n Prop,\n Element,\n Watch,\n State,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject, isFunction } from 'lodash-es';\nimport {\n LimelBreadcrumbsCustomEvent,\n LimelInputFieldCustomEvent,\n} from '../../components';\n\nimport { BreadcrumbsItem } from '../breadcrumbs/breadcrumbs.types';\nimport { ListSeparator } from '../list/list-item.types';\nimport {\n OpenDirection,\n MenuItem,\n MenuLoader,\n SurfaceWidth,\n MenuSearcher,\n} from './menu.types';\n\nimport {\n ARROW_DOWN,\n ARROW_LEFT,\n ARROW_RIGHT,\n ARROW_UP,\n TAB,\n} from '../../util/keycodes';\n\ninterface MenuCrumbItem extends BreadcrumbsItem {\n menuItem?: MenuItem;\n}\n\nconst DEFAULT_ROOT_BREADCRUMBS_ITEM: BreadcrumbsItem = {\n text: '',\n icon: {\n name: 'home',\n },\n type: 'icon-only',\n};\n\n/**\n * @slot trigger - Element to use as a trigger for the menu.\n * @exampleComponent limel-example-menu-basic\n * @exampleComponent limel-example-menu-disabled\n * @exampleComponent limel-example-menu-open-direction\n * @exampleComponent limel-example-menu-surface-width\n * @exampleComponent limel-example-menu-separators\n * @exampleComponent limel-example-menu-icons\n * @exampleComponent limel-example-menu-badge-icons\n * @exampleComponent limel-example-menu-grid\n * @exampleComponent limel-example-menu-hotkeys\n * @exampleComponent limel-example-menu-secondary-text\n * @exampleComponent limel-example-menu-notification\n * @exampleComponent limel-example-menu-sub-menus\n * @exampleComponent limel-example-menu-sub-menu-lazy-loading\n * @exampleComponent limel-example-menu-sub-menu-lazy-loading-infinite\n * @exampleComponent limel-example-menu-searchable\n * @exampleComponent limel-example-menu-composite\n */\n@Component({\n tag: 'limel-menu',\n shadow: true,\n styleUrl: 'menu.scss',\n})\nexport class Menu {\n /**\n * A list of items and separators to show in the menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator> = [];\n\n /**\n * Sets the disabled state of the menu.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Decides the menu's location in relation to its trigger\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-start';\n\n /**\n * Decides the width of menu's dropdown\n */\n @Prop({ reflect: true })\n public surfaceWidth: SurfaceWidth = 'inherit-from-items';\n\n /**\n * Sets the open state of the menu.\n */\n @Prop({ mutable: true, reflect: true })\n public open = false;\n\n /**\n * Defines whether the menu should show badges.\n */\n @Prop({ reflect: true })\n public badgeIcons = false;\n\n /**\n * Renders list items in a grid layout, rather than a vertical list\n */\n @Prop({ reflect: true })\n public gridLayout = false;\n\n /**\n * :::warning Internal Use Only\n * This property is for internal use only. We need it for now, but want to\n * find a better implementation of the functionality it currently enables.\n * If and when we do so, this property will be removed without prior\n * notice. If you use it, your code _will_ break in the future.\n * :::\n *\n * @internal\n */\n @Prop({ reflect: true })\n public loading = false;\n\n /**\n * :::warning Internal Use Only\n * This property is for internal use only. We need it for now, but want to\n * find a better implementation of the functionality it currently enables.\n * If and when we do so, this property will be removed without prior\n * notice. If you use it, your code _will_ break in the future.\n * :::\n *\n * @internal\n */\n @Prop({ mutable: true })\n public currentSubMenu: MenuItem;\n\n /**\n * A root breadcrumb item to show above the menu items.\n * Clicking it navigates back from a sub-menu to the root menu.\n */\n @Prop()\n public rootItem: BreadcrumbsItem = DEFAULT_ROOT_BREADCRUMBS_ITEM;\n\n /**\n * Is emitted when the menu is cancelled.\n */\n @Event()\n public cancel: EventEmitter<void>;\n\n /**\n * Is emitted when a menu item is selected.\n */\n @Event()\n public select: EventEmitter<MenuItem>;\n\n /**\n * A search function that takes a search-string as an argument,\n * and returns a promise that will eventually be resolved with\n * an array of `MenuItem`:s.\n *\n * See the docs for the type `MenuSearcher` for type information on\n * the searcher function itself.\n */\n @Prop()\n public searcher: MenuSearcher;\n\n /**\n * Message to display when search returns 0 results.\n */\n @Prop()\n public emptyResultMessage?: string;\n\n /**\n * Is emitted when a menu item with a sub-menu is selected.\n */\n @Event()\n public navigateMenu: EventEmitter<MenuItem | null>;\n\n @Element()\n private host: HTMLLimelMenuElement;\n\n @State()\n private loadingSubItems: boolean;\n\n @State()\n private searchValue: string;\n\n @State()\n private searchResults: Array<MenuItem | ListSeparator> | null;\n\n private list: HTMLLimelMenuListElement;\n private searchInput: HTMLLimelInputFieldElement;\n private portalId: string;\n private triggerElement: HTMLSlotElement;\n private selectedMenuItem?: MenuItem;\n\n constructor() {\n this.portalId = createRandomString();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n const menuSurfaceWidth = this.getMenuSurfaceWidth(\n cssProperties['--menu-surface-width'],\n );\n\n return (\n <div class=\"mdc-menu-surface--anchor\" onClick={this.onTriggerClick}>\n <slot ref={this.setTriggerRef} name=\"trigger\" />\n {this.renderNotificationBadge()}\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n openDirection={this.openDirection}\n position=\"absolute\"\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-menu-surface\n open={this.open}\n onDismiss={this.onClose}\n style={{\n ...cssProperties,\n '--mdc-menu-min-width': menuSurfaceWidth,\n '--limel-menu-surface-display': 'flex',\n '--limel-menu-surface-flex-direction': 'column',\n }}\n class={{\n 'has-grid-layout': this.gridLayout,\n }}\n >\n {this.renderSearchField()}\n {this.renderBreadcrumb()}\n {this.renderLoader()}\n {this.renderEmptyMessage()}\n {this.renderMenuList()}\n </limel-menu-surface>\n </limel-portal>\n </div>\n );\n }\n\n @Watch('items')\n protected itemsWatcher() {\n this.clearSearch();\n this.setFocus();\n }\n\n @Watch('open')\n protected openWatcher(newValue: boolean) {\n const opened = newValue;\n if (opened) {\n this.setFocus();\n } else {\n this.clearSearch();\n }\n }\n\n private getBreadcrumbsItems() {\n const breadCrumbItems: MenuCrumbItem[] = [];\n let currentItem = this.currentSubMenu;\n while (currentItem) {\n breadCrumbItems.push({\n text: currentItem.text,\n icon: currentItem.icon,\n menuItem: currentItem,\n });\n currentItem = currentItem.parentItem;\n }\n\n if (\n breadCrumbItems.length ||\n this.rootItem !== DEFAULT_ROOT_BREADCRUMBS_ITEM\n ) {\n breadCrumbItems.push(this.rootItem);\n }\n\n return breadCrumbItems.reverse();\n }\n\n private renderLoader = () => {\n if (!this.loadingSubItems && !this.loading) {\n return;\n }\n\n const cssProperties = this.getCssProperties();\n\n return (\n <div\n style={{\n width: cssProperties['--menu-surface-width'],\n display: 'flex',\n 'align-items': 'center',\n 'justify-content': 'center',\n padding: '0.5rem 0',\n }}\n >\n <limel-spinner size=\"mini\" limeBranded={false} />\n </div>\n );\n };\n\n private renderBreadcrumb = () => {\n const breadcrumbsItems = this.getBreadcrumbsItems();\n if (!breadcrumbsItems.length) {\n return;\n }\n\n return (\n <limel-breadcrumbs\n style={{\n 'border-bottom': 'solid 1px rgb(var(--contrast-500))',\n 'flex-shrink': '0',\n }}\n onSelect={this.handleBreadcrumbsSelect}\n items={breadcrumbsItems}\n />\n );\n };\n\n private handleBreadcrumbsSelect = (\n event: LimelBreadcrumbsCustomEvent<MenuCrumbItem>,\n ) => {\n if (!event.detail.menuItem) {\n this.currentSubMenu = null;\n this.clearSearch();\n this.navigateMenu.emit(null);\n\n this.setFocus();\n\n return;\n }\n\n this.handleSelect(event.detail.menuItem);\n };\n\n private renderSearchField = () => {\n if (!this.searcher) {\n return;\n }\n\n return (\n <limel-input-field\n tabindex=\"0\"\n ref={this.setSearchElement}\n type=\"search\"\n leadingIcon=\"search\"\n style={{\n padding: '0.25rem',\n 'box-sizing': 'border-box',\n }}\n value={this.searchValue}\n onChange={this.handleTextInput}\n onKeyDown={this.handleInputKeyDown}\n />\n );\n };\n\n private renderEmptyMessage = () => {\n if (\n this.loading ||\n this.loadingSubItems ||\n !this.emptyResultMessage ||\n !Array.isArray(this.searchResults) ||\n this.searchResults?.length\n ) {\n return null;\n }\n\n return (\n <p\n style={{\n padding: '0 1rem',\n 'text-align': 'center',\n }}\n >\n {this.emptyResultMessage}\n </p>\n );\n };\n\n private renderMenuList = () => {\n let items = this.visibleItems;\n\n if (this.loadingSubItems || this.loading) {\n items = [];\n }\n\n return (\n <limel-menu-list\n style={{\n 'overflow-y': 'auto',\n 'flex-grow': '1',\n }}\n class={{\n 'has-grid-layout has-interactive-items': this.gridLayout,\n }}\n items={items}\n badgeIcons={this.badgeIcons}\n onSelect={this.onSelect}\n ref={this.setListElement}\n onKeyDown={this.handleMenuKeyDown}\n />\n );\n };\n\n private handleTextInput = async (\n event: LimelInputFieldCustomEvent<string>,\n ) => {\n event.stopPropagation();\n\n const query = event.detail;\n this.searchValue = query;\n if (query === '') {\n this.searchResults = null;\n this.loadingSubItems = false;\n\n return;\n }\n\n this.loadingSubItems = true;\n\n const result = await this.searcher(query);\n\n if (this.searchValue !== query) {\n return;\n }\n\n this.searchResults = result;\n this.loadingSubItems = false;\n };\n\n // Key handler for the input search field\n // Will change focus to the first/last item in the dropdown\n // list to enable selection with the keyboard\n private handleInputKeyDown = (event: KeyboardEvent) => {\n const isForwardTab =\n event.key === TAB &&\n !event.altKey &&\n !event.metaKey &&\n !event.shiftKey;\n const isUp = event.key === ARROW_UP;\n const isDown = event.key === ARROW_DOWN;\n\n if (!isForwardTab && !isUp && !isDown) {\n return;\n }\n\n if (!this.list) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n\n if (isForwardTab || isDown) {\n const listItems =\n this.list.shadowRoot.querySelectorAll<HTMLElement>(\n '.mdc-deprecated-list-item',\n );\n const listElement = listItems[0];\n listElement?.focus();\n\n return;\n }\n\n if (isUp) {\n const listItems =\n this.list.shadowRoot.querySelectorAll<HTMLElement>(\n '.mdc-deprecated-list-item',\n );\n const listElement = listItems[listItems.length - 1];\n listElement?.focus();\n }\n };\n\n // Key handler for the menu list\n // Will change focus to the search field if using shift+tab\n // And can go forward/back with righ/left arrow keys\n private handleMenuKeyDown = (event: KeyboardEvent) => {\n const isBackwardTab =\n event.key === TAB &&\n !event.altKey &&\n !event.metaKey &&\n event.shiftKey;\n\n const isLeft = event.key === ARROW_LEFT;\n\n const isRight = event.key === ARROW_RIGHT;\n\n if (!isBackwardTab && !isLeft && !isRight) {\n return;\n }\n\n if (isBackwardTab) {\n event.stopPropagation();\n event.preventDefault();\n this.searchInput?.focus();\n } else if (!this.gridLayout) {\n const currentItem = this.getCurrentItem();\n\n event.stopPropagation();\n event.preventDefault();\n if (isRight) {\n this.goForward(currentItem);\n } else if (isLeft) {\n this.goBack();\n }\n }\n };\n\n private clearSearch = () => {\n this.searchValue = '';\n this.searchResults = null;\n this.loadingSubItems = false;\n };\n\n private getCurrentItem = (): MenuItem => {\n const activeItem = this.list?.shadowRoot?.querySelector(\n '[role=\"menuitem\"][tabindex=\"0\"]',\n );\n const attrIndex = activeItem?.attributes?.getNamedItem('data-index');\n const dataIndex = parseInt(attrIndex?.value || '0', 10);\n\n return this.visibleItems[dataIndex] as MenuItem;\n };\n\n private goForward = (currentItem: MenuItem) => {\n this.handleSelect(currentItem, false);\n };\n\n private goBack = () => {\n if (!this.currentSubMenu) {\n // Already in the root of the menu\n return;\n }\n\n const parent = this.currentSubMenu.parentItem;\n if (!parent) {\n // If only one step down, go to the root of the menu.\n // No need to load a sub-menu.\n this.currentSubMenu = null;\n this.clearSearch();\n this.navigateMenu.emit(null);\n\n this.setFocus();\n\n return;\n }\n\n this.handleSelect(parent);\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n 'aria-controls': this.portalId,\n disabled: this.disabled,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n\n private onClose = () => {\n this.cancel.emit();\n this.open = false;\n this.currentSubMenu = null;\n };\n\n private onTriggerClick = (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) {\n return;\n }\n\n this.open = !this.open;\n };\n\n private handleSelect = async (\n menuItem: MenuItem,\n selectOnEmptyChildren: boolean = true,\n ) => {\n if (Array.isArray(menuItem?.items) && menuItem.items.length > 0) {\n this.selectedMenuItem = menuItem;\n this.clearSearch();\n this.currentSubMenu = menuItem;\n this.navigateMenu.emit(menuItem);\n\n this.setFocus();\n\n return;\n } else if (isFunction(menuItem?.items)) {\n const menuLoader = menuItem.items as MenuLoader;\n this.selectedMenuItem = menuItem;\n this.loadingSubItems = true;\n const subItems = await menuLoader(menuItem);\n\n if (this.selectedMenuItem !== menuItem) {\n return;\n }\n\n menuItem.items = subItems;\n this.loadingSubItems = false;\n\n if (subItems?.length) {\n this.currentSubMenu = menuItem;\n this.clearSearch();\n this.navigateMenu.emit(menuItem);\n\n this.setFocus();\n\n return;\n }\n }\n\n if (!selectOnEmptyChildren) {\n return;\n }\n\n this.selectedMenuItem = menuItem;\n this.loadingSubItems = false;\n\n this.select.emit(menuItem);\n this.open = false;\n this.currentSubMenu = null;\n this.setFocus();\n };\n\n private onSelect = (event: CustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.handleSelect(event.detail);\n };\n\n private getCssProperties() {\n const propertyNames = [\n '--menu-surface-width',\n '--list-grid-item-max-width',\n '--list-grid-item-min-width',\n '--list-grid-gap',\n '--notification-badge-background-color',\n '--notification-badge-text-color',\n ] as const;\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n type PropName = (typeof propertyNames)[number];\n\n return zipObject(propertyNames, values) as Record<PropName, string>;\n }\n\n private setListElement = (element: HTMLLimelMenuListElement) => {\n this.list = element;\n };\n\n private setFocus = () => {\n setTimeout(() => {\n if (this.searchInput && this.searcher) {\n const observer = new IntersectionObserver(() => {\n observer.unobserve(this.searchInput);\n if (this.searchInput === window.document.activeElement) {\n return;\n }\n\n this.searchInput.focus();\n });\n observer.observe(this.searchInput);\n } else if (this.list) {\n const observer = new IntersectionObserver(() => {\n observer.unobserve(this.list);\n this.focusMenuItem();\n });\n observer.observe(this.list);\n }\n }, 0);\n };\n\n private setSearchElement = (element: HTMLLimelInputFieldElement) => {\n this.searchInput = element;\n };\n\n private focusMenuItem = () => {\n if (!this.list) {\n return;\n }\n\n const activeElement = this.list.shadowRoot.activeElement as HTMLElement;\n activeElement?.blur();\n\n const menuItems = this.visibleItems.filter(this.isMenuItem);\n const selectedIndex = Math.max(\n menuItems.findIndex((item) => item.selected),\n 0,\n );\n const menuElements: HTMLElement[] = Array.from(\n this.list.shadowRoot.querySelectorAll('[role=\"menuitem\"]'),\n );\n menuElements[selectedIndex]?.focus();\n };\n\n private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n\n private renderNotificationBadge = () => {\n if (this.items.some(this.hasNotificationBadge)) {\n return <limel-badge />;\n }\n };\n\n private hasNotificationBadge = (item: MenuItem | ListSeparator) =>\n this.isMenuItem(item) && item.badge !== undefined;\n\n private setTriggerRef = (elm?: HTMLSlotElement) => {\n this.triggerElement = elm;\n };\n\n private getMenuSurfaceWidth(customWidth: string): string {\n if (customWidth) {\n return customWidth;\n }\n\n if (this.surfaceWidth === 'inherit-from-trigger') {\n const assignedTriggers = this.triggerElement?.assignedElements();\n\n if (\n !assignedTriggers?.length ||\n !assignedTriggers[0]?.clientWidth\n ) {\n return '';\n }\n\n return `${assignedTriggers[0].clientWidth}px`;\n } else if (this.surfaceWidth === 'inherit-from-menu') {\n if (!this.host?.clientWidth) {\n return '';\n }\n\n return `${this.host?.clientWidth}px`;\n }\n\n return '';\n }\n\n private get visibleItems(): Array<MenuItem | ListSeparator> {\n if (Array.isArray(this.searchResults) && this.searchValue) {\n return this.searchResults;\n } else if (Array.isArray(this.currentSubMenu?.items)) {\n return this.currentSubMenu.items.map((item) => ({\n ...item,\n parentItem: this.currentSubMenu,\n }));\n }\n\n return this.items;\n }\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Corner, MDCMenuSurface } from '@material/menu-surface';
|
|
2
2
|
import { h, } from '@stencil/core';
|
|
3
3
|
import { isDescendant } from '../../util/dom';
|
|
4
|
-
import { ESCAPE,
|
|
4
|
+
import { ESCAPE, TAB } from '../../util/keycodes';
|
|
5
5
|
/**
|
|
6
6
|
* @slot - Content to put inside the surface
|
|
7
7
|
* @private
|
|
@@ -76,8 +76,8 @@ export class MenuSurface {
|
|
|
76
76
|
event.preventDefault();
|
|
77
77
|
};
|
|
78
78
|
this.handleKeyDown = (event) => {
|
|
79
|
-
const isEscape = event.key === ESCAPE
|
|
80
|
-
const isTab = event.key === TAB
|
|
79
|
+
const isEscape = event.key === ESCAPE;
|
|
80
|
+
const isTab = event.key === TAB;
|
|
81
81
|
if (this.open && (isEscape || isTab)) {
|
|
82
82
|
event.stopPropagation();
|
|
83
83
|
this.dismiss.emit();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-surface.js","sourceRoot":"","sources":["../../../src/components/menu-surface/menu-surface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,
|
|
1
|
+
{"version":3,"file":"menu-surface.js","sourceRoot":"","sources":["../../../src/components/menu-surface/menu-surface.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Corner, MDCMenuSurface } from '@material/menu-surface';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { isDescendant } from '../../util/dom';\nimport { ESCAPE, TAB } from '../../util/keycodes';\n\n/**\n * @slot - Content to put inside the surface\n * @private\n */\n@Component({\n tag: 'limel-menu-surface',\n shadow: true,\n styleUrl: 'menu-surface.scss',\n})\nexport class MenuSurface {\n /**\n * True if the menu surface is open, false otherwise\n */\n @Prop()\n public open = false;\n\n /**\n * Clicks in this element should not be prevented when the menu surface is open\n */\n @Prop()\n public allowClicksElement: HTMLElement;\n\n /**\n * Emitted when the menu surface is dismissed and should be closed\n */\n @Event()\n public dismiss: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelMenuSurfaceElement;\n\n private menuSurface: MDCMenuSurface;\n\n public connectedCallback() {\n this.setup();\n }\n\n public disconnectedCallback() {\n this.teardown();\n }\n\n public componentDidLoad() {\n this.setup();\n }\n\n public render() {\n const classList = {\n 'mdc-menu': true,\n 'mdc-menu-surface': true,\n 'mdc-menu-surface--open': this.open,\n 'mdc-elevation-transition': true,\n 'mdc-elevation--z4': true,\n };\n\n return (\n <div class={classList} tabindex=\"-1\">\n <slot />\n </div>\n );\n }\n\n private setup = () => {\n const menuElement: HTMLElement =\n this.host.shadowRoot.querySelector('.mdc-menu-surface');\n if (!menuElement) {\n return;\n }\n\n this.menuSurface = new MDCMenuSurface(menuElement);\n this.menuSurface.setAnchorCorner(Corner.TOP_START);\n\n document.addEventListener('mousedown', this.handleDocumentClick, {\n capture: true,\n });\n this.host.addEventListener('keydown', this.handleKeyDown);\n };\n\n private teardown = () => {\n this.menuSurface?.destroy();\n document.removeEventListener('mousedown', this.handleDocumentClick, {\n capture: true,\n });\n this.host.removeEventListener('keydown', this.handleKeyDown);\n };\n\n private handleDocumentClick = (event) => {\n const elementPath = event.composedPath ? event.composedPath() : [];\n\n if (!this.open) {\n return;\n }\n\n if (isDescendant(event.target, this.host)) {\n return;\n }\n\n if (this.allowClicksElement) {\n const clickedInAllowedElement = elementPath.includes(\n this.allowClicksElement,\n );\n\n if (clickedInAllowedElement) {\n return;\n }\n }\n\n this.dismiss.emit();\n this.preventClickEventPropagation();\n };\n\n private preventClickEventPropagation = () => {\n // When the menu surface is open, we want to stop the `click` event from propagating\n // when clicking outside the surface itself. This is to prevent any dialog that might\n // be open from closing, etc. However, when dragging a scrollbar no `click` event is emitted,\n // only mousedown and mouseup. So we listen for `mousedown` and attach a one-time listener\n // for `click`, so we can capture and \"kill\" it.\n document.addEventListener('click', this.stopEvent, {\n capture: true,\n once: true,\n });\n // We also capture and \"kill\" the next `mouseup` event.\n document.addEventListener('mouseup', this.stopEvent, {\n capture: true,\n once: true,\n });\n // If the user dragged the scrollbar, no `click` event happens. So when we get the\n // `mouseup` event, remove the handler for `click` if it's still there.\n // Otherwise, we would catch the next click even though the menu is no longer open.\n document.addEventListener(\n 'mouseup',\n () => {\n document.removeEventListener('click', this.stopEvent, {\n capture: true,\n });\n },\n {\n once: true,\n },\n );\n };\n\n private stopEvent = (event) => {\n event.stopPropagation();\n event.preventDefault();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const isEscape = event.key === ESCAPE;\n const isTab = event.key === TAB;\n\n if (this.open && (isEscape || isTab)) {\n event.stopPropagation();\n this.dismiss.emit();\n }\n };\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { h, } from '@stencil/core';
|
|
2
2
|
import { isDescendant } from '../../util/dom';
|
|
3
|
-
import { ARROW_DOWN,
|
|
3
|
+
import { ARROW_DOWN, ARROW_UP, ENTER, ESCAPE, TAB } from '../../util/keycodes';
|
|
4
4
|
import { createRandomString } from '../../util/random-string';
|
|
5
5
|
import { getIconFillColor, getIconName } from '../icon/get-icon-props';
|
|
6
6
|
import { debounce } from 'lodash-es';
|
|
@@ -246,12 +246,7 @@ export class Picker {
|
|
|
246
246
|
}
|
|
247
247
|
onListKeyDown(event) {
|
|
248
248
|
const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);
|
|
249
|
-
|
|
250
|
-
TAB_KEY_CODE,
|
|
251
|
-
ESCAPE_KEY_CODE,
|
|
252
|
-
ENTER_KEY_CODE,
|
|
253
|
-
].includes(event.keyCode);
|
|
254
|
-
if (keyFound || keyCodeFound) {
|
|
249
|
+
if (keyFound) {
|
|
255
250
|
this.chipSet.setFocus();
|
|
256
251
|
}
|
|
257
252
|
}
|
|
@@ -362,12 +357,12 @@ export class Picker {
|
|
|
362
357
|
* @param event - event
|
|
363
358
|
*/
|
|
364
359
|
handleInputKeyDown(event) {
|
|
365
|
-
const isForwardTab =
|
|
360
|
+
const isForwardTab = event.key === TAB &&
|
|
366
361
|
!event.altKey &&
|
|
367
362
|
!event.metaKey &&
|
|
368
363
|
!event.shiftKey;
|
|
369
|
-
const isUp = event.key === ARROW_UP
|
|
370
|
-
const isDown = event.key === ARROW_DOWN
|
|
364
|
+
const isUp = event.key === ARROW_UP;
|
|
365
|
+
const isDown = event.key === ARROW_DOWN;
|
|
371
366
|
if (!isForwardTab && !isUp && !isDown) {
|
|
372
367
|
return;
|
|
373
368
|
}
|
|
@@ -392,7 +387,7 @@ export class Picker {
|
|
|
392
387
|
* @param event - event
|
|
393
388
|
*/
|
|
394
389
|
handleDropdownKeyDown(event) {
|
|
395
|
-
const isEscape = event.key === ESCAPE
|
|
390
|
+
const isEscape = event.key === ESCAPE;
|
|
396
391
|
if (isEscape) {
|
|
397
392
|
event.preventDefault();
|
|
398
393
|
this.textValue = '';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"picker.js","sourceRoot":"","sources":["../../../src/components/picker/picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Action } from '../collapsible-section/action';\nimport { ActionPosition, ActionScrollBehavior } from '../picker/actions.types';\nimport { Chip } from '../chip-set/chip.types';\nimport { ListItem } from '../list/list-item.types';\nimport { Searcher } from '../picker/searcher.types';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { isDescendant } from '../../util/dom';\nimport {\n ARROW_DOWN,\n ARROW_DOWN_KEY_CODE,\n ARROW_UP,\n ARROW_UP_KEY_CODE,\n ENTER,\n ENTER_KEY_CODE,\n ESCAPE,\n ESCAPE_KEY_CODE,\n TAB,\n TAB_KEY_CODE,\n} from '../../util/keycodes';\nimport { createRandomString } from '../../util/random-string';\nimport {\n LimelChipSetCustomEvent,\n LimelListCustomEvent,\n} from '../../components';\nimport { getIconFillColor, getIconName } from '../icon/get-icon-props';\nimport { PickerValue } from './value.types';\nimport { DebouncedFunc, debounce } from 'lodash-es';\n\nconst SEARCH_DEBOUNCE = 300;\nconst CHIP_SET_TAG_NAME = 'limel-chip-set';\nconst DEFAULT_SEARCHER_MAX_RESULTS = 20;\n\n/**\n * @exampleComponent limel-example-picker-basic\n * @exampleComponent limel-example-picker-multiple\n * @exampleComponent limel-example-picker-icons\n * @exampleComponent limel-example-picker-pictures\n * @exampleComponent limel-example-picker-value-as-object\n * @exampleComponent limel-example-picker-value-as-object-with-actions\n * @exampleComponent limel-example-picker-empty-suggestions\n * @exampleComponent limel-example-picker-leading-icon\n * @exampleComponent limel-example-picker-static-actions\n * @exampleComponent limel-example-picker-composite\n */\n@Component({\n tag: 'limel-picker',\n shadow: true,\n styleUrl: 'picker.scss',\n})\nexport class Picker {\n /**\n * True if the picker should be disabled\n */\n @Prop()\n public disabled: boolean = false;\n\n /**\n * Set to `true` to disable adding and removing items,\n * but allow interaction with existing items.\n */\n @Prop({ reflect: true })\n public readonly: boolean = false;\n\n /**\n * Text to display for the input field of the picker\n */\n @Prop()\n public label: string;\n\n /**\n * Search label to display in the input field when searching\n */\n @Prop()\n public searchLabel: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Leading icon to show to the far left in the text field\n */\n @Prop()\n public leadingIcon: string;\n\n /**\n * A message to display when the search returned an empty result\n */\n @Prop()\n public emptyResultMessage: string;\n\n /**\n * True if the control requires a value\n */\n @Prop()\n public required: boolean = false;\n\n /**\n * Set to `true` to indicate that the current value of the input field is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Currently selected value or values. Where the value can be an object.\n */\n @Prop()\n public value: ListItem<PickerValue> | Array<ListItem<PickerValue>>;\n\n /**\n * A search function that takes a search-string as an argument,\n * and returns a promise that will eventually be resolved with\n * an array of `ListItem`:s.\n *\n * See the docs for the type `Searcher` for type information on\n * the searcher function itself.\n */\n @Prop()\n public searcher?: Searcher;\n\n /**\n * Only used if no `searcher` is provided. The picker will then use a\n * default search function that filters the `allItems` based on the\n * `text` and `secondaryText` properties of the items.\n * This way, custom search functions are typically only needed when the\n * search is done on the server.\n * For performance reasons, the default searcher will never return more\n * than 20 items, but if there are more than 20 items, the rest can be\n * found by typing more characters in the search field.\n */\n @Prop()\n public allItems?: Array<ListItem<PickerValue>> = [];\n\n /**\n * True if multiple values are allowed\n */\n @Prop()\n public multiple: boolean = false;\n\n /**\n * Sets delimiters between chips. Works only when `multiple` is `true`.\n */\n @Prop({ reflect: true })\n public delimiter: string = null;\n\n /**\n * Static actions that can be clicked by the user.\n */\n @Prop()\n public actions: Array<ListItem<Action>> = [];\n\n /**\n * Position of the custom static actions in the picker's results dropdown.\n * Can be set to `'top'` or `'bottom'`.\n */\n @Prop()\n public actionPosition: ActionPosition = 'bottom';\n\n /**\n * Scroll behavior of the custom static actions, when user scrolls\n * in the picker's results dropdown. Can be set to `'scroll'` which means\n * the action items will scroll together with the list, or `'sticky'` which\n * retains their position at the top or bottom of the drop down while\n * scrolling.\n */\n @Prop()\n public actionScrollBehavior: ActionScrollBehavior = 'sticky';\n\n /**\n * Whether badge icons should be used in the result list or not\n */\n @Prop({ reflect: true })\n public badgeIcons: boolean = false;\n\n /**\n * Fired when a new value has been selected from the picker\n */\n @Event()\n private change: EventEmitter<\n ListItem<PickerValue> | Array<ListItem<PickerValue>>\n >;\n\n /**\n * Fired when clicking on a selected value\n */\n @Event()\n private interact: EventEmitter<ListItem<PickerValue>>;\n\n /**\n * Emitted when the user selects an action.\n */\n @Event()\n private action: EventEmitter<Action>;\n\n @State()\n private items: Array<ListItem<number | string>>;\n\n @State()\n private textValue: string = '';\n\n @State()\n private loading: boolean = false;\n\n @State()\n private chips: Chip[] = [];\n\n @Element()\n private host: HTMLLimelPickerElement;\n\n // Should NOT be decorated with State(), since this\n // should not trigger a re-render by itself.\n private chipSetEditMode = false;\n\n private debouncedSearch: DebouncedFunc<(query: string) => Promise<void>>;\n private chipSet: HTMLLimelChipSetElement;\n private portalId: string;\n\n constructor() {\n this.handleTextInput = this.handleTextInput.bind(this);\n this.handleInputKeyDown = this.handleInputKeyDown.bind(this);\n this.handleDropdownKeyDown = this.handleDropdownKeyDown.bind(this);\n this.handleInputFieldFocus = this.handleInputFieldFocus.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.handleInteract = this.handleInteract.bind(this);\n this.handleListChange = this.handleListChange.bind(this);\n this.handleActionListChange = this.handleActionListChange.bind(this);\n this.handleStopEditAndBlur = this.handleStopEditAndBlur.bind(this);\n this.handleCloseMenu = this.handleCloseMenu.bind(this);\n this.onListKeyDown = this.onListKeyDown.bind(this);\n\n this.portalId = createRandomString();\n this.debouncedSearch = debounce(this.search, SEARCH_DEBOUNCE);\n }\n\n public componentWillLoad() {\n this.chips = this.createChips(this.value);\n }\n\n public componentDidLoad() {\n this.chipSet = this.host.shadowRoot.querySelector(CHIP_SET_TAG_NAME);\n }\n\n public disconnectedCallback() {\n this.debouncedSearch.cancel();\n }\n\n public async componentWillUpdate() {\n this.chipSetEditMode = false;\n if (this.chipSet) {\n this.chipSetEditMode = await this.chipSet.getEditMode();\n }\n }\n\n public render() {\n const props: {\n maxItems?: number;\n } = {};\n\n if (!this.multiple) {\n props.maxItems = 1;\n }\n\n return [\n <limel-chip-set\n type=\"input\"\n inputType=\"search\"\n label={this.label}\n helperText={this.helperText}\n leadingIcon={this.leadingIcon}\n value={this.chips}\n disabled={this.disabled}\n invalid={this.invalid}\n delimiter={this.renderDelimiter()}\n readonly={this.readonly}\n required={this.required}\n searchLabel={this.searchLabel}\n onInput={this.handleTextInput}\n onKeyDown={this.handleInputKeyDown}\n onChange={this.handleChange}\n onInteract={this.handleInteract}\n onStartEdit={this.handleInputFieldFocus}\n onStopEdit={this.handleStopEditAndBlur}\n emptyInputOnBlur={false}\n clearAllButton={this.multiple && !this.chipSetEditMode}\n {...props}\n />,\n this.renderDropdown(),\n ];\n }\n\n @Watch('value')\n protected onChangeValue() {\n this.chips = this.createChips(this.value);\n }\n\n private renderDelimiter() {\n if (this.multiple) {\n return this.delimiter;\n }\n\n return null;\n }\n\n private getValueId = (item: ListItem) => {\n const value = item.value;\n if (!!value && typeof value === 'object') {\n return value.id;\n }\n\n return value;\n };\n\n private createChips = (value: ListItem | ListItem[]): Chip[] => {\n if (!value) {\n return [];\n }\n\n if (this.multiple) {\n const listItems: ListItem[] = value as ListItem[];\n\n return listItems.map(this.createChip);\n }\n\n const listItem: ListItem = value as ListItem;\n\n return [this.createChip(listItem)];\n };\n\n private createChip = (listItem: ListItem): Chip => {\n const name = getIconName(listItem.icon);\n // eslint-disable-next-line sonarjs/deprecation\n const color = getIconFillColor(listItem.icon, listItem.iconColor);\n const valueId = this.getValueId(listItem);\n\n return {\n id: `${valueId}`,\n text: listItem.text,\n removable: true,\n icon: name ? { name: name, color: color } : undefined,\n image: listItem.image,\n value: listItem,\n menuItems: listItem.actions,\n };\n };\n\n /**\n * Renders the dropdown with the items to pick from, or a spinner if the picker\n * is waiting for items to be received\n *\n * @returns picker dropdown\n */\n private renderDropdown() {\n const dropDownContent = this.getDropdownContent();\n\n const content = [];\n\n if (this.shouldShowDropDownContent()) {\n const actionContent = this.getActionContent();\n if (this.actionPosition === 'top') {\n content.push(actionContent);\n }\n\n if (dropDownContent) {\n content.push(dropDownContent);\n }\n\n if (this.actionPosition === 'bottom') {\n content.push(actionContent);\n }\n }\n\n return this.renderPortal(content);\n }\n\n private getActionContent() {\n const actionCount = this.actions?.length ?? 0;\n if (actionCount === 0) {\n return null;\n }\n\n return [\n <limel-list\n class={{\n 'static-actions-list': true,\n 'is-on-top': this.actionPosition === 'top',\n 'is-at-bottom': this.actionPosition === 'bottom',\n 'has-position-sticky':\n this.actionScrollBehavior === 'sticky',\n }}\n badgeIcons={true}\n type={'selectable'}\n onChange={this.handleActionListChange}\n items={this.actions.map(this.removeUnusedPropertiesOnAction)}\n />,\n ];\n }\n\n private removeUnusedPropertiesOnAction(\n action: ListItem<Action>,\n ): ListItem<Action> {\n return {\n ...action,\n actions: [],\n };\n }\n\n private shouldShowDropDownContent() {\n if (this.isFull()) {\n return false;\n }\n\n return !!this.chipSetEditMode;\n }\n\n private getDropdownContent() {\n if (!this.shouldShowDropDownContent()) {\n return;\n }\n\n if (this.loading) {\n return this.renderSpinner();\n }\n\n if (!this.items?.length) {\n return this.renderEmptyMessage();\n }\n\n return this.renderListResult();\n }\n\n /**\n * Returns true if the picker is \"full\"\n * The picker is considered to be full if it has a value and only one is allowed\n *\n * @returns true if the picker is full\n */\n private isFull(): boolean {\n return !this.multiple && !!this.value;\n }\n\n private renderSpinner() {\n return (\n <div\n style={{\n width: '100%',\n display: 'flex',\n 'align-items': 'center',\n 'justify-content': 'center',\n padding: '1rem 0',\n }}\n >\n <limel-spinner limeBranded={false} />\n </div>\n );\n }\n\n private renderEmptyMessage() {\n if (!this.emptyResultMessage) {\n return;\n }\n\n const style = {\n color: 'rgb(var(--contrast-1100))',\n 'text-align': 'center',\n margin: '0.5rem 1rem',\n };\n\n return <p style={style}>{this.emptyResultMessage}</p>;\n }\n\n private renderListResult() {\n return (\n <limel-list\n badgeIcons={this.badgeIcons}\n onChange={this.handleListChange}\n onKeyDown={this.onListKeyDown}\n type=\"selectable\"\n items={this.items}\n />\n );\n }\n\n private onListKeyDown(event: KeyboardEvent) {\n const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);\n const keyCodeFound = [\n TAB_KEY_CODE,\n ESCAPE_KEY_CODE,\n ENTER_KEY_CODE,\n ].includes(event.keyCode);\n if (keyFound || keyCodeFound) {\n this.chipSet.setFocus();\n }\n }\n\n private renderPortal(content: any[] = []) {\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n return (\n <limel-portal\n visible={content.length > 0}\n containerId={this.portalId}\n inheritParentWidth={true}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-menu-surface\n open={content.length > 0}\n allowClicksElement={this.host}\n style={{\n '--mdc-menu-min-width': '100%',\n 'max-height': 'inherit',\n display: 'flex',\n }}\n onDismiss={this.handleCloseMenu}\n >\n {content}\n </limel-menu-surface>\n </limel-portal>\n );\n }\n\n /**\n * Check if a descendant still has focus. If not, reset text value and search result.\n */\n private handleStopEditAndBlur() {\n // In browsers where shadow DOM is not supported activeElement on shadowRoot will return null\n // However, document.activeElement will return the actual focused element instead of the outermost shadow host\n const element =\n this.host.shadowRoot.activeElement || document.activeElement;\n const portalElement = document.querySelector(`#${this.portalId}`);\n if (\n isDescendant(element as HTMLElement, this.host) ||\n isDescendant(element as HTMLElement, portalElement as HTMLElement)\n ) {\n return;\n }\n\n this.clearInputField();\n }\n\n /**\n * Input handler for the input field\n *\n * @param event - event\n */\n private async handleTextInput(event) {\n event.stopPropagation();\n\n const query = event.detail;\n this.textValue = query;\n\n this.debouncedSearch(query);\n // If the search-query is an empty string, bypass debouncing.\n if (query === '') {\n this.debouncedSearch.flush();\n }\n }\n\n private search = async (query: string) => {\n const timeoutId = setTimeout(() => {\n this.loading = true;\n });\n const searcher = this.searcher || this.defaultSearcher;\n const result = (await searcher(this.textValue)) as Array<\n ListItem<PickerValue>\n >;\n\n // If the search function resolves immediately,\n // the loading spinner will not be shown.\n clearTimeout(timeoutId);\n\n this.handleSearchResult(query, result);\n };\n\n private defaultSearcher: Searcher = async (\n query: string,\n ): Promise<ListItem[]> => {\n if (query === '') {\n return this.allItems.slice(0, DEFAULT_SEARCHER_MAX_RESULTS);\n }\n\n const filteredItems = this.allItems.filter((item) => {\n let searchText = item.text.toLowerCase();\n if (item.secondaryText) {\n searchText =\n searchText + ' ' + item.secondaryText.toLowerCase();\n }\n\n return searchText.includes(query.toLowerCase());\n });\n\n return filteredItems.slice(0, DEFAULT_SEARCHER_MAX_RESULTS);\n };\n\n /**\n * Change handler for the list\n *\n * @param event - event\n */\n private handleListChange(\n event: LimelListCustomEvent<ListItem<PickerValue>>,\n ) {\n event.stopPropagation();\n if (!this.value || this.value !== event.detail) {\n let newValue: ListItem<PickerValue> | Array<ListItem<PickerValue>> =\n event.detail;\n if (this.multiple) {\n newValue = [\n ...(this.value as Array<ListItem<PickerValue>>),\n event.detail,\n ];\n }\n\n this.change.emit(newValue);\n this.items = [];\n }\n\n if (this.multiple) {\n this.textValue = '';\n this.chipSet?.setFocus(true);\n }\n }\n\n /**\n * Change handler for the list\n *\n * @param event - event\n */\n private handleActionListChange(\n event: LimelListCustomEvent<ListItem<Action>>,\n ) {\n event.stopPropagation();\n if (!event.detail) {\n return;\n }\n\n this.action.emit(event.detail.value);\n this.items = [];\n }\n\n /**\n * Focus handler for the chip set\n * Prevent focus if the picker has a value and does not support multiple values\n */\n private handleInputFieldFocus() {\n const query = this.textValue;\n this.debouncedSearch(query);\n }\n\n private handleChange(event: LimelChipSetCustomEvent<Chip | Chip[]>) {\n event.stopPropagation();\n\n let newValue = null;\n if (this.multiple) {\n const chips = event.detail as Chip[];\n newValue = chips.map((chip) => {\n return (this.value as ListItem[]).find((item) => {\n const valueId = this.getValueId(item);\n\n return `${valueId}` === chip.id;\n });\n });\n }\n\n this.change.emit(newValue);\n }\n\n private handleInteract(event: LimelChipSetCustomEvent<Chip>) {\n event.stopPropagation();\n this.interact.emit(event.detail ? event.detail.value : event.detail);\n }\n\n /**\n * Key handler for the input field\n * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard\n *\n * @param event - event\n */\n private handleInputKeyDown(event: KeyboardEvent) {\n const isForwardTab =\n (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n !event.altKey &&\n !event.metaKey &&\n !event.shiftKey;\n const isUp =\n event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;\n const isDown =\n event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;\n\n if (!isForwardTab && !isUp && !isDown) {\n return;\n }\n\n const list = document.querySelector(` #${this.portalId} limel-list`);\n if (!list) {\n return;\n }\n\n event.preventDefault();\n\n if (isForwardTab || isDown) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:first-child',\n );\n listElement.focus();\n\n return;\n }\n\n if (isUp) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:last-child',\n );\n listElement.focus();\n }\n }\n\n /**\n * Key handler for the dropdown\n *\n * @param event - event\n */\n private handleDropdownKeyDown(event: KeyboardEvent) {\n const isEscape =\n event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;\n\n if (isEscape) {\n event.preventDefault();\n this.textValue = '';\n this.chipSet.setFocus(true);\n }\n }\n\n private handleSearchResult(query: string, result: ListItem[]) {\n if (query === this.textValue) {\n this.items = result;\n if (this.multiple) {\n const values = this.value as ListItem[];\n this.items = result.filter((item) => {\n return !values.includes(item);\n });\n }\n\n this.loading = false;\n }\n }\n\n private handleCloseMenu() {\n if (this.items.length > 0) {\n return;\n }\n\n this.clearInputField();\n }\n\n private clearInputField() {\n this.chipSet.emptyInput();\n this.textValue = '';\n this.handleSearchResult('', []);\n this.debouncedSearch.cancel();\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"picker.js","sourceRoot":"","sources":["../../../src/components/picker/picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Action } from '../collapsible-section/action';\nimport { ActionPosition, ActionScrollBehavior } from '../picker/actions.types';\nimport { Chip } from '../chip-set/chip.types';\nimport { ListItem } from '../list/list-item.types';\nimport { Searcher } from '../picker/searcher.types';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { isDescendant } from '../../util/dom';\nimport { ARROW_DOWN, ARROW_UP, ENTER, ESCAPE, TAB } from '../../util/keycodes';\nimport { createRandomString } from '../../util/random-string';\nimport {\n LimelChipSetCustomEvent,\n LimelListCustomEvent,\n} from '../../components';\nimport { getIconFillColor, getIconName } from '../icon/get-icon-props';\nimport { PickerValue } from './value.types';\nimport { DebouncedFunc, debounce } from 'lodash-es';\n\nconst SEARCH_DEBOUNCE = 300;\nconst CHIP_SET_TAG_NAME = 'limel-chip-set';\nconst DEFAULT_SEARCHER_MAX_RESULTS = 20;\n\n/**\n * @exampleComponent limel-example-picker-basic\n * @exampleComponent limel-example-picker-multiple\n * @exampleComponent limel-example-picker-icons\n * @exampleComponent limel-example-picker-pictures\n * @exampleComponent limel-example-picker-value-as-object\n * @exampleComponent limel-example-picker-value-as-object-with-actions\n * @exampleComponent limel-example-picker-empty-suggestions\n * @exampleComponent limel-example-picker-leading-icon\n * @exampleComponent limel-example-picker-static-actions\n * @exampleComponent limel-example-picker-composite\n */\n@Component({\n tag: 'limel-picker',\n shadow: true,\n styleUrl: 'picker.scss',\n})\nexport class Picker {\n /**\n * True if the picker should be disabled\n */\n @Prop()\n public disabled: boolean = false;\n\n /**\n * Set to `true` to disable adding and removing items,\n * but allow interaction with existing items.\n */\n @Prop({ reflect: true })\n public readonly: boolean = false;\n\n /**\n * Text to display for the input field of the picker\n */\n @Prop()\n public label: string;\n\n /**\n * Search label to display in the input field when searching\n */\n @Prop()\n public searchLabel: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Leading icon to show to the far left in the text field\n */\n @Prop()\n public leadingIcon: string;\n\n /**\n * A message to display when the search returned an empty result\n */\n @Prop()\n public emptyResultMessage: string;\n\n /**\n * True if the control requires a value\n */\n @Prop()\n public required: boolean = false;\n\n /**\n * Set to `true` to indicate that the current value of the input field is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Currently selected value or values. Where the value can be an object.\n */\n @Prop()\n public value: ListItem<PickerValue> | Array<ListItem<PickerValue>>;\n\n /**\n * A search function that takes a search-string as an argument,\n * and returns a promise that will eventually be resolved with\n * an array of `ListItem`:s.\n *\n * See the docs for the type `Searcher` for type information on\n * the searcher function itself.\n */\n @Prop()\n public searcher?: Searcher;\n\n /**\n * Only used if no `searcher` is provided. The picker will then use a\n * default search function that filters the `allItems` based on the\n * `text` and `secondaryText` properties of the items.\n * This way, custom search functions are typically only needed when the\n * search is done on the server.\n * For performance reasons, the default searcher will never return more\n * than 20 items, but if there are more than 20 items, the rest can be\n * found by typing more characters in the search field.\n */\n @Prop()\n public allItems?: Array<ListItem<PickerValue>> = [];\n\n /**\n * True if multiple values are allowed\n */\n @Prop()\n public multiple: boolean = false;\n\n /**\n * Sets delimiters between chips. Works only when `multiple` is `true`.\n */\n @Prop({ reflect: true })\n public delimiter: string = null;\n\n /**\n * Static actions that can be clicked by the user.\n */\n @Prop()\n public actions: Array<ListItem<Action>> = [];\n\n /**\n * Position of the custom static actions in the picker's results dropdown.\n * Can be set to `'top'` or `'bottom'`.\n */\n @Prop()\n public actionPosition: ActionPosition = 'bottom';\n\n /**\n * Scroll behavior of the custom static actions, when user scrolls\n * in the picker's results dropdown. Can be set to `'scroll'` which means\n * the action items will scroll together with the list, or `'sticky'` which\n * retains their position at the top or bottom of the drop down while\n * scrolling.\n */\n @Prop()\n public actionScrollBehavior: ActionScrollBehavior = 'sticky';\n\n /**\n * Whether badge icons should be used in the result list or not\n */\n @Prop({ reflect: true })\n public badgeIcons: boolean = false;\n\n /**\n * Fired when a new value has been selected from the picker\n */\n @Event()\n private change: EventEmitter<\n ListItem<PickerValue> | Array<ListItem<PickerValue>>\n >;\n\n /**\n * Fired when clicking on a selected value\n */\n @Event()\n private interact: EventEmitter<ListItem<PickerValue>>;\n\n /**\n * Emitted when the user selects an action.\n */\n @Event()\n private action: EventEmitter<Action>;\n\n @State()\n private items: Array<ListItem<number | string>>;\n\n @State()\n private textValue: string = '';\n\n @State()\n private loading: boolean = false;\n\n @State()\n private chips: Chip[] = [];\n\n @Element()\n private host: HTMLLimelPickerElement;\n\n // Should NOT be decorated with State(), since this\n // should not trigger a re-render by itself.\n private chipSetEditMode = false;\n\n private debouncedSearch: DebouncedFunc<(query: string) => Promise<void>>;\n private chipSet: HTMLLimelChipSetElement;\n private portalId: string;\n\n constructor() {\n this.handleTextInput = this.handleTextInput.bind(this);\n this.handleInputKeyDown = this.handleInputKeyDown.bind(this);\n this.handleDropdownKeyDown = this.handleDropdownKeyDown.bind(this);\n this.handleInputFieldFocus = this.handleInputFieldFocus.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.handleInteract = this.handleInteract.bind(this);\n this.handleListChange = this.handleListChange.bind(this);\n this.handleActionListChange = this.handleActionListChange.bind(this);\n this.handleStopEditAndBlur = this.handleStopEditAndBlur.bind(this);\n this.handleCloseMenu = this.handleCloseMenu.bind(this);\n this.onListKeyDown = this.onListKeyDown.bind(this);\n\n this.portalId = createRandomString();\n this.debouncedSearch = debounce(this.search, SEARCH_DEBOUNCE);\n }\n\n public componentWillLoad() {\n this.chips = this.createChips(this.value);\n }\n\n public componentDidLoad() {\n this.chipSet = this.host.shadowRoot.querySelector(CHIP_SET_TAG_NAME);\n }\n\n public disconnectedCallback() {\n this.debouncedSearch.cancel();\n }\n\n public async componentWillUpdate() {\n this.chipSetEditMode = false;\n if (this.chipSet) {\n this.chipSetEditMode = await this.chipSet.getEditMode();\n }\n }\n\n public render() {\n const props: {\n maxItems?: number;\n } = {};\n\n if (!this.multiple) {\n props.maxItems = 1;\n }\n\n return [\n <limel-chip-set\n type=\"input\"\n inputType=\"search\"\n label={this.label}\n helperText={this.helperText}\n leadingIcon={this.leadingIcon}\n value={this.chips}\n disabled={this.disabled}\n invalid={this.invalid}\n delimiter={this.renderDelimiter()}\n readonly={this.readonly}\n required={this.required}\n searchLabel={this.searchLabel}\n onInput={this.handleTextInput}\n onKeyDown={this.handleInputKeyDown}\n onChange={this.handleChange}\n onInteract={this.handleInteract}\n onStartEdit={this.handleInputFieldFocus}\n onStopEdit={this.handleStopEditAndBlur}\n emptyInputOnBlur={false}\n clearAllButton={this.multiple && !this.chipSetEditMode}\n {...props}\n />,\n this.renderDropdown(),\n ];\n }\n\n @Watch('value')\n protected onChangeValue() {\n this.chips = this.createChips(this.value);\n }\n\n private renderDelimiter() {\n if (this.multiple) {\n return this.delimiter;\n }\n\n return null;\n }\n\n private getValueId = (item: ListItem) => {\n const value = item.value;\n if (!!value && typeof value === 'object') {\n return value.id;\n }\n\n return value;\n };\n\n private createChips = (value: ListItem | ListItem[]): Chip[] => {\n if (!value) {\n return [];\n }\n\n if (this.multiple) {\n const listItems: ListItem[] = value as ListItem[];\n\n return listItems.map(this.createChip);\n }\n\n const listItem: ListItem = value as ListItem;\n\n return [this.createChip(listItem)];\n };\n\n private createChip = (listItem: ListItem): Chip => {\n const name = getIconName(listItem.icon);\n // eslint-disable-next-line sonarjs/deprecation\n const color = getIconFillColor(listItem.icon, listItem.iconColor);\n const valueId = this.getValueId(listItem);\n\n return {\n id: `${valueId}`,\n text: listItem.text,\n removable: true,\n icon: name ? { name: name, color: color } : undefined,\n image: listItem.image,\n value: listItem,\n menuItems: listItem.actions,\n };\n };\n\n /**\n * Renders the dropdown with the items to pick from, or a spinner if the picker\n * is waiting for items to be received\n *\n * @returns picker dropdown\n */\n private renderDropdown() {\n const dropDownContent = this.getDropdownContent();\n\n const content = [];\n\n if (this.shouldShowDropDownContent()) {\n const actionContent = this.getActionContent();\n if (this.actionPosition === 'top') {\n content.push(actionContent);\n }\n\n if (dropDownContent) {\n content.push(dropDownContent);\n }\n\n if (this.actionPosition === 'bottom') {\n content.push(actionContent);\n }\n }\n\n return this.renderPortal(content);\n }\n\n private getActionContent() {\n const actionCount = this.actions?.length ?? 0;\n if (actionCount === 0) {\n return null;\n }\n\n return [\n <limel-list\n class={{\n 'static-actions-list': true,\n 'is-on-top': this.actionPosition === 'top',\n 'is-at-bottom': this.actionPosition === 'bottom',\n 'has-position-sticky':\n this.actionScrollBehavior === 'sticky',\n }}\n badgeIcons={true}\n type={'selectable'}\n onChange={this.handleActionListChange}\n items={this.actions.map(this.removeUnusedPropertiesOnAction)}\n />,\n ];\n }\n\n private removeUnusedPropertiesOnAction(\n action: ListItem<Action>,\n ): ListItem<Action> {\n return {\n ...action,\n actions: [],\n };\n }\n\n private shouldShowDropDownContent() {\n if (this.isFull()) {\n return false;\n }\n\n return !!this.chipSetEditMode;\n }\n\n private getDropdownContent() {\n if (!this.shouldShowDropDownContent()) {\n return;\n }\n\n if (this.loading) {\n return this.renderSpinner();\n }\n\n if (!this.items?.length) {\n return this.renderEmptyMessage();\n }\n\n return this.renderListResult();\n }\n\n /**\n * Returns true if the picker is \"full\"\n * The picker is considered to be full if it has a value and only one is allowed\n *\n * @returns true if the picker is full\n */\n private isFull(): boolean {\n return !this.multiple && !!this.value;\n }\n\n private renderSpinner() {\n return (\n <div\n style={{\n width: '100%',\n display: 'flex',\n 'align-items': 'center',\n 'justify-content': 'center',\n padding: '1rem 0',\n }}\n >\n <limel-spinner limeBranded={false} />\n </div>\n );\n }\n\n private renderEmptyMessage() {\n if (!this.emptyResultMessage) {\n return;\n }\n\n const style = {\n color: 'rgb(var(--contrast-1100))',\n 'text-align': 'center',\n margin: '0.5rem 1rem',\n };\n\n return <p style={style}>{this.emptyResultMessage}</p>;\n }\n\n private renderListResult() {\n return (\n <limel-list\n badgeIcons={this.badgeIcons}\n onChange={this.handleListChange}\n onKeyDown={this.onListKeyDown}\n type=\"selectable\"\n items={this.items}\n />\n );\n }\n\n private onListKeyDown(event: KeyboardEvent) {\n const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);\n if (keyFound) {\n this.chipSet.setFocus();\n }\n }\n\n private renderPortal(content: any[] = []) {\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n return (\n <limel-portal\n visible={content.length > 0}\n containerId={this.portalId}\n inheritParentWidth={true}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-menu-surface\n open={content.length > 0}\n allowClicksElement={this.host}\n style={{\n '--mdc-menu-min-width': '100%',\n 'max-height': 'inherit',\n display: 'flex',\n }}\n onDismiss={this.handleCloseMenu}\n >\n {content}\n </limel-menu-surface>\n </limel-portal>\n );\n }\n\n /**\n * Check if a descendant still has focus. If not, reset text value and search result.\n */\n private handleStopEditAndBlur() {\n // In browsers where shadow DOM is not supported activeElement on shadowRoot will return null\n // However, document.activeElement will return the actual focused element instead of the outermost shadow host\n const element =\n this.host.shadowRoot.activeElement || document.activeElement;\n const portalElement = document.querySelector(`#${this.portalId}`);\n if (\n isDescendant(element as HTMLElement, this.host) ||\n isDescendant(element as HTMLElement, portalElement as HTMLElement)\n ) {\n return;\n }\n\n this.clearInputField();\n }\n\n /**\n * Input handler for the input field\n *\n * @param event - event\n */\n private async handleTextInput(event) {\n event.stopPropagation();\n\n const query = event.detail;\n this.textValue = query;\n\n this.debouncedSearch(query);\n // If the search-query is an empty string, bypass debouncing.\n if (query === '') {\n this.debouncedSearch.flush();\n }\n }\n\n private search = async (query: string) => {\n const timeoutId = setTimeout(() => {\n this.loading = true;\n });\n const searcher = this.searcher || this.defaultSearcher;\n const result = (await searcher(this.textValue)) as Array<\n ListItem<PickerValue>\n >;\n\n // If the search function resolves immediately,\n // the loading spinner will not be shown.\n clearTimeout(timeoutId);\n\n this.handleSearchResult(query, result);\n };\n\n private defaultSearcher: Searcher = async (\n query: string,\n ): Promise<ListItem[]> => {\n if (query === '') {\n return this.allItems.slice(0, DEFAULT_SEARCHER_MAX_RESULTS);\n }\n\n const filteredItems = this.allItems.filter((item) => {\n let searchText = item.text.toLowerCase();\n if (item.secondaryText) {\n searchText =\n searchText + ' ' + item.secondaryText.toLowerCase();\n }\n\n return searchText.includes(query.toLowerCase());\n });\n\n return filteredItems.slice(0, DEFAULT_SEARCHER_MAX_RESULTS);\n };\n\n /**\n * Change handler for the list\n *\n * @param event - event\n */\n private handleListChange(\n event: LimelListCustomEvent<ListItem<PickerValue>>,\n ) {\n event.stopPropagation();\n if (!this.value || this.value !== event.detail) {\n let newValue: ListItem<PickerValue> | Array<ListItem<PickerValue>> =\n event.detail;\n if (this.multiple) {\n newValue = [\n ...(this.value as Array<ListItem<PickerValue>>),\n event.detail,\n ];\n }\n\n this.change.emit(newValue);\n this.items = [];\n }\n\n if (this.multiple) {\n this.textValue = '';\n this.chipSet?.setFocus(true);\n }\n }\n\n /**\n * Change handler for the list\n *\n * @param event - event\n */\n private handleActionListChange(\n event: LimelListCustomEvent<ListItem<Action>>,\n ) {\n event.stopPropagation();\n if (!event.detail) {\n return;\n }\n\n this.action.emit(event.detail.value);\n this.items = [];\n }\n\n /**\n * Focus handler for the chip set\n * Prevent focus if the picker has a value and does not support multiple values\n */\n private handleInputFieldFocus() {\n const query = this.textValue;\n this.debouncedSearch(query);\n }\n\n private handleChange(event: LimelChipSetCustomEvent<Chip | Chip[]>) {\n event.stopPropagation();\n\n let newValue = null;\n if (this.multiple) {\n const chips = event.detail as Chip[];\n newValue = chips.map((chip) => {\n return (this.value as ListItem[]).find((item) => {\n const valueId = this.getValueId(item);\n\n return `${valueId}` === chip.id;\n });\n });\n }\n\n this.change.emit(newValue);\n }\n\n private handleInteract(event: LimelChipSetCustomEvent<Chip>) {\n event.stopPropagation();\n this.interact.emit(event.detail ? event.detail.value : event.detail);\n }\n\n /**\n * Key handler for the input field\n * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard\n *\n * @param event - event\n */\n private handleInputKeyDown(event: KeyboardEvent) {\n const isForwardTab =\n event.key === TAB &&\n !event.altKey &&\n !event.metaKey &&\n !event.shiftKey;\n const isUp = event.key === ARROW_UP;\n const isDown = event.key === ARROW_DOWN;\n\n if (!isForwardTab && !isUp && !isDown) {\n return;\n }\n\n const list = document.querySelector(` #${this.portalId} limel-list`);\n if (!list) {\n return;\n }\n\n event.preventDefault();\n\n if (isForwardTab || isDown) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:first-child',\n );\n listElement.focus();\n\n return;\n }\n\n if (isUp) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:last-child',\n );\n listElement.focus();\n }\n }\n\n /**\n * Key handler for the dropdown\n *\n * @param event - event\n */\n private handleDropdownKeyDown(event: KeyboardEvent) {\n const isEscape = event.key === ESCAPE;\n\n if (isEscape) {\n event.preventDefault();\n this.textValue = '';\n this.chipSet.setFocus(true);\n }\n }\n\n private handleSearchResult(query: string, result: ListItem[]) {\n if (query === this.textValue) {\n this.items = result;\n if (this.multiple) {\n const values = this.value as ListItem[];\n this.items = result.filter((item) => {\n return !values.includes(item);\n });\n }\n\n this.loading = false;\n }\n }\n\n private handleCloseMenu() {\n if (this.items.length > 0) {\n return;\n }\n\n this.clearInputField();\n }\n\n private clearInputField() {\n this.chipSet.emptyInput();\n this.textValue = '';\n this.handleSearchResult('', []);\n this.debouncedSearch.cancel();\n }\n}\n"]}
|
|
@@ -2,7 +2,7 @@ import { MDCFloatingLabel } from '@material/floating-label';
|
|
|
2
2
|
import { MDCSelectHelperText } from '@material/select/helper-text';
|
|
3
3
|
import { h, } from '@stencil/core';
|
|
4
4
|
import { isMobileDevice } from '../../util/device';
|
|
5
|
-
import { ENTER,
|
|
5
|
+
import { ENTER, SPACE } from '../../util/keycodes';
|
|
6
6
|
import { isMultiple } from '../../util/multiple';
|
|
7
7
|
import { createRandomString } from '../../util/random-string';
|
|
8
8
|
import { SelectTemplate, triggerIconColorWarning } from './select.template';
|
|
@@ -158,8 +158,8 @@ export class Select {
|
|
|
158
158
|
this.setTriggerFocus();
|
|
159
159
|
}
|
|
160
160
|
handleMenuTriggerKeyPress(event) {
|
|
161
|
-
const isEnter = event.key === ENTER
|
|
162
|
-
const isSpace = event.key === SPACE
|
|
161
|
+
const isEnter = event.key === ENTER;
|
|
162
|
+
const isSpace = event.key === SPACE;
|
|
163
163
|
if (!this.menuOpen && (isSpace || isEnter)) {
|
|
164
164
|
event.stopPropagation();
|
|
165
165
|
event.preventDefault();
|