npm - @esri/calcite-components - Versions diffs - 1.0.0-next.353 → 1.0.0-next.357 - Mend

@esri/calcite-components 1.0.0-next.353 → 1.0.0-next.357

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 (614) hide show

package/dist/collection/components/calcite-alert/calcite-alert.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {
@@ -165,14 +165,12 @@
 }
 :host {
+  --calcite-alert-edge-distance: 2rem;
   display: block;
 }
 :host .container {
   pointer-events: none;
   position: fixed;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: auto;
@@ -192,12 +190,31 @@
   border-bottom: 1px solid var(--calcite-ui-border-3);
   min-height: var(--calcite-alert-min-height);
   width: var(--calcite-alert-width);
-  max-width: 90%;
+  max-width: calc(100% - (var(--calcite-alert-edge-distance) * 2 + 2px));
   max-height: 0;
   z-index: 101;
-  transform: translate3d(0, 1.5rem, 0);
   transition: var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out;
 }
+:host .container.bottom, :host .container.top {
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+}
+:host .container[class*=bottom] {
+  transform: translate3d(0, var(--calcite-alert-edge-distance), 0);
+  inset-block-end: var(--calcite-alert-edge-distance);
+}
+:host .container[class*=top] {
+  transform: translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);
+  inset-block-start: var(--calcite-alert-edge-distance);
+}
+:host .container[class*=-start] {
+  inset-inline-start: var(--calcite-alert-edge-distance);
+  inset-inline-end: auto;
+}
+:host .container[class*=-end] {
+  inset-inline-end: var(--calcite-alert-edge-distance);
+  inset-inline-start: auto;
+}
 .container {
   display: flex;
@@ -220,9 +237,14 @@
   max-height: 100%;
   border-top-width: 2px;
   opacity: 1;
-  transform: translate3d(0, -1.5rem, 0);
   pointer-events: initial;
 }
