@esri/calcite-components 2.4.1-next.0 → 2.4.1-next.1

package/dist/components/loader.js.map

@@ -1 +1 @@
-{"file":"loader.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,25LAA25L;;MCSh6L,MAAM;;;;;sBAQiB,KAAK;;qBAMC,GAAG;;qBAW3B,CAAC;oBAGF,EAAE;;;;;;;IAQjB,MAAM;QACJ,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE7D,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,IAAI,EAAE,CAAC;QAC3B,MAAM,WAAW,GAAG,IAAI,CAAC;QACzB,MAAM,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACtE,MAAM,MAAM,GAAG,IAAI,GAAG,WAAW,CAAC;QAClC,MAAM,OAAO,GAAG,OAAO,IAAI,IAAI,IAAI,EAAE,CAAC;QACtC,MAAM,aAAa,GAAG,IAAI,KAAK,aAAa,CAAC;QAC7C,MAAM,aAAa,GAAG,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;QAC3C,MAAM,QAAQ,GAAG,CAAC,KAAK,GAAG,GAAG,IAAI,aAAa,CAAC;QAC/C,MAAM,SAAS,GAAG,aAAa,GAAG,QAAQ,CAAC;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACnC,MAAM,cAAc,GAAG;YACrB,eAAe,EAAE,QAAQ;YACzB,eAAe,EAAE,CAAC;YAClB,eAAe,EAAE,GAAG;YACpB,QAAQ,EAAE,QAAQ,KAAK,GAAG;SAC3B,CAAC;QACF,MAAM,aAAa,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,GAAG,CAAC,EAAE,CAAC;QAChE,MAAM,gBAAgB,GAAG,EAAE,kBAAkB,EAAE,GAAG,QAAQ,IAAI,SAAS,EAAE,EAAE,CAAC;QAC5E,QACE,EAAC,IAAI,kBACS,KAAK,EACjB,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,aAAa,MACb,aAAa,GAAG,cAAc,GAAG,EAAE,CAAC,IAEzC,WAAK,KAAK,EAAC,cAAc,IACvB,0BAAiB,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,OAAO,IACzE,iBAAY,aAAa,GAAI,CACzB,EACN,0BAAiB,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,OAAO,IACzE,iBAAY,aAAa,GAAI,CACzB,EACN,0BACc,MAAM,EAClB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,OAAO,MACX,aAAa,GAAG,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAEtD,iBAAY,aAAa,GAAI,CACzB,CACF,EACL,IAAI,IAAI,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAO,EAC9C,aAAa,IAAI,WAAK,KAAK,EAAC,oBAAoB,IAAE,KAAK,CAAO,CAC1D,EACP;KACH;;;;;;;;;;;IAqBO,OAAO,CAAC,KAAa;QAC3B,OAAO;YACL,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;SACN,CAAC,KAAK,CAAC,CAAC;KACV;IAEO,aAAa,CAAC,KAAa;QACjC,OAAO;YACL,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;SACN,CAAC,KAAK,CAAC,CAAC;KACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/loader/loader.scss?tag=calcite-loader&encapsulation=shadow","src/components/loader/loader.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-loader-font-size: Specifies the font size of the loading percentage when type is `\"determinate\"`.\n * @prop --calcite-loader-size: The width and height of a non-inline loader.\n * @prop --calcite-loader-size-inline: The width and height of an inline loader\n * @prop --calcite-loader-padding : Specifies the padding of the loader.\n */\n\n@import \"../../assets/styles/animation\";\n\n$stroke-width: 3;\n$loader-scale: 54;\n$loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --calcite-internal-duration-factor: 0;\n  }\n}\n\n:host {\n  @apply relative mx-auto hidden items-center justify-center opacity-100;\n  min-block-size: var(--calcite-loader-size);\n  font-size: var(--calcite-loader-font-size);\n  stroke: var(--calcite-color-brand);\n  stroke-width: $stroke-width;\n  fill: none;\n  transform: scale(1, 1);\n  animation: loader-color-shift scaleDuration(--calcite-internal-animation-timing-slow, 2) alternate-reverse infinite\n    linear;\n  padding-block: var(--calcite-loader-padding, theme(\"spacing.16\"));\n}\n\n:host([scale=\"s\"]) {\n  --calcite-loader-font-size: theme(\"fontSize.n2\");\n  --calcite-loader-size: theme(\"spacing.8\");\n  --calcite-loader-size-inline: theme(\"spacing.3\");\n}\n\n:host([scale=\"m\"]) {\n  --calcite-loader-font-size: theme(\"fontSize.0\");\n  --calcite-loader-size: theme(\"spacing.16\");\n  --calcite-loader-size-inline: theme(\"spacing.4\");\n}\n\n:host([scale=\"l\"]) {\n  --calcite-loader-font-size: theme(\"fontSize.2\");\n  --calcite-loader-size: theme(\"spacing.24\");\n  --calcite-loader-size-inline: theme(\"spacing.6\");\n}\n\n:host([no-padding]) {\n  @apply py-0;\n}\n\n:host {\n  @apply flex;\n}\n\n.loader__text {\n  @apply text-n2h\n  text-color-1\n  block\n  text-center;\n  margin-block-start: calc(var(--calcite-loader-size) + theme(\"spacing.6\"));\n}\n\n.loader__percentage {\n  @apply text-color-1 absolute block text-center;\n  font-size: var(--calcite-loader-font-size);\n  inline-size: var(--calcite-loader-size);\n  inset-inline-start: 50%;\n  margin-inline-start: calc(var(--calcite-loader-size) / 2 * -1);\n  line-height: 0.25;\n  transform: scale(1, 1);\n}\n\n.loader__svgs {\n  @apply absolute overflow-visible opacity-100;\n  inline-size: var(--calcite-loader-size);\n  block-size: var(--calcite-loader-size);\n  inset-inline-start: 50%;\n  margin-inline-start: calc(var(--calcite-loader-size) / 2 * -1);\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  animation-duration: scaleDuration(--calcite-internal-animation-timing-slow, 6.66);\n  animation-name: loader-clockwise;\n}\n\n.loader__svg {\n  @apply absolute top-0 origin-center overflow-visible;\n  inset-inline-start: 0;\n  inline-size: var(--calcite-loader-size);\n  block-size: var(--calcite-loader-size);\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n}\n\n// in newer browsers use the stroke-dash-offset animation as it looks better\n@supports (display: grid) {\n  .loader__svg--1 {\n    animation-name: loader-offset-1;\n  }\n  .loader__svg--2 {\n    animation-name: loader-offset-2;\n  }\n  .loader__svg--3 {\n    animation-name: loader-offset-3;\n  }\n}\n\n:host([type=\"determinate\"]) {\n  @apply animate-none;\n  stroke: var(--calcite-color-border-3);\n  .loader__svgs {\n    @apply animate-none;\n  }\n  .loader__svg--3 {\n    @apply animate-none;\n    stroke: var(--calcite-color-brand);\n    stroke-dasharray: $loader-circumference;\n    transform: rotate(-90deg);\n    transition: all var(--calcite-internal-animation-timing-fast) linear;\n  }\n}\n\n:host([inline]) {\n  @apply relative m-0 animate-none stroke-current stroke-2 py-0;\n  block-size: var(--calcite-loader-size-inline);\n  min-block-size: var(--calcite-loader-size-inline);\n  inline-size: var(--calcite-loader-size-inline);\n  margin-inline-end: calc(var(--calcite-loader-size-inline) * 0.5);\n  vertical-align: calc(var(--calcite-loader-size-inline) * -1 * 0.2);\n}\n\n:host([inline]) .loader__svgs {\n  @apply top-0 m-0;\n  inset-inline-start: 0;\n  inline-size: var(--calcite-loader-size-inline);\n  block-size: var(--calcite-loader-size-inline);\n}\n\n:host([inline]) .loader__svg {\n  inline-size: var(--calcite-loader-size-inline);\n  block-size: var(--calcite-loader-size-inline);\n}\n\n:host([complete]) {\n  @apply opacity-0;\n  transform: scale(0.75, 0.75);\n  transform-origin: center;\n  transition:\n    opacity var(--calcite-internal-animation-timing-medium) linear 1000ms,\n    transform var(--calcite-internal-animation-timing-medium) linear 1000ms;\n}\n\n:host([complete]) .loader__svgs {\n  @apply opacity-0;\n  transform: scale(0.75, 0.75);\n  transform-origin: center;\n  transition:\n    opacity calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms,\n    transform calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms;\n}\n\n:host([complete]) .loader__percentage {\n  color: theme(\"colors.brand\");\n  transform: scale(1.05, 1.05);\n  transform-origin: center;\n  transition:\n    color var(--calcite-internal-animation-timing-medium) linear,\n    transform var(--calcite-internal-animation-timing-medium) linear;\n}\n\n/**\n  Segment variables\n  - i         index (1-3)\n  - size      length of the segment (0 - 100)\n  - growth    how much the segment grows during the animation\n              (size + growth should not exceed 100)\n  - duration  how long the segment takes to rotate 360° (seconds)\n*/\n@mixin generateSegment($i, $size, $growth, $duration) {\n  $circumference: calc($loader-circumference / $loader-scale) * 100;\n  $length: ($size * 0.01) * $circumference;\n  $end: $length + ($growth * 0.01) * $circumference;\n\n  .loader__svg--#{$i} {\n    stroke-dasharray: $length $circumference - $end;\n    animation-duration: $duration;\n  }\n  @keyframes loader-offset-#{$i} {\n    0% {\n      stroke-dasharray: $length $circumference - $length;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: $end $circumference - $end;\n      stroke-dashoffset: -$circumference * 0.5 - ($length - $end) * 0.5;\n    }\n    100% {\n      stroke-dasharray: $length $circumference - $length;\n      stroke-dashoffset: -$circumference;\n    }\n  }\n}\n\n@include generateSegment(1, 10, 40, scaleDuration(--calcite-internal-animation-timing-slow, 4.8));\n@include generateSegment(2, 20, 30, scaleDuration(--calcite-internal-animation-timing-slow, 6.4));\n@include generateSegment(3, 05, 45, scaleDuration(--calcite-internal-animation-timing-slow, 7.734));\n\n@keyframes loader-color-shift {\n  0% {\n    stroke: var(--calcite-color-brand);\n  }\n  33% {\n    stroke: var(--calcite-color-brand-press);\n  }\n  66% {\n    stroke: var(--calcite-color-brand-hover);\n  }\n  100% {\n    stroke: var(--calcite-color-brand);\n  }\n}\n\n@keyframes loader-clockwise {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@include base-component();\n","import { Component, Element, h, Host, Prop, VNode } from \"@stencil/core\";\nimport { guid } from \"../../utils/guid\";\nimport { Scale } from \"../interfaces\";\n\n@Component({\n  tag: \"calcite-loader\",\n  styleUrl: \"loader.scss\",\n  shadow: true,\n})\nexport class Loader {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays smaller and appears to the left of the text. */\n  @Prop({ reflect: true }) inline = false;\n\n  /** Accessible name for the component. */\n  @Prop() label!: string;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Specifies the component type.\n   *\n   * Use `\"indeterminate\"` if finding actual progress value is impossible.\n   *\n   */\n  @Prop({ reflect: true }) type: \"indeterminate\" | \"determinate\";\n\n  /** The component's value. Valid only for `\"determinate\"` indicators. Percent complete of 100. */\n  @Prop() value = 0;\n\n  /** Text that displays under the component's indicator. */\n  @Prop() text = \"\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const { el, inline, label, scale, text, type, value } = this;\n\n    const id = el.id || guid();\n    const radiusRatio = 0.45;\n    const size = inline ? this.getInlineSize(scale) : this.getSize(scale);\n    const radius = size * radiusRatio;\n    const viewbox = `0 0 ${size} ${size}`;\n    const isDeterminate = type === \"determinate\";\n    const circumference = 2 * radius * Math.PI;\n    const progress = (value / 100) * circumference;\n    const remaining = circumference - progress;\n    const valueNow = Math.floor(value);\n    const hostAttributes = {\n      \"aria-valuenow\": valueNow,\n      \"aria-valuemin\": 0,\n      \"aria-valuemax\": 100,\n      complete: valueNow === 100,\n    };\n    const svgAttributes = { r: radius, cx: size / 2, cy: size / 2 };\n    const determinateStyle = { \"stroke-dasharray\": `${progress} ${remaining}` };\n    return (\n      <Host\n        aria-label={label}\n        id={id}\n        role=\"progressbar\"\n        {...(isDeterminate ? hostAttributes : {})}\n      >\n        <div class=\"loader__svgs\">\n          <svg aria-hidden=\"true\" class=\"loader__svg loader__svg--1\" viewBox={viewbox}>\n            <circle {...svgAttributes} />\n          </svg>\n          <svg aria-hidden=\"true\" class=\"loader__svg loader__svg--2\" viewBox={viewbox}>\n            <circle {...svgAttributes} />\n          </svg>\n          <svg\n            aria-hidden=\"true\"\n            class=\"loader__svg loader__svg--3\"\n            viewBox={viewbox}\n            {...(isDeterminate ? { style: determinateStyle } : {})}\n          >\n            <circle {...svgAttributes} />\n          </svg>\n        </div>\n        {text && <div class=\"loader__text\">{text}</div>}\n        {isDeterminate && <div class=\"loader__percentage\">{value}</div>}\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteLoaderElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Return the proper sizes based on the scale property\n   *\n   * @param scale\n   */\n  private getSize(scale: string) {\n    return {\n      s: 32,\n      m: 56,\n      l: 80,\n    }[scale];\n  }\n\n  private getInlineSize(scale: string) {\n    return {\n      s: 12,\n      m: 16,\n      l: 20,\n    }[scale];\n  }\n}\n"],"version":3}
+{"file":"loader.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,g7LAAg7L;;MCSr7L,MAAM;;;;;sBAQiB,KAAK;;qBAMC,GAAG;;qBAW3B,CAAC;oBAGF,EAAE;;;;;;;IAQjB,MAAM;QACJ,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE7D,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,IAAI,EAAE,CAAC;QAC3B,MAAM,WAAW,GAAG,IAAI,CAAC;QACzB,MAAM,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACtE,MAAM,MAAM,GAAG,IAAI,GAAG,WAAW,CAAC;QAClC,MAAM,OAAO,GAAG,OAAO,IAAI,IAAI,IAAI,EAAE,CAAC;QACtC,MAAM,aAAa,GAAG,IAAI,KAAK,aAAa,CAAC;QAC7C,MAAM,aAAa,GAAG,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;QAC3C,MAAM,QAAQ,GAAG,CAAC,KAAK,GAAG,GAAG,IAAI,aAAa,CAAC;QAC/C,MAAM,SAAS,GAAG,aAAa,GAAG,QAAQ,CAAC;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACnC,MAAM,cAAc,GAAG;YACrB,eAAe,EAAE,QAAQ;YACzB,eAAe,EAAE,CAAC;YAClB,eAAe,EAAE,GAAG;YACpB,QAAQ,EAAE,QAAQ,KAAK,GAAG;SAC3B,CAAC;QACF,MAAM,aAAa,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,GAAG,CAAC,EAAE,CAAC;QAChE,MAAM,gBAAgB,GAAG,EAAE,kBAAkB,EAAE,GAAG,QAAQ,IAAI,SAAS,EAAE,EAAE,CAAC;QAC5E,QACE,EAAC,IAAI,kBACS,KAAK,EACjB,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,aAAa,MACb,aAAa,GAAG,cAAc,GAAG,EAAE,CAAC,IAEzC,WAAK,KAAK,EAAC,cAAc,IACvB,0BAAiB,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,OAAO,IACzE,iBAAY,aAAa,GAAI,CACzB,EACN,0BAAiB,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,OAAO,IACzE,iBAAY,aAAa,GAAI,CACzB,EACN,0BACc,MAAM,EAClB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,OAAO,MACX,aAAa,GAAG,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAEtD,iBAAY,aAAa,GAAI,CACzB,CACF,EACL,IAAI,IAAI,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAO,EAC9C,aAAa,IAAI,WAAK,KAAK,EAAC,oBAAoB,IAAE,KAAK,CAAO,CAC1D,EACP;KACH;;;;;;;;;;;IAqBO,OAAO,CAAC,KAAa;QAC3B,OAAO;YACL,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;SACN,CAAC,KAAK,CAAC,CAAC;KACV;IAEO,aAAa,CAAC,KAAa;QACjC,OAAO;YACL,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;SACN,CAAC,KAAK,CAAC,CAAC;KACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/loader/loader.scss?tag=calcite-loader&encapsulation=shadow","src/components/loader/loader.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-loader-font-size: Specifies the font size of the loading percentage when type is `\"determinate\"`.\n * @prop --calcite-loader-size: The width and height of a non-inline loader.\n * @prop --calcite-loader-size-inline: The width and height of an inline loader\n * @prop --calcite-loader-padding : Specifies the padding of the loader.\n */\n\n@import \"../../assets/styles/animation\";\n\n$stroke-width: 3;\n$loader-scale: 54;\n$loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --calcite-internal-duration-factor: 0;\n  }\n}\n\n:host {\n  @apply relative mx-auto hidden items-center justify-center opacity-100;\n  min-block-size: var(--calcite-loader-size);\n  font-size: var(--calcite-loader-font-size);\n  stroke: var(--calcite-color-brand);\n  stroke-width: $stroke-width;\n  fill: none;\n  transform: scale(1, 1);\n  animation: loader-color-shift scaleDuration(--calcite-internal-animation-timing-slow, 2) alternate-reverse infinite\n    linear;\n  padding-block: var(--calcite-loader-padding, theme(\"spacing.16\"));\n  will-change: contents;\n}\n\n:host([scale=\"s\"]) {\n  --calcite-loader-font-size: theme(\"fontSize.n2\");\n  --calcite-loader-size: theme(\"spacing.8\");\n  --calcite-loader-size-inline: theme(\"spacing.3\");\n}\n\n:host([scale=\"m\"]) {\n  --calcite-loader-font-size: theme(\"fontSize.0\");\n  --calcite-loader-size: theme(\"spacing.16\");\n  --calcite-loader-size-inline: theme(\"spacing.4\");\n}\n\n:host([scale=\"l\"]) {\n  --calcite-loader-font-size: theme(\"fontSize.2\");\n  --calcite-loader-size: theme(\"spacing.24\");\n  --calcite-loader-size-inline: theme(\"spacing.6\");\n}\n\n:host([no-padding]) {\n  @apply py-0;\n}\n\n:host {\n  @apply flex;\n}\n\n.loader__text {\n  @apply text-n2h\n  text-color-1\n  block\n  text-center;\n  margin-block-start: calc(var(--calcite-loader-size) + theme(\"spacing.6\"));\n}\n\n.loader__percentage {\n  @apply text-color-1 absolute block text-center;\n  font-size: var(--calcite-loader-font-size);\n  inline-size: var(--calcite-loader-size);\n  inset-inline-start: 50%;\n  margin-inline-start: calc(var(--calcite-loader-size) / 2 * -1);\n  line-height: 0.25;\n  transform: scale(1, 1);\n}\n\n.loader__svgs {\n  @apply absolute overflow-visible opacity-100;\n  inline-size: var(--calcite-loader-size);\n  block-size: var(--calcite-loader-size);\n  inset-inline-start: 50%;\n  margin-inline-start: calc(var(--calcite-loader-size) / 2 * -1);\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  animation-duration: scaleDuration(--calcite-internal-animation-timing-slow, 6.66);\n  animation-name: loader-clockwise;\n}\n\n.loader__svg {\n  @apply absolute top-0 origin-center overflow-visible;\n  inset-inline-start: 0;\n  inline-size: var(--calcite-loader-size);\n  block-size: var(--calcite-loader-size);\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n}\n\n// in newer browsers use the stroke-dash-offset animation as it looks better\n@supports (display: grid) {\n  .loader__svg--1 {\n    animation-name: loader-offset-1;\n  }\n  .loader__svg--2 {\n    animation-name: loader-offset-2;\n  }\n  .loader__svg--3 {\n    animation-name: loader-offset-3;\n  }\n}\n\n:host([type=\"determinate\"]) {\n  @apply animate-none;\n  stroke: var(--calcite-color-border-3);\n  .loader__svgs {\n    @apply animate-none;\n  }\n  .loader__svg--3 {\n    @apply animate-none;\n    stroke: var(--calcite-color-brand);\n    stroke-dasharray: $loader-circumference;\n    transform: rotate(-90deg);\n    transition: all var(--calcite-internal-animation-timing-fast) linear;\n  }\n}\n\n:host([inline]) {\n  @apply relative m-0 animate-none stroke-current stroke-2 py-0;\n  block-size: var(--calcite-loader-size-inline);\n  min-block-size: var(--calcite-loader-size-inline);\n  inline-size: var(--calcite-loader-size-inline);\n  margin-inline-end: calc(var(--calcite-loader-size-inline) * 0.5);\n  vertical-align: calc(var(--calcite-loader-size-inline) * -1 * 0.2);\n}\n\n:host([inline]) .loader__svgs {\n  @apply top-0 m-0;\n  inset-inline-start: 0;\n  inline-size: var(--calcite-loader-size-inline);\n  block-size: var(--calcite-loader-size-inline);\n}\n\n:host([inline]) .loader__svg {\n  inline-size: var(--calcite-loader-size-inline);\n  block-size: var(--calcite-loader-size-inline);\n}\n\n:host([complete]) {\n  @apply opacity-0;\n  transform: scale(0.75, 0.75);\n  transform-origin: center;\n  transition:\n    opacity var(--calcite-internal-animation-timing-medium) linear 1000ms,\n    transform var(--calcite-internal-animation-timing-medium) linear 1000ms;\n}\n\n:host([complete]) .loader__svgs {\n  @apply opacity-0;\n  transform: scale(0.75, 0.75);\n  transform-origin: center;\n  transition:\n    opacity calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms,\n    transform calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms;\n}\n\n:host([complete]) .loader__percentage {\n  color: theme(\"colors.brand\");\n  transform: scale(1.05, 1.05);\n  transform-origin: center;\n  transition:\n    color var(--calcite-internal-animation-timing-medium) linear,\n    transform var(--calcite-internal-animation-timing-medium) linear;\n}\n\n/**\n  Segment variables\n  - i         index (1-3)\n  - size      length of the segment (0 - 100)\n  - growth    how much the segment grows during the animation\n              (size + growth should not exceed 100)\n  - duration  how long the segment takes to rotate 360° (seconds)\n*/\n@mixin generateSegment($i, $size, $growth, $duration) {\n  $circumference: calc($loader-circumference / $loader-scale) * 100;\n  $length: ($size * 0.01) * $circumference;\n  $end: $length + ($growth * 0.01) * $circumference;\n\n  .loader__svg--#{$i} {\n    stroke-dasharray: $length $circumference - $end;\n    animation-duration: $duration;\n  }\n  @keyframes loader-offset-#{$i} {\n    0% {\n      stroke-dasharray: $length $circumference - $length;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: $end $circumference - $end;\n      stroke-dashoffset: -$circumference * 0.5 - ($length - $end) * 0.5;\n    }\n    100% {\n      stroke-dasharray: $length $circumference - $length;\n      stroke-dashoffset: -$circumference;\n    }\n  }\n}\n\n@include generateSegment(1, 10, 40, scaleDuration(--calcite-internal-animation-timing-slow, 4.8));\n@include generateSegment(2, 20, 30, scaleDuration(--calcite-internal-animation-timing-slow, 6.4));\n@include generateSegment(3, 05, 45, scaleDuration(--calcite-internal-animation-timing-slow, 7.734));\n\n@keyframes loader-color-shift {\n  0% {\n    stroke: var(--calcite-color-brand);\n  }\n  33% {\n    stroke: var(--calcite-color-brand-press);\n  }\n  66% {\n    stroke: var(--calcite-color-brand-hover);\n  }\n  100% {\n    stroke: var(--calcite-color-brand);\n  }\n}\n\n@keyframes loader-clockwise {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@include base-component();\n","import { Component, Element, h, Host, Prop, VNode } from \"@stencil/core\";\nimport { guid } from \"../../utils/guid\";\nimport { Scale } from \"../interfaces\";\n\n@Component({\n  tag: \"calcite-loader\",\n  styleUrl: \"loader.scss\",\n  shadow: true,\n})\nexport class Loader {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays smaller and appears to the left of the text. */\n  @Prop({ reflect: true }) inline = false;\n\n  /** Accessible name for the component. */\n  @Prop() label!: string;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Specifies the component type.\n   *\n   * Use `\"indeterminate\"` if finding actual progress value is impossible.\n   *\n   */\n  @Prop({ reflect: true }) type: \"indeterminate\" | \"determinate\";\n\n  /** The component's value. Valid only for `\"determinate\"` indicators. Percent complete of 100. */\n  @Prop() value = 0;\n\n  /** Text that displays under the component's indicator. */\n  @Prop() text = \"\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const { el, inline, label, scale, text, type, value } = this;\n\n    const id = el.id || guid();\n    const radiusRatio = 0.45;\n    const size = inline ? this.getInlineSize(scale) : this.getSize(scale);\n    const radius = size * radiusRatio;\n    const viewbox = `0 0 ${size} ${size}`;\n    const isDeterminate = type === \"determinate\";\n    const circumference = 2 * radius * Math.PI;\n    const progress = (value / 100) * circumference;\n    const remaining = circumference - progress;\n    const valueNow = Math.floor(value);\n    const hostAttributes = {\n      \"aria-valuenow\": valueNow,\n      \"aria-valuemin\": 0,\n      \"aria-valuemax\": 100,\n      complete: valueNow === 100,\n    };\n    const svgAttributes = { r: radius, cx: size / 2, cy: size / 2 };\n    const determinateStyle = { \"stroke-dasharray\": `${progress} ${remaining}` };\n    return (\n      <Host\n        aria-label={label}\n        id={id}\n        role=\"progressbar\"\n        {...(isDeterminate ? hostAttributes : {})}\n      >\n        <div class=\"loader__svgs\">\n          <svg aria-hidden=\"true\" class=\"loader__svg loader__svg--1\" viewBox={viewbox}>\n            <circle {...svgAttributes} />\n          </svg>\n          <svg aria-hidden=\"true\" class=\"loader__svg loader__svg--2\" viewBox={viewbox}>\n            <circle {...svgAttributes} />\n          </svg>\n          <svg\n            aria-hidden=\"true\"\n            class=\"loader__svg loader__svg--3\"\n            viewBox={viewbox}\n            {...(isDeterminate ? { style: determinateStyle } : {})}\n          >\n            <circle {...svgAttributes} />\n          </svg>\n        </div>\n        {text && <div class=\"loader__text\">{text}</div>}\n        {isDeterminate && <div class=\"loader__percentage\">{value}</div>}\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteLoaderElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Return the proper sizes based on the scale property\n   *\n   * @param scale\n   */\n  private getSize(scale: string) {\n    return {\n      s: 32,\n      m: 56,\n      l: 80,\n    }[scale];\n  }\n\n  private getInlineSize(scale: string) {\n    return {\n      s: 12,\n      m: 16,\n      l: 20,\n    }[scale];\n  }\n}\n"],"version":3}

