import { E, b as T, T as TailwindStyledElement, x as x$1 } from '../../index-Ctu_Y4Qk.js';
import { n as n$2, t as t$2 } from '../../property-B5uoP6xb.js';
import { i as i$1, t as t$1, e as e$1 } from '../../directive-BKuZRRPO.js';
import { f as f$1 } from '../../directive-helpers-Yz_0kl3v.js';

/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const s=(i,t)=>{const e=i._$AN;if(void 0===e)return  false;for(const i of e)i._$AO?.(t,false),s(i,t);return  true},o$1=i=>{let t,e;do{if(void 0===(t=i._$AM))break;e=t._$AN,e.delete(i),i=t;}while(0===e?.size)},r$1=i=>{for(let t;t=i._$AM;i=t){let e=t._$AN;if(void 0===e)t._$AN=e=new Set;else if(e.has(i))break;e.add(i),c(t);}};function h(i){ void 0!==this._$AN?(o$1(this),this._$AM=i,r$1(this)):this._$AM=i;}function n$1(i,t=false,e=0){const r=this._$AH,h=this._$AN;if(void 0!==h&&0!==h.size)if(t)if(Array.isArray(r))for(let i=e;i<r.length;i++)s(r[i],false),o$1(r[i]);else null!=r&&(s(r,false),o$1(r));else s(this,i);}const c=i=>{i.type==t$1.CHILD&&(i._$AP??=n$1,i._$AQ??=h);};class f extends i$1{constructor(){super(...arguments),this._$AN=void 0;}_$AT(i,t,e){super._$AT(i,t,e),r$1(this),this.isConnected=i._$AU;}_$AO(i,t=true){i!==this.isConnected&&(this.isConnected=i,i?this.reconnected?.():this.disconnected?.()),t&&(s(this,i),o$1(this));}setValue(t){if(f$1(this._$Ct))this._$Ct._$AI(t,this);else {const i=[...this._$Ct._$AH];i[this._$Ci]=t,this._$Ct._$AI(i,this,0);}}disconnected(){}reconnected(){}}

const i=new WeakMap;class t{constructor(t,s){this.startPaused=false,this.disabled=false,this.clients=new Set,this.pendingComplete=false,this.host=t,this.defaultOptions=s.defaultOptions||{},this.startPaused=!!s.startPaused,this.disabled=!!s.disabled,this.onComplete=s.onComplete,i.set(this.host,this);}async add(i){this.clients.add(i),this.startPaused&&i.webAnimation?.pause(),this.pendingComplete=true,await i.finished,this.pendingComplete&&!this.isAnimating&&(this.pendingComplete=false,this.onComplete?.());}remove(i){this.clients.delete(i);}pause(){this.clients.forEach((i=>i.webAnimation?.pause()));}play(){this.clients.forEach((i=>i.webAnimation?.play()));}cancel(){this.clients.forEach((i=>i.webAnimation?.cancel())),this.clients.clear();}finish(){this.clients.forEach((i=>i.webAnimation?.finish())),this.clients.clear();}togglePlay(){this.isPlaying?this.pause():this.play();}get isAnimating(){return this.clients.size>0}get isPlaying(){return Array.from(this.clients).some((i=>"running"===i.webAnimation?.playState))}async finished(){await Promise.all(Array.from(this.clients).map((i=>i.finished)));}}