+:host([active]) .container:not(.queued)[class*=bottom] {
+  transform: translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit);
+}
+:host([active]) .container:not(.queued)[class*=top] {
+  transform: translate3d(0, var(--calcite-alert-edge-distance), inherit);
+}
 slot[name=title]::slotted(*), *::slotted([slot=title]) {
   font-size: var(--calcite-font-size-0);

package/dist/collection/components/calcite-alert/calcite-alert.js CHANGED Viewed

@@ -33,7 +33,9 @@ export class CalciteAlert {
      * @default "Close"
      */
     this.intlClose = TEXT.intlClose;
-    /** specify the scale of the button, defaults to m */
+    /** specify the placement of the alert */
+    this.placement = "bottom";
+    /** specify the scale of the alert, defaults to m */
     this.scale = "m";
     //--------------------------------------------------------------------------
     //
@@ -105,13 +107,14 @@ export class CalciteAlert {
     const queueText = `+${this.queueLength > 2 ? this.queueLength - 1 : 1}`;
     const queueCount = (h("div", { class: `${this.queueLength > 1 ? "active " : ""}alert-queue-count` },
       h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
-    const { active, autoDismiss, label, queued, requestedIcon } = this;
+    const { active, autoDismiss, label, placement, queued, requestedIcon } = this;
     const role = autoDismiss ? "alert" : "alertdialog";
     const hidden = !active;
     return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role },
       h("div", { class: {
           container: true,
-          queued
+          queued,
+          [placement]: true
         } },
         requestedIcon ? (h("div", { class: "alert-icon" },
           h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null,
@@ -331,6 +334,29 @@ export class CalciteAlert {
       "attribute": "label",
       "reflect": false
     },
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "AlertPlacement",
+        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {
+          "AlertPlacement": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "specify the placement of the alert"
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "\"bottom\""
+    },
     "scale": {
       "type": "string",
       "mutable": false,
@@ -348,7 +374,7 @@ export class CalciteAlert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the scale of the button, defaults to m"
+        "text": "specify the scale of the alert, defaults to m"
       },
       "attribute": "scale",
       "reflect": true,

package/dist/collection/components/calcite-avatar/calcite-avatar.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-block/calcite-block.css CHANGED Viewed

@@ -98,7 +98,7 @@
 }
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-block-section/calcite-block-section.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-button/calcite-button.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-card/calcite-card.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-checkbox/calcite-checkbox.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {
@@ -136,7 +136,7 @@
 :host .toggle:focus .check-svg,
 :host .toggle:active .check-svg {
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
-  transition: 150ms ease-in-out;
+  transition: var(--calcite-animation-timing);
 }
 :host([disabled]) {

package/dist/collection/components/calcite-chip/calcite-chip.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-color-picker/calcite-color-picker.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-color-picker-hex-input/calcite-color-picker-hex-input.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-color-picker-swatch/calcite-color-picker-swatch.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-combobox/calcite-combobox.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

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

@@ -72,7 +72,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

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

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-date-picker/calcite-date-picker.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-date-picker-day/calcite-date-picker-day.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-date-picker-month/calcite-date-picker-month.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-date-picker-month-header/calcite-date-picker-month-header.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-dropdown/calcite-dropdown.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-dropdown-group/calcite-dropdown-group.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-dropdown-item/calcite-dropdown-item.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-fab/calcite-fab.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-filter/calcite-filter.css CHANGED Viewed

@@ -82,7 +82,7 @@
 }
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {
@@ -125,7 +125,7 @@ input[type=text] {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
   color: var(--calcite-ui-text-1);
-  transition: padding 150ms ease-in-out, box-shadow 150ms ease-in-out;
+  transition: padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing);
 }
 input[type=text]::-ms-clear {
   display: none;
@@ -140,7 +140,7 @@ calcite-input {
   display: flex;
   color: var(--calcite-ui-text-2);
   inset-inline-start: 0;
-  transition: left 150ms ease-in-out, right 150ms ease-in-out, opacity 150ms ease-in-out;
+  transition: left var(--calcite-animation-timing), right var(--calcite-animation-timing), opacity var(--calcite-animation-timing);
 }
 input[type=text]:focus {

package/dist/collection/components/calcite-flow/calcite-flow.css CHANGED Viewed

@@ -82,7 +82,7 @@
 }
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {
@@ -117,10 +117,10 @@
   overflow: hidden;
 }
 :host .frame--advancing {
-  animation: calcite-frame-advance 150ms ease-in-out;
+  animation: calcite-frame-advance var(--calcite-animation-timing);
 }
 :host .frame--retreating {
-  animation: calcite-frame-retreat 150ms ease-in-out;
+  animation: calcite-frame-retreat var(--calcite-animation-timing);
 }
 @keyframes calcite-frame-advance {
   0% {

package/dist/collection/components/calcite-graph/calcite-graph.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-handle/calcite-handle.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-icon/assets/calcite-icon/rightAlign16.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ "M1 2h14v1H1zm6 5h8V6H7zm-6 4h14v-1H1zm6 4h8v-1H7z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/rightAlign24.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ "M2 3h20v1H2zm8 7h12V9H10zm-8 6h20v-1H2zm8 6h12v-1H10z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/rightAlign32.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ "M2 4h28v1H2zm12 9h16v-1H14zM2 21h28v-1H2zm12 8h16v-1H14z"

package/dist/collection/components/calcite-icon/calcite-icon.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-inline-editable/calcite-inline-editable.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-input/calcite-input.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {
@@ -187,7 +187,7 @@
 :host textarea,
 :host input {
-  transition: 150ms ease-in-out, height 0s;
+  transition: var(--calcite-animation-timing), height 0s;
   -webkit-appearance: none;
   position: relative;
   margin: 0px;

package/dist/collection/components/calcite-input/calcite-input.js CHANGED Viewed

@@ -190,6 +190,14 @@ export class CalciteInput {
           return;
         }
       }
+      if (/[eE]/.test(event.key)) {
+        if (!this.value && !this.childNumberEl.value) {
+          return;
+        }
+        if (this.value && !/[eE]/.test(this.childNumberEl.value)) {
+          return;
+        }
+      }
       event.preventDefault();
     };
     this.nudgeNumberValue = (direction, nativeEvent) => {

package/dist/collection/components/calcite-input-date-picker/calcite-input-date-picker.css CHANGED Viewed

@@ -87,7 +87,7 @@
 }
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-input-message/calcite-input-message.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-input-time-picker/calcite-input-time-picker.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-input-time-picker/calcite-input-time-picker.js CHANGED Viewed

@@ -33,7 +33,7 @@ export class CalciteInputTimePicker {
     this.scale = "m";
     /** number (seconds) that specifies the granularity that the value must adhere to */
     this.step = 60;
-    /** The selected time (always 24-hour format)*/
+    /** The selected time in UTC (always 24-hour format) */
     this.value = null;
     /** whether the value of the input was changed as a result of user typing or not */
     this.internalValueChange = false;
@@ -559,7 +559,7 @@ export class CalciteInputTimePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The selected time (always 24-hour format)"
+        "text": "The selected time in UTC (always 24-hour format)"
       },
       "attribute": "value",
       "reflect": false,

package/dist/collection/components/calcite-label/calcite-label.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-link/calcite-link.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-list/calcite-list.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-list-item/calcite-list-item.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {
@@ -145,6 +145,8 @@
   padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+  font-size: var(--calcite-font-size--2);
+  line-height: 1.375;
 }
 .label, .description {

package/dist/collection/components/calcite-list-item-group/calcite-list-item-group.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-loader/calcite-loader.css CHANGED Viewed

@@ -72,7 +72,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-modal/calcite-modal.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {

package/dist/collection/components/calcite-notice/calcite-notice.css CHANGED Viewed

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 :host([hidden]) {
@@ -189,7 +189,7 @@
   opacity: 0;
   max-height: 0;
   text-align: start;
-  transition: 150ms ease-in-out;
+  transition: var(--calcite-animation-timing);
   border-inline-start: 0px solid;
   box-shadow: 0 0 0 0 transparent;
 }