import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { u as uniqueId } from './uniqueId.js';
import { d as defineCustomElement$3 } from './telia-icon2.js';
import { d as defineCustomElement$2 } from './telia-vst2.js';

const checkmark = { "name": "checkmark", "svg": "<svg viewBox=\"0 0 64 64\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M57.5438 13.4967L28.717 50.5596C27.9537 51.5407 26.8061 52.147 25.5654 52.2248C25.4755 52.2301 25.3856 52.2332 25.2967 52.2332C24.1476 52.233 23.0455 51.7763 22.233 50.9637L6.63458 35.3654C6.08729 34.8181 5.87354 34.0204 6.07387 33.2728C6.27419 32.5252 6.85815 31.9412 7.60577 31.7409C8.35339 31.5406 9.15109 31.7543 9.69838 32.3016L25.2967 47.8999L54.1225 10.837C54.5976 10.2258 55.3626 9.91453 56.1295 10.0204C56.8963 10.1263 57.5484 10.6332 57.8402 11.3502C58.1319 12.0673 58.0189 12.8855 57.5438 13.4967Z\"/></svg>" };

const teliaChipFilterCss = ".telia-chip-filter .telia-chip-filter__wrapper{display:inline-block;position:relative}.telia-chip-filter .telia-chip-filter__wrapper:hover .telia-chip-filter__input:not(:disabled):not(:checked)~.telia-chip-filter__label:not(:active){border:calc(0.2rem * var(--voca-rem-multiplier)) solid #29003e;padding:calc(calc(0.8rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.6rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)))}.telia-chip-filter .telia-chip-filter__wrapper:hover .telia-chip-filter__input:not(:disabled):not(:checked)~.telia-chip-filter__label:not(:active)~.telia-chip-filter__svg{stroke:#29003e}.telia-chip-filter__input{opacity:0;position:absolute}.telia-chip-filter__input:focus~.telia-chip-filter__label::before{border-radius:calc(0.8rem * var(--voca-rem-multiplier));box-shadow:0 0 0 calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;bottom:calc(-1 * calc(0.2rem * var(--voca-rem-multiplier)));content:\"\";display:block;left:calc(-1 * calc(0.2rem * var(--voca-rem-multiplier)));position:absolute;right:calc(-1 * calc(0.2rem * var(--voca-rem-multiplier)));top:calc(-1 * calc(0.2rem * var(--voca-rem-multiplier)))}.telia-chip-filter__input:focus:not(:focus-visible)~.telia-chip-filter__label::before{box-shadow:none}.telia-chip-filter__input:checked~.telia-chip-filter__label{border:calc(0.2rem * var(--voca-rem-multiplier)) solid #29003e;background-color:#29003e;color:#ffffff;padding:calc(calc(0.8rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.6rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)))}.telia-chip-filter__input:checked~.telia-chip-filter__svg{stroke:#ffffff}.telia-chip-filter__input:disabled~.telia-chip-filter__label{background-color:transparent;border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3);color:rgba(0, 0, 0, 0.4);cursor:not-allowed;padding:calc(0.8rem * var(--voca-rem-multiplier)) calc(1.6rem * var(--voca-rem-multiplier))}.telia-chip-filter__input:disabled~.telia-chip-filter__svg{stroke:rgba(0, 0, 0, 0.3)}.telia-chip-filter__label{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #29003e;border-radius:calc(0.8rem * var(--voca-rem-multiplier));color:#29003e;font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:normal;font-size:calc(1.6rem * var(--voca-rem-multiplier));line-height:1.5;align-items:center;box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:calc(1.6rem * var(--voca-rem-multiplier));line-height:calc(\n      calc(2.4rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))\n    );padding:calc(0.8rem * var(--voca-rem-multiplier)) calc(1.6rem * var(--voca-rem-multiplier));transition:background-color 0.3s, border-color 0.3s}.telia-chip-filter__label:active{background-color:#edc8ff;border:calc(0.2rem * var(--voca-rem-multiplier)) solid #edc8ff;padding:calc(calc(0.8rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.6rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)))}.telia-chip-filter__label:active .telia-chip-filter__input:not(:checked)~.telia-chip-filter__svg{stroke:#29003e}.telia-chip-filter__input:not(:checked)~.telia-chip-filter__label>.telia-chip-filter__checkmark{display:block;min-width:0;transform-origin:center;transition:all 0.15s;visibility:hidden;width:0}.telia-chip-filter__input:checked~.telia-chip-filter__label>.telia-chip-filter__checkmark{animation-duration:0.15s;animation-name:fadeIn;display:block;margin-left:calc(1.2rem * var(--voca-rem-multiplier))}.telia-chip-filter__input:checked:hover:not(:disabled)~.telia-chip-filter__label{border:calc(0.2rem * var(--voca-rem-multiplier)) solid #5e0092;background-color:#5e0092}.telia-chip-filter__input:checked:active:not(:disabled)~.telia-chip-filter__label{border:calc(0.2rem * var(--voca-rem-multiplier)) solid #edc8ff;background-color:#edc8ff;color:#29003e}.telia-chip-filter .telia-chip-filter__checkmark{display:none;height:calc(2rem * var(--voca-rem-multiplier))}@keyframes fadeIn{from{min-width:0;opacity:30%;width:0}to{opacity:100%}}";

const TeliaChipFilter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    /** Set chip disabled */
    this.disabled = false;
    /** Input element id */
    this.inputId = uniqueId('input');
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-chip-filter';
    /**
     * Renders content passed in via props or fallbacks to slot
     * @private
     */
    this.renderContent = () => {
      if (this.text) {
        return this.text;
      }
      return h("slot", null);
    };
  }
  componentDidRender() {
    // This check is for Stencil unit tests. Input element is mocked,
    // but setCustomValidity method is not. It is undefined.
    var _a;
    // eslint-disable-next-line @stencil/strict-boolean-conditions
    if (this.htmlForm) {
      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setAttribute('form', this.htmlForm);
    }
  }
  render() {
    return (h(Host, { class: "telia-chip-filter" }, h("div", { class: "telia-chip-filter__wrapper" }, h("input", { id: this.inputId, class: "telia-chip-filter__input", type: "checkbox", name: this.name, ref: ref => (this.inputElement = ref), value: this.value, disabled: this.disabled, checked: this.checked, form: this.htmlForm }), h("label", { class: "telia-chip-filter__label", htmlFor: this.inputId, onClick: ev => ev.stopPropagation() }, this.renderContent(), h("telia-icon", { svg: checkmark.svg, class: "telia-chip-filter__checkmark" })), h("telia-vst", { dataTrackingId: this.dataTrackingId }))));
  }
  static get style() { return teliaChipFilterCss; }
}, [4, "telia-chip-filter", {
    "dataTestid": [1, "data-testid"],
    "disabled": [4],
    "htmlForm": [1, "html-form"],
    "inputId": [1, "input-id"],
    "value": [1],
    "name": [1],
    "checked": [4],
    "text": [1]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-chip-filter", "telia-icon", "telia-vst"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-chip-filter":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaChipFilter$1);
      }
      break;
    case "telia-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "telia-vst":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const TeliaChipFilter = TeliaChipFilter$1;
const defineCustomElement = defineCustomElement$1;

export { TeliaChipFilter, defineCustomElement };
