@esri/calcite-components 1.3.0-next.1 → 1.3.0-next.11

package/dist/collection/components/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.11
  */
 export var KindIcons;
 (function (KindIcons) {

package/dist/collection/components/scrim/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.11
  */
 export const CSS = {
   scrim: "scrim",

package/dist/collection/components/scrim/scrim.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.11
  */
 import { h } from "@stencil/core";
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";

package/dist/collection/components/segmented-control/segmented-control.css

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host {
   display: flex;
   background-color: var(--calcite-ui-foreground-1);

package/dist/collection/components/segmented-control/segmented-control.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.11
  */
 import { Build, h, Host } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
@@ -20,6 +20,9 @@ export class SegmentedControl {
     //
     //--------------------------------------------------------------------------
     this.handleClick = (event) => {
+      if (this.disabled) {
+        return;
+      }
       if (event.target.localName === "calcite-segmented-control-item") {
         this.selectItem(event.target, true);
       }

package/dist/collection/components/segmented-control-item/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.11
  */
 export const SLOTS = {
   input: "input"

package/dist/collection/components/segmented-control-item/segmented-control-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.11
  */
 import { h, Host } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/select/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.11
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/select/select.css

@@ -102,13 +102,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 /**
 * CSS Custom Properties
 *

package/dist/collection/components/select/select.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.11
  */
 import { Fragment, h } from "@stencil/core";
 import { focusElement } from "../../utils/dom";

package/dist/collection/components/shell/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.11
  */
 export const CSS = {
   main: "main",

package/dist/collection/components/shell/shell.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.11
  */
 import { Fragment, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
@@ -85,8 +85,8 @@ export class Shell {
   renderContent() {
     const defaultSlotNode = h("slot", { key: "default-slot" });
     const deprecatedCenterRowSlotNode = (h("slot", { key: "center-row-slot", name: SLOTS.centerRow }));
-    const panelBottomSlotNode = h("slot", { key: "panel-top-slot", name: SLOTS.panelBottom });
-    const panelTopSlotNode = h("slot", { key: "panel-bottom-slot", name: SLOTS.panelTop });
+    const panelBottomSlotNode = h("slot", { key: "panel-bottom-slot", name: SLOTS.panelBottom });
+    const panelTopSlotNode = h("slot", { key: "panel-top-slot", name: SLOTS.panelTop });
     const contentContainerKey = "content-container";
     const content = !!this.contentBehind
       ? [

package/dist/collection/components/shell-center-row/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.11
  */
 export const CSS = {
   actionBarContainer: "action-bar-container",

package/dist/collection/components/shell-center-row/shell-center-row.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.11
  */
 import { Fragment, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
@@ -37,6 +37,9 @@ export class ShellCenterRow {
     const { el } = this;
     const contentNode = (h("div", { class: CSS.content }, h("slot", null)));
     const actionBar = getSlotted(el, SLOTS.actionBar);
+    if (actionBar) {
+      actionBar.layout = "horizontal";
+    }
     const actionBarNode = actionBar ? (h("div", { class: CSS.actionBarContainer, key: "action-bar" }, h("slot", { name: SLOTS.actionBar }))) : null;
     const children = [actionBarNode, contentNode];
     if (actionBar?.position === "end") {

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.11
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/shell-panel/shell-panel.css

@@ -93,6 +93,9 @@
 * @prop --calcite-shell-panel-width: The width of the component.
 * @prop --calcite-shell-panel-max-width: The maximum width of the component.
 * @prop --calcite-shell-panel-min-width: The minimum width of the component.
+* @prop --calcite-shell-panel-height: The height of the component.
+* @prop --calcite-shell-panel-max-height: The maximum height of the component.
+* @prop --calcite-shell-panel-min-height: The minimum height of the component.
 * @prop --calcite-shell-panel-detached-max-height: The maximum height of the component when `detached` is true.
 *
 */
@@ -104,19 +107,25 @@
   --calcite-shell-panel-detached-max-height: unset;
 }
 
-:host([width-scale=s]) .content {
+:host([layout=horizontal]) .content {
+  --calcite-shell-panel-height-internal: var(--calcite-shell-panel-height, 20vh);
+  --calcite-shell-panel-max-height-internal: var(--calcite-shell-panel-max-height, 420px);
+  --calcite-shell-panel-min-height-internal: var(--calcite-shell-panel-min-height, 240px);
+}
+
+:host([layout=vertical][width-scale=s]) .content {
   --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 12vw);
   --calcite-shell-panel-max-width-internal: var(--calcite-shell-panel-max-width, 300px);
   --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 150px);
 }
 
-:host([width-scale=m]) .content {
+:host([layout=vertical][width-scale=m]) .content {
   --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 20vw);
   --calcite-shell-panel-max-width-internal: var(--calcite-shell-panel-max-width, 420px);
   --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 240px);
 }
 
-:host([width-scale=l]) .content {
+:host([layout=vertical][width-scale=l]) .content {
   --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 45vw);
   --calcite-shell-panel-max-width-internal: var(--calcite-shell-panel-max-width, 680px);
   --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 340px);
@@ -148,6 +157,10 @@
   box-sizing: border-box;
 }
 
+:host([layout=horizontal]) .container {
+  flex-direction: column;
+}
+
 :host(:hover) .separator:not(:hover):not(:focus),
 :host(:focus-within) .separator:not(:hover):not(:focus) {
   opacity: 1;
@@ -157,10 +170,7 @@
 .separator {
   pointer-events: auto;
   position: absolute;
-  inset-block: 0px;
   display: flex;
-  block-size: 100%;
-  inline-size: 0.125rem;
   background-color: transparent;
   opacity: 0;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
@@ -176,14 +186,44 @@
   opacity: 1;
 }
 
-:host([position=start]) .separator {
+:host([layout=vertical]) .separator {
+  inset-block: 0px;
+  block-size: 100%;
+  inline-size: 0.125rem;
+  cursor: col-resize;
+}
+
+:host([layout=horizontal][position=start]) .separator {
+  inset-block-end: 0px;
+}
+
+:host([layout=horizontal][position=end]) .separator {
+  inset-block-start: 0px;
+}
+
+:host([layout=horizontal]) .separator {
+  inset-inline-end: 0px;
+  block-size: 0.125rem;
+  inline-size: 100%;
+  cursor: row-resize;
+}
+
+:host([layout=vertical][position=start]) .separator {
   inset-inline-end: -2px;
 }
 
-:host([position=end]) .separator {
+:host([layout=horizontal][position=start]) .separator {
+  inset-block-end: -2px;
+}
+
+:host([layout=vertical][position=end]) .separator {
   inset-inline-start: -2px;
 }
 
+:host([layout=horizontal][position=end]) .separator {
+  inset-block-start: -2px;
+}
+
 ::slotted(calcite-panel),
 ::slotted(calcite-flow) {
   block-size: 100%;
@@ -208,10 +248,19 @@
   align-self: stretch;
   background-color: var(--calcite-ui-background);
   padding: 0px;
+  transition: max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing);
+}
+
+:host([layout=vertical]) .content {
   inline-size: var(--calcite-shell-panel-width-internal);
   max-inline-size: var(--calcite-shell-panel-max-width-internal);
   min-inline-size: var(--calcite-shell-panel-min-width-internal);
-  transition: max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing);
+}
+
+:host([layout=horizontal]) .content {
+  block-size: var(--calcite-shell-panel-height-internal);
+  max-block-size: var(--calcite-shell-panel-max-height-internal);
+  min-block-size: var(--calcite-shell-panel-min-height-internal);
 }
 
 .content__header {
@@ -274,4 +323,20 @@ slot[name=action-bar]::slotted(calcite-action-bar),
 :host([position=end]) .content ::slotted(calcite-flow),
 :host([position=end]) .content ::slotted(calcite-panel) {
   border-inline-end: none;
+}
+
+:host([layout=horizontal]) slot[name=action-bar]::slotted(calcite-action-bar) {
+  border-inline: 0;
+}
+
+:host([layout=horizontal][position=start]) .content ::slotted(calcite-flow),
+:host([layout=horizontal][position=start]) .content ::slotted(calcite-panel) {
+  border-inline: 0;
+  border-block-start: 0;
+}
+
+:host([layout=horizontal][position=end]) .content ::slotted(calcite-flow),
+:host([layout=horizontal][position=end]) .content ::slotted(calcite-panel) {
+  border-inline: 0;
+  border-block-end: 0;
 }