import{LitElement as t,html as e,css as o}from"lit";import{classMap as n}from"lit/directives/class-map.js";import{ifDefined as i}from"lit/directives/if-defined.js";import{iconRemixExternalLinkLine as r,iconRemixDownloadLine as l}from"./assets/cc-remix.icons.js";import{isStringEmpty as c}from"./lib/utils.js";import{skeletonStyles as s}from"./styles/skeleton.js";import{i18n as a}from"./translation.js";import"./cc-icon.js";import"./cc-img.js";class d extends t{static get properties(){return{a11yDesc:{type:String,attribute:"a11y-desc"},disableExternalLinkIcon:{type:Boolean,attribute:"disable-external-link-icon"},download:{type:String},href:{type:String},icon:{type:Object},iconA11yName:{type:String,attribute:"icon-a11y-name"},image:{type:String},imgA11yName:{type:String,attribute:"img-a11y-name"},mode:{type:String,reflect:!0},skeleton:{type:Boolean},_title:{type:String,state:!0}}}constructor(){super(),this.a11yDesc=null,this.disableExternalLinkIcon=!1,this.download=null,this.href="",this.icon=null,this.iconA11yName=null,this.imgA11yName=null,this.image=null,this.mode="default",this.skeleton=!1,this._title=""}_isDifferentOrigin(t){try{return new URL(t,location.href).origin!==location.origin}catch{return!0}}_getTitle(t,e,o){if(e){const e=c(t)?o:t;return a("cc-link.new-window.title",{linkText:e})}return c(t)?null:t}_onSlotChange(t){const e=t.target;this._title=e.assignedNodes().map((t=>t.textContent)).join("").trim()}render(){const t=null==this.href||this.skeleton?null:this.href,o=this._isDifferentOrigin(t),c=o?"_blank":null,s=o?"noreferrer":null,d=this.disableExternalLinkIcon||"default"!==this.mode,m=this._getTitle(this.a11yDesc,o,this._title);return e`
      <div class="cc-link ${n({skeleton:this.skeleton})}">
        ${null!=this.image&&null==this.icon?e` <cc-img src=${this.image} a11y-name="${this.imgA11yName}" part="img"></cc-img> `:""}
        ${null!=this.icon?e` <cc-icon class="cc-link__icon" .icon="${this.icon}" a11y-name="${this.iconA11yName}"></cc-icon> `:""}
        <a
          href=${i(t)}
          target=${i(c)}
          rel=${i(s)}
          title="${i(m)}"
          download=${i(this.download)}
        >
          <span class="link-slot">
            <slot @slotchange="${this._onSlotChange}"></slot>
          </span>
          ${o&&!d?e`<cc-icon
                class="cc-link__external-icon"
                .icon=${r}
                a11y-name=${a("cc-link.new-window.name")}
              ></cc-icon>`:""}
          ${null!=this.download&&"default"===this.mode?e`<cc-icon
                .icon=${l}
                a11y-name=${a("cc-link.download.icon-a11y-name")}
              ></cc-icon>`:""}
        </a>
      </div>
    `}static get styles(){return[s,o`
        :host {
          color: var(--cc-color-text-primary-highlight, blue);
          display: inline;
        }

        .cc-link,
        a {
          align-items: center;
          display: inline-flex;
          gap: 0.5em;
        }

        .link-slot {
          text-decoration: underline;
        }

        /* region link base styles */
        a,
        a:visited,
        a:active {
          color: var(--cc-color-text-primary-highlight, blue);
          gap: 0.1em;
          text-decoration: none;
        }

        /* endregion */

        /* region focus states */
        a:focus {
          outline: none;
        }

        .cc-link:focus-within {
          background-color: var(--cc-color-bg-default, #fff);
          border-radius: var(--cc-border-radius-small, 0.15em);
          outline: var(--cc-focus-outline, #000 solid 2px);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        a::-moz-focus-inner {
          border: 0;
        }
        /* endregion */

        /* region icon & image styles */
        cc-img {
          height: 1em;
          min-height: 0;
          padding: 0;
          width: 1em;
        }
        /* endregion */

        /* region skeleton state */
        .cc-link.skeleton {
          background-color: var(--cc-color-text-primary-weak, hsl(209deg 98% 73%));

          --cc-icon-color: transparent;
        }

        .cc-link.skeleton cc-img {
          display: none;
        }

        .cc-link.skeleton a {
          color: transparent;
        }
        /* endregion */

        /* region Subtle */
        :host([mode='subtle']),
        :host([mode='subtle']) a,
        :host([mode='subtle']) a:active,
        :host([mode='subtle']) a:visited {
          color: var(--cc-color-text-weak);
        }

        :host([mode='subtle']) .link-slot {
          text-decoration: none;
        }

        :host([mode='subtle']) .skeleton .link-slot {
          color: transparent;
        }

        :host([mode='subtle']) .skeleton {
          background-color: #bbb;
        }
        /* endregion */

        /* region BUTTON */
        :host([mode='button']) .link-slot {
          color: var(--cc-color-text-inverted, #fff);
          font-size: 0.85em;
          text-decoration: none;
        }

        :host([mode='button']) {
          display: inline-block;
        }

        :host([mode='button']) .cc-link {
          background-color: var(--cc-color-bg-primary, #3569aaff);
          border: 1px solid var(--cc-color-bg-primary, #3569aaff);
          border-radius: var(--cc-button-border-radius, 0.15em);
          box-sizing: border-box;
          cursor: pointer;
          display: flex;
          font-weight: var(--cc-button-font-weight, bold);
          justify-content: center;
          min-height: 2em;
          padding: 0 0.5em;
          text-transform: var(--cc-button-text-transform, uppercase);
        }

        :host([mode='button']) .cc-link:hover {
          box-shadow: 0 1px 3px rgb(0 0 0 / 40%);
        }

        :host([mode='button']) .skeleton {
          background-color: #bbb;
          border-color: #777;
          cursor: default;
        }

        :host([mode='button']) .skeleton .link-slot {
          color: transparent;
        }

        :host([mode='button']) .cc-link:hover.skeleton {
          box-shadow: none;
        }

        /* endregion */
      `]}}window.customElements.define("cc-link",d);export{d as CcLink};
//# sourceMappingURL=cc-link.js.map
