@fuentis/phoenix-ui 0.0.9-alpha.81 → 0.0.9-alpha.82

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -4715,6 +4715,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                 type: Input
             }] } });
 
+var StatusColType;
+(function (StatusColType) {
+    StatusColType["LIST"] = "LIST";
+    StatusColType["TAG"] = "TAG";
+    StatusColType["STRING"] = "STRING";
+    StatusColType["DATE"] = "DATE";
+    StatusColType["PERSON"] = "PERSON";
+    StatusColType["ACTION"] = "ACTION";
+    StatusColType["OWNER"] = "OWNER";
+    StatusColType["DATE_LIST"] = "DATE_LIST";
+    StatusColType["TAG_AND_LIST"] = "TAG_AND_LIST";
+})(StatusColType || (StatusColType = {}));
+
+class StatusBarComponent {
+    statusBarConfig = {
+        icon: '',
+        description: [],
+        attributes: [],
+    };
+    icon = 'pi pi-link';
+    iconEnable = true;
+    enableClosing = true;
+    description = true;
+    dateFormat = 'dd.MM.yyyy';
+    onListItemClick = new EventEmitter();
+    isCollapsed = false;
+    StatusColType = StatusColType;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: StatusBarComponent, isStandalone: true, selector: "phoenix-status-bar", inputs: { statusBarConfig: "statusBarConfig", icon: "icon", iconEnable: "iconEnable", enableClosing: "enableClosing", description: "description", dateFormat: "dateFormat" }, outputs: { onListItemClick: "onListItemClick" }, ngImport: i0, template: "<div class=\"surface-0\">\n  <div *ngIf=\"statusBarConfig\" class=\"status-bar-wrapper\" [ngClass]=\"{ collapsed: isCollapsed }\">\n    <div class=\"description flex\" *ngIf=\"description\">\n      <!-- Ikonica entiteta -->\n      <div *ngIf=\"iconEnable\" class=\"mr-3 flex justify-content-center align-items-center\" style=\"width: 60px; height: 60px\">\n        <p-image\n          [src]=\"'assets/layout/images/object_types/white/' + (statusBarConfig.icon || 'UNDEFINED') + '.svg'\"\n          width=\"40\"\n          height=\"40\"\n        ></p-image>\n      </div>\n\n      <!-- Deskriptivni podaci -->\n      <ul>\n        <li class=\"text-sm flex mb-1\" *ngFor=\"let item of statusBarConfig.description\">\n          <span class=\"text-600 mr-1\">{{ item.label | translate }}:</span>\n          <span *ngIf=\"item.value; else empty\">\n            <i *ngIf=\"item.icon\" class=\"{{ item.icon }} mr-1\" style=\"font-size: 0.8em\"></i>\n            <ng-container [ngSwitch]=\"item.type\">\n              <span *ngSwitchCase=\"StatusColType.DATE\">\n                {{ item.value | date: dateFormat }}\n              </span>\n              <span *ngSwitchDefault>\n                {{ item.value }}\n              </span>\n            </ng-container>\n          </span>\n        </li>\n      </ul>\n    </div>\n\n    <!-- Atributi -->\n    <div class=\"flex flex-wrap gap-4 mt-3\" *ngIf=\"statusBarConfig.attributes?.length\">\n      <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n        <div class=\"font-semibold\">{{ attr.label | translate }}</div>\n        <div class=\"mt-1\">\n          <ng-container [ngSwitch]=\"attr.type\">\n            <span *ngSwitchCase=\"StatusColType.DATE\">{{ attr.value | date: dateFormat }}</span>\n            <span *ngSwitchDefault>{{ attr.value || '--' }}</span>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapse dugme -->\n  <div class=\"flex justify-content-center mt-2\" *ngIf=\"enableClosing\">\n    <button (click)=\"isCollapsed = !isCollapsed\" class=\"p-button p-button-text\">\n      <i class=\"pi\" [ngClass]=\"isCollapsed ? 'pi-angle-down' : 'pi-angle-up'\"></i>\n    </button>\n  </div>\n</div>\n\n<ng-template #empty>\n  <span>--</span>\n</ng-template>", styles: [".status-bar-wrapper{display:flex;padding:10px 10px 10px 0;overflow:hidden;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px;margin-left:10px}.attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:7px}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{border:1px solid var(--gray-300);background:none;border-radius:7px;padding:2px 7px 0;cursor:pointer}.toggler button .pi{padding:0!important;font-size:.8rem;color:var(--blue-500)}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(90deg,#cecece 10%,#fff);position:absolute;top:50%;left:27px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(280deg,#cecece 10%,#fff);position:absolute;top:50%;left:-29px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%}.person-wrap .person-name :first-child{font-size:1.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i5$1.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: StatusBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'phoenix-status-bar', standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        TooltipModule,
+                        ImageModule,
+                    ], template: "<div class=\"surface-0\">\n  <div *ngIf=\"statusBarConfig\" class=\"status-bar-wrapper\" [ngClass]=\"{ collapsed: isCollapsed }\">\n    <div class=\"description flex\" *ngIf=\"description\">\n      <!-- Ikonica entiteta -->\n      <div *ngIf=\"iconEnable\" class=\"mr-3 flex justify-content-center align-items-center\" style=\"width: 60px; height: 60px\">\n        <p-image\n          [src]=\"'assets/layout/images/object_types/white/' + (statusBarConfig.icon || 'UNDEFINED') + '.svg'\"\n          width=\"40\"\n          height=\"40\"\n        ></p-image>\n      </div>\n\n      <!-- Deskriptivni podaci -->\n      <ul>\n        <li class=\"text-sm flex mb-1\" *ngFor=\"let item of statusBarConfig.description\">\n          <span class=\"text-600 mr-1\">{{ item.label | translate }}:</span>\n          <span *ngIf=\"item.value; else empty\">\n            <i *ngIf=\"item.icon\" class=\"{{ item.icon }} mr-1\" style=\"font-size: 0.8em\"></i>\n            <ng-container [ngSwitch]=\"item.type\">\n              <span *ngSwitchCase=\"StatusColType.DATE\">\n                {{ item.value | date: dateFormat }}\n              </span>\n              <span *ngSwitchDefault>\n                {{ item.value }}\n              </span>\n            </ng-container>\n          </span>\n        </li>\n      </ul>\n    </div>\n\n    <!-- Atributi -->\n    <div class=\"flex flex-wrap gap-4 mt-3\" *ngIf=\"statusBarConfig.attributes?.length\">\n      <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n        <div class=\"font-semibold\">{{ attr.label | translate }}</div>\n        <div class=\"mt-1\">\n          <ng-container [ngSwitch]=\"attr.type\">\n            <span *ngSwitchCase=\"StatusColType.DATE\">{{ attr.value | date: dateFormat }}</span>\n            <span *ngSwitchDefault>{{ attr.value || '--' }}</span>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapse dugme -->\n  <div class=\"flex justify-content-center mt-2\" *ngIf=\"enableClosing\">\n    <button (click)=\"isCollapsed = !isCollapsed\" class=\"p-button p-button-text\">\n      <i class=\"pi\" [ngClass]=\"isCollapsed ? 'pi-angle-down' : 'pi-angle-up'\"></i>\n    </button>\n  </div>\n</div>\n\n<ng-template #empty>\n  <span>--</span>\n</ng-template>", styles: [".status-bar-wrapper{display:flex;padding:10px 10px 10px 0;overflow:hidden;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px;margin-left:10px}.attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:7px}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{border:1px solid var(--gray-300);background:none;border-radius:7px;padding:2px 7px 0;cursor:pointer}.toggler button .pi{padding:0!important;font-size:.8rem;color:var(--blue-500)}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(90deg,#cecece 10%,#fff);position:absolute;top:50%;left:27px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(280deg,#cecece 10%,#fff);position:absolute;top:50%;left:-29px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%}.person-wrap .person-name :first-child{font-size:1.2rem}\n"] }]
+        }], propDecorators: { statusBarConfig: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconEnable: [{
+                type: Input
+            }], enableClosing: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], onListItemClick: [{
+                type: Output
+            }] } });
+
 class QuickPickSidePanelComponent {
     title = 'Default Title'; // Panel title
     data = []; // Data for the table
@@ -4786,5 +4840,5 @@ var SimpleButtonType;
  * Generated bundle index. Do not edit.
  */
 
-export { GroupsFormComponent, MetaFormButtonsComponent, MetaFormComponent, MetaFormService, PhoenixDataTableComponent, QuickPickComponent, QuickPickSidePanelComponent, SearchBarComponent, ShellComponent, SidebarComponent, SidebarItemComponent, SimpleButtonType, StatusHeaderComponent, TableComponent, TopbarComponent, UserComponent, tableActionType, tableButtonContext, tableButtonFormat, tableColumnType, tableFilterType, tableSelectionType };
+export { GroupsFormComponent, MetaFormButtonsComponent, MetaFormComponent, MetaFormService, PhoenixDataTableComponent, QuickPickComponent, QuickPickSidePanelComponent, SearchBarComponent, ShellComponent, SidebarComponent, SidebarItemComponent, SimpleButtonType, StatusBarComponent, StatusHeaderComponent, TableComponent, TopbarComponent, UserComponent, tableActionType, tableButtonContext, tableButtonFormat, tableColumnType, tableFilterType, tableSelectionType };
 //# sourceMappingURL=fuentis-phoenix-ui.mjs.map