import{css as t,html as e}from"../../../lit/index.js";import{normalizeEventPath as o}from"../../utils/utils.js";const BootstrapUserStylesMenuMixin=function(s){return class extends s{constructor(){super(),this.hideUserStylesMenu=!0,this.fontSize=1,this.fontFamily=0,this.colorTheme="0";let t=this.getBasePath(decodeURIComponent(import.meta.url));this._bootstrapPath=t+"bootstrap/dist/css/bootstrap.min.css",this.addEventListener("click",this.checkUserStylesMenuOpen.bind(this))}static get styles(){let e=[];return super.styles&&(e=super.styles),[e,t`
          :host([color-theme="0"]) {
          }

          :host([color-theme="0"]) .hcusm {
            border-color: #222222;
          }
          :host([color-theme="0"]) .hcusm simple-popover {
            --simple-popover-color: #222222;
            --simple-popover-background-color: #fafafa;
          }
          #slot ::slotted(*) {
            color: var(--haxcms-user-styles-color-theme-color-color);
          }
          simple-icon-button-lite:not(:defined),
          simple-popover:not(:defined) {
            display: none;
          }
          simple-popover {
            padding: 2px;
          }

          .hcusm.open {
            display: block;
          }
          .hcusm {
            min-width: 160px;
            padding: 0;
            margin: 2px 0 0;
            list-style: none;
            font-size: 14px;
            background-color: transparent;
          }

          .hcusm button,
          .hcusm select {
            text-transform: none;
          }
          .hcusm button,
          .hcusm input {
            line-height: normal;
          }
          .hcusm button,
          .hcusm input,
          .hcusm select,
          .hcusm textarea {
            font-family: inherit;
            font-size: 100%;
            margin: 0;
          }

          .hcusm-settings-container[hidden] {
            display: none;
          }

          /*
          * Light Theme
          */
          .btn-size,
          .btn-font {
            background-color: var(
              --bootstrap-theme-light-secondary-background-color
            );
            color: var(--bootstrap-theme-light-color);
          }

          .btn-size.size-2 {
            font-size: 16px;
          }

          /*
          * Dark Theme
          */

          :host([color-theme="1"]) {
          }

          :host([color-theme="1"]) .hcusm {
            border-color: #222222;
          }

          :host([color-theme="1"])
            .btn-group
            .btn[type="size"]
            .btn[type="font"] {
            background-color: var(
              --bootstrap-theme-light-secondary-background-color
            );
            color: var(--bootstrap-theme-dark-color) !important;
          }

          :host([color-theme="1"]) simple-popover {
            --simple-popover-color: white;
            --simple-popover-background-color: var(
              --bootstrap-theme-dark-secondary-background-color
            );
          }
          :host([color-theme="1"]) .hcusm .dropdown-caret .caret-inner {
            border-bottom: 9px solid
              var(--bootstrap-dark-theme-secondary-background-color);
          }
          :host([color-theme="1"]) .hcusm .hcusm-buttons {
            border-color: #7e888b;
          }
          :host([color-theme="1"]) .hcusm .hcusm-button {
            color: white;
          }
          :host([color-theme="1"]) .hcusm .hcusm-button:hover,
          :host([color-theme="1"]) .hcusm .hcusm-button:focus,
          :host([color-theme="1"]) .hcusm .hcusm-button:active {
            color: #eee8e0;
          }

          /* palenight theme */
          :host([color-theme="2"]) {
            --haxcms-user-styles-color-theme-color-color: var(
              --simple-colors-default-theme-light-blue-1,
              #cfd4e3
            );
          }

          :host([color-theme="2"]) .hcusm {
            border-color: var(--bootstrap-theme-palenight-background-color);
          }

          :host([color-theme="2"]) .btn[type="size"] .btn[type="font"] {
            background-color: var(
              --bootstrap-theme-light-secondary-background-color
            );
            color: var(--bootstrap-theme-palenight-background-color);
          }

          :host([color-theme="2"]) simple-popover {
            --simple-popover-color: white;
            --simple-popover-background-color: var(
              --bootstrap-theme-palenight-secondary-background-color
            );
          }

          :host([color-theme="2"]) .hcusm .dropdown-caret .caret-inner {
            border-bottom: 9px solid
              var(--bootstrap-theme-palenight-secondary-background-color);
          }

          simple-icon-button-lite {
            color: inherit;
          }

          .open {
            text-align: center;
          }

          .btn-group-title {
            font-weight: bold;
          }

          .btn-palenight {
            background-color: var(
              --bootstrap-theme-palenight-secondary-background-color
            );
            color: var(--bootstrap-theme-palenight-color);
          }

          /* override bootstrap default */
          .btn-palenight:hover {
            color: var(--bootstrap-theme-palenight-color);
          }

          .btn-dark {
            background-color: var(
              --bootstrap-theme-dark-secondary-background-color
            );
          }

          .btn-light {
            background-color: var(
              --bootstrap-theme-light-secondary-background-color
            );
          }
        `]}BootstrapUserStylesMenu(){return import("../../simple-icon/simple-icon.js"),import("../../simple-icon/lib/simple-icons.js"),import("../../simple-icon/lib/simple-icon-button-lite.js"),import("../../simple-popover/simple-popover.js"),import("../../simple-tooltip/simple-tooltip.js"),e`
        <link rel="stylesheet" href="${this._bootstrapPath}" />
        <simple-icon-button-lite
          .part="${this.editMode?"edit-mode-active":""}"
          class="btn"
          aria-label="Text settings"
          icon="editor:format-size"
          @click="${this.toggleUserStylesMenu}"
          id="haxcmsuserstylesmenupopover"
        ></simple-icon-button-lite>
        <simple-tooltip for="haxcmsuserstylesmenupopover">
          Text settings
        </simple-tooltip>
        <simple-popover
          class="hcusm pull-left font-settings js-toolbar-action hcusm-settings-container"
          ?hidden="${this.hideUserStylesMenu}"
          id="haxcmsuserstylesmenu"
          auto
        >
          <div class="open">
            <div class="hcusm-caret">
              <span class="hcusm-caret-outer"></span>
              <span class="hcusm-caret-inner"></span>
            </div>
            <div class="btn-group-title">Font Size</div>
            <div class="btn-group" role="group">
              <button class="btn btn-size" @click="${this.UserStylesSizeDown}">
                A
              </button>
              <button
                class="btn btn-size size-2"
                @click="${this.UserStylesSizeUp}"
              >
                A
              </button>
            </div>
            <div class="btn-group-title">Font Family</div>
            <div class="btn-group" role="group">
              <button
                class="btn btn-font"
                data-font="0"
                @click="${this.UserStylesFontFamilyChange}"
              >
                Sans
              </button>
              <button
                class="btn btn-font"
                data-font="1"
                @click="${this.UserStylesFontFamilyChange}"
              >
                Monospace
              </button>
            </div>
            <div class="btn-group-title">Theme Color</div>
            <div class="btn-group">
              <button
                class="btn btn-light"
                data-theme="0"
                @click="${this.UserStylesColorThemeChange}"
              >
                Light
              </button>
              <button
                class="btn btn-palenight"
                data-theme="2"
                @click="${this.UserStylesColorThemeChange}"
              >
                Palenight
              </button>
              <button
                class="btn btn-dark"
                data-theme="1"
                @click="${this.UserStylesColorThemeChange}"
              >
                Dark
              </button>
            </div>
          </div>
        </simple-popover>
      `}static get properties(){return{...super.properties||{},hideUserStylesMenu:{type:Boolean},fontSize:{type:Number,reflect:!0,attribute:"font-size"},fontFamily:{type:Number,reflect:!0,attribute:"font-family"},colorTheme:{type:Number,reflect:!0,attribute:"color-theme"}}}checkUserStylesMenuOpen(t){var e=o(t);this.hideUserStylesMenu||e.includes(this.toggleUserStylesMenuTarget)||e.includes(this.shadowRoot.querySelector("#haxcmsuserstylesmenu"))||"BUTTON"===e.tagName||(this.hideUserStylesMenu=!0)}updated(t){super.updated&&super.updated(t),t.forEach(((t,e)=>{"editMode"==e&&this[e]&&(this.hideUserStylesMenu=!0)}))}firstUpdated(t){super.firstUpdated&&super.firstUpdated(t),this.toggleUserStylesMenuTarget=this.shadowRoot.querySelector("#haxcmsuserstylesmenupopover"),this.shadowRoot.querySelector("#haxcmsuserstylesmenu").target=this.toggleUserStylesMenuTarget}toggleUserStylesMenu(t){this.hideUserStylesMenu=!this.hideUserStylesMenu}UserStylesSizeDown(t){this.fontSize>0&&(this.fontSize=this.fontSize-1)}UserStylesSizeUp(t){this.fontSize<4&&(this.fontSize=this.fontSize+1)}UserStylesFontFamilyChange(t){var e=o(t)[0];this.fontFamily=parseInt(e.getAttribute("data-font"))}UserStylesColorThemeChange(t){var e=o(t)[0];this.colorTheme=parseInt(e.getAttribute("data-theme"))}}};export{BootstrapUserStylesMenuMixin};