furnview/furnplan-dev.git

import { i, r, x } from './query-assigned-elements-fea1f631.js';
import { e } from './custom-element-30fc6381.js';
import { n, B as BaseElement } from './base.component-813fc7cf.js';
import { StyleHelper } from './style.helper.js';
import '@dh-software/furnview-icons';
 
var css_248z = i`.close-symbol{cursor:pointer;height:100%;position:relative;width:100%}.close-symbol.loading{z-index:999}.close-symbol.loading:after,.close-symbol.loading:before{background:#fff}.close-symbol:after,.close-symbol:before{background:var(--close-symbol-background,#888);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;content:" ";height:1px;margin:0;padding:0;position:absolute;top:50%;width:100%}.close-symbol:after:hover,.close-symbol:before:hover{background:var(--close-symbol-background-hover,#333)}.close-symbol:after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}.close-symbol:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}:host(.active) .circle-number-symbol{border:var(--circle-number-symbol-border-active,2px solid #000)}.circle-number-symbol{align-items:center;background:var(--circle-number-symbol-background,var(--primary-color,red));border:var(--circle-number-symbol-border,2px solid #fff);border-radius:50%;box-shadow:var(--circle-number-symbol-box-shadow,1px 2px 5px 0 #000);color:var(--circle-number-symbol-color,var(--primary-text-color,#000));display:flex;height:var(--circle-number-symbol-size,30px);justify-content:center;position:relative;width:var(--circle-number-symbol-size,30px)}.custom-symbol{cursor:pointer;display:flex;left:10px;position:relative}.custom-symbol.up:after{background-image:var(--custom-symbol-image-down,url("/webui/images/minus.svg"));content:"";height:18px}.custom-symbol.down:after{background-image:var(--custom-symbol-image-down,url("/webui/images/plus.svg"));content:"";height:18px}.custom-symbol:after{color:#1e1e1e;margin:auto 0;padding:0 0 2px;pointer-events:none;transform:translateX(-15px);width:18px}.accordion-symbol{cursor:pointer;display:flex;left:10px;position:relative}.accordion-symbol.up:after{content:"-";font-size:xx-large;transform:scaleX(2) translateX(-4px)}.accordion-symbol.down:after{content:"+";font-size:xx-large}.accordion-symbol:after{color:#1e1e1e;margin:auto 0;padding:0 0 2px;pointer-events:none;transform:translateX(-15px);width:18px}.chevron-symbol{cursor:pointer;left:10px;position:relative}.chevron-symbol.up:after{content:"<"}.chevron-symbol.down:after{content:">"}.chevron-symbol:after{color:inherit;font:17px Consolas,monospace;padding:0 0 2px;pointer-events:none;position:absolute;-webkit-transform:rotate(90deg) translateX(-100%);-moz-transform:rotate(90deg) translateX(-100%);-ms-transform:rotate(90deg) translateX(-100%);transform:rotate(90deg) translateX(-100%)}@media (width >= 980px){.only-mobile{display:none!important}}@media (width <= 980px){.only-desktop{display:none!important}}.bold{font-weight:var(--global-font-weight-bold,600)}*{font-family:var(--global-font,Roboto);font-weight:var(--global-font-weight,400);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container{display:flex;margin:10px 0}.container.column{flex-direction:column}.container.column.reverse{flex-direction:column-reverse}.container.row{flex-direction:row}.container.row.reverse{flex-direction:row-reverse}.fluid{flex:1}.fluid.space-after{margin-right:55px}.hidden{display:none!important}.mobile-mode-hide,:host(.mobile-mode-hide){display:none!important}.invisible{visibility:hidden!important}.invisible-scroll,:host(.invisible-scroll){margin-right:-22px;overflow:hidden}.invisible-scroll>:first-child,:host(.invisible-scroll)>:first-child{box-sizing:content-box;overflow-x:hidden;overflow-y:scroll;padding-right:22px}.invisible-scroll.bottom,:host(.invisible-scroll.bottom){margin-right:unset;overflow:hidden}.invisible-scroll.bottom>:first-child,:host(.invisible-scroll.bottom)>:first-child{box-sizing:content-box;margin-bottom:-22px;overflow-x:scroll;overflow-y:hidden;padding-bottom:22px;padding-right:unset}:host([disabled]){filter:contrast(.5) grayscale(1);pointer-events:none}*{scrollbar-color:#5c5c5c hsla(0,0%,100%,.004);scrollbar-width:thin}[disabled]{filter:contrast(.5) grayscale(1);pointer-events:none}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar,::-webkit-scrollbar-corner{background:hsla(0,0%,100%,0)}::-webkit-scrollbar-thumb{background:#5c5c5c;-webkit-border-radius:8px}::-webkit-scrollbar-button,::-webkit-scrollbar-button:horizontal:end:decrement,::-webkit-scrollbar-button:horizontal:end:increment,::-webkit-scrollbar-button:vertical:end:decrement,::-webkit-scrollbar-button:vertical:start:increment{background-color:transparent;border:none;color:transparent}:host{align-self:var(--button-align-self,unset);aspect-ratio:var(--fv-button-aspect-ratio,auto);background-color:var(--primary-color,red);box-shadow:var(--fv-button-box-shadow,unset);cursor:pointer;display:flex;height:auto;margin:var(--fv-button-host-margin,unset);min-height:var(--button-min-height,0);min-width:var(--fv-button-min-width,60px);padding:var(--fv-button-host-padding,unset);width:auto;z-index:var(--button-zIndex,2)}:host.hidden{display:none}:host button{background-color:var(--fv-button-html-button-background-color,inherit);border:none;border-right:var(--button-border-right,unset);color:var(--primary-button-text-color,#fff);cursor:inherit;font-family:inherit;font-size:var(--button-font-size,unset);margin:var(--button-margin,auto);min-height:inherit;min-width:var(--fv-button-html-button-min-width,80px);padding:var(--fv-button-html-button-padding,0)}:host button>span{align-items:var(--button-inner-align-items,end);display:inline-flex;flex-direction:var(--button-inner-flex-direction,unset);gap:var(--button-inner-gap,unset);height:var(--button-span-height,inherit);justify-content:var(--button-inner-justify-content,unset);margin:var(--button-span-margin,16px);width:var(--button-inner-width,inherit)}:host button>span .loader-slot,:host button>span slot[name=active]{display:none}:host button>span>img{margin:var(--button-img-margin,auto 12px auto auto);max-height:24px;max-width:32px}:host(.bordered){background-color:var(--bordered-background-color,#fff);border:var(--button-border-size,2px) solid var(--bordered-color,red);border-radius:var(--button-border-radius,unset);overflow:var(--button-bordered-overflow,unset)}:host(.bordered) button{color:var(--bordered-text-color,var(--bordered-color,red))}:host(.bordered.active){background-color:var(--bordered-background-color-active,var(--bordered-background-color,#fff))}:host(.disabled.bordered){border:var(--button-border-size,2px) solid var(--disabled-bordered-color,var(--bordered-color,red))}:host(.disabled.bordered) button{color:var(--disabled-bordered-color,var(--bordered-color,red))}:host([disabled]){color:var(--primary-disabled-button-text-color,var(--primary-button-text-color,#fff));outline:none;z-index:0}:host(:hover) button{font-weight:var(--button-hover-font-weight,var(--global-font-weight,400))}:host(:hover.custom-hover-color) button{color:var(--primary-button-text-hover-color,#fff)}:host([toggleable].active) button span slot[name=inactive]{display:none}:host([toggleable].active) button span slot[name=active]{display:initial}:host(.active){background-color:var(--primary-button-active-background-color,var(--primary-color,red))}:host(.active) button{color:var(--primary-button-text-active-color,#fff)}:host(:active.custom-click-color){background-color:var(--button-custom-click-background-color,unset)!important;transition:all .15s ease}:host(.cover){height:100%;width:100%}:host(.fill-height){height:var(--button-fill-height,100%)}:host(.fill-height) button{height:var(--button-fill-height-button-height,unset)}:host(:hover.custom-hover-border){background-color:var(--button-custom-hover-background-color,var(--button-border-size,2px) solid var(--bordered-color,red));border:var(--button-custom-hover-border,var(--bordered-background-color,#fff))}:host(.loading) button>span .loader-slot{display:flex}:host(.show-on-mobile){display:none}@media (width <= 520px){:host{margin:var(--fv-button-host-mobile-margin,var(--fv-button-host-margin,unset));padding:var(--fv-button-host-mobile-padding,var(--fv-button-host-padding,unset))}:host button>span{margin:var(--button-span-mobile-margin,var(--button-span-margin,16px));width:var(--button-mobile-inner-width,var(--button-inner-width,inherit))}:host(.hide-on-mobile){display:none}:host(.show-on-mobile){display:flex}}@media (width >= 520px) and (width <= 980px){:host{margin:var(--fv-button-host-mobile-margin,var(--fv-button-host-margin,unset));padding:var(--fv-button-host-mobile-padding,var(--fv-button-host-padding,unset))}:host button>span{margin:var(--button-span-mobile-margin,var(--button-span-margin,16px));width:var(--button-mobile-inner-width,var(--button-inner-width,inherit))}:host(.hide-on-mobile){display:none}:host(.show-on-mobile){display:flex}}`;
 
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getProtoOf = Object.getPrototypeOf;
var __reflectGet = Reflect.get;
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;
};
var __superStaticGet = (obj, member) => __reflectGet(__getProtoOf(obj), member, obj);
let ButtonComponent = class extends BaseElement {
  constructor() {
    super();
    this.disabled = false;
    this.toggleable = false;
    this.icon = "";
    this.addEventListener("click", (e) => {
      if (this.classList.contains("disabled")) {
        e.preventDefault();
        e.stopPropagation();
      }
    });
    this.addEventListener("click", () => {
      if (this.toggleable) {
        if (this.classList.contains("active")) {
          this.classList.remove("active");
        } else {
          this.classList.add("active");
        }
      }
    });
  }
  buildIcon() {
    if (this.icon.length > 0) {
      return x`<i part="icon" class="icon ${this.icon}"></i>`;
    }
    return x`${StyleHelper.getVar(this, "--button-image") ? x`<img part="icon" src="${StyleHelper.getVar(this, "--button-image")}">` : ""}`;
  }
  render() {
    return x`
            <button part="button">
                <span>
                    ${this.buildIcon()}
                    <slot></slot>
                    <slot name="inactive"></slot>
                    <slot name="active"></slot>
                    <slot class="loader-slot" name="loader"></slot>
                </span>
            </button>
        `;
  }
};
ButtonComponent.styles = [
  __superStaticGet(ButtonComponent, "styles") || [],
  i`${r(css_248z)}`
];
__decorateClass([
  n({ type: Boolean, reflect: true })
], ButtonComponent.prototype, "disabled", 2);
__decorateClass([
  n({ type: Boolean, reflect: true })
], ButtonComponent.prototype, "toggleable", 2);
__decorateClass([
  n({ type: String, reflect: true })
], ButtonComponent.prototype, "icon", 2);
ButtonComponent = __decorateClass([
  e("fv-button")
], ButtonComponent);
 
export { ButtonComponent };