@esri/calcite-components 1.0.0-beta.72 → 1.0.0-beta.76

package/dist/collection/components/calcite-combobox/calcite-combobox.js

@@ -7,12 +7,17 @@ import { filter } from "../../utils/filter";
 import { debounce } from "lodash-es";
 import { createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
 import { guid } from "../../utils/guid";
-import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, ComboboxDefaultPlacement } from "./resources";
+import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, ComboboxDefaultPlacement, TEXT } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { createObserver } from "../../utils/observers";
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
+const itemUidPrefix = "combobox-item-";
+const chipUidPrefix = "combobox-chip-";
+const labelUidPrefix = "combobox-label-";
+const listboxUidPrefix = "combobox-listbox-";
+const inputUidPrefix = "combobox-input-";
 /**
  * @slot - A slot for adding `calcite-combobox-item`s.
  */
@@ -47,6 +52,10 @@ export class CalciteCombobox {
     this.scale = "m";
     /** The value(s) of the selectedItem(s) */
     this.value = null;
+    /** string to override the English "Remove tag" text for when an item is selected.
+     * @default "Remove tag"
+     */
+    this.intlRemoveTag = TEXT.removeTag;
     //--------------------------------------------------------------------------
     //
     //  Private State/Props
@@ -556,7 +565,6 @@ export class CalciteCombobox {
       const item = document.createElement(ComboboxItem);
       item.value = value;
       item.textLabel = value;
-      item.guid = guid();
       item.selected = true;
       this.el.appendChild(item);
       this.resetText();
@@ -606,7 +614,9 @@ export class CalciteCombobox {
   focusChip() {
     var _a;
     const guid = (_a = this.selectedItems[this.activeChipIndex]) === null || _a === void 0 ? void 0 : _a.guid;
-    const chip = this.referenceEl.querySelector(`#chip-${guid}`);
+    const chip = guid
+      ? this.referenceEl.querySelector(`#${chipUidPrefix}${guid}`)
+      : null;
     chip === null || chip === void 0 ? void 0 : chip.setFocus();
   }
   shiftActiveItemIndex(delta) {
@@ -652,7 +662,7 @@ export class CalciteCombobox {
   //
   //--------------------------------------------------------------------------
   renderChips() {
-    const { activeChipIndex, scale, selectionMode } = this;
+    const { activeChipIndex, scale, selectionMode, intlRemoveTag } = this;
     return this.selectedItems.map((item, i) => {
       const chipClasses = {
         chip: true,
@@ -661,11 +671,11 @@ export class CalciteCombobox {
       const ancestors = [...getItemAncestors(item)].reverse();
       const pathLabel = [...ancestors, item].map((el) => el.textLabel);
       const label = selectionMode !== "ancestors" ? item.textLabel : pathLabel.join(" / ");
-      return (h("calcite-chip", { "aria-label": label, class: chipClasses, dismissLabel: "remove tag", dismissible: true, icon: item.icon, id: `chip-${item.guid}`, key: item.textLabel, onCalciteChipDismiss: (event) => this.calciteChipDismissHandler(event, item), scale: scale, title: label, value: item.value }, label));
+      return (h("calcite-chip", { class: chipClasses, dismissLabel: intlRemoveTag, dismissible: true, icon: item.icon, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: item.textLabel, onCalciteChipDismiss: (event) => this.calciteChipDismissHandler(event, item), scale: scale, title: label, value: item.value }, label));
     });
   }
   renderInput() {
-    const { active, disabled, placeholder, selectionMode, needsIcon, selectedItems } = this;
+    const { guid, active, disabled, placeholder, selectionMode, needsIcon, selectedItems } = this;
     const single = selectionMode === "single";
     const selectedItem = selectedItems[0];
     const showLabel = !active && single && !!selectedItem;
@@ -677,16 +687,16 @@ export class CalciteCombobox {
           label: true,
           "label--spaced": needsIcon
         }, key: "label", onFocus: this.comboboxFocusHandler, tabindex: "0" }, selectedItem.textLabel)),
-      h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": guid, "aria-label": getLabelText(this), class: {
+      h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-label": getLabelText(this), class: {
           input: true,
           "input--single": true,
           "input--transparent": this.activeChipIndex > -1,
           "input--hidden": showLabel,
           "input--icon": single && needsIcon
-        }, disabled: disabled, id: `${guid}-input`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, ref: (el) => (this.textInput = el), type: "text" })));
+        }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, ref: (el) => (this.textInput = el), type: "text" })));
   }
   renderListBoxOptions() {
-    return this.visibleItems.map((item) => (h("li", { "aria-selected": (!!item.selected).toString(), id: item.guid, role: "option", tabindex: "-1" }, item.textLabel)));
+    return this.visibleItems.map((item) => (h("li", { "aria-selected": (!!item.selected).toString(), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
   }
   renderPopperContainer() {
     const { active, maxScrollerHeight, setMenuEl, setListContainerEl, hideList, open } = this;
@@ -716,9 +726,8 @@ export class CalciteCombobox {
   render() {
     const { guid, open, label } = this;
     const single = this.selectionMode === "single";
-    const labelId = `${guid}-label`;
     return (h(Host, { onKeyDown: this.keydownHandler },
-      h("div", { "aria-autocomplete": "list", "aria-expanded": open.toString(), "aria-haspopup": "listbox", "aria-labelledby": labelId, "aria-owns": guid, class: {
+      h("div", { "aria-autocomplete": "list", "aria-expanded": open.toString(), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-owns": `${listboxUidPrefix}${guid}`, class: {
           wrapper: true,
           "wrapper--single": single || !this.selectedItems.length,
           "wrapper--active": open
@@ -726,10 +735,10 @@ export class CalciteCombobox {
         h("div", { class: "grid-input" },
           this.renderIconStart(),
           !single && this.renderChips(),
-          h("label", { class: "screen-readers-only", htmlFor: `${guid}-input`, id: labelId }, label),
+          h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label),
           this.renderInput()),
         this.renderIconEnd()),
-      h("ul", { "aria-labelledby": labelId, "aria-multiselectable": "true", class: "screen-readers-only", id: guid, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()),
+      h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()),
       this.renderPopperContainer(),
       h(HiddenFormInputSlot, { component: this })));
   }
@@ -971,6 +980,27 @@ export class CalciteCombobox {
       "attribute": "value",
       "reflect": false,
       "defaultValue": "null"
+    },
+    "intlRemoveTag": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "\"Remove tag\""
+          }],
+        "text": "string to override the English \"Remove tag\" text for when an item is selected."
+      },
+      "attribute": "intl-remove-tag",
+      "reflect": false,
+      "defaultValue": "TEXT.removeTag"
     }
   }; }
   static get states() { return {
@@ -1002,7 +1032,7 @@ export class CalciteCombobox {
       },
       "complexType": {
         "original": "HTMLCalciteComboboxItemElement[]",
-        "resolved": "any[]",
+        "resolved": "HTMLCalciteComboboxItemElement[]",
         "references": {
           "HTMLCalciteComboboxItemElement": {
             "location": "global"
@@ -1021,7 +1051,7 @@ export class CalciteCombobox {
       },
       "complexType": {
         "original": "{ selectedItems: HTMLCalciteComboboxItemElement[] }",
-        "resolved": "{ selectedItems: any[]; }",
+        "resolved": "{ selectedItems: HTMLCalciteComboboxItemElement[]; }",
         "references": {
           "HTMLCalciteComboboxItemElement": {
             "location": "global"
@@ -1040,7 +1070,7 @@ export class CalciteCombobox {
       },
       "complexType": {
         "original": "{\n    visibleItems: HTMLCalciteComboboxItemElement[];\n    text: string;\n  }",
-        "resolved": "{ visibleItems: any[]; text: string; }",
+        "resolved": "{ visibleItems: HTMLCalciteComboboxItemElement[]; text: string; }",
         "references": {
           "HTMLCalciteComboboxItemElement": {
             "location": "global"

package/dist/collection/components/calcite-combobox/resources.js

@@ -6,3 +6,6 @@ export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
 export const ComboboxChildSelector = `${ComboboxItem}, ${ComboboxItemGroup}`;
 export const ComboboxDefaultPlacement = "bottom-leading";
+export const TEXT = {
+  removeTag: "Remove tag"
+};

package/dist/collection/components/calcite-combobox-item/calcite-combobox-item.css

@@ -1,53 +1,43 @@
 @charset "UTF-8";
-
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 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);
@@ -81,16 +71,15 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
-.scale--s {
+.scale--s{
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
   --calcite-combobox-item-spacing-unit-l: 0.5rem;
@@ -98,7 +87,7 @@
   --calcite-combobox-item-spacing-indent: 0.5rem;
 }
 
-.scale--m {
+.scale--m{
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
   --calcite-combobox-item-spacing-unit-l: 0.75rem;
@@ -106,7 +95,7 @@
   --calcite-combobox-item-spacing-indent: 0.75rem;
 }
 
-.scale--l {
+.scale--l{
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
   --calcite-combobox-item-spacing-unit-l: 1rem;
@@ -120,65 +109,69 @@
   );
 }
 
-:host(:focus) {
-  box-shadow: none;
+:host(:focus){
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-:host,
-ul {
+:host, ul{
+  margin: 0px;
   display: flex;
   flex-direction: column;
-  margin: 0;
-  padding: 0;
+  padding: 0px;
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
-.label {
-  display: flex;
+.label{
+  position: relative;
   box-sizing: border-box;
+  display: flex;
   width: 100%;
   min-width: 100%;
+  cursor: pointer;
   align-items: center;
   color: var(--calcite-ui-text-3);
-  cursor: pointer;
-  position: relative;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
-  text-decoration: none;
   padding: var(--calcite-combobox-item-spacing-unit-s) var(--calcite-combobox-item-spacing-unit-l);
 }
 
-:host([disabled]) .label {
+:host([disabled]) .label{
   cursor: default;
 }
 
-.label--selected {
-  color: var(--calcite-ui-text-1);
+.label--selected{
   font-weight: var(--calcite-font-weight-medium);
+  color: var(--calcite-ui-text-1);
 }
 
-.label--active {
+.label--active{
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
 
-.label:hover,
-.label:active {
-  color: var(--calcite-ui-text-1);
+.label:hover, .label:active{
   background-color: var(--calcite-ui-foreground-2);
-  box-shadow: none;
-  text-decoration: none;
+  color: var(--calcite-ui-text-1);
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .title {
   padding: 0 var(--calcite-combobox-item-spacing-unit-l);
 }
 
-.icon {
+.icon{
   display: inline-flex;
   opacity: 0;
   transition-duration: 150ms;
@@ -195,11 +188,11 @@ ul {
   color: var(--calcite-ui-text-3);
 }
 
-.icon--active {
+.icon--active{
   color: var(--calcite-ui-text-1);
 }
 
-.icon--dot {
+.icon--dot{
   display: flex;
   justify-content: flex-end;
   width: var(--calcite-combobox-item-spacing-unit-l);
@@ -210,15 +203,15 @@ ul {
   content: "•";
 }
 
-.label--active .icon {
+.label--active .icon{
   opacity: 1;
 }
 
-.label--selected .icon {
+.label--selected .icon{
   opacity: 1;
   color: var(--calcite-ui-brand);
 }
 
-:host(:hover[disabled]) .icon {
+:host(:hover[disabled]) .icon{
   opacity: 1;
 }

package/dist/collection/components/calcite-combobox-item/calcite-combobox-item.js

@@ -3,10 +3,11 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, Host, Method, Prop, h, Watch } from "@stencil/core";
-import { getElementProp } from "../../utils/dom";
+import { getElementProp, getSlotted } from "../../utils/dom";
 import { CSS } from "./resources";
 import { guid } from "../../utils/guid";
 import { getAncestors, getDepth } from "../calcite-combobox/utils";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding nested `calcite-combobox-item`s.
  */
@@ -50,9 +51,10 @@ export class CalciteComboboxItem {
   connectedCallback() {
     this.ancestors = getAncestors(this.el);
     this.scale = getElementProp(this.el, "scale", this.scale);
+    connectConditionalSlotComponent(this);
   }
-  componentWillLoad() {
-    this.hasDefaultSlot = this.el.querySelector(":not([slot])") !== null;
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -92,11 +94,11 @@ export class CalciteComboboxItem {
       }, icon: icon || iconPath, scale: "s" }));
   }
   renderChildren() {
-    if (!this.hasDefaultSlot) {
-      return null;
+    if (getSlotted(this.el)) {
+      return (h("ul", { key: "default-slot-container" },
+        h("slot", null)));
     }
-    return (h("ul", null,
-      h("slot", null)));
+    return null;
   }
   render() {
     const isSingleSelect = getElementProp(this.el, "selection-mode", "multi") === "single";
@@ -182,7 +184,7 @@ export class CalciteComboboxItem {
       "mutable": true,
       "complexType": {
         "original": "ComboboxChildElement[]",
-        "resolved": "any[]",
+        "resolved": "ComboboxChildElement[]",
         "references": {
           "ComboboxChildElement": {
             "location": "import",

package/dist/collection/components/calcite-combobox-item-group/calcite-combobox-item-group.css

@@ -1,51 +1,42 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 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);
@@ -79,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -115,23 +105,22 @@
   --calcite-combobox-item-spacing-indent-2: 2rem;
 }
 
-:host,
-.list {
+:host, .list {
+  margin: 0px;
   display: flex;
   flex-direction: column;
-  margin: 0;
-  padding: 0;
+  padding: 0px;
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
 .label {
   box-sizing: border-box;
+  display: flex;
   width: 100%;
+  min-width: 0px;
   max-width: 100%;
-  min-width: 0;
   color: var(--calcite-ui-text-3);
-  display: flex;
 }
 
 .label--indent-1 {
@@ -146,12 +135,12 @@
   border: 0 solid;
   display: block;
   flex: 1 1 0%;
-  border-bottom-color: var(--calcite-ui-border-3);
   border-bottom-width: 1px;
-  color: var(--calcite-ui-text-2);
   font-weight: var(--calcite-font-weight-bold);
+  color: var(--calcite-ui-text-2);
   word-wrap: break-word;
   word-break: break-word;
+  border-bottom-color: var(--calcite-ui-border-3);
   padding: var(--calcite-combobox-item-spacing-unit-l) 0;
   margin-left: var(--calcite-combobox-item-spacing-unit-s);
   margin-right: var(--calcite-combobox-item-spacing-unit-s);

package/dist/collection/components/calcite-combobox-item-group/calcite-combobox-item-group.js

@@ -51,7 +51,7 @@ export class CalciteComboboxItemGroup {
       "mutable": true,
       "complexType": {
         "original": "ComboboxChildElement[]",
-        "resolved": "any[]",
+        "resolved": "ComboboxChildElement[]",
         "references": {
           "ComboboxChildElement": {
             "location": "import",

package/dist/collection/components/calcite-date-picker/assets/calcite-date-picker/nls/bg.json

@@ -0,0 +1,31 @@
+{
+  "default-calendar": "gregorian",
+  "separator": ".",
+  "unitOrder": "d.MM.y 'г'",
+  "weekStart": 1,
+  "placeholder": "d.MM.y 'г'",
+  "days": {
+    "abbreviated": ["нд", "пн", "вт", "ср", "чт", "пт", "сб"],
+    "short": ["нд", "пн", "вт", "ср", "чт", "пт", "сб"],
+    "wide": ["неделя", "понеделник", "вторник", "сряда", "четвъртък", "петък", "събота"]
+  },
+  "numerals": "0123456789",
+  "months": {
+    "abbreviated": ["яну", "фев", "март", "апр", "май", "юни", "юли", "авг", "сеп", "окт", "ное", "дек"],
+    "wide": [
+      "януари",
+      "февруари",
+      "март",
+      "април",
+      "май",
+      "юни",
+      "юли",
+      "август",
+      "септември",
+      "октомври",
+      "ноември",
+      "декември"
+    ],
+    "narrow": ["я", "ф", "м", "а", "м", "ю", "ю", "а", "с", "о", "н", "д"]
+  }
+}

package/dist/collection/components/calcite-date-picker/assets/calcite-date-picker/nls/pt-BR.json

@@ -0,0 +1,31 @@
+{
+  "default-calendar": "gregorian",
+  "separator": "/",
+  "unitOrder": "DD/MM/YYYY",
+  "weekStart": 7,
+  "placeholder": "DD/MM/YYYY",
+  "days": {
+    "abbreviated": ["dom.", "seg.", "ter.", "qua.", "qui.", "sex.", "sáb."],
+    "narrow": ["D", "S", "T", "Q", "Q", "S", "S"],
+    "wide": ["domingo", "segunda-feira", "terça-feira", "quarta-feira", "quinta-feira", "sexta-feira", "sábado"]
+  },
+  "numerals": "0123456789",
+  "months": {
+    "abbreviated": ["jan.", "fev.", "mar.", "abr.", "mai.", "jun.", "jul.", "ago.", "set.", "out.", "nov.", "dez."],
+    "narrow": ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
+    "wide": [
+      "janeiro",
+      "fevereiro",
+      "março",
+      "abril",
+      "maio",
+      "junho",
+      "julho",
+      "agosto",
+      "setembro",
+      "outubro",
+      "novembro",
+      "dezembro"
+    ]
+  }
+}

package/dist/collection/components/calcite-date-picker/assets/calcite-date-picker/nls/pt-PT.json

@@ -5,9 +5,9 @@
   "weekStart": 7,
   "placeholder": "DD/MM/YYYY",
   "days": {
-    "abbreviated": ["dom.", "seg.", "ter.", "qua.", "qui.", "sex.", "sáb."],
-    "wide": ["domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado"],
-    "narrow": ["D", "S", "T", "Q", "Q", "S", "S"]
+    "abbreviated": ["domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado"],
+    "narrow": ["D", "S", "T", "Q", "Q", "S", "S"],
+    "wide": ["domingo", "segunda-feira", "terça-feira", "quarta-feira", "quinta-feira", "sexta-feira", "sábado"]
   },
   "numerals": "0123456789",
   "months": {