@arcgis/map-components/dist/components/arcgis-time-zone-label/customElement.js

ArcGIS Map Components

import { c as h } from "../../chunks/runtime.js";
import { html as s } from "lit-html";
import { useDirection as p, usePropertyChange as _ } from "@arcgis/lumina/controllers";
import { classes as d } from "@arcgis/components-utils";
import { LitElement as g, createEvent as u, noShadowRoot as v, nothing as c, safeClassMap as n } from "@arcgis/lumina";
import { u as x } from "../../chunks/useT9n.js";
import { g as m } from "../../chunks/globalCss.js";
import { css as f } from "@lit/reactive-element/css-tag.js";
import { u as $ } from "../../chunks/useView.js";
import { when as y, watch as z } from "@arcgis/core/core/reactiveUtils.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
v4.33.13 */
const D = f`@layer{.arcgis-time-zone-label{display:inline-flex;background-color:var(--calcite-color-foreground-1)}.arcgis-time-zone-label__badge{display:flex;padding-block:var(--calcite-spacing-sm);padding-inline:var(--calcite-spacing-sm);color:var(--calcite-color-text-1)}.arcgis-time-zone-label__badge--disabled{opacity:var(--calcite-opacity-disabled)}.arcgis-time-zone-label__badge--hidden{display:none}.arcgis-time-zone-label__badge-icon{align-self:center}.arcgis-time-zone-label__name{--calcite-color-background: transparent;--calcite-color-border-input: transparent;--calcite-font-weight-medium: normal;pointer-events:none}.arcgis-time-zone-label__name--hidden{display:none}.arcgis-time-zone-label__label{--calcite-label-margin-bottom: 0;align-items:center;padding-inline:var(--calcite-spacing-sm)}.arcgis-time-zone-label__label--disabled{opacity:var(--calcite-opacity-disabled)}.arcgis-time-zone-label__label--hidden{display:none}}`, t = "esri-time-zone-label", i = {
  base: t,
  badge: `${t}__badge`,
  badgeDisabled: `${t}__badge--disabled`,
  badgeHidden: `${t}__badge--hidden`,
  badgeIcon: `${t}__badge-icon`,
  expander: `${t}__expander`,
  label: `${t}__label`,
  labelDisabled: `${t}__label--disabled`,
  labelHidden: `${t}__label--hidden`,
  name: `${t}__name`,
  nameHidden: `${t}__name--hidden`
};
class w extends g {
  constructor() {
    super(...arguments), this._messages = x({ blocking: !0 }), this._onExpanderClick = () => {
      this.expanded = !this.expanded;
    }, this.view = $(this), this._direction = p(), this.state = "disabled", this.position = "top-left", this.disabled = !1, this.expanded = !1, this.arcgisPropertyChange = _()("state"), this.arcgisReady = u();
  }
  static {
    this.properties = { _interactive: 16, _direction: 16, _expandDirection: 16, _timeZone: 16, state: 3, referenceElement: 1, position: 3, disabled: 7, expandDirection: 3, expanded: 7, messageOverrides: 0, label: 1 };
  }
  static {
    this.styles = D;
  }
  static {
    this.shadowRootOptions = v;
  }
  get _interactive() {
    return !(this.disabled || this.state === "disabled");
  }
  get expandDirection() {
    return this._expandDirection ?? this._computeExpandDirection();
  }
  set expandDirection(e) {
    this._expandDirection = e;
  }
  loaded() {
    this.state = this.view?.ready ? "ready" : "disabled", this.manager.onLifecycle(() => [
      y(() => this.view?.ready, (e) => {
        this.state = e ? "ready" : "disabled";
      }),
      z(() => this.view?.timeZone, (e) => {
        this._timeZone = e;
      })
    ]);
  }
  _computeExpandDirection() {
    if (!this.referenceElement)
      return "end";
    switch (this.position) {
      case "top-right":
      case "bottom-right":
      case "top-trailing":
      case "bottom-trailing":
        return this._direction === "ltr" ? "start" : "end";
      case "top-left":
      case "bottom-left":
      case "top-leading":
      case "bottom-leading":
        return this._direction === "ltr" ? "end" : "start";
      default:
        return "end";
    }
  }
  _getIcon() {
    const { expanded: e, expandDirection: a } = this;
    return e ? this._direction === "rtl" ? a === "start" ? "chevrons-left" : "chevrons-right" : a === "start" ? "chevrons-right" : "chevrons-left" : "time-zone";
  }
  render() {
    const e = d(i.base, m.widget, !this._interactive && m.disabled), a = this._renderExpander(), r = this._renderName(), o = this._renderBadge(), l = [a, r, o];
    return this.expandDirection === "start" && l.reverse(), s`<div aria-label=${this.label ?? c} class=${n(e)}>${l}</div>`;
  }
  _renderExpander() {
    const e = this._getIcon();
    return s`<calcite-action class=${n(i.expander)} .disabled=${!this._interactive} .icon=${e} @click=${this._onExpanderClick} scale=s .text=${this.label ?? ""} title=${this.label ?? "" ?? c}></calcite-action>`;
  }
  _renderBadge() {
    return s`<div class=${n(d(i.badge, !this.expanded && i.badgeHidden, !this._interactive && i.badgeDisabled))}><calcite-icon class=${n(i.badgeIcon)} icon=time-zone scale=s></calcite-icon></div>`;
  }
  _renderName() {
    const e = "system", a = "unknown", r = this._timeZone === e || this._timeZone == null ? Intl.DateTimeFormat().resolvedOptions().timeZone : this._timeZone, o = this._timeZone === a, l = s`<calcite-label class=${n(d(i.label, (!this.expanded || !o) && i.labelHidden, !this._interactive && i.labelDisabled))}>${this._messages.noAdjustment}</calcite-label>`, b = s`<calcite-input-time-zone class=${n(d(i.name, (!this.expanded || !r || o) && i.nameHidden))} .disabled=${!this._interactive} mode=region read-only .value=${r}></calcite-input-time-zone>`;
    return [l, b];
  }
}
h("arcgis-time-zone-label", w);
export {
  w as ArcgisTimeZoneLabel
};