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

package/dist/collection/components/calcite-shell-panel/calcite-shell-panel.js

@@ -6,6 +6,7 @@ import { Component, Element, Event, Prop, Watch, h, State, forceUpdate } from "@
 import { CSS, SLOTS, TEXT } from "./resources";
 import { getSlotted, getElementDir } from "../../utils/dom";
 import { clamp } from "../../utils/math";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding content to the shell panel.
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
@@ -151,7 +152,11 @@ export class CalciteShellPanel {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
   disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
     this.disconnectSeparator();
   }
   componentDidLoad() {
@@ -165,18 +170,18 @@ export class CalciteShellPanel {
   renderHeader() {
     const { el } = this;
     const hasHeader = getSlotted(el, SLOTS.header);
-    return hasHeader ? (h("div", { class: CSS.contentHeader },
+    return hasHeader ? (h("div", { class: CSS.contentHeader, key: "header" },
       h("slot", { name: SLOTS.header }))) : null;
   }
   render() {
     const { collapsed, detached, position, initialContentWidth, contentWidth, contentWidthMax, contentWidthMin, intlResize, resizable } = this;
     const allowResizing = !detached && resizable;
-    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed, ref: this.storeContentEl, style: allowResizing && contentWidth ? { width: `${contentWidth}px` } : null },
+    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed, key: "content", ref: this.storeContentEl, style: allowResizing && contentWidth ? { width: `${contentWidth}px` } : null },
       this.renderHeader(),
       h("div", { class: CSS.contentBody },
         h("slot", null))));
-    const separatorNode = allowResizing ? (h("div", { "aria-label": intlResize, "aria-orientation": "horizontal", "aria-valuemax": contentWidthMax, "aria-valuemin": contentWidthMin, "aria-valuenow": contentWidth !== null && contentWidth !== void 0 ? contentWidth : initialContentWidth, class: CSS.separator, onKeyDown: this.separatorKeyDown, ref: this.connectSeparator, role: "separator", tabIndex: 0, "touch-action": "none" })) : null;
-    const actionBarNode = h("slot", { name: SLOTS.actionBar });
+    const separatorNode = allowResizing ? (h("div", { "aria-label": intlResize, "aria-orientation": "horizontal", "aria-valuemax": contentWidthMax, "aria-valuemin": contentWidthMin, "aria-valuenow": contentWidth !== null && contentWidth !== void 0 ? contentWidth : initialContentWidth, class: CSS.separator, key: "separator", onKeyDown: this.separatorKeyDown, ref: this.connectSeparator, role: "separator", tabIndex: 0, "touch-action": "none" })) : null;
+    const actionBarNode = h("slot", { key: "action-bar", name: SLOTS.actionBar });
     const mainNodes = [actionBarNode, contentNode, separatorNode];
     if (position === "end") {
       mainNodes.reverse();

package/dist/collection/components/calcite-slider/calcite-slider.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,9 +71,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -95,9 +84,7 @@
   --calcite-slider-handle-extension-height: 6.5px;
   --calcite-slider-container-font-size: var(--calcite-font-size--3);
 }
-
-.scale--s .handle__label,
-.scale--s .tick__label {
+.scale--s .handle__label, .scale--s .tick__label{
   line-height: .75rem;
 }
 
@@ -106,9 +93,7 @@
   --calcite-slider-handle-extension-height: 8px;
   --calcite-slider-container-font-size: var(--calcite-font-size--2);
 }
-
-.scale--m .handle__label,
-.scale--m .tick__label {
+.scale--m .handle__label, .scale--m .tick__label{
   line-height: 1rem;
 }
 
@@ -117,26 +102,23 @@
   --calcite-slider-handle-extension-height: 10.5px;
   --calcite-slider-container-font-size: var(--calcite-font-size--1);
 }
-
-.scale--l .handle__label,
-.scale--l .tick__label {
+.scale--l .handle__label, .scale--l .tick__label{
   line-height: 1rem;
 }
 
-.handle__label,
-.tick__label {
+.handle__label, .tick__label{
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-2);
   font-size: var(--calcite-slider-container-font-size);
 }
 
-:host {
+:host{
   display: block;
 }
 
-.container {
-  display: block;
+.container{
   position: relative;
+  display: block;
   padding: calc(var(--calcite-slider-handle-size) * 0.5);
   margin: calc(var(--calcite-slider-handle-size) * 0.5) 0;
   --calcite-slider-full-handle-height: calc(
@@ -144,11 +126,10 @@
   );
 }
 
-:host([disabled]) {
-  opacity: var(--calcite-ui-opacity-disabled);
+:host([disabled]){
   pointer-events: none;
+  opacity: var(--calcite-ui-opacity-disabled);
 }
-
 :host([disabled]) .track__range,
 :host([disabled]) .tick--active {
   background-color: var(--calcite-ui-text-3);
@@ -170,81 +151,74 @@
   --calcite-slider-thumb-y-offset: calc(var(--calcite-slider-full-handle-height) * -1);
 }
 
-.thumb-container {
-  max-width: 100%;
+.thumb-container{
   position: relative;
+  max-width: 100%;
 }
 
 .thumb {
   --calcite-slider-thumb-x-offset: calc(var(--calcite-slider-handle-size) * 0.5);
   position: absolute;
-  border-style: none;
-  background-color: transparent;
-  cursor: pointer;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  padding: 0;
-  margin: 0;
+  margin: 0px;
   display: flex;
+  cursor: pointer;
   flex-direction: column;
   align-items: center;
+  border-style: none;
+  background-color: transparent;
+  padding: 0px;
   font-family: inherit;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   transform: translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset));
 }
-
-.thumb .handle__label.static, .thumb .handle__label.transformed {
-  opacity: 0;
+.thumb .handle__label.static, .thumb .handle__label.transformed{
   position: absolute;
-  top: 0;
-  bottom: 0;
+  top: 0px;
+  bottom: 0px;
+  opacity: 0;
 }
-
 .thumb .handle__label.hyphen::after {
   content: "—";
   display: inline-block;
   width: 1em;
 }
-
-.thumb .handle {
-  outline-offset: 0;
-  outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+.thumb .handle__label.hyphen--wrap {
+  display: flex;
+}
+.thumb .handle{
   box-sizing: border-box;
   border-radius: 9999px;
   background-color: var(--calcite-ui-foreground-1);
+  outline-offset: 0;
+  outline-color: transparent;
+  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   height: var(--calcite-slider-handle-size);
   width: var(--calcite-slider-handle-size);
   box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
   transition: border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease;
 }
-
-.thumb .handle-extension {
+.thumb .handle-extension{
   width: 0.125rem;
   height: var(--calcite-slider-handle-extension-height);
   background-color: var(--calcite-ui-text-3);
 }
-
 .thumb:hover .handle {
   box-shadow: 0 0 0 3px var(--calcite-ui-brand) inset;
 }
-
-.thumb:hover .handle-extension {
+.thumb:hover .handle-extension{
   background-color: var(--calcite-ui-brand);
 }
-
-.thumb:focus .handle {
+.thumb:focus .handle{
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
 }
-
-.thumb:focus .handle-extension {
+.thumb:focus .handle-extension{
   background-color: var(--calcite-ui-brand);
 }
-
 .thumb.thumb--minValue {
   transform: translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset));
 }
-
 .thumb.thumb--precise {
   --calcite-slider-thumb-y-offset: -2px;
 }
@@ -252,15 +226,12 @@
 :host([label-handles]) .thumb {
   --calcite-slider-thumb-x-offset: 50%;
 }
-
 :host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise) {
   --calcite-slider-thumb-y-offset: -23px;
 }
-
 :host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise) {
   --calcite-slider-thumb-y-offset: -30px;
 }
-
 :host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise) {
   --calcite-slider-thumb-y-offset: -32px;
 }
@@ -278,38 +249,33 @@
 :host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value {
   --calcite-slider-thumb-y-offset: -33px;
 }
-
 :host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value {
   --calcite-slider-thumb-y-offset: -44px;
 }
-
 :host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value {
   --calcite-slider-thumb-y-offset: -49px;
 }
 
-.thumb:focus .handle,
-.thumb--active .handle {
+.thumb:focus .handle, .thumb--active .handle{
   background-color: var(--calcite-ui-brand);
   box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16);
 }
 
-.thumb:hover.thumb--precise:after,
-.thumb:focus.thumb--precise:after,
-.thumb--active.thumb--precise:after {
+.thumb:hover.thumb--precise:after, .thumb:focus.thumb--precise:after, .thumb--active.thumb--precise:after{
   background-color: var(--calcite-ui-brand);
 }
 
-.track {
-  height: 0.125rem;
-  border-radius: 0;
+.track{
   position: relative;
+  height: 0.125rem;
+  border-radius: 0px;
   background-color: var(--calcite-ui-border-2);
   transition: all var(--calcite-internal-animation-timing-medium) ease-in;
 }
 
-.track__range {
+.track__range{
   position: absolute;
-  top: 0;
+  top: 0px;
   height: 0.125rem;
   background-color: var(--calcite-ui-brand);
 }
@@ -317,8 +283,7 @@
 .container--range .track__range:hover {
   cursor: ew-resize;
 }
-
-.container--range .track__range:after {
+.container--range .track__range:after{
   position: absolute;
   width: 100%;
   content: "";
@@ -326,10 +291,10 @@
   height: calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height));
 }
 
-.tick {
+.tick{
   position: absolute;
-  width: 0.125rem;
   height: 0.25rem;
+  width: 0.125rem;
   border-width: 1px;
   border-style: solid;
   background-color: var(--calcite-ui-border-input);
@@ -339,15 +304,15 @@
   margin-inline-start: calc(-1 * 0.125rem);
 }
 
-.tick--active {
+.tick--active{
   background-color: var(--calcite-ui-brand);
 }
 
-.tick__label {
-  display: flex;
-  justify-content: center;
+.tick__label{
   pointer-events: none;
   margin-top: 0.875rem;
+  display: flex;
+  justify-content: center;
 }
 
 .tick__label--min {
@@ -358,16 +323,14 @@
   transition: opacity var(--calcite-internal-animation-timing-fast);
 }
 
-:host([has-histogram][label-handles]) .tick__label--min,
-:host([has-histogram][label-handles]) .tick__label--max,
-:host([has-histogram][precise]) .tick__label--min,
-:host([has-histogram][precise]) .tick__label--max {
+:host([has-histogram][label-handles]) .tick__label--min, :host([has-histogram][label-handles]) .tick__label--max, :host([has-histogram][precise]) .tick__label--min, :host([has-histogram][precise]) .tick__label--max{
   font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-3);
 }
 
 .graph {
   color: var(--calcite-ui-foreground-3);
+  height: 48px;
 }
 
 :host([label-ticks][ticks]) .container {
@@ -377,11 +340,9 @@
 :host([has-histogram]):host([precise][label-handles]) .container {
   padding-bottom: calc(var(--calcite-slider-full-handle-height) + 1em);
 }
-
 :host([has-histogram]):host([label-handles]:not([precise])) .container {
   padding-bottom: calc(var(--calcite-slider-handle-size) * 0.5 + 1em);
 }
-
 :host([has-histogram]):host([precise]:not([label-handles])) .container {
   padding-bottom: var(--calcite-slider-full-handle-height);
 }
@@ -389,19 +350,15 @@
 :host(:not([has-histogram])):host([precise]:not([label-handles])) .container {
   padding-top: var(--calcite-slider-full-handle-height);
 }
-
 :host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range {
   padding-bottom: var(--calcite-slider-full-handle-height);
 }
-
 :host(:not([has-histogram])):host([label-handles]:not([precise])) .container {
   padding-top: calc(var(--calcite-slider-full-handle-height) + 4px);
 }
-
 :host(:not([has-histogram])):host([label-handles][precise]) .container {
   padding-top: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
 }
-
 :host(:not([has-histogram])):host([label-handles][precise]) .container--range {
   padding-bottom: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
 }

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

@@ -83,9 +83,7 @@ export class CalciteSlider {
       }
     };
     this.dragEnd = (event) => {
-      document.removeEventListener("pointermove", this.dragUpdate);
-      document.removeEventListener("pointerup", this.dragEnd);
-      document.removeEventListener("pointercancel", this.dragEnd);
+      this.removeDragListeners();
       this.focusActiveHandle(event.clientX);
       if (this.lastDragPropValue != this[this.dragProp]) {
         this.emitChange();
@@ -120,6 +118,7 @@ export class CalciteSlider {
   disconnectedCallback() {
     disconnectLabel(this);
     disconnectForm(this);
+    this.removeDragListeners();
   }
   componentWillLoad() {
     this.isRange = !!(this.maxValue || this.maxValue === 0);
@@ -315,8 +314,7 @@ export class CalciteSlider {
           h(HiddenFormInputSlot, { component: this })))));
   }
   renderGraph() {
-    return this.histogram ? (h("div", { class: "graph" },
-      h("calcite-graph", { colorStops: this.histogramStops, data: this.histogram, "data-style": "slider-histogram", height: 48, highlightMax: this.isRange ? this.maxValue : this.value, highlightMin: this.isRange ? this.minValue : this.min, max: this.max, min: this.min, width: 300 }))) : null;
+    return this.histogram ? (h("calcite-graph", { class: "graph", colorStops: this.histogramStops, data: this.histogram, highlightMax: this.isRange ? this.maxValue : this.value, highlightMin: this.isRange ? this.minValue : this.min, max: this.max, min: this.min })) : null;
   }
   renderTickLabel(tick) {
     const isMinTickLabel = tick === this.min;
@@ -516,6 +514,11 @@ export class CalciteSlider {
   emitChange() {
     this.calciteSliderChange.emit();
   }
+  removeDragListeners() {
+    document.removeEventListener("pointermove", this.dragUpdate);
+    document.removeEventListener("pointerup", this.dragEnd);
+    document.removeEventListener("pointercancel", this.dragEnd);
+  }
   /**
    * Set the prop value if changed at the component level
    * @param valueProp
@@ -625,7 +628,7 @@ export class CalciteSlider {
     const hyphenLabel = leftValueLabel;
     const labelOffset = labelFontSize / 2;
     if (labelTransformedOverlap > 0) {
-      hyphenLabel.classList.add("hyphen");
+      hyphenLabel.classList.add("hyphen", "hyphen--wrap");
       if (rightValueLabelStaticHostOffset === 0 && leftValueLabelStaticHostOffset === 0) {
         // Neither handle overlaps the host boundary
         let leftValueLabelTranslate = labelTransformedOverlap / 2 - labelOffset;
@@ -671,7 +674,7 @@ export class CalciteSlider {
       }
     }
     else {
-      hyphenLabel.classList.remove("hyphen");
+      hyphenLabel.classList.remove("hyphen", "hyphen--wrap");
       leftValueLabel.style.transform = `translateX(${leftValueLabelStaticHostOffset}px)`;
       leftValueLabelTransformed.style.transform = `translateX(${leftValueLabelStaticHostOffset}px)`;
       rightValueLabel.style.transform = `translateX(${rightValueLabelStaticHostOffset}px)`;

package/dist/collection/components/calcite-sortable-list/calcite-sortable-list.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]) {