import { Component, HostBinding, signal } from '@angular/core';
import { ThySlideModule } from 'ngx-tethys/slide';
import { ThyIconModule } from 'ngx-tethys/icon';
import { ThyButtonModule } from 'ngx-tethys/button';
import { NgxPuzzlePanelComponent } from 'ngx-puzzle/components/panel/ngx-puzzle-panel.component';
import { NgxPuzzlePropsEditorComponent } from 'ngx-puzzle/components/editor/ngx-puzzle-props-editor.component';
import { NgxPuzzleCanvasComponent } from 'ngx-puzzle/components/canvas/ngx-puzzle-canvas.component';
import * as i0 from "@angular/core";
import * as i1 from "ngx-tethys/slide";
import * as i2 from "ngx-tethys/icon";
export class NgxPuzzleEditorComponent {
    className = 'ngx-puzzle-component';
    MIN_WIDTH = 100;
    MIN_HEIGHT = 100;
    width = this.MIN_WIDTH;
    height = this.MIN_HEIGHT;
    // -------------------new----------------------
    leftCollapsed = signal(false);
    rightCollapsed = signal(false);
    constructor() { }
    ngAfterViewInit() { }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxPuzzleEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NgxPuzzleEditorComponent, isStandalone: true, selector: "ngx-puzzle-editor, puzzle-editor", host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"ngx-puzzle-wrapper\">\n  <div class=\"drawer left-drawer\" [class.collapsed]=\"leftCollapsed()\">\n    @if (!leftCollapsed()) {\n      <div class=\"slide-wrapper\">\n        <thy-slide-layout>\n          <thy-slide-header>\n            <ng-template #thyHeader>\n              <h2 class=\"thy-slide-header-title text-center font-size-md font-weight-bold w-100\">\u7EC4\u4EF6</h2>\n            </ng-template>\n          </thy-slide-header>\n          <thy-slide-body>\n            <ngx-puzzle-panel></ngx-puzzle-panel>\n          </thy-slide-body>\n        </thy-slide-layout>\n      </div>\n    }\n    <thy-icon\n      class=\"toggle-btn\"\n      thyIconName=\"angle-left-bold\"\n      [thyIconRotate]=\"leftCollapsed() ? 180 : 0\"\n      (click)=\"leftCollapsed.set(!this.leftCollapsed())\"\n    >\n    </thy-icon>\n  </div>\n  <div class=\"main-content\">\n    <ngx-puzzle-canvas id=\"puzzle-canvas\"></ngx-puzzle-canvas>\n  </div>\n  <div class=\"drawer right-drawer\" [class.collapsed]=\"rightCollapsed()\">\n    @if (!rightCollapsed()) {\n      <div class=\"slide-wrapper\">\n        <thy-slide-layout>\n          <thy-slide-header>\n            <ng-template #thyHeader>\n              <h2 class=\"thy-slide-header-title font-size-md font-weight-bold text-center w-100\">\u7F16\u8F91</h2>\n            </ng-template>\n          </thy-slide-header>\n          <thy-slide-body>\n            <ngx-puzzle-props-editor></ngx-puzzle-props-editor>\n          </thy-slide-body>\n        </thy-slide-layout>\n      </div>\n    }\n\n    <thy-icon\n      class=\"toggle-btn\"\n      thyIconName=\"angle-right-bold\"\n      [thyIconRotate]=\"rightCollapsed() ? 180 : 0\"\n      (click)=\"rightCollapsed.set(!this.rightCollapsed())\"\n    ></thy-icon>\n  </div>\n</div>\n", styles: [":host .ngx-puzzle-wrapper{display:flex;width:100%;height:calc(100vh - 90px)}:host .ngx-puzzle-wrapper .drawer{width:350px;transition:width .3s ease;background-color:#f4f4f4;display:flex;flex-direction:column;position:relative;height:100%}:host .ngx-puzzle-wrapper .drawer .slide-wrapper{width:350px;height:100%;overflow:hidden}:host .ngx-puzzle-wrapper .drawer.collapsed{width:30px}:host .ngx-puzzle-wrapper .drawer.collapsed .p-panel{display:none}:host .ngx-puzzle-wrapper .drawer .toggle-btn{position:absolute;top:10px;z-index:10;background:transparent;cursor:pointer;font-size:26px}:host .ngx-puzzle-wrapper .drawer.left-drawer .toggle-btn{right:15px;transform:translate(50%)}:host .ngx-puzzle-wrapper .drawer.right-drawer .toggle-btn{left:15px;transform:translate(-50%)}:host .ngx-puzzle-wrapper .main-content{flex:1;transition:margin .3s ease;overflow:auto;padding:0}:host w-100{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ThySlideModule }, { kind: "component", type: i1.ThySlideLayout, selector: "thy-slide-layout" }, { kind: "component", type: i1.ThySlideHeader, selector: "thy-slide-header", inputs: ["thyTitle", "thyIcon"] }, { kind: "component", type: i1.ThySlideBody, selector: "thy-slide-body" }, { kind: "ngmodule", type: ThyButtonModule }, { kind: "ngmodule", type: ThyIconModule }, { kind: "component", type: i2.ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: NgxPuzzlePanelComponent, selector: "ngx-puzzle-panel, puzzle-panel" }, { kind: "component", type: NgxPuzzlePropsEditorComponent, selector: "ngx-puzzle-props-editor, puzzle-props-editor" }, { kind: "component", type: NgxPuzzleCanvasComponent, selector: "ngx-puzzle-canvas, puzzle-canvas" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxPuzzleEditorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-puzzle-editor, puzzle-editor', standalone: true, imports: [
                        ThySlideModule,
                        ThyButtonModule,
                        ThyIconModule,
                        NgxPuzzlePanelComponent,
                        NgxPuzzlePropsEditorComponent,
                        NgxPuzzleCanvasComponent
                    ], template: "<div class=\"ngx-puzzle-wrapper\">\n  <div class=\"drawer left-drawer\" [class.collapsed]=\"leftCollapsed()\">\n    @if (!leftCollapsed()) {\n      <div class=\"slide-wrapper\">\n        <thy-slide-layout>\n          <thy-slide-header>\n            <ng-template #thyHeader>\n              <h2 class=\"thy-slide-header-title text-center font-size-md font-weight-bold w-100\">\u7EC4\u4EF6</h2>\n            </ng-template>\n          </thy-slide-header>\n          <thy-slide-body>\n            <ngx-puzzle-panel></ngx-puzzle-panel>\n          </thy-slide-body>\n        </thy-slide-layout>\n      </div>\n    }\n    <thy-icon\n      class=\"toggle-btn\"\n      thyIconName=\"angle-left-bold\"\n      [thyIconRotate]=\"leftCollapsed() ? 180 : 0\"\n      (click)=\"leftCollapsed.set(!this.leftCollapsed())\"\n    >\n    </thy-icon>\n  </div>\n  <div class=\"main-content\">\n    <ngx-puzzle-canvas id=\"puzzle-canvas\"></ngx-puzzle-canvas>\n  </div>\n  <div class=\"drawer right-drawer\" [class.collapsed]=\"rightCollapsed()\">\n    @if (!rightCollapsed()) {\n      <div class=\"slide-wrapper\">\n        <thy-slide-layout>\n          <thy-slide-header>\n            <ng-template #thyHeader>\n              <h2 class=\"thy-slide-header-title font-size-md font-weight-bold text-center w-100\">\u7F16\u8F91</h2>\n            </ng-template>\n          </thy-slide-header>\n          <thy-slide-body>\n            <ngx-puzzle-props-editor></ngx-puzzle-props-editor>\n          </thy-slide-body>\n        </thy-slide-layout>\n      </div>\n    }\n\n    <thy-icon\n      class=\"toggle-btn\"\n      thyIconName=\"angle-right-bold\"\n      [thyIconRotate]=\"rightCollapsed() ? 180 : 0\"\n      (click)=\"rightCollapsed.set(!this.rightCollapsed())\"\n    ></thy-icon>\n  </div>\n</div>\n", styles: [":host .ngx-puzzle-wrapper{display:flex;width:100%;height:calc(100vh - 90px)}:host .ngx-puzzle-wrapper .drawer{width:350px;transition:width .3s ease;background-color:#f4f4f4;display:flex;flex-direction:column;position:relative;height:100%}:host .ngx-puzzle-wrapper .drawer .slide-wrapper{width:350px;height:100%;overflow:hidden}:host .ngx-puzzle-wrapper .drawer.collapsed{width:30px}:host .ngx-puzzle-wrapper .drawer.collapsed .p-panel{display:none}:host .ngx-puzzle-wrapper .drawer .toggle-btn{position:absolute;top:10px;z-index:10;background:transparent;cursor:pointer;font-size:26px}:host .ngx-puzzle-wrapper .drawer.left-drawer .toggle-btn{right:15px;transform:translate(50%)}:host .ngx-puzzle-wrapper .drawer.right-drawer .toggle-btn{left:15px;transform:translate(-50%)}:host .ngx-puzzle-wrapper .main-content{flex:1;transition:margin .3s ease;overflow:auto;padding:0}:host w-100{width:100%}\n"] }]
        }], ctorParameters: () => [], propDecorators: { className: [{
                type: HostBinding
            }] } });
//# sourceMappingURL=data:application/json;base64, 