@esri/calcite-components/dist/components/calcite-segmented-control-item/customElement.js

Web Components for Esri's Calcite Design System.

/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { n as slotChangeHasContent, t as toAriaBoolean } from "../../chunks/dom.js";
const SLOTS = {
  input: "input"
};
const CSS = {
  label: "label",
  labelScale: (scale) => `label--scale-${scale}`,
  labelHorizontal: "label--horizontal",
  labelOutline: "label--outline",
  labelOutlineFill: "label--outline-fill",
  icon: "icon",
  iconSolo: "icon--solo"
};
const styles = css`:host{display:flex;cursor:pointer;align-self:stretch;font-weight:var(--calcite-font-weight-normal);outline-color:transparent;transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out,border-color var(--calcite-animation-timing) ease-in-out}.label{pointer-events:none;margin:.125rem;box-sizing:border-box;display:flex;flex:1 1 0%;align-items:center;color:var(--calcite-segmented-control-color, var(--calcite-color-text-3));background-color:var(--calcite-segmented-control-background-color);box-shadow:var(--calcite-segmented-control-shadow);border-color:var(--calcite-segmented-control-border-color);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out,border-color var(--calcite-internal-animation-timing-fast) ease-in-out,color var(--calcite-internal-animation-timing-fast) ease-in-out}.label--horizontal{justify-content:center}:host(:focus){outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-offset:-1px;z-index:var(--calcite-z-index)}.label--scale-s{padding-inline:.5rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);padding-block:.125rem}.label--scale-m{padding-inline:.75rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);padding-block:.375rem}.label--scale-l{padding-inline:1rem;padding-block:.625rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host(:hover) .label{background-color:var(--calcite-segmented-control-background-color, var(--calcite-color-foreground-2));color:var(--calcite-segmented-control-color, var(--calcite-color-text-1))}:host(:active) .label{background-color:var(--calcite-segmented-control-background-color, var(--calcite-color-foreground-3))}:host([checked]) .label{cursor:default;background-color:var(--calcite-segmented-control-background-color, var(--calcite-color-brand));border-color:var(--calcite-segmented-control-border-color, var(--calcite-color-brand));color:var(--calcite-segmented-control-color, var(--calcite-color-text-inverse))}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{background-color:var(--calcite-segmented-control-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-segmented-control-border-color, var(--calcite-color-brand));box-shadow:var(--calcite-segmented-control-shadow, inset 0 0 0 1px var(--calcite-color-brand));color:var(--calcite-segmented-control-color, var(--calcite-color-brand))}:host([checked]) .label--outline{background-color:var(--calcite-segmented-control-background-color, transparent)}::slotted(input){display:none}@media(forced-colors:active){:host([checked]) .label{background-color:highlight}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{outline:2px solid transparent;outline-offset:2px}:host([checked]) .label:not([class~=label--outline]) .icon{color:highlightText}}.icon{position:relative;margin:0;display:inline-flex;line-height:inherit;margin-inline-start:var(--calcite-internal-segmented-control-icon-margin-start);margin-inline-end:var(--calcite-internal-segmented-control-icon-margin-end);--calcite-icon-color: var(--calcite-segmented-control-icon-color)}:host([icon-start]) .label--scale-s{--calcite-internal-segmented-control-icon-margin-end: .5rem}:host([icon-end]) .label--scale-s{--calcite-internal-segmented-control-icon-margin-start: .5rem}:host([icon-start]) .label--scale-m{--calcite-internal-segmented-control-icon-margin-end: .75rem}:host([icon-end]) .label--scale-m{--calcite-internal-segmented-control-icon-margin-start: .75rem}:host([icon-start]) .label--scale-l{--calcite-internal-segmented-control-icon-margin-end: 1rem}:host([icon-end]) .label--scale-l{--calcite-internal-segmented-control-icon-margin-start: 1rem}.label .icon--solo{--calcite-internal-segmented-control-icon-margin-start: 0;--calcite-internal-segmented-control-icon-margin-end: 0}:host([hidden]){display:none}[hidden]{display:none}`;
class SegmentedControlItem extends LitElement {
  constructor() {
    super(...arguments);
    this.hasSlottedContent = false;
    this.appearance = "solid";
    this.checked = false;
    this.iconFlipRtl = false;
    this.layout = "horizontal";
    this.scale = "m";
    this.calciteInternalSegmentedControlItemChange = createEvent({ cancelable: false });
  }
  static {
    this.properties = { hasSlottedContent: [16, {}, { state: true }], appearance: 1, checked: [7, {}, { reflect: true, type: Boolean }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], iconStart: [3, { type: String }, { reflect: true }], layout: 1, scale: 1, value: 1 };
  }
  static {
    this.styles = styles;
  }
  willUpdate(changes) {
    if (changes.has("checked") && (this.hasUpdated || this.checked !== false)) {
      this.calciteInternalSegmentedControlItemChange.emit();
    }
  }
  handleSlotChange(event) {
    this.hasSlottedContent = slotChangeHasContent(event);
  }
  renderIcon(icon, solo = false) {
    return icon ? html`<calcite-icon class=${safeClassMap({
      [CSS.icon]: true,
      [CSS.iconSolo]: solo
    })} .flipRtl=${this.iconFlipRtl} .icon=${icon} scale=s></calcite-icon>` : null;
  }
  render() {
    const { appearance, checked, layout, scale, value } = this;
    this.el.ariaChecked = toAriaBoolean(checked);
    this.el.ariaLabel = value;
    this.el.role = "radio";
    return html`<label class=${safeClassMap({
      [CSS.label]: true,
      [CSS.labelScale(scale)]: true,
      [CSS.labelHorizontal]: layout === "horizontal",
      [CSS.labelOutline]: appearance === "outline",
      [CSS.labelOutlineFill]: appearance === "outline-fill"
    })}>${this.renderContent()}</label>`;
  }
  renderContent() {
    const { hasSlottedContent, iconEnd, iconStart } = this;
    const effectiveIcon = iconStart || iconEnd;
    const canRenderIconOnly = !hasSlottedContent && effectiveIcon;
    if (canRenderIconOnly) {
      return [this.renderIcon(effectiveIcon, true), html`<slot @slotchange=${this.handleSlotChange}></slot>`];
    }
    return [
      this.renderIcon(iconStart),
      html`<slot @slotchange=${this.handleSlotChange}></slot>`,
      html`<slot name=${SLOTS.input}></slot>`,
      this.renderIcon(iconEnd)
    ];
  }
}
customElement("calcite-segmented-control-item", SegmentedControlItem);
export {
  SegmentedControlItem
};