@esri/calcite-components/dist/components/calcite-navigation-logo.js

Web Components for Esri's Calcite Design System.

/*!
 * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
 * v1.5.0-next.4
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { c as componentLoaded, a as setUpLoadableComponent, s as setComponentLoaded } from './loadable.js';

const CSS = {
  container: "container",
  heading: "heading",
  description: "description",
  anchor: "anchor",
  image: "image"
};

const navigationLogoCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}.anchor{margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;font-size:var(--calcite-font-size-0);line-height:1.25rem;text-decoration-line:none;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end:2px solid transparent}.anchor:hover,.anchor:focus{background-color:var(--calcite-ui-foreground-2)}.anchor:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.anchor:active{background-color:var(--calcite-ui-foreground-3)}.image{margin:0px;display:flex;block-size:1.75rem;padding-inline:1rem}.image~.container{padding-inline-start:0px}:host(:active) .anchor{color:var(--calcite-ui-text-1)}:host([active]) .anchor{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-brand);--calcite-ui-icon-color:var(--calcite-ui-brand)}.container{margin-block-start:0.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:1rem;text-align:start}.heading{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}.description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}";

const CalciteNavigationLogo$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.active = undefined;
    this.href = undefined;
    this.label = undefined;
    this.rel = undefined;
    this.description = undefined;
    this.target = undefined;
    this.heading = undefined;
    this.thumbnail = undefined;
  }
  //--------------------------------------------------------------------------
  //
  //  Public Methods
  //
  //--------------------------------------------------------------------------
  /** Sets focus on the component. */
  async setFocus() {
    await componentLoaded(this);
    if (this.href) {
      this.el.focus();
    }
  }
  //--------------------------------------------------------------------------
  //
  //  Lifecycle
  //
  //--------------------------------------------------------------------------
  componentWillLoad() {
    setUpLoadableComponent(this);
  }
  componentDidLoad() {
    setComponentLoaded(this);
  }
  // --------------------------------------------------------------------------
  //
  //  Render Methods
  //
  // --------------------------------------------------------------------------
  render() {
    const { heading, description, thumbnail } = this;
    return (h(Host, null, h("a", { class: CSS.anchor, href: this.href, rel: this.rel, target: this.target }, thumbnail && h("img", { alt: this.label || "", class: CSS.image, src: thumbnail }), (heading || description) && (h("div", { class: CSS.container }, heading && (h("span", { "aria-label": this.heading, class: CSS.heading, key: CSS.heading }, heading)), description && (h("span", { "aria-label": this.description, class: CSS.description, key: CSS.description }, description)))))));
  }
  static get delegatesFocus() { return true; }
  get el() { return this; }
  static get style() { return navigationLogoCss; }
}, [17, "calcite-navigation-logo", {
    "active": [516],
    "href": [513],
    "label": [1],
    "rel": [513],
    "description": [1],
    "target": [513],
    "heading": [1],
    "thumbnail": [1],
    "setFocus": [64]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["calcite-navigation-logo"];
  components.forEach(tagName => { switch (tagName) {
    case "calcite-navigation-logo":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, CalciteNavigationLogo$1);
      }
      break;
  } });
}
defineCustomElement$1();

const CalciteNavigationLogo = CalciteNavigationLogo$1;
const defineCustomElement = defineCustomElement$1;

export { CalciteNavigationLogo, defineCustomElement };