let o=0;const r=new Map,n=new WeakSet,a=()=>new Promise((t=>requestAnimationFrame(t))),g=(t,i)=>{const s=t-i;return 0===s?void 0:s},w=(t,i)=>{const s=t/i;return 1===s?void 0:s},N={left:(t,i)=>{const s=g(t,i);return {value:s,transform:null==s||isNaN(s)?void 0:`translateX(${s}px)`}},top:(t,i)=>{const s=g(t,i);return {value:s,transform:null==s||isNaN(s)?void 0:`translateY(${s}px)`}},width:(t,i)=>{let s;0===i&&(i=1,s={width:"1px"});const e=w(t,i);return {value:e,overrideFrom:s,transform:null==e||isNaN(e)?void 0:`scaleX(${e})`}},height:(t,i)=>{let s;0===i&&(i=1,s={height:"1px"});const e=w(t,i);return {value:e,overrideFrom:s,transform:null==e||isNaN(e)?void 0:`scaleY(${e})`}}},A={duration:333,easing:"ease-in-out"},b=["left","top","width","height","opacity","color","background"],j=new WeakMap;class x extends f{constructor(t){if(super(t),this.t=false,this.i=null,this.o=null,this.h=true,this.shouldLog=false,t.type===t$1.CHILD)throw Error("The `animate` directive must be used in attribute position.");this.createFinished();}createFinished(){this.resolveFinished?.(),this.finished=new Promise((t=>{this.l=t;}));}async resolveFinished(){this.l?.(),this.l=void 0;}render(i){return E}getController(){return i.get(this.u)}isDisabled(){return this.options.disabled||this.getController()?.disabled}update(t,[i]){const s=void 0===this.u;return s&&(this.u=t.options?.host,this.u.addController(this),this.u.updateComplete.then((t=>this.t=true)),this.element=t.element,j.set(this.element,this)),this.optionsOrCallback=i,(s||"function"!=typeof i)&&this.p(i),this.render(i)}p(t){t=t??{};const i=this.getController();void 0!==i&&((t={...i.defaultOptions,...t}).keyframeOptions={...i.defaultOptions.keyframeOptions,...t.keyframeOptions}),t.properties??=b,this.options=t;}m(){const t={},i=this.element.getBoundingClientRect(),s=getComputedStyle(this.element);return this.options.properties.forEach((e=>{const h=i[e]??(N[e]?void 0:s[e]),o=Number(h);t[e]=isNaN(o)?h+"":o;})),t}v(){let t,i=true;return this.options.guard&&(t=this.options.guard(),i=((t,i)=>{if(Array.isArray(t)){if(Array.isArray(i)&&i.length===t.length&&t.every(((t,s)=>t===i[s])))return  false}else if(i===t)return  false;return  true})(t,this._)),this.h=this.t&&!this.isDisabled()&&!this.isAnimating()&&i&&this.element.isConnected,this.h&&(this._=Array.isArray(t)?Array.from(t):t),this.h}hostUpdate(){"function"==typeof this.optionsOrCallback&&this.p(this.optionsOrCallback()),this.v()&&(this.A=this.m(),this.i=this.i??this.element.parentNode,this.o=this.element.nextSibling);}async hostUpdated(){if(!this.h||!this.element.isConnected||this.options.skipInitial&&!this.isHostRendered)return;let t;this.prepare(),await a;const i=this.O(),s=this.j(this.options.keyframeOptions,i),e=this.m();if(void 0!==this.A){const{from:s,to:h}=this.N(this.A,e,i);this.log("measured",[this.A,e,s,h]),t=this.calculateKeyframes(s,h);}else {const s=r.get(this.options.inId);if(s){r.delete(this.options.inId);const{from:h,to:n}=this.N(s,e,i);t=this.calculateKeyframes(h,n),t=this.options.in?[{...this.options.in[0],...t[0]},...this.options.in.slice(1),t[1]]:t,o++,t.forEach((t=>t.zIndex=o));}else this.options.in&&(t=[...this.options.in,{}]);}this.animate(t,s);}resetStyles(){ void 0!==this.P&&(this.element.setAttribute("style",this.P??""),this.P=void 0);}commitStyles(){this.P=this.element.getAttribute("style"),this.webAnimation?.commitStyles(),this.webAnimation?.cancel();}reconnected(){}async disconnected(){if(!this.h)return;if(void 0!==this.options.id&&r.set(this.options.id,this.A),void 0===this.options.out)return;if(this.prepare(),await a(),this.i?.isConnected){const t=this.o&&this.o.parentNode===this.i?this.o:null;if(this.i.insertBefore(this.element,t),this.options.stabilizeOut){const t=this.m();this.log("stabilizing out");const i=this.A.left-t.left,s=this.A.top-t.top;!("static"===getComputedStyle(this.element).position)||0===i&&0===s||(this.element.style.position="relative"),0!==i&&(this.element.style.left=i+"px"),0!==s&&(this.element.style.top=s+"px");}}const t=this.j(this.options.keyframeOptions);await this.animate(this.options.out,t),this.element.remove();}prepare(){this.createFinished();}start(){this.options.onStart?.(this);}didFinish(t){t&&this.options.onComplete?.(this),this.A=void 0,this.animatingProperties=void 0,this.frames=void 0,this.resolveFinished();}O(){const t=[];for(let i=this.element.parentNode;i;i=i?.parentNode){const s=j.get(i);s&&!s.isDisabled()&&s&&t.push(s);}return t}get isHostRendered(){const t=n.has(this.u);return t||this.u.updateComplete.then((()=>{n.add(this.u);})),t}j(t,i=this.O()){const s={...A};return i.forEach((t=>Object.assign(s,t.options.keyframeOptions))),Object.assign(s,t),s}N(t,i,s){t={...t},i={...i};const e=s.map((t=>t.animatingProperties)).filter((t=>void 0!==t));let h=1,o=1;return e.length>0&&(e.forEach((t=>{t.width&&(h/=t.width),t.height&&(o/=t.height);})),void 0!==t.left&&void 0!==i.left&&(t.left=h*t.left,i.left=h*i.left),void 0!==t.top&&void 0!==i.top&&(t.top=o*t.top,i.top=o*i.top)),{from:t,to:i}}calculateKeyframes(t,i,s=false){const e={},h={};let o=false;const r={};for(const s in i){const n=t[s],a=i[s];if(s in N){const t=N[s];if(void 0===n||void 0===a)continue;const i=t(n,a);void 0!==i.transform&&(r[s]=i.value,o=true,e.transform=`${e.transform??""} ${i.transform}`,void 0!==i.overrideFrom&&Object.assign(e,i.overrideFrom));}else n!==a&&void 0!==n&&void 0!==a&&(o=true,e[s]=n,h[s]=a);}return e.transformOrigin=h.transformOrigin=s?"center center":"top left",this.animatingProperties=r,o?[e,h]:void 0}async animate(t,i=this.options.keyframeOptions){this.start(),this.frames=t;let s=false;if(!this.isAnimating()&&!this.isDisabled()&&(this.options.onFrames&&(this.frames=t=this.options.onFrames(this),this.log("modified frames",t)),void 0!==t)){this.log("animate",[t,i]),s=true,this.webAnimation=this.element.animate(t,i);const e=this.getController();e?.add(this);try{await this.webAnimation.finished;}catch(t){}e?.remove(this);}return this.didFinish(s),s}isAnimating(){return "running"===this.webAnimation?.playState||this.webAnimation?.pending}log(t,i){this.shouldLog&&!this.isDisabled()&&console.log(t,this.options.id,i);}}const F=e$1(x);

