@haxtheweb/haxcms-nodejs/dist/public/build/es6/node_modules/wired-elements/lib/wired-button.js

HAXcms single and multisite nodejs server, api, and administration

var t=this&&this.__decorate||function(t,e,i,o){var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,o);else for(var h=t.length-1;h>=0;h--)(s=t[h])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r},e=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};import{WiredBase as i,BaseCSS as o}from"./wired-base.js";import{rectangle as s,line as n}from"./wired-lib.js";import{css as r,html as h}from"../../lit/index.js";import{customElement as a,property as d,query as c}from"../../lit/decorators.js";let l=class WiredButton extends i{constructor(){super(),this.elevation=1,this.disabled=!1,this.roAttached=!1,window.ResizeObserver&&(this.ro=new window.ResizeObserver((()=>{this.svg&&this.wiredRender(!0)})))}static get styles(){return[o,r`
        :host {
          display: inline-block;
          font-size: 14px;
        }
        path {
          transition: transform 0.05s ease;
        }
        button {
          position: relative;
          user-select: none;
          border: none;
          background: none;
          font-family: inherit;
          font-size: inherit;
          cursor: pointer;
          letter-spacing: 1.25px;
          text-transform: uppercase;
          text-align: center;
          padding: 10px;
          color: inherit;
          outline: none;
        }
        button[disabled] {
          opacity: 0.6 !important;
          background: rgba(0, 0, 0, 0.07);
          cursor: default;
          pointer-events: none;
        }
        button:active path {
          transform: scale(0.97) translate(1.5%, 1.5%);
        }
        button:focus path {
          stroke-width: 1.5;
        }
        button::-moz-focus-inner {
          border: 0;
        }
      `]}render(){return h`
    <button ?disabled="${this.disabled}">
      <slot @slotchange="${this.wiredRender}"></slot>
      <div id="overlay">
        <svg></svg>
      </div>
    </button>
    `}focus(){this.button?this.button.focus():super.focus()}canvasSize(){if(this.button){const t=this.button.getBoundingClientRect(),e=Math.min(Math.max(1,this.elevation),5);return[t.width+2*(e-1),t.height+2*(e-1)]}return this.lastSize}draw(t,e){const i=Math.min(Math.max(1,this.elevation),5),o={width:e[0]-2*(i-1),height:e[1]-2*(i-1)};s(t,0,0,o.width,o.height,this.seed);for(let e=1;e<i;e++)n(t,2*e,o.height+2*e,o.width+2*e,o.height+2*e,this.seed).style.opacity=""+(75-10*e)/100,n(t,o.width+2*e,o.height+2*e,o.width+2*e,2*e,this.seed).style.opacity=""+(75-10*e)/100,n(t,2*e,o.height+2*e,o.width+2*e,o.height+2*e,this.seed).style.opacity=""+(75-10*e)/100,n(t,o.width+2*e,o.height+2*e,o.width+2*e,2*e,this.seed).style.opacity=""+(75-10*e)/100}updated(){super.updated(),this.roAttached||this.attachResizeListener()}disconnectedCallback(){this.detachResizeListener()}attachResizeListener(){this.button&&this.ro&&(this.ro.observe(this.button),this.roAttached=!0)}detachResizeListener(){this.button&&this.ro&&this.ro.unobserve(this.button),this.roAttached=!1}};t([d({type:Number}),e("design:type",Object)],l.prototype,"elevation",void 0),t([d({type:Boolean,reflect:!0}),e("design:type",Object)],l.prototype,"disabled",void 0),t([c("button"),e("design:type",HTMLButtonElement)],l.prototype,"button",void 0),l=t([a("wired-button"),e("design:paramtypes",[])],l);export{l as WiredButton};