@esri/calcite-app-components - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

CHANGELOG.md

@@ -6,2 +6,9 @@ # Changelog
 
+## [v2.2.0]
+
+### Features
+
+- Tip manager pagination supports arrow keys
+- New Component: [PickList](./src/components/calcite-pick-list/readme.md)
+
 ## [v2.1.0]
@@ -8,0 +15,0 @@

dist/calcite-app/calcite-app.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as t}from"./p-67742728.js";e().then(e=>t([["p-nsvt5khs",[[1,"calcite-action-bar",{expand:[516],expanded:[516],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],layout:[513],theme:[513]}],[1,"calcite-action-pad",{placement:[513],positionElement:[16],theme:[513],offsetTop:[32]}],[1,"calcite-action-group"],[1,"calcite-action",{active:[516],compact:[516],disabled:[516],indicator:[516],label:[1],text:[1],textEnabled:[516,"text-enabled"],theme:[513]}]]],["p-mgpykodv",[[1,"calcite-tip",{storageId:[1,"storage-id"],nonDismissible:[516,"non-dismissible"],heading:[1],textClose:[1,"text-close"],textThumbnail:[1,"text-thumbnail"],thumbnail:[1],theme:[513],dismissed:[32]}],[1,"calcite-tip-manager",{textClose:[1,"text-close"],textDefaultTitle:[513,"text-default-title"],textNext:[1,"text-next"],textPaginationLabel:[513,"text-pagination-label"],textPrevious:[1,"text-previous"],theme:[513],selectedIndex:[32],tips:[32],total:[32],direction:[32],nextTip:[64],previousTip:[64]}],[1,"calcite-tip-group",{textGroupTitle:[513,"text-group-title"]}]]],["p-go9ye1u1",[[1,"calcite-shell-floating-panel",{placement:[513],heading:[513],positionElement:[16],offsetTop:[32]}],[1,"calcite-shell",{theme:[513]}],[1,"calcite-shell-panel",{collapsed:[516],layout:[513]}]]],["p-kjrwigch",[[1,"calcite-block-section",{open:[516],text:[1],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"]}],[1,"calcite-block",{collapsible:[4],heading:[1],open:[516],summary:[1],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],theme:[513]}]]],["p-bwzj90mj",[[1,"calcite-flow-item",{heading:[1],menuOpen:[516,"menu-open"],showBackButton:[4,"show-back-button"],textBack:[1,"text-back"],textClose:[1,"text-close"],textOpen:[1,"text-open"],theme:[513]}],[1,"calcite-flow",{theme:[513],flowCount:[32],flowDirection:[32],flows:[32],back:[64]}]]]],e));
+import{p as e,b as t}from"./p-85ed7b55.js";e().then(e=>t([["p-1dafd94e",[[1,"calcite-tip",{storageId:[1,"storage-id"],nonDismissible:[516,"non-dismissible"],heading:[1],textClose:[1,"text-close"],textThumbnail:[1,"text-thumbnail"],thumbnail:[1],theme:[513],dismissed:[32]}],[1,"calcite-tip-manager",{textClose:[1,"text-close"],textDefaultTitle:[513,"text-default-title"],textNext:[1,"text-next"],textPaginationLabel:[513,"text-pagination-label"],textPrevious:[1,"text-previous"],theme:[513],tabindex:[514],selectedIndex:[32],tips:[32],total:[32],direction:[32],nextTip:[64],previousTip:[64]}],[1,"calcite-tip-group",{textGroupTitle:[513,"text-group-title"]}]]],["p-upyvtijc",[[1,"calcite-shell-floating-panel",{placement:[513],heading:[513],positionElement:[16],offsetTop:[32]}],[1,"calcite-shell",{theme:[513]}],[1,"calcite-shell-panel",{collapsed:[516],layout:[513]}]]],["p-ovfyqzaq",[[1,"calcite-block-section",{open:[516],text:[1],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"]}],[1,"calcite-block",{collapsible:[4],heading:[1],open:[516],summary:[1],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],theme:[513]}]]],["p-vw9kus3k",[[1,"calcite-flow-item",{heading:[1],menuOpen:[516,"menu-open"],showBackButton:[4,"show-back-button"],textBack:[1,"text-back"],textClose:[1,"text-close"],textOpen:[1,"text-open"],theme:[513]}],[1,"calcite-flow",{theme:[513],flowCount:[32],flowDirection:[32],flows:[32],back:[64]}]]],["p-iuqe53hd",[[1,"calcite-pick-list",{dragEnabled:[516,"drag-enabled"],mode:[513],multiple:[516],textHeading:[513,"text-heading"],selectedValues:[32],getSelectedItems:[64]},[[0,"calcitePickListItemSelectedChange","calcitePickListItemSelectedChangeHandler"]]]]],["p-9uszewx7",[[1,"calcite-pick-list-group",{textGroupTitle:[513,"text-group-title"]}]]],["p-kt8437bc",[[1,"calcite-pick-list-item",{editing:[516],selected:[4],icon:[513],textHeading:[513,"text-heading"],textDescription:[513,"text-description"],value:[513],isSelected:[32],toggleSelected:[64]}]]],["p-cbej2o1n",[[1,"calcite-action-bar",{expand:[516],expanded:[516],textExpand:[1,"text-expand"],textCollapse:[1,"text-collapse"],layout:[513],theme:[513]}],[1,"calcite-action-pad",{placement:[513],positionElement:[16],theme:[513],offsetTop:[32]}],[1,"calcite-action-group"],[1,"calcite-action",{active:[516],compact:[516],disabled:[516],indicator:[516],label:[1],text:[1],textEnabled:[516,"text-enabled"],theme:[513]}]]]],e));

dist/cjs/calcite-action_4.cjs.entry.js

@@ -5,4 +5,4 @@ 'use strict';
 
-const core = require('./core-c4e1edd0.js');
-const dom = require('./dom-446efbe5.js');
+const core = require('./core-aae888b4.js');
+const dom = require('./dom-1f3cadbc.js');
 const index = require('./index-c5330c81.js');
@@ -9,0 +9,0 @@ const resources = require('./resources-2dddd93c.js');

dist/cjs/calcite-app.cjs.js

 'use strict';
 
-const core = require('./core-c4e1edd0.js');
+const core = require('./core-aae888b4.js');
 
 core.patchBrowser().then(options => {
-  return core.bootstrapLazy([["calcite-action_4.cjs",[[1,"calcite-action-bar",{"expand":[516],"expanded":[516],"textExpand":[1,"text-expand"],"textCollapse":[1,"text-collapse"],"layout":[513],"theme":[513]}],[1,"calcite-action-pad",{"placement":[513],"positionElement":[16],"theme":[513],"offsetTop":[32]}],[1,"calcite-action-group"],[1,"calcite-action",{"active":[516],"compact":[516],"disabled":[516],"indicator":[516],"label":[1],"text":[1],"textEnabled":[516,"text-enabled"],"theme":[513]}]]],["calcite-tip_3.cjs",[[1,"calcite-tip",{"storageId":[1,"storage-id"],"nonDismissible":[516,"non-dismissible"],"heading":[1],"textClose":[1,"text-close"],"textThumbnail":[1,"text-thumbnail"],"thumbnail":[1],"theme":[513],"dismissed":[32]}],[1,"calcite-tip-manager",{"textClose":[1,"text-close"],"textDefaultTitle":[513,"text-default-title"],"textNext":[1,"text-next"],"textPaginationLabel":[513,"text-pagination-label"],"textPrevious":[1,"text-previous"],"theme":[513],"selectedIndex":[32],"tips":[32],"total":[32],"direction":[32],"nextTip":[64],"previousTip":[64]}],[1,"calcite-tip-group",{"textGroupTitle":[513,"text-group-title"]}]]],["calcite-shell_3.cjs",[[1,"calcite-shell-floating-panel",{"placement":[513],"heading":[513],"positionElement":[16],"offsetTop":[32]}],[1,"calcite-shell",{"theme":[513]}],[1,"calcite-shell-panel",{"collapsed":[516],"layout":[513]}]]],["calcite-block_2.cjs",[[1,"calcite-block-section",{"open":[516],"text":[1],"textExpand":[1,"text-expand"],"textCollapse":[1,"text-collapse"]}],[1,"calcite-block",{"collapsible":[4],"heading":[1],"open":[516],"summary":[1],"textExpand":[1,"text-expand"],"textCollapse":[1,"text-collapse"],"theme":[513]}]]],["calcite-flow_2.cjs",[[1,"calcite-flow-item",{"heading":[1],"menuOpen":[516,"menu-open"],"showBackButton":[4,"show-back-button"],"textBack":[1,"text-back"],"textClose":[1,"text-close"],"textOpen":[1,"text-open"],"theme":[513]}],[1,"calcite-flow",{"theme":[513],"flowCount":[32],"flowDirection":[32],"flows":[32],"back":[64]}]]]], options);
+  return core.bootstrapLazy([["calcite-tip_3.cjs",[[1,"calcite-tip",{"storageId":[1,"storage-id"],"nonDismissible":[516,"non-dismissible"],"heading":[1],"textClose":[1,"text-close"],"textThumbnail":[1,"text-thumbnail"],"thumbnail":[1],"theme":[513],"dismissed":[32]}],[1,"calcite-tip-manager",{"textClose":[1,"text-close"],"textDefaultTitle":[513,"text-default-title"],"textNext":[1,"text-next"],"textPaginationLabel":[513,"text-pagination-label"],"textPrevious":[1,"text-previous"],"theme":[513],"tabindex":[514],"selectedIndex":[32],"tips":[32],"total":[32],"direction":[32],"nextTip":[64],"previousTip":[64]}],[1,"calcite-tip-group",{"textGroupTitle":[513,"text-group-title"]}]]],["calcite-shell_3.cjs",[[1,"calcite-shell-floating-panel",{"placement":[513],"heading":[513],"positionElement":[16],"offsetTop":[32]}],[1,"calcite-shell",{"theme":[513]}],[1,"calcite-shell-panel",{"collapsed":[516],"layout":[513]}]]],["calcite-block_2.cjs",[[1,"calcite-block-section",{"open":[516],"text":[1],"textExpand":[1,"text-expand"],"textCollapse":[1,"text-collapse"]}],[1,"calcite-block",{"collapsible":[4],"heading":[1],"open":[516],"summary":[1],"textExpand":[1,"text-expand"],"textCollapse":[1,"text-collapse"],"theme":[513]}]]],["calcite-flow_2.cjs",[[1,"calcite-flow-item",{"heading":[1],"menuOpen":[516,"menu-open"],"showBackButton":[4,"show-back-button"],"textBack":[1,"text-back"],"textClose":[1,"text-close"],"textOpen":[1,"text-open"],"theme":[513]}],[1,"calcite-flow",{"theme":[513],"flowCount":[32],"flowDirection":[32],"flows":[32],"back":[64]}]]],["calcite-pick-list.cjs",[[1,"calcite-pick-list",{"dragEnabled":[516,"drag-enabled"],"mode":[513],"multiple":[516],"textHeading":[513,"text-heading"],"selectedValues":[32],"getSelectedItems":[64]},[[0,"calcitePickListItemSelectedChange","calcitePickListItemSelectedChangeHandler"]]]]],["calcite-pick-list-group.cjs",[[1,"calcite-pick-list-group",{"textGroupTitle":[513,"text-group-title"]}]]],["calcite-pick-list-item.cjs",[[1,"calcite-pick-list-item",{"editing":[516],"selected":[4],"icon":[513],"textHeading":[513,"text-heading"],"textDescription":[513,"text-description"],"value":[513],"isSelected":[32],"toggleSelected":[64]}]]],["calcite-action_4.cjs",[[1,"calcite-action-bar",{"expand":[516],"expanded":[516],"textExpand":[1,"text-expand"],"textCollapse":[1,"text-collapse"],"layout":[513],"theme":[513]}],[1,"calcite-action-pad",{"placement":[513],"positionElement":[16],"theme":[513],"offsetTop":[32]}],[1,"calcite-action-group"],[1,"calcite-action",{"active":[516],"compact":[516],"disabled":[516],"indicator":[516],"label":[1],"text":[1],"textEnabled":[516,"text-enabled"],"theme":[513]}]]]], options);
 });

dist/cjs/calcite-block_2.cjs.entry.js

@@ -5,4 +5,4 @@ 'use strict';
 
-const core = require('./core-c4e1edd0.js');
-const dom = require('./dom-446efbe5.js');
+const core = require('./core-aae888b4.js');
+const dom = require('./dom-1f3cadbc.js');
 
@@ -9,0 +9,0 @@ const CSS = {

dist/cjs/calcite-flow_2.cjs.entry.js

@@ -5,4 +5,4 @@ 'use strict';
 
-const core = require('./core-c4e1edd0.js');
-const dom = require('./dom-446efbe5.js');
+const core = require('./core-aae888b4.js');
+const dom = require('./dom-1f3cadbc.js');
 const index = require('./index-c5330c81.js');
@@ -9,0 +9,0 @@ const resources = require('./resources-2dddd93c.js');

dist/cjs/calcite-shell_3.cjs.entry.js

@@ -5,4 +5,4 @@ 'use strict';
 
-const core = require('./core-c4e1edd0.js');
-const dom = require('./dom-446efbe5.js');
+const core = require('./core-aae888b4.js');
+const dom = require('./dom-1f3cadbc.js');
 const index = require('./index-c5330c81.js');
@@ -9,0 +9,0 @@ const resources = require('./resources-2dddd93c.js');

dist/cjs/calcite-tip_3.cjs.entry.js

@@ -5,4 +5,4 @@ 'use strict';
 
-const core = require('./core-c4e1edd0.js');
-const dom = require('./dom-446efbe5.js');
+const core = require('./core-aae888b4.js');
+const dom = require('./dom-1f3cadbc.js');
 const index = require('./index-c5330c81.js');
@@ -143,2 +143,3 @@
         this.textPrevious = TEXT$1.previous;
+        this.tabindex = 0;
         this.groupTitle = this.textDefaultTitle;
@@ -157,2 +158,24 @@ this.observer = new MutationObserver(() => this.setUpTips());
         };
+        this.tipManagerKeyDownHandler = (event) => {
+            switch (event.key) {
+                case "ArrowUp":
+                    event.preventDefault();
+                case "ArrowRight":
+                    this.nextTip();
+                    break;
+                case "ArrowDown":
+                    event.preventDefault();
+                case "ArrowLeft":
+                    this.previousTip();
+                    break;
+                case "Home":
+                    event.preventDefault();
+                    this.selectedIndex = 0;
+                    break;
+                case "End":
+                    event.preventDefault();
+                    this.selectedIndex = this.total - 1;
+                    break;
+            }
+        };
         this.calciteTipManagerClose = core.createEvent(this, "calciteTipManagerClose", 7);
@@ -238,3 +261,3 @@ }
         }
-        return (core.h(core.Host, null, core.h("header", { class: CSS$1.header }, core.h("h2", { class: CSS$1.heading }, this.groupTitle), core.h("calcite-action", { text: this.textClose, onClick: this.hideTipManager, class: CSS$1.close }, core.h(dom.CalciteIcon, { size: "16", path: dom.x16 }))), core.h("div", { class: index.classnames(CSS$1.tipContainer, this.direction), key: this.selectedIndex }, core.h("slot", null)), this.renderPagination()));
+        return (core.h(core.Host, { onKeydown: this.tipManagerKeyDownHandler }, core.h("header", { class: CSS$1.header }, core.h("h2", { class: CSS$1.heading }, this.groupTitle), core.h("calcite-action", { text: this.textClose, onClick: this.hideTipManager, class: CSS$1.close }, core.h(dom.CalciteIcon, { size: "16", path: dom.x16 }))), core.h("div", { class: index.classnames(CSS$1.tipContainer, this.direction), key: this.selectedIndex }, core.h("slot", null)), this.renderPagination()));
     }
@@ -241,0 +264,0 @@ get el() { return core.getElement(this); }

dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ 'use strict';
 
-const core = require('./core-c4e1edd0.js');
+const core = require('./core-aae888b4.js');
 
 const defineCustomElements = (win, options) => {
   return core.patchEsm().then(() => {
-    core.bootstrapLazy([["calcite-action_4.cjs",[[1,"calcite-action-bar",{"expand":[516],"expanded":[516],"textExpand":[1,"text-expand"],"textCollapse":[1,"text-collapse"],"layout":[513],"theme":[513]}],[1,"calcite-action-pad",{"placement":[513],"positionElement":[16],"theme":[513],"offsetTop":[32]}],[1,"calcite-action-group"],[1,"calcite-action",{"active":[516],"compact":[516],"disabled":[516],"indicator":[516],"label":[1],"text":[1],"textEnabled":[516,"text-enabled"],"theme":[513]}]]],["calcite-tip_3.cjs",[[1,"calcite-tip",{"storageId":[1,"storage-id"],"nonDismissible":[516,"non-dismissible"],"heading":[1],"textClose":[1,"text-close"],"textThumbnail":[1,"text-thumbnail"],"thumbnail":[1],"theme":[513],"dismissed":[32]}],[1,"calcite-tip-manager",{"textClose":[1,"text-close"],"textDefaultTitle":[513,"text-default-title"],"textNext":[1,"text-next"],"textPaginationLabel":[513,"text-pagination-label"],"textPrevious":[1,"text-previous"],"theme":[513],"selectedIndex":[32],"tips":[32],"total":[32],"direction":[32],"nextTip":[64],"previousTip":[64]}],[1,"calcite-tip-group",{"textGroupTitle":[513,"text-group-title"]}]]],["calcite-shell_3.cjs",[[1,"calcite-shell-floating-panel",{"placement":[513],"heading":[513],"positionElement":[16],"offsetTop":[32]}],[1,"calcite-shell",{"theme":[513]}],[1,"calcite-shell-panel",{"collapsed":[516],"layout":[513]}]]],["calcite-block_2.cjs",[[1,"calcite-block-section",{"open":[516],"text":[1],"textExpand":[1,"text-expand"],"textCollapse":[1,"text-collapse"]}],[1,"calcite-block",{"collapsible":[4],"heading":[1],"open":[516],"summary":[1],"textExpand":[1,"text-expand"],"textCollapse":[1,"text-collapse"],"theme":[513]}]]],["calcite-flow_2.cjs",[[1,"calcite-flow-item",{"heading":[1],"menuOpen":[516,"menu-open"],"showBackButton":[4,"show-back-button"],"textBack":[1,"text-back"],"textClose":[1,"text-close"],"textOpen":[1,"text-open"],"theme":[513]}],[1,"calcite-flow",{"theme":[513],"flowCount":[32],"flowDirection":[32],"flows":[32],"back":[64]}]]]], options);
+    core.bootstrapLazy([["calcite-tip_3.cjs",[[1,"calcite-tip",{"storageId":[1,"storage-id"],"nonDismissible":[516,"non-dismissible"],"heading":[1],"textClose":[1,"text-close"],"textThumbnail":[1,"text-thumbnail"],"thumbnail":[1],"theme":[513],"dismissed":[32]}],[1,"calcite-tip-manager",{"textClose":[1,"text-close"],"textDefaultTitle":[513,"text-default-title"],"textNext":[1,"text-next"],"textPaginationLabel":[513,"text-pagination-label"],"textPrevious":[1,"text-previous"],"theme":[513],"tabindex":[514],"selectedIndex":[32],"tips":[32],"total":[32],"direction":[32],"nextTip":[64],"previousTip":[64]}],[1,"calcite-tip-group",{"textGroupTitle":[513,"text-group-title"]}]]],["calcite-shell_3.cjs",[[1,"calcite-shell-floating-panel",{"placement":[513],"heading":[513],"positionElement":[16],"offsetTop":[32]}],[1,"calcite-shell",{"theme":[513]}],[1,"calcite-shell-panel",{"collapsed":[516],"layout":[513]}]]],["calcite-block_2.cjs",[[1,"calcite-block-section",{"open":[516],"text":[1],"textExpand":[1,"text-expand"],"textCollapse":[1,"text-collapse"]}],[1,"calcite-block",{"collapsible":[4],"heading":[1],"open":[516],"summary":[1],"textExpand":[1,"text-expand"],"textCollapse":[1,"text-collapse"],"theme":[513]}]]],["calcite-flow_2.cjs",[[1,"calcite-flow-item",{"heading":[1],"menuOpen":[516,"menu-open"],"showBackButton":[4,"show-back-button"],"textBack":[1,"text-back"],"textClose":[1,"text-close"],"textOpen":[1,"text-open"],"theme":[513]}],[1,"calcite-flow",{"theme":[513],"flowCount":[32],"flowDirection":[32],"flows":[32],"back":[64]}]]],["calcite-pick-list.cjs",[[1,"calcite-pick-list",{"dragEnabled":[516,"drag-enabled"],"mode":[513],"multiple":[516],"textHeading":[513,"text-heading"],"selectedValues":[32],"getSelectedItems":[64]},[[0,"calcitePickListItemSelectedChange","calcitePickListItemSelectedChangeHandler"]]]]],["calcite-pick-list-group.cjs",[[1,"calcite-pick-list-group",{"textGroupTitle":[513,"text-group-title"]}]]],["calcite-pick-list-item.cjs",[[1,"calcite-pick-list-item",{"editing":[516],"selected":[4],"icon":[513],"textHeading":[513,"text-heading"],"textDescription":[513,"text-description"],"value":[513],"isSelected":[32],"toggleSelected":[64]}]]],["calcite-action_4.cjs",[[1,"calcite-action-bar",{"expand":[516],"expanded":[516],"textExpand":[1,"text-expand"],"textCollapse":[1,"text-collapse"],"layout":[513],"theme":[513]}],[1,"calcite-action-pad",{"placement":[513],"positionElement":[16],"theme":[513],"offsetTop":[32]}],[1,"calcite-action-group"],[1,"calcite-action",{"active":[516],"compact":[516],"disabled":[516],"indicator":[516],"label":[1],"text":[1],"textEnabled":[516,"text-enabled"],"theme":[513]}]]]], options);
   });
@@ -12,0 +12,0 @@ };

dist/collection/calcite-tip-manager/calcite-tip-manager.js

@@ -34,2 +34,3 @@ import { Host, h } from "@stencil/core";
         this.textPrevious = TEXT.previous;
+        this.tabindex = 0;
         this.groupTitle = this.textDefaultTitle;
@@ -48,2 +49,24 @@ this.observer = new MutationObserver(() => this.setUpTips());
         };
+        this.tipManagerKeyDownHandler = (event) => {
+            switch (event.key) {
+                case "ArrowUp":
+                    event.preventDefault();
+                case "ArrowRight":
+                    this.nextTip();
+                    break;
+                case "ArrowDown":
+                    event.preventDefault();
+                case "ArrowLeft":
+                    this.previousTip();
+                    break;
+                case "Home":
+                    event.preventDefault();
+                    this.selectedIndex = 0;
+                    break;
+                case "End":
+                    event.preventDefault();
+                    this.selectedIndex = this.total - 1;
+                    break;
+            }
+        };
     }
@@ -133,3 +156,3 @@ selectedChangeHandler() {
         }
-        return (h(Host, null,
+        return (h(Host, { onKeydown: this.tipManagerKeyDownHandler },
             h("header", { class: CSS.header },
@@ -263,2 +286,20 @@ h("h2", { class: CSS.heading }, this.groupTitle),
             "reflect": true
+        },
+        "tabindex": {
+            "type": "number",
+            "mutable": false,
+            "complexType": {
+                "original": "number",
+                "resolved": "number",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "tabindex",
+            "reflect": true,
+            "defaultValue": "0"
         }
@@ -265,0 +306,0 @@ }; }

dist/collection/collection-manifest.json

 {
   "entries": [
+    "calcite-action-bar\\calcite-action-bar.js",
+    "calcite-pick-list\\calcite-pick-list.js",
+    "calcite-pick-list-group\\calcite-pick-list-group.js",
+    "calcite-pick-list-item\\calcite-pick-list-item.js",
+    "calcite-tip-manager\\calcite-tip-manager.js",
     "calcite-action-group\\calcite-action-group.js",
+    "calcite-tip-group\\calcite-tip-group.js",
     "calcite-shell\\calcite-shell.js",
-    "calcite-tip-group\\calcite-tip-group.js",
-    "calcite-action-bar\\calcite-action-bar.js",
+    "calcite-block\\calcite-block.js",
     "calcite-action-pad\\calcite-action-pad.js",
-    "calcite-block-section\\calcite-block-section.js",
     "calcite-flow-item\\calcite-flow-item.js",
+    "calcite-action\\calcite-action.js",
     "calcite-flow\\calcite-flow.js",
-    "calcite-action\\calcite-action.js",
     "calcite-shell-floating-panel\\calcite-shell-floating-panel.js",
-    "calcite-block\\calcite-block.js",
+    "calcite-shell-panel\\calcite-shell-panel.js",
     "calcite-tip\\calcite-tip.js",
-    "calcite-tip-manager\\calcite-tip-manager.js",
-    "calcite-shell-panel\\calcite-shell-panel.js"
+    "calcite-block-section\\calcite-block-section.js"
   ],
@@ -18,0 +21,0 @@ "compiler": {

dist/esm-es5/calcite-action_4.entry.js

@@ -1,3 +0,3 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './core-8682d485.js';
-import { g as getElementDir, C as CalciteIcon, j as chevronsLeft16, k as chevronsRight16 } from './dom-6cd2016d.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './core-689c59d5.js';
+import { g as getElementDir, C as CalciteIcon, j as chevronsLeft16, k as chevronsRight16 } from './dom-6e0f60bb.js';
 import { c as classnames } from './index-6d4b8b48.js';
@@ -4,0 +4,0 @@ import { C as CSS_UTILITY } from './resources-b033bb1e.js';

dist/esm-es5/calcite-block_2.entry.js

@@ -1,3 +0,3 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-8682d485.js';
-import { c as chevronUp16, a as chevronDown16, C as CalciteIcon, g as getElementDir, b as caretDown16F, d as caretLeft16F, e as caretRight16F } from './dom-6cd2016d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-689c59d5.js';
+import { c as chevronUp16, a as chevronDown16, C as CalciteIcon, g as getElementDir, b as caretDown16F, d as caretLeft16F, e as caretRight16F } from './dom-6e0f60bb.js';
 var CSS = {
@@ -4,0 +4,0 @@ content: "content",

dist/esm-es5/calcite-flow_2.entry.js

@@ -36,4 +36,4 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 };
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './core-8682d485.js';
-import { g as getElementDir, C as CalciteIcon, f as ellipsis16, h as chevronRight16, i as chevronLeft16 } from './dom-6cd2016d.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './core-689c59d5.js';
+import { g as getElementDir, C as CalciteIcon, f as ellipsis16, h as chevronRight16, i as chevronLeft16 } from './dom-6e0f60bb.js';
 import { c as classnames } from './index-6d4b8b48.js';
@@ -40,0 +40,0 @@ import { C as CSS_UTILITY } from './resources-b033bb1e.js';

dist/esm-es5/calcite-shell_3.entry.js

@@ -1,3 +0,3 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './core-8682d485.js';
-import { g as getElementDir, x as x16, C as CalciteIcon } from './dom-6cd2016d.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './core-689c59d5.js';
+import { g as getElementDir, x as x16, C as CalciteIcon } from './dom-6e0f60bb.js';
 import { c as classnames } from './index-6d4b8b48.js';
@@ -4,0 +4,0 @@ import { C as CSS_UTILITY } from './resources-b033bb1e.js';

dist/esm-es5/calcite-tip_3.entry.js

@@ -36,4 +36,4 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 };
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-8682d485.js';
-import { x as x16, C as CalciteIcon, g as getElementDir, h as chevronRight16, i as chevronLeft16 } from './dom-6cd2016d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-689c59d5.js';
+import { x as x16, C as CalciteIcon, g as getElementDir, h as chevronRight16, i as chevronLeft16 } from './dom-6e0f60bb.js';
 import { c as classnames } from './index-6d4b8b48.js';
@@ -184,2 +184,3 @@ function supportsLocalStorage() {
         this.textPrevious = TEXT$1.previous;
+        this.tabindex = 0;
         this.groupTitle = this.textDefaultTitle;
@@ -198,2 +199,24 @@ this.observer = new MutationObserver(function () { return _this.setUpTips(); });
         };
+        this.tipManagerKeyDownHandler = function (event) {
+            switch (event.key) {
+                case "ArrowUp":
+                    event.preventDefault();
+                case "ArrowRight":
+                    _this.nextTip();
+                    break;
+                case "ArrowDown":
+                    event.preventDefault();
+                case "ArrowLeft":
+                    _this.previousTip();
+                    break;
+                case "Home":
+                    event.preventDefault();
+                    _this.selectedIndex = 0;
+                    break;
+                case "End":
+                    event.preventDefault();
+                    _this.selectedIndex = _this.total - 1;
+                    break;
+            }
+        };
         this.calciteTipManagerClose = createEvent(this, "calciteTipManagerClose", 7);
@@ -292,3 +315,3 @@ }
         }
-        return (h(Host, null, h("header", { class: CSS$1.header }, h("h2", { class: CSS$1.heading }, this.groupTitle), h("calcite-action", { text: this.textClose, onClick: this.hideTipManager, class: CSS$1.close }, h(CalciteIcon, { size: "16", path: x16 }))), h("div", { class: classnames(CSS$1.tipContainer, this.direction), key: this.selectedIndex }, h("slot", null)), this.renderPagination()));
+        return (h(Host, { onKeydown: this.tipManagerKeyDownHandler }, h("header", { class: CSS$1.header }, h("h2", { class: CSS$1.heading }, this.groupTitle), h("calcite-action", { text: this.textClose, onClick: this.hideTipManager, class: CSS$1.close }, h(CalciteIcon, { size: "16", path: x16 }))), h("div", { class: classnames(CSS$1.tipContainer, this.direction), key: this.selectedIndex }, h("slot", null)), this.renderPagination()));
     };
@@ -295,0 +318,0 @@ Object.defineProperty(class_3.prototype, "el", {

dist/esm/calcite-action_4.entry.js

@@ -1,3 +0,3 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './core-8682d485.js';
-import { g as getElementDir, C as CalciteIcon, j as chevronsLeft16, k as chevronsRight16 } from './dom-6cd2016d.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './core-689c59d5.js';
+import { g as getElementDir, C as CalciteIcon, j as chevronsLeft16, k as chevronsRight16 } from './dom-6e0f60bb.js';
 import { c as classnames } from './index-6d4b8b48.js';
@@ -4,0 +4,0 @@ import { C as CSS_UTILITY } from './resources-b033bb1e.js';

dist/esm/calcite-block_2.entry.js

@@ -1,3 +0,3 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-8682d485.js';
-import { c as chevronUp16, a as chevronDown16, C as CalciteIcon, g as getElementDir, b as caretDown16F, d as caretLeft16F, e as caretRight16F } from './dom-6cd2016d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-689c59d5.js';
+import { c as chevronUp16, a as chevronDown16, C as CalciteIcon, g as getElementDir, b as caretDown16F, d as caretLeft16F, e as caretRight16F } from './dom-6e0f60bb.js';
 
@@ -4,0 +4,0 @@ const CSS = {

dist/esm/calcite-flow_2.entry.js

@@ -1,3 +0,3 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './core-8682d485.js';
-import { g as getElementDir, C as CalciteIcon, f as ellipsis16, h as chevronRight16, i as chevronLeft16 } from './dom-6cd2016d.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './core-689c59d5.js';
+import { g as getElementDir, C as CalciteIcon, f as ellipsis16, h as chevronRight16, i as chevronLeft16 } from './dom-6e0f60bb.js';
 import { c as classnames } from './index-6d4b8b48.js';
@@ -4,0 +4,0 @@ import { C as CSS_UTILITY } from './resources-b033bb1e.js';

dist/esm/calcite-shell_3.entry.js

@@ -1,3 +0,3 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './core-8682d485.js';
-import { g as getElementDir, x as x16, C as CalciteIcon } from './dom-6cd2016d.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './core-689c59d5.js';
+import { g as getElementDir, x as x16, C as CalciteIcon } from './dom-6e0f60bb.js';
 import { c as classnames } from './index-6d4b8b48.js';
@@ -4,0 +4,0 @@ import { C as CSS_UTILITY } from './resources-b033bb1e.js';

dist/esm/calcite-tip_3.entry.js

@@ -1,3 +0,3 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-8682d485.js';
-import { x as x16, C as CalciteIcon, g as getElementDir, h as chevronRight16, i as chevronLeft16 } from './dom-6cd2016d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-689c59d5.js';
+import { x as x16, C as CalciteIcon, g as getElementDir, h as chevronRight16, i as chevronLeft16 } from './dom-6e0f60bb.js';
 import { c as classnames } from './index-6d4b8b48.js';
@@ -138,2 +138,3 @@
         this.textPrevious = TEXT$1.previous;
+        this.tabindex = 0;
         this.groupTitle = this.textDefaultTitle;
@@ -152,2 +153,24 @@ this.observer = new MutationObserver(() => this.setUpTips());
         };
+        this.tipManagerKeyDownHandler = (event) => {
+            switch (event.key) {
+                case "ArrowUp":
+                    event.preventDefault();
+                case "ArrowRight":
+                    this.nextTip();
+                    break;
+                case "ArrowDown":
+                    event.preventDefault();
+                case "ArrowLeft":
+                    this.previousTip();
+                    break;
+                case "Home":
+                    event.preventDefault();
+                    this.selectedIndex = 0;
+                    break;
+                case "End":
+                    event.preventDefault();
+                    this.selectedIndex = this.total - 1;
+                    break;
+            }
+        };
         this.calciteTipManagerClose = createEvent(this, "calciteTipManagerClose", 7);
@@ -233,3 +256,3 @@ }
         }
-        return (h(Host, null, h("header", { class: CSS$1.header }, h("h2", { class: CSS$1.heading }, this.groupTitle), h("calcite-action", { text: this.textClose, onClick: this.hideTipManager, class: CSS$1.close }, h(CalciteIcon, { size: "16", path: x16 }))), h("div", { class: classnames(CSS$1.tipContainer, this.direction), key: this.selectedIndex }, h("slot", null)), this.renderPagination()));
+        return (h(Host, { onKeydown: this.tipManagerKeyDownHandler }, h("header", { class: CSS$1.header }, h("h2", { class: CSS$1.heading }, this.groupTitle), h("calcite-action", { text: this.textClose, onClick: this.hideTipManager, class: CSS$1.close }, h(CalciteIcon, { size: "16", path: x16 }))), h("div", { class: classnames(CSS$1.tipContainer, this.direction), key: this.selectedIndex }, h("slot", null)), this.renderPagination()));
     }
@@ -236,0 +259,0 @@ get el() { return getElement(this); }

dist/types/calcite-tip-manager/calcite-tip-manager.d.ts

@@ -28,2 +28,3 @@ import { EventEmitter } from "../stencil.core";
     theme: CalciteTheme;
+    tabindex: number;
     el: HTMLElement;
@@ -52,4 +53,5 @@ selectedIndex: number;
     nextClicked: () => void;
+    tipManagerKeyDownHandler: (event: KeyboardEvent) => void;
     renderPagination(): any;
     render(): any;
 }

dist/types/components.d.ts

@@ -14,2 +14,5 @@ /* tslint:disable */
 } from './interfaces';
+import {
+  ICON_TYPES,
+} from './calcite-pick-list/resources';
 
@@ -177,2 +180,36 @@ export namespace Components {
   }
+  interface CalcitePickList {
+    /**
+    * When true, the items will be sortable via drag and drop. Only applies when mode is configuration
+    */
+    'dragEnabled': boolean;
+    'getSelectedItems': () => Promise<object>;
+    /**
+    * Mode controls the presentation of the items in their selected and deselected states. Selection mode shows either radio buttons or checkboxes depending on the value of multiple Configuration mode relies on a color highlight on the edge of the item for selected Mode must be set to configuration for drag and drop behavior to work.
+    */
+    'mode': "selection" | "configuration";
+    /**
+    * Multpile Works similar to standard radio buttons and checkboxes. It also affects the presented icon when in Selection mode. When true, a user can select multiple items at a time. When false, only a single item can be selected at a time, When false, selecting a new item will deselect any other selected items.
+    */
+    'multiple': boolean;
+    /**
+    * The heading label for the entire Pick List. Not to be confused with the heading for an individual item or for a sub-group of items.
+    */
+    'textHeading': string;
+  }
+  interface CalcitePickListGroup {
+    /**
+    * The title used for all nested pick-list rows
+    */
+    'textGroupTitle': string;
+  }
+  interface CalcitePickListItem {
+    'editing': boolean;
+    'icon': ICON_TYPES | null;
+    'selected': boolean;
+    'textDescription': string;
+    'textHeading': string;
+    'toggleSelected': (coerce?: boolean, emit?: boolean) => Promise<void>;
+    'value': string;
+  }
   interface CalciteShell {
@@ -247,2 +284,3 @@ /**
     'previousTip': () => Promise<void>;
+    'tabindex': number;
     /**
@@ -326,2 +364,20 @@ * Alternate text for closing the Tip Manager.
 
+  interface HTMLCalcitePickListElement extends Components.CalcitePickList, HTMLStencilElement {}
+  var HTMLCalcitePickListElement: {
+    prototype: HTMLCalcitePickListElement;
+    new (): HTMLCalcitePickListElement;
+  };
+
+  interface HTMLCalcitePickListGroupElement extends Components.CalcitePickListGroup, HTMLStencilElement {}
+  var HTMLCalcitePickListGroupElement: {
+    prototype: HTMLCalcitePickListGroupElement;
+    new (): HTMLCalcitePickListGroupElement;
+  };
+
+  interface HTMLCalcitePickListItemElement extends Components.CalcitePickListItem, HTMLStencilElement {}
+  var HTMLCalcitePickListItemElement: {
+    prototype: HTMLCalcitePickListItemElement;
+    new (): HTMLCalcitePickListItemElement;
+  };
+
   interface HTMLCalciteShellElement extends Components.CalciteShell, HTMLStencilElement {}
@@ -371,2 +427,5 @@ var HTMLCalciteShellElement: {
     'calcite-flow-item': HTMLCalciteFlowItemElement;
+    'calcite-pick-list': HTMLCalcitePickListElement;
+    'calcite-pick-list-group': HTMLCalcitePickListGroupElement;
+    'calcite-pick-list-item': HTMLCalcitePickListItemElement;
     'calcite-shell': HTMLCalciteShellElement;
@@ -557,2 +616,36 @@ 'calcite-shell-floating-panel': HTMLCalciteShellFloatingPanelElement;
   }
+  interface CalcitePickList extends JSXBase.HTMLAttributes<HTMLCalcitePickListElement> {
+    /**
+    * When true, the items will be sortable via drag and drop. Only applies when mode is configuration
+    */
+    'dragEnabled'?: boolean;
+    /**
+    * Mode controls the presentation of the items in their selected and deselected states. Selection mode shows either radio buttons or checkboxes depending on the value of multiple Configuration mode relies on a color highlight on the edge of the item for selected Mode must be set to configuration for drag and drop behavior to work.
+    */
+    'mode'?: "selection" | "configuration";
+    /**
+    * Multpile Works similar to standard radio buttons and checkboxes. It also affects the presented icon when in Selection mode. When true, a user can select multiple items at a time. When false, only a single item can be selected at a time, When false, selecting a new item will deselect any other selected items.
+    */
+    'multiple'?: boolean;
+    'onCalcitePickListSelectionChange'?: (event: CustomEvent<any>) => void;
+    /**
+    * The heading label for the entire Pick List. Not to be confused with the heading for an individual item or for a sub-group of items.
+    */
+    'textHeading'?: string;
+  }
+  interface CalcitePickListGroup extends JSXBase.HTMLAttributes<HTMLCalcitePickListGroupElement> {
+    /**
+    * The title used for all nested pick-list rows
+    */
+    'textGroupTitle'?: string;
+  }
+  interface CalcitePickListItem extends JSXBase.HTMLAttributes<HTMLCalcitePickListItemElement> {
+    'editing'?: boolean;
+    'icon'?: ICON_TYPES | null;
+    'onCalcitePickListItemSelectedChange'?: (event: CustomEvent<any>) => void;
+    'selected'?: boolean;
+    'textDescription'?: string;
+    'textHeading'?: string;
+    'value'?: string;
+  }
   interface CalciteShell extends JSXBase.HTMLAttributes<HTMLCalciteShellElement> {
@@ -641,2 +734,3 @@ /**
     'onCalciteTipManagerClose'?: (event: CustomEvent<any>) => void;
+    'tabindex'?: number;
     /**
@@ -677,2 +771,5 @@ * Alternate text for closing the Tip Manager.
     'calcite-flow-item': CalciteFlowItem;
+    'calcite-pick-list': CalcitePickList;
+    'calcite-pick-list-group': CalcitePickListGroup;
+    'calcite-pick-list-item': CalcitePickListItem;
     'calcite-shell': CalciteShell;
@@ -679,0 +776,0 @@ 'calcite-shell-floating-panel': CalciteShellFloatingPanel;

package.json

 {
   "name": "@esri/calcite-app-components",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A collection of web components for building single-page applications.",
@@ -19,2 +19,3 @@ "main": "dist/index.js",
     "docs": "stencil build --config stencil.docs.config.ts",
+    "lint": "tslint src/components/**/*.ts?(x)",
     "start": "stencil build --dev --watch --serve",
@@ -40,3 +41,4 @@ "test": "stencil test --spec --e2e",
     "@esri/calcite-colors": "1.2.1",
-    "@esri/calcite-ui-icons": "2.0.1"
+    "@esri/calcite-ui-icons": "2.0.1",
+    "sortablejs": "1.10.0-rc3"
   },
@@ -51,2 +53,3 @@ "devDependencies": {
     "@types/puppeteer": "1.19.0",
+    "@types/sortablejs": "1.7.2",
     "autoprefixer": "9.6.1",
@@ -53,0 +56,0 @@ "chalk": "2.4.2",

README.md

@@ -0,0 +0,0 @@ # calcite-app-components

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2195295

increased by31.67%

Number of package files

216

increased by20%

Lines of code

33368

increased by41.93%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

24

increased by4.35%

Number of low supply chain risk alerts

65

increased by14.04%

Dependency changes

• + Addedsortablejs@1.10.0-rc3

• + Addedsortablejs@1.10.0-rc3(transitive)