package/dist/components/locale.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.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { b as containsCrossShadowBoundary, c as closestElementCrossShadowBoundary } from './dom.js';
 import { n as numberKeys } from './key.js';

package/dist/components/lt.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.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/lv.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.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/math.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.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 const decimalNumberRegex = new RegExp(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);

package/dist/components/menu.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.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client/index.js';
 import { s as slotChangeGetAssignedElements, v as focusElementInGroup, e as focusElement } from './dom.js';

package/dist/components/mk.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.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/nb.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.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/nl.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.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/observers.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.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { Build } from '@stencil/core/internal/client/index.js';
 

package/dist/components/openCloseComponent.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.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { readTask } from '@stencil/core/internal/client/index.js';
 

package/dist/components/pagination.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.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
@@ -27,7 +27,7 @@ const ICONS = {
 
 /**
  * Do not edit directly
- * Generated on Wed, 07 Feb 2024 22:55:32 GMT
+ * Generated on Fri, 09 Feb 2024 22:16:42 GMT
  */
 const calciteContainerSizeWidthXxs = {"min":"0","max":"320px"}; // Small handheld devices and mini-windows
 const calciteContainerSizeWidthXs = {"min":"321px","max":"476px"}; // Handheld devices
@@ -51,7 +51,7 @@ function cssLengthToNumber(length) {
     return parseInt(length);
 }
 
-const paginationCss = ":host{display:flex;writing-mode:horizontal-tb}:host([scale=s]) .chevron,: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;min-inline-size:1.5rem}:host([scale=m]) .chevron,: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;min-inline-size:2rem}:host([scale=l]) .chevron,: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]) .chevron{padding-inline:0.625rem}:host([scale=l]) .page,:host([scale=l]) .ellipsis{padding-inline:0.75rem}:host button{outline-color:transparent}:host button:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.chevron,.page,.ellipsis{margin:0px;box-sizing:border-box;display:flex;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-color-text-3)}.chevron,.page{cursor:pointer;border-block:2px solid transparent}.chevron:hover,.page:hover{color:var(--calcite-color-text-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.page:hover{border-block-end-color:var(--calcite-color-border-2)}.page.selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);border-block-end-color:var(--calcite-color-brand)}.chevron:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-brand)}.chevron:active{background-color:var(--calcite-color-foreground-3)}.chevron.disabled{pointer-events:none;background-color:transparent}.chevron.disabled>calcite-icon{opacity:var(--calcite-opacity-disabled)}:host([hidden]){display:none}[hidden]{display:none}";
+const paginationCss = ":host{display:flex;writing-mode:horizontal-tb}:host([scale=s]) .chevron,: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;min-inline-size:1.5rem}:host([scale=m]) .chevron,: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;min-inline-size:2rem}:host([scale=l]) .chevron,: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]) .chevron{padding-inline:0.625rem}:host([scale=l]) .page,:host([scale=l]) .ellipsis{padding-inline:0.75rem}:host button{outline-color:transparent}:host button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.chevron,.page,.ellipsis{margin:0px;box-sizing:border-box;display:flex;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-color-text-3)}.chevron,.page{cursor:pointer;border-block:2px solid transparent}.chevron:hover,.page:hover{color:var(--calcite-color-text-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.page:hover{border-block-end-color:var(--calcite-color-border-2)}.page.selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);border-block-end-color:var(--calcite-color-brand)}.chevron:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-brand)}.chevron:active{background-color:var(--calcite-color-foreground-3)}.chevron.disabled{pointer-events:none;background-color:transparent}.chevron.disabled>calcite-icon{opacity:var(--calcite-opacity-disabled)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const firstAndLastPageCount = 2;
 const ellipsisCount = 2;

package/dist/components/pagination.js.map

@@ -1 +1 @@
-{"file":"pagination.js","mappings":"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","names":[],"sources":["src/components/pagination/resources.ts","../calcite-design-tokens/dist/es6/global.js","src/utils/responsive.ts","src/components/pagination/pagination.scss?tag=calcite-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["export const CSS = {\n  page: \"page\",\n  selected: \"selected\",\n  chevron: \"chevron\",\n  disabled: \"disabled\",\n  ellipsis: \"ellipsis\",\n};\n\nexport const ICONS = {\n  next: \"chevron-right\",\n  previous: \"chevron-left\",\n  first: \"chevron-start\",\n  last: \"chevron-end\",\n};\n","/**\n * Do not edit directly\n * Generated on Wed, 07 Feb 2024 22:55:32 GMT\n */\n\nexport const calciteBorderWidthNone = \"0\";\nexport const calciteBorderWidthSm = \"1px\";\nexport const calciteBorderWidthMd = \"2px\";\nexport const calciteBorderWidthLg = \"4px\";\nexport const calciteColorBackground = {\"light\":\"#f8f8f8\",\"dark\":\"#353535\"};\nexport const calciteColorBackgroundNone = \"rgba(255, 255, 255, 0)\";\nexport const calciteColorForeground1 = {\"light\":\"#ffffff\",\"dark\":\"#2b2b2b\"};\nexport const calciteColorForeground2 = {\"light\":\"#f3f3f3\",\"dark\":\"#202020\"};\nexport const calciteColorForeground3 = {\"light\":\"#eaeaea\",\"dark\":\"#151515\"};\nexport const calciteColorForegroundCurrent = {\"light\":\"#c7eaff\",\"dark\":\"#214155\"};\nexport const calciteColorTransparent = {\"light\":\"rgba(0, 0, 0, 0)\",\"dark\":\"rgba(255, 255, 255, 0)\"};\nexport const calciteColorTransparentHover = {\"light\":\"rgba(0, 0, 0, 0.04)\",\"dark\":\"rgba(255, 255, 255, 0.04)\"};\nexport const calciteColorTransparentPress = {\"light\":\"rgba(0, 0, 0, 0.08)\",\"dark\":\"rgba(255, 255, 255, 0.08)\"};\nexport const calciteColorTransparentScrim = {\"light\":\"rgba(255, 255, 255, 0.85)\",\"dark\":\"rgba(0, 0, 0, 0.85)\"};\nexport const calciteColorTransparentTint = {\"light\":\"rgba(255, 255, 255, 0.8)\",\"dark\":\"rgba(43, 43, 43, 0.8)\"};\nexport const calciteColorBrand = {\"light\":\"#007ac2\",\"dark\":\"#009af2\"};\nexport const calciteColorBrandHover = {\"light\":\"#00619b\",\"dark\":\"#007ac2\"};\nexport const calciteColorBrandPress = {\"light\":\"#004874\",\"dark\":\"#00619b\"};\nexport const calciteColorBrandUnderline = {\"light\":\"rgba(0, 97, 155, 0.4)\",\"dark\":\"rgba(0, 160, 255, 0.4)\"};\nexport const calciteColorStatusInfo = {\"light\":\"#00619b\",\"dark\":\"#00a0ff\"};\nexport const calciteColorStatusInfoHover = {\"light\":\"#004874\",\"dark\":\"#3db8ff\"};\nexport const calciteColorStatusInfoPress = {\"light\":\"#00304d\",\"dark\":\"#009af2\"};\nexport const calciteColorStatusSuccess = {\"light\":\"#35ac46\",\"dark\":\"#36da43\"};\nexport const calciteColorStatusSuccessHover = {\"light\":\"#288835\",\"dark\":\"#3bed52\"};\nexport const calciteColorStatusSuccessPress = {\"light\":\"#1a6324\",\"dark\":\"#00b81b\"};\nexport const calciteColorStatusWarning = {\"light\":\"#edd317\",\"dark\":\"#ffc900\"};\nexport const calciteColorStatusWarningHover = {\"light\":\"#d9bc00\",\"dark\":\"#ffee33\"};\nexport const calciteColorStatusWarningPress = {\"light\":\"#bfa200\",\"dark\":\"#f5d000\"};\nexport const calciteColorStatusDanger = {\"light\":\"#d83020\",\"dark\":\"#fe583e\"};\nexport const calciteColorStatusDangerHover = {\"light\":\"#a82b1e\",\"dark\":\"#ff0015\"};\nexport const calciteColorStatusDangerPress = {\"light\":\"#7c1d13\",\"dark\":\"#d90012\"};\nexport const calciteColorInverse = {\"light\":\"#353535\",\"dark\":\"#f8f8f8\"};\nexport const calciteColorInverseHover = {\"light\":\"#2b2b2b\",\"dark\":\"#ffffff\"};\nexport const calciteColorInversePress = {\"light\":\"#202020\",\"dark\":\"#f3f3f3\"};\nexport const calciteColorText1 = {\"light\":\"#151515\",\"dark\":\"#ffffff\"};\nexport const calciteColorText2 = {\"light\":\"#4a4a4a\",\"dark\":\"#bfbfbf\"};\nexport const calciteColorText3 = {\"light\":\"#6a6a6a\",\"dark\":\"#9f9f9f\"};\nexport const calciteColorTextInverse = {\"light\":\"#ffffff\",\"dark\":\"#151515\"};\nexport const calciteColorTextLink = {\"light\":\"#00619b\",\"dark\":\"#00a0ff\"};\nexport const calciteColorBorder1 = {\"light\":\"#cacaca\",\"dark\":\"#555555\"};\nexport const calciteColorBorder2 = {\"light\":\"#d4d4d4\",\"dark\":\"#4a4a4a\"};\nexport const calciteColorBorder3 = {\"light\":\"#dfdfdf\",\"dark\":\"#404040\"};\nexport const calciteColorBorderInput = {\"light\":\"#949494\",\"dark\":\"#757575\"};\nexport const calciteColorBorderGhost = {\"light\":\"rgba(0, 0, 0, 0.3)\",\"dark\":\"rgba(117, 117, 117, 0.3)\"};\nexport const calciteColorBorderWhite = {\"light\":\"#ffffff\",\"dark\":\"#f8f8f8\"};\nexport const calciteContainerSizeHeightXxs = {\"min\":\"0\",\"max\":\"154px\"}; // Small handheld devices and mini-windows\nexport const calciteContainerSizeHeightXs = {\"min\":\"155px\",\"max\":\"328px\"}; // Handheld devices\nexport const calciteContainerSizeHeightSm = {\"min\":\"329px\",\"max\":\"504px\"}; // Small tablets\nexport const calciteContainerSizeHeightMd = {\"min\":\"505px\",\"max\":\"678px\"}; // Small laptops\nexport const calciteContainerSizeHeightLg = {\"min\":\"679px\",\"max\":\"854px\"}; // Large laptops and desktop computers\nexport const calciteContainerSizeHeightXl = {\"min\":\"855px\"}; // Projectors and televisions\nexport const calciteContainerSizeWidthXxs = {\"min\":\"0\",\"max\":\"320px\"}; // Small handheld devices and mini-windows\nexport const calciteContainerSizeWidthXs = {\"min\":\"321px\",\"max\":\"476px\"}; // Handheld devices\nexport const calciteContainerSizeWidthSm = {\"min\":\"477px\",\"max\":\"768px\"}; // Small tablets\nexport const calciteContainerSizeWidthMd = {\"min\":\"769px\",\"max\":\"1152px\"}; // Small laptops\nexport const calciteContainerSizeWidthLg = {\"min\":\"1153px\",\"max\":\"1440px\"}; // Large laptops and desktop computers\nexport const calciteContainerSizeWidthXl = {\"min\":\"1441px\"}; // Projectors and televisions\nexport const calciteContainerSizeMargin = \"24px\";\nexport const calciteContainerSizeGutter = \"16px\";\nexport const calciteContainerSizeContentFluid = \"100%\"; // for fluid grid widths\nexport const calciteContainerSizeContentFixed = \"1440px\"; // only for lg breakpoint fixed grid width\nexport const calciteCornerRadius = \"0\";\nexport const calciteCornerRadiusSharp = \"0\";\nexport const calciteCornerRadiusRound = \"4px\";\nexport const calciteCornerRadiusPill = \"100%\";\nexport const calciteFontFamily = [\"Avenir Next World\",\"Avenir Next LT Pro\",\"Avenir\",\"Helvetica Neue\",\"sans-serif\"]; // Primary font with fallbacks\nexport const calciteFontFamilyCode = [\"Monaco\",\"Consolas\",\"Andale Mono\",\"Lucida Console\",\"monospace\"]; // Font family for code with fallbacks\nexport const calciteFontWeightLight = \"300\"; // For Avenir Next World (secondary font family)\nexport const calciteFontWeightNormal = \"400\"; // For backwards compatibility only. This token will be removed from the published tokens in the next major in favor of the more descriptive word \"regular\"\nexport const calciteFontWeightRegular = \"400\";\nexport const calciteFontWeightMedium = \"500\";\nexport const calciteFontWeightSemibold = \"600\";\nexport const calciteFontWeightBold = \"700\";\nexport const calciteFontSizeXs = \"10px\";\nexport const calciteFontSizeSm = \"12px\";\nexport const calciteFontSize = \"14px\";\nexport const calciteFontSizeMd = \"16px\";\nexport const calciteFontSizeLg = \"18px\";\nexport const calciteFontSizeXl = \"20px\";\nexport const calciteFontSizeXxl = \"24px\";\nexport const calciteFontStyleEmphasis = \"italic\"; // used in ratings\nexport const calciteFontLineHeightFixedSm = \"12px\";\nexport const calciteFontLineHeightFixedBase = \"16px\";\nexport const calciteFontLineHeightFixedLg = \"20px\";\nexport const calciteFontLineHeightFixedXl = \"24px\";\nexport const calciteFontLineHeightRelative = \"auto\"; // 1\nexport const calciteFontLineHeightRelativeTight = \"125%\"; // 1.25\nexport const calciteFontLineHeightRelativeSnug = \"137.5%\"; // 1.375\nexport const calciteFontLineHeightRelativeNormal = \"150%\"; // 1.5\nexport const calciteFontLineHeightRelativeRelaxed = \"162.5%\"; // 1.625\nexport const calciteFontLineHeightRelativeLoose = \"200%\"; // 2\nexport const calciteFontLetterSpacingTight = \"-0.4\";\nexport const calciteFontLetterSpacingNormal = \"0\";\nexport const calciteFontLetterSpacingWide = \"0.4\";\nexport const calciteFontParagraphSpacingNormal = \"4px\";\nexport const calciteFontTextDecorationNone = \"none\";\nexport const calciteFontTextDecorationUnderline = \"underline\";\nexport const calciteFontTextCaseNone = \"none\";\nexport const calciteFontTextCaseUppercase = \"uppercase\";\nexport const calciteFontTextCaseLowercase = \"lowercase\";\nexport const calciteFontTextCaseCapitalize = \"capitalize\";\nexport const calciteOpacityLight = \"0.4\";\nexport const calciteOpacityHalf = \"0.5\";\nexport const calciteOpacityDark = \"0.85\";\nexport const calciteOpacityFull = \"1\";\nexport const calciteOpacityDisabled = \"0.5\";\nexport const calciteShadowNone = {\"x\":\"0\",\"y\":\"0\",\"blur\":\"0\",\"spread\":\"0\",\"color\":\"rgba(#000000, 0)\"};\nexport const calciteShadowSm = [{\"x\":\"0\",\"y\":\"2\",\"blur\":\"8\",\"spread\":\"0\",\"color\":\"rgba(#000000, 0.04)\"},{\"x\":\"0\",\"y\":\"4\",\"blur\":\"16\",\"spread\":\"0\",\"color\":\"rgba(#000000, 0.08)\"}];\nexport const calciteShadowMd = [{\"x\":\"0\",\"y\":\"4\",\"blur\":\"20\",\"spread\":\"0\",\"color\":\"rgba(#000000, 0.08)\"},{\"x\":\"0\",\"y\":\"12\",\"blur\":\"32\",\"spread\":\"-2\",\"color\":\"rgba(#000000, 0.1)\"}];\nexport const calciteSizePx = \"1px\";\nexport const calciteSizeXxxs = \"2px\";\nexport const calciteSizeXxs = \"4px\";\nexport const calciteSizeXs = \"6px\";\nexport const calciteSizeSm = \"8px\";\nexport const calciteSizeSmPlus = \"10px\";\nexport const calciteSizeMd = \"12px\";\nexport const calciteSizeMdPlus = \"14px\";\nexport const calciteSizeLg = \"16px\";\nexport const calciteSizeXl = \"20px\";\nexport const calciteSizeXxl = \"24px\";\nexport const calciteSizeXxxl = \"32px\";\nexport const calciteSpacingPx = \"1px\";\nexport const calciteSpacingBase = \"2px\";\nexport const calciteSpacingXxs = \"4px\";\nexport const calciteSpacingXs = \"6px\";\nexport const calciteSpacingSm = \"8px\";\nexport const calciteSpacingMd = \"12px\";\nexport const calciteSpacingLg = \"14px\";\nexport const calciteSpacingXl = \"16px\";\nexport const calciteSpacingXxl = \"20px\";\nexport const calciteSpacingXxxl = \"32px\";\nexport const calciteTypography = {\"fontFamily\":[\"Avenir Next World\",\"Avenir Next LT Pro\",\"Avenir\",\"Helvetica Neue\",\"sans-serif\"],\"fontSize\":\"14px\",\"fontWeight\":\"400\",\"letterSpacing\":\"0\",\"lineHeight\":\"16px\",\"paragraphSpacing\":\"4px\",\"textCase\":\"none\",\"textDecoration\":\"none\"};\nexport const calciteTypographyLightMinus3h = {\"fontSize\":\"10px\",\"fontWeight\":\"300\",\"lineHeight\":\"12px\"};\nexport const calciteTypographyLightMinus2h = {\"fontSize\":\"12px\",\"fontWeight\":\"300\"};\nexport const calciteTypographyLightMinus1h = {\"fontWeight\":\"300\"};\nexport const calciteTypographyLight0h = {\"fontSize\":\"16px\",\"fontWeight\":\"300\",\"lineHeight\":\"20px\"};\nexport const calciteTypographyLight1h = {\"fontSize\":\"18px\",\"fontWeight\":\"300\",\"lineHeight\":\"24px\"};\nexport const calciteTypographyRegularMinus3h = {\"lineHeight\":\"12px\",\"fontSize\":\"10px\"};\nexport const calciteTypographyRegularMinus2h = {\"fontSize\":\"12px\"};\nexport const calciteTypographyRegularMinus1h = {\"fontFamily\":[\"Avenir Next World\",\"Avenir Next LT Pro\",\"Avenir\",\"Helvetica Neue\",\"sans-serif\"],\"fontSize\":\"14px\",\"fontWeight\":\"400\",\"letterSpacing\":\"0\",\"lineHeight\":\"16px\",\"paragraphSpacing\":\"4px\",\"textCase\":\"none\",\"textDecoration\":\"none\"};\nexport const calciteTypographyRegular0h = {\"lineHeight\":\"20px\",\"fontSize\":\"16px\"};\nexport const calciteTypographyRegular1h = {\"lineHeight\":\"24px\",\"fontSize\":\"18px\"};\nexport const calciteTypographyMediumMinus3h = {\"fontWeight\":\"500\",\"lineHeight\":\"12px\",\"fontSize\":\"10px\"};\nexport const calciteTypographyMediumMinus2h = {\"fontWeight\":\"500\",\"fontSize\":\"12px\"};\nexport const calciteTypographyMediumMinus1h = {\"fontWeight\":\"500\"};\nexport const calciteTypographyMedium0h = {\"fontWeight\":\"500\",\"lineHeight\":\"20px\",\"fontSize\":\"16px\"};\nexport const calciteTypographyMedium1h = {\"fontWeight\":\"500\",\"lineHeight\":\"24px\",\"fontSize\":\"18px\"};\nexport const calciteTypographyBoldMinus3h = {\"fontWeight\":\"600\",\"lineHeight\":\"12px\",\"fontSize\":\"10px\"};\nexport const calciteTypographyBoldMinus2h = {\"fontWeight\":\"600\",\"fontSize\":\"12px\"};\nexport const calciteTypographyBoldMinus1h = {\"fontWeight\":\"600\"};\nexport const calciteTypographyBold0h = {\"fontWeight\":\"600\",\"lineHeight\":\"20px\",\"fontSize\":\"16px\"};\nexport const calciteTypographyBold1h = {\"fontWeight\":\"600\",\"lineHeight\":\"24px\",\"fontSize\":\"18px\"};\nexport const calciteTypographyWrapLight0 = {\"fontWeight\":\"300\",\"lineHeight\":\"137.5%\",\"fontSize\":\"16px\"};\nexport const calciteTypographyWrapLight1 = {\"fontWeight\":\"300\",\"lineHeight\":\"137.5%\",\"fontSize\":\"18px\"};\nexport const calciteTypographyWrapLight2 = {\"fontWeight\":\"300\",\"lineHeight\":\"137.5%\",\"fontSize\":\"20px\"};\nexport const calciteTypographyWrapLight3 = {\"fontWeight\":\"300\",\"lineHeight\":\"125%\",\"fontSize\":\"24px\"};\nexport const calciteTypographyWrapLightMinus2 = {\"fontWeight\":\"300\",\"lineHeight\":\"137.5%\",\"fontSize\":\"12px\"};\nexport const calciteTypographyWrapLightMinus1 = {\"fontWeight\":\"300\",\"lineHeight\":\"137.5%\"};\nexport const calciteTypographyWrapRegular0 = {\"lineHeight\":\"137.5%\",\"fontSize\":\"16px\"};\nexport const calciteTypographyWrapRegular1 = {\"lineHeight\":\"137.5%\",\"fontSize\":\"18px\"};\nexport const calciteTypographyWrapRegular2 = {\"lineHeight\":\"137.5%\",\"fontSize\":\"20px\"};\nexport const calciteTypographyWrapRegular3 = {\"lineHeight\":\"137.5%\",\"fontSize\":\"24px\"};\nexport const calciteTypographyWrapRegularMinus2 = {\"lineHeight\":\"137.5%\",\"fontSize\":\"12px\"};\nexport const calciteTypographyWrapRegularMinus1 = {\"lineHeight\":\"137.5%\"};\nexport const calciteTypographyWrapMedium0 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"16px\"};\nexport const calciteTypographyWrapMedium1 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"18px\"};\nexport const calciteTypographyWrapMedium2 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"20px\"};\nexport const calciteTypographyWrapMedium3 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"24px\"};\nexport const calciteTypographyWrapMediumMinus2 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"12px\"};\nexport const calciteTypographyWrapMediumMinus1 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\"};\nexport const calciteTypographyWrapBold0 = {\"fontWeight\":\"600\",\"lineHeight\":\"137.5%\",\"fontSize\":\"16px\"};\nexport const calciteTypographyWrapBold1 = {\"fontWeight\":\"600\",\"lineHeight\":\"137.5%\",\"fontSize\":\"18px\"};\nexport const calciteTypographyWrapBold2 = {\"fontWeight\":\"600\",\"lineHeight\":\"137.5%\",\"fontSize\":\"20px\"};\nexport const calciteTypographyWrapBold3 = {\"fontWeight\":\"600\",\"lineHeight\":\"137.5%\",\"fontSize\":\"24px\"};\nexport const calciteTypographyWrapBoldMinus2 = {\"fontWeight\":\"600\",\"lineHeight\":\"137.5%\",\"fontSize\":\"12px\"};\nexport const calciteTypographyWrapBoldMinus1 = {\"fontWeight\":\"600\",\"lineHeight\":\"137.5%\"};\nexport const calciteTypographyHierarchyDisplay1 = {\"fontWeight\":\"600\",\"lineHeight\":\"137.5%\",\"fontSize\":\"24px\"};\nexport const calciteTypographyHierarchyDisplay2 = {\"fontWeight\":\"600\",\"lineHeight\":\"137.5%\",\"fontSize\":\"20px\"};\nexport const calciteTypographyHierarchyHeading1 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"24px\"};\nexport const calciteTypographyHierarchyHeading2 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"20px\"};\nexport const calciteTypographyHierarchyHeading3 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"18px\"};\nexport const calciteTypographyHierarchyHeading4 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"16px\"};\nexport const calciteTypographyHierarchyHeading5 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\"};\nexport const calciteTypographyHierarchyBodySnug = {\"lineHeight\":\"137.5%\"};\nexport const calciteTypographyHierarchyBody = {\"fontFamily\":[\"Avenir Next World\",\"Avenir Next LT Pro\",\"Avenir\",\"Helvetica Neue\",\"sans-serif\"],\"fontSize\":\"14px\",\"fontWeight\":\"400\",\"letterSpacing\":\"0\",\"lineHeight\":\"16px\",\"paragraphSpacing\":\"4px\",\"textCase\":\"none\",\"textDecoration\":\"none\"};\nexport const calciteTypographyHierarchyOverline = {\"lineHeight\":\"12px\",\"textCase\":\"uppercase\",\"fontWeight\":\"700\"};\nexport const calciteTypographyHierarchyCaption = {\"lineHeight\":\"137.5%\",\"fontSize\":\"12px\"};\nexport const calciteZIndexDeep = \"-999999\";\nexport const calciteZIndex = \"1\";\nexport const calciteZIndexSticky = \"300\";\nexport const calciteZIndexHeader = \"400\";\nexport const calciteZIndexToast = \"500\";\nexport const calciteZIndexDropdown = \"600\";\nexport const calciteZIndexOverlay = \"700\";\nexport const calciteZIndexModal = \"800\";\nexport const calciteZIndexPopup = \"900\";\nexport const calciteZIndexTooltip = \"901\";\n","import {\n  calciteContainerSizeWidthLg,\n  calciteContainerSizeWidthMd,\n  calciteContainerSizeWidthSm,\n  calciteContainerSizeWidthXs,\n  calciteContainerSizeWidthXxs,\n} from \"@esri/calcite-design-tokens/dist/es6/global\";\n\nexport interface Breakpoints {\n  width: {\n    large: number;\n    medium: number;\n    small: number;\n    xsmall: number;\n    xxsmall: number;\n  };\n}\n\n/**\n * A breakpoints lookup object.\n */\nexport const breakpoints: Breakpoints = {\n  width: {\n    large: cssLengthToNumber(calciteContainerSizeWidthLg.max),\n    medium: cssLengthToNumber(calciteContainerSizeWidthMd.max),\n    small: cssLengthToNumber(calciteContainerSizeWidthSm.max),\n    xsmall: cssLengthToNumber(calciteContainerSizeWidthXs.max),\n    xxsmall: cssLengthToNumber(calciteContainerSizeWidthXxs.max),\n  },\n};\n\nfunction cssLengthToNumber(length: string): number {\n  return parseInt(length);\n}\n",":host {\n  @apply flex;\n  writing-mode: horizontal-tb;\n}\n\n:host([scale=\"s\"]) {\n  & .chevron,\n  & .page,\n  & .ellipsis {\n    @apply text-n2h h-6 px-1;\n    min-inline-size: theme(\"width.6\");\n  }\n}\n\n:host([scale=\"m\"]) {\n  & .chevron,\n  & .page,\n  & .ellipsis {\n    @apply text-n1h h-8 px-2;\n    min-inline-size: theme(\"width.8\");\n  }\n}\n\n:host([scale=\"l\"]) {\n  & .chevron,\n  & .page,\n  & .ellipsis {\n    @apply text-0h h-11;\n    min-inline-size: theme(\"width.11\");\n  }\n\n  & .chevron {\n    @apply px-2.5;\n  }\n\n  & .page,\n  & .ellipsis {\n    @apply px-3;\n  }\n}\n\n// focus styles\n:host button {\n  @apply focus-base;\n  &:focus {\n    @apply focus-inset;\n  }\n}\n\n.chevron,\n.page,\n.ellipsis {\n  @apply p-0\n    m-0\n    text-0h\n    text-color-3\n    font-inherit\n    box-border\n    flex\n    items-center\n    border-none\n    border-opacity-0\n    justify-center\n    align-baseline\n    bg-transparent;\n}\n\n.chevron,\n.page {\n  @apply cursor-pointer;\n  border-block: 2px solid transparent;\n\n  &:hover {\n    @apply text-color-1 transition-default;\n  }\n}\n\n.page {\n  &:hover {\n    @apply border-b-color-2;\n  }\n  &.selected {\n    @apply text-color-1 border-b-color-brand font-medium;\n  }\n}\n\n.chevron {\n  &:hover {\n    @apply bg-foreground-2;\n    color: theme(\"backgroundColor.brand\");\n  }\n  &:active {\n    @apply bg-foreground-3;\n  }\n  &.disabled {\n    @apply pointer-events-none bg-transparent;\n    & > calcite-icon {\n      @apply opacity-disabled;\n    }\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  LocalizedComponent,\n  NumberingSystem,\n  numberStringFormatter,\n} from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Scale } from \"../interfaces\";\nimport { PaginationMessages } from \"./assets/pagination/t9n\";\nimport { CSS, ICONS } from \"./resources\";\nimport { createObserver } from \"../../utils/observers\";\nimport { breakpoints } from \"../../utils/responsive\";\nimport { getIconScale } from \"../../utils/component\";\n\nexport interface PaginationDetail {\n  start: number;\n  totalItems: number;\n  startItem: number;\n}\n\nconst firstAndLastPageCount = 2;\nconst ellipsisCount = 2;\n\nconst maxItemBreakpoints = {\n  large: 11,\n  medium: 9,\n  small: 7,\n  xsmall: 5,\n  xxsmall: 1,\n};\n\n@Component({\n  tag: \"calcite-pagination\",\n  styleUrl: \"pagination.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  assetsDirs: [\"assets\"],\n})\nexport class Pagination\n  implements LocalizedComponent, LocalizedComponent, LoadableComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, number values are displayed with a group separator corresponding to the language and country format.\n   */\n  @Prop({ reflect: true }) groupSeparator = false;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: PaginationMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<PaginationMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop() numberingSystem: NumberingSystem;\n\n  /** Specifies the number of items per page. */\n  @Prop({ mutable: true, reflect: true }) pageSize = 20;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the starting item number. */\n  @Prop({ mutable: true, reflect: true }) startItem = 1;\n\n  /** Specifies the total number of items. */\n  @Prop({ reflect: true }) totalItems = 0;\n\n  @Watch(\"totalItems\")\n  @Watch(\"pageSize\")\n  handleTotalPages(): void {\n    if (this.pageSize < 1) {\n      this.pageSize = 1;\n    }\n    this.totalPages = this.totalItems / this.pageSize;\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalcitePaginationElement;\n\n  @State() defaultMessages: PaginationMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleWatcher(): void {\n    numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: this.groupSeparator,\n    };\n  }\n\n  @State() maxItems = maxItemBreakpoints.xxsmall;\n\n  @State() totalPages: number;\n\n  @State() lastStartItem: number;\n\n  @Watch(\"totalItems\")\n  @Watch(\"pageSize\")\n  @Watch(\"totalPages\")\n  handleLastStartItemChange(): void {\n    const { totalItems, pageSize, totalPages } = this;\n\n    this.lastStartItem =\n      (totalItems % pageSize === 0 ? totalItems - pageSize : Math.floor(totalPages) * pageSize) + 1;\n  }\n\n  @State() isXXSmall: boolean;\n\n  @Watch(\"maxItems\")\n  handleIsXXSmall(): void {\n    this.isXXSmall = this.maxItems === maxItemBreakpoints.xxsmall;\n  }\n\n  private resizeObserver = createObserver(\"resize\", (entries) =>\n    entries.forEach(this.resizeHandler),\n  );\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emits when the selected page changes.\n   */\n  @Event({ cancelable: false }) calcitePaginationChange: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n    this.resizeObserver?.observe(this.el);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n    this.handleTotalPages();\n    this.handleLastStartItemChange();\n    this.handleIsXXSmall();\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    this.setMaxItemsToBreakpoint(this.el.clientWidth);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.resizeObserver?.disconnect();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Sets focus on the component's first focusable element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.el.focus();\n  }\n\n  /** Go to the next page of results. */\n  @Method()\n  async nextPage(): Promise<void> {\n    this.startItem = Math.min(this.lastStartItem, this.startItem + this.pageSize);\n  }\n\n  /** Go to the previous page of results. */\n  @Method()\n  async previousPage(): Promise<void> {\n    this.startItem = Math.max(1, this.startItem - this.pageSize);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private setMaxItemsToBreakpoint(width: number): void {\n    if (!breakpoints || !width) {\n      return;\n    }\n\n    if (width >= breakpoints.width.medium) {\n      this.maxItems = maxItemBreakpoints.large;\n      return;\n    }\n\n    if (width >= breakpoints.width.small) {\n      this.maxItems = maxItemBreakpoints.medium;\n      return;\n    }\n\n    if (width >= breakpoints.width.xsmall) {\n      this.maxItems = maxItemBreakpoints.small;\n      return;\n    }\n\n    if (width >= breakpoints.width.xxsmall) {\n      this.maxItems = maxItemBreakpoints.xsmall;\n      return;\n    }\n\n    this.maxItems = maxItemBreakpoints.xxsmall;\n  }\n\n  private resizeHandler = ({ contentRect: { width } }: ResizeObserverEntry): void =>\n    this.setMaxItemsToBreakpoint(width);\n\n  private firstClicked = (): void => {\n    this.startItem = 1;\n    this.emitUpdate();\n  };\n\n  private lastClicked = (): void => {\n    this.startItem = this.lastStartItem;\n    this.emitUpdate();\n  };\n\n  private previousClicked = async (): Promise<void> => {\n    await this.previousPage();\n    this.emitUpdate();\n  };\n\n  private nextClicked = async (): Promise<void> => {\n    await this.nextPage();\n    this.emitUpdate();\n  };\n\n  private showStartEllipsis() {\n    return (\n      this.totalPages > this.maxItems &&\n      Math.floor(this.startItem / this.pageSize) >\n        this.maxItems - firstAndLastPageCount - ellipsisCount\n    );\n  }\n\n  private showEndEllipsis() {\n    return (\n      this.totalPages > this.maxItems &&\n      (this.totalItems - this.startItem) / this.pageSize >\n        this.maxItems - firstAndLastPageCount - (ellipsisCount - 1)\n    );\n  }\n\n  private emitUpdate() {\n    this.calcitePaginationChange.emit();\n  }\n\n  private handlePageClick = (event: Event) => {\n    const target = event.target as HTMLButtonElement;\n    this.startItem = parseInt(target.value, 10);\n    this.emitUpdate();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  renderEllipsis(type: \"start\" | \"end\"): VNode {\n    return (\n      <span class={CSS.ellipsis} data-test-ellipsis={type} key={type}>\n        &hellip;\n      </span>\n    );\n  }\n\n  renderItems(): VNode[] {\n    const { totalItems, pageSize, startItem, maxItems, totalPages, lastStartItem, isXXSmall } =\n      this;\n\n    const items: VNode[] = [];\n\n    if (isXXSmall) {\n      items.push(this.renderPage(startItem));\n      return items;\n    }\n\n    const renderFirstPage = totalItems > pageSize;\n    const renderStartEllipsis = this.showStartEllipsis();\n    const renderEndEllipsis = this.showEndEllipsis();\n\n    if (renderFirstPage) {\n      items.push(this.renderPage(1));\n    }\n\n    if (renderStartEllipsis) {\n      items.push(this.renderEllipsis(\"start\"));\n    }\n\n    const remainingItems =\n      maxItems -\n      firstAndLastPageCount -\n      (renderEndEllipsis ? 1 : 0) -\n      (renderStartEllipsis ? 1 : 0);\n\n    let end: number;\n    let nextStart: number;\n\n    // if we don't need ellipses render the whole set\n    if (totalPages - 1 <= remainingItems) {\n      nextStart = 1 + pageSize;\n      end = lastStartItem - pageSize;\n    } else {\n      // if we're within max pages of page 1\n      if (startItem / pageSize < remainingItems) {\n        nextStart = 1 + pageSize;\n        end = 1 + remainingItems * pageSize;\n      } else {\n        // if we're within max pages of last page\n        if (startItem + remainingItems * pageSize >= totalItems) {\n          nextStart = lastStartItem - remainingItems * pageSize;\n          end = lastStartItem - pageSize;\n        } else {\n          // if we're within the center pages\n          nextStart = startItem - pageSize * ((remainingItems - 1) / 2);\n          end = startItem + pageSize * ((remainingItems - 1) / 2);\n        }\n      }\n    }\n\n    for (let i = 0; i < remainingItems && nextStart <= end; i++) {\n      items.push(this.renderPage(nextStart));\n      nextStart = nextStart + pageSize;\n    }\n\n    if (renderEndEllipsis) {\n      items.push(this.renderEllipsis(\"end\"));\n    }\n\n    items.push(this.renderPage(lastStartItem));\n\n    return items;\n  }\n\n  renderPage(start: number): VNode {\n    const { pageSize } = this;\n    const page = Math.floor(start / pageSize) + (pageSize === 1 ? 0 : 1);\n\n    numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: this.groupSeparator,\n    };\n\n    const displayedPage = numberStringFormatter.localize(page.toString());\n    const selected = start === this.startItem;\n\n    return (\n      <button\n        aria-current={selected ? \"page\" : \"false\"}\n        class={{\n          [CSS.page]: true,\n          [CSS.selected]: selected,\n        }}\n        onClick={this.handlePageClick}\n        value={start}\n      >\n        {displayedPage}\n      </button>\n    );\n  }\n\n  renderPreviousChevron(): VNode {\n    const { pageSize, startItem, messages } = this;\n\n    const disabled = pageSize === 1 ? startItem <= pageSize : startItem < pageSize;\n\n    return (\n      <button\n        aria-label={messages.previous}\n        class={{\n          [CSS.chevron]: true,\n          [CSS.disabled]: disabled,\n        }}\n        data-test-chevron=\"previous\"\n        disabled={disabled}\n        key=\"previous\"\n        onClick={this.previousClicked}\n      >\n        <calcite-icon flipRtl icon={ICONS.previous} scale={getIconScale(this.scale)} />\n      </button>\n    );\n  }\n\n  renderNextChevron(): VNode {\n    const { totalItems, pageSize, startItem, messages } = this;\n\n    const disabled =\n      pageSize === 1 ? startItem + pageSize > totalItems : startItem + pageSize > totalItems;\n\n    return (\n      <button\n        aria-label={messages.next}\n        class={{\n          [CSS.chevron]: true,\n          [CSS.disabled]: disabled,\n        }}\n        data-test-chevron=\"next\"\n        disabled={disabled}\n        key=\"next-button\"\n        onClick={this.nextClicked}\n      >\n        <calcite-icon flipRtl icon={ICONS.next} scale={getIconScale(this.scale)} />\n      </button>\n    );\n  }\n\n  renderFirstChevron(): VNode {\n    const { messages, startItem, isXXSmall } = this;\n\n    const disabled = startItem === 1;\n\n    return isXXSmall ? (\n      <button\n        aria-label={messages.first}\n        class={{\n          [CSS.chevron]: true,\n          [CSS.disabled]: disabled,\n        }}\n        disabled={disabled}\n        key=\"first-button\"\n        onClick={this.firstClicked}\n      >\n        <calcite-icon flipRtl icon={ICONS.first} scale={getIconScale(this.scale)} />\n      </button>\n    ) : null;\n  }\n\n  renderLastChevron(): VNode {\n    const { messages, startItem, isXXSmall, lastStartItem } = this;\n\n    const disabled = startItem === lastStartItem;\n\n    return isXXSmall ? (\n      <button\n        aria-label={messages.last}\n        class={{\n          [CSS.chevron]: true,\n          [CSS.disabled]: disabled,\n        }}\n        disabled={disabled}\n        key=\"last-button\"\n        onClick={this.lastClicked}\n      >\n        <calcite-icon flipRtl icon={ICONS.last} scale={getIconScale(this.scale)} />\n      </button>\n    ) : null;\n  }\n\n  render(): VNode {\n    return (\n      <Fragment>\n        {this.renderFirstChevron()}\n        {this.renderPreviousChevron()}\n        {this.renderItems()}\n        {this.renderNextChevron()}\n        {this.renderLastChevron()}\n      </Fragment>\n    );\n  }\n}\n"],"version":3}
+{"file":"pagination.js","mappings":"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","names":[],"sources":["src/components/pagination/resources.ts","../calcite-design-tokens/dist/es6/global.js","src/utils/responsive.ts","src/components/pagination/pagination.scss?tag=calcite-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["export const CSS = {\n  page: \"page\",\n  selected: \"selected\",\n  chevron: \"chevron\",\n  disabled: \"disabled\",\n  ellipsis: \"ellipsis\",\n};\n\nexport const ICONS = {\n  next: \"chevron-right\",\n  previous: \"chevron-left\",\n  first: \"chevron-start\",\n  last: \"chevron-end\",\n};\n","/**\n * Do not edit directly\n * Generated on Fri, 09 Feb 2024 22:16:42 GMT\n */\n\nexport const calciteBorderWidthNone = \"0\";\nexport const calciteBorderWidthSm = \"1px\";\nexport const calciteBorderWidthMd = \"2px\";\nexport const calciteBorderWidthLg = \"4px\";\nexport const calciteColorBackground = {\"light\":\"#f8f8f8\",\"dark\":\"#353535\"};\nexport const calciteColorBackgroundNone = \"rgba(255, 255, 255, 0)\";\nexport const calciteColorForeground1 = {\"light\":\"#ffffff\",\"dark\":\"#2b2b2b\"};\nexport const calciteColorForeground2 = {\"light\":\"#f3f3f3\",\"dark\":\"#202020\"};\nexport const calciteColorForeground3 = {\"light\":\"#eaeaea\",\"dark\":\"#151515\"};\nexport const calciteColorForegroundCurrent = {\"light\":\"#c7eaff\",\"dark\":\"#214155\"};\nexport const calciteColorTransparent = {\"light\":\"rgba(0, 0, 0, 0)\",\"dark\":\"rgba(255, 255, 255, 0)\"};\nexport const calciteColorTransparentHover = {\"light\":\"rgba(0, 0, 0, 0.04)\",\"dark\":\"rgba(255, 255, 255, 0.04)\"};\nexport const calciteColorTransparentPress = {\"light\":\"rgba(0, 0, 0, 0.08)\",\"dark\":\"rgba(255, 255, 255, 0.08)\"};\nexport const calciteColorTransparentScrim = {\"light\":\"rgba(255, 255, 255, 0.85)\",\"dark\":\"rgba(0, 0, 0, 0.85)\"};\nexport const calciteColorTransparentTint = {\"light\":\"rgba(255, 255, 255, 0.8)\",\"dark\":\"rgba(43, 43, 43, 0.8)\"};\nexport const calciteColorBrand = {\"light\":\"#007ac2\",\"dark\":\"#009af2\"};\nexport const calciteColorBrandHover = {\"light\":\"#00619b\",\"dark\":\"#007ac2\"};\nexport const calciteColorBrandPress = {\"light\":\"#004874\",\"dark\":\"#00619b\"};\nexport const calciteColorBrandUnderline = {\"light\":\"rgba(0, 97, 155, 0.4)\",\"dark\":\"rgba(0, 160, 255, 0.4)\"};\nexport const calciteColorStatusInfo = {\"light\":\"#00619b\",\"dark\":\"#00a0ff\"};\nexport const calciteColorStatusInfoHover = {\"light\":\"#004874\",\"dark\":\"#3db8ff\"};\nexport const calciteColorStatusInfoPress = {\"light\":\"#00304d\",\"dark\":\"#009af2\"};\nexport const calciteColorStatusSuccess = {\"light\":\"#35ac46\",\"dark\":\"#36da43\"};\nexport const calciteColorStatusSuccessHover = {\"light\":\"#288835\",\"dark\":\"#3bed52\"};\nexport const calciteColorStatusSuccessPress = {\"light\":\"#1a6324\",\"dark\":\"#00b81b\"};\nexport const calciteColorStatusWarning = {\"light\":\"#edd317\",\"dark\":\"#ffc900\"};\nexport const calciteColorStatusWarningHover = {\"light\":\"#d9bc00\",\"dark\":\"#ffee33\"};\nexport const calciteColorStatusWarningPress = {\"light\":\"#bfa200\",\"dark\":\"#f5d000\"};\nexport const calciteColorStatusDanger = {\"light\":\"#d83020\",\"dark\":\"#fe583e\"};\nexport const calciteColorStatusDangerHover = {\"light\":\"#a82b1e\",\"dark\":\"#ff0015\"};\nexport const calciteColorStatusDangerPress = {\"light\":\"#7c1d13\",\"dark\":\"#d90012\"};\nexport const calciteColorInverse = {\"light\":\"#353535\",\"dark\":\"#f8f8f8\"};\nexport const calciteColorInverseHover = {\"light\":\"#2b2b2b\",\"dark\":\"#ffffff\"};\nexport const calciteColorInversePress = {\"light\":\"#202020\",\"dark\":\"#f3f3f3\"};\nexport const calciteColorText1 = {\"light\":\"#151515\",\"dark\":\"#ffffff\"};\nexport const calciteColorText2 = {\"light\":\"#4a4a4a\",\"dark\":\"#bfbfbf\"};\nexport const calciteColorText3 = {\"light\":\"#6a6a6a\",\"dark\":\"#9f9f9f\"};\nexport const calciteColorTextInverse = {\"light\":\"#ffffff\",\"dark\":\"#151515\"};\nexport const calciteColorTextLink = {\"light\":\"#00619b\",\"dark\":\"#00a0ff\"};\nexport const calciteColorBorder1 = {\"light\":\"#cacaca\",\"dark\":\"#555555\"};\nexport const calciteColorBorder2 = {\"light\":\"#d4d4d4\",\"dark\":\"#4a4a4a\"};\nexport const calciteColorBorder3 = {\"light\":\"#dfdfdf\",\"dark\":\"#404040\"};\nexport const calciteColorBorderInput = {\"light\":\"#949494\",\"dark\":\"#757575\"};\nexport const calciteColorBorderGhost = {\"light\":\"rgba(0, 0, 0, 0.3)\",\"dark\":\"rgba(117, 117, 117, 0.3)\"};\nexport const calciteColorBorderWhite = {\"light\":\"#ffffff\",\"dark\":\"#f8f8f8\"};\nexport const calciteContainerSizeHeightXxs = {\"min\":\"0\",\"max\":\"154px\"}; // Small handheld devices and mini-windows\nexport const calciteContainerSizeHeightXs = {\"min\":\"155px\",\"max\":\"328px\"}; // Handheld devices\nexport const calciteContainerSizeHeightSm = {\"min\":\"329px\",\"max\":\"504px\"}; // Small tablets\nexport const calciteContainerSizeHeightMd = {\"min\":\"505px\",\"max\":\"678px\"}; // Small laptops\nexport const calciteContainerSizeHeightLg = {\"min\":\"679px\",\"max\":\"854px\"}; // Large laptops and desktop computers\nexport const calciteContainerSizeHeightXl = {\"min\":\"855px\"}; // Projectors and televisions\nexport const calciteContainerSizeWidthXxs = {\"min\":\"0\",\"max\":\"320px\"}; // Small handheld devices and mini-windows\nexport const calciteContainerSizeWidthXs = {\"min\":\"321px\",\"max\":\"476px\"}; // Handheld devices\nexport const calciteContainerSizeWidthSm = {\"min\":\"477px\",\"max\":\"768px\"}; // Small tablets\nexport const calciteContainerSizeWidthMd = {\"min\":\"769px\",\"max\":\"1152px\"}; // Small laptops\nexport const calciteContainerSizeWidthLg = {\"min\":\"1153px\",\"max\":\"1440px\"}; // Large laptops and desktop computers\nexport const calciteContainerSizeWidthXl = {\"min\":\"1441px\"}; // Projectors and televisions\nexport const calciteContainerSizeMargin = \"24px\";\nexport const calciteContainerSizeGutter = \"16px\";\nexport const calciteContainerSizeContentFluid = \"100%\"; // for fluid grid widths\nexport const calciteContainerSizeContentFixed = \"1440px\"; // only for lg breakpoint fixed grid width\nexport const calciteCornerRadius = \"0\";\nexport const calciteCornerRadiusSharp = \"0\";\nexport const calciteCornerRadiusRound = \"4px\";\nexport const calciteCornerRadiusPill = \"100%\";\nexport const calciteFontFamily = [\"Avenir Next World\",\"Avenir Next LT Pro\",\"Avenir\",\"Helvetica Neue\",\"sans-serif\"]; // Primary font with fallbacks\nexport const calciteFontFamilyCode = [\"Monaco\",\"Consolas\",\"Andale Mono\",\"Lucida Console\",\"monospace\"]; // Font family for code with fallbacks\nexport const calciteFontWeightLight = \"300\"; // For Avenir Next World (secondary font family)\nexport const calciteFontWeightNormal = \"400\"; // For backwards compatibility only. This token will be removed from the published tokens in the next major in favor of the more descriptive word \"regular\"\nexport const calciteFontWeightRegular = \"400\";\nexport const calciteFontWeightMedium = \"500\";\nexport const calciteFontWeightSemibold = \"600\";\nexport const calciteFontWeightBold = \"700\";\nexport const calciteFontSizeXs = \"10px\";\nexport const calciteFontSizeSm = \"12px\";\nexport const calciteFontSize = \"14px\";\nexport const calciteFontSizeMd = \"16px\";\nexport const calciteFontSizeLg = \"18px\";\nexport const calciteFontSizeXl = \"20px\";\nexport const calciteFontSizeXxl = \"24px\";\nexport const calciteFontStyleEmphasis = \"italic\"; // used in ratings\nexport const calciteFontLineHeightFixedSm = \"12px\";\nexport const calciteFontLineHeightFixedBase = \"16px\";\nexport const calciteFontLineHeightFixedLg = \"20px\";\nexport const calciteFontLineHeightFixedXl = \"24px\";\nexport const calciteFontLineHeightRelative = \"auto\"; // 1\nexport const calciteFontLineHeightRelativeTight = \"125%\"; // 1.25\nexport const calciteFontLineHeightRelativeSnug = \"137.5%\"; // 1.375\nexport const calciteFontLineHeightRelativeNormal = \"150%\"; // 1.5\nexport const calciteFontLineHeightRelativeRelaxed = \"162.5%\"; // 1.625\nexport const calciteFontLineHeightRelativeLoose = \"200%\"; // 2\nexport const calciteFontLetterSpacingTight = \"-0.4\";\nexport const calciteFontLetterSpacingNormal = \"0\";\nexport const calciteFontLetterSpacingWide = \"0.4\";\nexport const calciteFontParagraphSpacingNormal = \"4px\";\nexport const calciteFontTextDecorationNone = \"none\";\nexport const calciteFontTextDecorationUnderline = \"underline\";\nexport const calciteFontTextCaseNone = \"none\";\nexport const calciteFontTextCaseUppercase = \"uppercase\";\nexport const calciteFontTextCaseLowercase = \"lowercase\";\nexport const calciteFontTextCaseCapitalize = \"capitalize\";\nexport const calciteOpacityLight = \"0.4\";\nexport const calciteOpacityHalf = \"0.5\";\nexport const calciteOpacityDark = \"0.85\";\nexport const calciteOpacityFull = \"1\";\nexport const calciteOpacityDisabled = \"0.5\";\nexport const calciteShadowNone = {\"x\":\"0\",\"y\":\"0\",\"blur\":\"0\",\"spread\":\"0\",\"color\":\"rgba(#000000, 0)\"};\nexport const calciteShadowSm = [{\"x\":\"0\",\"y\":\"2\",\"blur\":\"8\",\"spread\":\"0\",\"color\":\"rgba(#000000, 0.04)\"},{\"x\":\"0\",\"y\":\"4\",\"blur\":\"16\",\"spread\":\"0\",\"color\":\"rgba(#000000, 0.08)\"}];\nexport const calciteShadowMd = [{\"x\":\"0\",\"y\":\"4\",\"blur\":\"20\",\"spread\":\"0\",\"color\":\"rgba(#000000, 0.08)\"},{\"x\":\"0\",\"y\":\"12\",\"blur\":\"32\",\"spread\":\"-2\",\"color\":\"rgba(#000000, 0.1)\"}];\nexport const calciteSizePx = \"1px\";\nexport const calciteSizeXxxs = \"2px\";\nexport const calciteSizeXxs = \"4px\";\nexport const calciteSizeXs = \"6px\";\nexport const calciteSizeSm = \"8px\";\nexport const calciteSizeSmPlus = \"10px\";\nexport const calciteSizeMd = \"12px\";\nexport const calciteSizeMdPlus = \"14px\";\nexport const calciteSizeLg = \"16px\";\nexport const calciteSizeXl = \"20px\";\nexport const calciteSizeXxl = \"24px\";\nexport const calciteSizeXxxl = \"32px\";\nexport const calciteSpacingPx = \"1px\";\nexport const calciteSpacingBase = \"2px\";\nexport const calciteSpacingXxs = \"4px\";\nexport const calciteSpacingXs = \"6px\";\nexport const calciteSpacingSm = \"8px\";\nexport const calciteSpacingMd = \"12px\";\nexport const calciteSpacingLg = \"14px\";\nexport const calciteSpacingXl = \"16px\";\nexport const calciteSpacingXxl = \"20px\";\nexport const calciteSpacingXxxl = \"32px\";\nexport const calciteTypography = {\"fontFamily\":[\"Avenir Next World\",\"Avenir Next LT Pro\",\"Avenir\",\"Helvetica Neue\",\"sans-serif\"],\"fontSize\":\"14px\",\"fontWeight\":\"400\",\"letterSpacing\":\"0\",\"lineHeight\":\"16px\",\"paragraphSpacing\":\"4px\",\"textCase\":\"none\",\"textDecoration\":\"none\"};\nexport const calciteTypographyLightMinus3h = {\"fontSize\":\"10px\",\"fontWeight\":\"300\",\"lineHeight\":\"12px\"};\nexport const calciteTypographyLightMinus2h = {\"fontSize\":\"12px\",\"fontWeight\":\"300\"};\nexport const calciteTypographyLightMinus1h = {\"fontWeight\":\"300\"};\nexport const calciteTypographyLight0h = {\"fontSize\":\"16px\",\"fontWeight\":\"300\",\"lineHeight\":\"20px\"};\nexport const calciteTypographyLight1h = {\"fontSize\":\"18px\",\"fontWeight\":\"300\",\"lineHeight\":\"24px\"};\nexport const calciteTypographyRegularMinus3h = {\"lineHeight\":\"12px\",\"fontSize\":\"10px\"};\nexport const calciteTypographyRegularMinus2h = {\"fontSize\":\"12px\"};\nexport const calciteTypographyRegularMinus1h = {\"fontFamily\":[\"Avenir Next World\",\"Avenir Next LT Pro\",\"Avenir\",\"Helvetica Neue\",\"sans-serif\"],\"fontSize\":\"14px\",\"fontWeight\":\"400\",\"letterSpacing\":\"0\",\"lineHeight\":\"16px\",\"paragraphSpacing\":\"4px\",\"textCase\":\"none\",\"textDecoration\":\"none\"};\nexport const calciteTypographyRegular0h = {\"lineHeight\":\"20px\",\"fontSize\":\"16px\"};\nexport const calciteTypographyRegular1h = {\"lineHeight\":\"24px\",\"fontSize\":\"18px\"};\nexport const calciteTypographyMediumMinus3h = {\"fontWeight\":\"500\",\"lineHeight\":\"12px\",\"fontSize\":\"10px\"};\nexport const calciteTypographyMediumMinus2h = {\"fontWeight\":\"500\",\"fontSize\":\"12px\"};\nexport const calciteTypographyMediumMinus1h = {\"fontWeight\":\"500\"};\nexport const calciteTypographyMedium0h = {\"fontWeight\":\"500\",\"lineHeight\":\"20px\",\"fontSize\":\"16px\"};\nexport const calciteTypographyMedium1h = {\"fontWeight\":\"500\",\"lineHeight\":\"24px\",\"fontSize\":\"18px\"};\nexport const calciteTypographyBoldMinus3h = {\"fontWeight\":\"600\",\"lineHeight\":\"12px\",\"fontSize\":\"10px\"};\nexport const calciteTypographyBoldMinus2h = {\"fontWeight\":\"600\",\"fontSize\":\"12px\"};\nexport const calciteTypographyBoldMinus1h = {\"fontWeight\":\"600\"};\nexport const calciteTypographyBold0h = {\"fontWeight\":\"600\",\"lineHeight\":\"20px\",\"fontSize\":\"16px\"};\nexport const calciteTypographyBold1h = {\"fontWeight\":\"600\",\"lineHeight\":\"24px\",\"fontSize\":\"18px\"};\nexport const calciteTypographyWrapLight0 = {\"fontWeight\":\"300\",\"lineHeight\":\"137.5%\",\"fontSize\":\"16px\"};\nexport const calciteTypographyWrapLight1 = {\"fontWeight\":\"300\",\"lineHeight\":\"137.5%\",\"fontSize\":\"18px\"};\nexport const calciteTypographyWrapLight2 = {\"fontWeight\":\"300\",\"lineHeight\":\"137.5%\",\"fontSize\":\"20px\"};\nexport const calciteTypographyWrapLight3 = {\"fontWeight\":\"300\",\"lineHeight\":\"125%\",\"fontSize\":\"24px\"};\nexport const calciteTypographyWrapLightMinus2 = {\"fontWeight\":\"300\",\"lineHeight\":\"137.5%\",\"fontSize\":\"12px\"};\nexport const calciteTypographyWrapLightMinus1 = {\"fontWeight\":\"300\",\"lineHeight\":\"137.5%\"};\nexport const calciteTypographyWrapRegular0 = {\"lineHeight\":\"137.5%\",\"fontSize\":\"16px\"};\nexport const calciteTypographyWrapRegular1 = {\"lineHeight\":\"137.5%\",\"fontSize\":\"18px\"};\nexport const calciteTypographyWrapRegular2 = {\"lineHeight\":\"137.5%\",\"fontSize\":\"20px\"};\nexport const calciteTypographyWrapRegular3 = {\"lineHeight\":\"137.5%\",\"fontSize\":\"24px\"};\nexport const calciteTypographyWrapRegularMinus2 = {\"lineHeight\":\"137.5%\",\"fontSize\":\"12px\"};\nexport const calciteTypographyWrapRegularMinus1 = {\"lineHeight\":\"137.5%\"};\nexport const calciteTypographyWrapMedium0 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"16px\"};\nexport const calciteTypographyWrapMedium1 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"18px\"};\nexport const calciteTypographyWrapMedium2 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"20px\"};\nexport const calciteTypographyWrapMedium3 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"24px\"};\nexport const calciteTypographyWrapMediumMinus2 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"12px\"};\nexport const calciteTypographyWrapMediumMinus1 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\"};\nexport const calciteTypographyWrapBold0 = {\"fontWeight\":\"600\",\"lineHeight\":\"137.5%\",\"fontSize\":\"16px\"};\nexport const calciteTypographyWrapBold1 = {\"fontWeight\":\"600\",\"lineHeight\":\"137.5%\",\"fontSize\":\"18px\"};\nexport const calciteTypographyWrapBold2 = {\"fontWeight\":\"600\",\"lineHeight\":\"137.5%\",\"fontSize\":\"20px\"};\nexport const calciteTypographyWrapBold3 = {\"fontWeight\":\"600\",\"lineHeight\":\"137.5%\",\"fontSize\":\"24px\"};\nexport const calciteTypographyWrapBoldMinus2 = {\"fontWeight\":\"600\",\"lineHeight\":\"137.5%\",\"fontSize\":\"12px\"};\nexport const calciteTypographyWrapBoldMinus1 = {\"fontWeight\":\"600\",\"lineHeight\":\"137.5%\"};\nexport const calciteTypographyHierarchyDisplay1 = {\"fontWeight\":\"600\",\"lineHeight\":\"137.5%\",\"fontSize\":\"24px\"};\nexport const calciteTypographyHierarchyDisplay2 = {\"fontWeight\":\"600\",\"lineHeight\":\"137.5%\",\"fontSize\":\"20px\"};\nexport const calciteTypographyHierarchyHeading1 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"24px\"};\nexport const calciteTypographyHierarchyHeading2 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"20px\"};\nexport const calciteTypographyHierarchyHeading3 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"18px\"};\nexport const calciteTypographyHierarchyHeading4 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\",\"fontSize\":\"16px\"};\nexport const calciteTypographyHierarchyHeading5 = {\"fontWeight\":\"500\",\"lineHeight\":\"137.5%\"};\nexport const calciteTypographyHierarchyBodySnug = {\"lineHeight\":\"137.5%\"};\nexport const calciteTypographyHierarchyBody = {\"fontFamily\":[\"Avenir Next World\",\"Avenir Next LT Pro\",\"Avenir\",\"Helvetica Neue\",\"sans-serif\"],\"fontSize\":\"14px\",\"fontWeight\":\"400\",\"letterSpacing\":\"0\",\"lineHeight\":\"16px\",\"paragraphSpacing\":\"4px\",\"textCase\":\"none\",\"textDecoration\":\"none\"};\nexport const calciteTypographyHierarchyOverline = {\"lineHeight\":\"12px\",\"textCase\":\"uppercase\",\"fontWeight\":\"700\"};\nexport const calciteTypographyHierarchyCaption = {\"lineHeight\":\"137.5%\",\"fontSize\":\"12px\"};\nexport const calciteZIndexDeep = \"-999999\";\nexport const calciteZIndex = \"1\";\nexport const calciteZIndexSticky = \"300\";\nexport const calciteZIndexHeader = \"400\";\nexport const calciteZIndexToast = \"500\";\nexport const calciteZIndexDropdown = \"600\";\nexport const calciteZIndexOverlay = \"700\";\nexport const calciteZIndexModal = \"800\";\nexport const calciteZIndexPopup = \"900\";\nexport const calciteZIndexTooltip = \"901\";\n","import {\n  calciteContainerSizeWidthLg,\n  calciteContainerSizeWidthMd,\n  calciteContainerSizeWidthSm,\n  calciteContainerSizeWidthXs,\n  calciteContainerSizeWidthXxs,\n} from \"@esri/calcite-design-tokens/dist/es6/global\";\n\nexport interface Breakpoints {\n  width: {\n    large: number;\n    medium: number;\n    small: number;\n    xsmall: number;\n    xxsmall: number;\n  };\n}\n\n/**\n * A breakpoints lookup object.\n */\nexport const breakpoints: Breakpoints = {\n  width: {\n    large: cssLengthToNumber(calciteContainerSizeWidthLg.max),\n    medium: cssLengthToNumber(calciteContainerSizeWidthMd.max),\n    small: cssLengthToNumber(calciteContainerSizeWidthSm.max),\n    xsmall: cssLengthToNumber(calciteContainerSizeWidthXs.max),\n    xxsmall: cssLengthToNumber(calciteContainerSizeWidthXxs.max),\n  },\n};\n\nfunction cssLengthToNumber(length: string): number {\n  return parseInt(length);\n}\n",":host {\n  @apply flex;\n  writing-mode: horizontal-tb;\n}\n\n:host([scale=\"s\"]) {\n  & .chevron,\n  & .page,\n  & .ellipsis {\n    @apply text-n2h h-6 px-1;\n    min-inline-size: theme(\"width.6\");\n  }\n}\n\n:host([scale=\"m\"]) {\n  & .chevron,\n  & .page,\n  & .ellipsis {\n    @apply text-n1h h-8 px-2;\n    min-inline-size: theme(\"width.8\");\n  }\n}\n\n:host([scale=\"l\"]) {\n  & .chevron,\n  & .page,\n  & .ellipsis {\n    @apply text-0h h-11;\n    min-inline-size: theme(\"width.11\");\n  }\n\n  & .chevron {\n    @apply px-2.5;\n  }\n\n  & .page,\n  & .ellipsis {\n    @apply px-3;\n  }\n}\n\n// focus styles\n:host button {\n  @apply focus-base;\n  &:focus {\n    @apply focus-inset;\n  }\n}\n\n.chevron,\n.page,\n.ellipsis {\n  @apply p-0\n    m-0\n    text-0h\n    text-color-3\n    font-inherit\n    box-border\n    flex\n    items-center\n    border-none\n    border-opacity-0\n    justify-center\n    align-baseline\n    bg-transparent;\n}\n\n.chevron,\n.page {\n  @apply cursor-pointer;\n  border-block: 2px solid transparent;\n\n  &:hover {\n    @apply text-color-1 transition-default;\n  }\n}\n\n.page {\n  &:hover {\n    @apply border-b-color-2;\n  }\n  &.selected {\n    @apply text-color-1 border-b-color-brand font-medium;\n  }\n}\n\n.chevron {\n  &:hover {\n    @apply bg-foreground-2;\n    color: theme(\"backgroundColor.brand\");\n  }\n  &:active {\n    @apply bg-foreground-3;\n  }\n  &.disabled {\n    @apply pointer-events-none bg-transparent;\n    & > calcite-icon {\n      @apply opacity-disabled;\n    }\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  LocalizedComponent,\n  NumberingSystem,\n  numberStringFormatter,\n} from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Scale } from \"../interfaces\";\nimport { PaginationMessages } from \"./assets/pagination/t9n\";\nimport { CSS, ICONS } from \"./resources\";\nimport { createObserver } from \"../../utils/observers\";\nimport { breakpoints } from \"../../utils/responsive\";\nimport { getIconScale } from \"../../utils/component\";\n\nexport interface PaginationDetail {\n  start: number;\n  totalItems: number;\n  startItem: number;\n}\n\nconst firstAndLastPageCount = 2;\nconst ellipsisCount = 2;\n\nconst maxItemBreakpoints = {\n  large: 11,\n  medium: 9,\n  small: 7,\n  xsmall: 5,\n  xxsmall: 1,\n};\n\n@Component({\n  tag: \"calcite-pagination\",\n  styleUrl: \"pagination.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  assetsDirs: [\"assets\"],\n})\nexport class Pagination\n  implements LocalizedComponent, LocalizedComponent, LoadableComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, number values are displayed with a group separator corresponding to the language and country format.\n   */\n  @Prop({ reflect: true }) groupSeparator = false;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: PaginationMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<PaginationMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop() numberingSystem: NumberingSystem;\n\n  /** Specifies the number of items per page. */\n  @Prop({ mutable: true, reflect: true }) pageSize = 20;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the starting item number. */\n  @Prop({ mutable: true, reflect: true }) startItem = 1;\n\n  /** Specifies the total number of items. */\n  @Prop({ reflect: true }) totalItems = 0;\n\n  @Watch(\"totalItems\")\n  @Watch(\"pageSize\")\n  handleTotalPages(): void {\n    if (this.pageSize < 1) {\n      this.pageSize = 1;\n    }\n    this.totalPages = this.totalItems / this.pageSize;\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalcitePaginationElement;\n\n  @State() defaultMessages: PaginationMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleWatcher(): void {\n    numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: this.groupSeparator,\n    };\n  }\n\n  @State() maxItems = maxItemBreakpoints.xxsmall;\n\n  @State() totalPages: number;\n\n  @State() lastStartItem: number;\n\n  @Watch(\"totalItems\")\n  @Watch(\"pageSize\")\n  @Watch(\"totalPages\")\n  handleLastStartItemChange(): void {\n    const { totalItems, pageSize, totalPages } = this;\n\n    this.lastStartItem =\n      (totalItems % pageSize === 0 ? totalItems - pageSize : Math.floor(totalPages) * pageSize) + 1;\n  }\n\n  @State() isXXSmall: boolean;\n\n  @Watch(\"maxItems\")\n  handleIsXXSmall(): void {\n    this.isXXSmall = this.maxItems === maxItemBreakpoints.xxsmall;\n  }\n\n  private resizeObserver = createObserver(\"resize\", (entries) =>\n    entries.forEach(this.resizeHandler),\n  );\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emits when the selected page changes.\n   */\n  @Event({ cancelable: false }) calcitePaginationChange: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n    this.resizeObserver?.observe(this.el);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n    this.handleTotalPages();\n    this.handleLastStartItemChange();\n    this.handleIsXXSmall();\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    this.setMaxItemsToBreakpoint(this.el.clientWidth);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.resizeObserver?.disconnect();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Sets focus on the component's first focusable element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.el.focus();\n  }\n\n  /** Go to the next page of results. */\n  @Method()\n  async nextPage(): Promise<void> {\n    this.startItem = Math.min(this.lastStartItem, this.startItem + this.pageSize);\n  }\n\n  /** Go to the previous page of results. */\n  @Method()\n  async previousPage(): Promise<void> {\n    this.startItem = Math.max(1, this.startItem - this.pageSize);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private setMaxItemsToBreakpoint(width: number): void {\n    if (!breakpoints || !width) {\n      return;\n    }\n\n    if (width >= breakpoints.width.medium) {\n      this.maxItems = maxItemBreakpoints.large;\n      return;\n    }\n\n    if (width >= breakpoints.width.small) {\n      this.maxItems = maxItemBreakpoints.medium;\n      return;\n    }\n\n    if (width >= breakpoints.width.xsmall) {\n      this.maxItems = maxItemBreakpoints.small;\n      return;\n    }\n\n    if (width >= breakpoints.width.xxsmall) {\n      this.maxItems = maxItemBreakpoints.xsmall;\n      return;\n    }\n\n    this.maxItems = maxItemBreakpoints.xxsmall;\n  }\n\n  private resizeHandler = ({ contentRect: { width } }: ResizeObserverEntry): void =>\n    this.setMaxItemsToBreakpoint(width);\n\n  private firstClicked = (): void => {\n    this.startItem = 1;\n    this.emitUpdate();\n  };\n\n  private lastClicked = (): void => {\n    this.startItem = this.lastStartItem;\n    this.emitUpdate();\n  };\n\n  private previousClicked = async (): Promise<void> => {\n    await this.previousPage();\n    this.emitUpdate();\n  };\n\n  private nextClicked = async (): Promise<void> => {\n    await this.nextPage();\n    this.emitUpdate();\n  };\n\n  private showStartEllipsis() {\n    return (\n      this.totalPages > this.maxItems &&\n      Math.floor(this.startItem / this.pageSize) >\n        this.maxItems - firstAndLastPageCount - ellipsisCount\n    );\n  }\n\n  private showEndEllipsis() {\n    return (\n      this.totalPages > this.maxItems &&\n      (this.totalItems - this.startItem) / this.pageSize >\n        this.maxItems - firstAndLastPageCount - (ellipsisCount - 1)\n    );\n  }\n\n  private emitUpdate() {\n    this.calcitePaginationChange.emit();\n  }\n\n  private handlePageClick = (event: Event) => {\n    const target = event.target as HTMLButtonElement;\n    this.startItem = parseInt(target.value, 10);\n    this.emitUpdate();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  renderEllipsis(type: \"start\" | \"end\"): VNode {\n    return (\n      <span class={CSS.ellipsis} data-test-ellipsis={type} key={type}>\n        &hellip;\n      </span>\n    );\n  }\n\n  renderItems(): VNode[] {\n    const { totalItems, pageSize, startItem, maxItems, totalPages, lastStartItem, isXXSmall } =\n      this;\n\n    const items: VNode[] = [];\n\n    if (isXXSmall) {\n      items.push(this.renderPage(startItem));\n      return items;\n    }\n\n    const renderFirstPage = totalItems > pageSize;\n    const renderStartEllipsis = this.showStartEllipsis();\n    const renderEndEllipsis = this.showEndEllipsis();\n\n    if (renderFirstPage) {\n      items.push(this.renderPage(1));\n    }\n\n    if (renderStartEllipsis) {\n      items.push(this.renderEllipsis(\"start\"));\n    }\n\n    const remainingItems =\n      maxItems -\n      firstAndLastPageCount -\n      (renderEndEllipsis ? 1 : 0) -\n      (renderStartEllipsis ? 1 : 0);\n\n    let end: number;\n    let nextStart: number;\n\n    // if we don't need ellipses render the whole set\n    if (totalPages - 1 <= remainingItems) {\n      nextStart = 1 + pageSize;\n      end = lastStartItem - pageSize;\n    } else {\n      // if we're within max pages of page 1\n      if (startItem / pageSize < remainingItems) {\n        nextStart = 1 + pageSize;\n        end = 1 + remainingItems * pageSize;\n      } else {\n        // if we're within max pages of last page\n        if (startItem + remainingItems * pageSize >= totalItems) {\n          nextStart = lastStartItem - remainingItems * pageSize;\n          end = lastStartItem - pageSize;\n        } else {\n          // if we're within the center pages\n          nextStart = startItem - pageSize * ((remainingItems - 1) / 2);\n          end = startItem + pageSize * ((remainingItems - 1) / 2);\n        }\n      }\n    }\n\n    for (let i = 0; i < remainingItems && nextStart <= end; i++) {\n      items.push(this.renderPage(nextStart));\n      nextStart = nextStart + pageSize;\n    }\n\n    if (renderEndEllipsis) {\n      items.push(this.renderEllipsis(\"end\"));\n    }\n\n    items.push(this.renderPage(lastStartItem));\n\n    return items;\n  }\n\n  renderPage(start: number): VNode {\n    const { pageSize } = this;\n    const page = Math.floor(start / pageSize) + (pageSize === 1 ? 0 : 1);\n\n    numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: this.groupSeparator,\n    };\n\n    const displayedPage = numberStringFormatter.localize(page.toString());\n    const selected = start === this.startItem;\n\n    return (\n      <button\n        aria-current={selected ? \"page\" : \"false\"}\n        class={{\n          [CSS.page]: true,\n          [CSS.selected]: selected,\n        }}\n        onClick={this.handlePageClick}\n        value={start}\n      >\n        {displayedPage}\n      </button>\n    );\n  }\n\n  renderPreviousChevron(): VNode {\n    const { pageSize, startItem, messages } = this;\n\n    const disabled = pageSize === 1 ? startItem <= pageSize : startItem < pageSize;\n\n    return (\n      <button\n        aria-label={messages.previous}\n        class={{\n          [CSS.chevron]: true,\n          [CSS.disabled]: disabled,\n        }}\n        data-test-chevron=\"previous\"\n        disabled={disabled}\n        key=\"previous\"\n        onClick={this.previousClicked}\n      >\n        <calcite-icon flipRtl icon={ICONS.previous} scale={getIconScale(this.scale)} />\n      </button>\n    );\n  }\n\n  renderNextChevron(): VNode {\n    const { totalItems, pageSize, startItem, messages } = this;\n\n    const disabled =\n      pageSize === 1 ? startItem + pageSize > totalItems : startItem + pageSize > totalItems;\n\n    return (\n      <button\n        aria-label={messages.next}\n        class={{\n          [CSS.chevron]: true,\n          [CSS.disabled]: disabled,\n        }}\n        data-test-chevron=\"next\"\n        disabled={disabled}\n        key=\"next-button\"\n        onClick={this.nextClicked}\n      >\n        <calcite-icon flipRtl icon={ICONS.next} scale={getIconScale(this.scale)} />\n      </button>\n    );\n  }\n\n  renderFirstChevron(): VNode {\n    const { messages, startItem, isXXSmall } = this;\n\n    const disabled = startItem === 1;\n\n    return isXXSmall ? (\n      <button\n        aria-label={messages.first}\n        class={{\n          [CSS.chevron]: true,\n          [CSS.disabled]: disabled,\n        }}\n        disabled={disabled}\n        key=\"first-button\"\n        onClick={this.firstClicked}\n      >\n        <calcite-icon flipRtl icon={ICONS.first} scale={getIconScale(this.scale)} />\n      </button>\n    ) : null;\n  }\n\n  renderLastChevron(): VNode {\n    const { messages, startItem, isXXSmall, lastStartItem } = this;\n\n    const disabled = startItem === lastStartItem;\n\n    return isXXSmall ? (\n      <button\n        aria-label={messages.last}\n        class={{\n          [CSS.chevron]: true,\n          [CSS.disabled]: disabled,\n        }}\n        disabled={disabled}\n        key=\"last-button\"\n        onClick={this.lastClicked}\n      >\n        <calcite-icon flipRtl icon={ICONS.last} scale={getIconScale(this.scale)} />\n      </button>\n    ) : null;\n  }\n\n  render(): VNode {\n    return (\n      <Fragment>\n        {this.renderFirstChevron()}\n        {this.renderPreviousChevron()}\n        {this.renderItems()}\n        {this.renderNextChevron()}\n        {this.renderLastChevron()}\n      </Fragment>\n    );\n  }\n}\n"],"version":3}

package/dist/components/panel.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.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { d as slotChangeHasAssignedElement, s as slotChangeGetAssignedElements, f as focusFirstTabbable, t as toAriaBoolean } from './dom.js';

package/dist/components/pick-list-item.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.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
@@ -39,7 +39,7 @@ const SLOTS = {
     actionsStart: "actions-start",
 };
 
-const pickListItemCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{margin:0px;margin-block-end:1px;box-sizing:border-box;display:flex;align-items:stretch;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-1);--tw-shadow:0 1px 0 var(--calcite-color-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transition:background-color var(--calcite-animation-timing);animation:calcite-fade-in var(--calcite-animation-timing)}:host *{box-sizing:border-box}.label{display:flex;flex:1 1 auto;cursor:pointer;align-items:center;background-color:transparent;outline-color:transparent}.label:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.label:hover{background-color:var(--calcite-color-foreground-2)}:host([non-interactive]:hover){background-color:var(--calcite-color-foreground-1)}:host([non-interactive]) .label,:host([non-interactive]) .icon{pointer-events:none}.icon{margin-block:0px;display:flex;cursor:pointer;align-items:center;padding:0.25rem;color:var(--calcite-color-brand);flex:0 0 auto;line-height:0}.icon:hover{background-color:var(--calcite-color-foreground-2)}.icon-dot{display:flex;inline-size:1.5rem;align-items:center;padding:0.5rem}.icon-dot:before{opacity:0;content:\"•\"}.icon calcite-icon{opacity:0}:host([selected]) .icon-dot:before,:host([selected]) .icon calcite-icon{transition:opacity var(--calcite-animation-timing);opacity:1}.text-container{pointer-events:none;display:flex;flex-direction:column;flex-wrap:nowrap;overflow:hidden;padding-block:0.5rem;padding-inline:0.75rem;font-size:var(--calcite-font-size--2);line-height:1.375;word-wrap:break-word;word-break:break-word}.title{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-1)}.description{margin-block-start:0.125rem;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}.actions{margin:0px;display:flex;flex:0 1 auto;align-items:stretch;justify-content:flex-end}.actions--start~.label{padding-inline-start:0.25rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
+const pickListItemCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{margin:0px;margin-block-end:1px;box-sizing:border-box;display:flex;align-items:stretch;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-1);--tw-shadow:0 1px 0 var(--calcite-color-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transition:background-color var(--calcite-animation-timing);animation:calcite-fade-in var(--calcite-animation-timing)}:host *{box-sizing:border-box}.label{display:flex;flex:1 1 auto;cursor:pointer;align-items:center;background-color:transparent;outline-color:transparent}.label:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.label:hover{background-color:var(--calcite-color-foreground-2)}:host([non-interactive]:hover){background-color:var(--calcite-color-foreground-1)}:host([non-interactive]) .label,:host([non-interactive]) .icon{pointer-events:none}.icon{margin-block:0px;display:flex;cursor:pointer;align-items:center;padding:0.25rem;color:var(--calcite-color-brand);flex:0 0 auto;line-height:0}.icon:hover{background-color:var(--calcite-color-foreground-2)}.icon-dot{display:flex;inline-size:1.5rem;align-items:center;padding:0.5rem}.icon-dot:before{opacity:0;content:\"•\"}.icon calcite-icon{opacity:0}:host([selected]) .icon-dot:before,:host([selected]) .icon calcite-icon{transition:opacity var(--calcite-animation-timing);opacity:1}.text-container{pointer-events:none;display:flex;flex-direction:column;flex-wrap:nowrap;overflow:hidden;padding-block:0.5rem;padding-inline:0.75rem;font-size:var(--calcite-font-size--2);line-height:1.375;word-wrap:break-word;word-break:break-word}.title{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-1)}.description{margin-block-start:0.125rem;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}.actions{margin:0px;display:flex;flex:0 1 auto;align-items:stretch;justify-content:flex-end}.actions--start~.label{padding-inline-start:0.25rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
 
 const PickListItem = /*@__PURE__*/ proxyCustomElement(class PickListItem extends HTMLElement {
     constructor() {

package/dist/components/pick-list-item.js.map

@@ -1 +1 @@
-{"file":"pick-list-item.js","mappings":"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","names":[],"sources":["src/components/pick-list-item/resources.ts","src/components/pick-list-item/pick-list-item.scss?tag=calcite-pick-list-item&encapsulation=shadow","src/components/pick-list-item/pick-list-item.tsx"],"sourcesContent":["export const CSS = {\n  actions: \"actions\",\n  actionsEnd: \"actions--end\",\n  actionsStart: \"actions--start\",\n  description: \"description\",\n  handle: \"handle\",\n  handleActivated: \"handle--activated\",\n  highlight: \"highlight\",\n  icon: \"icon\",\n  iconDot: \"icon-dot\",\n  label: \"label\",\n  remove: \"remove\",\n  title: \"title\",\n  textContainer: \"text-container\",\n};\n\nexport const ICONS = {\n  checked: \"check\",\n  remove: \"x\",\n};\n\nexport const SLOTS = {\n  actionsEnd: \"actions-end\",\n  actionsStart: \"actions-start\",\n};\n",":host {\n  @apply bg-foreground-1\n    text-n1\n    text-color-1\n    shadow-border-bottom\n    bg-foreground-1\n    text-n1h\n    m-0\n    mb-px\n    box-border\n    flex\n    items-stretch;\n  transition: background-color var(--calcite-animation-timing);\n  animation: calcite-fade-in var(--calcite-animation-timing);\n\n  * {\n    @apply box-border;\n  }\n}\n\n.label {\n  @apply focus-base\n    flex\n    flex-auto\n    cursor-pointer\n    items-center\n    bg-transparent;\n  &:focus {\n    @apply focus-inset;\n  }\n  &:hover {\n    @apply bg-foreground-2;\n  }\n}\n\n:host([non-interactive]:hover) {\n  @apply bg-foreground-1;\n}\n\n:host([non-interactive]) .label,\n:host([non-interactive]) .icon {\n  @apply pointer-events-none;\n}\n\n.icon {\n  @apply my-0 flex cursor-pointer items-center p-1;\n  color: theme(\"colors.brand\");\n  flex: 0 0 auto;\n  line-height: 0;\n  &:hover {\n    @apply bg-foreground-2;\n  }\n}\n\n.icon-dot {\n  @apply flex w-6 items-center p-2;\n  &:before {\n    @apply opacity-0;\n    content: \"\\2022\";\n  }\n}\n\n.icon calcite-icon {\n  @apply opacity-0;\n}\n\n:host([selected]) .icon-dot:before,\n:host([selected]) .icon calcite-icon {\n  transition: opacity var(--calcite-animation-timing);\n  @apply opacity-100;\n}\n\n.text-container {\n  @apply text-n2-wrap\n    word-break\n    pointer-events-none\n    flex\n    flex-col\n    flex-nowrap\n    overflow-hidden\n    py-2\n    px-3;\n}\n\n.title {\n  @apply text-color-1 font-normal;\n}\n\n.description {\n  @apply text-color-3 mt-0.5 font-normal;\n}\n\n.actions {\n  @apply m-0 flex flex-initial items-stretch justify-end;\n}\n\n.actions--start ~ .label {\n  padding-inline-start: theme(\"padding.1\");\n}\n\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { getSlotted, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { ICON_TYPES } from \"../pick-list/resources\";\nimport { PickListItemMessages } from \"./assets/pick-list-item/t9n\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\n/**\n * @deprecated Use the `list` component instead.\n * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component.\n * @slot actions-start - A slot for adding `calcite-action`s or content to the start side of the component.\n */\n@Component({\n  tag: \"calcite-pick-list-item\",\n  styleUrl: \"pick-list-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class PickListItem\n  implements ConditionalSlotComponent, InteractiveComponent, LoadableComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * A description for the component that displays below the label text.\n   */\n  @Prop({ reflect: true }) description: string;\n\n  @Watch(\"description\")\n  descriptionWatchHandler(): void {\n    this.calciteInternalListItemPropsChange.emit();\n  }\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When `false`, the component cannot be deselected by user interaction.\n   */\n  @Prop({ reflect: true }) deselectDisabled = false;\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true }) nonInteractive = false;\n\n  /**\n   * Determines the icon SVG symbol that will be shown. Options are `\"circle\"`, `\"square\"`, `\"grip\"` or `null`.\n   *\n   * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5)\n   */\n  @Prop({ reflect: true }) icon: ICON_TYPES | null = null;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * Label and accessible name for the component. Appears next to the icon.\n   */\n  @Prop({ reflect: true }) label!: string;\n\n  @Watch(\"label\")\n  labelWatchHandler(): void {\n    this.calciteInternalListItemPropsChange.emit();\n  }\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<PickListItemMessages>;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: PickListItemMessages;\n\n  @Watch(\"defaultMessages\")\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Provides additional metadata to the component. Primary use is for a filter on the parent list.\n   */\n  @Prop() metadata: Record<string, unknown>;\n\n  @Watch(\"metadata\")\n  metadataWatchHandler(): void {\n    this.calciteInternalListItemPropsChange.emit();\n  }\n\n  /**\n   * When `true`, displays a remove action that removes the item from the list.\n   */\n  @Prop({ reflect: true }) removable = false;\n\n  /**\n   * When `true`, selects an item. Toggles when an item is checked/unchecked.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  @Watch(\"selected\")\n  selectedWatchHandler(): void {\n    this.calciteListItemChange.emit({\n      item: this.el,\n      value: this.value,\n      selected: this.selected,\n      shiftPressed: this.shiftPressed,\n    });\n\n    this.shiftPressed = false;\n  }\n\n  /**\n   * The component's value.\n   */\n  @Prop() value!: any;\n\n  @Watch(\"value\")\n  valueWatchHandler(newValue: any, oldValue: any): void {\n    this.calciteInternalListItemValueChange.emit({ oldValue, newValue });\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalcitePickListItemElement;\n\n  private focusEl: HTMLLabelElement;\n\n  shiftPressed: boolean;\n\n  @State() defaultMessages: PickListItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    connectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectConditionalSlotComponent(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the component is selected or unselected.\n   */\n  @Event({ cancelable: false }) calciteListItemChange: EventEmitter<{\n    item: HTMLCalcitePickListItemElement;\n    value: any;\n    selected: boolean;\n    shiftPressed: boolean;\n  }>;\n\n  /**\n   * Fires when the remove button is pressed.\n   */\n  @Event({ cancelable: true }) calciteListItemRemove: EventEmitter<void>;\n\n  /**\n   * Emits when the component's label, description, value, or metadata properties are modified.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalListItemPropsChange: EventEmitter<void>;\n\n  /**\n   * Emits when the component's value property is modified.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalListItemValueChange: EventEmitter<{\n    oldValue: any;\n    newValue: any;\n  }>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Toggles the selection state. By default this won't trigger an event.\n   * The first argument allows the value to be coerced, rather than swapping values.\n   *\n   * @param coerce\n   */\n  @Method()\n  async toggleSelected(coerce?: boolean): Promise<void> {\n    this.selected = typeof coerce === \"boolean\" ? coerce : !this.selected;\n  }\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.focusEl?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  pickListClickHandler = (event: MouseEvent): void => {\n    if (this.disabled || (this.deselectDisabled && this.selected) || this.nonInteractive) {\n      return;\n    }\n\n    this.shiftPressed = event.shiftKey;\n    this.selected = !this.selected;\n  };\n\n  pickListKeyDownHandler = (event: KeyboardEvent): void => {\n    if (event.key === \" \") {\n      event.preventDefault();\n      if ((this.deselectDisabled && this.selected) || this.nonInteractive) {\n        return;\n      }\n      this.selected = !this.selected;\n    }\n  };\n\n  removeClickHandler = (): void => {\n    this.calciteListItemRemove.emit();\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderIcon(): VNode {\n    const { icon, iconFlipRtl } = this;\n\n    if (!icon) {\n      return null;\n    }\n\n    return (\n      <span\n        class={{\n          [CSS.icon]: true,\n          [CSS.iconDot]: icon === ICON_TYPES.circle,\n        }}\n        onClick={this.pickListClickHandler}\n      >\n        {icon === ICON_TYPES.square ? (\n          <calcite-icon flipRtl={iconFlipRtl} icon={ICONS.checked} scale=\"s\" />\n        ) : null}\n      </span>\n    );\n  }\n\n  renderRemoveAction(): VNode {\n    return this.removable ? (\n      <calcite-action\n        class={CSS.remove}\n        icon={ICONS.remove}\n        onClick={this.removeClickHandler}\n        slot={SLOTS.actionsEnd}\n        text={this.messages.remove}\n      />\n    ) : null;\n  }\n\n  renderActionsStart(): VNode {\n    const { el } = this;\n    const hasActionsStart = getSlotted(el, SLOTS.actionsStart);\n\n    return hasActionsStart ? (\n      <div class={{ [CSS.actions]: true, [CSS.actionsStart]: true }}>\n        <slot name={SLOTS.actionsStart} />\n      </div>\n    ) : null;\n  }\n\n  renderActionsEnd(): VNode {\n    const { el, removable } = this;\n    const hasActionsEnd = getSlotted(el, SLOTS.actionsEnd);\n\n    return hasActionsEnd || removable ? (\n      <div class={{ [CSS.actions]: true, [CSS.actionsEnd]: true }}>\n        <slot name={SLOTS.actionsEnd} />\n        {this.renderRemoveAction()}\n      </div>\n    ) : null;\n  }\n\n  render(): VNode {\n    const { description, label } = this;\n\n    return (\n      <InteractiveContainer disabled={this.disabled}>\n        {this.renderIcon()}\n        {this.renderActionsStart()}\n        <label\n          aria-label={label}\n          class={CSS.label}\n          onClick={this.pickListClickHandler}\n          onKeyDown={this.pickListKeyDownHandler}\n          tabIndex={0}\n          // 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)\n          ref={(focusEl): HTMLLabelElement => (this.focusEl = focusEl)}\n        >\n          <div\n            aria-checked={toAriaBoolean(this.selected)}\n            class={CSS.textContainer}\n            role=\"menuitemcheckbox\"\n          >\n            <span class={CSS.title}>{label}</span>\n            {description ? <span class={CSS.description}>{description}</span> : null}\n          </div>\n        </label>\n        {this.renderActionsEnd()}\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}
+{"file":"pick-list-item.js","mappings":"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","names":[],"sources":["src/components/pick-list-item/resources.ts","src/components/pick-list-item/pick-list-item.scss?tag=calcite-pick-list-item&encapsulation=shadow","src/components/pick-list-item/pick-list-item.tsx"],"sourcesContent":["export const CSS = {\n  actions: \"actions\",\n  actionsEnd: \"actions--end\",\n  actionsStart: \"actions--start\",\n  description: \"description\",\n  handle: \"handle\",\n  handleActivated: \"handle--activated\",\n  highlight: \"highlight\",\n  icon: \"icon\",\n  iconDot: \"icon-dot\",\n  label: \"label\",\n  remove: \"remove\",\n  title: \"title\",\n  textContainer: \"text-container\",\n};\n\nexport const ICONS = {\n  checked: \"check\",\n  remove: \"x\",\n};\n\nexport const SLOTS = {\n  actionsEnd: \"actions-end\",\n  actionsStart: \"actions-start\",\n};\n",":host {\n  @apply bg-foreground-1\n    text-n1\n    text-color-1\n    shadow-border-bottom\n    bg-foreground-1\n    text-n1h\n    m-0\n    mb-px\n    box-border\n    flex\n    items-stretch;\n  transition: background-color var(--calcite-animation-timing);\n  animation: calcite-fade-in var(--calcite-animation-timing);\n\n  * {\n    @apply box-border;\n  }\n}\n\n.label {\n  @apply focus-base\n    flex\n    flex-auto\n    cursor-pointer\n    items-center\n    bg-transparent;\n  &:focus {\n    @apply focus-inset;\n  }\n  &:hover {\n    @apply bg-foreground-2;\n  }\n}\n\n:host([non-interactive]:hover) {\n  @apply bg-foreground-1;\n}\n\n:host([non-interactive]) .label,\n:host([non-interactive]) .icon {\n  @apply pointer-events-none;\n}\n\n.icon {\n  @apply my-0 flex cursor-pointer items-center p-1;\n  color: theme(\"colors.brand\");\n  flex: 0 0 auto;\n  line-height: 0;\n  &:hover {\n    @apply bg-foreground-2;\n  }\n}\n\n.icon-dot {\n  @apply flex w-6 items-center p-2;\n  &:before {\n    @apply opacity-0;\n    content: \"\\2022\";\n  }\n}\n\n.icon calcite-icon {\n  @apply opacity-0;\n}\n\n:host([selected]) .icon-dot:before,\n:host([selected]) .icon calcite-icon {\n  transition: opacity var(--calcite-animation-timing);\n  @apply opacity-100;\n}\n\n.text-container {\n  @apply text-n2-wrap\n    word-break\n    pointer-events-none\n    flex\n    flex-col\n    flex-nowrap\n    overflow-hidden\n    py-2\n    px-3;\n}\n\n.title {\n  @apply text-color-1 font-normal;\n}\n\n.description {\n  @apply text-color-3 mt-0.5 font-normal;\n}\n\n.actions {\n  @apply m-0 flex flex-initial items-stretch justify-end;\n}\n\n.actions--start ~ .label {\n  padding-inline-start: theme(\"padding.1\");\n}\n\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { getSlotted, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { ICON_TYPES } from \"../pick-list/resources\";\nimport { PickListItemMessages } from \"./assets/pick-list-item/t9n\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\n/**\n * @deprecated Use the `list` component instead.\n * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component.\n * @slot actions-start - A slot for adding `calcite-action`s or content to the start side of the component.\n */\n@Component({\n  tag: \"calcite-pick-list-item\",\n  styleUrl: \"pick-list-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class PickListItem\n  implements ConditionalSlotComponent, InteractiveComponent, LoadableComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * A description for the component that displays below the label text.\n   */\n  @Prop({ reflect: true }) description: string;\n\n  @Watch(\"description\")\n  descriptionWatchHandler(): void {\n    this.calciteInternalListItemPropsChange.emit();\n  }\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When `false`, the component cannot be deselected by user interaction.\n   */\n  @Prop({ reflect: true }) deselectDisabled = false;\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true }) nonInteractive = false;\n\n  /**\n   * Determines the icon SVG symbol that will be shown. Options are `\"circle\"`, `\"square\"`, `\"grip\"` or `null`.\n   *\n   * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5)\n   */\n  @Prop({ reflect: true }) icon: ICON_TYPES | null = null;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * Label and accessible name for the component. Appears next to the icon.\n   */\n  @Prop({ reflect: true }) label!: string;\n\n  @Watch(\"label\")\n  labelWatchHandler(): void {\n    this.calciteInternalListItemPropsChange.emit();\n  }\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<PickListItemMessages>;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: PickListItemMessages;\n\n  @Watch(\"defaultMessages\")\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Provides additional metadata to the component. Primary use is for a filter on the parent list.\n   */\n  @Prop() metadata: Record<string, unknown>;\n\n  @Watch(\"metadata\")\n  metadataWatchHandler(): void {\n    this.calciteInternalListItemPropsChange.emit();\n  }\n\n  /**\n   * When `true`, displays a remove action that removes the item from the list.\n   */\n  @Prop({ reflect: true }) removable = false;\n\n  /**\n   * When `true`, selects an item. Toggles when an item is checked/unchecked.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  @Watch(\"selected\")\n  selectedWatchHandler(): void {\n    this.calciteListItemChange.emit({\n      item: this.el,\n      value: this.value,\n      selected: this.selected,\n      shiftPressed: this.shiftPressed,\n    });\n\n    this.shiftPressed = false;\n  }\n\n  /**\n   * The component's value.\n   */\n  @Prop() value!: any;\n\n  @Watch(\"value\")\n  valueWatchHandler(newValue: any, oldValue: any): void {\n    this.calciteInternalListItemValueChange.emit({ oldValue, newValue });\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalcitePickListItemElement;\n\n  private focusEl: HTMLLabelElement;\n\n  shiftPressed: boolean;\n\n  @State() defaultMessages: PickListItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    connectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectConditionalSlotComponent(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the component is selected or unselected.\n   */\n  @Event({ cancelable: false }) calciteListItemChange: EventEmitter<{\n    item: HTMLCalcitePickListItemElement;\n    value: any;\n    selected: boolean;\n    shiftPressed: boolean;\n  }>;\n\n  /**\n   * Fires when the remove button is pressed.\n   */\n  @Event({ cancelable: true }) calciteListItemRemove: EventEmitter<void>;\n\n  /**\n   * Emits when the component's label, description, value, or metadata properties are modified.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalListItemPropsChange: EventEmitter<void>;\n\n  /**\n   * Emits when the component's value property is modified.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalListItemValueChange: EventEmitter<{\n    oldValue: any;\n    newValue: any;\n  }>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Toggles the selection state. By default this won't trigger an event.\n   * The first argument allows the value to be coerced, rather than swapping values.\n   *\n   * @param coerce\n   */\n  @Method()\n  async toggleSelected(coerce?: boolean): Promise<void> {\n    this.selected = typeof coerce === \"boolean\" ? coerce : !this.selected;\n  }\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.focusEl?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  pickListClickHandler = (event: MouseEvent): void => {\n    if (this.disabled || (this.deselectDisabled && this.selected) || this.nonInteractive) {\n      return;\n    }\n\n    this.shiftPressed = event.shiftKey;\n    this.selected = !this.selected;\n  };\n\n  pickListKeyDownHandler = (event: KeyboardEvent): void => {\n    if (event.key === \" \") {\n      event.preventDefault();\n      if ((this.deselectDisabled && this.selected) || this.nonInteractive) {\n        return;\n      }\n      this.selected = !this.selected;\n    }\n  };\n\n  removeClickHandler = (): void => {\n    this.calciteListItemRemove.emit();\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderIcon(): VNode {\n    const { icon, iconFlipRtl } = this;\n\n    if (!icon) {\n      return null;\n    }\n\n    return (\n      <span\n        class={{\n          [CSS.icon]: true,\n          [CSS.iconDot]: icon === ICON_TYPES.circle,\n        }}\n        onClick={this.pickListClickHandler}\n      >\n        {icon === ICON_TYPES.square ? (\n          <calcite-icon flipRtl={iconFlipRtl} icon={ICONS.checked} scale=\"s\" />\n        ) : null}\n      </span>\n    );\n  }\n\n  renderRemoveAction(): VNode {\n    return this.removable ? (\n      <calcite-action\n        class={CSS.remove}\n        icon={ICONS.remove}\n        onClick={this.removeClickHandler}\n        slot={SLOTS.actionsEnd}\n        text={this.messages.remove}\n      />\n    ) : null;\n  }\n\n  renderActionsStart(): VNode {\n    const { el } = this;\n    const hasActionsStart = getSlotted(el, SLOTS.actionsStart);\n\n    return hasActionsStart ? (\n      <div class={{ [CSS.actions]: true, [CSS.actionsStart]: true }}>\n        <slot name={SLOTS.actionsStart} />\n      </div>\n    ) : null;\n  }\n\n  renderActionsEnd(): VNode {\n    const { el, removable } = this;\n    const hasActionsEnd = getSlotted(el, SLOTS.actionsEnd);\n\n    return hasActionsEnd || removable ? (\n      <div class={{ [CSS.actions]: true, [CSS.actionsEnd]: true }}>\n        <slot name={SLOTS.actionsEnd} />\n        {this.renderRemoveAction()}\n      </div>\n    ) : null;\n  }\n\n  render(): VNode {\n    const { description, label } = this;\n\n    return (\n      <InteractiveContainer disabled={this.disabled}>\n        {this.renderIcon()}\n        {this.renderActionsStart()}\n        <label\n          aria-label={label}\n          class={CSS.label}\n          onClick={this.pickListClickHandler}\n          onKeyDown={this.pickListKeyDownHandler}\n          tabIndex={0}\n          // 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)\n          ref={(focusEl): HTMLLabelElement => (this.focusEl = focusEl)}\n        >\n          <div\n            aria-checked={toAriaBoolean(this.selected)}\n            class={CSS.textContainer}\n            role=\"menuitemcheckbox\"\n          >\n            <span class={CSS.title}>{label}</span>\n            {description ? <span class={CSS.description}>{description}</span> : null}\n          </div>\n        </label>\n        {this.renderActionsEnd()}\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pl.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.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';