@esri/calcite-components 1.9.0-next.0 → 1.9.0-next.10

package/dist/collection/components/notice/notice.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.0
+ * v1.9.0-next.10
  */
 import { h, } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot";
@@ -11,6 +11,7 @@ import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages, } from "../../utils/t9n";
 import { KindIcons } from "../resources";
 import { CSS, SLOTS } from "./resources";
+import { onToggleOpenCloseComponent } from "../../utils/openCloseComponent";
 /**
  * Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
  * notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.
@@ -25,6 +26,9 @@ import { CSS, SLOTS } from "./resources";
  */
 export class Notice {
   constructor() {
+    this.setTransitionEl = (el) => {
+      this.transitionEl = el;
+    };
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -32,8 +36,8 @@ export class Notice {
     //--------------------------------------------------------------------------
     this.close = () => {
       this.open = false;
-      this.calciteNoticeClose.emit();
     };
+    this.openTransitionProp = "opacity";
     this.open = false;
     this.kind = "brand";
     this.closable = false;
@@ -46,6 +50,9 @@ export class Notice {
     this.effectiveLocale = undefined;
     this.defaultMessages = undefined;
   }
+  openHandler() {
+    onToggleOpenCloseComponent(this);
+  }
   onMessagesChange() {
     /* wired up by t9n util */
   }
@@ -71,6 +78,9 @@ export class Notice {
     setUpLoadableComponent(this);
     this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
     await setUpMessages(this);
+    if (this.open) {
+      onToggleOpenCloseComponent(this);
+    }
   }
   componentDidLoad() {
     setComponentLoaded(this);
@@ -81,7 +91,9 @@ export class Notice {
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.closeButton = el) }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
     const hasActionEnd = getSlotted(el, SLOTS.actionsEnd);
-    return (h("div", { class: CSS.container }, this.requestedIcon ? (h("div", { class: CSS.icon }, h("calcite-icon", { flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: CSS.content }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), hasActionEnd ? (h("div", { class: CSS.actionsEnd }, h("slot", { name: SLOTS.actionsEnd }))) : null, this.closable ? closeButton : null));
+    return (h("div", { class: CSS.container,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: this.setTransitionEl }, this.requestedIcon ? (h("div", { class: CSS.icon }, h("calcite-icon", { flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: CSS.content }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), hasActionEnd ? (h("div", { class: CSS.actionsEnd }, h("slot", { name: SLOTS.actionsEnd }))) : null, this.closable ? closeButton : null));
   }
   //--------------------------------------------------------------------------
   //
@@ -102,6 +114,18 @@ export class Notice {
       this.closeButton.focus();
     }
   }
+  onBeforeClose() {
+    this.calciteNoticeBeforeClose.emit();
+  }
+  onBeforeOpen() {
+    this.calciteNoticeBeforeOpen.emit();
+  }
+  onClose() {
+    this.calciteNoticeClose.emit();
+  }
+  onOpen() {
+    this.calciteNoticeOpen.emit();
+  }
   effectiveLocaleChange() {
     updateMessages(this, this.effectiveLocale);
   }
@@ -319,6 +343,36 @@ export class Notice {
   }
   static get events() {
     return [{
+        "method": "calciteNoticeBeforeClose",
+        "name": "calciteNoticeBeforeClose",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is requested to be closed and before the closing transition begins."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteNoticeBeforeOpen",
+        "name": "calciteNoticeBeforeOpen",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
         "method": "calciteNoticeClose",
         "name": "calciteNoticeClose",
         "bubbles": true,
@@ -326,7 +380,7 @@ export class Notice {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fired when the component is closed."
+          "text": "Fires when the component is closed and animation is complete."
         },
         "complexType": {
           "original": "void",
@@ -341,7 +395,7 @@ export class Notice {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fired when the component is opened."
+          "text": "Fires when the component is open and animation is complete."
         },
         "complexType": {
           "original": "void",
@@ -373,6 +427,9 @@ export class Notice {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "open",
+        "methodName": "openHandler"
+      }, {
         "propName": "messageOverrides",
         "methodName": "onMessagesChange"
       }, {

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.0
+ * v1.9.0-next.10
  */
 export const SLOTS = {
   title: "title",

package/dist/collection/components/option/option.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.0
+ * v1.9.0-next.10
  */
 import { h } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
@@ -28,12 +28,13 @@ export class Option {
   //
   //--------------------------------------------------------------------------
   ensureTextContentDependentProps() {
-    const { el: { textContent }, } = this;
-    if (!this.label || this.label === this.internallySetLabel) {
+    const { el: { textContent }, internallySetLabel, internallySetValue, label, value, } = this;
+    if (!label || label === internallySetLabel) {
       this.label = textContent;
       this.internallySetLabel = textContent;
     }
-    if (!this.value || this.value === this.internallySetValue) {
+    if (value == null /* intentional loose equals to handle both undefined & null */ ||
+      value === internallySetValue) {
       this.value = textContent;
       this.internallySetValue = textContent;
     }

package/dist/collection/components/option-group/option-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.0
+ * v1.9.0-next.10
  */
 import { Fragment, h } from "@stencil/core";
 /**

package/dist/collection/components/pagination/pagination.css

@@ -7,52 +7,42 @@
 /**
 * Currently only used in Checkbox.
 */
-:host([scale=s]) {
-  --calcite-pagination-spacing-internal: 0.25rem 0.5rem;
+:host {
+  display: flex;
+  writing-mode: horizontal-tb
 }
-:host([scale=s]) .previous, :host([scale=s]) .next, :host([scale=s]) .page {
+
+:host([scale=s]) .previous, :host([scale=s]) .next, :host([scale=s]) .page, :host([scale=s]) .ellipsis {
   block-size: 1.5rem;
+  padding-inline: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
-}
-:host([scale=s]) .previous,
-:host([scale=s]) .next {
-  padding-inline: 0.25rem;
+  min-inline-size: 1.5rem
 }
 
-:host([scale=m]) {
-  --calcite-pagination-spacing-internal: 0.5rem 0.75rem;
-}
-:host([scale=m]) .previous, :host([scale=m]) .next, :host([scale=m]) .page {
+:host([scale=m]) .previous, :host([scale=m]) .next, :host([scale=m]) .page, :host([scale=m]) .ellipsis {
   block-size: 2rem;
+  padding-inline: 0.5rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
-}
-:host([scale=m]) .previous,
-:host([scale=m]) .next {
-  padding-inline: 0.5rem;
+  min-inline-size: 2rem
 }
 
-:host([scale=l]) {
-  --calcite-pagination-spacing-internal: 0.75rem 1rem;
-}
-:host([scale=l]) .previous, :host([scale=l]) .next, :host([scale=l]) .page {
+:host([scale=l]) .previous, :host([scale=l]) .next, :host([scale=l]) .page, :host([scale=l]) .ellipsis {
   block-size: 2.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
+  min-inline-size: 2.75rem
 }
-:host([scale=l]) .previous,
-:host([scale=l]) .next {
-  padding-inline: 1rem;
+:host([scale=l]) .previous, :host([scale=l]) .next {
+  padding-inline: 0.625rem
 }
-
-:host {
-  display: flex;
-  writing-mode: horizontal-tb;
+:host([scale=l]) .page, :host([scale=l]) .ellipsis {
+  padding-inline: 0.75rem
 }
 
 :host button {
-  outline-color: transparent;
+  outline-color: transparent
 }
 :host button:focus {
   outline: 2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));
@@ -66,79 +56,74 @@
                 1
               )
             )
-          );
+          )
 }
 
 .previous,
 .next,
-.page {
+.page,
+.ellipsis {
+  margin: 0px;
   box-sizing: border-box;
   display: flex;
-  cursor: pointer;
   align-items: center;
+  justify-content: center;
   border-style: none;
   --tw-border-opacity: 0;
   background-color: transparent;
+  padding: 0px;
+  vertical-align: baseline;
   font-family: inherit;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
-  color: var(--calcite-ui-text-3);
-  border-block: 2px solid transparent;
+  color: var(--calcite-ui-text-3)
+}
+
+.previous,
+.next,
+.page {
+  cursor: pointer;
+  border-block: 2px solid transparent
 }
 .previous:hover,
 .next:hover,
 .page:hover {
   color: var(--calcite-ui-text-1);
-  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s
 }
 
 .page:hover {
-  border-block-end-color: var(--calcite-ui-border-2);
+  border-block-end-color: var(--calcite-ui-border-2)
 }
 .page.is-selected {
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
-  border-block-end-color: var(--calcite-ui-brand);
+  border-block-end-color: var(--calcite-ui-brand)
 }
 
 .previous:hover,
 .next:hover {
   background-color: var(--calcite-ui-foreground-2);
-  color: var(--calcite-ui-brand);
+  color: var(--calcite-ui-brand)
 }
 .previous:active,
 .next:active {
-  background-color: var(--calcite-ui-foreground-3);
+  background-color: var(--calcite-ui-foreground-3)
 }
 .previous.is-disabled,
 .next.is-disabled {
   pointer-events: none;
-  background-color: transparent;
+  background-color: transparent
 }
 .previous.is-disabled > calcite-icon,
 .next.is-disabled > calcite-icon {
-  opacity: var(--calcite-ui-opacity-disabled);
-}
-
-.next {
-  margin-inline-end: 0px;
-}
-
-.page,
-.ellipsis {
-  padding: var(--calcite-pagination-spacing-internal);
-}
-
-.ellipsis {
-  display: flex;
-  align-items: flex-end;
-  color: var(--calcite-ui-text-3);
+  opacity: var(--calcite-ui-opacity-disabled)
 }
 
 :host([hidden]) {
-  display: none;
+  display: none
 }
 
 [hidden] {
-  display: none;
+  display: none
 }