@esri/calcite-components 1.0.0-next.419 → 1.0.0-next.421

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.
Files changed (63) hide show
  1. package/dist/calcite/calcite.esm.js +1 -1
  2. package/dist/calcite/{p-e65b6bfb.entry.js → p-46071f17.entry.js} +1 -1
  3. package/dist/calcite/p-5802a565.entry.js +5 -0
  4. package/dist/calcite/p-5c637131.entry.js +5 -0
  5. package/dist/calcite/p-b0827b8c.system.entry.js +5 -0
  6. package/dist/calcite/p-b2b6f712.js +5 -0
  7. package/dist/calcite/{p-dd460534.system.entry.js → p-b9a38a28.system.entry.js} +2 -2
  8. package/dist/calcite/{p-3b707a1c.system.entry.js → p-c2caeb2a.system.entry.js} +1 -1
  9. package/dist/calcite/p-e55c5bb4.entry.js +5 -0
  10. package/dist/calcite/{p-3cdee187.system.entry.js → p-eb3c084f.system.entry.js} +1 -1
  11. package/dist/calcite/p-ecc31b40.system.entry.js +5 -0
  12. package/dist/calcite/p-f68725d7.entry.js +5 -0
  13. package/dist/calcite/p-fa922721.system.js +5 -0
  14. package/dist/calcite/p-fe9380a0.system.js +1 -1
  15. package/dist/cjs/calcite-action-bar.cjs.entry.js +4 -11
  16. package/dist/cjs/calcite-action-pad.cjs.entry.js +3 -13
  17. package/dist/cjs/calcite-dropdown_3.cjs.entry.js +26 -23
  18. package/dist/cjs/calcite-pick-list_3.cjs.entry.js +6 -16
  19. package/dist/cjs/calcite-value-list_2.cjs.entry.js +1 -1
  20. package/dist/cjs/{resources-daf15d54.js → resources-e43fc9f3.js} +14 -1
  21. package/dist/collection/components/action-bar/action-bar.js +4 -11
  22. package/dist/collection/components/action-pad/action-pad.js +3 -15
  23. package/dist/collection/components/dropdown/dropdown.js +15 -18
  24. package/dist/collection/components/dropdown-item/dropdown-item.js +11 -5
  25. package/dist/collection/components/pick-list/shared-list-logic.js +2 -1
  26. package/dist/components/calcite-action-bar.js +4 -11
  27. package/dist/components/calcite-action-pad.js +3 -13
  28. package/dist/components/calcite-dropdown-item.js +11 -5
  29. package/dist/components/calcite-pick-list-group.js +1 -10
  30. package/dist/components/calcite-tip-manager.js +1 -1
  31. package/dist/components/calcite-tip.js +1 -1
  32. package/dist/components/dropdown.js +15 -18
  33. package/dist/components/resources4.js +5 -22
  34. package/dist/components/resources5.js +32 -0
  35. package/dist/components/shared-list-render.js +4 -3
  36. package/dist/custom-elements/index.js +44 -58
  37. package/dist/esm/calcite-action-bar.entry.js +4 -11
  38. package/dist/esm/calcite-action-pad.entry.js +3 -13
  39. package/dist/esm/calcite-dropdown_3.entry.js +26 -23
  40. package/dist/esm/calcite-pick-list_3.entry.js +1 -11
  41. package/dist/esm/calcite-value-list_2.entry.js +1 -1
  42. package/dist/esm/{resources-cbfcf4a3.js → resources-b5c3d9a7.js} +12 -2
  43. package/dist/esm-es5/calcite-action-bar.entry.js +1 -1
  44. package/dist/esm-es5/calcite-action-pad.entry.js +2 -2
  45. package/dist/esm-es5/calcite-dropdown_3.entry.js +1 -1
  46. package/dist/esm-es5/calcite-pick-list_3.entry.js +1 -1
  47. package/dist/esm-es5/calcite-value-list_2.entry.js +1 -1
  48. package/dist/esm-es5/resources-b5c3d9a7.js +5 -0
  49. package/dist/extras/docs-json.json +1 -1
  50. package/dist/types/components/action-bar/action-bar.d.ts +1 -1
  51. package/dist/types/components/action-pad/action-pad.d.ts +0 -1
  52. package/dist/types/components/dropdown-item/dropdown-item.d.ts +2 -0
  53. package/hydrate/index.js +44 -58
  54. package/package.json +1 -1
  55. package/dist/calcite/p-184049cb.entry.js +0 -5
  56. package/dist/calcite/p-1b1bca2d.entry.js +0 -5
  57. package/dist/calcite/p-4730df46.js +0 -5
  58. package/dist/calcite/p-57e0428a.system.entry.js +0 -5
  59. package/dist/calcite/p-7dfd6480.system.entry.js +0 -5
  60. package/dist/calcite/p-c33f47d5.system.js +0 -5
  61. package/dist/calcite/p-c5c42405.entry.js +0 -5
  62. package/dist/calcite/p-e5a7ca2a.entry.js +0 -5
  63. package/dist/esm-es5/resources-cbfcf4a3.js +0 -5
