@fidurcode/dashboard-widgets-skeleton 2.0.2 → 2.0.3
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.
|
@@ -158,7 +158,7 @@ class WidgetComponent {
|
|
|
158
158
|
this.isRenaming.set(false);
|
|
159
159
|
}
|
|
160
160
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0-rc.0", ngImport: i0, type: WidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
161
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0-rc.0", type: WidgetComponent, isStandalone: false, selector: "app-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" }, properties: { "style.grid-area": "gridArea()", "style.--widget-padding": "widgetPadding()", "class.fullscreen": "fullscreen()", "class.collapsed": "data().collapsed" } }, ngImport: i0, template: "<div class=\"widget-container mat-elevation-z3\" [style.--widget-color]=\"data().color\">\n <div class=\"widget-header\">\n @if (isRenaming()) {\n <input\n class=\"rename-input\"\n [value]=\"data().customLabel || ''\"\n (blur)=\"finishRename($event)\"\n (keydown.enter)=\"finishRename($event)\"\n (keydown.escape)=\"isRenaming.set(false)\"\n [placeholder]=\"data().label | translate\"\n autofocus\n />\n } @else {\n <h3 class=\"widget-title\" (dblclick)=\"startRename()\">\n @if (data().customLabel) {\n {{ data().customLabel }}\n } @else {\n {{ data().label | translate }}\n }\n @if (data().pinned) {\n <mat-icon class=\"pin-icon\" inline>push_pin</mat-icon>\n }\n </h3>\n }\n <div class=\"widget-actions\">\n <button\n mat-icon-button\n (click)=\"store.toggleCollapse(data().id)\"\n [matTooltip]=\"(data().collapsed ? 'WIDGET.EXPAND' : 'WIDGET.COLLAPSE') | translate\">\n <mat-icon>{{ data().collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n </button>\n <button\n mat-icon-button\n (click)=\"toggleFullscreen()\"\n [matTooltip]=\"(fullscreen() ? 'WIDGET.EXIT_FULLSCREEN' : 'WIDGET.FULLSCREEN') | translate\">\n <mat-icon>{{ fullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\n </button>\n @if (store.editMode()) {\n <button\n mat-icon-button\n (click)=\"showWidgetOptions.set(true)\"\n [matTooltip]=\"'WIDGET.SETTINGS' | translate\">\n <mat-icon>settings</mat-icon>\n </button>\n }\n </div>\n </div>\n\n @if (!data().collapsed) {\n <div class=\"widget-content\">\n <ng-container [ngComponentOutlet]=\"data().content\"/>\n </div>\n }\n\n @if (showWidgetOptions()) {\n <app-widget-options [(showOptions)]=\"showWidgetOptions\" [widget]=\"data()\"/>\n }\n</div>", styles: [":host{display:block;border-radius:12px;font-family:inherit;color:inherit}:host.fullscreen{position:fixed;inset:0;z-index:1000;border-radius:0;grid-area:unset!important}:host.collapsed{align-self:start}.widget-container{position:relative;height:100%;width:100%;box-sizing:border-box;border-radius:inherit;overflow:hidden;background-color:var(--widget-color, var(--mat-sys-surface));display:flex;flex-direction:column;transition:background-color .2s}.widget-header{display:flex;align-items:center;padding:4px 4px 4px 12px;gap:2px;flex-shrink:0;border-bottom:1px solid color-mix(in srgb,currentColor 10%,transparent);min-height:44px}.widget-title{flex:1;margin:0;font-size:
|
|
161
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0-rc.0", type: WidgetComponent, isStandalone: false, selector: "app-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" }, properties: { "style.grid-area": "gridArea()", "style.--widget-padding": "widgetPadding()", "class.fullscreen": "fullscreen()", "class.collapsed": "data().collapsed" } }, ngImport: i0, template: "<div class=\"widget-container mat-elevation-z3\" [style.--widget-color]=\"data().color\">\n <div class=\"widget-header\">\n @if (isRenaming()) {\n <input\n class=\"rename-input\"\n [value]=\"data().customLabel || ''\"\n (blur)=\"finishRename($event)\"\n (keydown.enter)=\"finishRename($event)\"\n (keydown.escape)=\"isRenaming.set(false)\"\n [placeholder]=\"data().label | translate\"\n autofocus\n />\n } @else {\n <h3 class=\"widget-title\" (dblclick)=\"startRename()\">\n @if (data().customLabel) {\n {{ data().customLabel }}\n } @else {\n {{ data().label | translate }}\n }\n @if (data().pinned) {\n <mat-icon class=\"pin-icon\" inline>push_pin</mat-icon>\n }\n </h3>\n }\n <div class=\"widget-actions\">\n <button\n mat-icon-button\n (click)=\"store.toggleCollapse(data().id)\"\n [matTooltip]=\"(data().collapsed ? 'WIDGET.EXPAND' : 'WIDGET.COLLAPSE') | translate\">\n <mat-icon>{{ data().collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n </button>\n <button\n mat-icon-button\n (click)=\"toggleFullscreen()\"\n [matTooltip]=\"(fullscreen() ? 'WIDGET.EXIT_FULLSCREEN' : 'WIDGET.FULLSCREEN') | translate\">\n <mat-icon>{{ fullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\n </button>\n @if (store.editMode()) {\n <button\n mat-icon-button\n (click)=\"showWidgetOptions.set(true)\"\n [matTooltip]=\"'WIDGET.SETTINGS' | translate\">\n <mat-icon>settings</mat-icon>\n </button>\n }\n </div>\n </div>\n\n @if (!data().collapsed) {\n <div class=\"widget-content\">\n <ng-container [ngComponentOutlet]=\"data().content\"/>\n </div>\n }\n\n @if (showWidgetOptions()) {\n <app-widget-options [(showOptions)]=\"showWidgetOptions\" [widget]=\"data()\"/>\n }\n</div>", styles: [":host{display:block;border-radius:12px;font-family:inherit;color:inherit}:host.fullscreen{position:fixed;inset:0;z-index:1000;border-radius:0;grid-area:unset!important}:host.collapsed{align-self:start}.widget-container{position:relative;height:100%;width:100%;box-sizing:border-box;border-radius:inherit;overflow:hidden;background-color:var(--widget-color, var(--mat-sys-surface));display:flex;flex-direction:column;transition:background-color .2s}.widget-header{display:flex;align-items:center;padding:4px 4px 4px 12px;gap:2px;flex-shrink:0;border-bottom:1px solid color-mix(in srgb,currentColor 10%,transparent);min-height:44px}.widget-title{flex:1;margin:0;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px;cursor:text;-webkit-user-select:none;user-select:none}.pin-icon{font-size:14px;height:14px;width:14px;opacity:.5;flex-shrink:0}.rename-input{flex:1;border:none;border-bottom:1px solid var(--mat-sys-primary, currentColor);outline:none;background:transparent;color:inherit;font-size:.875rem;font-weight:500;font-family:inherit;padding:2px 0}.widget-actions{display:flex;align-items:center;flex-shrink:0}.widget-actions button{width:32px;height:32px;line-height:32px}.widget-actions button mat-icon{font-size:22px;height:22px;width:22px;line-height:22px}.widget-content{flex:1;overflow:auto;padding:var(--widget-padding, 12px)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: WidgetOptionsComponent, selector: "app-widget-options", inputs: ["widget", "showOptions"], outputs: ["showOptionsChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
|
|
162
162
|
}
|
|
163
163
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0-rc.0", ngImport: i0, type: WidgetComponent, decorators: [{
|
|
164
164
|
type: Component,
|
|
@@ -167,7 +167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0-rc.0", ng
|
|
|
167
167
|
'[style.--widget-padding]': 'widgetPadding()',
|
|
168
168
|
'[class.fullscreen]': 'fullscreen()',
|
|
169
169
|
'[class.collapsed]': 'data().collapsed',
|
|
170
|
-
}, template: "<div class=\"widget-container mat-elevation-z3\" [style.--widget-color]=\"data().color\">\n <div class=\"widget-header\">\n @if (isRenaming()) {\n <input\n class=\"rename-input\"\n [value]=\"data().customLabel || ''\"\n (blur)=\"finishRename($event)\"\n (keydown.enter)=\"finishRename($event)\"\n (keydown.escape)=\"isRenaming.set(false)\"\n [placeholder]=\"data().label | translate\"\n autofocus\n />\n } @else {\n <h3 class=\"widget-title\" (dblclick)=\"startRename()\">\n @if (data().customLabel) {\n {{ data().customLabel }}\n } @else {\n {{ data().label | translate }}\n }\n @if (data().pinned) {\n <mat-icon class=\"pin-icon\" inline>push_pin</mat-icon>\n }\n </h3>\n }\n <div class=\"widget-actions\">\n <button\n mat-icon-button\n (click)=\"store.toggleCollapse(data().id)\"\n [matTooltip]=\"(data().collapsed ? 'WIDGET.EXPAND' : 'WIDGET.COLLAPSE') | translate\">\n <mat-icon>{{ data().collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n </button>\n <button\n mat-icon-button\n (click)=\"toggleFullscreen()\"\n [matTooltip]=\"(fullscreen() ? 'WIDGET.EXIT_FULLSCREEN' : 'WIDGET.FULLSCREEN') | translate\">\n <mat-icon>{{ fullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\n </button>\n @if (store.editMode()) {\n <button\n mat-icon-button\n (click)=\"showWidgetOptions.set(true)\"\n [matTooltip]=\"'WIDGET.SETTINGS' | translate\">\n <mat-icon>settings</mat-icon>\n </button>\n }\n </div>\n </div>\n\n @if (!data().collapsed) {\n <div class=\"widget-content\">\n <ng-container [ngComponentOutlet]=\"data().content\"/>\n </div>\n }\n\n @if (showWidgetOptions()) {\n <app-widget-options [(showOptions)]=\"showWidgetOptions\" [widget]=\"data()\"/>\n }\n</div>", styles: [":host{display:block;border-radius:12px;font-family:inherit;color:inherit}:host.fullscreen{position:fixed;inset:0;z-index:1000;border-radius:0;grid-area:unset!important}:host.collapsed{align-self:start}.widget-container{position:relative;height:100%;width:100%;box-sizing:border-box;border-radius:inherit;overflow:hidden;background-color:var(--widget-color, var(--mat-sys-surface));display:flex;flex-direction:column;transition:background-color .2s}.widget-header{display:flex;align-items:center;padding:4px 4px 4px 12px;gap:2px;flex-shrink:0;border-bottom:1px solid color-mix(in srgb,currentColor 10%,transparent);min-height:44px}.widget-title{flex:1;margin:0;font-size:
|
|
170
|
+
}, template: "<div class=\"widget-container mat-elevation-z3\" [style.--widget-color]=\"data().color\">\n <div class=\"widget-header\">\n @if (isRenaming()) {\n <input\n class=\"rename-input\"\n [value]=\"data().customLabel || ''\"\n (blur)=\"finishRename($event)\"\n (keydown.enter)=\"finishRename($event)\"\n (keydown.escape)=\"isRenaming.set(false)\"\n [placeholder]=\"data().label | translate\"\n autofocus\n />\n } @else {\n <h3 class=\"widget-title\" (dblclick)=\"startRename()\">\n @if (data().customLabel) {\n {{ data().customLabel }}\n } @else {\n {{ data().label | translate }}\n }\n @if (data().pinned) {\n <mat-icon class=\"pin-icon\" inline>push_pin</mat-icon>\n }\n </h3>\n }\n <div class=\"widget-actions\">\n <button\n mat-icon-button\n (click)=\"store.toggleCollapse(data().id)\"\n [matTooltip]=\"(data().collapsed ? 'WIDGET.EXPAND' : 'WIDGET.COLLAPSE') | translate\">\n <mat-icon>{{ data().collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n </button>\n <button\n mat-icon-button\n (click)=\"toggleFullscreen()\"\n [matTooltip]=\"(fullscreen() ? 'WIDGET.EXIT_FULLSCREEN' : 'WIDGET.FULLSCREEN') | translate\">\n <mat-icon>{{ fullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\n </button>\n @if (store.editMode()) {\n <button\n mat-icon-button\n (click)=\"showWidgetOptions.set(true)\"\n [matTooltip]=\"'WIDGET.SETTINGS' | translate\">\n <mat-icon>settings</mat-icon>\n </button>\n }\n </div>\n </div>\n\n @if (!data().collapsed) {\n <div class=\"widget-content\">\n <ng-container [ngComponentOutlet]=\"data().content\"/>\n </div>\n }\n\n @if (showWidgetOptions()) {\n <app-widget-options [(showOptions)]=\"showWidgetOptions\" [widget]=\"data()\"/>\n }\n</div>", styles: [":host{display:block;border-radius:12px;font-family:inherit;color:inherit}:host.fullscreen{position:fixed;inset:0;z-index:1000;border-radius:0;grid-area:unset!important}:host.collapsed{align-self:start}.widget-container{position:relative;height:100%;width:100%;box-sizing:border-box;border-radius:inherit;overflow:hidden;background-color:var(--widget-color, var(--mat-sys-surface));display:flex;flex-direction:column;transition:background-color .2s}.widget-header{display:flex;align-items:center;padding:4px 4px 4px 12px;gap:2px;flex-shrink:0;border-bottom:1px solid color-mix(in srgb,currentColor 10%,transparent);min-height:44px}.widget-title{flex:1;margin:0;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px;cursor:text;-webkit-user-select:none;user-select:none}.pin-icon{font-size:14px;height:14px;width:14px;opacity:.5;flex-shrink:0}.rename-input{flex:1;border:none;border-bottom:1px solid var(--mat-sys-primary, currentColor);outline:none;background:transparent;color:inherit;font-size:.875rem;font-weight:500;font-family:inherit;padding:2px 0}.widget-actions{display:flex;align-items:center;flex-shrink:0}.widget-actions button{width:32px;height:32px;line-height:32px}.widget-actions button mat-icon{font-size:22px;height:22px;width:22px;line-height:22px}.widget-content{flex:1;overflow:auto;padding:var(--widget-padding, 12px)}\n"] }]
|
|
171
171
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], onEscapeKey: [{
|
|
172
172
|
type: HostListener,
|
|
173
173
|
args: ['document:keydown.escape']
|