@fuentis/phoenix-ui 0.0.9-alpha.148 → 0.0.9-alpha.150

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -305,14 +305,58 @@ class UserComponent {
       @if(user.bindImageUrl){
       <div
         [style.background-image]="user.bindImageUrl"
-        class="profile-image"
+        class="cover-image"
       ></div>
       }@else {
       <p-avatar [label]="user.imageUrl" shape="circle" />
       }
     </a>
     <p-popover #op>
-      <div class="flex gap-2 w-20rem">
+      @if(user){
+      <div class="surface-0">
+        <div class="flex align-items-center ml-3">
+          @if(user?.bindImageUrl){
+          <div
+            [style.background-image]="user.bindImageUrl"
+            class="profile-image"
+          ></div>
+          }@else {
+          <p-avatar [label]="user.imageUrl" shape="circle" />
+          }
+          <div class="p-3">
+            <div class="text-xl text-primary mb-2 cursor-pointer">
+              {{ user?.firstname }} {{ user?.lastname }}
+            </div>
+            <div>{{ user?.username }}</div>
+            <div>{{ user?.email }}</div>
+          </div>
+          <div
+            class="flex border-top-1 border-300 mt-2 pt-2 mx-3 surface-ground mb-2"
+          ></div>
+          <div class="flex flex-row justify-content-between mt-2 pt-1">
+            <a
+              class="flex flex-row align-items-center cursor-pointer ml-2"
+              (click)="editSettings.emit()"
+              pRipple
+            >
+              <i class="pi pi-user-edit p-2" style="font-size: 1.5rem"></i>
+              <span>{{ 'ACTION.EDIT_SETTINGS' | translate }}</span>
+            </a>
+
+            <a
+              style="color: red"
+              class="flex flex-row align-items-center cursor-pointer mr-3"
+              (click)="logout.emit()"
+              pRipple
+            >
+              <i class="pi pi-power-off p-2"></i>
+              <span>{{ 'ACTION.LOGOUT' | translate }}</span>
+            </a>
+          </div>
+        </div>
+      </div>
+      }
+      <!--       <div class="flex gap-2 w-20rem">
         @if(user.bindImageUrl){
         <div
           [style.background-image]="user.bindImageUrl"
@@ -323,32 +367,9 @@ class UserComponent {
           <div class="text-sm mt-auto">{{ user.username }}</div>
           <div class="text-sm">{{ user.email }}</div>
         </div>
-      </div>
-
-      <div
-        class="border-top-1 border-300 flex flex-row justify-content-between mt-2 pt-2 mx-2"
-      >
-        <a
-          class="flex flex-row align-items-center cursor-pointer"
-          (click)="editSettings.emit()"
-          pRipple
-        >
-          <i class="pi pi-user-edit p-2" style="font-size: 1.5rem"></i>
-          <span>{{ 'ACTION.EDIT_SETTINGS' | translate }}</span>
-        </a>
-
-        <a
-          style="color: red"
-          class="flex flex-row align-items-center cursor-pointer"
-          (click)="logout.emit()"
-          pRipple
-        >
-          <i class="pi pi-power-off p-2"></i>
-          <span>{{ 'ACTION.LOGOUT' | translate }}</span>
-        </a>
-      </div>
+      </div> -->
     </p-popover>
-  `, isInline: true, styles: [".profile-image{width:50px;height:50px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer}\n"], dependencies: [{ kind: "component", type: Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [".profile-image{width:50px;height:50px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer}.cover-image{width:35px;height:35px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer}\n"], dependencies: [{ kind: "component", type: Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: UserComponent, decorators: [{
             type: Component,
@@ -361,14 +382,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
       @if(user.bindImageUrl){
       <div
         [style.background-image]="user.bindImageUrl"
-        class="profile-image"
+        class="cover-image"
       ></div>
       }@else {
       <p-avatar [label]="user.imageUrl" shape="circle" />
       }
     </a>
     <p-popover #op>
-      <div class="flex gap-2 w-20rem">
+      @if(user){
+      <div class="surface-0">
+        <div class="flex align-items-center ml-3">
+          @if(user?.bindImageUrl){
+          <div
+            [style.background-image]="user.bindImageUrl"
+            class="profile-image"
+          ></div>
+          }@else {
+          <p-avatar [label]="user.imageUrl" shape="circle" />
+          }
+          <div class="p-3">
+            <div class="text-xl text-primary mb-2 cursor-pointer">
+              {{ user?.firstname }} {{ user?.lastname }}
+            </div>
+            <div>{{ user?.username }}</div>
+            <div>{{ user?.email }}</div>
+          </div>
+          <div
+            class="flex border-top-1 border-300 mt-2 pt-2 mx-3 surface-ground mb-2"
+          ></div>
+          <div class="flex flex-row justify-content-between mt-2 pt-1">
+            <a
+              class="flex flex-row align-items-center cursor-pointer ml-2"
+              (click)="editSettings.emit()"
+              pRipple
+            >
+              <i class="pi pi-user-edit p-2" style="font-size: 1.5rem"></i>
+              <span>{{ 'ACTION.EDIT_SETTINGS' | translate }}</span>
+            </a>
+
+            <a
+              style="color: red"
+              class="flex flex-row align-items-center cursor-pointer mr-3"
+              (click)="logout.emit()"
+              pRipple
+            >
+              <i class="pi pi-power-off p-2"></i>
+              <span>{{ 'ACTION.LOGOUT' | translate }}</span>
+            </a>
+          </div>
+        </div>
+      </div>
+      }
+      <!--       <div class="flex gap-2 w-20rem">
         @if(user.bindImageUrl){
         <div
           [style.background-image]="user.bindImageUrl"
@@ -379,32 +444,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
           <div class="text-sm mt-auto">{{ user.username }}</div>
           <div class="text-sm">{{ user.email }}</div>
         </div>
-      </div>
-
-      <div
-        class="border-top-1 border-300 flex flex-row justify-content-between mt-2 pt-2 mx-2"
-      >
-        <a
-          class="flex flex-row align-items-center cursor-pointer"
-          (click)="editSettings.emit()"
-          pRipple
-        >
-          <i class="pi pi-user-edit p-2" style="font-size: 1.5rem"></i>
-          <span>{{ 'ACTION.EDIT_SETTINGS' | translate }}</span>
-        </a>
-
-        <a
-          style="color: red"
-          class="flex flex-row align-items-center cursor-pointer"
-          (click)="logout.emit()"
-          pRipple
-        >
-          <i class="pi pi-power-off p-2"></i>
-          <span>{{ 'ACTION.LOGOUT' | translate }}</span>
-        </a>
-      </div>
+      </div> -->
     </p-popover>
-  `, styles: [".profile-image{width:50px;height:50px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer}\n"] }]
+  `, styles: [".profile-image{width:50px;height:50px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer}.cover-image{width:35px;height:35px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer}\n"] }]
         }], propDecorators: { user: [{
                 type: Input
             }], logout: [{
@@ -5344,14 +5386,18 @@ class QuickPickSidePanelComponent {
     onRowClick = new EventEmitter();
     lazyLoadData = new EventEmitter();
     handlePanelFullScreen = new EventEmitter();
+    onClose = new EventEmitter();
     onDrawerShow() {
         this.lazyLoadData.emit();
     }
+    onDrawerHide() {
+        this.onClose.emit();
+    }
     onTableRowClick(row) {
         this.onRowClick.emit(row);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: QuickPickSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: QuickPickSidePanelComponent, isStandalone: true, selector: "phoenix-quick-pick-sidepanel", inputs: { title: "title", data: "data", columns: "columns", tableConfiguration: "tableConfiguration", panelState: "panelState", modal: "modal", widthClass: "widthClass", isFullScreen: "isFullScreen" }, outputs: { onRowClick: "onRowClick", lazyLoadData: "lazyLoadData", handlePanelFullScreen: "handlePanelFullScreen" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<p-drawer\n  #drawer\n  [styleClass]=\"widthClass\"\n  [modal]=\"modal\"\n  [(visible)]=\"panelState\"\n  position=\"right\"\n  [closable]=\"false\"\n  (onShow)=\"onDrawerShow()\"\n>\n  <!-- Header -->\n  <ng-template pTemplate=\"header\">\n    <div class=\"flex align-items-center justify-content-between w-full\">\n      <p-button\n        type=\"button\"\n        (click)=\"handlePanelFullScreen.emit()\"\n        [icon]=\"isFullScreen ? 'pi pi-arrow-down-right' : 'pi pi-arrow-up-left'\"\n        rounded=\"true\"\n        outlined=\"true\"\n        styleClass=\"h-8 w-8\"\n      ></p-button>\n\n      <span class=\"font-bold text-xl flex-grow-1 text-center\">\n        {{ title }}\n      </span>\n\n      <button\n        (click)=\"panelState = false\"\n        pButton\n        type=\"button\"\n        icon=\"pi pi-times\"\n        class=\"p-button-rounded p-button-text mr-2\"\n      ></button>\n    </div>\n  </ng-template>\n\n  <!-- Content -->\n  <ng-template pTemplate=\"content\">\n    <div class=\"px-2\">\n      <phoenix-table\n        [data]=\"data\"\n        [columns]=\"columns\"\n        [tableConfiguration]=\"tableConfiguration\"\n        (rowClick)=\"onTableRowClick($event)\"\n      ></phoenix-table>\n    </div>\n  </ng-template>\n</p-drawer>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i3$3.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i3$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["data", "columns", "selectedColumnsInput", "tableConfiguration"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: QuickPickSidePanelComponent, isStandalone: true, selector: "phoenix-quick-pick-sidepanel", inputs: { title: "title", data: "data", columns: "columns", tableConfiguration: "tableConfiguration", panelState: "panelState", modal: "modal", widthClass: "widthClass", isFullScreen: "isFullScreen" }, outputs: { onRowClick: "onRowClick", lazyLoadData: "lazyLoadData", handlePanelFullScreen: "handlePanelFullScreen", onClose: "onClose" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<p-drawer\n  #drawer\n  [styleClass]=\"widthClass\"\n  [modal]=\"modal\"\n  [(visible)]=\"panelState\"\n  position=\"right\"\n  [closable]=\"false\"\n  (onShow)=\"onDrawerShow()\"\n  (onHide)=\"onDrawerHide()\"\n>\n  <!-- Header -->\n  <ng-template pTemplate=\"header\">\n    <div class=\"flex align-items-center justify-content-between w-full\">\n      <p-button\n        type=\"button\"\n        (click)=\"handlePanelFullScreen.emit()\"\n        [icon]=\"isFullScreen ? 'pi pi-arrow-down-right' : 'pi pi-arrow-up-left'\"\n        rounded=\"true\"\n        outlined=\"true\"\n        styleClass=\"h-8 w-8\"\n      ></p-button>\n\n      <span class=\"font-bold text-xl flex-grow-1 text-center\">\n        {{ title }}\n      </span>\n\n      <button\n        (click)=\"panelState = false\"\n        pButton\n        type=\"button\"\n        icon=\"pi pi-times\"\n        class=\"p-button-rounded p-button-text mr-2\"\n      ></button>\n    </div>\n  </ng-template>\n\n  <!-- Content -->\n  <ng-template pTemplate=\"content\">\n    <div class=\"px-2\">\n      <phoenix-table\n        [data]=\"data\"\n        [columns]=\"columns\"\n        [tableConfiguration]=\"tableConfiguration\"\n        (rowClick)=\"onTableRowClick($event)\"\n      ></phoenix-table>\n    </div>\n  </ng-template>\n</p-drawer>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i3$3.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i3$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["data", "columns", "selectedColumnsInput", "tableConfiguration"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: QuickPickSidePanelComponent, decorators: [{
             type: Component,
@@ -5361,7 +5407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         TableComponent,
                         TranslateModule,
                         ButtonModule,
-                    ], template: "<p-drawer\n  #drawer\n  [styleClass]=\"widthClass\"\n  [modal]=\"modal\"\n  [(visible)]=\"panelState\"\n  position=\"right\"\n  [closable]=\"false\"\n  (onShow)=\"onDrawerShow()\"\n>\n  <!-- Header -->\n  <ng-template pTemplate=\"header\">\n    <div class=\"flex align-items-center justify-content-between w-full\">\n      <p-button\n        type=\"button\"\n        (click)=\"handlePanelFullScreen.emit()\"\n        [icon]=\"isFullScreen ? 'pi pi-arrow-down-right' : 'pi pi-arrow-up-left'\"\n        rounded=\"true\"\n        outlined=\"true\"\n        styleClass=\"h-8 w-8\"\n      ></p-button>\n\n      <span class=\"font-bold text-xl flex-grow-1 text-center\">\n        {{ title }}\n      </span>\n\n      <button\n        (click)=\"panelState = false\"\n        pButton\n        type=\"button\"\n        icon=\"pi pi-times\"\n        class=\"p-button-rounded p-button-text mr-2\"\n      ></button>\n    </div>\n  </ng-template>\n\n  <!-- Content -->\n  <ng-template pTemplate=\"content\">\n    <div class=\"px-2\">\n      <phoenix-table\n        [data]=\"data\"\n        [columns]=\"columns\"\n        [tableConfiguration]=\"tableConfiguration\"\n        (rowClick)=\"onTableRowClick($event)\"\n      ></phoenix-table>\n    </div>\n  </ng-template>\n</p-drawer>" }]
+                    ], template: "<p-drawer\n  #drawer\n  [styleClass]=\"widthClass\"\n  [modal]=\"modal\"\n  [(visible)]=\"panelState\"\n  position=\"right\"\n  [closable]=\"false\"\n  (onShow)=\"onDrawerShow()\"\n  (onHide)=\"onDrawerHide()\"\n>\n  <!-- Header -->\n  <ng-template pTemplate=\"header\">\n    <div class=\"flex align-items-center justify-content-between w-full\">\n      <p-button\n        type=\"button\"\n        (click)=\"handlePanelFullScreen.emit()\"\n        [icon]=\"isFullScreen ? 'pi pi-arrow-down-right' : 'pi pi-arrow-up-left'\"\n        rounded=\"true\"\n        outlined=\"true\"\n        styleClass=\"h-8 w-8\"\n      ></p-button>\n\n      <span class=\"font-bold text-xl flex-grow-1 text-center\">\n        {{ title }}\n      </span>\n\n      <button\n        (click)=\"panelState = false\"\n        pButton\n        type=\"button\"\n        icon=\"pi pi-times\"\n        class=\"p-button-rounded p-button-text mr-2\"\n      ></button>\n    </div>\n  </ng-template>\n\n  <!-- Content -->\n  <ng-template pTemplate=\"content\">\n    <div class=\"px-2\">\n      <phoenix-table\n        [data]=\"data\"\n        [columns]=\"columns\"\n        [tableConfiguration]=\"tableConfiguration\"\n        (rowClick)=\"onTableRowClick($event)\"\n      ></phoenix-table>\n    </div>\n  </ng-template>\n</p-drawer>" }]
         }], propDecorators: { drawer: [{
                 type: ViewChild,
                 args: ['drawer']
@@ -5387,6 +5433,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 type: Output
             }], handlePanelFullScreen: [{
                 type: Output
+            }], onClose: [{
+                type: Output
             }] } });
 
 var SimpleButtonType;