@esri/calcite-components 2.12.0 → 2.13.0-next.1

package/dist/calcite/p-68012ee3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["CSS","button","buttonTextVisible","buttonCompact","indicatorText","iconContainer","slotContainer","slotContainerHidden","textContainer","textContainerVisible","indicatorWithIcon","indicatorWithoutIcon","SLOTS","tooltip","actionCss","CalciteActionStyle0","Action","this","mutationObserver","createObserver","forceUpdate","guid","indicatorId","buttonId","handleTooltipSlotChange","event","tooltips","target","assignedElements","flatten","filter","el","matches","referenceElement","buttonEl","onMessagesChange","effectiveLocaleChange","updateMessages","effectiveLocale","connectedCallback","connectInteractive","connectLocalized","connectMessages","observe","childList","subtree","componentWillLoad","setUpLoadableComponent","isBrowser","setUpMessages","componentDidLoad","setComponentLoaded","disconnectedCallback","disconnectInteractive","disconnectLocalized","disconnectMessages","disconnect","componentDidRender","updateHostInteraction","setFocus","componentFocusable","focus","renderTextContainer","text","textEnabled","textContainerClasses","h","class","key","renderIndicatorText","indicator","messages","id","role","renderIconContainer","loading","icon","scale","iconFlipRtl","loaderScale","calciteLoaderNode","inline","label","calciteIconNode","flipRtl","getIconScale","iconNode","hasIconToDisplay","children","length","slotContainerNode","render","active","compact","disabled","labelFallback","ariaLabel","buttonClasses","Host","InteractiveContainer","toAriaBoolean","ref","name","onSlotchange"],"sources":["src/components/action/resources.ts","src/components/action/action.scss?tag=calcite-action&encapsulation=shadow","src/components/action/action.tsx"],"sourcesContent":["export const CSS = {\n  button: \"button\",\n  buttonTextVisible: \"button--text-visible\",\n  buttonCompact: \"button--compact\",\n  indicatorText: \"indicator-text\",\n  iconContainer: \"icon-container\",\n  slotContainer: \"slot-container\",\n  slotContainerHidden: \"slot-container--hidden\",\n  textContainer: \"text-container\",\n  textContainerVisible: \"text-container--visible\",\n  indicatorWithIcon: \"indicator-with-icon\",\n  indicatorWithoutIcon: \"indicator-without-icon\",\n};\n\nexport const SLOTS = {\n  tooltip: \"tooltip\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-action-indicator-color: Specifies the component's indicator color.\n * @prop --calcite-action-background-color: Specifies the component's  background color.\n * @prop --calcite-action-background-color-hover: Specifies the component's background color when hovered or focused.\n * @prop --calcite-action-background-color-pressed: Specifies the component's background color when active.\n * @prop --calcite-action-text-color: Specifies the text color of the component.\n * @prop --calcite-action-text-color-pressed: Specifies the component's text color when hovered.\n */\n\n:host {\n  @extend %component-host;\n  @apply flex bg-transparent;\n}\n\n@mixin action-indicator() {\n  position: relative;\n  &::after {\n    content: \"\";\n    @apply absolute\n      h-2\n      w-2\n      rounded-full;\n    inset-block-end: calc(-0.275rem);\n    inset-inline-end: calc(-0.275rem);\n    background-color: var(--calcite-action-indicator-color, theme(\"colors.brand\"));\n  }\n}\n\n.button {\n  @apply focus-base\n    text-n2h\n    relative\n    m-0\n    flex\n    w-auto\n    cursor-pointer\n    items-center\n    justify-start\n    border-none\n    font-medium\n    font-sans;\n\n  background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1));\n  color: var(--calcite-action-text-color, var(--calcite-color-text-3));\n  text-align: unset;\n  flex: 1 0 auto;\n\n  &:hover,\n  &:focus {\n    background-color: var(--calcite-action-background-color-hover, var(--calcite-color-foreground-2));\n    color: var(--calcite-action-text-color-pressed, var(--calcite-color-text-1));\n  }\n\n  &:focus {\n    @apply focus-inset;\n  }\n\n  &:active {\n    background-color: var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3));\n  }\n}\n\n.icon-container {\n  @apply pointer-events-none\n    m-0\n    flex\n    items-center\n    justify-center;\n  min-inline-size: theme(\"spacing.4\");\n  min-block-size: theme(\"spacing.6\");\n}\n\n.text-container {\n  @apply m-0\n    w-0\n    truncate\n    leading-6\n    opacity-0\n    transition-opacity\n    duration-150\n    ease-in-out;\n\n  transition-property: margin;\n  transition-property: inline-size;\n}\n\n.text-container--visible {\n  @apply w-auto flex-auto opacity-100;\n}\n\n:host([active]) {\n  .button {\n    &,\n    &:hover,\n    &:focus {\n      color: var(--calcite-action-text-color-pressed, var(--calcite-color-text-1));\n      background-color: var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3));\n    }\n\n    &:active {\n      background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1));\n    }\n  }\n}\n\n:host([loading]) {\n  .button {\n    &:hover,\n    &:focus {\n      background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1));\n    }\n  }\n\n  .text-container {\n    @apply opacity-disabled;\n  }\n\n  calcite-loader[inline] {\n    margin-inline-end: theme(\"spacing.0\");\n  }\n}\n\n:host([appearance=\"transparent\"]) {\n  .button {\n    @apply bg-transparent\n      transition-shadow\n      duration-150\n      ease-in-out;\n\n    &:hover,\n    &:focus {\n      background-color: var(--calcite-color-transparent-hover);\n    }\n\n    &:active {\n      background-color: var(--calcite-color-transparent-press);\n    }\n  }\n}\n\n:host([data-active]) .button {\n  @apply focus-inset;\n}\n\n:host([scale=\"s\"]) {\n  .button {\n    @apply text-n2h px-2 py-1 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.2\");\n  }\n}\n\n:host([scale=\"m\"]) {\n  .button {\n    @apply text-n1h px-4 py-3 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.3\");\n  }\n}\n\n:host([scale=\"l\"]) {\n  .button {\n    @apply text-0h p-5 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.4\");\n  }\n}\n\n:host([alignment=\"center\"]) .button {\n  @apply justify-center;\n}\n\n:host([alignment=\"end\"]) .button {\n  @apply justify-end;\n}\n\n:host([alignment=\"center\"]),\n:host([alignment=\"end\"]) {\n  .button .text-container--visible {\n    @apply flex-initial;\n  }\n}\n\n/* [Deprecated]  Compact */\n:host([scale=\"s\"][compact]) .button,\n:host([scale=\"m\"][compact]) .button,\n:host([scale=\"l\"][compact]) .button {\n  @apply px-0;\n}\n\n.slot-container {\n  @apply flex;\n}\n\n.slot-container--hidden {\n  @apply hidden;\n}\n\n.button--text-visible {\n  @apply w-full;\n}\n\n.indicator-with-icon {\n  @include action-indicator();\n}\n\n.indicator-without-icon {\n  @apply w-4 mx-1;\n  @include action-indicator();\n}\n\n.indicator-text {\n  @apply sr-only;\n}\n\n@include base-component();\n@include disabled {\n  .button,\n  .button:hover,\n  .button:focus {\n    @apply opacity-disabled bg-foreground-1 cursor-default;\n  }\n\n  &:host([active]) {\n    .button,\n    .button:hover,\n    .button:focus {\n      @apply opacity-disabled bg-foreground-3;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  forceUpdate,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { toAriaBoolean } from \"../../utils/dom\";\nimport { guid } from \"../../utils/guid\";\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, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport { getIconScale } from \"../../utils/component\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Alignment, Appearance, Scale } from \"../interfaces\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { isBrowser } from \"../../utils/browser\";\nimport { ActionMessages } from \"./assets/action/t9n\";\nimport { CSS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding a `calcite-icon`.\n * @slot tooltip - [Deprecated] Use the `calcite-tooltip` component instead.\n */\n@Component({\n  tag: \"calcite-action\",\n  styleUrl: \"action.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Action\n  implements InteractiveComponent, LocalizedComponent, T9nComponent, LoadableComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is highlighted.\n   */\n  @Prop({ reflect: true }) active = false;\n\n  /**\n   * Specifies the horizontal alignment of button elements with text content.\n   */\n  @Prop({ reflect: true }) alignment: Alignment;\n\n  /** Specifies the appearance of the component. */\n  @Prop({ reflect: true }) appearance: Extract<\"solid\" | \"transparent\", Appearance> = \"solid\";\n\n  /**\n   * When `true`, the side padding of the component is reduced.\n   *\n   * @deprecated No longer necessary.\n   */\n  @Prop({ reflect: true }) compact = false;\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  /** Specifies an icon to display. */\n  @Prop() icon: IconNameOrString;\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   * When `true`, displays a visual indicator.\n   */\n  @Prop({ reflect: true }) indicator = false;\n\n  /**\n   * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.\n   */\n  @Prop() label: string;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Specifies text that accompanies the icon.\n   */\n  @Prop() text!: string;\n\n  /**\n   * Indicates whether the text is displayed.\n   */\n  @Prop({ reflect: true }) textEnabled = 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: ActionMessages;\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<ActionMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteActionElement;\n\n  buttonEl: HTMLButtonElement;\n\n  mutationObserver = createObserver(\"mutation\", () => forceUpdate(this));\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ActionMessages;\n\n  guid = `calcite-action-${guid()}`;\n\n  indicatorId = `${this.guid}-indicator`;\n\n  buttonId = `${this.guid}-button`;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (isBrowser()) {\n      await setUpMessages(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.buttonEl?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderTextContainer(): VNode {\n    const { text, textEnabled } = this;\n\n    const textContainerClasses = {\n      [CSS.textContainer]: true,\n      [CSS.textContainerVisible]: textEnabled,\n    };\n\n    return text ? (\n      <div class={textContainerClasses} key=\"text-container\">\n        {text}\n      </div>\n    ) : null;\n  }\n\n  renderIndicatorText(): VNode {\n    const { indicator, messages, indicatorId, buttonId } = this;\n    return (\n      <div\n        aria-labelledby={buttonId}\n        aria-live=\"polite\"\n        class={CSS.indicatorText}\n        id={indicatorId}\n        role=\"region\"\n      >\n        {indicator ? messages.indicator : null}\n      </div>\n    );\n  }\n\n  renderIconContainer(): VNode {\n    const { loading, icon, scale, el, iconFlipRtl, indicator } = this;\n    const loaderScale = scale === \"l\" ? \"l\" : \"m\";\n    const calciteLoaderNode = loading ? (\n      <calcite-loader inline label={this.messages.loading} scale={loaderScale} />\n    ) : null;\n    const calciteIconNode = icon ? (\n      <calcite-icon\n        class={{ [CSS.indicatorWithIcon]: indicator }}\n        flipRtl={iconFlipRtl}\n        icon={icon}\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n    const iconNode = calciteLoaderNode || calciteIconNode;\n    const hasIconToDisplay = iconNode || el.children?.length;\n\n    const slotContainerNode = (\n      <div\n        class={{\n          [CSS.slotContainer]: true,\n          [CSS.slotContainerHidden]: loading,\n        }}\n      >\n        <slot />\n      </div>\n    );\n\n    return hasIconToDisplay ? (\n      <div aria-hidden=\"true\" class={CSS.iconContainer} key=\"icon-container\">\n        {iconNode}\n        {slotContainerNode}\n      </div>\n    ) : null;\n  }\n\n  render(): VNode {\n    const {\n      active,\n      compact,\n      disabled,\n      icon,\n      loading,\n      textEnabled,\n      label,\n      text,\n      indicator,\n      indicatorId,\n      buttonId,\n      messages,\n    } = this;\n    const labelFallback = label || text;\n    const ariaLabel = labelFallback\n      ? `${labelFallback}${indicator ? ` (${messages.indicator})` : \"\"}`\n      : \"\";\n\n    const buttonClasses = {\n      [CSS.button]: true,\n      [CSS.buttonTextVisible]: textEnabled,\n      [CSS.buttonCompact]: compact,\n    };\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <button\n            aria-busy={toAriaBoolean(loading)}\n            aria-controls={indicator ? indicatorId : null}\n            aria-disabled={toAriaBoolean(disabled)}\n            aria-label={ariaLabel}\n            aria-pressed={toAriaBoolean(active)}\n            class={buttonClasses}\n            disabled={disabled}\n            id={buttonId}\n            ref={(buttonEl): HTMLButtonElement => (this.buttonEl = buttonEl)}\n          >\n            {this.renderIconContainer()}\n            {this.renderTextContainer()}\n            {!icon && indicator && <div class={CSS.indicatorWithoutIcon} key=\"indicator-no-icon\" />}\n          </button>\n          <slot name={SLOTS.tooltip} onSlotchange={this.handleTooltipSlotChange} />\n          {this.renderIndicatorText()}\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handleTooltipSlotChange = (event: Event): void => {\n    const tooltips = (event.target as HTMLSlotElement)\n      .assignedElements({\n        flatten: true,\n      })\n      .filter((el) => el?.matches(\"calcite-tooltip\")) as HTMLCalciteTooltipElement[];\n\n    const tooltip = tooltips[0];\n\n    if (tooltip) {\n      tooltip.referenceElement = this.buttonEl;\n    }\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/calcite/p-68099e3d.entry.js

@@ -1,7 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
- */
-import{r as t,c as s,h as e,g as i,F as n}from"./p-e7104b8d.js";import{C as o,n as a,a as l,b as c,o as r,c as h,d,D as u,e as p,f,g as b,p as m,j as g,k as w,R as x,H as y,O as C,t as v,l as k,m as A,S,q as I,r as z,s as D,u as $,i as F,v as j,w as O}from"./p-46ee72e7.js";import{u as L,g as N,f as K,d as T,i as P}from"./p-27ab49c7.js";import{c as U,d as E,u as M,I as H}from"./p-8f8cbbc7.js";import{i as _}from"./p-c473b37c.js";import{c as B,s as V,a as q}from"./p-5b45eef3.js";import{c as R,d as W}from"./p-29c291d1.js";import{r as J,c as X,a as G}from"./p-769c1c82.js";import{u as Y,s as Q,c as Z,d as tt}from"./p-c60c7e01.js";import{t as st}from"./p-adfbff91.js";import"./p-6f580f9d.js";import"./p-56bab01f.js";import"./p-3c4fe54e.js";import"./p-9a2f96d2.js";import"./p-17c701ba.js";const et=':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{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-color-picker-spacing:8px}:host([scale=s]) .container{inline-size:160px}:host([scale=s]) .saved-colors{gap:0.25rem;grid-template-columns:repeat(auto-fill, 20px)}:host([scale=m]){--calcite-color-picker-spacing:12px}:host([scale=m]) .container{inline-size:272px}:host([scale=l]){--calcite-color-picker-spacing:16px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .container{inline-size:464px}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill, 32px)}:host([scale=l]) .control-section{flex-wrap:nowrap;align-items:baseline;flex-wrap:wrap}:host([scale=l]) .color-hex-options{display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}.container{background-color:var(--calcite-color-foreground-1);display:inline-block;border:1px solid var(--calcite-color-border-1)}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.color-field,.control-and-scope{-webkit-user-select:none;user-select:none}.scope{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);block-size:1px;inline-size:1px;border-radius:9999px;background-color:transparent;font-size:var(--calcite-font-size--1);outline-color:transparent}.scope:focus{outline:2px solid var(--calcite-ui-focus-color, 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          );outline-offset:6px}.hex-and-channels-group{inline-size:100%}.hex-and-channels-group,.control-section{display:flex;flex-direction:row;flex-wrap:wrap}.section{padding-block:0 var(--calcite-color-picker-spacing);padding-inline:var(--calcite-color-picker-spacing)}.section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}.sliders{display:flex;flex-direction:column;justify-content:space-between;margin-inline-start:var(--calcite-color-picker-spacing);gap:var(--calcite-spacing-xxs)}.preview-and-sliders{display:flex;align-items:center;padding:var(--calcite-color-picker-spacing)}.color-hex-options,.section--split{flex-grow:1}.header{display:flex;align-items:center;justify-content:space-between;color:var(--calcite-color-text-1)}.color-mode-container{padding-block-start:var(--calcite-color-picker-spacing)}.channels{display:flex;row-gap:0.125rem}.channel[data-channel-index="3"]{inline-size:159px}:host([scale=s]) .channels{flex-wrap:wrap}:host([scale=s]) .channel{flex-basis:30%;flex-grow:1}:host([scale=s]) .channel[data-channel-index="3"]{inline-size:unset;margin-inline-start:unset}:host([scale=l]) .channel[data-channel-index="3"]{inline-size:131px}.saved-colors{display:grid;gap:0.5rem;padding-block-start:var(--calcite-color-picker-spacing);grid-template-columns:repeat(auto-fill, 24px)}.saved-colors-buttons{display:flex}.saved-color{outline-offset:0;outline-color:transparent;cursor:pointer}.saved-color:focus{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.saved-color:hover{transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;outline:2px solid var(--calcite-color-border-2);outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}';const it=et;const nt=16;const ot=class{constructor(i){t(this,i);this.calciteColorPickerChange=s(this,"calciteColorPickerChange",6);this.calciteColorPickerInput=s(this,"calciteColorPickerInput",6);this.internalColorUpdateContext=null;this.isActiveChannelInputEmpty=false;this.mode=o.HEX;this.shiftKeyChannelAdjustment=0;this.upOrDownArrowKeyTracker=null;this.handleTabActivate=t=>{this.channelMode=t.currentTarget.getAttribute("data-color-mode");this.updateChannelsFromColor(this.color)};this.handleColorFieldScopeKeyDown=t=>{const{key:s}=t;const e={ArrowUp:{x:0,y:-10},ArrowRight:{x:10,y:0},ArrowDown:{x:0,y:10},ArrowLeft:{x:-10,y:0}};if(e[s]){t.preventDefault();this.scopeOrientation=s==="ArrowDown"||s==="ArrowUp"?"vertical":"horizontal";this.captureColorFieldColor(this.colorFieldScopeLeft+e[s].x||0,this.colorFieldScopeTop+e[s].y||0,false)}};this.handleHueScopeKeyDown=t=>{const s=t.shiftKey?10:1;const{key:e}=t;const i={ArrowUp:1,ArrowRight:1,ArrowDown:-1,ArrowLeft:-1};if(i[e]){t.preventDefault();const n=i[e]*s;const o=this.baseColorFieldColor.hue();const a=this.baseColorFieldColor.hue(o+n);this.internalColorSet(a,false)}};this.handleHexInputChange=t=>{t.stopPropagation();const{isClearable:s,color:e}=this;const i=t.target;const n=i.value;if(s&&!n){this.internalColorSet(null);return}const o=e&&a(l(e,f(this.mode)));if(n!==o){this.internalColorSet(c(n))}};this.handleSavedColorSelect=t=>{const s=t.currentTarget;this.internalColorSet(c(s.color))};this.handleChannelInput=t=>{const s=t.currentTarget;const e=Number(s.getAttribute("data-channel-index"));const i=e===3;const n=i?C.max:this.channelMode==="rgb"?x[Object.keys(x)[e]]:y[Object.keys(y)[e]];let o;if(!s.value){o="";this.isActiveChannelInputEmpty=true;this.upOrDownArrowKeyTracker=null}else{const t=Number(s.value);const e=t+this.shiftKeyChannelAdjustment;const i=X(e,0,n);o=i.toString()}s.value=o;if(o!==""&&this.shiftKeyChannelAdjustment!==0){this.handleChannelChange(t)}else if(o!==""){this.handleChannelChange(t)}};this.handleChannelBlur=t=>{const s=t.currentTarget;const e=Number(s.getAttribute("data-channel-index"));const i=[...this.channels];const n=!s.value&&!this.isClearable;if(n){s.value=i[e]?.toString()}};this.handleChannelFocus=t=>{const s=t.currentTarget;s.selectText()};this.handleChannelChange=t=>{const s=t.currentTarget;const e=Number(s.getAttribute("data-channel-index"));const i=[...this.channels];const n=this.isClearable&&!s.value;if(n){this.channels=[null,null,null,null];this.internalColorSet(null);return}const o=e===3;if(this.isActiveChannelInputEmpty&&this.upOrDownArrowKeyTracker){s.value=this.upOrDownArrowKeyTracker==="up"?(i[e]+1<=this.getChannelInputLimit(e)?i[e]+1:this.getChannelInputLimit(e)).toString():(i[e]-1>=0?i[e]-1:0).toString();this.isActiveChannelInputEmpty=false;this.upOrDownArrowKeyTracker=null}const a=s.value?Number(s.value):i[e];i[e]=o?r(a):a;this.updateColorFromChannels(i)};this.handleSavedColorKeyDown=t=>{if(_(t.key)){t.preventDefault();this.handleSavedColorSelect(t)}};this.handleColorFieldPointerDown=t=>{this.handleCanvasControlPointerDown(t,this.colorFieldRenderingContext,this.captureColorFieldColor,this.colorFieldScopeNode)};this.handleHueSliderPointerDown=t=>{this.handleCanvasControlPointerDown(t,this.hueSliderRenderingContext,this.captureHueSliderColor,this.hueScopeNode)};this.handleOpacitySliderPointerDown=t=>{this.handleCanvasControlPointerDown(t,this.opacitySliderRenderingContext,this.captureOpacitySliderValue,this.opacityScopeNode)};this.globalPointerUpHandler=t=>{if(!L(t)){return}const s=this.activeCanvasInfo;this.activeCanvasInfo=null;this.drawColorControls();if(s){this.calciteColorPickerChange.emit()}};this.globalPointerMoveHandler=t=>{const{activeCanvasInfo:s,el:e}=this;if(!e.isConnected||!s){return}const{context:i,bounds:n}=s;let o;let a;const{clientX:l,clientY:c}=t;if(i.canvas.matches(":hover")){o=l-n.x;a=c-n.y}else{if(l<n.x+n.width&&l>n.x){o=l-n.x}else if(l<n.x){o=0}else{o=n.width}if(c<n.y+n.height&&c>n.y){a=c-n.y}else if(c<n.y){a=0}else{a=n.height}}if(i===this.colorFieldRenderingContext){this.captureColorFieldColor(o,a,false)}else if(i===this.hueSliderRenderingContext){this.captureHueSliderColor(o)}else if(i===this.opacitySliderRenderingContext){this.captureOpacitySliderValue(o)}};this.storeColorFieldScope=t=>{this.colorFieldScopeNode=t};this.storeHueScope=t=>{this.hueScopeNode=t};this.renderChannelsTabTitle=t=>{const{channelMode:s,messages:i}=this;const n=t===s;const o=t==="rgb"?i.rgb:i.hsv;return e("calcite-tab-title",{class:h.colorMode,"data-color-mode":t,key:t,onCalciteTabsActivate:this.handleTabActivate,selected:n},o)};this.renderChannelsTab=t=>{const{isClearable:s,channelMode:i,channels:n,messages:o,alphaChannel:a}=this;const l=t===i;const c=t==="rgb";const r=c?[o.red,o.green,o.blue]:[o.hue,o.saturation,o.value];const u=N(this.el);const p=a?n:n.slice(0,3);return e("calcite-tab",{class:h.control,key:t,selected:l},e("div",{class:h.channels,dir:"ltr"},p.map(((t,e)=>{const i=e===3;if(i){t=s&&!t?t:d(t)}return this.renderChannel(t,e,r[e],u,i?"%":"")}))))};this.renderChannel=(t,s,i,n,o)=>e("calcite-input-number",{class:h.channel,"data-channel-index":s,dir:n,key:s,label:i,lang:this.effectiveLocale,numberButtonType:"none",numberingSystem:this.numberingSystem,onCalciteInputNumberChange:this.handleChannelChange,onCalciteInputNumberInput:this.handleChannelInput,onCalciteInternalInputNumberBlur:this.handleChannelBlur,onCalciteInternalInputNumberFocus:this.handleChannelFocus,onKeyDown:this.handleKeyDown,scale:this.scale==="l"?"m":"s",style:{marginLeft:s>0&&!(this.scale==="s"&&this.alphaChannel&&s===3)?"-1px":""},suffixText:o,value:t?.toString()});this.deleteColor=()=>{const t=l(this.color,this.alphaChannel);const s=this.savedColors.indexOf(t)>-1;if(!s){return}const e=this.savedColors.filter((s=>s!==t));this.savedColors=e;const i=`${I}${this.storageId}`;if(this.storageId){localStorage.setItem(i,JSON.stringify(e))}};this.saveColor=()=>{const t=l(this.color,this.alphaChannel);const s=this.savedColors.indexOf(t)>-1;if(s){return}const e=[...this.savedColors,t];this.savedColors=e;const i=`${I}${this.storageId}`;if(this.storageId){localStorage.setItem(i,JSON.stringify(e))}};this.drawColorControls=st(((t="all")=>{if((t==="all"||t==="color-field")&&this.colorFieldRenderingContext){this.drawColorField()}if((t==="all"||t==="hue-slider")&&this.hueSliderRenderingContext){this.drawHueSlider()}if(this.alphaChannel&&(t==="all"||t==="opacity-slider")&&this.opacitySliderRenderingContext){this.drawOpacitySlider()}}),nt);this.captureColorFieldColor=(t,s,e=true)=>{const{dimensions:{colorField:{height:i,width:n}}}=this;const o=Math.round(y.s/n*t);const a=Math.round(y.v/i*(i-s));this.internalColorSet(this.baseColorFieldColor.hsv().saturationv(o).value(a),e)};this.initColorField=t=>{this.colorFieldRenderingContext=t.getContext("2d");this.updateCanvasSize("color-field");this.drawColorControls()};this.initHueSlider=t=>{this.hueSliderRenderingContext=t.getContext("2d");this.updateCanvasSize("hue-slider");this.drawHueSlider()};this.initOpacitySlider=t=>{if(!t){return}this.opacitySliderRenderingContext=t.getContext("2d");this.updateCanvasSize("opacity-slider");this.drawOpacitySlider()};this.storeOpacityScope=t=>{this.opacityScopeNode=t};this.handleOpacityScopeKeyDown=t=>{const s=t.shiftKey?10:1;const{key:e}=t;const i={ArrowUp:.01,ArrowRight:.01,ArrowDown:-.01,ArrowLeft:-.01};if(i[e]){t.preventDefault();const n=i[e]*s;const o=this.baseColorFieldColor.alpha();const a=this.baseColorFieldColor.alpha(o+n);this.internalColorSet(a,false)}};this.allowEmpty=false;this.alphaChannel=false;this.channelsDisabled=false;this.clearable=false;this.color=u;this.disabled=false;this.format="auto";this.hideChannels=false;this.hexDisabled=false;this.hideHex=false;this.hideSaved=false;this.savedDisabled=false;this.scale="m";this.storageId=undefined;this.messageOverrides=undefined;this.numberingSystem=undefined;this.value=a(l(u,this.alphaChannel));this.channelMode="rgb";this.channels=this.toChannels(u);this.defaultMessages=undefined;this.dimensions=p.m;this.effectiveLocale="";this.messages=undefined;this.savedColors=[];this.colorFieldScopeTop=undefined;this.colorFieldScopeLeft=undefined;this.hueScopeLeft=undefined;this.opacityScopeLeft=undefined;this.scopeOrientation=undefined}handleAllowEmptyOrClearableChange(){this.isClearable=this.clearable||this.allowEmpty}handleAlphaChannelChange(t){const{format:s}=this;if(t&&s!=="auto"&&!f(s)){console.warn(`ignoring alphaChannel as the current format (${s}) does not support alpha`);this.alphaChannel=false}}handleAlphaChannelDimensionsChange(){this.effectiveSliderWidth=b(this.dimensions,this.alphaChannel);this.drawColorControls()}handleColorChange(t,s){this.drawColorControls();this.updateChannelsFromColor(t);this.previousColor=s}handleFormatOrAlphaChannelChange(){this.setMode(this.format);this.internalColorSet(this.color,false,"internal")}handleScaleChange(t="m"){this.updateDimensions(t);this.updateCanvasSize("all");this.drawColorControls()}onMessagesChange(){}handleValueChange(t,s){const{isClearable:e,format:i}=this;const n=!e||t;let o=false;if(n){const e=m(t);if(!e||i!=="auto"&&e!==i){this.showIncompatibleColorWarning(t,i);this.value=s;return}o=this.mode!==e;this.setMode(e,this.internalColorUpdateContext===null)}const a=this.activeCanvasInfo;if(this.internalColorUpdateContext==="initial"){return}if(this.internalColorUpdateContext==="user-interaction"){this.calciteColorPickerInput.emit();if(!a){this.calciteColorPickerChange.emit()}return}const l=e&&!t?null:c(t!=null&&typeof t==="object"&&f(this.mode)?g(t):t);const r=!w(l,this.color);if(o||r){this.internalColorSet(l,this.alphaChannel&&!(this.mode.endsWith("a")||this.mode.endsWith("a-css")),"internal")}}get baseColorFieldColor(){return this.color||this.previousColor||u}effectiveLocaleChange(){Y(this,this.effectiveLocale)}handleChannelKeyUpOrDown(t){this.shiftKeyChannelAdjustment=0;const{key:s}=t;if(s!=="ArrowUp"&&s!=="ArrowDown"||!t.composedPath().some((t=>t.classList?.contains(h.channel)))){return}const{shiftKey:e}=t;t.preventDefault();if(!this.color){this.internalColorSet(this.previousColor);t.stopPropagation();return}const i=9;this.shiftKeyChannelAdjustment=s==="ArrowUp"&&e?i:s==="ArrowDown"&&e?-i:0;if(s==="ArrowUp"){this.upOrDownArrowKeyTracker="up"}if(s==="ArrowDown"){this.upOrDownArrowKeyTracker="down"}}getChannelInputLimit(t){return this.channelMode==="rgb"?x[Object.keys(x)[t]]:y[Object.keys(y)[t]]}focusScope(t){requestAnimationFrame((()=>{t.focus()}))}handleCanvasControlPointerDown(t,s,e,i){if(!L(t)){return}window.addEventListener("pointermove",this.globalPointerMoveHandler);window.addEventListener("pointerup",this.globalPointerUpHandler,{once:true});this.activeCanvasInfo={context:s,bounds:s.canvas.getBoundingClientRect()};e.call(this,t.offsetX,t.offsetY);this.focusScope(i)}async setFocus(){await B(this);K(this.el)}async componentWillLoad(){V(this);this.handleAllowEmptyOrClearableChange();this.handleAlphaChannelDimensionsChange();const{isClearable:t,color:s,format:e,value:i}=this;const n=t&&!i;const o=m(i);const a=n||e==="auto"&&o||e===o;const l=n?null:a?c(i):s;if(!a){this.showIncompatibleColorWarning(i,e)}this.setMode(e,false);this.internalColorSet(l,false,"initial");this.updateDimensions(this.scale);const r=`${I}${this.storageId}`;if(this.storageId&&localStorage.getItem(r)){this.savedColors=JSON.parse(localStorage.getItem(r))}await Q(this)}connectedCallback(){U(this);R(this);Z(this)}componentDidLoad(){q(this)}disconnectedCallback(){window.removeEventListener("pointermove",this.globalPointerMoveHandler);window.removeEventListener("pointerup",this.globalPointerUpHandler);E(this);W(this);tt(this)}componentDidRender(){M(this)}render(){const{channelsDisabled:t,color:s,colorFieldScopeLeft:i,colorFieldScopeTop:n,dimensions:{thumb:{radius:o}},hexDisabled:a,hideChannels:c,hideHex:r,hideSaved:p,hueScopeLeft:f,messages:b,alphaChannel:m,opacityScopeLeft:g,savedColors:w,savedDisabled:x,scale:v,scopeOrientation:k}=this;const A=this.effectiveSliderWidth;const S=s?l(s,m):null;const I=o;const z=f??A*u.hue()/y.h;const D=o;const $=g??A*d(u.alpha())/C.max;const F=s===null;const j=k==="vertical";const O=a||r;const L=t||c;const N=x||p;const[K,T]=this.getAdjustedScopePosition(i,n);const[P,U]=this.getAdjustedScopePosition(z,I);const[E,M]=this.getAdjustedScopePosition($,D);return e(H,{key:"cd7c2469429382b1adee89c87c4774160795203c",disabled:this.disabled},e("div",{key:"dd6809c82d3ffe64b8eaebd0669e7f61c0ea87d1",class:h.container},e("div",{key:"888c08c46fec112861b076c3cf24b9be7b4a66cd",class:h.controlAndScope},e("canvas",{key:"23631c824c61abb2a3ca74e35bffc8be0364a052",class:h.colorField,onPointerDown:this.handleColorFieldPointerDown,ref:this.initColorField}),e("div",{key:"a5271bbe3c4f45e3cf7736dd8f4201f54420bfb7","aria-label":j?b.value:b.saturation,"aria-valuemax":j?y.v:y.s,"aria-valuemin":"0","aria-valuenow":(j?s?.saturationv():s?.value())||"0",class:{[h.scope]:true,[h.colorFieldScope]:true},onKeyDown:this.handleColorFieldScopeKeyDown,ref:this.storeColorFieldScope,role:"slider",style:{top:`${T||0}px`,left:`${K||0}px`},tabindex:"0"})),e("div",{key:"eee6c10107513fd46316d2ba7510977b72771cd2",class:h.previewAndSliders},e("calcite-color-picker-swatch",{key:"964481e1c6c6c050df076e8cdc9d7e5b2cbeec79",class:h.preview,color:S,scale:this.alphaChannel?"l":this.scale}),e("div",{key:"f915032fe532e140005b0ff1253b0a971a17b079",class:h.sliders},e("div",{key:"2bcb609ce36df2d0f75abb767ee6dc88c0c9ea3b",class:h.controlAndScope},e("canvas",{key:"99e268a194b785a8ec97fed67a523c602def2a94",class:{[h.slider]:true,[h.hueSlider]:true},onPointerDown:this.handleHueSliderPointerDown,ref:this.initHueSlider}),e("div",{key:"4cdc0f98048a48e070430bf4f1f817571534f31b","aria-label":b.hue,"aria-valuemax":y.h,"aria-valuemin":"0","aria-valuenow":s?.round().hue()||u.round().hue(),class:{[h.scope]:true,[h.hueScope]:true},onKeyDown:this.handleHueScopeKeyDown,ref:this.storeHueScope,role:"slider",style:{top:`${U}px`,left:`${P}px`},tabindex:"0"})),m?e("div",{class:h.controlAndScope},e("canvas",{class:{[h.slider]:true,[h.opacitySlider]:true},onPointerDown:this.handleOpacitySliderPointerDown,ref:this.initOpacitySlider}),e("div",{"aria-label":b.opacity,"aria-valuemax":C.max,"aria-valuemin":C.min,"aria-valuenow":(s||u).round().alpha(),class:{[h.scope]:true,[h.opacityScope]:true},onKeyDown:this.handleOpacityScopeKeyDown,ref:this.storeOpacityScope,role:"slider",style:{top:`${M}px`,left:`${E}px`},tabindex:"0"})):null)),O&&L?null:e("div",{class:{[h.controlSection]:true,[h.section]:true}},e("div",{class:h.hexAndChannelsGroup},O?null:e("div",{class:h.hexOptions},e("calcite-color-picker-hex-input",{allowEmpty:this.isClearable,alphaChannel:m,class:h.control,messages:b,numberingSystem:this.numberingSystem,onCalciteColorPickerHexInputChange:this.handleHexInputChange,scale:v,value:S})),L?null:e("calcite-tabs",{class:{[h.colorModeContainer]:true,[h.splitSection]:true},scale:v==="l"?"m":"s"},e("calcite-tab-nav",{slot:"title-group"},this.renderChannelsTabTitle("rgb"),this.renderChannelsTabTitle("hsv")),this.renderChannelsTab("rgb"),this.renderChannelsTab("hsv")))),N?null:e("div",{class:{[h.savedColorsSection]:true,[h.section]:true}},e("div",{class:h.header},e("label",null,b.saved),e("div",{class:h.savedColorsButtons},e("calcite-button",{appearance:"transparent",class:h.deleteColor,disabled:F,iconStart:"minus",kind:"neutral",label:b.deleteColor,onClick:this.deleteColor,scale:v,type:"button"}),e("calcite-button",{appearance:"transparent",class:h.saveColor,disabled:F,iconStart:"plus",kind:"neutral",label:b.saveColor,onClick:this.saveColor,scale:v,type:"button"}))),w.length>0?e("div",{class:h.savedColors},[...w.map((t=>e("calcite-color-picker-swatch",{class:h.savedColor,color:t,key:t,onClick:this.handleSavedColorSelect,onKeyDown:this.handleSavedColorKeyDown,scale:v,tabIndex:0})))]):null)))}handleKeyDown(t){if(t.key==="Enter"){t.preventDefault()}}showIncompatibleColorWarning(t,s){console.warn(`ignoring color value (${t}) as it is not compatible with the current format (${s})`)}setMode(t,s=true){const e=t==="auto"?this.mode:t;this.mode=this.ensureCompatibleMode(e,s)}ensureCompatibleMode(t,s){const{alphaChannel:e}=this;const i=f(t);if(e&&!i){const e=z(t);if(s){console.warn(`setting format to (${e}) as the provided one (${t}) does not support alpha`)}return e}if(!e&&i){const e=v(t);if(s){console.warn(`setting format to (${e}) as the provided one (${t}) does not support alpha`)}return e}return t}captureHueSliderColor(t){const s=A/this.effectiveSliderWidth*t;this.internalColorSet(this.baseColorFieldColor.hue(s),false)}captureOpacitySliderValue(t){const s=r(C.max/this.effectiveSliderWidth*t);this.internalColorSet(this.baseColorFieldColor.alpha(s),false)}internalColorSet(t,s=true,e="user-interaction"){if(s&&w(t,this.color)){return}this.internalColorUpdateContext=e;this.color=t;this.value=this.toValue(t);this.internalColorUpdateContext=null}toValue(t,s=this.mode){if(!t){return null}const e="hex";if(s.includes(e)){const e=s===o.HEXA;return a(l(t.round(),e),e)}if(s.includes("-css")){const e=t[s.replace("-css","").replace("a","")]().round().string();const i=(s.endsWith("a")||s.endsWith("a-css"))&&t.alpha()===1;if(i){const s=e.slice(0,3);const i=e.slice(4,-1);return`${s}a(${i}, ${t.alpha()})`}return e}const i=t[v(s)]().round().object();if(s.endsWith("a")){return k(i)}return i}getSliderCapSpacing(){const{dimensions:{slider:{height:t},thumb:{radius:s}}}=this;return s*2-t}updateDimensions(t="m"){this.dimensions=p[t]}drawColorField(){const t=this.colorFieldRenderingContext;const{dimensions:{colorField:{height:s,width:e}}}=this;t.fillStyle=this.baseColorFieldColor.hsv().saturationv(100).value(100).alpha(1).string();t.fillRect(0,0,e,s);const i=t.createLinearGradient(0,0,e,0);i.addColorStop(0,"rgba(255,255,255,1)");i.addColorStop(1,"rgba(255,255,255,0)");t.fillStyle=i;t.fillRect(0,0,e,s);const n=t.createLinearGradient(0,0,0,s);n.addColorStop(0,"rgba(0,0,0,0)");n.addColorStop(1,"rgba(0,0,0,1)");t.fillStyle=n;t.fillRect(0,0,e,s);this.drawActiveColorFieldColor()}setCanvasContextSize(t,{height:s,width:e}){if(!t){return}const i=window.devicePixelRatio||1;t.width=e*i;t.height=s*i;t.style.height=`${s}px`;t.style.width=`${e}px`;const n=t.getContext("2d");n.scale(i,i)}updateCanvasSize(t="all"){const{dimensions:s}=this;if(t==="all"||t==="color-field"){this.setCanvasContextSize(this.colorFieldRenderingContext?.canvas,s.colorField)}const e={width:this.effectiveSliderWidth,height:s.slider.height+(s.thumb.radius-s.slider.height/2)*2};if(t==="all"||t==="hue-slider"){this.setCanvasContextSize(this.hueSliderRenderingContext?.canvas,e)}if(t==="all"||t==="opacity-slider"){this.setCanvasContextSize(this.opacitySliderRenderingContext?.canvas,e)}}drawActiveColorFieldColor(){const{color:t}=this;if(!t){return}const s=t.hsv();const{dimensions:{colorField:{height:e,width:i},thumb:{radius:n}}}=this;const o=s.saturationv()/(y.s/i);const a=e-s.value()/(y.v/e);requestAnimationFrame((()=>{this.colorFieldScopeLeft=o;this.colorFieldScopeTop=a}));this.drawThumb(this.colorFieldRenderingContext,n,o,a,s,false)}drawThumb(t,s,e,i,n,o){const a=0;const l=2*Math.PI;const c=1;t.beginPath();t.arc(e,i,s,a,l);t.fillStyle="#fff";t.fill();t.strokeStyle="rgba(0,0,0,0.3)";t.lineWidth=c;t.stroke();if(o&&n.alpha()<1){const n=t.createPattern(this.getCheckeredBackgroundPattern(),"repeat");t.beginPath();t.arc(e,i,s-3,a,l);t.fillStyle=n;t.fill()}t.globalCompositeOperation="source-atop";t.beginPath();t.arc(e,i,s-3,a,l);const r=o?n.alpha():1;t.fillStyle=n.rgb().alpha(r).string();t.fill();t.globalCompositeOperation="source-over"}drawActiveHueSliderColor(){const{color:t}=this;if(!t){return}const s=t.hsv().saturationv(100).value(100);const{dimensions:{thumb:{radius:e}}}=this;const i=this.effectiveSliderWidth;const n=s.hue()/(A/i);const o=e;const a=this.getSliderBoundX(n,i,e);requestAnimationFrame((()=>{this.hueScopeLeft=a}));this.drawThumb(this.hueSliderRenderingContext,e,a,o,s,false)}drawHueSlider(){const t=this.hueSliderRenderingContext;const{dimensions:{slider:{height:s},thumb:{radius:e}}}=this;const i=0;const n=e-s/2;const o=this.effectiveSliderWidth;const a=t.createLinearGradient(0,0,o,0);const l=["red","yellow","lime","cyan","blue","magenta","#ff0004"];const r=1/(l.length-1);let h=0;l.forEach((t=>{a.addColorStop(h,c(t).string());h+=r}));t.clearRect(0,0,o,s+this.getSliderCapSpacing()*2);this.drawSliderPath(t,s,o,i,n);t.fillStyle=a;t.fill();t.strokeStyle="rgba(0,0,0,0.3)";t.lineWidth=1;t.stroke();this.drawActiveHueSliderColor()}drawOpacitySlider(){const t=this.opacitySliderRenderingContext;const{baseColorFieldColor:s,dimensions:{slider:{height:e},thumb:{radius:i}}}=this;const n=0;const o=i-e/2;const a=this.effectiveSliderWidth;t.clearRect(0,0,a,e+this.getSliderCapSpacing()*2);const l=t.createLinearGradient(0,o,a,0);const c=s.rgb().alpha(0);const r=s.rgb().alpha(.5);const h=s.rgb().alpha(1);l.addColorStop(0,c.string());l.addColorStop(.5,r.string());l.addColorStop(1,h.string());this.drawSliderPath(t,e,a,n,o);const d=t.createPattern(this.getCheckeredBackgroundPattern(),"repeat");t.fillStyle=d;t.fill();t.fillStyle=l;t.fill();t.strokeStyle="rgba(0,0,0,0.3)";t.lineWidth=1;t.stroke();this.drawActiveOpacitySliderColor()}drawSliderPath(t,s,e,i,n){const o=s/2+1;t.beginPath();t.moveTo(i+o,n);t.lineTo(i+e-o,n);t.quadraticCurveTo(i+e,n,i+e,n+o);t.lineTo(i+e,n+s-o);t.quadraticCurveTo(i+e,n+s,i+e-o,n+s);t.lineTo(i+o,n+s);t.quadraticCurveTo(i,n+s,i,n+s-o);t.lineTo(i,n+o);t.quadraticCurveTo(i,n,i+o,n);t.closePath()}getCheckeredBackgroundPattern(){if(this.checkerPattern){return this.checkerPattern}const t=document.createElement("canvas");t.width=10;t.height=10;const s=t.getContext("2d");s.fillStyle="#ccc";s.fillRect(0,0,10,10);s.fillStyle="#fff";s.fillRect(0,0,5,5);s.fillRect(5,5,5,5);this.checkerPattern=t;return t}drawActiveOpacitySliderColor(){const{color:t}=this;if(!t){return}const s=t;const{dimensions:{thumb:{radius:e}}}=this;const i=this.effectiveSliderWidth;const n=d(s.alpha())/(C.max/i);const o=e;const a=this.getSliderBoundX(n,i,e);requestAnimationFrame((()=>{this.opacityScopeLeft=a}));this.drawThumb(this.opacitySliderRenderingContext,e,a,o,s,true)}getSliderBoundX(t,s,e){const i=G(t,s,e);return i===0?t:i===-1?J(t,0,s,e,e*2):J(t,0,s,s-e*2,s-e)}updateColorFromChannels(t){this.internalColorSet(c(t,this.channelMode))}updateChannelsFromColor(t){this.channels=t?this.toChannels(t):[null,null,null,null]}toChannels(t){const{channelMode:s}=this;const e=t[s]().array().map(((t,s)=>{const e=s===3;return e?t:Math.floor(t)}));if(e.length===3){e.push(1)}return e}getAdjustedScopePosition(t,s){return[t-S/2,s-S/2]}static get assetsDirs(){return["assets"]}get el(){return i(this)}static get watchers(){return{allowEmpty:["handleAllowEmptyOrClearableChange"],clearable:["handleAllowEmptyOrClearableChange"],alphaChannel:["handleAlphaChannelChange","handleAlphaChannelDimensionsChange","handleFormatOrAlphaChannelChange"],dimensions:["handleAlphaChannelDimensionsChange"],color:["handleColorChange"],format:["handleFormatOrAlphaChannelChange"],scale:["handleScaleChange"],messageOverrides:["onMessagesChange"],value:["handleValueChange"],effectiveLocale:["effectiveLocaleChange"]}}};ot.style=it;const at={container:"container",hexInput:"hex-input",opacityInput:"opacity-input"};const lt=":host{display:block}.container{display:flex;inline-size:100%;flex-wrap:nowrap;align-items:center}.hex-input{flex-grow:1;text-transform:uppercase}.opacity-input{inline-size:68px;margin-inline-start:-1px}:host([scale=s]) .container{flex-wrap:wrap;row-gap:0.125rem}:host([scale=s]) .opacity-input{inline-size:unset;margin-inline-start:unset}:host([scale=l]) .opacity-input{inline-size:88px}:host([hidden]){display:none}[hidden]{display:none}";const ct=lt;const rt=c();const ht=class{constructor(e){t(this,e);this.calciteColorPickerHexInputChange=s(this,"calciteColorPickerHexInputChange",6);this.onHexInputBlur=()=>{const t=this.hexInputNode;const s=t.value;const e=`#${s}`;const{allowEmpty:i,internalColor:n}=this;const o=i&&!s;const a=D(e);if($(e,this.alphaChannel)){this.onHexInputChange()}if(o||F(e)&&a){return}t.value=i&&!n?"":this.formatHexForInternalInput(j(n.object()))};this.onOpacityInputBlur=()=>{const t=this.opacityInputNode;const s=t.value;const{allowEmpty:e,internalColor:i}=this;const n=e&&!s;if(n){return}t.value=e&&!i?"":this.formatOpacityForInternalInput(i)};this.onOpacityInputInput=()=>{this.onOpacityInputChange()};this.onHexInputChange=()=>{const t=this.hexInputNode.value;let s=t;if(s){const t=a(s,false);const e=F(t)&&this.alphaChannel;if(e&&this.internalColor){const e=a(this.internalColor.hexa(),true).slice(-2);s=`${t+e}`}}this.internalSetValue(s,this.value)};this.onOpacityInputChange=()=>{const t=this.opacityInputNode;let s;if(!t.value){s=t.value}else{const e=r(Number(t.value));s=this.internalColor?.alpha(e).hexa()}this.internalSetValue(s,this.value)};this.onInputFocus=t=>{t.type==="calciteInternalInputTextFocus"?this.hexInputNode.selectText():this.opacityInputNode.selectText()};this.onHexInputInput=()=>{const t=`#${this.hexInputNode.value}`;const s=this.value;if(F(t,this.alphaChannel)&&D(t,this.alphaChannel)){this.internalSetValue(t,s)}};this.onInputKeyDown=t=>{const{altKey:s,ctrlKey:e,metaKey:i,shiftKey:n}=t;const{alphaChannel:o,hexInputNode:a,internalColor:c,value:r}=this;const{key:h}=t;const d=t.composedPath();if(h==="Tab"&&$(r,this.alphaChannel)||h==="Enter"){if(d.includes(a)){this.onHexInputChange()}else{this.onOpacityInputChange()}if(h==="Enter"){t.preventDefault()}return}const u=h==="ArrowDown"||h==="ArrowUp";const p=this.value;if(u){if(!r){this.internalSetValue(this.previousNonNullValue,p);t.preventDefault();return}const s=h==="ArrowUp"?1:-1;const e=n?10:1;this.internalSetValue(l(this.nudgeRGBChannels(c,e*s,d.includes(a)?"rgb":"a"),o),p);t.preventDefault();return}const f=s||e||i;const b=h.length===1;const m=O.test(h);if(b&&!f&&!m){t.preventDefault()}};this.onHexInputPaste=t=>{const s=t.clipboardData.getData("text");if(F(s,this.alphaChannel)&&D(s,this.alphaChannel)){t.preventDefault();this.hexInputNode.value=s.slice(1);this.internalSetValue(s,this.value)}};this.previousNonNullValue=this.value;this.storeHexInputRef=t=>{this.hexInputNode=t};this.storeOpacityInputRef=t=>{this.opacityInputNode=t};this.allowEmpty=false;this.alphaChannel=false;this.hexLabel="Hex";this.messages=undefined;this.numberingSystem=undefined;this.scale="m";this.value=a(l(rt,this.alphaChannel),this.alphaChannel,true);this.internalColor=rt}connectedCallback(){const{allowEmpty:t,alphaChannel:s,value:e}=this;if(e){const t=a(e,s);if(F(t,s)){this.internalSetValue(t,t,false)}return}if(t){this.internalSetValue(null,null,false)}}componentWillLoad(){V(this)}componentDidLoad(){q(this)}handleValueChange(t,s){this.internalSetValue(t,s,false)}render(){const{alphaChannel:t,hexLabel:s,internalColor:i,messages:n,scale:o,value:a}=this;const l=this.formatHexForInternalInput(a);const c=this.formatOpacityForInternalInput(i);const r=o==="l"?"m":"s";return e("div",{key:"7f3098ef31cae459bb4816fbea34cc74c174ec87",class:at.container},e("calcite-input-text",{key:"66b3c778e3340ac4f9b91c4198b964c26c6a7347",class:at.hexInput,label:n?.hex||s,maxLength:this.alphaChannel?8:6,onCalciteInputTextChange:this.onHexInputChange,onCalciteInputTextInput:this.onHexInputInput,onCalciteInternalInputTextBlur:this.onHexInputBlur,onCalciteInternalInputTextFocus:this.onInputFocus,onKeyDown:this.onInputKeyDown,onPaste:this.onHexInputPaste,prefixText:"#",ref:this.storeHexInputRef,scale:r,value:l}),t?e("calcite-input-number",{class:at.opacityInput,key:"opacity-input",label:n?.opacity,max:C.max,maxLength:3,min:C.min,numberButtonType:"none",numberingSystem:this.numberingSystem,onCalciteInputNumberInput:this.onOpacityInputInput,onCalciteInternalInputNumberBlur:this.onOpacityInputBlur,onCalciteInternalInputNumberFocus:this.onInputFocus,onKeyDown:this.onInputKeyDown,ref:this.storeOpacityInputRef,scale:r,suffixText:"%",value:c}):null)}async setFocus(){await B(this);return T(this.hexInputNode)}internalSetValue(t,s,e=true){if(t){const{alphaChannel:s}=this;const i=a(t,s,s);if(F(i,s)){const{internalColor:t}=this;const n=c(i);const o=a(l(n,s),s);const r=!t||o!==a(l(t,s),s);this.internalColor=n;this.previousNonNullValue=o;this.value=o;if(r&&e){this.calciteColorPickerHexInputChange.emit()}return}}else if(this.allowEmpty){this.internalColor=null;this.value=null;if(e){this.calciteColorPickerHexInputChange.emit()}return}this.value=s}formatHexForInternalInput(t){return t?t.replace("#","").slice(0,6):""}formatOpacityForInternalInput(t){return t?`${d(t.alpha())}`:""}nudgeRGBChannels(t,s,e){let i;const n=t.array();const o=n.slice(0,3);if(e==="rgb"){const t=o.map((t=>t+s));i=[...t,this.alphaChannel?n[3]:undefined]}else{const e=r(d(t.alpha())+s);i=[...o,e]}return c(i)}get el(){return i(this)}static get watchers(){return{value:["handleValueChange"]}}};ht.style=ct;const dt={swatch:"swatch",noColorSwatch:"swatch--no-color",checker:"checker"};const ut={borderLight:"rgba(0, 0, 0, 0.3)",borderDark:"rgba(255, 255, 255, 0.15)"};const pt=4;const ft={squareSize:pt,size:pt*2};const bt=":host{position:relative;display:inline-flex}:host([scale=s]){block-size:1.25rem;inline-size:1.25rem}:host([scale=m]){block-size:1.5rem;inline-size:1.5rem}:host([scale=l]){block-size:2rem;inline-size:2rem}.swatch{overflow:hidden;block-size:inherit;inline-size:inherit}.swatch rect{transition-property:all;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.swatch--no-color rect{fill:var(--calcite-color-foreground-1)}.swatch--no-color line{stroke:var(--calcite-color-status-danger)}.checker{fill:#cacaca}:host([hidden]){display:none}[hidden]{display:none}";const mt=bt;const gt=class{constructor(s){t(this,s);this.active=false;this.color=undefined;this.scale="m"}handleColorChange(t){this.internalColor=t?c(t):null}componentWillLoad(){this.handleColorChange(this.color)}render(){const t=!this.internalColor;const s={[dt.swatch]:true,[dt.noColorSwatch]:t};return e("svg",{key:"b29377be8ce0518f7b0f3691dcb1dda08890dd94",class:s,xmlns:"http://www.w3.org/2000/svg"},this.renderSwatch())}renderSwatch(){const{active:t,el:s,internalColor:i}=this;const o=t?"100%":"0";const a=P(s);const c=a==="light"?ut.borderLight:ut.borderDark;const r={height:"100%",rx:o,stroke:c,["stroke-width"]:"2",width:"100%"};const h=!i;if(h){return e(n,null,e("clipPath",{id:"shape"},e("rect",{height:"100%",rx:o,width:"100%"})),e("rect",{"clip-path":`inset(0 round ${o})`,rx:o,...r}),e("line",{"clip-path":"url(#shape)","stroke-width":"3",x1:"100%",x2:"0",y1:"0",y2:"100%"}))}const d=i.alpha();const u=l(i);const p=l(i,d<1);return e(n,null,e("title",null,p),e("defs",null,e("pattern",{height:ft.size,id:"checker",patternUnits:"userSpaceOnUse",width:ft.size,x:"0",y:"0"},e("rect",{class:dt.checker,height:ft.squareSize,width:ft.squareSize,x:"0",y:"0"}),e("rect",{class:dt.checker,height:ft.squareSize,width:ft.squareSize,x:ft.squareSize,y:ft.squareSize}))),e("rect",{fill:"url(#checker)",height:"100%",rx:o,width:"100%"}),e("rect",{fill:u,style:{"clip-path":d<1?"polygon(100% 0, 0 0, 0 100%)":`inset(0 round ${o})`},...r}),d<1?e("rect",{fill:p,key:"opacity-fill",style:{"clip-path":"polygon(100% 0, 100% 100%, 0 100%)"},...r}):null)}get el(){return i(this)}static get watchers(){return{color:["handleColorChange"]}}};gt.style=mt;export{ot as calcite_color_picker,ht as calcite_color_picker_hex_input,gt as calcite_color_picker_swatch};
-//# sourceMappingURL=p-68099e3d.entry.js.map

package/dist/calcite/p-68099e3d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["colorPickerCss","CalciteColorPickerStyle0","throttleFor60FpsInMs","ColorPicker","this","internalColorUpdateContext","isActiveChannelInputEmpty","mode","CSSColorMode","HEX","shiftKeyChannelAdjustment","upOrDownArrowKeyTracker","handleTabActivate","event","channelMode","currentTarget","getAttribute","updateChannelsFromColor","color","handleColorFieldScopeKeyDown","key","arrowKeyToXYOffset","ArrowUp","x","y","ArrowRight","ArrowDown","ArrowLeft","preventDefault","scopeOrientation","captureColorFieldColor","colorFieldScopeLeft","colorFieldScopeTop","handleHueScopeKeyDown","modifier","shiftKey","arrowKeyToXOffset","delta","hue","baseColorFieldColor","internalColorSet","handleHexInputChange","stopPropagation","isClearable","input","target","hex","value","normalizedHex","normalizeHex","hexify","alphaCompatible","Color","handleSavedColorSelect","swatch","handleChannelInput","channelIndex","Number","isAlphaChannel","limit","OPACITY_LIMITS","max","RGB_LIMITS","Object","keys","HSV_LIMITS","inputValue","adjustedValue","clamped","clamp","toString","handleChannelChange","handleChannelBlur","channels","restoreValueDueToEmptyInput","handleChannelFocus","selectText","shouldClearChannels","getChannelInputLimit","opacityToAlpha","updateColorFromChannels","handleSavedColorKeyDown","isActivationKey","handleColorFieldPointerDown","handleCanvasControlPointerDown","colorFieldRenderingContext","colorFieldScopeNode","handleHueSliderPointerDown","hueSliderRenderingContext","captureHueSliderColor","hueScopeNode","handleOpacitySliderPointerDown","opacitySliderRenderingContext","captureOpacitySliderValue","opacityScopeNode","globalPointerUpHandler","isPrimaryPointerButton","previouslyDragging","activeCanvasInfo","drawColorControls","calciteColorPickerChange","emit","globalPointerMoveHandler","el","isConnected","context","bounds","samplingX","samplingY","clientX","clientY","canvas","matches","width","height","storeColorFieldScope","node","storeHueScope","renderChannelsTabTitle","activeChannelMode","messages","selected","label","rgb","hsv","h","class","CSS","colorMode","onCalciteTabsActivate","renderChannelsTab","alphaChannel","isRgb","channelAriaLabels","red","green","blue","saturation","direction","getElementDir","channelsToRender","slice","control","dir","map","channelValue","index","alphaToOpacity","renderChannel","ariaLabel","suffix","channel","lang","effectiveLocale","numberButtonType","numberingSystem","onCalciteInputNumberChange","onCalciteInputNumberInput","onCalciteInternalInputNumberBlur","onCalciteInternalInputNumberFocus","onKeyDown","handleKeyDown","scale","style","marginLeft","suffixText","deleteColor","colorToDelete","inStorage","savedColors","indexOf","filter","storageKey","DEFAULT_STORAGE_KEY_PREFIX","storageId","localStorage","setItem","JSON","stringify","saveColor","colorToSave","alreadySaved","throttle","type","drawColorField","drawHueSlider","drawOpacitySlider","skipEqual","dimensions","colorField","Math","round","s","v","saturationv","initColorField","getContext","updateCanvasSize","initHueSlider","initOpacitySlider","storeOpacityScope","handleOpacityScopeKeyDown","alpha","DEFAULT_COLOR","toChannels","DIMENSIONS","m","handleAllowEmptyOrClearableChange","clearable","allowEmpty","handleAlphaChannelChange","format","console","warn","handleAlphaChannelDimensionsChange","effectiveSliderWidth","getSliderWidth","handleColorChange","oldColor","previousColor","handleFormatOrAlphaChannelChange","setMode","handleScaleChange","updateDimensions","onMessagesChange","handleValueChange","oldValue","checkMode","modeChanged","nextMode","parseMode","showIncompatibleColorWarning","dragging","calciteColorPickerInput","normalizeColor","colorChanged","colorEqual","endsWith","effectiveLocaleChange","updateMessages","handleChannelKeyUpOrDown","composedPath","some","classList","contains","complementaryBump","focusScope","focusEl","requestAnimationFrame","focus","renderingContext","captureValue","scopeNode","window","addEventListener","once","getBoundingClientRect","call","offsetX","offsetY","setFocus","componentFocusable","focusFirstTabbable","componentWillLoad","setUpLoadableComponent","willSetNoColor","parsedMode","valueIsCompatible","initialColor","getItem","parse","setUpMessages","connectedCallback","connectInteractive","connectLocalized","connectMessages","componentDidLoad","setComponentLoaded","disconnectedCallback","removeEventListener","disconnectInteractive","disconnectLocalized","disconnectMessages","componentDidRender","updateHostInteraction","render","channelsDisabled","thumb","radius","thumbRadius","hexDisabled","hideChannels","hideHex","hideSaved","hueScopeLeft","opacityScopeLeft","savedDisabled","sliderWidth","selectedColorInHex","hueTop","hueLeft","opacityTop","opacityLeft","noColor","vertical","noHex","noChannels","noSaved","adjustedColorFieldScopeLeft","adjustedColorFieldScopeTop","getAdjustedScopePosition","adjustedHueScopeLeft","adjustedHueScopeTop","adjustedOpacityScopeLeft","adjustedOpacityScopeTop","InteractiveContainer","disabled","container","controlAndScope","onPointerDown","ref","scope","colorFieldScope","role","top","left","tabindex","previewAndSliders","preview","sliders","slider","hueSlider","hueScope","opacitySlider","opacity","min","opacityScope","controlSection","section","hexAndChannelsGroup","hexOptions","onCalciteColorPickerHexInputChange","colorModeContainer","splitSection","slot","savedColorsSection","header","saved","savedColorsButtons","appearance","iconStart","kind","onClick","length","savedColor","tabIndex","ensureCompatibleMode","isAlphaCompatible","alphaMode","toAlphaMode","nonAlphaMode","toNonAlphaMode","HUE_LIMIT_CONSTRAINED","toValue","hexMode","includes","hasAlpha","HEXA","replace","string","needToInjectAlpha","model","values","colorObject","object","normalizeAlpha","getSliderCapSpacing","fillStyle","fillRect","whiteGradient","createLinearGradient","addColorStop","blackGradient","drawActiveColorFieldColor","setCanvasContextSize","devicePixelRatio","adjustedSliderDimensions","hsvColor","drawThumb","applyAlpha","startAngle","endAngle","PI","outlineWidth","beginPath","arc","fill","strokeStyle","lineWidth","stroke","pattern","createPattern","getCheckeredBackgroundPattern","globalCompositeOperation","drawActiveHueSliderColor","sliderBoundX","getSliderBoundX","gradient","hueSliderColorStopKeywords","offset","currentOffset","forEach","keyword","clearRect","drawSliderPath","startColor","midColor","endColor","drawActiveOpacitySliderColor","moveTo","lineTo","quadraticCurveTo","closePath","checkerPattern","document","createElement","patternContext","closeToEdge","closeToRangeEdge","remap","array","isAlpha","floor","push","SCOPE_SIZE","hexInput","opacityInput","colorPickerHexInputCss","CalciteColorPickerHexInputStyle0","ColorPickerHexInput","onHexInputBlur","hexInputNode","internalColor","willClearValue","isLonghand","isLonghandHex","isShorthandHex","onHexInputChange","isValidHex","formatHexForInternalInput","rgbToHex","onOpacityInputBlur","opacityInputNode","formatOpacityForInternalInput","onOpacityInputInput","onOpacityInputChange","nodeValue","normalized","preserveExistingAlpha","alphaHex","hexa","internalSetValue","onInputFocus","onHexInputInput","hexInputValue","onInputKeyDown","altKey","ctrlKey","metaKey","isNudgeKey","previousNonNullValue","bump","nudgeRGBChannels","withModifiers","singleChar","validHexChar","hexChar","test","onHexInputPaste","clipboardData","getData","storeHexInputRef","storeOpacityInputRef","hexLabel","opacityInputValue","inputScale","maxLength","onCalciteInputTextChange","onCalciteInputTextInput","onCalciteInternalInputTextBlur","onCalciteInternalInputTextFocus","onPaste","prefixText","focusElement","currentColor","nextColor","normalizedLonghand","changed","calciteColorPickerHexInputChange","amount","nudgedChannels","rgbChannels","nudgedRGBChannels","undefined","nudgedAlpha","noColorSwatch","checker","COLORS","borderLight","borderDark","checkerSquareSize","CHECKER_DIMENSIONS","squareSize","size","colorPickerSwatchCss","CalciteColorPickerSwatchStyle0","ColorPickerSwatch","isEmpty","classes","xmlns","renderSwatch","active","borderRadius","theme","getModeName","borderColor","commonSwatchProps","rx","Fragment","id","x1","x2","y1","y2","patternUnits"],"sources":["src/components/color-picker/color-picker.scss?tag=calcite-color-picker&encapsulation=shadow","src/components/color-picker/color-picker.tsx","src/components/color-picker-hex-input/resources.ts","src/components/color-picker-hex-input/color-picker-hex-input.scss?tag=calcite-color-picker-hex-input&encapsulation=shadow","src/components/color-picker-hex-input/color-picker-hex-input.tsx","src/components/color-picker-swatch/resources.ts","src/components/color-picker-swatch/color-picker-swatch.scss?tag=calcite-color-picker-swatch&encapsulation=shadow","src/components/color-picker-swatch/color-picker-swatch.tsx"],"sourcesContent":[":host {\n  @apply text-n2h inline-block font-normal;\n}\n\n@include disabled();\n\n:host([scale=\"s\"]) {\n  --calcite-color-picker-spacing: 8px;\n\n  .container {\n    inline-size: 160px;\n  }\n\n  .saved-colors {\n    @apply gap-1;\n    grid-template-columns: repeat(auto-fill, 20px);\n  }\n}\n\n:host([scale=\"m\"]) {\n  --calcite-color-picker-spacing: 12px;\n\n  .container {\n    inline-size: 272px;\n  }\n}\n\n:host([scale=\"l\"]) {\n  --calcite-color-picker-spacing: 16px;\n\n  @apply text-n1h;\n\n  .container {\n    inline-size: 464px;\n  }\n\n  .section {\n    &:first-of-type {\n      padding-block-start: var(--calcite-color-picker-spacing);\n    }\n  }\n\n  .saved-colors {\n    grid-template-columns: repeat(auto-fill, 32px);\n  }\n\n  .control-section {\n    @apply flex-nowrap items-baseline;\n  }\n\n  .control-section {\n    @apply flex-wrap;\n  }\n\n  .color-hex-options {\n    @apply flex\n      flex-shrink\n      flex-col\n      justify-around;\n  }\n\n  .color-mode-container {\n    flex-shrink: 3;\n  }\n}\n\n.container {\n  @apply bg-foreground-1;\n  display: inline-block;\n  border: 1px solid var(--calcite-color-border-1);\n}\n\n.control-and-scope {\n  @apply flex relative cursor-pointer touch-none;\n}\n\n.color-field,\n.control-and-scope {\n  user-select: none;\n}\n\n.scope {\n  @apply text-n1\n    focus-base\n    absolute\n    z-default\n    rounded-full\n    bg-transparent\n    w-px\n    h-px\n    pointer-events-none;\n  &:focus {\n    @apply focus-outset;\n    outline-offset: 6px;\n  }\n}\n\n.hex-and-channels-group {\n  @apply w-full;\n}\n\n.hex-and-channels-group,\n.control-section {\n  @apply flex flex-row flex-wrap;\n}\n\n.section {\n  padding-block: 0 var(--calcite-color-picker-spacing);\n  padding-inline: var(--calcite-color-picker-spacing);\n\n  &:first-of-type {\n    padding-block-start: var(--calcite-color-picker-spacing);\n  }\n}\n\n.sliders {\n  @apply flex flex-col justify-between;\n  margin-inline-start: var(--calcite-color-picker-spacing);\n  gap: var(--calcite-spacing-xxs);\n}\n\n.preview-and-sliders {\n  @apply flex items-center;\n  padding: var(--calcite-color-picker-spacing);\n}\n\n.color-hex-options,\n.section--split {\n  flex-grow: 1;\n}\n\n.header {\n  @apply text-color-1\n    flex\n    items-center\n    justify-between;\n}\n\n.color-mode-container {\n  padding-block-start: var(--calcite-color-picker-spacing);\n}\n\n.channels {\n  @apply flex gap-y-0.5;\n}\n\n.channel {\n  &[data-channel-index=\"3\"] {\n    inline-size: 159px;\n  }\n}\n\n:host([scale=\"s\"]) {\n  .channels {\n    @apply flex-wrap;\n  }\n\n  .channel {\n    flex-basis: 30%;\n    flex-grow: 1;\n\n    &[data-channel-index=\"3\"] {\n      inline-size: unset;\n      margin-inline-start: unset;\n    }\n  }\n}\n\n:host([scale=\"l\"]) {\n  .channel {\n    &[data-channel-index=\"3\"] {\n      inline-size: 131px;\n    }\n  }\n}\n\n.saved-colors {\n  @apply grid gap-2;\n  padding-block-start: var(--calcite-color-picker-spacing);\n  grid-template-columns: repeat(auto-fill, 24px);\n}\n\n.saved-colors-buttons {\n  display: flex;\n}\n\n.saved-color {\n  @include focus-style-base();\n\n  cursor: pointer;\n\n  &:focus {\n    @include focus-style-outset();\n  }\n\n  &:hover {\n    transition: outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;\n    outline: 2px solid var(--calcite-color-border-2);\n    outline-offset: 2px;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport Color from \"color\";\nimport { throttle } from \"lodash-es\";\nimport {\n  Direction,\n  focusFirstTabbable,\n  getElementDir,\n  isPrimaryPointerButton,\n} from \"../../utils/dom\";\nimport { Scale } from \"../interfaces\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  LocalizedComponent,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport { clamp, closeToRangeEdge, remap } from \"../../utils/math\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  alphaCompatible,\n  alphaToOpacity,\n  colorEqual,\n  CSSColorMode,\n  Format,\n  getSliderWidth,\n  hexify,\n  normalizeAlpha,\n  normalizeColor,\n  normalizeHex,\n  opacityToAlpha,\n  parseMode,\n  SupportedMode,\n  toAlphaMode,\n  toNonAlphaMode,\n} from \"./utils\";\nimport {\n  CSS,\n  DEFAULT_COLOR,\n  DEFAULT_STORAGE_KEY_PREFIX,\n  DIMENSIONS,\n  HSV_LIMITS,\n  HUE_LIMIT_CONSTRAINED,\n  OPACITY_LIMITS,\n  RGB_LIMITS,\n  SCOPE_SIZE,\n} from \"./resources\";\nimport { Channels, ColorMode, ColorValue, HSLA, HSVA, InternalColor, RGBA } from \"./interfaces\";\nimport { ColorPickerMessages } from \"./assets/color-picker/t9n\";\n\nconst throttleFor60FpsInMs = 16;\n\n@Component({\n  tag: \"calcite-color-picker\",\n  styleUrl: \"color-picker.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class ColorPicker\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, an empty color (`null`) will be allowed as a `value`.\n   *\n   * When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.\n   *\n   * @deprecated Use `clearable` instead\n   */\n  @Prop({ reflect: true }) allowEmpty = false;\n\n  @Watch(\"allowEmpty\")\n  @Watch(\"clearable\")\n  handleAllowEmptyOrClearableChange(): void {\n    this.isClearable = this.clearable || this.allowEmpty;\n  }\n\n  /**\n   * When `true`, the component will allow updates to the color's alpha value.\n   */\n  @Prop() alphaChannel = false;\n\n  @Watch(\"alphaChannel\")\n  handleAlphaChannelChange(alphaChannel: boolean): void {\n    const { format } = this;\n\n    if (alphaChannel && format !== \"auto\" && !alphaCompatible(format)) {\n      console.warn(\n        `ignoring alphaChannel as the current format (${format}) does not support alpha`,\n      );\n      this.alphaChannel = false;\n    }\n  }\n\n  @Watch(\"alphaChannel\")\n  @Watch(\"dimensions\")\n  handleAlphaChannelDimensionsChange(): void {\n    this.effectiveSliderWidth = getSliderWidth(this.dimensions, this.alphaChannel);\n    this.drawColorControls();\n  }\n\n  /** When `true`, hides the RGB/HSV channel inputs. */\n  @Prop() channelsDisabled = false;\n\n  /**\n   * When `true`, an empty color (`null`) will be allowed as a `value`.\n   *\n   * When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.\n   */\n  @Prop({ reflect: true }) clearable = false;\n\n  /**\n   * Internal prop for advanced use-cases.\n   *\n   * @internal\n   */\n  @Prop({ mutable: true }) color: InternalColor | null = DEFAULT_COLOR;\n\n  @Watch(\"color\")\n  handleColorChange(color: Color | null, oldColor: Color | null): void {\n    this.drawColorControls();\n    this.updateChannelsFromColor(color);\n    this.previousColor = oldColor;\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   * The format of `value`.\n   *\n   * When `\"auto\"`, the format will be inferred from `value` when set.\n   *\n   * @default \"auto\"\n   */\n  @Prop({ reflect: true }) format: Format = \"auto\";\n\n  @Watch(\"alphaChannel\")\n  @Watch(\"format\")\n  handleFormatOrAlphaChannelChange(): void {\n    this.setMode(this.format);\n    this.internalColorSet(this.color, false, \"internal\");\n  }\n\n  /**\n   * When `true`, hides the RGB/HSV channel inputs.\n   *\n   * @deprecated use `channelsDisabled` instead\n   */\n  @Prop({ reflect: true }) hideChannels = false;\n\n  /** When `true`, hides the hex input. */\n  @Prop() hexDisabled = false;\n\n  /**\n   * When `true`, hides the hex input.\n   *\n   * @deprecated use `hexDisabled` instead\n   */\n  @Prop({ reflect: true }) hideHex = false;\n\n  /**\n   * When `true`, hides the saved colors section.\n   *\n   * @deprecated use `savedDisabled` instead\n   */\n  @Prop({ reflect: true }) hideSaved = false;\n\n  /** When `true`, hides the saved colors section. */\n  @Prop({ reflect: true }) savedDisabled = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  @Watch(\"scale\")\n  handleScaleChange(scale: Scale = \"m\"): void {\n    this.updateDimensions(scale);\n    this.updateCanvasSize(\"all\");\n    this.drawColorControls();\n  }\n\n  /** Specifies the storage ID for colors. */\n  @Prop({ reflect: true }) storageId: string;\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<ColorPickerMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /** Specifies the Unicode numeral system used by the component for localization. */\n  @Prop({ reflect: true }) numberingSystem: NumberingSystem;\n\n  /**\n   * The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object.\n   *\n   * The type will be preserved as the color is updated.\n   *\n   * @default \"#007ac2\"\n   * @see [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)\n   * @see [ColorValue](https://github.com/Esri/calcite-design-system/blob/dev/src/components/color-picker/interfaces.ts#L10)\n   */\n  @Prop({ mutable: true }) value: ColorValue | null = normalizeHex(\n    hexify(DEFAULT_COLOR, this.alphaChannel),\n  );\n\n  @Watch(\"value\")\n  handleValueChange(value: ColorValue | null, oldValue: ColorValue | null): void {\n    const { isClearable, format } = this;\n    const checkMode = !isClearable || value;\n    let modeChanged = false;\n\n    if (checkMode) {\n      const nextMode = parseMode(value);\n\n      if (!nextMode || (format !== \"auto\" && nextMode !== format)) {\n        this.showIncompatibleColorWarning(value, format);\n        this.value = oldValue;\n        return;\n      }\n\n      modeChanged = this.mode !== nextMode;\n      this.setMode(nextMode, this.internalColorUpdateContext === null);\n    }\n\n    const dragging = this.activeCanvasInfo;\n\n    if (this.internalColorUpdateContext === \"initial\") {\n      return;\n    }\n\n    if (this.internalColorUpdateContext === \"user-interaction\") {\n      this.calciteColorPickerInput.emit();\n\n      if (!dragging) {\n        this.calciteColorPickerChange.emit();\n      }\n      return;\n    }\n\n    const color =\n      isClearable && !value\n        ? null\n        : Color(\n            value != null && typeof value === \"object\" && alphaCompatible(this.mode)\n              ? normalizeColor(value as RGBA | HSVA | HSLA)\n              : value,\n          );\n    const colorChanged = !colorEqual(color, this.color);\n\n    if (modeChanged || colorChanged) {\n      this.internalColorSet(\n        color,\n        this.alphaChannel && !(this.mode.endsWith(\"a\") || this.mode.endsWith(\"a-css\")),\n        \"internal\",\n      );\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Internal State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteColorPickerElement;\n\n  private activeCanvasInfo: {\n    context: CanvasRenderingContext2D;\n    bounds: DOMRect;\n  };\n\n  private get baseColorFieldColor(): Color {\n    return this.color || this.previousColor || DEFAULT_COLOR;\n  }\n\n  private checkerPattern: HTMLCanvasElement;\n\n  private colorFieldRenderingContext: CanvasRenderingContext2D;\n\n  private colorFieldScopeNode: HTMLDivElement;\n\n  private effectiveSliderWidth: number;\n\n  private hueSliderRenderingContext: CanvasRenderingContext2D;\n\n  private hueScopeNode: HTMLDivElement;\n\n  private internalColorUpdateContext: \"internal\" | \"initial\" | \"user-interaction\" | null = null;\n\n  private isActiveChannelInputEmpty: boolean = false;\n\n  private isClearable: boolean;\n\n  private mode: SupportedMode = CSSColorMode.HEX;\n\n  private opacityScopeNode: HTMLDivElement;\n\n  private opacitySliderRenderingContext: CanvasRenderingContext2D;\n\n  private previousColor: InternalColor | null;\n\n  private shiftKeyChannelAdjustment = 0;\n\n  private upOrDownArrowKeyTracker: \"down\" | \"up\" | null = null;\n\n  @State() channelMode: ColorMode = \"rgb\";\n\n  @State() channels: Channels = this.toChannels(DEFAULT_COLOR);\n\n  @State() defaultMessages: ColorPickerMessages;\n\n  @State() dimensions = DIMENSIONS.m;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\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: ColorPickerMessages;\n\n  @State() savedColors: string[] = [];\n\n  @State() colorFieldScopeTop: number;\n\n  @State() colorFieldScopeLeft: number;\n\n  @State() hueScopeLeft: number;\n\n  @State() opacityScopeLeft: number;\n\n  @State() scopeOrientation: \"vertical\" | \"horizontal\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the color value has changed.\n   */\n  @Event({ cancelable: false }) calciteColorPickerChange: EventEmitter<void>;\n\n  /**\n   * Fires as the color value changes.\n   *\n   * Similar to the `calciteColorPickerChange` event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved.\n   */\n  @Event({ cancelable: false }) calciteColorPickerInput: EventEmitter<void>;\n\n  private handleTabActivate = (event: Event): void => {\n    this.channelMode = (event.currentTarget as HTMLElement).getAttribute(\n      \"data-color-mode\",\n    ) as ColorMode;\n\n    this.updateChannelsFromColor(this.color);\n  };\n\n  private handleColorFieldScopeKeyDown = (event: KeyboardEvent): void => {\n    const { key } = event;\n    const arrowKeyToXYOffset = {\n      ArrowUp: { x: 0, y: -10 },\n      ArrowRight: { x: 10, y: 0 },\n      ArrowDown: { x: 0, y: 10 },\n      ArrowLeft: { x: -10, y: 0 },\n    };\n\n    if (arrowKeyToXYOffset[key]) {\n      event.preventDefault();\n      this.scopeOrientation = key === \"ArrowDown\" || key === \"ArrowUp\" ? \"vertical\" : \"horizontal\";\n      this.captureColorFieldColor(\n        this.colorFieldScopeLeft + arrowKeyToXYOffset[key].x || 0,\n        this.colorFieldScopeTop + arrowKeyToXYOffset[key].y || 0,\n        false,\n      );\n    }\n  };\n\n  private handleHueScopeKeyDown = (event: KeyboardEvent): void => {\n    const modifier = event.shiftKey ? 10 : 1;\n    const { key } = event;\n    const arrowKeyToXOffset = {\n      ArrowUp: 1,\n      ArrowRight: 1,\n      ArrowDown: -1,\n      ArrowLeft: -1,\n    };\n\n    if (arrowKeyToXOffset[key]) {\n      event.preventDefault();\n      const delta = arrowKeyToXOffset[key] * modifier;\n      const hue = this.baseColorFieldColor.hue();\n      const color = this.baseColorFieldColor.hue(hue + delta);\n      this.internalColorSet(color, false);\n    }\n  };\n\n  private handleHexInputChange = (event: Event): void => {\n    event.stopPropagation();\n    const { isClearable, color } = this;\n    const input = event.target as HTMLCalciteColorPickerHexInputElement;\n    const hex = input.value;\n\n    if (isClearable && !hex) {\n      this.internalColorSet(null);\n      return;\n    }\n\n    const normalizedHex = color && normalizeHex(hexify(color, alphaCompatible(this.mode)));\n\n    if (hex !== normalizedHex) {\n      this.internalColorSet(Color(hex));\n    }\n  };\n\n  private handleSavedColorSelect = (event: Event): void => {\n    const swatch = event.currentTarget as HTMLCalciteColorPickerSwatchElement;\n    this.internalColorSet(Color(swatch.color));\n  };\n\n  private handleChannelInput = (event: CustomEvent): void => {\n    const input = event.currentTarget as HTMLCalciteInputNumberElement;\n    const channelIndex = Number(input.getAttribute(\"data-channel-index\"));\n    const isAlphaChannel = channelIndex === 3;\n\n    const limit = isAlphaChannel\n      ? OPACITY_LIMITS.max\n      : this.channelMode === \"rgb\"\n        ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]\n        : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];\n\n    let inputValue: string;\n\n    if (!input.value) {\n      inputValue = \"\";\n      this.isActiveChannelInputEmpty = true;\n      // reset this to allow typing in new value, when channel input is cleared after ArrowUp or ArrowDown have been pressed\n      this.upOrDownArrowKeyTracker = null;\n    } else {\n      const value = Number(input.value);\n      const adjustedValue = value + this.shiftKeyChannelAdjustment;\n      const clamped = clamp(adjustedValue, 0, limit);\n\n      inputValue = clamped.toString();\n    }\n\n    input.value = inputValue;\n\n    if (inputValue !== \"\" && this.shiftKeyChannelAdjustment !== 0) {\n      // we treat nudging as a change event since the input won't emit when modifying the value directly\n      this.handleChannelChange(event);\n    } else if (inputValue !== \"\") {\n      this.handleChannelChange(event);\n    }\n  };\n\n  private handleChannelBlur = (event: CustomEvent): void => {\n    const input = event.currentTarget as HTMLCalciteInputNumberElement;\n    const channelIndex = Number(input.getAttribute(\"data-channel-index\"));\n    const channels = [...this.channels] as this[\"channels\"];\n    const restoreValueDueToEmptyInput = !input.value && !this.isClearable;\n\n    if (restoreValueDueToEmptyInput) {\n      input.value = channels[channelIndex]?.toString();\n    }\n  };\n\n  handleChannelFocus = (event: Event): void => {\n    const input = event.currentTarget as HTMLCalciteInputNumberElement;\n    input.selectText();\n  };\n\n  // using @Listen as a workaround for VDOM listener not firing\n  @Listen(\"keydown\", { capture: true })\n  @Listen(\"keyup\", { capture: true })\n  protected handleChannelKeyUpOrDown(event: KeyboardEvent): void {\n    this.shiftKeyChannelAdjustment = 0;\n    const { key } = event;\n\n    if (\n      (key !== \"ArrowUp\" && key !== \"ArrowDown\") ||\n      !event.composedPath().some((node: HTMLElement) => node.classList?.contains(CSS.channel))\n    ) {\n      return;\n    }\n\n    const { shiftKey } = event;\n    event.preventDefault();\n\n    if (!this.color) {\n      this.internalColorSet(this.previousColor);\n      event.stopPropagation();\n      return;\n    }\n\n    // this gets applied to the input's up/down arrow increment/decrement\n    const complementaryBump = 9;\n\n    this.shiftKeyChannelAdjustment =\n      key === \"ArrowUp\" && shiftKey\n        ? complementaryBump\n        : key === \"ArrowDown\" && shiftKey\n          ? -complementaryBump\n          : 0;\n\n    if (key === \"ArrowUp\") {\n      this.upOrDownArrowKeyTracker = \"up\";\n    }\n    if (key === \"ArrowDown\") {\n      this.upOrDownArrowKeyTracker = \"down\";\n    }\n  }\n\n  private getChannelInputLimit(channelIndex: number): number {\n    return this.channelMode === \"rgb\"\n      ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]\n      : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];\n  }\n\n  private handleChannelChange = (event: CustomEvent): void => {\n    const input = event.currentTarget as HTMLCalciteInputNumberElement;\n    const channelIndex = Number(input.getAttribute(\"data-channel-index\"));\n    const channels = [...this.channels] as this[\"channels\"];\n\n    const shouldClearChannels = this.isClearable && !input.value;\n\n    if (shouldClearChannels) {\n      this.channels = [null, null, null, null];\n      this.internalColorSet(null);\n      return;\n    }\n\n    const isAlphaChannel = channelIndex === 3;\n\n    if (this.isActiveChannelInputEmpty && this.upOrDownArrowKeyTracker) {\n      input.value =\n        this.upOrDownArrowKeyTracker === \"up\"\n          ? (channels[channelIndex] + 1 <= this.getChannelInputLimit(channelIndex)\n              ? channels[channelIndex] + 1\n              : this.getChannelInputLimit(channelIndex)\n            ).toString()\n          : (channels[channelIndex] - 1 >= 0 ? channels[channelIndex] - 1 : 0).toString();\n      this.isActiveChannelInputEmpty = false;\n      this.upOrDownArrowKeyTracker = null;\n    }\n    const value = input.value ? Number(input.value) : channels[channelIndex];\n\n    channels[channelIndex] = isAlphaChannel ? opacityToAlpha(value) : value;\n    this.updateColorFromChannels(channels);\n  };\n\n  private handleSavedColorKeyDown = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      event.preventDefault();\n      this.handleSavedColorSelect(event);\n    }\n  };\n\n  private handleColorFieldPointerDown = (event: PointerEvent): void => {\n    this.handleCanvasControlPointerDown(\n      event,\n      this.colorFieldRenderingContext,\n      this.captureColorFieldColor,\n      this.colorFieldScopeNode,\n    );\n  };\n\n  private focusScope(focusEl: HTMLElement): void {\n    requestAnimationFrame(() => {\n      focusEl.focus();\n    });\n  }\n\n  private handleHueSliderPointerDown = (event: PointerEvent): void => {\n    this.handleCanvasControlPointerDown(\n      event,\n      this.hueSliderRenderingContext,\n      this.captureHueSliderColor,\n      this.hueScopeNode,\n    );\n  };\n\n  private handleOpacitySliderPointerDown = (event: PointerEvent): void => {\n    this.handleCanvasControlPointerDown(\n      event,\n      this.opacitySliderRenderingContext,\n      this.captureOpacitySliderValue,\n      this.opacityScopeNode,\n    );\n  };\n\n  private handleCanvasControlPointerDown(\n    event: PointerEvent,\n    renderingContext: CanvasRenderingContext2D,\n    captureValue: (offsetX: number, offsetY?: number) => void,\n    scopeNode: HTMLElement,\n  ): void {\n    if (!isPrimaryPointerButton(event)) {\n      return;\n    }\n\n    window.addEventListener(\"pointermove\", this.globalPointerMoveHandler);\n    window.addEventListener(\"pointerup\", this.globalPointerUpHandler, { once: true });\n\n    this.activeCanvasInfo = {\n      context: renderingContext,\n      bounds: renderingContext.canvas.getBoundingClientRect(),\n    };\n\n    captureValue.call(this, event.offsetX, event.offsetY);\n    this.focusScope(scopeNode);\n  }\n\n  private globalPointerUpHandler = (event: PointerEvent): void => {\n    if (!isPrimaryPointerButton(event)) {\n      return;\n    }\n\n    const previouslyDragging = this.activeCanvasInfo;\n    this.activeCanvasInfo = null;\n    this.drawColorControls();\n\n    if (previouslyDragging) {\n      this.calciteColorPickerChange.emit();\n    }\n  };\n\n  private globalPointerMoveHandler = (event: PointerEvent): void => {\n    const { activeCanvasInfo, el } = this;\n\n    if (!el.isConnected || !activeCanvasInfo) {\n      return;\n    }\n\n    const { context, bounds } = activeCanvasInfo;\n\n    let samplingX: number;\n    let samplingY: number;\n\n    const { clientX, clientY } = event;\n\n    if (context.canvas.matches(\":hover\")) {\n      samplingX = clientX - bounds.x;\n      samplingY = clientY - bounds.y;\n    } else {\n      // snap x and y to the closest edge\n\n      if (clientX < bounds.x + bounds.width && clientX > bounds.x) {\n        samplingX = clientX - bounds.x;\n      } else if (clientX < bounds.x) {\n        samplingX = 0;\n      } else {\n        samplingX = bounds.width;\n      }\n\n      if (clientY < bounds.y + bounds.height && clientY > bounds.y) {\n        samplingY = clientY - bounds.y;\n      } else if (clientY < bounds.y) {\n        samplingY = 0;\n      } else {\n        samplingY = bounds.height;\n      }\n    }\n\n    if (context === this.colorFieldRenderingContext) {\n      this.captureColorFieldColor(samplingX, samplingY, false);\n    } else if (context === this.hueSliderRenderingContext) {\n      this.captureHueSliderColor(samplingX);\n    } else if (context === this.opacitySliderRenderingContext) {\n      this.captureOpacitySliderValue(samplingX);\n    }\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\n    focusFirstTabbable(this.el);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n\n    this.handleAllowEmptyOrClearableChange();\n    this.handleAlphaChannelDimensionsChange();\n\n    const { isClearable, color, format, value } = this;\n    const willSetNoColor = isClearable && !value;\n    const parsedMode = parseMode(value);\n    const valueIsCompatible =\n      willSetNoColor || (format === \"auto\" && parsedMode) || format === parsedMode;\n    const initialColor = willSetNoColor ? null : valueIsCompatible ? Color(value) : color;\n\n    if (!valueIsCompatible) {\n      this.showIncompatibleColorWarning(value, format);\n    }\n    this.setMode(format, false);\n    this.internalColorSet(initialColor, false, \"initial\");\n\n    this.updateDimensions(this.scale);\n\n    const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;\n\n    if (this.storageId && localStorage.getItem(storageKey)) {\n      this.savedColors = JSON.parse(localStorage.getItem(storageKey));\n    }\n\n    await setUpMessages(this);\n  }\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"pointermove\", this.globalPointerMoveHandler);\n    window.removeEventListener(\"pointerup\", this.globalPointerUpHandler);\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const {\n      channelsDisabled,\n      color,\n      colorFieldScopeLeft,\n      colorFieldScopeTop,\n      dimensions: {\n        thumb: { radius: thumbRadius },\n      },\n      hexDisabled,\n      hideChannels,\n      hideHex,\n      hideSaved,\n      hueScopeLeft,\n      messages,\n      alphaChannel,\n      opacityScopeLeft,\n      savedColors,\n      savedDisabled,\n      scale,\n      scopeOrientation,\n    } = this;\n\n    const sliderWidth = this.effectiveSliderWidth;\n    const selectedColorInHex = color ? hexify(color, alphaChannel) : null;\n    const hueTop = thumbRadius;\n    const hueLeft = hueScopeLeft ?? (sliderWidth * DEFAULT_COLOR.hue()) / HSV_LIMITS.h;\n    const opacityTop = thumbRadius;\n    const opacityLeft =\n      opacityScopeLeft ??\n      (sliderWidth * alphaToOpacity(DEFAULT_COLOR.alpha())) / OPACITY_LIMITS.max;\n    const noColor = color === null;\n    const vertical = scopeOrientation === \"vertical\";\n    const noHex = hexDisabled || hideHex;\n    const noChannels = channelsDisabled || hideChannels;\n    const noSaved = savedDisabled || hideSaved;\n    const [adjustedColorFieldScopeLeft, adjustedColorFieldScopeTop] = this.getAdjustedScopePosition(\n      colorFieldScopeLeft,\n      colorFieldScopeTop,\n    );\n    const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(\n      hueLeft,\n      hueTop,\n    );\n    const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(\n      opacityLeft,\n      opacityTop,\n    );\n\n    return (\n      <InteractiveContainer disabled={this.disabled}>\n        <div class={CSS.container}>\n          <div class={CSS.controlAndScope}>\n            <canvas\n              class={CSS.colorField}\n              onPointerDown={this.handleColorFieldPointerDown}\n              ref={this.initColorField}\n            />\n            <div\n              aria-label={vertical ? messages.value : messages.saturation}\n              aria-valuemax={vertical ? HSV_LIMITS.v : HSV_LIMITS.s}\n              aria-valuemin=\"0\"\n              aria-valuenow={(vertical ? color?.saturationv() : color?.value()) || \"0\"}\n              class={{ [CSS.scope]: true, [CSS.colorFieldScope]: true }}\n              onKeyDown={this.handleColorFieldScopeKeyDown}\n              ref={this.storeColorFieldScope}\n              role=\"slider\"\n              style={{\n                top: `${adjustedColorFieldScopeTop || 0}px`,\n                left: `${adjustedColorFieldScopeLeft || 0}px`,\n              }}\n              tabindex=\"0\"\n            />\n          </div>\n          <div class={CSS.previewAndSliders}>\n            <calcite-color-picker-swatch\n              class={CSS.preview}\n              color={selectedColorInHex}\n              scale={this.alphaChannel ? \"l\" : this.scale}\n            />\n            <div class={CSS.sliders}>\n              <div class={CSS.controlAndScope}>\n                <canvas\n                  class={{ [CSS.slider]: true, [CSS.hueSlider]: true }}\n                  onPointerDown={this.handleHueSliderPointerDown}\n                  ref={this.initHueSlider}\n                />\n                <div\n                  aria-label={messages.hue}\n                  aria-valuemax={HSV_LIMITS.h}\n                  aria-valuemin=\"0\"\n                  aria-valuenow={color?.round().hue() || DEFAULT_COLOR.round().hue()}\n                  class={{ [CSS.scope]: true, [CSS.hueScope]: true }}\n                  onKeyDown={this.handleHueScopeKeyDown}\n                  ref={this.storeHueScope}\n                  role=\"slider\"\n                  style={{\n                    top: `${adjustedHueScopeTop}px`,\n                    left: `${adjustedHueScopeLeft}px`,\n                  }}\n                  tabindex=\"0\"\n                />\n              </div>\n              {alphaChannel ? (\n                <div class={CSS.controlAndScope}>\n                  <canvas\n                    class={{ [CSS.slider]: true, [CSS.opacitySlider]: true }}\n                    onPointerDown={this.handleOpacitySliderPointerDown}\n                    ref={this.initOpacitySlider}\n                  />\n                  <div\n                    aria-label={messages.opacity}\n                    aria-valuemax={OPACITY_LIMITS.max}\n                    aria-valuemin={OPACITY_LIMITS.min}\n                    aria-valuenow={(color || DEFAULT_COLOR).round().alpha()}\n                    class={{ [CSS.scope]: true, [CSS.opacityScope]: true }}\n                    onKeyDown={this.handleOpacityScopeKeyDown}\n                    ref={this.storeOpacityScope}\n                    role=\"slider\"\n                    style={{\n                      top: `${adjustedOpacityScopeTop}px`,\n                      left: `${adjustedOpacityScopeLeft}px`,\n                    }}\n                    tabindex=\"0\"\n                  />\n                </div>\n              ) : null}\n            </div>\n          </div>\n          {noHex && noChannels ? null : (\n            <div\n              class={{\n                [CSS.controlSection]: true,\n                [CSS.section]: true,\n              }}\n            >\n              <div class={CSS.hexAndChannelsGroup}>\n                {noHex ? null : (\n                  <div class={CSS.hexOptions}>\n                    <calcite-color-picker-hex-input\n                      allowEmpty={this.isClearable}\n                      alphaChannel={alphaChannel}\n                      class={CSS.control}\n                      messages={messages}\n                      numberingSystem={this.numberingSystem}\n                      onCalciteColorPickerHexInputChange={this.handleHexInputChange}\n                      scale={scale}\n                      value={selectedColorInHex}\n                    />\n                  </div>\n                )}\n                {noChannels ? null : (\n                  <calcite-tabs\n                    class={{\n                      [CSS.colorModeContainer]: true,\n                      [CSS.splitSection]: true,\n                    }}\n                    scale={scale === \"l\" ? \"m\" : \"s\"}\n                  >\n                    <calcite-tab-nav slot=\"title-group\">\n                      {this.renderChannelsTabTitle(\"rgb\")}\n                      {this.renderChannelsTabTitle(\"hsv\")}\n                    </calcite-tab-nav>\n                    {this.renderChannelsTab(\"rgb\")}\n                    {this.renderChannelsTab(\"hsv\")}\n                  </calcite-tabs>\n                )}\n              </div>\n            </div>\n          )}\n          {noSaved ? null : (\n            <div class={{ [CSS.savedColorsSection]: true, [CSS.section]: true }}>\n              <div class={CSS.header}>\n                <label>{messages.saved}</label>\n                <div class={CSS.savedColorsButtons}>\n                  <calcite-button\n                    appearance=\"transparent\"\n                    class={CSS.deleteColor}\n                    disabled={noColor}\n                    iconStart=\"minus\"\n                    kind=\"neutral\"\n                    label={messages.deleteColor}\n                    onClick={this.deleteColor}\n                    scale={scale}\n                    type=\"button\"\n                  />\n                  <calcite-button\n                    appearance=\"transparent\"\n                    class={CSS.saveColor}\n                    disabled={noColor}\n                    iconStart=\"plus\"\n                    kind=\"neutral\"\n                    label={messages.saveColor}\n                    onClick={this.saveColor}\n                    scale={scale}\n                    type=\"button\"\n                  />\n                </div>\n              </div>\n              {savedColors.length > 0 ? (\n                <div class={CSS.savedColors}>\n                  {[\n                    ...savedColors.map((color) => (\n                      <calcite-color-picker-swatch\n                        class={CSS.savedColor}\n                        color={color}\n                        key={color}\n                        onClick={this.handleSavedColorSelect}\n                        onKeyDown={this.handleSavedColorKeyDown}\n                        scale={scale}\n                        tabIndex={0}\n                      />\n                    )),\n                  ]}\n                </div>\n              ) : null}\n            </div>\n          )}\n        </div>\n      </InteractiveContainer>\n    );\n  }\n\n  private storeColorFieldScope = (node: HTMLDivElement): void => {\n    this.colorFieldScopeNode = node;\n  };\n\n  private storeHueScope = (node: HTMLDivElement): void => {\n    this.hueScopeNode = node;\n  };\n\n  private renderChannelsTabTitle = (channelMode: this[\"channelMode\"]): VNode => {\n    const { channelMode: activeChannelMode, messages } = this;\n    const selected = channelMode === activeChannelMode;\n    const label = channelMode === \"rgb\" ? messages.rgb : messages.hsv;\n\n    return (\n      <calcite-tab-title\n        class={CSS.colorMode}\n        data-color-mode={channelMode}\n        key={channelMode}\n        onCalciteTabsActivate={this.handleTabActivate}\n        selected={selected}\n      >\n        {label}\n      </calcite-tab-title>\n    );\n  };\n\n  private renderChannelsTab = (channelMode: this[\"channelMode\"]): VNode => {\n    const { isClearable, channelMode: activeChannelMode, channels, messages, alphaChannel } = this;\n    const selected = channelMode === activeChannelMode;\n    const isRgb = channelMode === \"rgb\";\n    const channelAriaLabels = isRgb\n      ? [messages.red, messages.green, messages.blue]\n      : [messages.hue, messages.saturation, messages.value];\n    const direction = getElementDir(this.el);\n    const channelsToRender = alphaChannel ? channels : channels.slice(0, 3);\n\n    return (\n      <calcite-tab class={CSS.control} key={channelMode} selected={selected}>\n        {/* channel order should not be mirrored */}\n        <div class={CSS.channels} dir=\"ltr\">\n          {channelsToRender.map((channelValue, index) => {\n            const isAlphaChannel = index === 3;\n\n            if (isAlphaChannel) {\n              channelValue =\n                isClearable && !channelValue ? channelValue : alphaToOpacity(channelValue);\n            }\n\n            /* the channel container is ltr, so we apply the host's direction */\n            return this.renderChannel(\n              channelValue,\n              index,\n              channelAriaLabels[index],\n              direction,\n              isAlphaChannel ? \"%\" : \"\",\n            );\n          })}\n        </div>\n      </calcite-tab>\n    );\n  };\n\n  private renderChannel = (\n    value: number | null,\n    index: number,\n    ariaLabel: string,\n    direction: Direction,\n    suffix?: string,\n  ): VNode => {\n    return (\n      <calcite-input-number\n        class={CSS.channel}\n        data-channel-index={index}\n        dir={direction}\n        key={index}\n        label={ariaLabel}\n        lang={this.effectiveLocale}\n        numberButtonType=\"none\"\n        numberingSystem={this.numberingSystem}\n        onCalciteInputNumberChange={this.handleChannelChange}\n        onCalciteInputNumberInput={this.handleChannelInput}\n        onCalciteInternalInputNumberBlur={this.handleChannelBlur}\n        onCalciteInternalInputNumberFocus={this.handleChannelFocus}\n        onKeyDown={this.handleKeyDown}\n        scale={this.scale === \"l\" ? \"m\" : \"s\"}\n        // workaround to ensure input borders overlap as desired\n        // this is because the build transforms margin-left to its\n        // logical-prop, which is undesired as channels are always ltr\n        style={{\n          marginLeft:\n            index > 0 && !(this.scale === \"s\" && this.alphaChannel && index === 3) ? \"-1px\" : \"\",\n        }}\n        suffixText={suffix}\n        value={value?.toString()}\n      />\n    );\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n    }\n  }\n\n  private showIncompatibleColorWarning(value: ColorValue, format: Format): void {\n    console.warn(\n      `ignoring color value (${value}) as it is not compatible with the current format (${format})`,\n    );\n  }\n\n  private setMode(format: ColorPicker[\"format\"], warn = true): void {\n    const mode = format === \"auto\" ? this.mode : format;\n    this.mode = this.ensureCompatibleMode(mode, warn);\n  }\n\n  private ensureCompatibleMode(mode: SupportedMode, warn): SupportedMode {\n    const { alphaChannel } = this;\n    const isAlphaCompatible = alphaCompatible(mode);\n\n    if (alphaChannel && !isAlphaCompatible) {\n      const alphaMode = toAlphaMode(mode);\n\n      if (warn) {\n        console.warn(\n          `setting format to (${alphaMode}) as the provided one (${mode}) does not support alpha`,\n        );\n      }\n\n      return alphaMode;\n    }\n\n    if (!alphaChannel && isAlphaCompatible) {\n      const nonAlphaMode = toNonAlphaMode(mode);\n\n      if (warn) {\n        console.warn(\n          `setting format to (${nonAlphaMode}) as the provided one (${mode}) does not support alpha`,\n        );\n      }\n\n      return nonAlphaMode;\n    }\n\n    return mode;\n  }\n\n  private captureHueSliderColor(x: number): void {\n    const hue = (HUE_LIMIT_CONSTRAINED / this.effectiveSliderWidth) * x;\n\n    this.internalColorSet(this.baseColorFieldColor.hue(hue), false);\n  }\n\n  private captureOpacitySliderValue(x: number): void {\n    const alpha = opacityToAlpha((OPACITY_LIMITS.max / this.effectiveSliderWidth) * x);\n\n    this.internalColorSet(this.baseColorFieldColor.alpha(alpha), false);\n  }\n\n  private internalColorSet(\n    color: Color | null,\n    skipEqual = true,\n    context: ColorPicker[\"internalColorUpdateContext\"] = \"user-interaction\",\n  ): void {\n    if (skipEqual && colorEqual(color, this.color)) {\n      return;\n    }\n\n    this.internalColorUpdateContext = context;\n    this.color = color;\n    this.value = this.toValue(color);\n    this.internalColorUpdateContext = null;\n  }\n\n  private toValue(color: Color | null, format: SupportedMode = this.mode): ColorValue | null {\n    if (!color) {\n      return null;\n    }\n\n    const hexMode = \"hex\";\n\n    if (format.includes(hexMode)) {\n      const hasAlpha = format === CSSColorMode.HEXA;\n      return normalizeHex(hexify(color.round(), hasAlpha), hasAlpha);\n    }\n\n    if (format.includes(\"-css\")) {\n      const value = color[format.replace(\"-css\", \"\").replace(\"a\", \"\")]().round().string();\n\n      // Color omits alpha values when alpha is 1\n      const needToInjectAlpha =\n        (format.endsWith(\"a\") || format.endsWith(\"a-css\")) && color.alpha() === 1;\n      if (needToInjectAlpha) {\n        const model = value.slice(0, 3);\n        const values = value.slice(4, -1);\n        return `${model}a(${values}, ${color.alpha()})`;\n      }\n\n      return value;\n    }\n\n    const colorObject =\n      /* Color() does not support hsva, hsla nor rgba, so we use the non-alpha mode */\n      color[toNonAlphaMode(format)]().round().object();\n\n    if (format.endsWith(\"a\")) {\n      return normalizeAlpha(colorObject);\n    }\n\n    return colorObject;\n  }\n\n  private getSliderCapSpacing(): number {\n    const {\n      dimensions: {\n        slider: { height },\n        thumb: { radius },\n      },\n    } = this;\n\n    return radius * 2 - height;\n  }\n\n  private updateDimensions(scale: Scale = \"m\"): void {\n    this.dimensions = DIMENSIONS[scale];\n  }\n\n  private deleteColor = (): void => {\n    const colorToDelete = hexify(this.color, this.alphaChannel);\n    const inStorage = this.savedColors.indexOf(colorToDelete) > -1;\n\n    if (!inStorage) {\n      return;\n    }\n\n    const savedColors = this.savedColors.filter((color) => color !== colorToDelete);\n\n    this.savedColors = savedColors;\n\n    const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;\n\n    if (this.storageId) {\n      localStorage.setItem(storageKey, JSON.stringify(savedColors));\n    }\n  };\n\n  private saveColor = (): void => {\n    const colorToSave = hexify(this.color, this.alphaChannel);\n    const alreadySaved = this.savedColors.indexOf(colorToSave) > -1;\n\n    if (alreadySaved) {\n      return;\n    }\n\n    const savedColors = [...this.savedColors, colorToSave];\n\n    this.savedColors = savedColors;\n\n    const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;\n\n    if (this.storageId) {\n      localStorage.setItem(storageKey, JSON.stringify(savedColors));\n    }\n  };\n\n  private drawColorControls = throttle(\n    (type: \"all\" | \"color-field\" | \"hue-slider\" | \"opacity-slider\" = \"all\"): void => {\n      if ((type === \"all\" || type === \"color-field\") && this.colorFieldRenderingContext) {\n        this.drawColorField();\n      }\n\n      if ((type === \"all\" || type === \"hue-slider\") && this.hueSliderRenderingContext) {\n        this.drawHueSlider();\n      }\n\n      if (\n        this.alphaChannel &&\n        (type === \"all\" || type === \"opacity-slider\") &&\n        this.opacitySliderRenderingContext\n      ) {\n        this.drawOpacitySlider();\n      }\n    },\n    throttleFor60FpsInMs,\n  );\n\n  private drawColorField(): void {\n    const context = this.colorFieldRenderingContext;\n    const {\n      dimensions: {\n        colorField: { height, width },\n      },\n    } = this;\n\n    context.fillStyle = this.baseColorFieldColor\n      .hsv()\n      .saturationv(100)\n      .value(100)\n      .alpha(1)\n      .string();\n    context.fillRect(0, 0, width, height);\n\n    const whiteGradient = context.createLinearGradient(0, 0, width, 0);\n    whiteGradient.addColorStop(0, \"rgba(255,255,255,1)\");\n    whiteGradient.addColorStop(1, \"rgba(255,255,255,0)\");\n    context.fillStyle = whiteGradient;\n    context.fillRect(0, 0, width, height);\n\n    const blackGradient = context.createLinearGradient(0, 0, 0, height);\n    blackGradient.addColorStop(0, \"rgba(0,0,0,0)\");\n    blackGradient.addColorStop(1, \"rgba(0,0,0,1)\");\n    context.fillStyle = blackGradient;\n    context.fillRect(0, 0, width, height);\n\n    this.drawActiveColorFieldColor();\n  }\n\n  private setCanvasContextSize(\n    canvas: HTMLCanvasElement,\n    { height, width }: { height: number; width: number },\n  ): void {\n    if (!canvas) {\n      return;\n    }\n\n    const devicePixelRatio = window.devicePixelRatio || 1;\n\n    canvas.width = width * devicePixelRatio;\n    canvas.height = height * devicePixelRatio;\n    canvas.style.height = `${height}px`;\n    canvas.style.width = `${width}px`;\n\n    const context = canvas.getContext(\"2d\");\n    context.scale(devicePixelRatio, devicePixelRatio);\n  }\n\n  private captureColorFieldColor = (x: number, y: number, skipEqual = true): void => {\n    const {\n      dimensions: {\n        colorField: { height, width },\n      },\n    } = this;\n    const saturation = Math.round((HSV_LIMITS.s / width) * x);\n    const value = Math.round((HSV_LIMITS.v / height) * (height - y));\n\n    this.internalColorSet(\n      this.baseColorFieldColor.hsv().saturationv(saturation).value(value),\n      skipEqual,\n    );\n  };\n\n  private initColorField = (canvas: HTMLCanvasElement): void => {\n    this.colorFieldRenderingContext = canvas.getContext(\"2d\");\n    this.updateCanvasSize(\"color-field\");\n    this.drawColorControls();\n  };\n\n  private initHueSlider = (canvas: HTMLCanvasElement): void => {\n    this.hueSliderRenderingContext = canvas.getContext(\"2d\");\n    this.updateCanvasSize(\"hue-slider\");\n    this.drawHueSlider();\n  };\n\n  private initOpacitySlider = (canvas: HTMLCanvasElement): void => {\n    if (!canvas) {\n      return;\n    }\n\n    this.opacitySliderRenderingContext = canvas.getContext(\"2d\");\n    this.updateCanvasSize(\"opacity-slider\");\n    this.drawOpacitySlider();\n  };\n\n  private updateCanvasSize(\n    context: \"all\" | \"color-field\" | \"hue-slider\" | \"opacity-slider\" = \"all\",\n  ): void {\n    const { dimensions } = this;\n\n    if (context === \"all\" || context === \"color-field\") {\n      this.setCanvasContextSize(this.colorFieldRenderingContext?.canvas, dimensions.colorField);\n    }\n\n    const adjustedSliderDimensions = {\n      width: this.effectiveSliderWidth,\n      height:\n        dimensions.slider.height + (dimensions.thumb.radius - dimensions.slider.height / 2) * 2,\n    };\n\n    if (context === \"all\" || context === \"hue-slider\") {\n      this.setCanvasContextSize(this.hueSliderRenderingContext?.canvas, adjustedSliderDimensions);\n    }\n\n    if (context === \"all\" || context === \"opacity-slider\") {\n      this.setCanvasContextSize(\n        this.opacitySliderRenderingContext?.canvas,\n        adjustedSliderDimensions,\n      );\n    }\n  }\n\n  private drawActiveColorFieldColor(): void {\n    const { color } = this;\n\n    if (!color) {\n      return;\n    }\n\n    const hsvColor = color.hsv();\n\n    const {\n      dimensions: {\n        colorField: { height, width },\n        thumb: { radius },\n      },\n    } = this;\n\n    const x = hsvColor.saturationv() / (HSV_LIMITS.s / width);\n    const y = height - hsvColor.value() / (HSV_LIMITS.v / height);\n\n    requestAnimationFrame(() => {\n      this.colorFieldScopeLeft = x;\n      this.colorFieldScopeTop = y;\n    });\n\n    this.drawThumb(this.colorFieldRenderingContext, radius, x, y, hsvColor, false);\n  }\n\n  private drawThumb(\n    context: CanvasRenderingContext2D,\n    radius: number,\n    x: number,\n    y: number,\n    color: Color,\n    applyAlpha: boolean,\n  ): void {\n    const startAngle = 0;\n    const endAngle = 2 * Math.PI;\n    const outlineWidth = 1;\n\n    context.beginPath();\n    context.arc(x, y, radius, startAngle, endAngle);\n    context.fillStyle = \"#fff\";\n    context.fill();\n\n    context.strokeStyle = \"rgba(0,0,0,0.3)\";\n    context.lineWidth = outlineWidth;\n    context.stroke();\n\n    if (applyAlpha && color.alpha() < 1) {\n      const pattern = context.createPattern(this.getCheckeredBackgroundPattern(), \"repeat\");\n      context.beginPath();\n      context.arc(x, y, radius - 3, startAngle, endAngle);\n      context.fillStyle = pattern;\n      context.fill();\n    }\n\n    context.globalCompositeOperation = \"source-atop\";\n\n    context.beginPath();\n    context.arc(x, y, radius - 3, startAngle, endAngle);\n    const alpha = applyAlpha ? color.alpha() : 1;\n    context.fillStyle = color.rgb().alpha(alpha).string();\n    context.fill();\n\n    context.globalCompositeOperation = \"source-over\";\n  }\n\n  private drawActiveHueSliderColor(): void {\n    const { color } = this;\n\n    if (!color) {\n      return;\n    }\n\n    const hsvColor = color.hsv().saturationv(100).value(100);\n\n    const {\n      dimensions: {\n        thumb: { radius },\n      },\n    } = this;\n\n    const width = this.effectiveSliderWidth;\n    const x = hsvColor.hue() / (HUE_LIMIT_CONSTRAINED / width);\n    const y = radius;\n    const sliderBoundX = this.getSliderBoundX(x, width, radius);\n\n    requestAnimationFrame(() => {\n      this.hueScopeLeft = sliderBoundX;\n    });\n\n    this.drawThumb(this.hueSliderRenderingContext, radius, sliderBoundX, y, hsvColor, false);\n  }\n\n  private drawHueSlider(): void {\n    const context = this.hueSliderRenderingContext;\n    const {\n      dimensions: {\n        slider: { height },\n        thumb: { radius: thumbRadius },\n      },\n    } = this;\n\n    const x = 0;\n    const y = thumbRadius - height / 2;\n    const width = this.effectiveSliderWidth;\n\n    const gradient = context.createLinearGradient(0, 0, width, 0);\n\n    const hueSliderColorStopKeywords = [\n      \"red\",\n      \"yellow\",\n      \"lime\",\n      \"cyan\",\n      \"blue\",\n      \"magenta\",\n      \"#ff0004\" /* 1 unit less than #ff0 to avoid duplicate values within range */,\n    ];\n\n    const offset = 1 / (hueSliderColorStopKeywords.length - 1);\n    let currentOffset = 0;\n\n    hueSliderColorStopKeywords.forEach((keyword) => {\n      gradient.addColorStop(currentOffset, Color(keyword).string());\n      currentOffset += offset;\n    });\n\n    context.clearRect(0, 0, width, height + this.getSliderCapSpacing() * 2);\n\n    this.drawSliderPath(context, height, width, x, y);\n\n    context.fillStyle = gradient;\n    context.fill();\n\n    context.strokeStyle = \"rgba(0,0,0,0.3)\";\n    context.lineWidth = 1;\n    context.stroke();\n\n    this.drawActiveHueSliderColor();\n  }\n\n  private drawOpacitySlider(): void {\n    const context = this.opacitySliderRenderingContext;\n    const {\n      baseColorFieldColor: previousColor,\n      dimensions: {\n        slider: { height },\n        thumb: { radius: thumbRadius },\n      },\n    } = this;\n\n    const x = 0;\n    const y = thumbRadius - height / 2;\n    const width = this.effectiveSliderWidth;\n\n    context.clearRect(0, 0, width, height + this.getSliderCapSpacing() * 2);\n\n    const gradient = context.createLinearGradient(0, y, width, 0);\n    const startColor = previousColor.rgb().alpha(0);\n    const midColor = previousColor.rgb().alpha(0.5);\n    const endColor = previousColor.rgb().alpha(1);\n\n    gradient.addColorStop(0, startColor.string());\n    gradient.addColorStop(0.5, midColor.string());\n    gradient.addColorStop(1, endColor.string());\n\n    this.drawSliderPath(context, height, width, x, y);\n\n    const pattern = context.createPattern(this.getCheckeredBackgroundPattern(), \"repeat\");\n    context.fillStyle = pattern;\n    context.fill();\n\n    context.fillStyle = gradient;\n    context.fill();\n\n    context.strokeStyle = \"rgba(0,0,0,0.3)\";\n    context.lineWidth = 1;\n    context.stroke();\n\n    this.drawActiveOpacitySliderColor();\n  }\n\n  private drawSliderPath(\n    context: CanvasRenderingContext2D,\n    height: number,\n    width: number,\n    x: number,\n    y: number,\n  ): void {\n    const radius = height / 2 + 1;\n    context.beginPath();\n    context.moveTo(x + radius, y);\n    context.lineTo(x + width - radius, y);\n    context.quadraticCurveTo(x + width, y, x + width, y + radius);\n    context.lineTo(x + width, y + height - radius);\n    context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);\n    context.lineTo(x + radius, y + height);\n    context.quadraticCurveTo(x, y + height, x, y + height - radius);\n    context.lineTo(x, y + radius);\n    context.quadraticCurveTo(x, y, x + radius, y);\n    context.closePath();\n  }\n\n  private getCheckeredBackgroundPattern(): HTMLCanvasElement {\n    if (this.checkerPattern) {\n      return this.checkerPattern;\n    }\n\n    const pattern = document.createElement(\"canvas\");\n    pattern.width = 10;\n    pattern.height = 10;\n    const patternContext = pattern.getContext(\"2d\");\n\n    patternContext.fillStyle = \"#ccc\";\n    patternContext.fillRect(0, 0, 10, 10);\n    patternContext.fillStyle = \"#fff\";\n    patternContext.fillRect(0, 0, 5, 5);\n    patternContext.fillRect(5, 5, 5, 5);\n\n    this.checkerPattern = pattern;\n\n    return pattern;\n  }\n\n  private drawActiveOpacitySliderColor(): void {\n    const { color } = this;\n\n    if (!color) {\n      return;\n    }\n\n    const hsvColor = color;\n\n    const {\n      dimensions: {\n        thumb: { radius },\n      },\n    } = this;\n\n    const width = this.effectiveSliderWidth;\n    const x = alphaToOpacity(hsvColor.alpha()) / (OPACITY_LIMITS.max / width);\n    const y = radius;\n    const sliderBoundX = this.getSliderBoundX(x, width, radius);\n\n    requestAnimationFrame(() => {\n      this.opacityScopeLeft = sliderBoundX;\n    });\n\n    this.drawThumb(this.opacitySliderRenderingContext, radius, sliderBoundX, y, hsvColor, true);\n  }\n\n  private getSliderBoundX(x: number, width: number, radius: number): number {\n    const closeToEdge = closeToRangeEdge(x, width, radius);\n\n    return closeToEdge === 0\n      ? x\n      : closeToEdge === -1\n        ? remap(x, 0, width, radius, radius * 2)\n        : remap(x, 0, width, width - radius * 2, width - radius);\n  }\n\n  private storeOpacityScope = (node: HTMLDivElement): void => {\n    this.opacityScopeNode = node;\n  };\n\n  private handleOpacityScopeKeyDown = (event: KeyboardEvent): void => {\n    const modifier = event.shiftKey ? 10 : 1;\n    const { key } = event;\n    const arrowKeyToXOffset = {\n      ArrowUp: 0.01,\n      ArrowRight: 0.01,\n      ArrowDown: -0.01,\n      ArrowLeft: -0.01,\n    };\n\n    if (arrowKeyToXOffset[key]) {\n      event.preventDefault();\n      const delta = arrowKeyToXOffset[key] * modifier;\n      const alpha = this.baseColorFieldColor.alpha();\n      const color = this.baseColorFieldColor.alpha(alpha + delta);\n      this.internalColorSet(color, false);\n    }\n  };\n\n  private updateColorFromChannels(channels: this[\"channels\"]): void {\n    this.internalColorSet(Color(channels, this.channelMode));\n  }\n\n  private updateChannelsFromColor(color: Color | null): void {\n    this.channels = color ? this.toChannels(color) : [null, null, null, null];\n  }\n\n  private toChannels(color: Color): Channels {\n    const { channelMode } = this;\n\n    const channels = color[channelMode]()\n      .array()\n      .map((value, index) => {\n        const isAlpha = index === 3;\n        return isAlpha ? value : Math.floor(value);\n      });\n\n    if (channels.length === 3) {\n      channels.push(1); // Color omits alpha when 1\n    }\n\n    return channels as Channels;\n  }\n\n  private getAdjustedScopePosition(left: number, top: number): [number, number] {\n    return [left - SCOPE_SIZE / 2, top - SCOPE_SIZE / 2];\n  }\n}\n","export const CSS = {\n  container: \"container\",\n  hexInput: \"hex-input\",\n  opacityInput: \"opacity-input\",\n};\n",":host {\n  @apply block;\n}\n\n.container {\n  @apply flex w-full items-center flex-nowrap;\n}\n\n.hex-input {\n  @apply grow uppercase;\n}\n\n.opacity-input {\n  inline-size: 68px;\n  margin-inline-start: -1px;\n}\n\n:host([scale=\"s\"]) {\n  .container {\n    @apply flex-wrap gap-y-0.5;\n  }\n\n  .opacity-input {\n    inline-size: unset;\n    margin-inline-start: unset;\n  }\n}\n\n:host([scale=\"l\"]) {\n  .opacity-input {\n    inline-size: 88px;\n  }\n}\n\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 Color from \"color\";\nimport { Scale } from \"../interfaces\";\nimport { Channels, RGB } from \"../color-picker/interfaces\";\nimport {\n  alphaToOpacity,\n  hexChar,\n  hexify,\n  isLonghandHex,\n  isShorthandHex,\n  isValidHex,\n  normalizeHex,\n  opacityToAlpha,\n  rgbToHex,\n} from \"../color-picker/utils\";\nimport { focusElement } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { NumberingSystem } from \"../../utils/locale\";\nimport { OPACITY_LIMITS } from \"../color-picker/resources\";\nimport { ColorPickerMessages } from \"../color-picker/assets/color-picker/t9n\";\nimport { CSS } from \"./resources\";\n\nconst DEFAULT_COLOR = Color();\n\n@Component({\n  tag: \"calcite-color-picker-hex-input\",\n  styleUrl: \"color-picker-hex-input.scss\",\n  shadow: true,\n})\nexport class ColorPickerHexInput implements LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    const { allowEmpty, alphaChannel, value } = this;\n\n    if (value) {\n      const normalized = normalizeHex(value, alphaChannel);\n\n      if (isValidHex(normalized, alphaChannel)) {\n        this.internalSetValue(normalized, normalized, false);\n      }\n\n      return;\n    }\n\n    if (allowEmpty) {\n      this.internalSetValue(null, null, false);\n    }\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, an empty color (`null`) will be allowed as a `value`.\n   *\n   * When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.\n   */\n  @Prop() allowEmpty = false;\n\n  /**\n   * When `true`, the component will allow updates to the color's alpha value.\n   */\n  @Prop() alphaChannel = false;\n\n  /**\n   * Specifies accessible label for the input field.\n   *\n   * @deprecated use `messages` instead\n   */\n  @Prop() hexLabel = \"Hex\";\n\n  /**\n   * Messages are passed by parent component for accessible labels.\n   *\n   * @internal\n   */\n  @Prop() messages: ColorPickerMessages;\n\n  /** Specifies the Unicode numeral system used by the component for localization. */\n  @Prop() numberingSystem?: NumberingSystem;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * The hex value.\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = normalizeHex(\n    hexify(DEFAULT_COLOR, this.alphaChannel),\n    this.alphaChannel,\n    true,\n  );\n\n  @Watch(\"value\")\n  handleValueChange(value: string, oldValue: string): void {\n    this.internalSetValue(value, oldValue, false);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emitted when the hex value changes.\n   */\n  @Event({ cancelable: false }) calciteColorPickerHexInputChange: EventEmitter<void>;\n\n  private onHexInputBlur = (): void => {\n    const node = this.hexInputNode;\n    const inputValue = node.value;\n    const hex = `#${inputValue}`;\n    const { allowEmpty, internalColor } = this;\n    const willClearValue = allowEmpty && !inputValue;\n    const isLonghand = isLonghandHex(hex);\n\n    if (isShorthandHex(hex, this.alphaChannel)) {\n      // ensure modified pasted hex values are committed since we prevent default to remove the # char.\n      this.onHexInputChange();\n    }\n\n    if (willClearValue || (isValidHex(hex) && isLonghand)) {\n      return;\n    }\n\n    // manipulating DOM directly since rerender doesn't update input value\n    node.value =\n      allowEmpty && !internalColor\n        ? \"\"\n        : this.formatHexForInternalInput(\n            rgbToHex(\n              // always display hex input in RRGGBB format\n              internalColor.object() as any as RGB,\n            ),\n          );\n  };\n\n  private onOpacityInputBlur = (): void => {\n    const node = this.opacityInputNode;\n    const inputValue = node.value;\n    const { allowEmpty, internalColor } = this;\n    const willClearValue = allowEmpty && !inputValue;\n\n    if (willClearValue) {\n      return;\n    }\n\n    // manipulating DOM directly since rerender doesn't update input value\n    node.value =\n      allowEmpty && !internalColor ? \"\" : this.formatOpacityForInternalInput(internalColor);\n  };\n\n  private onOpacityInputInput = (): void => {\n    this.onOpacityInputChange();\n  };\n\n  private onHexInputChange = (): void => {\n    const nodeValue = this.hexInputNode.value;\n    let value = nodeValue;\n\n    if (value) {\n      const normalized = normalizeHex(value, false);\n      const preserveExistingAlpha = isValidHex(normalized) && this.alphaChannel;\n      if (preserveExistingAlpha && this.internalColor) {\n        const alphaHex = normalizeHex(this.internalColor.hexa(), true).slice(-2);\n        value = `${normalized + alphaHex}`;\n      }\n    }\n\n    this.internalSetValue(value, this.value);\n  };\n\n  private onOpacityInputChange = (): void => {\n    const node = this.opacityInputNode;\n    let value: number | string;\n\n    if (!node.value) {\n      value = node.value;\n    } else {\n      const alpha = opacityToAlpha(Number(node.value));\n      value = this.internalColor?.alpha(alpha).hexa();\n    }\n\n    this.internalSetValue(value, this.value);\n  };\n\n  private onInputFocus = (event: Event): void => {\n    event.type === \"calciteInternalInputTextFocus\"\n      ? this.hexInputNode.selectText()\n      : this.opacityInputNode.selectText();\n  };\n\n  private onHexInputInput = (): void => {\n    const hexInputValue = `#${this.hexInputNode.value}`;\n    const oldValue = this.value;\n\n    if (\n      isValidHex(hexInputValue, this.alphaChannel) &&\n      isLonghandHex(hexInputValue, this.alphaChannel)\n    ) {\n      this.internalSetValue(hexInputValue, oldValue);\n    }\n  };\n\n  protected onInputKeyDown = (event: KeyboardEvent): void => {\n    const { altKey, ctrlKey, metaKey, shiftKey } = event;\n    const { alphaChannel, hexInputNode, internalColor, value } = this;\n    const { key } = event;\n    const composedPath = event.composedPath();\n\n    if ((key === \"Tab\" && isShorthandHex(value, this.alphaChannel)) || key === \"Enter\") {\n      if (composedPath.includes(hexInputNode)) {\n        this.onHexInputChange();\n      } else {\n        this.onOpacityInputChange();\n      }\n\n      if (key === \"Enter\") {\n        event.preventDefault();\n      }\n\n      return;\n    }\n\n    const isNudgeKey = key === \"ArrowDown\" || key === \"ArrowUp\";\n    const oldValue = this.value;\n\n    if (isNudgeKey) {\n      if (!value) {\n        this.internalSetValue(this.previousNonNullValue, oldValue);\n        event.preventDefault();\n        return;\n      }\n\n      const direction = key === \"ArrowUp\" ? 1 : -1;\n      const bump = shiftKey ? 10 : 1;\n\n      this.internalSetValue(\n        hexify(\n          this.nudgeRGBChannels(\n            internalColor,\n            bump * direction,\n            composedPath.includes(hexInputNode) ? \"rgb\" : \"a\",\n          ),\n          alphaChannel,\n        ),\n        oldValue,\n      );\n\n      event.preventDefault();\n      return;\n    }\n\n    const withModifiers = altKey || ctrlKey || metaKey;\n    const singleChar = key.length === 1;\n    const validHexChar = hexChar.test(key);\n\n    if (singleChar && !withModifiers && !validHexChar) {\n      event.preventDefault();\n    }\n  };\n\n  private onHexInputPaste = (event: ClipboardEvent): void => {\n    const hex = event.clipboardData.getData(\"text\");\n\n    if (isValidHex(hex, this.alphaChannel) && isLonghandHex(hex, this.alphaChannel)) {\n      event.preventDefault();\n      this.hexInputNode.value = hex.slice(1);\n      this.internalSetValue(hex, this.value);\n    }\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteColorPickerHexInputElement;\n\n  private hexInputNode: HTMLCalciteInputTextElement;\n\n  /**\n   * The last valid/selected color. Used as a fallback if an invalid hex code is entered.\n   */\n  @State() internalColor: Color | null = DEFAULT_COLOR;\n\n  private opacityInputNode: HTMLCalciteInputNumberElement;\n\n  private previousNonNullValue: string = this.value;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const { alphaChannel, hexLabel, internalColor, messages, scale, value } = this;\n    const hexInputValue = this.formatHexForInternalInput(value);\n    const opacityInputValue = this.formatOpacityForInternalInput(internalColor);\n    const inputScale = scale === \"l\" ? \"m\" : \"s\";\n\n    return (\n      <div class={CSS.container}>\n        <calcite-input-text\n          class={CSS.hexInput}\n          label={messages?.hex || hexLabel}\n          maxLength={this.alphaChannel ? 8 : 6}\n          onCalciteInputTextChange={this.onHexInputChange}\n          onCalciteInputTextInput={this.onHexInputInput}\n          onCalciteInternalInputTextBlur={this.onHexInputBlur}\n          onCalciteInternalInputTextFocus={this.onInputFocus}\n          onKeyDown={this.onInputKeyDown}\n          onPaste={this.onHexInputPaste}\n          prefixText=\"#\"\n          ref={this.storeHexInputRef}\n          scale={inputScale}\n          value={hexInputValue}\n        />\n        {alphaChannel ? (\n          <calcite-input-number\n            class={CSS.opacityInput}\n            key=\"opacity-input\"\n            label={messages?.opacity}\n            max={OPACITY_LIMITS.max}\n            maxLength={3}\n            min={OPACITY_LIMITS.min}\n            numberButtonType=\"none\"\n            numberingSystem={this.numberingSystem}\n            onCalciteInputNumberInput={this.onOpacityInputInput}\n            onCalciteInternalInputNumberBlur={this.onOpacityInputBlur}\n            onCalciteInternalInputNumberFocus={this.onInputFocus}\n            onKeyDown={this.onInputKeyDown}\n            ref={this.storeOpacityInputRef}\n            scale={inputScale}\n            suffixText=\"%\"\n            value={opacityInputValue}\n          />\n        ) : null}\n      </div>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    return focusElement(this.hexInputNode);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private internalSetValue(value: string | null, oldValue: string | null, emit = true): void {\n    if (value) {\n      const { alphaChannel } = this;\n      const normalized = normalizeHex(value, alphaChannel, alphaChannel);\n\n      if (isValidHex(normalized, alphaChannel)) {\n        const { internalColor: currentColor } = this;\n        const nextColor = Color(normalized);\n        const normalizedLonghand = normalizeHex(hexify(nextColor, alphaChannel), alphaChannel);\n\n        const changed =\n          !currentColor ||\n          normalizedLonghand !== normalizeHex(hexify(currentColor, alphaChannel), alphaChannel);\n\n        this.internalColor = nextColor;\n        this.previousNonNullValue = normalizedLonghand;\n        this.value = normalizedLonghand;\n\n        if (changed && emit) {\n          this.calciteColorPickerHexInputChange.emit();\n        }\n\n        return;\n      }\n    } else if (this.allowEmpty) {\n      this.internalColor = null;\n      this.value = null;\n\n      if (emit) {\n        this.calciteColorPickerHexInputChange.emit();\n      }\n\n      return;\n    }\n\n    this.value = oldValue;\n  }\n\n  private storeHexInputRef = (node: HTMLCalciteInputTextElement): void => {\n    this.hexInputNode = node;\n  };\n\n  private storeOpacityInputRef = (node: HTMLCalciteInputNumberElement): void => {\n    this.opacityInputNode = node;\n  };\n\n  private formatHexForInternalInput(hex: string): string {\n    return hex ? hex.replace(\"#\", \"\").slice(0, 6) : \"\";\n  }\n\n  private formatOpacityForInternalInput(color: Color): string {\n    return color ? `${alphaToOpacity(color.alpha())}` : \"\";\n  }\n\n  private nudgeRGBChannels(color: Color, amount: number, context: \"rgb\" | \"a\"): Color {\n    let nudgedChannels: Channels;\n    const channels = color.array();\n    const rgbChannels = channels.slice(0, 3);\n\n    if (context === \"rgb\") {\n      const nudgedRGBChannels = rgbChannels.map((channel) => channel + amount);\n      nudgedChannels = [\n        ...nudgedRGBChannels,\n        this.alphaChannel ? channels[3] : undefined,\n      ] as Channels;\n    } else {\n      const nudgedAlpha = opacityToAlpha(alphaToOpacity(color.alpha()) + amount);\n      nudgedChannels = [...rgbChannels, nudgedAlpha] as Channels;\n    }\n\n    return Color(nudgedChannels);\n  }\n}\n","export const CSS = {\n  swatch: \"swatch\",\n  noColorSwatch: \"swatch--no-color\",\n  checker: \"checker\",\n};\n\nexport const COLORS = {\n  borderLight: \"rgba(0, 0, 0, 0.3)\",\n  borderDark: \"rgba(255, 255, 255, 0.15)\",\n};\n\nconst checkerSquareSize = 4;\n\nexport const CHECKER_DIMENSIONS = {\n  squareSize: checkerSquareSize,\n  size: checkerSquareSize * 2,\n};\n","$size-s: 20px;\n$size-m: 24px;\n$size-l: 28px;\n\n:host {\n  @apply relative inline-flex;\n}\n\n:host([scale=\"s\"]) {\n  @apply h-5 w-5;\n}\n\n:host([scale=\"m\"]) {\n  @apply h-6 w-6;\n}\n\n:host([scale=\"l\"]) {\n  @apply h-8 w-8;\n}\n\n.swatch {\n  @apply overflow-hidden;\n  block-size: inherit;\n  inline-size: inherit;\n\n  rect {\n    @apply transition-all duration-150 ease-in-out;\n  }\n}\n\n.swatch--no-color {\n  rect {\n    fill: var(--calcite-color-foreground-1);\n  }\n\n  line {\n    stroke: var(--calcite-color-status-danger);\n  }\n}\n\n.checker {\n  fill: #cacaca;\n}\n\n@include base-component();\n","import { Component, Element, Fragment, h, Prop, VNode, Watch } from \"@stencil/core\";\nimport Color from \"color\";\nimport { getModeName } from \"../../utils/dom\";\nimport { Scale } from \"../interfaces\";\nimport { hexify } from \"../color-picker/utils\";\nimport { CHECKER_DIMENSIONS, COLORS, CSS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-color-picker-swatch\",\n  styleUrl: \"color-picker-swatch.scss\",\n  shadow: true,\n})\nexport class ColorPickerSwatch {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is active.\n   */\n  @Prop({\n    reflect: true,\n  })\n  active = false;\n\n  /**\n   * The color value.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\n   */\n  @Prop()\n  color: string | null;\n\n  @Watch(\"color\")\n  handleColorChange(color: string | null): void {\n    this.internalColor = color ? Color(color) : null;\n  }\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({\n    reflect: true,\n  })\n  scale: Scale = \"m\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteColorPickerSwatchElement;\n\n  private internalColor: Color;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentWillLoad(): void {\n    this.handleColorChange(this.color);\n  }\n\n  render(): VNode {\n    const isEmpty = !this.internalColor;\n    const classes = {\n      [CSS.swatch]: true,\n      [CSS.noColorSwatch]: isEmpty,\n    };\n\n    return (\n      <svg class={classes} xmlns=\"http://www.w3.org/2000/svg\">\n        {this.renderSwatch()}\n      </svg>\n    );\n  }\n\n  renderSwatch(): VNode {\n    const { active, el, internalColor } = this;\n    const borderRadius = active ? \"100%\" : \"0\";\n    const theme = getModeName(el);\n    const borderColor = theme === \"light\" ? COLORS.borderLight : COLORS.borderDark;\n    const commonSwatchProps = {\n      height: \"100%\",\n      rx: borderRadius,\n      stroke: borderColor,\n\n      // stroke-width and clip-path are needed to hide overflowing portion of stroke\n      // see https://stackoverflow.com/a/7273346/194216\n\n      // using attribute to work around Stencil using the prop name vs the attribute when rendering\n      [\"stroke-width\"]: \"2\",\n      width: \"100%\",\n    };\n\n    const isEmpty = !internalColor;\n\n    if (isEmpty) {\n      return (\n        <Fragment>\n          <clipPath id=\"shape\">\n            <rect height=\"100%\" rx={borderRadius} width=\"100%\" />\n          </clipPath>\n          <rect\n            clip-path={`inset(0 round ${borderRadius})`}\n            rx={borderRadius}\n            {...commonSwatchProps}\n          />\n          <line clip-path=\"url(#shape)\" stroke-width=\"3\" x1=\"100%\" x2=\"0\" y1=\"0\" y2=\"100%\" />\n        </Fragment>\n      );\n    }\n\n    const alpha = internalColor.alpha();\n    const hex = hexify(internalColor);\n    const hexa = hexify(internalColor, alpha < 1);\n\n    return (\n      <Fragment>\n        <title>{hexa}</title>\n        <defs>\n          <pattern\n            height={CHECKER_DIMENSIONS.size}\n            id=\"checker\"\n            patternUnits=\"userSpaceOnUse\"\n            width={CHECKER_DIMENSIONS.size}\n            x=\"0\"\n            y=\"0\"\n          >\n            <rect\n              class={CSS.checker}\n              height={CHECKER_DIMENSIONS.squareSize}\n              width={CHECKER_DIMENSIONS.squareSize}\n              x=\"0\"\n              y=\"0\"\n            />\n            <rect\n              class={CSS.checker}\n              height={CHECKER_DIMENSIONS.squareSize}\n              width={CHECKER_DIMENSIONS.squareSize}\n              x={CHECKER_DIMENSIONS.squareSize}\n              y={CHECKER_DIMENSIONS.squareSize}\n            />\n          </pattern>\n        </defs>\n        <rect fill=\"url(#checker)\" height=\"100%\" rx={borderRadius} width=\"100%\" />\n        <rect\n          fill={hex}\n          style={{\n            \"clip-path\":\n              alpha < 1 ? \"polygon(100% 0, 0 0, 0 100%)\" : `inset(0 round ${borderRadius})`,\n          }}\n          {...commonSwatchProps}\n        />\n        {alpha < 1 ? (\n          <rect\n            fill={hexa}\n            key=\"opacity-fill\"\n            style={{ \"clip-path\": \"polygon(100% 0, 100% 100%, 0 100%)\" }}\n            {...commonSwatchProps}\n          />\n        ) : null}\n      </Fragment>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/calcite/p-6de921a8.entry.js

@@ -1,7 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
- */
-import{r as t,h as e,H as i,g as o,c as n,e as s,F as a}from"./p-e7104b8d.js";import{C as c,s as r,k as l,g as d,D as h,t as b,H as f}from"./p-27ab49c7.js";import{g as u}from"./p-6f580f9d.js";import{a as p,b as v,d as g}from"./p-76bb7115.js";import{c as m}from"./p-9a2f96d2.js";import{c as k,d as x}from"./p-29c291d1.js";import{c as y,s as w,d as T,u as z}from"./p-c60c7e01.js";import{C}from"./p-56bab01f.js";import{c as I,d as S,I as H,u as A}from"./p-8f8cbbc7.js";import{g as L}from"./p-cbed8c79.js";import{i as j}from"./p-3c4fe54e.js";import"./p-c473b37c.js";const B={container:"container",content:"content"};const W=":host([selected]) section,:host([selected]) .container{display:block}:host{display:none;block-size:100%;inline-size:100%}:host([selected]){display:block;block-size:100%;inline-size:100%;overflow:auto}.content{box-sizing:border-box;padding-block:var(--calcite-internal-tab-content-block-padding)}.scale-s{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.25rem);font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.5rem);font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.625rem);font-size:var(--calcite-font-size-0);line-height:1.25rem}section,.container{display:none;block-size:100%;inline-size:100%}.container{outline-color:transparent}.container:focus{outline:2px solid var(--calcite-ui-focus-color, 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          )}:host([hidden]){display:none}[hidden]{display:none}";const F=W;const E=class{constructor(e){t(this,e);this.guid=`calcite-tab-title-${u()}`;this.tab=undefined;this.selected=false;this.scale="m";this.labeledBy=undefined}render(){const t=this.el.id||this.guid;return e(i,{key:"781e0b82d69d7ea6b2bd6e15ed0d1c5248f24d05","aria-labelledby":this.labeledBy,id:t},e("div",{key:"58a6be23b29e8bee598ecf0cd97ef0578fd4e197",class:{[B.container]:true,[`scale-${this.scale}`]:true},role:"tabpanel",tabIndex:this.selected?0:-1},e("section",{key:"fbff1dec6ca2494f2485528679c14b4b0741abd8",class:B.content},e("slot",{key:"fc52db6fd58bd87f137e887837df5c08772809a3"}))))}connectedCallback(){this.parentTabsEl=this.el.closest("calcite-tabs")}disconnectedCallback(){document.body?.dispatchEvent(new CustomEvent("calciteTabUnregister",{detail:this.el}))}internalTabChangeHandler(t){const e=t.composedPath().find((t=>t.tagName==="CALCITE-TABS"));if(e!==this.parentTabsEl){return}if(this.tab){this.selected=this.tab===t.detail.tab}else{this.getTabIndex().then((e=>{this.selected=e===t.detail.tab}))}t.stopPropagation()}async getTabIndex(){return Array.prototype.indexOf.call(c(this.el.parentElement.children).filter((t=>t.matches("calcite-tab"))),this.el)}async updateAriaInfo(t=[],e=[]){this.labeledBy=e[t.indexOf(this.el.id)]||null}get el(){return o(this)}};E.style=F;const O={chevronRight:"chevron-right",chevronLeft:"chevron-left"};const R={container:"tab-nav",containerHasEndTabTitleOverflow:"tab-nav--end-overflow",containerHasStartTabTitleOverflow:"tab-nav--start-overflow",scrollButton:"scroll-button",scrollButtonContainer:"scroll-button-container",scrollBackwardContainerButton:"scroll-button-container--backward",scrollForwardContainerButton:"scroll-button-container--forward",tabTitleSlotWrapper:"tab-titles-slot-wrapper"};const D=':host{--calcite-internal-tab-nav-gradient-start-side:left;--calcite-internal-tab-nav-gradient-end-side:right;position:relative;display:flex}.scale-s{--calcite-internal-tab-nav-scroller-button-width:24px;min-block-size:1.5rem}.scale-m{--calcite-internal-tab-nav-scroller-button-width:32px;min-block-size:2rem}.scale-l{--calcite-internal-tab-nav-scroller-button-width:44px;min-block-size:2.75rem}.calcite--rtl{--calcite-internal-tab-nav-gradient-start-side:right;--calcite-internal-tab-nav-gradient-end-side:left}.tab-nav--start-overflow .tab-titles-slot-wrapper{mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%)}.tab-nav--end-overflow .tab-titles-slot-wrapper{mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%)}.tab-nav--start-overflow.tab-nav--end-overflow .tab-titles-slot-wrapper{mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%), linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%)}.tab-nav::-webkit-scrollbar{display:none;-ms-overflow-style:none;scrollbar-width:none}:host([layout=center]) ::slotted(calcite-tab-title){display:flex;flex-grow:1;flex-shrink:0;min-inline-size:auto;white-space:nowrap}:host([layout=center]) ::slotted(calcite-tab-title[selected]){overflow:unset}:host(:not([bordered])) .scale-l{--calcite-internal-tab-nav-gap:var(--calcite-size-xxl)}:host(:not([bordered])) .scale-m{--calcite-internal-tab-nav-gap:var(--calcite-size-xl)}:host(:not([bordered])) .scale-s{--calcite-internal-tab-nav-gap:var(--calcite-size-lg)}:host(:not([bordered])) .tab-titles-slot-wrapper{gap:var(--calcite-internal-tab-nav-gap)}:host([layout=center]:not([bordered])) .tab-titles-slot-wrapper{padding-inline:var(--calcite-spacing-xxl)}.tab-nav,.tab-titles-slot-wrapper{display:flex;inline-size:100%;justify-content:flex-start;overflow:hidden;white-space:nowrap}.scroll-button-container{position:absolute;inset-block:0px}.scroll-button-container calcite-button{--calcite-offset-invert-focus:1;--calcite-color-text-1:var(--calcite-color-text-3);block-size:100%}.scroll-button-container calcite-button:hover{--calcite-color-text-1:unset;--calcite-color-foreground-1:var(--calcite-color-transparent-hover);--calcite-color-foreground-3:var(--calcite-color-transparent)}.scroll-button-container--forward{inset-inline-end:0;z-index:var(--calcite-z-index)}.scroll-button-container--backward{inset-inline-start:0;z-index:var(--calcite-z-index)}:host(:not([bordered])) .scroll-button-container--backward::before,:host(:not([bordered])) .scroll-button-container--forward::before{background-color:var(--calcite-color-border-3);content:"";inline-size:var(--calcite-border-width-sm);inset-block-start:var(--calcite-border-width-md);inset-block-end:var(--calcite-border-width-md);position:absolute}:host(:not([bordered])) .scroll-button-container--backward::before{inset-inline-end:0}:host(:not([bordered])) .scroll-button-container--forward::before{inset-inline-start:0}:host([hidden]){display:none}[hidden]{display:none}';const P=D;const $=class{constructor(i){t(this,i);this.calciteTabChange=n(this,"calciteTabChange",6);this.calciteInternalTabNavSlotChange=n(this,"calciteInternalTabNavSlotChange",7);this.calciteInternalTabChange=n(this,"calciteInternalTabChange",6);this.effectiveDir="ltr";this.lastScrollWheelAxis="x";this.resizeObserver=m("resize",(()=>{this.updateScrollingState()}));this.onTabTitleWheel=t=>{t.preventDefault();const{deltaX:e,deltaY:i}=t;const o=Math.abs(e);const n=Math.abs(i);let s;if(o===n){s=this.lastScrollWheelAxis==="x"?e:i}else if(o>n){s=e;this.lastScrollWheelAxis="x"}else{s=i;this.lastScrollWheelAxis="y"}const a=(this.effectiveDir==="rtl"?-1:1)*s;t.currentTarget.scrollBy(a,0)};this.onSlotChange=t=>{this.intersectionObserver?.disconnect();const e=r(t,"calcite-tab-title");e.forEach((t=>{this.intersectionObserver?.observe(t)}));this.calciteInternalTabNavSlotChange.emit(e)};this.storeTabTitleWrapperRef=t=>{this.tabTitleContainerEl=t;this.intersectionObserver=m("intersection",(()=>this.updateScrollingState()),{root:t,threshold:[0,.5,1]})};this.scrollToTabTitles=t=>{s((()=>{const e=this.tabTitleContainerEl;const i=e.getBoundingClientRect();const o=Array.from(this.el.querySelectorAll("calcite-tab-title"));const{effectiveDir:n}=this;if(t==="forward"){o.reverse()}let s=null;o.forEach((e=>{const o=e.getBoundingClientRect();const a=i.x+i.width;const c=o.x+o.width;if(t==="forward"&&n==="ltr"||t==="backward"&&n==="rtl"){const t=o.x>a;if(t){s=e}else{const t=c>a&&o.x>i.x;if(t){s=e}}}else{const t=c<i.x;if(t){s=e}else{const t=c<a&&o.x<i.x;if(t){s=e}}}}));if(s){const{scrollerButtonWidth:i}=this;const o=t==="forward"&&n==="ltr"||t==="backward"&&n==="rtl"?-i:s.offsetWidth-e.clientWidth+i;const a=s.offsetLeft+o;e.scrollTo({left:a,behavior:"smooth"})}}))};this.scrollToNextTabTitles=()=>this.scrollToTabTitles("forward");this.scrollToPreviousTabTitles=()=>this.scrollToTabTitles("backward");this.handleTabFocus=(t,e,i)=>{const o=l(this.enabledTabTitles,e,i);this.scrollTabTitleIntoView(o,"instant");t.stopPropagation()};this.onTabTitleScroll=()=>{this.updateScrollingState()};this.renderScrollButton=t=>{const{bordered:i,messages:o,hasOverflowingStartTabTitle:n,hasOverflowingEndTabTitle:s,scale:a}=this;const c=t==="end";return e("div",{class:{[R.scrollButtonContainer]:true,[R.scrollBackwardContainerButton]:!c,[R.scrollForwardContainerButton]:c},hidden:c&&!s||!c&&!n,key:t},e("calcite-button",{appearance:i?"outline-fill":"transparent","aria-label":c?o.nextTabTitles:o.previousTabTitles,class:{[R.scrollButton]:true},iconFlipRtl:"both",iconStart:c?O.chevronRight:O.chevronLeft,kind:"neutral",onClick:c?this.scrollToNextTabTitles:this.scrollToPreviousTabTitles,scale:a,tabIndex:-1}))};this.storageId=undefined;this.syncId=undefined;this.selectedTitle=null;this.scale="m";this.layout="inline";this.position="bottom";this.bordered=false;this.messages=undefined;this.messageOverrides=undefined;this.defaultMessages=undefined;this.effectiveLocale="";this.hasOverflowingStartTabTitle=false;this.hasOverflowingEndTabTitle=false;this.selectedTabId=undefined}selectedTitleChanged(){this.calciteInternalTabChange.emit({tab:this.selectedTabId})}onMessagesChange(){}connectedCallback(){this.parentTabsEl=this.el.closest("calcite-tabs");this.resizeObserver?.observe(this.el);k(this);y(this)}async componentWillLoad(){const t=`calcite-tab-nav-${this.storageId}`;if(localStorage&&this.storageId&&localStorage.getItem(t)){const e=JSON.parse(localStorage.getItem(t));this.selectedTabId=e}await w(this)}componentDidLoad(){this.scrollTabTitleIntoView(this.selectedTitle,"instant")}componentWillRender(){const{parentTabsEl:t}=this;this.layout=t?.layout;this.bordered=t?.bordered;this.effectiveDir=d(this.el)}componentDidRender(){if(this.tabTitles.length&&this.tabTitles.every((t=>!t.selected))&&!this.selectedTabId){this.tabTitles[0].getTabIdentifier().then((t=>{this.calciteInternalTabChange.emit({tab:t})}))}}disconnectedCallback(){this.resizeObserver?.disconnect();x(this);T(this)}render(){return e(i,{key:"e2e130cc399d8bb88201f283de2eef17a46882fc",role:"tablist"},e("div",{key:"2beae02bec71c759201063e4820ce19cacd1c432",class:{[R.container]:true,[R.containerHasStartTabTitleOverflow]:!!this.hasOverflowingStartTabTitle,[R.containerHasEndTabTitleOverflow]:!!this.hasOverflowingEndTabTitle,[`scale-${this.scale}`]:true,[`position-${this.position}`]:true,[C.rtl]:this.effectiveDir==="rtl"}},this.renderScrollButton("start"),e("div",{key:"609a5b8efc1bd46810217ab17256aaad7432586b",class:{[R.tabTitleSlotWrapper]:true},onScroll:this.onTabTitleScroll,onWheel:this.onTabTitleWheel,ref:this.storeTabTitleWrapperRef},e("slot",{key:"7436f2fcacf2b483a77c741a2449f783c9c4c148",onSlotchange:this.onSlotChange})),this.renderScrollButton("end")))}focusPreviousTabHandler(t){this.handleTabFocus(t,t.target,"previous")}focusNextTabHandler(t){this.handleTabFocus(t,t.target,"next")}focusFirstTabHandler(t){this.handleTabFocus(t,t.target,"first")}focusLastTabHandler(t){this.handleTabFocus(t,t.target,"last")}internalActivateTabHandler(t){const e=t.target;this.selectedTabId=t.detail.tab?t.detail.tab:this.getIndexOfTabTitle(e);t.stopPropagation();this.selectedTitle=e;this.scrollTabTitleIntoView(e)}scrollTabTitleIntoView(t,e="smooth"){if(!t){return}s((()=>{const i=this.effectiveDir==="ltr";const o=this.tabTitleContainerEl;const n=o.getBoundingClientRect();const s=t.getBoundingClientRect();const a=o.scrollLeft;const c=i?this.hasOverflowingStartTabTitle:this.hasOverflowingEndTabTitle;const r=i?this.hasOverflowingEndTabTitle:this.hasOverflowingStartTabTitle;if(s.left<n.left+(c?this.scrollerButtonWidth:0)){const t=a+(s.left-n.left)-this.scrollerButtonWidth;o.scrollTo({left:t,behavior:e})}else if(s.right>n.right-(r?this.scrollerButtonWidth:0)){const t=a+(s.right-n.right)+this.scrollerButtonWidth;o.scrollTo({left:t,behavior:e})}}))}activateTabHandler(t){this.calciteTabChange.emit();t.stopPropagation()}internalCloseTabHandler(t){const e=t.target;this.handleTabTitleClose(e);t.stopPropagation()}async updateTabTitles(t){if(t.target.selected){this.selectedTabId=t.detail;this.selectedTitle=await this.getTabTitleById(this.selectedTabId)}}globalInternalTabChangeHandler(t){if(this.syncId&&t.target!==this.el&&t.target.syncId===this.syncId&&this.selectedTabId!==t.detail.tab){this.selectedTabId=t.detail.tab}t.stopPropagation()}effectiveLocaleChange(){z(this,this.effectiveLocale)}async selectedTabIdChanged(){if(localStorage&&this.storageId&&this.selectedTabId!==undefined&&this.selectedTabId!==null){localStorage.setItem(`calcite-tab-nav-${this.storageId}`,JSON.stringify(this.selectedTabId))}this.calciteInternalTabChange.emit({tab:this.selectedTabId})}get scrollerButtonWidth(){const{scale:t}=this;return parseInt(t==="s"?p:t==="m"?v:g)}updateScrollingState(){const t=this.tabTitleContainerEl;if(!t){return}let e;let i;const o=t.scrollLeft;const n=t.clientWidth;const s=t.scrollWidth;if(this.effectiveDir==="ltr"){e=o>0;i=o+n<s}else{e=o<0;i=o!==-(s-n)}this.hasOverflowingStartTabTitle=e;this.hasOverflowingEndTabTitle=i}getIndexOfTabTitle(t,e=this.tabTitles){return e.indexOf(t)}async getTabTitleById(t){return Promise.all(this.tabTitles.map((t=>t.getTabIdentifier()))).then((e=>this.tabTitles[e.indexOf(t)]))}get tabTitles(){return h(this.el,"calcite-tab-title")}get enabledTabTitles(){return h(this.el,"calcite-tab-title:not([disabled])").filter((t=>!t.closed))}handleTabTitleClose(t){const{tabTitles:e}=this;const i=t.selected;const o=e.reduce(((t,e,i)=>!e.closed?[...t,i]:t),[]);const n=o.length;if(n===1&&e[o[0]].closable){e[o[0]].closable=false;this.selectedTabId=o[0];if(i){e[o[0]].activateTab()}}else if(n>1){const i=e.findIndex((e=>e===t));const s=o.find((t=>t>i));if(this.selectedTabId===i){this.selectedTabId=s?s:n-1;e[this.selectedTabId].activateTab()}}requestAnimationFrame((()=>{e[this.selectedTabId].focus()}))}static get assetsDirs(){return["assets"]}get el(){return o(this)}static get watchers(){return{selectedTitle:["selectedTitleChanged"],messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"],selectedTabId:["selectedTabIdChanged"]}}};$.style=P;const N={closeButton:"close-button",container:"container",containerBottom:"container--bottom",content:"content",contentHasText:"content--has-text",iconEnd:"icon-end",iconPresent:"icon-present",iconStart:"icon-start",titleIcon:"calcite-tab-title--icon",scale:t=>`scale-${t}`,selectedIndicator:"selected-indicator"};const M={close:"x"};const _=':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{display:block;outline:2px solid transparent;outline-offset:2px;margin-inline-start:0px}:host([layout=inline]){flex:0 1 auto}:host([layout=center]){flex:1 1 auto}.content{position:relative;margin-block-end:0.125rem;box-sizing:border-box;display:flex;block-size:100%;align-items:center;justify-content:center}.scale-s .content{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-s .close-button{inline-size:1.25rem}.scale-m .content{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-m .close-button{inline-size:1.75rem}.scale-l .content{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.scale-l .close-button{inline-size:2rem}:host([closable]) .content{border-block-end-color:transparent}:host([layout=inline]) .content,:host([layout=center]) .content{padding-inline:0.25rem}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;justify-content:center;text-align:center}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{flex:1 1 auto;flex-grow:1}.container{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;padding-inline:0px;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-3);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.selected-indicator{position:absolute;display:block;block-size:0.125rem;inline-size:100%;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;inline-size:100%}.container--bottom .selected-indicator{inset-block-end:unset;inset-block-start:0}:host([bordered]) .selected-indicator{inset-block-start:0;inset-block-end:unset;inset-inline-start:-1px;inset-inline-end:0;inline-size:calc(100% + var(--calcite-spacing-base))}:host([bordered]) .container:not(.container--bottom){border-block-end:1px solid transparent}:host([bordered]:not([selected]):hover) .container:not(.container--bottom){border-block-end:1px solid var(--calcite-color-border-1)}:host([bordered]:not([selected]):hover:not(:focus)) .selected-indicator{background-color:var(--calcite-color-foreground-2)}:host([bordered]:not([selected]):hover:not(:focus)) .container:not(.container--bottom) .selected-indicator{box-shadow:inset 0 1px var(--calcite-color-border-1)}:host([bordered]:not([selected]):hover:not(:focus)) .container.container--bottom .selected-indicator{box-shadow:inset 0 -1px var(--calcite-color-border-1)}:host([bordered][selected]) .container::after{position:absolute;display:block;block-size:0.125rem;inline-size:100%;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;inset-block-end:-1px;inset-inline-start:0;inset-inline-end:0;inline-size:100%;background:var(--calcite-color-foreground-1);content:""}:host([bordered][selected]) .container.container--bottom::after{inset-block-start:-1px}:host([bordered][selected]:hover) .container::after{background:var(--calcite-color-foreground-2)}:host([bordered][selected]:focus) .container::after{background:transparent}:host([bordered]) .container--bottom .selected-indicator{inset-block-start:unset;inset-block-end:0}:host([selected]) .selected-indicator,:host([selected]:hover) .selected-indicator{background-color:var(--calcite-color-brand)}:host(:hover) .selected-indicator{background-color:var(--calcite-color-border-3)}:host(:focus) .selected-indicator,:host(:active) .selected-indicator{background-color:var(--calcite-color-brand)}@media (forced-colors: active){.selected-indicator{background-color:highlight}}:host([closed]){display:none}:host([selected]) .container{border-color:transparent;color:var(--calcite-color-text-1)}:host(:focus) .container{outline:2px solid var(--calcite-ui-focus-color, 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          )}:host(:focus) .container:focus-within{outline-color:transparent}:host(:active) a,:host(:focus) a,:host(:hover) a{border-color:var(--calcite-color-border-2);color:var(--calcite-color-text-1);text-decoration-line:none}:host([disabled]) .container{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calcite-tab-title--icon{position:relative;margin:0px;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.content--has-text{padding:0.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:var(--calcite-spacing-sm)}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:var(--calcite-spacing-sm)}.close-button{display:flex;block-size:100%;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;margin-inline-start:var(--calcite-spacing-sm);margin-inline-end:var(--calcite-spacing-px);block-size:calc(100% - var(--calcite-spacing-xxs))}.close-button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand))}.close-button:focus,.close-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.close-button:active{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.close-button calcite-icon{color:inherit}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:var(--calcite-spacing-sm)}:host([bordered]) .container:not(.container--bottom) .close-button{block-size:calc(100% - var(--calcite-spacing-px));margin-block-start:-1px}:host([bordered]) .container .close-button calcite-icon{margin-block-start:var(--calcite-spacing-px)}:host([bordered]) .container .close-button:focus,:host([bordered]) .container .close-button:hover,:host([bordered]) .container .close-button:active{box-shadow:0 2px 0 0 var(--calcite-color-foreground-3)}:host([bordered]) .container.container--bottom .close-button{box-shadow:0 -2px 0 0 transparent}:host([bordered]) .container.container--bottom .close-button calcite-icon{margin-block-end:var(--calcite-spacing-px)}:host([bordered]) .container.container--bottom .close-button:focus,:host([bordered]) .container.container--bottom .close-button:hover,:host([bordered]) .container.container--bottom .close-button:active{box-shadow:0 -2px 0 0 var(--calcite-color-foreground-3)}:host([bordered][selected]){box-shadow:inset 0 -1px var(--calcite-color-foreground-1)}:host([bordered]:not([selected])) .container .close-button{box-shadow:0 2px 0 0 transparent}:host([bordered]:hover) .container{background-color:var(--calcite-color-foreground-2)}:host([bordered]) .container{border-inline:var(--calcite-spacing-px) solid transparent}:host([selected][bordered]) .container{border-inline-color:var(--calcite-color-border-1)}:host([layout=inline][bordered]) .scale-m .content,:host([layout=center][bordered]) .scale-m .content{padding-inline:0.75rem}:host([layout=inline][bordered]) .scale-s .content,:host([layout=center][bordered]) .scale-s .content{padding-inline:0.5rem}:host([layout=inline][bordered]) .scale-l .content,:host([layout=center][bordered]) .scale-l .content{padding-inline:1rem}:host([layout=inline][closable]) .scale-s .content,:host([layout=inline][closable]) .scale-m .content,:host([layout=inline][closable]) .scale-l .content{padding-inline-end:0}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered]) .container{border-block-end-style:solid}:host([bordered]) .container--bottom{border-block-start-style:solid}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][selected]) .container--bottom{border-block-start-style:none}.close-button{z-index:var(--calcite-z-index)}}:host([hidden]){display:none}[hidden]{display:none}';const q=_;const J=class{constructor(e){t(this,e);this.calciteTabsActivate=n(this,"calciteTabsActivate",6);this.calciteInternalTabsActivate=n(this,"calciteInternalTabsActivate",6);this.calciteTabsClose=n(this,"calciteTabsClose",6);this.calciteInternalTabsClose=n(this,"calciteInternalTabsClose",6);this.calciteInternalTabsFocusNext=n(this,"calciteInternalTabsFocusNext",6);this.calciteInternalTabsFocusPrevious=n(this,"calciteInternalTabsFocusPrevious",6);this.calciteInternalTabsFocusFirst=n(this,"calciteInternalTabsFocusFirst",6);this.calciteInternalTabsFocusLast=n(this,"calciteInternalTabsFocusLast",6);this.calciteInternalTabTitleRegister=n(this,"calciteInternalTabTitleRegister",6);this.calciteInternalTabIconChanged=n(this,"calciteInternalTabIconChanged",6);this.closeClickHandler=()=>{this.closeTabTitleAndNotify()};this.mutationObserver=m("mutation",(()=>this.updateHasText()));this.resizeObserver=m("resize",(()=>{this.calciteInternalTabIconChanged.emit()}));this.guid=`calcite-tab-title-${u()}`;this.selected=false;this.closable=false;this.closed=false;this.disabled=false;this.iconEnd=undefined;this.iconFlipRtl=undefined;this.iconStart=undefined;this.layout=undefined;this.position="top";this.scale="m";this.bordered=false;this.tab=undefined;this.messages=undefined;this.messageOverrides=undefined;this.controls=undefined;this.defaultMessages=undefined;this.effectiveLocale=undefined;this.hasText=false}selectedHandler(){if(this.selected){this.activateTab(false)}}onMessagesChange(){}connectedCallback(){I(this);k(this);y(this);this.setupTextContentObserver();this.parentTabNavEl=this.el.closest("calcite-tab-nav");this.parentTabsEl=this.el.closest("calcite-tabs")}disconnectedCallback(){this.mutationObserver?.disconnect();document.body?.dispatchEvent(new CustomEvent("calciteTabTitleUnregister",{detail:this.el}));this.resizeObserver?.disconnect();S(this);x(this);T(this)}async componentWillLoad(){await w(this);if(j()){this.updateHasText()}if(this.tab&&this.selected){this.activateTab(false)}}componentWillRender(){if(this.parentTabsEl){this.layout=this.parentTabsEl.layout;this.bordered=this.parentTabsEl.bordered}}render(){const{el:t,closed:o}=this;const n=t.id||this.guid;const s=e("calcite-icon",{key:"20ea18dabdb4cabe8a032d0799f3c757bc90c91d",class:{[N.titleIcon]:true,[N.iconStart]:true},flipRtl:this.iconFlipRtl==="start"||this.iconFlipRtl==="both",icon:this.iconStart,scale:L(this.scale)});const a=e("calcite-icon",{key:"ebd3913a334a959e8962addd45e5077ee82f2ca8",class:{[N.titleIcon]:true,[N.iconEnd]:true},flipRtl:this.iconFlipRtl==="end"||this.iconFlipRtl==="both",icon:this.iconEnd,scale:L(this.scale)});return e(i,{key:"58a72fa4a6e961c3414dfe224a4e235892784707","aria-controls":this.controls,"aria-selected":b(this.selected),id:n,role:"tab",tabIndex:this.selected&&!this.disabled?0:-1},e(H,{key:"fe7662ade3001579b664772b4672d6bebd06a82b",disabled:this.disabled},e("div",{key:"ea226b71436922de6bae2e8e542ae0adf08add1b",class:{[N.container]:true,[N.containerBottom]:this.position==="bottom",[N.iconPresent]:!!this.iconStart||!!this.iconEnd,[N.scale(this.scale)]:true},hidden:o,ref:t=>this.resizeObserver?.observe(t)},e("div",{key:"737609daa04d9dc18b46872c49b82cf211ba9b5a",class:{[N.content]:true,[N.contentHasText]:this.hasText}},this.iconStart?s:null,e("slot",{key:"fb500a910e5c6bfcd8571e2d109331dd88f2544d"}),this.iconEnd?a:null),this.renderCloseButton(),e("div",{key:"3fd13c6f459e05cea88c40809b7220369866a2b9",class:N.selectedIndicator}))))}renderCloseButton(){const{closable:t,messages:i}=this;return t?e("button",{"aria-label":i.close,class:N.closeButton,disabled:false,key:N.closeButton,onClick:this.closeClickHandler,ref:t=>this.closeButtonEl=t,title:i.close,type:"button"},e("calcite-icon",{icon:M.close,scale:L(this.scale)})):null}async componentDidLoad(){this.calciteInternalTabTitleRegister.emit(await this.getTabIdentifier())}componentDidRender(){A(this)}internalTabChangeHandler(t){const e=t.composedPath().find((t=>t.tagName==="CALCITE-TABS"));if(e!==this.parentTabsEl){return}if(this.tab){this.selected=this.tab===t.detail.tab}else{this.getTabIndex().then((e=>{this.selected=e===t.detail.tab}))}t.stopPropagation()}onClick(){this.activateTab()}keyDownHandler(t){switch(t.key){case" ":case"Enter":if(!t.composedPath().includes(this.closeButtonEl)){this.activateTab();t.preventDefault()}break;case"ArrowRight":t.preventDefault();if(d(this.el)==="ltr"){this.calciteInternalTabsFocusNext.emit()}else{this.calciteInternalTabsFocusPrevious.emit()}break;case"ArrowLeft":t.preventDefault();if(d(this.el)==="ltr"){this.calciteInternalTabsFocusPrevious.emit()}else{this.calciteInternalTabsFocusNext.emit()}break;case"Home":t.preventDefault();this.calciteInternalTabsFocusFirst.emit();break;case"End":t.preventDefault();this.calciteInternalTabsFocusLast.emit();break}}async getTabIndex(){return Array.prototype.indexOf.call(c(this.el.parentElement.children).filter((t=>t.matches("calcite-tab-title"))),this.el)}async getTabIdentifier(){return this.tab?this.tab:this.getTabIndex()}async updateAriaInfo(t=[],e=[]){this.controls=t[e.indexOf(this.el.id)]||null}async activateTab(t=true){if(this.disabled||this.closed){return}const e={tab:this.tab};this.calciteInternalTabsActivate.emit(e);if(t){requestAnimationFrame((()=>this.calciteTabsActivate.emit()))}}effectiveLocaleChange(){z(this,this.effectiveLocale)}updateHasText(){this.hasText=this.el.textContent.trim().length>0}setupTextContentObserver(){this.mutationObserver?.observe(this.el,{childList:true,subtree:true})}closeTabTitleAndNotify(){this.closed=true;this.calciteInternalTabsClose.emit({tab:this.tab});this.calciteTabsClose.emit()}static get assetsDirs(){return["assets"]}get el(){return o(this)}static get watchers(){return{selected:["selectedHandler"],messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"]}}};J.style=q;const U={titleGroup:"title-group"};const G=":host{display:flex;flex-direction:column}:host([bordered]){box-shadow:inset 0 1px 0 var(--calcite-color-border-1);background-color:var(--calcite-color-foreground-1)}:host([bordered]) section{border-width:1px;border-style:solid;border-color:var(--calcite-color-border-1)}:host([bordered][position=bottom]){box-shadow:inset 0 1px 0 var(--calcite-color-border-1), inset 0 -1px 0 var(--calcite-color-border-1)}:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav){margin-block-end:-1px}:host([bordered][scale=s]) section{padding:0.75rem}:host([bordered][scale=m]) section{padding:0.5rem}:host([bordered][scale=l]) section{padding:1rem}:host([position=bottom]){flex-direction:column-reverse}section{display:flex;flex-grow:1;overflow:hidden;border-block-start-width:1px;border-block-start-color:var(--calcite-color-border-1);border-block-start-style:solid}:host([position=bottom]) section{flex-direction:column-reverse;border-block-start-width:0px;border-block-end-width:1px;border-block-end-color:var(--calcite-color-border-1)}:host([position=bottom]:not([bordered])) section{border-block-end-style:solid}@media (forced-colors: active){:host([bordered]) section{border-block-start-width:0px;border-block-end-width:1px}:host([position=bottom][bordered]) section{border-block-start-width:1px;border-block-end-width:0px}}:host([hidden]){display:none}[hidden]{display:none}";const V=G;const X=class{constructor(e){t(this,e);this.defaultSlotChangeHandler=t=>{this.tabs=r(t,"calcite-tab")};this.setDefaultSlotRef=t=>this.slotEl=t;this.layout="inline";this.position="top";this.scale="m";this.bordered=false;this.titles=[];this.tabs=[]}handleInheritableProps(){this.updateItems()}calciteInternalTabNavSlotChangeHandler(t){t.stopPropagation();if(t.detail.length!==this.titles.length){this.titles=t.detail}}titlesWatcher(){this.updateAriaSettings();this.updateItems()}tabsWatcher(){this.updateAriaSettings();this.updateItems()}async updateAriaSettings(){let t;let e;const i=f(this.slotEl,"calcite-tab");if(i.some((t=>t.tab))||this.titles.some((t=>t.tab))){t=i.sort(((t,e)=>t.tab.localeCompare(e.tab))).map((t=>t.id));e=this.titles.sort(((t,e)=>t.tab.localeCompare(e.tab))).map((t=>t.id))}else{const o=await Promise.all(i.map((t=>t.getTabIndex())));const n=await Promise.all(this.titles.map((t=>t.getTabIndex())));t=o.reduce(((t,e,o)=>{t[e]=i[o].id;return t}),[]);e=n.reduce(((t,e,i)=>{t[e]=this.titles[i].id;return t}),[])}i.forEach((i=>i.updateAriaInfo(t,e)));this.titles.forEach((i=>i.updateAriaInfo(t,e)))}updateItems(){const{position:t,scale:e}=this;const i=this.el.querySelector("calcite-tab-nav");if(i){i.position=t;i.scale=e}Array.from(this.el.querySelectorAll("calcite-tab")).forEach((t=>{if(t.parentElement===this.el){t.scale=e}}));Array.from(this.el.querySelectorAll("calcite-tab-nav > calcite-tab-title")).forEach((i=>{i.position=t;i.scale=e}))}connectedCallback(){this.updateItems()}async componentWillLoad(){this.updateItems()}disconnectedCallback(){}render(){return e(a,{key:"300872682f4f969586b06b6bbfa5cccb5a005e03"},e("slot",{key:"9b8c09c2f93725349a98d13fb0167c88b82ef413",name:U.titleGroup}),e("section",{key:"bf1b19251ca8ab3ba4c3c3fa15995889d71d9355"},e("slot",{key:"e1008e065225b4f0cb1b4fbe2ec91ab761db1144",onSlotchange:this.defaultSlotChangeHandler,ref:this.setDefaultSlotRef})))}get el(){return o(this)}static get watchers(){return{position:["handleInheritableProps"],scale:["handleInheritableProps"],titles:["titlesWatcher"],tabs:["tabsWatcher"]}}};X.style=V;export{E as calcite_tab,$ as calcite_tab_nav,J as calcite_tab_title,X as calcite_tabs};
-//# sourceMappingURL=p-6de921a8.entry.js.map