@theseam/ui-common 1.0.2-beta.30 → 1.0.2-beta.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1071,7 +1071,7 @@ class DashboardWidgetsComponent {
|
|
|
1071
1071
|
provide: THESEAM_DASHBOARD_WIDGETS_ACCESSOR,
|
|
1072
1072
|
useExisting: forwardRef(() => DashboardWidgetsComponent),
|
|
1073
1073
|
},
|
|
1074
|
-
], viewQueries: [{ propertyName: "_toggleBtnTpl", first: true, predicate: ["toggleBtnTpl"], descendants: true, static: true }, { propertyName: "containers", predicate: DashboardWidgetContainerComponent, descendants: true }, { propertyName: "cdkDragDirectives", predicate: CdkDrag, descendants: true }], ngImport: i0, template: "<!--\n This is an ugly trick I am using to render the component into an <ng-content>\n wrapped in an <ng-template> to move the component to different outlets without\n reinitializing it. This way the widget won't reload when moving between\n columns. When I remember how I programatically did this I will remove this\n weirdness.\n -->\n<seam-dashboard-widget-container\n *ngFor=\"let item of widgetItems$ | async; trackBy: _containerTrackByFn\"\n [def]=\"$any(item)\"\n>\n <!-- <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template> -->\n <ng-template [seamDashboardWidgetPortalOutlet]=\"item.portal\"></ng-template>\n</seam-dashboard-widget-container>\n\n<div\n class=\"dashboard-widgets-base d-flex flex-row justify-content-around\"\n style=\"flex: 1410px\"\n [style.padding.px]=\"_gapStyleSize$ | async\"\n (seamElemResized)=\"_resized($any($event))\"\n cdkDropListGroup\n>\n <div\n *ngFor=\"let col of widgetColumns$ | async; trackBy: _columnsTrackByFn\"\n class=\"d-flex flex-column flex-grow-1 dashboard-widgets-list\"\n cdkDropList\n [cdkDropListData]=\"col.items\"\n (cdkDropListDropped)=\"drop($any($event))\"\n >\n <div\n *ngFor=\"let item of col.items; trackBy: _containerTrackByFn\"\n class=\"dashboard-widgets-list-item\"\n [attr.data-widget-id]=\"item.widgetId\"\n cdkDrag\n [cdkDragDisabled]=\"!widgetsDraggable\"\n >\n <div [style.margin.px]=\"_gapStyleSize$ | async\">\n <seam-dashboard-widget-template-container\n [item]=\"item\"\n ></seam-dashboard-widget-template-container>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #toggleBtnTpl>\n <button\n seamButton\n theme=\"baselayout-action\"\n title=\"{{ widgetsDraggable ? 'Lock the Dashboard' : 'Modify Dashboard' }}\"\n (click)=\"toggleDragging()\"\n >\n <seam-icon [icon]=\"widgetsDraggable ? faUnlock : faLock\"></seam-icon>\n </button>\n</ng-template>\n", styles: ["seam-dashboard-widgets{display:flex;justify-content:center}seam-dashboard-widgets .dashboard-widgets-base{max-width:1410px}seam-dashboard-widgets .dashboard-widgets-list{flex-basis:400px;max-width:500px}seam-dashboard-widgets .dashboard-widgets-list.cdk-drop-list-dragging .dashboard-widgets-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-widgets-list-item.cdk-drag-preview{box-sizing:border-box}.dashboard-widgets-list-item.cdk-drag-preview>div{border-radius:.25rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.dashboard-widgets-list-item.cdk-drag-disabled .cdk-drag-handle{cursor:default}.dashboard-widgets-list-item .cdk-drag-handle{cursor:move}.dashboard-widgets-list-item.cdk-drag-placeholder{opacity:0}.dashboard-widgets-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i1$1.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: "ngmodule", type: TheSeamIconModule }, { kind: "component", type: i2.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "ngmodule", type: TheSeamButtonsModule }, { kind: "component", type: i3.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "directive", type: TheSeamElemResizedDirective, selector: "[seamElemResized]", outputs: ["seamElemResized"], exportAs: ["seamElemResized"] }, { kind: "component", type: DashboardWidgetTemplateContainerComponent, selector: "seam-dashboard-widget-template-container", inputs: ["item"] }, { kind: "component", type: DashboardWidgetContainerComponent, selector: "seam-dashboard-widget-container", inputs: ["def"] }, { kind: "directive", type: DashboardWidgetPortalOutletDirective, selector: "[seamDashboardWidgetPortalOutlet]", inputs: ["seamDashboardWidgetPortalOutlet"], outputs: ["attached"], exportAs: ["seamDashboardWidgetPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1074
|
+
], viewQueries: [{ propertyName: "_toggleBtnTpl", first: true, predicate: ["toggleBtnTpl"], descendants: true, static: true }, { propertyName: "containers", predicate: DashboardWidgetContainerComponent, descendants: true }, { propertyName: "cdkDragDirectives", predicate: CdkDrag, descendants: true }], ngImport: i0, template: "<!--\n This is an ugly trick I am using to render the component into an <ng-content>\n wrapped in an <ng-template> to move the component to different outlets without\n reinitializing it. This way the widget won't reload when moving between\n columns. When I remember how I programatically did this I will remove this\n weirdness.\n -->\n<seam-dashboard-widget-container\n *ngFor=\"let item of widgetItems$ | async; trackBy: _containerTrackByFn\"\n [def]=\"$any(item)\"\n>\n <!-- <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template> -->\n <ng-template [seamDashboardWidgetPortalOutlet]=\"item.portal\"></ng-template>\n</seam-dashboard-widget-container>\n\n<div\n class=\"dashboard-widgets-base d-flex flex-row justify-content-around\"\n style=\"flex: 1410px\"\n [style.padding.px]=\"_gapStyleSize$ | async\"\n (seamElemResized)=\"_resized($any($event))\"\n cdkDropListGroup\n>\n <div\n *ngFor=\"let col of widgetColumns$ | async; trackBy: _columnsTrackByFn\"\n class=\"d-flex flex-column flex-grow-1 dashboard-widgets-list\"\n cdkDropList\n [cdkDropListData]=\"col.items\"\n (cdkDropListDropped)=\"drop($any($event))\"\n >\n <div\n *ngFor=\"let item of col.items; trackBy: _containerTrackByFn\"\n class=\"dashboard-widgets-list-item\"\n [attr.data-widget-id]=\"item.widgetId\"\n cdkDrag\n [cdkDragDisabled]=\"!widgetsDraggable\"\n >\n <div [style.margin.px]=\"_gapStyleSize$ | async\">\n <seam-dashboard-widget-template-container\n [item]=\"item\"\n ></seam-dashboard-widget-template-container>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #toggleBtnTpl>\n <button\n seamButton\n theme=\"baselayout-action\"\n title=\"{{ widgetsDraggable ? 'Lock the Dashboard' : 'Modify Dashboard' }}\"\n (click)=\"toggleDragging()\"\n >\n <seam-icon [icon]=\"widgetsDraggable ? faUnlock : faLock\"></seam-icon>\n </button>\n</ng-template>\n", styles: ["seam-dashboard-widgets .dashboard-widgets-list-item:not(:has(seam-widget)){display:none}seam-dashboard-widgets{display:flex;justify-content:center}seam-dashboard-widgets .dashboard-widgets-base{max-width:1410px}seam-dashboard-widgets .dashboard-widgets-list{flex-basis:400px;max-width:500px}seam-dashboard-widgets .dashboard-widgets-list.cdk-drop-list-dragging .dashboard-widgets-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-widgets-list-item.cdk-drag-preview{box-sizing:border-box}.dashboard-widgets-list-item.cdk-drag-preview>div{border-radius:.25rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.dashboard-widgets-list-item.cdk-drag-disabled .cdk-drag-handle{cursor:default}.dashboard-widgets-list-item .cdk-drag-handle{cursor:move}.dashboard-widgets-list-item.cdk-drag-placeholder{opacity:0}.dashboard-widgets-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i1$1.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: "ngmodule", type: TheSeamIconModule }, { kind: "component", type: i2.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "ngmodule", type: TheSeamButtonsModule }, { kind: "component", type: i3.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "directive", type: TheSeamElemResizedDirective, selector: "[seamElemResized]", outputs: ["seamElemResized"], exportAs: ["seamElemResized"] }, { kind: "component", type: DashboardWidgetTemplateContainerComponent, selector: "seam-dashboard-widget-template-container", inputs: ["item"] }, { kind: "component", type: DashboardWidgetContainerComponent, selector: "seam-dashboard-widget-container", inputs: ["def"] }, { kind: "directive", type: DashboardWidgetPortalOutletDirective, selector: "[seamDashboardWidgetPortalOutlet]", inputs: ["seamDashboardWidgetPortalOutlet"], outputs: ["attached"], exportAs: ["seamDashboardWidgetPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1075
1075
|
}
|
|
1076
1076
|
__decorate([
|
|
1077
1077
|
InputBoolean()
|
|
@@ -1097,7 +1097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1097
1097
|
DashboardWidgetTemplateContainerComponent,
|
|
1098
1098
|
DashboardWidgetContainerComponent,
|
|
1099
1099
|
DashboardWidgetPortalOutletDirective,
|
|
1100
|
-
], template: "<!--\n This is an ugly trick I am using to render the component into an <ng-content>\n wrapped in an <ng-template> to move the component to different outlets without\n reinitializing it. This way the widget won't reload when moving between\n columns. When I remember how I programatically did this I will remove this\n weirdness.\n -->\n<seam-dashboard-widget-container\n *ngFor=\"let item of widgetItems$ | async; trackBy: _containerTrackByFn\"\n [def]=\"$any(item)\"\n>\n <!-- <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template> -->\n <ng-template [seamDashboardWidgetPortalOutlet]=\"item.portal\"></ng-template>\n</seam-dashboard-widget-container>\n\n<div\n class=\"dashboard-widgets-base d-flex flex-row justify-content-around\"\n style=\"flex: 1410px\"\n [style.padding.px]=\"_gapStyleSize$ | async\"\n (seamElemResized)=\"_resized($any($event))\"\n cdkDropListGroup\n>\n <div\n *ngFor=\"let col of widgetColumns$ | async; trackBy: _columnsTrackByFn\"\n class=\"d-flex flex-column flex-grow-1 dashboard-widgets-list\"\n cdkDropList\n [cdkDropListData]=\"col.items\"\n (cdkDropListDropped)=\"drop($any($event))\"\n >\n <div\n *ngFor=\"let item of col.items; trackBy: _containerTrackByFn\"\n class=\"dashboard-widgets-list-item\"\n [attr.data-widget-id]=\"item.widgetId\"\n cdkDrag\n [cdkDragDisabled]=\"!widgetsDraggable\"\n >\n <div [style.margin.px]=\"_gapStyleSize$ | async\">\n <seam-dashboard-widget-template-container\n [item]=\"item\"\n ></seam-dashboard-widget-template-container>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #toggleBtnTpl>\n <button\n seamButton\n theme=\"baselayout-action\"\n title=\"{{ widgetsDraggable ? 'Lock the Dashboard' : 'Modify Dashboard' }}\"\n (click)=\"toggleDragging()\"\n >\n <seam-icon [icon]=\"widgetsDraggable ? faUnlock : faLock\"></seam-icon>\n </button>\n</ng-template>\n", styles: ["seam-dashboard-widgets{display:flex;justify-content:center}seam-dashboard-widgets .dashboard-widgets-base{max-width:1410px}seam-dashboard-widgets .dashboard-widgets-list{flex-basis:400px;max-width:500px}seam-dashboard-widgets .dashboard-widgets-list.cdk-drop-list-dragging .dashboard-widgets-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-widgets-list-item.cdk-drag-preview{box-sizing:border-box}.dashboard-widgets-list-item.cdk-drag-preview>div{border-radius:.25rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.dashboard-widgets-list-item.cdk-drag-disabled .cdk-drag-handle{cursor:default}.dashboard-widgets-list-item .cdk-drag-handle{cursor:move}.dashboard-widgets-list-item.cdk-drag-placeholder{opacity:0}.dashboard-widgets-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
1100
|
+
], template: "<!--\n This is an ugly trick I am using to render the component into an <ng-content>\n wrapped in an <ng-template> to move the component to different outlets without\n reinitializing it. This way the widget won't reload when moving between\n columns. When I remember how I programatically did this I will remove this\n weirdness.\n -->\n<seam-dashboard-widget-container\n *ngFor=\"let item of widgetItems$ | async; trackBy: _containerTrackByFn\"\n [def]=\"$any(item)\"\n>\n <!-- <ng-template [cdkPortalOutlet]=\"item.portal\"></ng-template> -->\n <ng-template [seamDashboardWidgetPortalOutlet]=\"item.portal\"></ng-template>\n</seam-dashboard-widget-container>\n\n<div\n class=\"dashboard-widgets-base d-flex flex-row justify-content-around\"\n style=\"flex: 1410px\"\n [style.padding.px]=\"_gapStyleSize$ | async\"\n (seamElemResized)=\"_resized($any($event))\"\n cdkDropListGroup\n>\n <div\n *ngFor=\"let col of widgetColumns$ | async; trackBy: _columnsTrackByFn\"\n class=\"d-flex flex-column flex-grow-1 dashboard-widgets-list\"\n cdkDropList\n [cdkDropListData]=\"col.items\"\n (cdkDropListDropped)=\"drop($any($event))\"\n >\n <div\n *ngFor=\"let item of col.items; trackBy: _containerTrackByFn\"\n class=\"dashboard-widgets-list-item\"\n [attr.data-widget-id]=\"item.widgetId\"\n cdkDrag\n [cdkDragDisabled]=\"!widgetsDraggable\"\n >\n <div [style.margin.px]=\"_gapStyleSize$ | async\">\n <seam-dashboard-widget-template-container\n [item]=\"item\"\n ></seam-dashboard-widget-template-container>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #toggleBtnTpl>\n <button\n seamButton\n theme=\"baselayout-action\"\n title=\"{{ widgetsDraggable ? 'Lock the Dashboard' : 'Modify Dashboard' }}\"\n (click)=\"toggleDragging()\"\n >\n <seam-icon [icon]=\"widgetsDraggable ? faUnlock : faLock\"></seam-icon>\n </button>\n</ng-template>\n", styles: ["seam-dashboard-widgets .dashboard-widgets-list-item:not(:has(seam-widget)){display:none}seam-dashboard-widgets{display:flex;justify-content:center}seam-dashboard-widgets .dashboard-widgets-base{max-width:1410px}seam-dashboard-widgets .dashboard-widgets-list{flex-basis:400px;max-width:500px}seam-dashboard-widgets .dashboard-widgets-list.cdk-drop-list-dragging .dashboard-widgets-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-widgets-list-item.cdk-drag-preview{box-sizing:border-box}.dashboard-widgets-list-item.cdk-drag-preview>div{border-radius:.25rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.dashboard-widgets-list-item.cdk-drag-disabled .cdk-drag-handle{cursor:default}.dashboard-widgets-list-item .cdk-drag-handle{cursor:move}.dashboard-widgets-list-item.cdk-drag-placeholder{opacity:0}.dashboard-widgets-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
1101
1101
|
}], ctorParameters: () => [], propDecorators: { gapSize: [{
|
|
1102
1102
|
type: Input
|
|
1103
1103
|
}], widgetsDraggable: [{
|