@esri/calcite-components 1.0.0-next.416 → 1.0.0-next.417

package/dist/extras/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-03-14T20:02:04",
+  "timestamp": "2022-03-15T01:01:50",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.14.1",
@@ -4783,6 +4783,21 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "flipPlacements",
+          "type": "ComputedPlacement[]",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Defines the available placements that can be used when a flip occurs.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "ComputedPlacement[]"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "intlRemoveTag",
           "type": "string",
@@ -6561,6 +6576,21 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "flipPlacements",
+          "type": "ComputedPlacement[]",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Defines the available placements that can be used when a flip occurs.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "ComputedPlacement[]"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "maxItems",
           "type": "number",
@@ -6613,7 +6643,7 @@
               "text": "\"bottom-leading\""
             }
           ],
-          "default": "DefaultDropdownPlacement",
+          "default": "defaultMenuPlacement",
           "values": [
             {
               "value": "bottom",
@@ -9115,6 +9145,21 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "flipPlacements",
+          "type": "ComputedPlacement[]",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Defines the available placements that can be used when a flip occurs.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "ComputedPlacement[]"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "headingLevel",
           "type": "1 | 2 | 3 | 4 | 5 | 6",

package/dist/types/components/combobox/combobox.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="lodash" />
 import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
-import { OverlayPositioning } from "../../utils/popper";
+import { OverlayPositioning, ComputedPlacement } from "../../utils/popper";
 import { StrictModifiers } from "@popperjs/core";
 import { Scale } from "../interfaces";
 import { ComboboxSelectionMode, ComboboxChildElement } from "./interfaces";
@@ -56,6 +56,10 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
    * @default "Remove tag"
    */
   intlRemoveTag: string;
+  /**
+   * Defines the available placements that can be used when a flip occurs.
+   */
+  flipPlacements?: ComputedPlacement[];
   documentClickHandler(event: Event): void;
   calciteComboboxItemChangeHandler(event: CustomEvent<HTMLCalciteComboboxItemElement>): void;
   /** Updates the position of the component. */

package/dist/types/components/combobox/resources.d.ts

@@ -1,7 +1,6 @@
 export declare const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export declare const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
 export declare const ComboboxChildSelector: string;
-export declare const ComboboxDefaultPlacement = "bottom-leading";
 export declare const TEXT: {
   removeTag: string;
 };

package/dist/types/components/dropdown/dropdown.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
-import { DropdownPlacement, ItemKeyboardEvent } from "./interfaces";
-import { OverlayPositioning } from "../../utils/popper";
+import { ItemKeyboardEvent } from "./interfaces";
+import { ComputedPlacement, OverlayPositioning, MenuPlacement } from "../../utils/popper";
 import { StrictModifiers } from "@popperjs/core";
 import { Scale } from "../interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
@@ -21,6 +21,10 @@ export declare class Dropdown implements InteractiveComponent {
   /** is the dropdown disabled  */
   disabled: boolean;
   handleDisabledChange(value: boolean): void;
+  /**
+   * Defines the available placements that can be used when a flip occurs.
+   */
+  flipPlacements?: ComputedPlacement[];
   /**
    specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -
    this value does not include groupTitles passed to calcite-dropdown-group
@@ -33,7 +37,7 @@ export declare class Dropdown implements InteractiveComponent {
    * Determines where the dropdown will be positioned relative to the button.
    * @default "bottom-leading"
    */
-  placement: DropdownPlacement;
+  placement: MenuPlacement;
   placementHandler(): void;
   /** specify the scale of dropdown, defaults to m */
   scale: Scale;

package/dist/types/components/dropdown/interfaces.d.ts

@@ -1,5 +1,3 @@
-import { PopperPlacement } from "../../utils/popper";
 export interface ItemKeyboardEvent {
   keyboardEvent: KeyboardEvent;
 }
-export declare type DropdownPlacement = Extract<PopperPlacement, "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | "top-leading" | "top-trailing" | "bottom-leading" | "bottom-trailing">;

package/dist/types/components/dropdown/resources.d.ts

@@ -1,4 +1,3 @@
-export declare const DefaultDropdownPlacement = "bottom-leading";
 export declare const SLOTS: {
   dropdownTrigger: string;
 };

package/dist/types/components/input-date-picker/input-date-picker.d.ts

@@ -2,7 +2,7 @@ import { VNode, EventEmitter } from "../../stencil-public-runtime";
 import { HeadingLevel } from "../functional/Heading";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
-import { OverlayPositioning } from "../../utils/popper";
+import { OverlayPositioning, ComputedPlacement } from "../../utils/popper";
 import { StrictModifiers } from "@popperjs/core";
 import { DateRangeChange } from "../date-picker/interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
@@ -16,6 +16,10 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   /** Selected date */
   value: string | string[];
   valueHandler(value: string | string[]): void;
+  /**
+   * Defines the available placements that can be used when a flip occurs.
+   */
+  flipPlacements?: ComputedPlacement[];
   /**
    * Number at which section headings should start for this component.
    */

package/dist/types/components.d.ts

@@ -8,7 +8,7 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AccordionAppearance } from "./components/accordion/interfaces";
 import { Alignment, Appearance, Columns, FlipContext, Layout, Position, Scale, Status, Width } from "./components/interfaces";
 import { Placement } from "@popperjs/core";
-import { OverlayPositioning, PopperPlacement } from "./utils/popper";
+import { ComputedPlacement, MenuPlacement, OverlayPositioning, PopperPlacement } from "./utils/popper";
 import { AlertDuration, AlertPlacement, StatusColor } from "./components/alert/interfaces";
 import { HeadingLevel } from "./components/functional/Heading";
 import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
@@ -20,8 +20,8 @@ import { ComboboxChildElement, ComboboxSelectionMode } from "./components/combob
 import { DateRangeChange } from "./components/date-picker/interfaces";
 import { DateLocaleData } from "./components/date-picker/utils";
 import { HoverRange } from "./utils/date";
-import { DropdownPlacement, ItemKeyboardEvent } from "./components/dropdown/interfaces";
 import { SelectionMode } from "./components/dropdown-group/interfaces";
+import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
 import { ColorStop, DataSeries } from "./components/graph/interfaces";
 import { InputPlacement } from "./components/input/interfaces";
 import { ModalBackgroundColor } from "./components/modal/interfaces";
@@ -822,6 +822,10 @@ export namespace Components {
           * Disable combobox input
          */
         "disabled": boolean;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: ComputedPlacement[];
         /**
           * string to override the English "Remove tag" text for when an item is selected.
           * @default "Remove tag"
@@ -1160,6 +1164,10 @@ export namespace Components {
           * is the dropdown disabled
          */
         "disabled": boolean;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: ComputedPlacement[];
         /**
           * specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 - this value does not include groupTitles passed to calcite-dropdown-group
          */
@@ -1172,7 +1180,7 @@ export namespace Components {
           * Determines where the dropdown will be positioned relative to the button.
           * @default "bottom-leading"
          */
-        "placement": DropdownPlacement;
+        "placement": MenuPlacement;
         /**
           * Updates the position of the component.
          */
@@ -1595,6 +1603,10 @@ export namespace Components {
           * @deprecated use valueAsDate instead
          */
         "endAsDate"?: Date;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: ComputedPlacement[];
         /**
           * Number at which section headings should start for this component.
          */
@@ -4917,6 +4929,10 @@ declare namespace LocalJSX {
           * Disable combobox input
          */
         "disabled"?: boolean;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: ComputedPlacement[];
         /**
           * string to override the English "Remove tag" text for when an item is selected.
           * @default "Remove tag"
@@ -5284,6 +5300,10 @@ declare namespace LocalJSX {
           * is the dropdown disabled
          */
         "disabled"?: boolean;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: ComputedPlacement[];
         /**
           * specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 - this value does not include groupTitles passed to calcite-dropdown-group
          */
@@ -5308,7 +5328,7 @@ declare namespace LocalJSX {
           * Determines where the dropdown will be positioned relative to the button.
           * @default "bottom-leading"
          */
-        "placement"?: DropdownPlacement;
+        "placement"?: MenuPlacement;
         /**
           * specify the scale of dropdown, defaults to m
          */
@@ -5720,6 +5740,10 @@ declare namespace LocalJSX {
           * @deprecated use valueAsDate instead
          */
         "endAsDate"?: Date;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: ComputedPlacement[];
         /**
           * Number at which section headings should start for this component.
          */

package/dist/types/utils/popper.d.ts

@@ -1,8 +1,15 @@
-import { Placement, Instance as Popper, StrictModifiers, PositioningStrategy } from "@popperjs/core";
+import { Placement, ComputedPlacement as PopperComputedPlacement, Instance as Popper, StrictModifiers, PositioningStrategy } from "@popperjs/core";
 declare type PlacementRtl = "leading-start" | "leading" | "leading-end" | "trailing-end" | "trailing" | "trailing-start";
 declare type VariationRtl = "leading-leading" | "leading-trailing" | "trailing-leading" | "trailing-trailing" | "top-leading" | "top-trailing" | "bottom-leading" | "bottom-trailing" | "right-leading" | "right-trailing" | "left-leading" | "left-trailing";
+export declare type ComputedPlacement = PopperComputedPlacement;
 export declare type PopperPlacement = Placement | PlacementRtl | VariationRtl;
 export declare type OverlayPositioning = PositioningStrategy;
+export declare const popperPlacements: PopperPlacement[];
+export declare const popperFlipPlacements: ComputedPlacement[];
+export declare type MenuPlacement = Extract<PopperPlacement, "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | "top-leading" | "top-trailing" | "bottom-leading" | "bottom-trailing">;
+export declare const defaultMenuPlacement: MenuPlacement;
+export declare const popperMenuPlacements: MenuPlacement[];
+export declare const popperMenuFlipPlacements: ComputedPlacement[];
 export declare const CSS: {
   animation: string;
   animationActive: string;

package/hydrate/index.js

@@ -13736,6 +13736,10 @@ function getContainingBlock(element) {
 
   var currentNode = getParentNode(element);
 
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
+
   while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
     var css = getComputedStyle$1(currentNode); // This is non-exhaustive but covers the most common CSS properties that
     // create a containing block.
@@ -13959,7 +13963,7 @@ function mapToStyles(_ref2) {
 
     if (placement === top || (placement === left || placement === right) && variation === end) {
       sideY = bottom;
-      var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+      var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
       offsetParent[heightProp];
       y -= offsetY - popperRect.height;
       y *= gpuAcceleration ? 1 : -1;
@@ -13967,7 +13971,7 @@ function mapToStyles(_ref2) {
 
     if (placement === left || (placement === top || placement === bottom) && variation === end) {
       sideX = right;
-      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+      var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
       offsetParent[widthProp];
       x -= offsetX - popperRect.width;
       x *= gpuAcceleration ? 1 : -1;
@@ -15219,6 +15223,15 @@ var createPopper$1 = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
+const defaultMenuPlacement = "bottom-leading";
+const popperMenuFlipPlacements = [
+  "top-start",
+  "top",
+  "top-end",
+  "bottom-start",
+  "bottom",
+  "bottom-end"
+];
 const CSS$D = {
   animation: "calcite-popper-anim",
   animationActive: "calcite-popper-anim--active"
@@ -15262,7 +15275,6 @@ const defaultOffsetDistance = Math.ceil(hypotenuse(visiblePointerSize, visiblePo
 const ComboboxItem$1 = "CALCITE-COMBOBOX-ITEM";
 const ComboboxItemGroup$1 = "CALCITE-COMBOBOX-ITEM-GROUP";
 const ComboboxChildSelector = `${ComboboxItem$1}, ${ComboboxItemGroup$1}`;
-const ComboboxDefaultPlacement = "bottom-leading";
 const TEXT$f = {
   removeTag: "Remove tag"
 };
@@ -15633,7 +15645,7 @@ class Combobox {
       ? await updatePopper({
         el: menuEl,
         modifiers,
-        placement: ComboboxDefaultPlacement,
+        placement: defaultMenuPlacement,
         popper
       })
       : this.createPopper();
@@ -15697,7 +15709,7 @@ class Combobox {
       enabled: true
     };
     flipModifier.options = {
-      fallbackPlacements: ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"]
+      fallbackPlacements: this.flipPlacements || popperMenuFlipPlacements
     };
     const eventListenerModifier = {
       name: "eventListeners",
@@ -15713,7 +15725,7 @@ class Combobox {
       el: menuEl,
       modifiers,
       overlayPositioning,
-      placement: ComboboxDefaultPlacement,
+      placement: defaultMenuPlacement,
       referenceEl
     });
   }
@@ -16045,6 +16057,7 @@ class Combobox {
       "scale": [513],
       "value": [1025],
       "intlRemoveTag": [1, "intl-remove-tag"],
+      "flipPlacements": [16],
       "items": [32],
       "groupItems": [32],
       "selectedItems": [32],
@@ -17509,7 +17522,6 @@ class DatePickerMonthHeader {
   }; }
 }
 
-const DefaultDropdownPlacement = "bottom-leading";
 const SLOTS$h = {
   dropdownTrigger: "dropdown-trigger"
 };
@@ -17551,7 +17563,7 @@ class Dropdown {
      * Determines where the dropdown will be positioned relative to the button.
      * @default "bottom-leading"
      */
-    this.placement = DefaultDropdownPlacement;
+    this.placement = defaultMenuPlacement;
     /** specify the scale of dropdown, defaults to m */
     this.scale = "m";
     /**
@@ -17790,7 +17802,7 @@ class Dropdown {
       enabled: true
     };
     flipModifier.options = {
-      fallbackPlacements: ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"]
+      fallbackPlacements: this.flipPlacements || popperMenuFlipPlacements
     };
     const eventListenerModifier = {
       name: "eventListeners",
@@ -17896,6 +17908,7 @@ class Dropdown {
       "active": [1540],
       "disableCloseOnSelect": [516, "disable-close-on-select"],
       "disabled": [516],
+      "flipPlacements": [16],
       "maxItems": [2, "max-items"],
       "overlayPositioning": [1, "overlay-positioning"],
       "placement": [513],
@@ -19798,7 +19811,6 @@ class Input {
 
 const inputDatePickerCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-input-date-picker:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-input-date-picker{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-input-date-picker{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-input-date-picker{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-input-date-picker{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-input-date-picker{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:host*/.sc-calcite-input-date-picker-h{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}/*!@:root*/.sc-calcite-input-date-picker:root{--calcite-popper-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-input-date-picker-h{display:none}/*!@:host*/.sc-calcite-input-date-picker-h{position:relative;display:inline-block;width:100%;overflow:visible;vertical-align:top;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}/*!@:host([disabled])*/[disabled].sc-calcite-input-date-picker-h{pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-input-date-picker-h[disabled] .sc-calcite-input-date-picker-s>[calcite-hydrated][disabled],[disabled].sc-calcite-input-date-picker-h [calcite-hydrated][disabled].sc-calcite-input-date-picker{opacity:1}/*!@.calendar-picker-wrapper*/.calendar-picker-wrapper.sc-calcite-input-date-picker{position:static;width:100%;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}/*!@.input-wrapper*/.input-wrapper.sc-calcite-input-date-picker{position:relative}/*!@:host([range]) .input-container*/[range].sc-calcite-input-date-picker-h .input-container.sc-calcite-input-date-picker{display:-ms-flexbox;display:flex}/*!@:host([range]) .input-wrapper*/[range].sc-calcite-input-date-picker-h .input-wrapper.sc-calcite-input-date-picker{-ms-flex:1 1 auto;flex:1 1 auto}/*!@:host([range]) .horizontal-arrow-container*/[range].sc-calcite-input-date-picker-h .horizontal-arrow-container.sc-calcite-input-date-picker{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-width:1px;border-left-width:0px;border-right-width:0px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-background);padding-top:0px;padding-bottom:0px;padding-left:0.25rem;padding-right:0.25rem}/*!@:host([range][layout=vertical]) .input-wrapper*/[range][layout=vertical].sc-calcite-input-date-picker-h .input-wrapper.sc-calcite-input-date-picker{width:100%}/*!@:host([range][layout=vertical]) .input-container*/[range][layout=vertical].sc-calcite-input-date-picker-h .input-container.sc-calcite-input-date-picker{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}/*!@:host([range][layout=vertical]) .calendar-picker-wrapper--end*/[range][layout=vertical].sc-calcite-input-date-picker-h .calendar-picker-wrapper--end.sc-calcite-input-date-picker{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}/*!@:host([range][layout=vertical]) .vertical-arrow-container*/[range][layout=vertical].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker{top:1.5rem;position:absolute;left:0px;z-index:10;margin-left:1px;margin-right:1px;background-color:var(--calcite-ui-foreground-1);padding-left:0.625rem;padding-right:0.625rem}/*!@:host([scale=s][range]:not([layout=vertical])) .calendar-picker-wrapper*/[scale=s][range].sc-calcite-input-date-picker-h:not([layout=vertical]) .calendar-picker-wrapper.sc-calcite-input-date-picker{width:216px}/*!@:host([scale=m][range]:not([layout=vertical])) .calendar-picker-wrapper*/[scale=m][range].sc-calcite-input-date-picker-h:not([layout=vertical]) .calendar-picker-wrapper.sc-calcite-input-date-picker{width:286px}/*!@:host([scale=l][range]:not([layout=vertical])) .calendar-picker-wrapper*/[scale=l][range].sc-calcite-input-date-picker-h:not([layout=vertical]) .calendar-picker-wrapper.sc-calcite-input-date-picker{width:398px}/*!@.menu-container*/.menu-container.sc-calcite-input-date-picker{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none}/*!@.menu-container .calcite-popper-anim*/.menu-container.sc-calcite-input-date-picker .calcite-popper-anim.sc-calcite-input-date-picker{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}/*!@.menu-container[data-popper-placement^=bottom] .calcite-popper-anim*/.menu-container[data-popper-placement^=bottom].sc-calcite-input-date-picker .calcite-popper-anim.sc-calcite-input-date-picker{-webkit-transform:translateY(-5px);transform:translateY(-5px)}/*!@.menu-container[data-popper-placement^=top] .calcite-popper-anim*/.menu-container[data-popper-placement^=top].sc-calcite-input-date-picker .calcite-popper-anim.sc-calcite-input-date-picker{-webkit-transform:translateY(5px);transform:translateY(5px)}/*!@.menu-container[data-popper-placement^=left] .calcite-popper-anim*/.menu-container[data-popper-placement^=left].sc-calcite-input-date-picker .calcite-popper-anim.sc-calcite-input-date-picker{-webkit-transform:translateX(5px);transform:translateX(5px)}/*!@.menu-container[data-popper-placement^=right] .calcite-popper-anim*/.menu-container[data-popper-placement^=right].sc-calcite-input-date-picker .calcite-popper-anim.sc-calcite-input-date-picker{-webkit-transform:translateX(-5px);transform:translateX(-5px)}/*!@.menu-container[data-popper-placement] .calcite-popper-anim--active*/.menu-container[data-popper-placement].sc-calcite-input-date-picker .calcite-popper-anim--active.sc-calcite-input-date-picker{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}/*!@.menu-container--active .menu-container .calcite-popper-anim*/.menu-container--active.sc-calcite-input-date-picker .menu-container.sc-calcite-input-date-picker .calcite-popper-anim.sc-calcite-input-date-picker{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}/*!@.menu-container--active .menu-container[data-popper-placement^=bottom] .calcite-popper-anim*/.menu-container--active.sc-calcite-input-date-picker .menu-container[data-popper-placement^=bottom].sc-calcite-input-date-picker .calcite-popper-anim.sc-calcite-input-date-picker{-webkit-transform:translateY(-5px);transform:translateY(-5px)}/*!@.menu-container--active .menu-container[data-popper-placement^=top] .calcite-popper-anim*/.menu-container--active.sc-calcite-input-date-picker .menu-container[data-popper-placement^=top].sc-calcite-input-date-picker .calcite-popper-anim.sc-calcite-input-date-picker{-webkit-transform:translateY(5px);transform:translateY(5px)}/*!@.menu-container--active .menu-container[data-popper-placement^=left] .calcite-popper-anim*/.menu-container--active.sc-calcite-input-date-picker .menu-container[data-popper-placement^=left].sc-calcite-input-date-picker .calcite-popper-anim.sc-calcite-input-date-picker{-webkit-transform:translateX(5px);transform:translateX(5px)}/*!@.menu-container--active .menu-container[data-popper-placement^=right] .calcite-popper-anim*/.menu-container--active.sc-calcite-input-date-picker .menu-container[data-popper-placement^=right].sc-calcite-input-date-picker .calcite-popper-anim.sc-calcite-input-date-picker{-webkit-transform:translateX(-5px);transform:translateX(-5px)}/*!@.menu-container--active .menu-container[data-popper-placement] .calcite-popper-anim--active*/.menu-container--active.sc-calcite-input-date-picker .menu-container[data-popper-placement].sc-calcite-input-date-picker .calcite-popper-anim--active.sc-calcite-input-date-picker{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}/*!@.input .calcite-input__wrapper*/.input.sc-calcite-input-date-picker .calcite-input__wrapper.sc-calcite-input-date-picker{margin-top:0px}/*!@:host([range][layout=vertical][scale=m]) .vertical-arrow-container*/[range][layout=vertical][scale=m].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker{top:1.5rem;padding-left:0.75rem}/*!@:host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon*/[range][layout=vertical][scale=m].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker calcite-icon.sc-calcite-input-date-picker{height:0.75rem;width:0.75rem;min-width:0px}/*!@:host([range][layout=vertical][scale=l]) .vertical-arrow-container*/[range][layout=vertical][scale=l].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker{top:2.25rem;padding-left:0.875rem;padding-right:0.875rem}/*!@:host([range][layout=vertical][active]) .vertical-arrow-container*/[range][layout=vertical][active].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker{display:none}/*!@::slotted(input[slot=hidden-form-input])*/.sc-calcite-input-date-picker-s>input[slot=hidden-form-input]{bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
-const DEFAULT_PLACEMENT = "bottom-leading";
 class InputDatePicker {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -19992,7 +20004,7 @@ class InputDatePicker {
       ? await updatePopper({
         el: menuEl,
         modifiers,
-        placement: DEFAULT_PLACEMENT,
+        placement: defaultMenuPlacement,
         popper
       })
       : this.createPopper();
@@ -20086,7 +20098,7 @@ class InputDatePicker {
       enabled: true
     };
     flipModifier.options = {
-      fallbackPlacements: ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"]
+      fallbackPlacements: this.flipPlacements || popperMenuFlipPlacements
     };
     const eventListenerModifier = {
       name: "eventListeners",
@@ -20105,7 +20117,7 @@ class InputDatePicker {
       el: menuEl,
       modifiers,
       overlayPositioning,
-      placement: DEFAULT_PLACEMENT,
+      placement: defaultMenuPlacement,
       referenceEl
     });
   }
@@ -20263,6 +20275,7 @@ class InputDatePicker {
     "$members$": {
       "disabled": [516],
       "value": [1025],
+      "flipPlacements": [16],
       "headingLevel": [2, "heading-level"],
       "valueAsDate": [1040],
       "startAsDate": [1040],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.416",
+  "version": "1.0.0-next.417",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -59,7 +59,7 @@
   },
   "dependencies": {
     "@a11y/focus-trap": "1.0.5",
-    "@popperjs/core": "2.11.2",
+    "@popperjs/core": "2.11.4",
     "@stencil/core": "2.14.1",
     "@types/color": "3.0.3",
     "color": "4.2.1",

package/dist/calcite/p-577bc6de.entry.js

@@ -1,5 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- */
-import{r as t,c as i,h as e,H as n,g as a}from"./p-6b7b23d0.js";import{g as o,f as r,d as s}from"./p-8f3a3e4e.js";import{C as c,u as l,c as m}from"./p-eeb91710.js";import{c as d}from"./p-0a5d059d.js";import{u as p}from"./p-bd38ff21.js";import"./p-8a63221d.js";const h=class{constructor(e){t(this,e),this.calciteDropdownSelect=i(this,"calciteDropdownSelect",7),this.calciteDropdownOpen=i(this,"calciteDropdownOpen",7),this.calciteDropdownClose=i(this,"calciteDropdownClose",7),this.active=!1,this.disableCloseOnSelect=!1,this.disabled=!1,this.maxItems=0,this.overlayPositioning="absolute",this.placement="bottom-leading",this.scale="m",this.selectedItems=[],this.type="click",this.width="m",this.items=[],this.activeTransitionProp="visibility",this.mutationObserver=d("mutation",(()=>this.updateItems())),this.resizeObserver=d("resize",(()=>this.setMaxScrollerHeight())),this.updateItems=()=>{this.updateSelectedItems(),this.triggers=o(this.el,"dropdown-trigger",{all:!0}),this.items=Array.from(this.el.querySelectorAll("calcite-dropdown-item")),this.reposition()},this.setMaxScrollerHeight=()=>{const{active:t,scrollerEl:i}=this;if(!i||!t)return;this.reposition();const e=this.getMaxScrollerHeight();i.style.maxHeight=e>0?`${e}px`:"",this.reposition()},this.setScrollerEl=t=>{this.resizeObserver.observe(t),this.scrollerEl=t},this.transitionEnd=t=>{t.propertyName===this.activeTransitionProp&&(this.active?this.calciteDropdownOpen.emit():this.calciteDropdownClose.emit())},this.setReferenceEl=t=>{this.referenceEl=t},this.setMenuEl=t=>{this.menuEl=t},this.keyDownHandler=t=>{const i=t.target,e=t.key;if(this.triggers.includes(i)||this.triggers.some((t=>t.contains(i)))){if(["BUTTON","CALCITE-BUTTON","CALCITE-ACTION"].includes(i.nodeName))return void(this.active&&("Escape"===e||t.shiftKey&&"Tab"===e)&&this.closeCalciteDropdown());switch(e){case" ":case"Enter":this.openCalciteDropdown();break;case"Escape":this.closeCalciteDropdown()}}},this.focusOnFirstActiveOrFirstItem=()=>{this.getFocusableElement(this.items.find((t=>t.active))||this.items[0])},this.toggleOpenEnd=()=>{this.focusOnFirstActiveOrFirstItem(),this.el.removeEventListener("calciteDropdownOpen",this.toggleOpenEnd)},this.openCalciteDropdown=()=>{this.active=!this.active,this.active&&this.el.addEventListener("calciteDropdownOpen",this.toggleOpenEnd)}}activeHandler(){this.disabled?this.active=!1:this.reposition()}handleDisabledChange(t){t||(this.active=!1)}maxItemsHandler(){this.setMaxScrollerHeight()}placementHandler(){this.reposition()}connectedCallback(){var t;null===(t=this.mutationObserver)||void 0===t||t.observe(this.el,{childList:!0,subtree:!0}),this.createPopper(),this.updateItems()}componentDidLoad(){this.reposition()}componentDidRender(){p(this)}disconnectedCallback(){var t,i;null===(t=this.mutationObserver)||void 0===t||t.disconnect(),null===(i=this.resizeObserver)||void 0===i||i.disconnect(),this.destroyPopper()}render(){const{active:t}=this;return e(n,null,e("div",{class:"calcite-dropdown-trigger-container",onClick:this.openCalciteDropdown,onKeyDown:this.keyDownHandler,ref:this.setReferenceEl},e("slot",{"aria-expanded":t.toString(),"aria-haspopup":"true",name:"dropdown-trigger"})),e("div",{"aria-hidden":(!t).toString(),class:"calcite-dropdown-wrapper",ref:this.setMenuEl},e("div",{class:{"calcite-dropdown-content":!0,[c.animation]:!0,[c.animationActive]:t},onTransitionEnd:this.transitionEnd,ref:this.setScrollerEl},e("div",{hidden:!this.active},e("slot",null)))))}async reposition(){const{popper:t,menuEl:i,placement:e}=this,n=this.getModifiers();t?await l({el:i,modifiers:n,placement:e,popper:t}):this.createPopper()}closeCalciteDropdownOnClick(t){this.active&&!t.composedPath().includes(this.el)&&this.closeCalciteDropdown(!1)}closeCalciteDropdownOnEvent(){this.closeCalciteDropdown()}closeCalciteDropdownOnOpenEvent(t){t.composedPath().includes(this.el)||(this.active=!1)}mouseEnterHandler(){"hover"===this.type&&this.openCalciteDropdown()}mouseLeaveHandler(){"hover"===this.type&&this.closeCalciteDropdown()}calciteDropdownItemKeyEvent(t){const{keyboardEvent:i}=t.detail,e=i.target,n="A"!==e.nodeName?e:e.parentNode,a=0===this.itemIndex(n),o=this.itemIndex(n)===this.items.length-1;switch(i.key){case"Tab":o&&!i.shiftKey||a&&i.shiftKey?this.closeCalciteDropdown():i.shiftKey?this.focusPrevItem(n):this.focusNextItem(n);break;case"ArrowDown":this.focusNextItem(n);break;case"ArrowUp":this.focusPrevItem(n);break;case"Home":this.focusFirstItem();break;case"End":this.focusLastItem()}t.stopPropagation()}handleItemSelect(t){this.updateSelectedItems(),t.stopPropagation(),this.calciteDropdownSelect.emit(),this.disableCloseOnSelect&&"none"!==t.detail.requestedDropdownGroup.selectionMode||this.closeCalciteDropdown()}getModifiers(){return[{name:"flip",enabled:!0,options:{fallbackPlacements:["top-start","top","top-end","bottom-start","bottom","bottom-end"]}},{name:"eventListeners",enabled:this.active}]}createPopper(){this.destroyPopper();const{menuEl:t,referenceEl:i,placement:e,overlayPositioning:n}=this,a=this.getModifiers();this.popper=m({el:t,modifiers:a,overlayPositioning:n,placement:e,referenceEl:i})}destroyPopper(){const{popper:t}=this;t&&t.destroy(),this.popper=null}updateSelectedItems(){const t=Array.from(this.el.querySelectorAll("calcite-dropdown-item"));this.selectedItems=t.filter((t=>t.active))}getMaxScrollerHeight(){const t=Array.from(this.el.querySelectorAll("calcite-dropdown-group")),{maxItems:i}=this;let e,n=0,a=0;return t.forEach((t=>{i>0&&n<i&&Array.from(t.children).forEach(((t,o)=>{0===o&&(isNaN(e)&&(e=t.offsetTop),a+=e),n<i&&(a+=t.offsetHeight,n+=1)}))})),a}closeCalciteDropdown(t=!0){this.active=!1,t&&r(this.triggers[0])}focusFirstItem(){this.getFocusableElement(this.items[0])}focusLastItem(){this.getFocusableElement(this.items[this.items.length-1])}focusNextItem(t){const i=this.itemIndex(t);this.getFocusableElement(this.items[i+1]||this.items[0])}focusPrevItem(t){const i=this.itemIndex(t);this.getFocusableElement(this.items[i-1]||this.items[this.items.length-1])}itemIndex(t){return this.items.indexOf(t)}getFocusableElement(t){if(!t)return;const i=t.attributes.isLink?t.shadowRoot.querySelector("a"):t;r(i)}get el(){return a(this)}static get watchers(){return{active:["activeHandler"],disabled:["handleDisabledChange"],maxItems:["maxItemsHandler"],placement:["placementHandler"]}}};h.style="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 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);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:0 1 auto;flex:0 1 auto}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host .calcite-dropdown-wrapper{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none}.calcite-dropdown-wrapper .calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}.calcite-dropdown-wrapper[data-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.calcite-dropdown-wrapper[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.calcite-dropdown-wrapper[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.calcite-dropdown-wrapper[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.calcite-dropdown-wrapper[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([active]) .calcite-dropdown-wrapper{pointer-events:initial;visibility:visible}:host .calcite-dropdown-content{width:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-ui-foreground-1);max-height:90vh;width:var(--calcite-dropdown-width)}.calcite-dropdown-trigger-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto}:host([width=s]){--calcite-dropdown-width:12rem}:host([width=m]){--calcite-dropdown-width:14rem}:host([width=l]){--calcite-dropdown-width:16rem}";const w=class{constructor(e){t(this,e),this.calciteDropdownItemChange=i(this,"calciteDropdownItemChange",7),this.selectionMode="single"}componentWillLoad(){this.groupPosition=this.getGroupPosition()}render(){const t=this.scale||s(this.el,"scale","m"),i=this.groupTitle?e("span",{"aria-hidden":"true",class:"dropdown-title"},this.groupTitle):null,a=this.groupPosition>0?e("div",{class:"dropdown-separator",role:"separator"}):null;return e(n,{role:"menu"},e("div",{class:{container:!0,"container--s":"s"===t,"container--m":"m"===t,"container--l":"l"===t},title:this.groupTitle},a,i,e("slot",null)))}updateActiveItemOnChange(t){this.requestedDropdownGroup=t.detail.requestedDropdownGroup,this.requestedDropdownItem=t.detail.requestedDropdownItem,this.calciteDropdownItemChange.emit({requestedDropdownGroup:this.requestedDropdownGroup,requestedDropdownItem:this.requestedDropdownItem})}getGroupPosition(){return Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-dropdown-group"),this.el)}get el(){return a(this)}};w.style="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 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);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block}.container--s{font-size:var(--calcite-font-size--2);line-height:1rem}.container--s .dropdown-title{padding:0.5rem}.container--m{font-size:var(--calcite-font-size--1);line-height:1rem}.container--m .dropdown-title{padding:0.75rem}.container--l{font-size:var(--calcite-font-size-0);line-height:1.25rem}.container--l .dropdown-title{padding:1rem}.dropdown-title{margin-bottom:-1px;display:block;cursor:default;overflow-wrap:break-word;border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-2)}.dropdown-separator{display:block;height:1px;background-color:var(--calcite-ui-border-3)}";const f=class{constructor(e){t(this,e),this.calciteDropdownItemSelect=i(this,"calciteDropdownItemSelect",7),this.calciteDropdownItemKeyEvent=i(this,"calciteDropdownItemKeyEvent",7),this.calciteDropdownCloseRequest=i(this,"calciteDropdownCloseRequest",7),this.active=!1}async setFocus(){this.el.focus()}connectedCallback(){this.selectionMode=s(this.el,"selection-mode","single"),this.parentDropdownGroupEl=this.el.closest("calcite-dropdown-group"),"none"===this.selectionMode&&(this.active=!1)}render(){const t=s(this.el,"scale","m"),i=e("calcite-icon",{class:"dropdown-item-icon-start",flipRtl:"start"===this.iconFlipRtl||"both"===this.iconFlipRtl,icon:this.iconStart,scale:"s"}),a=e("span",{class:"dropdown-item-content"},e("slot",null)),o=e("calcite-icon",{class:"dropdown-item-icon-end",flipRtl:"end"===this.iconFlipRtl||"both"===this.iconFlipRtl,icon:this.iconEnd,scale:"s"}),r=this.iconStart&&this.iconEnd?[i,a,o]:this.iconStart?[i,e("slot",null)]:this.iconEnd?[a,o]:a,c=this.href?e("a",{"aria-label":this.label,class:"dropdown-link",href:this.href,ref:t=>this.childLink=t,rel:this.rel,target:this.target},r):r,l=this.href?null:"single"===this.selectionMode?"menuitemradio":"multi"===this.selectionMode?"menuitemcheckbox":"menuitem",m="none"!==this.selectionMode?this.active.toString():null;return e(n,{"aria-checked":m,role:l,tabindex:"0"},e("div",{class:{container:!0,"container--link":!!this.href,"container--s":"s"===t,"container--m":"m"===t,"container--l":"l"===t,"container--multi-selection":"multi"===this.selectionMode,"container--single-selection":"single"===this.selectionMode,"container--none-selection":"none"===this.selectionMode}},"none"!==this.selectionMode?e("calcite-icon",{class:"dropdown-item-icon",icon:"multi"===this.selectionMode?"check":"bullet-point",scale:"s"}):null,c))}onClick(){this.emitRequestedItem()}keyDownHandler(t){switch(t.key){case" ":this.emitRequestedItem(),this.href&&(t.preventDefault(),this.childLink.click());break;case"Enter":this.emitRequestedItem(),this.href&&this.childLink.click();break;case"Escape":this.calciteDropdownCloseRequest.emit();break;case"Tab":case"ArrowUp":case"ArrowDown":case"Home":case"End":this.calciteDropdownItemKeyEvent.emit({keyboardEvent:t})}t.preventDefault()}updateActiveItemOnChange(t){t.composedPath().includes(this.parentDropdownGroupEl)&&(this.requestedDropdownGroup=t.detail.requestedDropdownGroup,this.requestedDropdownItem=t.detail.requestedDropdownItem,this.determineActiveItem())}determineActiveItem(){switch(this.selectionMode){case"multi":this.el===this.requestedDropdownItem&&(this.active=!this.active);break;case"single":this.el===this.requestedDropdownItem?this.active=!0:this.requestedDropdownGroup===this.parentDropdownGroupEl&&(this.active=!1);break;case"none":this.active=!1}}emitRequestedItem(){this.calciteDropdownItemSelect.emit({requestedDropdownItem:this.el,requestedDropdownGroup:this.parentDropdownGroupEl})}get el(){return a(this)}};f.style="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 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);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}.container--s{padding-top:0.25rem;padding-bottom:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem;-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}.container--m{padding-top:0.5rem;padding-bottom:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;-webkit-padding-end:0.75rem;padding-inline-end:0.75rem;-webkit-padding-start:2rem;padding-inline-start:2rem}.container--l{padding-top:0.75rem;padding-bottom:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;-webkit-padding-end:1rem;padding-inline-end:1rem;-webkit-padding-start:2.5rem;padding-inline-start:2.5rem}.container--s.container--none-selection{-webkit-padding-start:0.25rem;padding-inline-start:0.25rem}.container--s.container--none-selection .dropdown-link{-webkit-padding-start:0px;padding-inline-start:0px}.container--m.container--none-selection{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.container--m.container--none-selection .dropdown-link{-webkit-padding-start:0px;padding-inline-start:0px}.container--l.container--none-selection{-webkit-padding-start:0.75rem;padding-inline-start:0.75rem}.container--l.container--none-selection .dropdown-link{-webkit-padding-start:0px;padding-inline-start:0px}:host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}.container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;cursor:pointer;-ms-flex-align:center;align-items:center;color:var(--calcite-ui-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;outline:2px solid transparent;outline-offset:2px;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.dropdown-item-content{-ms-flex:1 1 auto;flex:1 1 auto;-webkit-padding-end:auto;padding-inline-end:auto;-webkit-padding-start:0.25rem;padding-inline-start:0.25rem}:host,.container--link a{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host(:focus){outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.container--link{padding:0px}.container--link a{position:relative;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;cursor:pointer;-ms-flex-align:center;align-items:center;color:var(--calcite-ui-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;outline:2px solid transparent;outline-offset:2px;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.container--s .dropdown-link{padding-top:0.25rem;padding-bottom:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem;-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}.container--m .dropdown-link{padding-top:0.5rem;padding-bottom:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;-webkit-padding-end:0.75rem;padding-inline-end:0.75rem;-webkit-padding-start:2rem;padding-inline-start:2rem}.container--l .dropdown-link{padding-top:0.75rem;padding-bottom:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;-webkit-padding-end:1rem;padding-inline-end:1rem;-webkit-padding-start:2.5rem;padding-inline-start:2.5rem}:host(:hover) .container,:host(:active) .container{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host(:hover) .container--link .dropdown-link,:host(:active) .container--link .dropdown-link{color:var(--calcite-ui-text-1)}:host(:focus) .container{color:var(--calcite-ui-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host(:active) .container{background-color:var(--calcite-ui-foreground-3)}:host(:hover) .container:before,:host(:active) .container:before,:host(:focus) .container:before{opacity:1}:host([active]) .container:not(.container--none-selection),:host([active]) .container--link .dropdown-link{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}:host([active]) .container:not(.container--none-selection):before,:host([active]) .container--link .dropdown-link:before{opacity:1;color:var(--calcite-ui-brand)}:host([active]) .container:not(.container--none-selection) calcite-icon,:host([active]) .container--link .dropdown-link calcite-icon{color:var(--calcite-ui-brand)}.container--multi-selection:before,.container--none-selection:before{display:none}.container--s:before{inset-inline-start:0.5rem}.container--m:before{inset-inline-start:0.75rem}.container--l:before{inset-inline-start:1rem}.dropdown-item-icon{position:absolute;opacity:0;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(0.9);transform:scale(0.9)}.container--s .dropdown-item-icon{inset-inline-start:0.25rem}.container--m .dropdown-item-icon{inset-inline-start:0.5rem}.container--l .dropdown-item-icon{inset-inline-start:0.75rem}:host(:hover) .dropdown-item-icon{color:var(--calcite-ui-border-1);opacity:1}:host([active]) .dropdown-item-icon{color:var(--calcite-ui-brand);opacity:1}.container--s .dropdown-item-icon-start{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem;-webkit-margin-start:0.25rem;margin-inline-start:0.25rem}.container--s .dropdown-item-icon-end{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.container--m .dropdown-item-icon-start{-webkit-margin-end:0.75rem;margin-inline-end:0.75rem;-webkit-margin-start:0.25rem;margin-inline-start:0.25rem}.container--m .dropdown-item-icon-end{-webkit-margin-start:0.75rem;margin-inline-start:0.75rem}.container--l .dropdown-item-icon-start{-webkit-margin-end:1rem;margin-inline-end:1rem;-webkit-margin-start:0.25rem;margin-inline-start:0.25rem}.container--l .dropdown-item-icon-end{-webkit-margin-start:1rem;margin-inline-start:1rem}";export{h as calcite_dropdown,w as calcite_dropdown_group,f as calcite_dropdown_item}