@taon-dev/ui 21.0.16 → 21.0.17

package/VERIFIED-BUILD-DATA.jsonc

@@ -1,5 +1,5 @@
 {
-  "commitHash": "f6c841bf67eb35535aa3f7308ae638e86956f4a2",
-  "commitName": "chore: update",
-  "commitDate": "20-10-2026 18:24:49"
+  "commitHash": "b3ae55abe2c78d1b282697fee698e2a6c22659bc",
+  "commitName": "feat: taon graggable admin panel initial state",
+  "commitDate": "22-10-2026 01:05:07"
 }

package/browser/fesm2022/ui-browser.mjs

@@ -68,7 +68,7 @@ const CURRENT_PACKAGE_TAON_VERSION = 'v21';
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-const CURRENT_PACKAGE_VERSION = '21.0.16';
+const CURRENT_PACKAGE_VERSION = '21.0.17';
 // THIS FILE IS GENERATED - DO NOT MODIFY
 
 const t$3 = Translation.for('src/lib/my-organization-proj.ts', { "src/lib/my-organization-proj.ts": { "en-US": async () => (await import('./ui-browser-my-organization-proj.ts.en-US.i18n.data-CoSik70Y.mjs')).default, "pl-PL": async () => (await import('./ui-browser-my-organization-proj.ts.pl-PL.i18n.data-BZPsT3Zk.mjs')).default } });