/**
 * @license
 * Copyright 2018 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const e=e$1(class extends i$1{constructor(t){if(super(t),t.type!==t$1.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}});

const style = "p {\n    --tw-bg-opacity: 1;\n    background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1))\n}\np b {\n    --tw-text-opacity: 1;\n    color: rgb(249 115 22 / var(--tw-text-opacity, 1))\n}";

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let LuksoTest = class extends TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.name = "World";
    this.clicked = false;
    this.disabled = false;
    this.duration = 1e3;
    this.controller = new t(this, {
      defaultOptions: {
        keyframeOptions: {
          duration: this.duration,
          fill: "backwards"
        }
      }
    });
  }
  _onClick() {
    if (this.disabled) {
      return;
    }
    this.clicked = true;
    setTimeout(() => {
      this.clicked = false;
    }, 2e3);
  }
  render() {
    const classes = {
      "text-yellow-200": !this.disabled,
      "p-2": true,
      "rounded-full": true,
      "text-24": true,
      "bg-blue-800": this.clicked && !this.disabled,
      "bg-blue-200": !this.clicked && !this.disabled
    };
    return x$1`
      <p class="heading-1">
        Hello,
        <b class="heading-4">${this.name}</b>
        !
      </p>
      <button
        ?disabled=${this.disabled}
        data-testid="button"
        @click=${this._onClick}
        class="hover:text-yellow-700 ${e(classes)}"
        ${F()}
      >
        Hello world! 2
      </button>
    `;
  }
};
__decorateClass([
  n$2()
], LuksoTest.prototype, "name", 2);
__decorateClass([
  n$2()
], LuksoTest.prototype, "clicked", 2);
__decorateClass([
  n$2({ type: Boolean })
], LuksoTest.prototype, "disabled", 2);
LuksoTest = __decorateClass([
  t$2("lukso-test")
], LuksoTest);

export { LuksoTest };
