@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
85 lines (84 loc) • 7.17 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { c as customElement } from "../../chunks/runtime.js";
import { html } from "lit";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { r as slotChangeHasContent, t as toAriaBoolean } from "../../chunks/dom.js";
import { css } from "@lit/reactive-element/css-tag.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:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(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--2);line-height:1rem;padding-block:.125rem}.label--scale-m{padding-inline:.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-block:.375rem}.label--scale-l{padding-inline:1rem;padding-block:.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}: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, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], iconStart: [3, {}, { 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
};