@@ -1718,6 +1718,7 @@ class TaonDraggableButtonPanelComponent {
          * Matrix parameter used for persisting the panel state.
          */
         this.stateParamName = 'state';
+        this.initialState = TaonDraggableButtonPanelState.WINDOW;
         this.stateChange = new EventEmitter();
         this.forceFullScreen = signal(window.innerWidth < 900, ...(ngDevMode ? [{ debugName: "forceFullScreen" }] : []));
         this.resizeListener = () => {
@@ -1910,7 +1911,7 @@ class TaonDraggableButtonPanelComponent {
     //#endregion
     //#region methods / open
     open() {
-        void this.setState(TaonDraggableButtonPanelState.WINDOW);
+        void this.setState(this.initialState);
     }
     toggle() {
         if (this.currentState() === this.State.CLICKABLE_BUTTON) {
@@ -2052,6 +2053,8 @@ class TaonDraggableButtonPanelComponent {
         const transitions = {
             [TaonDraggableButtonPanelState.CLICKABLE_BUTTON]: [
                 TaonDraggableButtonPanelState.WINDOW,
+                TaonDraggableButtonPanelState.FULL_SCREEN_DRAGGABLE,
+                TaonDraggableButtonPanelState.FULL_SCREEN_LOCKED,
             ],
             [TaonDraggableButtonPanelState.WINDOW]: [
                 TaonDraggableButtonPanelState.CLICKABLE_BUTTON,
@@ -2072,7 +2075,7 @@ class TaonDraggableButtonPanelComponent {
         return transitions[current].includes(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDraggableButtonPanelComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonDraggableButtonPanelComponent, isStandalone: true, selector: "taon-draggable-button-panel", inputs: { context: "context", basePath: "basePath", buttonIcon: "buttonIcon", title: "title", outlet: "outlet", stateParamName: "stateParamName", state: "state", autoHideIcon: "autoHideIcon", iconTemplate: "iconTemplate", headerCenterTemplate: "headerCenterTemplate" }, outputs: { stateChange: "stateChange" }, providers: [TaonAdminMenuContext], viewQueries: [{ propertyName: "drag", first: true, predicate: CdkDrag, descendants: true }], ngImport: i0, template: "@if (currentState() === State.CLICKABLE_BUTTON || !autoHideIcon) {\n  @if (iconTemplate) {\n    <ng-container [ngTemplateOutlet]=\"iconTemplate\" />\n  } @else {\n    <button\n      class=\"taon-admin-panel-toogle-open-button\"\n      [class.taon-admin-panel-toogle-button-dimmer-opacity]=\"\n        effectiveState() !== State.CLICKABLE_BUTTON\n      \"\n      mat-icon-button\n      type=\"button\"\n      [matTooltip]=\"title\"\n      (click)=\"toggle()\">\n      <mat-icon>{{ buttonIcon }}</mat-icon>\n    </button>\n  }\n}\n\n<section\n  cdkDrag\n  [hidden]=\"currentState() === State.CLICKABLE_BUTTON\"\n  [cdkDragDisabled]=\"!isDraggingEnabled()\"\n  class=\"taon-draggable-panel\"\n  [class.taon-window]=\"effectiveState() === State.WINDOW\"\n  [class.taon-window-full]=\"effectiveState() !== State.WINDOW\"\n  [class.taon-fullscreen]=\"\n    effectiveState() === State.FULL_SCREEN_DRAGGABLE ||\n    effectiveState() === State.FULL_SCREEN_LOCKED\n  \">\n  <header\n    cdkDragHandle\n    (dblclick)=\"toogleFullscreen($event)\"\n    class=\"taon-window-bar\">\n    <!-- LEFT -->\n    <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n      <mat-icon class=\"text-gray-500\"> admin_panel_settings </mat-icon>\n\n      <span class=\"truncate font-medium\">\n        {{ title }}\n      </span>\n    </div>\n\n    <!-- EXACT CENTER -->\n    <div class=\"flex min-w-0 items-center justify-center\">\n      @if (headerCenterTemplate) {\n        <ng-container [ngTemplateOutlet]=\"headerCenterTemplate\" />\n      }\n    </div>\n\n    <!-- #region window buttons -->\n    <div class=\"flex shrink-0 items-center\">\n      <!-- Desktop-only window/fullscreen controls -->\n      @if (!forceFullScreen()) {\n        @if (currentState() !== State.WINDOW) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Window mode\"\n            (click)=\"windowMode()\">\n            <mat-icon>filter_none</mat-icon>\n          </button>\n        }\n\n        @if (currentState() === State.WINDOW) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Full screen\"\n            (click)=\"fullScreenDraggable()\">\n            <mat-icon>fullscreen</mat-icon>\n          </button>\n        }\n\n        @if (currentState() !== State.FULL_SCREEN_LOCKED) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Lock full screen\"\n            (click)=\"lockFullScreen()\">\n            <mat-icon>lock_open</mat-icon>\n          </button>\n        } @else {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Unlock\"\n            (click)=\"fullScreenDraggable()\">\n            <mat-icon>lock</mat-icon>\n          </button>\n        }\n      }\n\n      <!-- ALWAYS available -->\n      <button\n        mat-icon-button\n        type=\"button\"\n        matTooltip=\"Close admin panel\"\n        (click)=\"returnToButton()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    <!-- #endregion -->\n  </header>\n\n  <div class=\"min-h-0 flex-1 overflow-hidden\">\n    <ng-content />\n  </div>\n</section>\n", styles: [":host{display:contents}.taon-admin-panel-toogle-button-dimmer-opacity{opacity:.6}.taon-draggable-panel{position:fixed;display:flex;flex-direction:column;min-width:320px;min-height:240px;overflow:hidden;background:#fff;border:1px solid #e5e7eb;box-shadow:0 20px 50px #00000026;z-index:1000}.taon-window{width:70vw;height:70vh;left:15vw;top:25vh;border-radius:6px}.taon-fullscreen{width:100vw;height:100dvh;left:0;top:0;border-radius:0}.taon-window-bar{height:48px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;flex-shrink:0;padding-left:12px;border-bottom:1px solid #e5e7eb;background:#fafafa;-webkit-user-select:none;user-select:none;cursor:move}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonDraggableButtonPanelComponent, isStandalone: true, selector: "taon-draggable-button-panel", inputs: { context: "context", basePath: "basePath", buttonIcon: "buttonIcon", title: "title", outlet: "outlet", stateParamName: "stateParamName", state: "state", initialState: "initialState", autoHideIcon: "autoHideIcon", iconTemplate: "iconTemplate", headerCenterTemplate: "headerCenterTemplate" }, outputs: { stateChange: "stateChange" }, providers: [TaonAdminMenuContext], viewQueries: [{ propertyName: "drag", first: true, predicate: CdkDrag, descendants: true }], ngImport: i0, template: "@if (currentState() === State.CLICKABLE_BUTTON || !autoHideIcon) {\n  @if (iconTemplate) {\n    <ng-container [ngTemplateOutlet]=\"iconTemplate\" />\n  } @else {\n    <button\n      class=\"taon-admin-panel-toogle-open-button\"\n      [class.taon-admin-panel-toogle-button-dimmer-opacity]=\"\n        effectiveState() !== State.CLICKABLE_BUTTON\n      \"\n      mat-icon-button\n      type=\"button\"\n      [matTooltip]=\"title\"\n      (click)=\"toggle()\">\n      <mat-icon>{{ buttonIcon }}</mat-icon>\n    </button>\n  }\n}\n\n<section\n  cdkDrag\n  [hidden]=\"currentState() === State.CLICKABLE_BUTTON\"\n  [cdkDragDisabled]=\"!isDraggingEnabled()\"\n  class=\"taon-draggable-panel\"\n  [class.taon-window]=\"effectiveState() === State.WINDOW\"\n  [class.taon-window-full]=\"effectiveState() !== State.WINDOW\"\n  [class.taon-fullscreen]=\"\n    effectiveState() === State.FULL_SCREEN_DRAGGABLE ||\n    effectiveState() === State.FULL_SCREEN_LOCKED\n  \">\n  <header\n    cdkDragHandle\n    (dblclick)=\"toogleFullscreen($event)\"\n    class=\"taon-window-bar\">\n    <!-- LEFT -->\n    <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n      <mat-icon class=\"text-gray-500\"> admin_panel_settings </mat-icon>\n\n      <span class=\"truncate font-medium\">\n        {{ title }}\n      </span>\n    </div>\n\n    <!-- EXACT CENTER -->\n    <div class=\"flex min-w-0 items-center justify-center\">\n      @if (headerCenterTemplate) {\n        <ng-container [ngTemplateOutlet]=\"headerCenterTemplate\" />\n      }\n    </div>\n\n    <!-- #region window buttons -->\n    <div class=\"flex shrink-0 items-center\">\n      <!-- Desktop-only window/fullscreen controls -->\n      @if (!forceFullScreen()) {\n        @if (currentState() !== State.WINDOW) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Window mode\"\n            (click)=\"windowMode()\">\n            <mat-icon>filter_none</mat-icon>\n          </button>\n        }\n\n        @if (currentState() === State.WINDOW) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Full screen\"\n            (click)=\"fullScreenDraggable()\">\n            <mat-icon>fullscreen</mat-icon>\n          </button>\n        }\n\n        @if (currentState() !== State.FULL_SCREEN_LOCKED) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Lock full screen\"\n            (click)=\"lockFullScreen()\">\n            <mat-icon>lock_open</mat-icon>\n          </button>\n        } @else {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Unlock\"\n            (click)=\"fullScreenDraggable()\">\n            <mat-icon>lock</mat-icon>\n          </button>\n        }\n      }\n\n      <!-- ALWAYS available -->\n      <button\n        mat-icon-button\n        type=\"button\"\n        matTooltip=\"Close admin panel\"\n        (click)=\"returnToButton()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    <!-- #endregion -->\n  </header>\n\n  <div class=\"min-h-0 flex-1 overflow-hidden\">\n    <ng-content />\n  </div>\n</section>\n", styles: [":host{display:contents}.taon-admin-panel-toogle-button-dimmer-opacity{opacity:.6}.taon-draggable-panel{position:fixed;display:flex;flex-direction:column;min-width:320px;min-height:240px;overflow:hidden;background:#fff;border:1px solid #e5e7eb;box-shadow:0 20px 50px #00000026;z-index:1000}.taon-window{width:70vw;height:70vh;left:15vw;top:25vh;border-radius:6px}.taon-fullscreen{width:100vw;height:100dvh;left:0;top:0;border-radius:0}.taon-window-bar{height:48px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;flex-shrink:0;padding-left:12px;border-bottom:1px solid #e5e7eb;background:#fafafa;-webkit-user-select:none;user-select:none;cursor:move}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDraggableButtonPanelComponent, decorators: [{
             type: Component,
@@ -2102,6 +2105,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 type: Input
             }], state: [{
                 type: Input
+            }], initialState: [{
+                type: Input
             }], stateChange: [{
                 type: Output
             }], autoHideIcon: [{