@@ -7,7 +7,7 @@
7
7
  Object.defineProperty(exports, '__esModule', { value: true });
8
8
 
9
9
  const index = require('./index-1af0efd3.js');
10
- const resources = require('./resources-daf15d54.js');
10
+ const resources = require('./resources-e43fc9f3.js');
11
11
  const observers = require('./observers-79bfb8bc.js');
12
12
  const interactive = require('./interactive-87406231.js');
13
13
  const dom = require('./dom-f3df220d.js');
@@ -142,16 +142,6 @@ const PickList = class {
142
142
  };
143
143
  PickList.style = pickListCss;
144
144
 
145
- const CSS = {
146
- heading: "heading",
147
- container: "container",
148
- indented: "container--indented"
149
- };
150
- const SLOTS = {
151
- parentItem: "parent-item"
152
- };
153
- const HEADING_LEVEL = 3;
154
-
155
145
  const pickListGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{margin-bottom:0.25rem;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-ui-text-2)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host(:last-child){margin-bottom:0px}.header{margin:0px;display:-ms-flexbox;display:flex;-ms-flex-line-pack:justify;align-content:space-between;-ms-flex-align:center;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{-ms-flex:1 1 auto;flex:1 1 auto;padding:0.5rem}h1.heading{font-size:var(--calcite-font-size-2);line-height:1.5rem}h2.heading{font-size:var(--calcite-font-size-1);line-height:1.5rem}h3.heading{font-size:var(--calcite-font-size-0);line-height:1.25rem}h4.heading,h5.heading{font-size:var(--calcite-font-size--1);line-height:1rem}h3.heading{margin-top:0.5rem;margin-bottom:0.5rem;margin-left:1rem;margin-right:1rem;font-size:var(--calcite-font-size--1);line-height:1.375;color:var(--calcite-ui-text-3)}.container--indented{-webkit-margin-start:1.5rem;margin-inline-start:1.5rem}";
156
146
 
157
147
  const PickListGroup = class {
@@ -177,16 +167,16 @@ const PickListGroup = class {
177
167
  render() {
178
168
  var _a;
179
169
  const { el, groupTitle, headingLevel } = this;
180
- const hasParentItem = dom.getSlotted(el, SLOTS.parentItem) !== null;
170
+ const hasParentItem = dom.getSlotted(el, resources.SLOTS$1.parentItem) !== null;
181
171
  const sectionClasses = {
182
- [CSS.container]: true,
183
- [CSS.indented]: hasParentItem
172
+ [resources.CSS$1.container]: true,
173
+ [resources.CSS$1.indented]: hasParentItem
184
174
  };
185
175
  const title = groupTitle;
186
176
  const parentLevel = (_a = el.closest("calcite-pick-list")) === null || _a === void 0 ? void 0 : _a.headingLevel;
187
177
  const relativeLevel = parentLevel ? Heading.constrainHeadingLevel(parentLevel + 1) : null;
188
- const level = headingLevel || relativeLevel || HEADING_LEVEL;
189
- return (index.h(index.Fragment, null, title ? (index.h(Heading.Heading, { class: CSS.heading, level: level }, title)) : null, index.h("slot", { name: SLOTS.parentItem }), index.h("section", { class: sectionClasses }, index.h("slot", null))));
178
+ const level = headingLevel || relativeLevel || resources.HEADING_LEVEL;
179
+ return (index.h(index.Fragment, null, title ? (index.h(Heading.Heading, { class: resources.CSS$1.heading, level: level }, title)) : null, index.h("slot", { name: resources.SLOTS$1.parentItem }), index.h("section", { class: sectionClasses }, index.h("slot", null))));
190
180
  }
191
181
  get el() { return index.getElement(this); }
192
182
  };
@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
8
8
 
9
9
  const index = require('./index-1af0efd3.js');
10
10
  const sortable_esm = require('./sortable.esm-d7a4560b.js');
11
- const resources = require('./resources-daf15d54.js');
11
+ const resources = require('./resources-e43fc9f3.js');
12
12
  const observers = require('./observers-79bfb8bc.js');
13
13
  const interactive = require('./interactive-87406231.js');
14
14
  const guid = require('./guid-b270f0db.js');
@@ -9,6 +9,16 @@ const array = require('./array-a5dedf5a.js');
9
9
  const debounce = require('./debounce-95979061.js');
10
10
  const index = require('./index-1af0efd3.js');
11
11
 
12
+ const CSS$2 = {
13
+ heading: "heading",
14
+ container: "container",
15
+ indented: "container--indented"
16
+ };
17
+ const SLOTS$2 = {
18
+ parentItem: "parent-item"
19
+ };
20
+ const HEADING_LEVEL = 3;
21
+
12
22
  function mutationObserverCallback() {
13
23
  this.setUpItems();
14
24
  this.setUpFilter();
@@ -144,7 +154,7 @@ function removeItem(event) {
144
154
  }
145
155
  const item = event.target;
146
156
  const selectedValues = this.selectedValues;
147
- if (item.parentElement.tagName === "CALCITE-PICK-LIST-GROUP") {
157
+ if (item.parentElement.tagName === "CALCITE-PICK-LIST-GROUP" && item.slot === SLOTS$2.parentItem) {
148
158
  item.parentElement.remove();
149
159
  Array.from(item.parentElement.children).forEach((item) => selectedValues.delete(item.value));
150
160
  }
@@ -360,9 +370,12 @@ const TEXT = {
360
370
  };
361
371
 
362
372
  exports.CSS = CSS;
373
+ exports.CSS$1 = CSS$2;
374
+ exports.HEADING_LEVEL = HEADING_LEVEL;
363
375
  exports.ICONS = ICONS;
364
376
  exports.List = List;
365
377
  exports.SLOTS = SLOTS;
378
+ exports.SLOTS$1 = SLOTS$2;
366
379
  exports.TEXT = TEXT;
367
380
  exports.calciteListFocusOutHandler = calciteListFocusOutHandler;
368
381
  exports.calciteListItemChangeHandler = calciteListItemChangeHandler;
@@ -98,16 +98,11 @@ export class ActionBar {
98
98
  this.expandToggleEl = el;
99
99
  };
100
100
  }
101
- expandHandler(expandDisabled) {
102
- if (!expandDisabled) {
103
- toggleChildActionText({ parent: this.el, expanded: this.expanded });
104
- }
101
+ expandHandler() {
105
102
  this.conditionallyOverflowActions();
106
103
  }
107
104
  expandedHandler(expanded) {
108
- if (!this.expandDisabled) {
109
- toggleChildActionText({ parent: this.el, expanded });
110
- }
105
+ toggleChildActionText({ parent: this.el, expanded });
111
106
  this.calciteActionBarToggle.emit();
112
107
  }
113
108
  overflowDisabledHandler(overflowActionsDisabled) {
@@ -125,10 +120,8 @@ export class ActionBar {
125
120
  }
126
121
  connectedCallback() {
127
122
  var _a, _b;
128
- const { el, expandDisabled, expanded } = this;
129
- if (!expandDisabled) {
130
- toggleChildActionText({ parent: el, expanded });
131
- }
123
+ const { el, expanded } = this;
124
+ toggleChildActionText({ parent: el, expanded });
132
125
  (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, { childList: true, subtree: true });
133
126
  if (!this.overflowActionsDisabled) {
134
127
  (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
@@ -52,15 +52,8 @@ export class ActionPad {
52
52
  this.expandToggleEl = el;
53
53
  };
54
54
  }
55
- expandHandler(expandDisabled) {
56
- if (!expandDisabled) {
57
- toggleChildActionText({ parent: this.el, expanded: this.expanded });
58
- }
59
- }
60
55
  expandedHandler(expanded) {
61
- if (!this.expandDisabled) {
62
- toggleChildActionText({ parent: this.el, expanded });
63
- }
56
+ toggleChildActionText({ parent: this.el, expanded });
64
57
  this.calciteActionPadToggle.emit();
65
58
  }
66
59
  // --------------------------------------------------------------------------
@@ -75,10 +68,8 @@ export class ActionPad {
75
68
  disconnectConditionalSlotComponent(this);
76
69
  }
77
70
  componentWillLoad() {
78
- const { el, expandDisabled, expanded } = this;
79
- if (!expandDisabled) {
80
- toggleChildActionText({ parent: el, expanded });
81
- }
71
+ const { el, expanded } = this;
72
+ toggleChildActionText({ parent: el, expanded });
82
73
  }
83
74
  // --------------------------------------------------------------------------
84
75
  //
@@ -300,9 +291,6 @@ export class ActionPad {
300
291
  }; }
301
292
  static get elementRef() { return "el"; }
302
293
  static get watchers() { return [{
303
- "propName": "expandDisabled",
304
- "methodName": "expandHandler"
305
- }, {
306
294
  "propName": "expanded",
307
295
  "methodName": "expandedHandler"
308
296
  }]; }
@@ -99,25 +99,22 @@ export class Dropdown {
99
99
  };
100
100
  this.keyDownHandler = (e) => {
101
101
  const target = e.target;
102
+ if (target !== this.referenceEl) {
103
+ return;
104
+ }
102
105
  const key = e.key;
103
- if (this.triggers.includes(target) ||
104
- this.triggers.some((trigger) => trigger.contains(target))) {
105
- const ignoredNodeTypes = ["BUTTON", "CALCITE-BUTTON", "CALCITE-ACTION"];
106
- if (ignoredNodeTypes.includes(target.nodeName)) {
107
- if (this.active && (key === "Escape" || (e.shiftKey && key === "Tab"))) {
108
- this.closeCalciteDropdown();
109
- }
110
- return;
111
- }
112
- switch (key) {
113
- case " ":
114
- case "Enter":
115
- this.openCalciteDropdown();
116
- break;
117
- case "Escape":
118
- this.closeCalciteDropdown();
119
- break;
120
- }
106
+ if (this.active && (key === "Escape" || (e.shiftKey && key === "Tab"))) {
107
+ this.closeCalciteDropdown();
108
+ return;
109
+ }
110
+ switch (key) {
111
+ case " ":
112
+ case "Enter":
113
+ this.openCalciteDropdown();
114
+ break;
115
+ case "Escape":
116
+ this.closeCalciteDropdown();
117
+ break;
121
118
  }
122
119
  };
123
120
  this.focusOnFirstActiveOrFirstItem = () => {
@@ -32,12 +32,11 @@ export class DropdownItem {
32
32
  // Lifecycle
33
33
  //
34
34
  //--------------------------------------------------------------------------
35
+ componentWillLoad() {
36
+ this.initialize();
37
+ }
35
38
  connectedCallback() {
36
- this.selectionMode = getElementProp(this.el, "selection-mode", "single");
37
- this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group");
38
- if (this.selectionMode === "none") {
39
- this.active = false;
40
- }
39
+ this.initialize();
41
40
  }
42
41
  render() {
43
42
  const scale = getElementProp(this.el, "scale", "m");
@@ -124,6 +123,13 @@ export class DropdownItem {
124
123
  // Private Methods
125
124
  //
126
125
  //--------------------------------------------------------------------------
126
+ initialize() {
127
+ this.selectionMode = getElementProp(this.el, "selection-mode", "single");
128
+ this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group");
129
+ if (this.selectionMode === "none") {
130
+ this.active = false;
131
+ }
132
+ }
127
133
  determineActiveItem() {
128
134
  switch (this.selectionMode) {
129
135
  case "multi":
@@ -5,6 +5,7 @@
5
5
  import { debounce } from "lodash-es";
6
6
  import { focusElement, getSlotted } from "../../utils/dom";
7
7
  import { getRoundRobinIndex } from "../../utils/array";
8
+ import { SLOTS } from "../pick-list-group/resources";
8
9
  export function mutationObserverCallback() {
9
10
  this.setUpItems();
10
11
  this.setUpFilter();
@@ -140,7 +141,7 @@ export function removeItem(event) {
140
141
  }
141
142
  const item = event.target;
142
143
  const selectedValues = this.selectedValues;
143
- if (item.parentElement.tagName === "CALCITE-PICK-LIST-GROUP") {
144
+ if (item.parentElement.tagName === "CALCITE-PICK-LIST-GROUP" && item.slot === SLOTS.parentItem) {
144
145
  item.parentElement.remove();
145
146
  Array.from(item.parentElement.children).forEach((item) => selectedValues.delete(item.value));
146
147
  }
@@ -117,16 +117,11 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
117
117
  this.expandToggleEl = el;
118
118
  };
119
119
  }
120
- expandHandler(expandDisabled) {
121
- if (!expandDisabled) {
122
- toggleChildActionText({ parent: this.el, expanded: this.expanded });
123
- }
120
+ expandHandler() {
124
121
  this.conditionallyOverflowActions();
125
122
  }
126
123
  expandedHandler(expanded) {
127
- if (!this.expandDisabled) {
128
- toggleChildActionText({ parent: this.el, expanded });
129
- }
124
+ toggleChildActionText({ parent: this.el, expanded });
130
125
  this.calciteActionBarToggle.emit();
131
126
  }
132
127
  overflowDisabledHandler(overflowActionsDisabled) {
@@ -144,10 +139,8 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
144
139
  }
145
140
  connectedCallback() {
146
141
  var _a, _b;
147
- const { el, expandDisabled, expanded } = this;
148
- if (!expandDisabled) {
149
- toggleChildActionText({ parent: el, expanded });
150
- }
142
+ const { el, expanded } = this;
143
+ toggleChildActionText({ parent: el, expanded });
151
144
  (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, { childList: true, subtree: true });
152
145
  if (!this.overflowActionsDisabled) {
153
146
  (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
@@ -73,15 +73,8 @@ const ActionPad = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
73
73
  this.expandToggleEl = el;
74
74
  };
75
75
  }
76
- expandHandler(expandDisabled) {
77
- if (!expandDisabled) {
78
- toggleChildActionText({ parent: this.el, expanded: this.expanded });
79
- }
80
- }
81
76
  expandedHandler(expanded) {
82
- if (!this.expandDisabled) {
83
- toggleChildActionText({ parent: this.el, expanded });
84
- }
77
+ toggleChildActionText({ parent: this.el, expanded });
85
78
  this.calciteActionPadToggle.emit();
86
79
  }
87
80
  // --------------------------------------------------------------------------
@@ -96,10 +89,8 @@ const ActionPad = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
96
89
  disconnectConditionalSlotComponent(this);
97
90
  }
98
91
  componentWillLoad() {
99
- const { el, expandDisabled, expanded } = this;
100
- if (!expandDisabled) {
101
- toggleChildActionText({ parent: el, expanded });
102
- }
92
+ const { el, expanded } = this;
93
+ toggleChildActionText({ parent: el, expanded });
103
94
  }
104
95
  // --------------------------------------------------------------------------
105
96
  //
@@ -132,7 +123,6 @@ const ActionPad = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
132
123
  }
133
124
  get el() { return this; }
134
125
  static get watchers() { return {
135
- "expandDisabled": ["expandHandler"],
136
126
  "expanded": ["expandedHandler"]
137
127
  }; }
138
128
  static get style() { return actionPadCss; }
@@ -48,12 +48,11 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
48
48
  // Lifecycle
49
49
  //
50
50
  //--------------------------------------------------------------------------
51
+ componentWillLoad() {
52
+ this.initialize();
53
+ }
51
54
  connectedCallback() {
52
- this.selectionMode = getElementProp(this.el, "selection-mode", "single");
53
- this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group");
54
- if (this.selectionMode === "none") {
55
- this.active = false;
56
- }
55
+ this.initialize();
57
56
  }
58
57
  render() {
59
58
  const scale = getElementProp(this.el, "scale", "m");
@@ -136,6 +135,13 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
136
135
  // Private Methods
137
136
  //
138
137
  //--------------------------------------------------------------------------
138
+ initialize() {
139
+ this.selectionMode = getElementProp(this.el, "selection-mode", "single");
140
+ this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group");
141
+ if (this.selectionMode === "none") {
142
+ this.active = false;
143
+ }
144
+ }
139
145
  determineActiveItem() {
140
146
  switch (this.selectionMode) {
141
147
  case "multi":
@@ -3,20 +3,11 @@
3
3
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
4
4
  */
5
5
  import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
6
+ import { C as CSS, S as SLOTS, H as HEADING_LEVEL } from './resources4.js';
6
7
  import { b as getSlotted } from './dom.js';
7
8
  import { H as Heading, c as constrainHeadingLevel } from './Heading.js';
8
9
  import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
9
10
 
10
- const CSS = {
11
- heading: "heading",
12
- container: "container",
13
- indented: "container--indented"
14
- };
15
- const SLOTS = {
16
- parentItem: "parent-item"
17
- };
18
- const HEADING_LEVEL = 3;
19
-
20
11
  const pickListGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{margin-bottom:0.25rem;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-ui-text-2)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host(:last-child){margin-bottom:0px}.header{margin:0px;display:-ms-flexbox;display:flex;-ms-flex-line-pack:justify;align-content:space-between;-ms-flex-align:center;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{-ms-flex:1 1 auto;flex:1 1 auto;padding:0.5rem}h1.heading{font-size:var(--calcite-font-size-2);line-height:1.5rem}h2.heading{font-size:var(--calcite-font-size-1);line-height:1.5rem}h3.heading{font-size:var(--calcite-font-size-0);line-height:1.25rem}h4.heading,h5.heading{font-size:var(--calcite-font-size--1);line-height:1rem}h3.heading{margin-top:0.5rem;margin-bottom:0.5rem;margin-left:1rem;margin-right:1rem;font-size:var(--calcite-font-size--1);line-height:1.375;color:var(--calcite-ui-text-3)}.container--indented{-webkit-margin-start:1.5rem;margin-inline-start:1.5rem}";
21
12
 
22
13
  const PickListGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -3,7 +3,7 @@
3
3
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
4
4
  */
5
5
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
6
- import { T as TEXT, C as CSS, I as ICONS, H as HEADING_LEVEL } from './resources4.js';
6
+ import { T as TEXT, C as CSS, I as ICONS, H as HEADING_LEVEL } from './resources5.js';
7
7
  import { a as getElementDir } from './dom.js';
8
8
  import { H as Heading } from './Heading.js';
9
9
  import { c as createObserver } from './observers.js';
@@ -3,7 +3,7 @@
3
3
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
4
4
  */
5
5
  import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
6
- import { H as HEADING_LEVEL$1 } from './resources4.js';
6
+ import { H as HEADING_LEVEL$1 } from './resources5.js';
7
7
  import { b as getSlotted } from './dom.js';
8
8
  import { H as Heading, c as constrainHeadingLevel } from './Heading.js';
9
9
  import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
@@ -107,25 +107,22 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
107
107
  };
108
108
  this.keyDownHandler = (e) => {
109
109
  const target = e.target;
110
+ if (target !== this.referenceEl) {
111
+ return;
112
+ }
110
113
  const key = e.key;
111
- if (this.triggers.includes(target) ||
112
- this.triggers.some((trigger) => trigger.contains(target))) {
113
- const ignoredNodeTypes = ["BUTTON", "CALCITE-BUTTON", "CALCITE-ACTION"];
114
- if (ignoredNodeTypes.includes(target.nodeName)) {
115
- if (this.active && (key === "Escape" || (e.shiftKey && key === "Tab"))) {
116
- this.closeCalciteDropdown();
117
- }
118
- return;
119
- }
120
- switch (key) {
121
- case " ":
122
- case "Enter":
123
- this.openCalciteDropdown();
124
- break;
125
- case "Escape":
126
- this.closeCalciteDropdown();
127
- break;
128
- }
114
+ if (this.active && (key === "Escape" || (e.shiftKey && key === "Tab"))) {
115
+ this.closeCalciteDropdown();
116
+ return;
117
+ }
118
+ switch (key) {
119
+ case " ":
120
+ case "Enter":
121
+ this.openCalciteDropdown();
122
+ break;
123
+ case "Escape":
124
+ this.closeCalciteDropdown();
125
+ break;
129
126
  }
130
127
  };
131
128
  this.focusOnFirstActiveOrFirstItem = () => {
@@ -3,30 +3,13 @@
3
3
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
4
4
  */
5
5
  const CSS = {
6
- header: "header",
7
6
  heading: "heading",
8
- close: "close",
9
7
  container: "container",
10
- tipContainer: "tip-container",
11
- tipContainerAdvancing: "tip-container--advancing",
12
- tipContainerRetreating: "tip-container--retreating",
13
- pagination: "pagination",
14
- pagePosition: "page-position",
15
- pageNext: "page-next",
16
- pagePrevious: "page-previous"
8
+ indented: "container--indented"
17
9
  };
18
- const ICONS = {
19
- chevronLeft: "chevron-left",
20
- chevronRight: "chevron-right",
21
- close: "x"
10
+ const SLOTS = {
11
+ parentItem: "parent-item"
22
12
  };
23
- const TEXT = {
24
- defaultGroupTitle: "Tips",
25
- defaultPaginationLabel: "Tip",
26
- close: "Close",
27
- previous: "Previous",
28
- next: "Next"
29
- };
30
- const HEADING_LEVEL = 2;
13
+ const HEADING_LEVEL = 3;
31
14
 
32
- export { CSS as C, HEADING_LEVEL as H, ICONS as I, TEXT as T };
15
+ export { CSS as C, HEADING_LEVEL as H, SLOTS as S };
@@ -0,0 +1,32 @@
1
+ /*!
2
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
3
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
4
+ */
5
+ const CSS = {
6
+ header: "header",
7
+ heading: "heading",
8
+ close: "close",
9
+ container: "container",
10
+ tipContainer: "tip-container",
11
+ tipContainerAdvancing: "tip-container--advancing",
12
+ tipContainerRetreating: "tip-container--retreating",
13
+ pagination: "pagination",
14
+ pagePosition: "page-position",
15
+ pageNext: "page-next",
16
+ pagePrevious: "page-previous"
17
+ };
18
+ const ICONS = {
19
+ chevronLeft: "chevron-left",
20
+ chevronRight: "chevron-right",
21
+ close: "x"
22
+ };
23
+ const TEXT = {
24
+ defaultGroupTitle: "Tips",
25
+ defaultPaginationLabel: "Tip",
26
+ close: "Close",
27
+ previous: "Previous",
28
+ next: "Next"
29
+ };
30
+ const HEADING_LEVEL = 2;
31
+
32
+ export { CSS as C, HEADING_LEVEL as H, ICONS as I, TEXT as T };
@@ -4,9 +4,10 @@
4
4
  */
5
5
  import { f as focusElement, b as getSlotted } from './dom.js';
6
6
  import { g as getRoundRobinIndex } from './array.js';
7
+ import { S as SLOTS } from './resources4.js';
7
8
  import { d as debounce } from './debounce.js';
8
9
  import { h, Host } from '@stencil/core/internal/client';
9
- import { C as CSS, S as SLOTS } from './resources3.js';
10
+ import { C as CSS, S as SLOTS$1 } from './resources3.js';
10
11
 
11
12
  function mutationObserverCallback() {
12
13
  this.setUpItems();
@@ -143,7 +144,7 @@ function removeItem(event) {
143
144
  }
144
145
  const item = event.target;
145
146
  const selectedValues = this.selectedValues;
146
- if (item.parentElement.tagName === "CALCITE-PICK-LIST-GROUP") {
147
+ if (item.parentElement.tagName === "CALCITE-PICK-LIST-GROUP" && item.slot === SLOTS.parentItem) {
147
148
  item.parentElement.remove();
148
149
  Array.from(item.parentElement.children).forEach((item) => selectedValues.delete(item.value));
149
150
  }
@@ -313,7 +314,7 @@ const List = (_a) => {
313
314
  h("section", null,
314
315
  h("header", { class: { [CSS.sticky]: true } },
315
316
  filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
316
- h("slot", { name: SLOTS.menuActions })),
317
+ h("slot", { name: SLOTS$1.menuActions })),
317
318
  loading ? h("calcite-scrim", { loading: loading }) : null,
318
319
  defaultSlot)));
319
320
  };