web-component-base-class/dist/web-component-base-class.js

Base class to simplify the creation of web components

import{createQuickAccess as e,dashesToCamelCase as t,camelCaseToDashes as s}from"./tools.js";const r="web-component-base-element";export class WebComponentBaseClass extends HTMLElement{#e;#t;get is(){return this.tagName.toLowerCase()??r}static get template(){return""}static get properties(){return{}}static get observedAttributes(){return this.properties?Object.keys(this.properties).map((e=>s(e))):[]}constructor(){super(),this.#t={},this.$=void 0,this.$$=()=>{},this.$$$=()=>[],console.assert(this.is!==r,"Error, don't forget to register your custom element using window.customElements.define('name-of-element', MyElement)"),this.#s(this.constructor.template),this.#e=[]}addAutoEventListener(e,t,s){let r;return this.#e.find((r=>r.element===e&&r.event===t&&r.handler===s))||(this.#e.push({element:e,event:t,handler:s}),e.addEventListener(t,s),r=()=>this.removeAutoEventListener(e,t,s)),r}removeAutoEventListener(e,t,s){const r=this.#e.findIndex((r=>r.element===e&&r.event===t&&r.handler===s));-1!==r&&(this.#e.splice(r,1),e.removeEventListener(t,s))}refreshQuickAccess(){this.$=e(this.shadowRoot,"id")}connectedCallback(){this.#r(this.constructor.properties),this.attached&&this.attached(),this.onAttached&&this.onAttached(this),Object.defineProperty(this,"onAttached",{get(){},set(e){e(this)}})}disconnectedCallback(){this.detached&&this.detached(),this.onDetached&&this.onDetached(this),this.#e.forEach((e=>e.element.removeEventListener(e.event,e.handler)))}attributeChangedCallback(e,s,r){const i=t(e);this.#i(this),this.constructor.properties[i]&&this.constructor.properties[i].type===Boolean&&(s=!!(""===s||s&&"false"!==s),r=!!(""===r||r&&"false"!==r)),s!==r&&(this[i]=r)}#i(){this.$||(this.$=e(this.shadowRoot,"id"),this.$$=e=>this.shadowRoot.querySelector(e),this.$$$=e=>Array.from(this.shadowRoot.querySelectorAll(e)))}#r(e){if(this.#i(),e){const t={};Object.keys(e).forEach((r=>{const i=e[r],o=s(r);t[r]=this[r],Object.defineProperty(this,r,{get(){return this.#t[r]},set(e){const t=this.#t[r];let s=e=>e.toString();switch(i.type){case Array:this.#t[r]="string"==typeof e?JSON.parse(e):Array.isArray(e)?e:[],s=e=>JSON.stringify(e);break;case Boolean:this.#t[r]=e&&"false"!==e,s=()=>"";break;case Number:this.#t[r]=(void 0===e?0:Number(e))||0;break;case Object:this.#t[r]="string"==typeof e?JSON.parse(e):"object"==typeof e?e:{},s=e=>JSON.stringify(e);break;case String:this.#t[r]=(null==e?"":String(e))||""}i.observer&&("function"==typeof i.observer?t!==this.#t[r]&&i.observer(this,this.#t[r],t):this[i.observer]?t!==this.#t[r]&&this[i.observer](this.#t[r],t):console.warn(`The observer with the name: '${i.observer}' was not found inside the class for web component ${this.is}. Make sure that you added a public function with the name '${i.observer}' to the class.`)),i.reflectToAttribute&&(this.#t[r]?this.setAttribute(o,s(this.#t[r])):this.removeAttribute(o))}})})),Object.keys(e).forEach((r=>{const i=e[r],o=s(r);let n;const a=t[r];if(a)switch(i.type){case Array:Array.isArray(a)&&(this[r]=a);break;case Boolean:"boolean"==typeof a&&(this[r]=a);break;case Number:"number"==typeof a&&(this[r]=a);break;case Object:"object"==typeof a&&(this[r]=a);break;case String:"string"==typeof a&&(this[r]=a)}if(this.hasAttribute(o)&&(n=this.getAttribute(o)),i.reflectToAttribute||void 0===this[r])if(void 0!==n)switch(i.type){case Array:this[r]=JSON.parse(n);break;case Boolean:this[r]="false"!==n;break;case Number:this[r]=Number(n);break;case Object:this[r]=JSON.parse(n);break;case String:this[r]=String(n)}else switch(i.type){case Array:this[r]=i.value||[];break;case Boolean:this[r]=i.value||!1;break;case Number:this[r]=i.value||0;break;case Object:this[r]=i.value||{};break;case String:this[r]=i.value||""}}))}}#s(e){const t=document.createElement("div");t.innerHTML=e.trim();let s=t.firstChild;s instanceof HTMLTemplateElement||(s=document.createElement("template"),s.innerHTML=t.innerHTML);this.attachShadow({mode:"open"}).appendChild(s.content.cloneNode(!0))}}
//# sourceMappingURL=web-component-base-class.js.map