@rolatech/angular-components 17.2.52 → 17.3.0
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.
- package/esm2022/lib/angular-components.module.mjs +4 -4
- package/esm2022/lib/app-container/app-container.component.mjs +3 -3
- package/esm2022/lib/app-container-content/app-container-content.component.mjs +3 -3
- package/esm2022/lib/app-drawer/app-drawer.component.mjs +3 -3
- package/esm2022/lib/app-footer/app-footer.component.mjs +3 -3
- package/esm2022/lib/app-layout/app-layout.component.mjs +3 -3
- package/esm2022/lib/app-page/app-page.component.mjs +3 -3
- package/esm2022/lib/confirmation-dialog/confirmation-dialog.component.mjs +3 -3
- package/esm2022/lib/console-layout/console-layout.component.mjs +3 -3
- package/esm2022/lib/folder/folder.component.mjs +3 -3
- package/esm2022/lib/icon/icon.component.mjs +3 -3
- package/esm2022/lib/icon-button/icon-button.component.mjs +5 -5
- package/esm2022/lib/image/image.component.mjs +3 -3
- package/esm2022/lib/material.module.mjs +4 -4
- package/esm2022/lib/media-list/media-list.component.mjs +3 -3
- package/esm2022/lib/media-list-item/media-list-item.component.mjs +3 -3
- package/esm2022/lib/media-preview/media-preview.component.mjs +3 -3
- package/esm2022/lib/media-preview-dialog/media-preview-dialog.component.mjs +3 -3
- package/esm2022/lib/media-upload/media-upload.component.mjs +3 -3
- package/esm2022/lib/media-upload-dialog/media-upload-dialog.component.mjs +3 -3
- package/esm2022/lib/menu-user/menu-user.component.mjs +3 -3
- package/esm2022/lib/mini-guide/mini-guide.component.mjs +3 -3
- package/esm2022/lib/not-found/not-found.component.mjs +3 -3
- package/esm2022/lib/paginator/paginator.component.mjs +3 -3
- package/esm2022/lib/spacer/spacer.component.mjs +3 -3
- package/esm2022/lib/spinner/spinner.component.mjs +3 -3
- package/esm2022/lib/storage-bucket-create/storage-bucket-create.component.mjs +3 -3
- package/esm2022/lib/storage-file-upload/storage-file-upload.component.mjs +3 -3
- package/esm2022/lib/storage-folder-create/storage-folder-create.component.mjs +3 -3
- package/esm2022/lib/tab/tab.component.mjs +5 -5
- package/esm2022/lib/table/table.component.mjs +3 -3
- package/esm2022/lib/tabs/tabs.component.mjs +12 -8
- package/esm2022/lib/thumbnail/thumbnail.component.mjs +3 -3
- package/esm2022/lib/title/title.component.mjs +8 -6
- package/esm2022/lib/toolbar/toolbar.component.mjs +3 -3
- package/esm2022/lib/topbar/topbar.component.mjs +3 -3
- package/esm2022/lib/topbar-avatar-menu/topbar-avatar-menu.component.mjs +3 -3
- package/esm2022/lib/wechat-connect-dialog/wechat-connect-dialog.component.mjs +3 -3
- package/fesm2022/rolatech-angular-components.mjs +129 -123
- package/fesm2022/rolatech-angular-components.mjs.map +1 -1
- package/lib/title/title.component.d.ts +3 -1
- package/package.json +1 -1
- package/themes/_default.scss +1 -1
|
@@ -84,10 +84,10 @@ class IconComponent {
|
|
|
84
84
|
}
|
|
85
85
|
});
|
|
86
86
|
}
|
|
87
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
88
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.
|
|
87
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
88
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.3", type: IconComponent, isStandalone: true, selector: "rolatech-icon", inputs: { filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-icon": "this.hasClass" } }, ngImport: i0, template: "<mat-icon>\n <ng-content></ng-content>\n</mat-icon>\n", styles: [".rolatech-icon{display:inline-flex;align-items:center;justify-content:center;position:relative;vertical-align:middle;width:var(--rolatech-icon-width, 24px);height:var(--rolatech-icon-height, 24px)}.rolatech-icon mat-icon{font-family:Material Symbols Rounded}.rolatech-icon[filled] mat-icon{font-family:Material Symbols Rounded Filled}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
89
89
|
}
|
|
90
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
90
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: IconComponent, decorators: [{
|
|
91
91
|
type: Component,
|
|
92
92
|
args: [{ selector: 'rolatech-icon', standalone: true, imports: [CommonModule, MatIcon], encapsulation: ViewEncapsulation.None, template: "<mat-icon>\n <ng-content></ng-content>\n</mat-icon>\n", styles: [".rolatech-icon{display:inline-flex;align-items:center;justify-content:center;position:relative;vertical-align:middle;width:var(--rolatech-icon-width, 24px);height:var(--rolatech-icon-height, 24px)}.rolatech-icon mat-icon{font-family:Material Symbols Rounded}.rolatech-icon[filled] mat-icon{font-family:Material Symbols Rounded Filled}\n"] }]
|
|
93
93
|
}], ctorParameters: () => [], propDecorators: { hasClass: [{
|
|
@@ -97,32 +97,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
|
|
|
97
97
|
|
|
98
98
|
class IconButtonComponent {
|
|
99
99
|
hasClass = true;
|
|
100
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
101
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
100
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
101
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: IconButtonComponent, isStandalone: true, selector: "rolatech-icon-button", host: { properties: { "class.rolatech-icon-button": "this.hasClass" } }, ngImport: i0, template: "<button\n id=\"button\"\n class=\"w-10 h-10 p-2 inline-block relative cursor-pointer hover:bg-gray-100 rounded-full rolatech-icon-button\"\n onclick=\"this.blur()\"\n>\n <!-- <ng-content select=\"rolatech-icon\"></ng-content> -->\n <rolatech-icon>\n <ng-content></ng-content>\n </rolatech-icon>\n</button>\n", styles: [".rolatech-icon-button{--rolatech-icon-button-icon-width: 24px;--rolatech-icon-button-icon-height: 24px;color:var(--rolatech-spec-icon-active-other);width:40px;height:40px;box-sizing:border-box;display:block}button.rolatech-icon-button{vertical-align:middle;color:inherit;outline:none;background:none;margin:0;border:none;padding:0;width:100%;height:100%;line-height:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
102
102
|
}
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
104
104
|
type: Component,
|
|
105
|
-
args: [{ selector: 'rolatech-icon-button', standalone: true, imports: [CommonModule, IconComponent], encapsulation: ViewEncapsulation.None, template: "<button\n id=\"button\"\n class=\"w-10 h-10 p-2 inline-block relative cursor-pointer hover:bg-gray-100 rounded-full rolatech-icon-button\"\n onclick=\"this.blur()\"\n>\n <!-- <ng-content select=\"rolatech-icon\"></ng-content> -->\n <rolatech-icon>\n <ng-content></ng-content>\n </rolatech-icon>\n</button>\n", styles: [".rolatech-icon-button{--rolatech-icon-button-icon-width: 24px;--rolatech-icon-button-icon-height: 24px;color:var(--rolatech-spec-icon-active-other);width:40px;height:40px;box-sizing:border-box}button.rolatech-icon-button{vertical-align:middle;color:inherit;outline:none;background:none;margin:0;border:none;padding:0;width:100%;height:100%;line-height:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}\n"] }]
|
|
105
|
+
args: [{ selector: 'rolatech-icon-button', standalone: true, imports: [CommonModule, IconComponent], encapsulation: ViewEncapsulation.None, template: "<button\n id=\"button\"\n class=\"w-10 h-10 p-2 inline-block relative cursor-pointer hover:bg-gray-100 rounded-full rolatech-icon-button\"\n onclick=\"this.blur()\"\n>\n <!-- <ng-content select=\"rolatech-icon\"></ng-content> -->\n <rolatech-icon>\n <ng-content></ng-content>\n </rolatech-icon>\n</button>\n", styles: [".rolatech-icon-button{--rolatech-icon-button-icon-width: 24px;--rolatech-icon-button-icon-height: 24px;color:var(--rolatech-spec-icon-active-other);width:40px;height:40px;box-sizing:border-box;display:block}button.rolatech-icon-button{vertical-align:middle;color:inherit;outline:none;background:none;margin:0;border:none;padding:0;width:100%;height:100%;line-height:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}\n"] }]
|
|
106
106
|
}], propDecorators: { hasClass: [{
|
|
107
107
|
type: HostBinding,
|
|
108
108
|
args: ['class.rolatech-icon-button']
|
|
109
109
|
}] } });
|
|
110
110
|
|
|
111
111
|
class TitleComponent {
|
|
112
|
-
|
|
113
|
-
|
|
112
|
+
title = input();
|
|
113
|
+
subtitle = input();
|
|
114
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
115
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.3", type: TitleComponent, isStandalone: true, selector: "rolatech-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- <a class=\"block text-xl font-medium py-3 cursor-pointer\">\n <ng-content></ng-content>\n</a> -->\n<div class=\"flex flex-row items-center\">\n <a class=\"block text-xl font-medium py-3\"\n ><span>{{ title() }}</span></a\n >\n <a class=\"text-sm leading-3 text-gray-500\"\n ><span>{{ subtitle() }}</span></a\n >\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
114
116
|
}
|
|
115
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
117
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TitleComponent, decorators: [{
|
|
116
118
|
type: Component,
|
|
117
|
-
args: [{ selector: 'rolatech-title', standalone: true, imports: [CommonModule], template: "<a class=\"block text-xl font-medium py-3 cursor-pointer\">\n <ng-content></ng-content>\n</a>\n" }]
|
|
119
|
+
args: [{ selector: 'rolatech-title', standalone: true, imports: [CommonModule], template: "<!-- <a class=\"block text-xl font-medium py-3 cursor-pointer\">\n <ng-content></ng-content>\n</a> -->\n<div class=\"flex flex-row items-center\">\n <a class=\"block text-xl font-medium py-3\"\n ><span>{{ title() }}</span></a\n >\n <a class=\"text-sm leading-3 text-gray-500\"\n ><span>{{ subtitle() }}</span></a\n >\n</div>\n" }]
|
|
118
120
|
}] });
|
|
119
121
|
|
|
120
122
|
class AppContainerComponent {
|
|
121
123
|
hasClass = true;
|
|
122
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
123
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
124
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AppContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
125
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: AppContainerComponent, isStandalone: true, selector: "rolatech-app-container", host: { properties: { "class.rolatech-app-container": "this.hasClass" } }, ngImport: i0, template: "<div class=\"px-4 xl:max-w-[1024px] 2xl:max-w-[1280px] m-auto\">\n <ng-content></ng-content>\n</div>\n", styles: ["@media (min-width: 1280){.rolatech-app-container{max-width:var(--rolatech-app-container-max-width, 1024px);margin:0 auto;padding:0 16px}}@media (min-width: 1536px){.rolatech-app-container{max-width:var(--rolatech-app-container-max-width, 1280px);margin:0 auto;padding:0 16px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
124
126
|
}
|
|
125
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
127
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AppContainerComponent, decorators: [{
|
|
126
128
|
type: Component,
|
|
127
129
|
args: [{ selector: 'rolatech-app-container', standalone: true, imports: [CommonModule], template: "<div class=\"px-4 xl:max-w-[1024px] 2xl:max-w-[1280px] m-auto\">\n <ng-content></ng-content>\n</div>\n", styles: ["@media (min-width: 1280){.rolatech-app-container{max-width:var(--rolatech-app-container-max-width, 1024px);margin:0 auto;padding:0 16px}}@media (min-width: 1536px){.rolatech-app-container{max-width:var(--rolatech-app-container-max-width, 1280px);margin:0 auto;padding:0 16px}}\n"] }]
|
|
128
130
|
}], propDecorators: { hasClass: [{
|
|
@@ -131,10 +133,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
|
|
|
131
133
|
}] } });
|
|
132
134
|
|
|
133
135
|
class AppContainerContentComponent {
|
|
134
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
135
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
136
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AppContainerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
137
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: AppContainerContentComponent, isStandalone: true, selector: "rolatech-app-container-content", ngImport: i0, template: "<div>\n <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSidenavModule }] });
|
|
136
138
|
}
|
|
137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AppContainerContentComponent, decorators: [{
|
|
138
140
|
type: Component,
|
|
139
141
|
args: [{ selector: 'rolatech-app-container-content', standalone: true, imports: [CommonModule, MatSidenavModule], template: "<div>\n <ng-content></ng-content>\n</div>\n" }]
|
|
140
142
|
}] });
|
|
@@ -194,10 +196,10 @@ class TopbarComponent {
|
|
|
194
196
|
}
|
|
195
197
|
this.appDrawer.toggle();
|
|
196
198
|
}
|
|
197
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
198
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.
|
|
199
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
200
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TopbarComponent, isStandalone: true, selector: "rolatech-topbar", host: { properties: { "id": "this.hostId", "class.rolatech-topbar": "this.hasClass" } }, ngImport: i0, template: "<div class=\"h-14 px-2 sm:px-4 flex items-center\">\n @if (persistent || (isHandset$ | async)) {\n <rolatech-icon-button id=\"topbar-menu-button\" (click)=\"onToggle()\">menu</rolatech-icon-button>\n }\n <div id=\"title\" class=\"cursor-pointer\" routerLink=\"/\">\n <div class=\"text-black text-lg sm:text-xl font-bold\">\n <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n <span>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div class=\"flex-1\"></div>\n <ng-content></ng-content>\n</div>\n", styles: ["rolatech-topbar{position:fixed;top:0;width:100%;z-index:900;transform:translateY(0);transition:transform .3s ease;background:var(--rolatech-topbar-background-color, #fff);color:var(--rolatech-topbar-color, #000)}rolatech-topbar:not(:has(#topbar-menu-button)) #title{padding-left:16px}rolatech-app-layout rolatech-app-drawer[persistent][opened]~rolatech-topbar{margin-left:256px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconButtonComponent, selector: "rolatech-icon-button" }, { kind: "ngmodule", type: MatButtonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
199
201
|
}
|
|
200
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
202
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TopbarComponent, decorators: [{
|
|
201
203
|
type: Component,
|
|
202
204
|
args: [{ selector: 'rolatech-topbar', standalone: true, imports: [CommonModule, RouterLink, IconButtonComponent, MatButtonModule, MatIcon], encapsulation: ViewEncapsulation.None, template: "<div class=\"h-14 px-2 sm:px-4 flex items-center\">\n @if (persistent || (isHandset$ | async)) {\n <rolatech-icon-button id=\"topbar-menu-button\" (click)=\"onToggle()\">menu</rolatech-icon-button>\n }\n <div id=\"title\" class=\"cursor-pointer\" routerLink=\"/\">\n <div class=\"text-black text-lg sm:text-xl font-bold\">\n <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n <span>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div class=\"flex-1\"></div>\n <ng-content></ng-content>\n</div>\n", styles: ["rolatech-topbar{position:fixed;top:0;width:100%;z-index:900;transform:translateY(0);transition:transform .3s ease;background:var(--rolatech-topbar-background-color, #fff);color:var(--rolatech-topbar-color, #000)}rolatech-topbar:not(:has(#topbar-menu-button)) #title{padding-left:16px}rolatech-app-layout rolatech-app-drawer[persistent][opened]~rolatech-topbar{margin-left:256px}\n"] }]
|
|
203
205
|
}], ctorParameters: () => [], propDecorators: { hostId: [{
|
|
@@ -313,10 +315,10 @@ class AppDrawerComponent {
|
|
|
313
315
|
});
|
|
314
316
|
}
|
|
315
317
|
}
|
|
316
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
317
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.
|
|
318
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AppDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
319
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: AppDrawerComponent, isStandalone: true, selector: "rolatech-app-drawer", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-app-drawer": "this.hasClass", "style.transition-duration": "this.duration" } }, viewQueries: [{ propertyName: "guideEl", first: true, predicate: ["guide"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "scrimEl", first: true, predicate: ["scrim"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"scrim\" #scrim class=\"tp-rolatech-app-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"tp-rolatech-app-drawer\">\n <div id=\"guide-wrapper\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\">\n <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n <rolatech-icon-button #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\">menu</rolatech-icon-button>\n <div class=\"text-black text-lg sm:text-xl font-bold\" routerLink=\"/\">\n <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n <span>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div id=\"guide-inner-content\" class=\"flex flex-col rolatech-app\">\n @if (completed) {\n <div class=\"flex p-3 flex-col gap-2\">\n @for (item of links(); track $index) {\n @if (item.children) {\n <div class=\"cursor-pointer\">\n <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n <span class=\"ml-3\">{{ item.title }}</span>\n <div class=\"flex-1\"></div>\n <rolatech-icon\n style=\"transition-duration:.5s;transform: {{ panelOpenState ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n >expand_more</rolatech-icon\n >\n </div>\n <div class=\"flex flex-col pl-8\" [@heightAnimation]=\"panelOpenState === true ? 'open' : 'closed'\">\n @for (child of item.children; track child) {\n <a\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-3\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <span class=\"text-sm\">{{ child.title }}</span>\n </a>\n }\n </div>\n </div>\n } @else {\n @if (item.openinView) {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [href]=\"item.link\"\n target=\"_blank\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm opacity-75\">{{ item.subtitle }}</span>\n </div>\n </div>\n <rolatech-icon class=\"scale-90\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [routerLink]=\"item.link\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\" [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-app-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility}rolatech-app-drawer[persistent]{width:var(--app-drawer-width, 256px)}rolatech-app-drawer[persistent][position=top]{width:100%}rolatech-app-drawer[opened]{visibility:visible}rolatech-app-drawer:not(:has(#drawer-menu-button)){padding-left:16px}rolatech-app-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--app-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-app-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-app-drawer[position=top] #contentContainer #guide-inner-content div{display:flex!important;flex-direction:row!important;overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin;height:56px;align-items:center}rolatech-app-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-app-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-app-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=left]{right:auto}rolatech-app-drawer[persistent][position=right]{left:auto}rolatech-app-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-app-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-app-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#contentContainer.tp-rolatech-app-drawer{position:absolute;top:0;bottom:0;width:var(--app-drawer-width, 256px);padding:var(--app-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;background-color:#fff;background-color:var(--app-drawer-content-container-background-color, white)}#contentContainer.tp-rolatech-app-drawer[opened]{transform:translateZ(0)}#guide-inner-content.rolatech-app{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.tp-rolatech-app-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--app-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.tp-rolatech-app-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-app-drawer:not([persistent]) #guide-spacer{display:none}rolatech-app-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:#0000000d;border-radius:8px;font-weight:500}.content{display:flex;flex-direction:column;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconButtonComponent, selector: "rolatech-icon-button" }, { kind: "component", type: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }], animations: [heightAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
318
320
|
}
|
|
319
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AppDrawerComponent, decorators: [{
|
|
320
322
|
type: Component,
|
|
321
323
|
args: [{ selector: 'rolatech-app-drawer', standalone: true, imports: [
|
|
322
324
|
CommonModule,
|
|
@@ -396,10 +398,10 @@ class MiniGuideComponent {
|
|
|
396
398
|
}
|
|
397
399
|
this.opened ? this.close() : this.open();
|
|
398
400
|
}
|
|
399
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
400
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.
|
|
401
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MiniGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
402
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: MiniGuideComponent, isStandalone: true, selector: "rolatech-mini-guide", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.rolatech-mini-guide": "this.hasClass" } }, ngImport: i0, template: "<div id=\"items\" class=\"w-16 mt-[6px]\" style=\"transition-duration: 200ms\">\n @for (item of items(); track $index) {\n <div>\n <a\n [routerLink]=\"item.link\"\n routerLinkActive=\"min-guide-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #routerLink=\"routerLinkActive\"\n class=\"flex flex-col justify-center items-center py-4\"\n >\n <rolatech-icon [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n @if (title()) {\n <span class=\"text-xs mt-1 max-w-full truncate\">{{ item.title }}</span>\n }\n </a>\n </div>\n }\n</div>\n", styles: [".rolatech-mini-guide{position:fixed;left:0;top:var(--rolatech-toolbar-height, 56px);bottom:0;width:var(--rolatech-mini-guide-width, 72px);box-sizing:border-box;display:inline-block;background-color:var(--rolatech-spec-base-background, #fff);z-index:2028;padding:0 4px}.min-guide-active{background-color:#0000000d;border-radius:8px;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
401
403
|
}
|
|
402
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
404
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MiniGuideComponent, decorators: [{
|
|
403
405
|
type: Component,
|
|
404
406
|
args: [{ selector: 'rolatech-mini-guide', standalone: true, imports: [CommonModule, IconButtonComponent, IconComponent, RouterLink, RouterLinkActive], encapsulation: ViewEncapsulation.None, template: "<div id=\"items\" class=\"w-16 mt-[6px]\" style=\"transition-duration: 200ms\">\n @for (item of items(); track $index) {\n <div>\n <a\n [routerLink]=\"item.link\"\n routerLinkActive=\"min-guide-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #routerLink=\"routerLinkActive\"\n class=\"flex flex-col justify-center items-center py-4\"\n >\n <rolatech-icon [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n @if (title()) {\n <span class=\"text-xs mt-1 max-w-full truncate\">{{ item.title }}</span>\n }\n </a>\n </div>\n }\n</div>\n", styles: [".rolatech-mini-guide{position:fixed;left:0;top:var(--rolatech-toolbar-height, 56px);bottom:0;width:var(--rolatech-mini-guide-width, 72px);box-sizing:border-box;display:inline-block;background-color:var(--rolatech-spec-base-background, #fff);z-index:2028;padding:0 4px}.min-guide-active{background-color:#0000000d;border-radius:8px;font-weight:500}\n"] }]
|
|
405
407
|
}], propDecorators: { hasId: [{
|
|
@@ -467,10 +469,10 @@ class AppLayoutComponent {
|
|
|
467
469
|
this.renderer.removeAttribute(this.el.nativeElement, 'mini-guide-visible');
|
|
468
470
|
}
|
|
469
471
|
}
|
|
470
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
471
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.
|
|
472
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AppLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
473
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.3", type: AppLayoutComponent, isStandalone: true, selector: "rolatech-app-layout", host: { properties: { "id": "this.hostId", "class.rolatech-app-layout": "this.hasClass" } }, queries: [{ propertyName: "topbar", first: true, predicate: TopbarComponent, descendants: true, isSignal: true }, { propertyName: "drawer", first: true, predicate: AppDrawerComponent, descendants: true, isSignal: true }, { propertyName: "guide", first: true, predicate: MiniGuideComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-app-drawer\"></ng-content>\n<ng-content select=\"rolatech-mini-guide\"></ng-content>\n<ng-content select=\"rolatech-app-page\"></ng-content>\n<div class=\"flex-1\"></div>\n<ng-content select=\"rolatech-app-footer\"></ng-content>\n", styles: ["rolatech-app-layout{display:flex;flex-direction:column;height:100%}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=top]~rolatech-app-page{margin-top:56px}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=left]~rolatech-app-page{margin-left:256px}rolatech-app-layout rolatech-app-drawer[persistent][opened][position=right]~rolatech-app-page{margin-right:256px}rolatech-app-layout rolatech-mini-guide[mini-guide-visible]~rolatech-app-page{margin-left:var(--rolatech-mini-guide-width, 72px)}rolatech-app-page{display:block;padding-top:56px}rolatech-app-page[mini-guide-visible] .content{margin-left:72px}rolatech-app-layout[mini-guide-visible] rolatech-app-page.ytd-app{margin-left:var(--ytd-mini-guide-width, 72px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatSidenavModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
472
474
|
}
|
|
473
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
475
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AppLayoutComponent, decorators: [{
|
|
474
476
|
type: Component,
|
|
475
477
|
args: [{ selector: 'rolatech-app-layout', standalone: true, imports: [
|
|
476
478
|
CommonModule,
|
|
@@ -499,10 +501,10 @@ class AppPageComponent {
|
|
|
499
501
|
hostId = 'rolatech-app-page';
|
|
500
502
|
hasClass = true;
|
|
501
503
|
hasAppClass = true;
|
|
502
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
503
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
504
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AppPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
505
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: AppPageComponent, isStandalone: true, selector: "rolatech-app-page", host: { properties: { "id": "this.hostId", "class.rolatech-app-page": "this.hasClass", "class.ytd-app": "this.hasAppClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
504
506
|
}
|
|
505
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AppPageComponent, decorators: [{
|
|
506
508
|
type: Component,
|
|
507
509
|
args: [{ selector: 'rolatech-app-page', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
|
|
508
510
|
}], propDecorators: { hostId: [{
|
|
@@ -522,10 +524,10 @@ class AppFooterComponent {
|
|
|
522
524
|
config = inject(APP_CONFIG);
|
|
523
525
|
title = input();
|
|
524
526
|
copyright = input('');
|
|
525
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
526
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.
|
|
527
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AppFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
528
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.3", type: AppFooterComponent, isStandalone: true, selector: "rolatech-app-footer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-app-footer": "this.hasClass" } }, ngImport: i0, template: "<div class=\"bg-gray-100 text-black flex flex-col justify-between px-5 sm:px-16 py-6\">\n <div class=\"flex flex-col sm:flex-row sm:gap-10 gap-3 py-3\">\n <ng-content></ng-content>\n </div>\n <div class=\"flex justify-between mt-6\">\n <div class=\"cursor-pointer\">\n <a href=\"/\" target=\"_blank\" class=\"text-lg font-bold\">{{ title() }}</a>\n </div>\n <span class=\"text-sm font-thin\">\u00A9{{ copyright() }}</span>\n </div>\n</div>\n", styles: [".rolatech-app-footer{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
527
529
|
}
|
|
528
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
530
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AppFooterComponent, decorators: [{
|
|
529
531
|
type: Component,
|
|
530
532
|
args: [{ selector: 'rolatech-app-footer', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"bg-gray-100 text-black flex flex-col justify-between px-5 sm:px-16 py-6\">\n <div class=\"flex flex-col sm:flex-row sm:gap-10 gap-3 py-3\">\n <ng-content></ng-content>\n </div>\n <div class=\"flex justify-between mt-6\">\n <div class=\"cursor-pointer\">\n <a href=\"/\" target=\"_blank\" class=\"text-lg font-bold\">{{ title() }}</a>\n </div>\n <span class=\"text-sm font-thin\">\u00A9{{ copyright() }}</span>\n </div>\n</div>\n", styles: [".rolatech-app-footer{width:100%}\n"] }]
|
|
531
533
|
}], propDecorators: { hostId: [{
|
|
@@ -537,10 +539,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
|
|
|
537
539
|
}] } });
|
|
538
540
|
|
|
539
541
|
class ConsoleLayoutComponent {
|
|
540
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
541
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
542
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ConsoleLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
543
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: ConsoleLayoutComponent, isStandalone: true, selector: "rolatech-console-layout", ngImport: i0, template: "<p>console-layout works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
542
544
|
}
|
|
543
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
545
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ConsoleLayoutComponent, decorators: [{
|
|
544
546
|
type: Component,
|
|
545
547
|
args: [{ selector: 'rolatech-console-layout', standalone: true, imports: [CommonModule], template: "<p>console-layout works!</p>\n" }]
|
|
546
548
|
}] });
|
|
@@ -557,10 +559,10 @@ class MenuUserComponent {
|
|
|
557
559
|
// this.data = this.user();
|
|
558
560
|
// });
|
|
559
561
|
}
|
|
560
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
561
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.
|
|
562
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MenuUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
563
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: MenuUserComponent, isStandalone: true, selector: "rolatech-menu-user", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"min-w-[256px]\">\n @if (user()) {\n <div class=\"px-6 py-3\">\n <div class=\"flex flex-row items-center\">\n <div class=\"mr-3 w-14 h-14 rounded-full bg-orange-600\">\n @if (user().avatar) {\n <img [src]=\"user().avatar\" class=\"w-14 h-14 object-cover rounded-full\" />\n }\n </div>\n <div class=\"flex flex-col\">\n <div>\n <div class=\"text-lg font-bold\">{{ user().name }}</div>\n <div class=\"formated-string\">\n <span>@{{ user().username }}</span>\n </div>\n </div>\n </div>\n </div>\n <!-- <div class=\"flex\">\n <a\n [href]=\"myaccountUrl\"\n target=\"_blank\"\n class=\"text-sm my-2 p-1 px-6 ml-24 rounded border border-gray-300 hover:bg-gray-200\"\n >\u7528\u6237\u4E2D\u5FC3</a\n >\n </div> -->\n </div>\n }\n\n <div class=\"flex justify-between items-center\">\n <a mat-menu-item [href]=\"myaccountUrl\" target=\"_blank\" class=\"px-6\">\n <span class=\"flex justify-between items-center\">\n <span class=\"pl-2\"> \u7528\u6237\u4E2D\u5FC3 </span>\n <span class=\"flex\"> <mat-icon>open_in_new</mat-icon></span>\n </span>\n </a>\n </div>\n</div>\n", styles: [".formated-string{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
562
564
|
}
|
|
563
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
565
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MenuUserComponent, decorators: [{
|
|
564
566
|
type: Component,
|
|
565
567
|
args: [{ standalone: true, imports: [MatMenuModule, MatIconModule], selector: 'rolatech-menu-user', template: "<div class=\"min-w-[256px]\">\n @if (user()) {\n <div class=\"px-6 py-3\">\n <div class=\"flex flex-row items-center\">\n <div class=\"mr-3 w-14 h-14 rounded-full bg-orange-600\">\n @if (user().avatar) {\n <img [src]=\"user().avatar\" class=\"w-14 h-14 object-cover rounded-full\" />\n }\n </div>\n <div class=\"flex flex-col\">\n <div>\n <div class=\"text-lg font-bold\">{{ user().name }}</div>\n <div class=\"formated-string\">\n <span>@{{ user().username }}</span>\n </div>\n </div>\n </div>\n </div>\n <!-- <div class=\"flex\">\n <a\n [href]=\"myaccountUrl\"\n target=\"_blank\"\n class=\"text-sm my-2 p-1 px-6 ml-24 rounded border border-gray-300 hover:bg-gray-200\"\n >\u7528\u6237\u4E2D\u5FC3</a\n >\n </div> -->\n </div>\n }\n\n <div class=\"flex justify-between items-center\">\n <a mat-menu-item [href]=\"myaccountUrl\" target=\"_blank\" class=\"px-6\">\n <span class=\"flex justify-between items-center\">\n <span class=\"pl-2\"> \u7528\u6237\u4E2D\u5FC3 </span>\n <span class=\"flex\"> <mat-icon>open_in_new</mat-icon></span>\n </span>\n </a>\n </div>\n</div>\n", styles: [".formated-string{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}\n"] }]
|
|
566
568
|
}], ctorParameters: () => [] });
|
|
@@ -570,10 +572,10 @@ class TopbarAvatarMenuComponent {
|
|
|
570
572
|
platformId = inject(PLATFORM_ID);
|
|
571
573
|
menu = input.required();
|
|
572
574
|
user = input();
|
|
573
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
574
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.
|
|
575
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TopbarAvatarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
576
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TopbarAvatarMenuComponent, isStandalone: true, selector: "rolatech-topbar-avatar-menu", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (user()) {\n <div class=\"flex\">\n <a\n class=\"flex justify-center items-center rounded-full overflow-hidden cursor-pointer hover:outline-gray-200 outline outline-transparent outline-4\"\n [matMenuTriggerFor]=\"menu()\"\n >\n <div class=\"bg-orange-600 w-9 h-9\">\n @if (user().avatar) {\n <img class=\"w-9 h-9 object-cover\" [src]=\"user().avatar\" />\n }\n </div>\n </a>\n </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
|
|
575
577
|
}
|
|
576
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
578
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TopbarAvatarMenuComponent, decorators: [{
|
|
577
579
|
type: Component,
|
|
578
580
|
args: [{ selector: 'rolatech-topbar-avatar-menu', standalone: true, imports: [
|
|
579
581
|
CommonModule,
|
|
@@ -588,10 +590,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
|
|
|
588
590
|
}] });
|
|
589
591
|
|
|
590
592
|
class FolderComponent {
|
|
591
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
592
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
593
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
594
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: FolderComponent, isStandalone: true, selector: "rolatech-folder", ngImport: i0, template: "<div></div>\n", styles: [""] });
|
|
593
595
|
}
|
|
594
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
596
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FolderComponent, decorators: [{
|
|
595
597
|
type: Component,
|
|
596
598
|
args: [{ selector: 'rolatech-folder', standalone: true, template: "<div></div>\n" }]
|
|
597
599
|
}] });
|
|
@@ -626,10 +628,10 @@ class MediaPreviewDialogComponent {
|
|
|
626
628
|
this.prevDisabled = this.selected === 0;
|
|
627
629
|
this.nextDisabled = this.selected === this.data.media.length - 1;
|
|
628
630
|
}
|
|
629
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
630
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.
|
|
631
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MediaPreviewDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
632
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: MediaPreviewDialogComponent, isStandalone: true, selector: "rolatech-media-preview-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n <div class=\"h-16 flex justify-between items-center px-5\">\n @if (data.title) {\n <div class=\"text-md font-medium\">{{ data.title }}</div>\n }\n <div class=\"cursor-pointer\" (click)=\"close()\">\n <mat-icon fontIcon=\"close\"></mat-icon>\n </div>\n </div>\n <mat-divider></mat-divider>\n <div class=\"flex-1 overflow-hidden overflow-y-auto\">\n <div class=\"p-3 flex justify-center items-center\">\n <img class=\"object-cover\" [src]=\"data.media[selected].url\" />\n </div>\n </div>\n <mat-divider></mat-divider>\n <div class=\"h-16 flex justify-between items-center px-5\">\n <button mat-flat-button [disabled]=\"prevDisabled\" (click)=\"prev()\">Prev</button>\n <div>{{ selected + 1 }} / {{ data.media.length }}</div>\n <button mat-flat-button [disabled]=\"nextDisabled\" (click)=\"next()\">Next</button>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] });
|
|
631
633
|
}
|
|
632
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
634
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MediaPreviewDialogComponent, decorators: [{
|
|
633
635
|
type: Component,
|
|
634
636
|
args: [{ selector: 'rolatech-media-preview-dialog', standalone: true, imports: [MatIconModule, MatDividerModule, MatButtonModule], template: "<div class=\"flex flex-col h-full overflow-hidden\">\n <div class=\"h-16 flex justify-between items-center px-5\">\n @if (data.title) {\n <div class=\"text-md font-medium\">{{ data.title }}</div>\n }\n <div class=\"cursor-pointer\" (click)=\"close()\">\n <mat-icon fontIcon=\"close\"></mat-icon>\n </div>\n </div>\n <mat-divider></mat-divider>\n <div class=\"flex-1 overflow-hidden overflow-y-auto\">\n <div class=\"p-3 flex justify-center items-center\">\n <img class=\"object-cover\" [src]=\"data.media[selected].url\" />\n </div>\n </div>\n <mat-divider></mat-divider>\n <div class=\"h-16 flex justify-between items-center px-5\">\n <button mat-flat-button [disabled]=\"prevDisabled\" (click)=\"prev()\">Prev</button>\n <div>{{ selected + 1 }} / {{ data.media.length }}</div>\n <button mat-flat-button [disabled]=\"nextDisabled\" (click)=\"next()\">Next</button>\n </div>\n</div>\n" }]
|
|
635
637
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -685,8 +687,8 @@ const MAT_MODULE = [
|
|
|
685
687
|
ScrollingModule,
|
|
686
688
|
];
|
|
687
689
|
class MaterialModule {
|
|
688
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
689
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.
|
|
690
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
691
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: MaterialModule, imports: [A11yModule,
|
|
690
692
|
ClipboardModule,
|
|
691
693
|
CdkStepperModule,
|
|
692
694
|
CdkTableModule,
|
|
@@ -775,7 +777,7 @@ class MaterialModule {
|
|
|
775
777
|
MatTreeModule,
|
|
776
778
|
PortalModule,
|
|
777
779
|
ScrollingModule] });
|
|
778
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.
|
|
780
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MaterialModule, imports: [MAT_MODULE, A11yModule,
|
|
779
781
|
ClipboardModule,
|
|
780
782
|
CdkStepperModule,
|
|
781
783
|
CdkTableModule,
|
|
@@ -821,7 +823,7 @@ class MaterialModule {
|
|
|
821
823
|
PortalModule,
|
|
822
824
|
ScrollingModule] });
|
|
823
825
|
}
|
|
824
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
826
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MaterialModule, decorators: [{
|
|
825
827
|
type: NgModule,
|
|
826
828
|
args: [{
|
|
827
829
|
imports: [...MAT_MODULE],
|
|
@@ -830,11 +832,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
|
|
|
830
832
|
}] });
|
|
831
833
|
|
|
832
834
|
class AngularComponentsModule {
|
|
833
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
834
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.
|
|
835
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.
|
|
835
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
836
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: AngularComponentsModule, imports: [MaterialModule], exports: [MaterialModule] });
|
|
837
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AngularComponentsModule, imports: [MaterialModule, MaterialModule] });
|
|
836
838
|
}
|
|
837
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
839
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AngularComponentsModule, decorators: [{
|
|
838
840
|
type: NgModule,
|
|
839
841
|
args: [{
|
|
840
842
|
imports: [MaterialModule],
|
|
@@ -861,10 +863,10 @@ class SpinnerComponent {
|
|
|
861
863
|
if (this.loadingSubscription)
|
|
862
864
|
this.loadingSubscription.unsubscribe();
|
|
863
865
|
}
|
|
864
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
865
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.
|
|
866
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
867
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.3", type: SpinnerComponent, isStandalone: true, selector: "rolatech-spinner", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex justify-center\">\n <div class=\"lds-spinner\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n</div>\n", styles: [".lds-spinner{color:official;display:inline-block;position:relative;width:40px;height:40px}.lds-spinner div{transform-origin:20px 20px;animation:lds-spinner 1.2s linear infinite}.lds-spinner div:after{content:\" \";display:block;position:absolute;top:4px;left:18px;width:4px;height:8px;border-radius:20%;background:#333}.lds-spinner div:nth-child(1){transform:rotate(0);animation-delay:-1.1s}.lds-spinner div:nth-child(2){transform:rotate(30deg);animation-delay:-1s}.lds-spinner div:nth-child(3){transform:rotate(60deg);animation-delay:-.9s}.lds-spinner div:nth-child(4){transform:rotate(90deg);animation-delay:-.8s}.lds-spinner div:nth-child(5){transform:rotate(120deg);animation-delay:-.7s}.lds-spinner div:nth-child(6){transform:rotate(150deg);animation-delay:-.6s}.lds-spinner div:nth-child(7){transform:rotate(180deg);animation-delay:-.5s}.lds-spinner div:nth-child(8){transform:rotate(210deg);animation-delay:-.4s}.lds-spinner div:nth-child(9){transform:rotate(240deg);animation-delay:-.3s}.lds-spinner div:nth-child(10){transform:rotate(270deg);animation-delay:-.2s}.lds-spinner div:nth-child(11){transform:rotate(300deg);animation-delay:-.1s}.lds-spinner div:nth-child(12){transform:rotate(330deg);animation-delay:0s}@keyframes lds-spinner{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
866
868
|
}
|
|
867
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
869
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
868
870
|
type: Component,
|
|
869
871
|
args: [{ selector: 'rolatech-spinner', standalone: true, imports: [CommonModule], template: "<div class=\"flex justify-center\">\n <div class=\"lds-spinner\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n</div>\n", styles: [".lds-spinner{color:official;display:inline-block;position:relative;width:40px;height:40px}.lds-spinner div{transform-origin:20px 20px;animation:lds-spinner 1.2s linear infinite}.lds-spinner div:after{content:\" \";display:block;position:absolute;top:4px;left:18px;width:4px;height:8px;border-radius:20%;background:#333}.lds-spinner div:nth-child(1){transform:rotate(0);animation-delay:-1.1s}.lds-spinner div:nth-child(2){transform:rotate(30deg);animation-delay:-1s}.lds-spinner div:nth-child(3){transform:rotate(60deg);animation-delay:-.9s}.lds-spinner div:nth-child(4){transform:rotate(90deg);animation-delay:-.8s}.lds-spinner div:nth-child(5){transform:rotate(120deg);animation-delay:-.7s}.lds-spinner div:nth-child(6){transform:rotate(150deg);animation-delay:-.6s}.lds-spinner div:nth-child(7){transform:rotate(180deg);animation-delay:-.5s}.lds-spinner div:nth-child(8){transform:rotate(210deg);animation-delay:-.4s}.lds-spinner div:nth-child(9){transform:rotate(240deg);animation-delay:-.3s}.lds-spinner div:nth-child(10){transform:rotate(270deg);animation-delay:-.2s}.lds-spinner div:nth-child(11){transform:rotate(300deg);animation-delay:-.1s}.lds-spinner div:nth-child(12){transform:rotate(330deg);animation-delay:0s}@keyframes lds-spinner{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
870
872
|
}] });
|
|
@@ -911,10 +913,10 @@ class MediaUploadComponent {
|
|
|
911
913
|
};
|
|
912
914
|
}
|
|
913
915
|
}
|
|
914
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
915
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.
|
|
916
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MediaUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
917
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: MediaUploadComponent, isStandalone: true, selector: "rolatech-media-upload", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaItemClick: "mediaItemClick", upload: "upload" }, ngImport: i0, template: "<div class=\"bg-gray-100 rounded p-6 min-h-[320px] flex items-center justify-center\">\n @if (isUploading()) {\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"p-3\">\n <mat-icon>upload</mat-icon>\n </div>\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"font-lg font-bold py-3\">{{ title() }}</div>\n <div class=\"font-sm text-gray-400\">{{ subtitle() }}</div>\n <div class=\"font-sm text-gray-400\">{{ description() }}</div>\n </div>\n <div class=\"py-2\">\n <input style=\"display: none\" type=\"file\" (change)=\"onUpload($event)\" #fileInput />\n <button mat-flat-button color=\"primary\" (click)=\"fileInput.click()\">\u4E0A\u4F20\u56FE\u7247</button>\n </div>\n </div>\n } @else {\n <rolatech-spinner title=\"\u4E0A\u4F20\u4E2D\"></rolatech-spinner>\n }\n</div>\n<div class=\"flex flex-row\">\n @for (media of media; track $index) {\n <div (click)=\"onMediaClick($index)\" class=\"inline-flex flex-row mt-3 mr-3 cursor-pointer rounded-md\">\n <img class=\"rounded-md aspect-video object-cover w-32\" [src]=\"media.url\" />\n </div>\n }\n</div>\n", styles: [".mat-icon{transform:scale(2)}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }] });
|
|
916
918
|
}
|
|
917
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
919
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MediaUploadComponent, decorators: [{
|
|
918
920
|
type: Component,
|
|
919
921
|
args: [{ standalone: true, imports: [AngularCommonModule, AngularComponentsModule, SpinnerComponent], selector: 'rolatech-media-upload', template: "<div class=\"bg-gray-100 rounded p-6 min-h-[320px] flex items-center justify-center\">\n @if (isUploading()) {\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"p-3\">\n <mat-icon>upload</mat-icon>\n </div>\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"font-lg font-bold py-3\">{{ title() }}</div>\n <div class=\"font-sm text-gray-400\">{{ subtitle() }}</div>\n <div class=\"font-sm text-gray-400\">{{ description() }}</div>\n </div>\n <div class=\"py-2\">\n <input style=\"display: none\" type=\"file\" (change)=\"onUpload($event)\" #fileInput />\n <button mat-flat-button color=\"primary\" (click)=\"fileInput.click()\">\u4E0A\u4F20\u56FE\u7247</button>\n </div>\n </div>\n } @else {\n <rolatech-spinner title=\"\u4E0A\u4F20\u4E2D\"></rolatech-spinner>\n }\n</div>\n<div class=\"flex flex-row\">\n @for (media of media; track $index) {\n <div (click)=\"onMediaClick($index)\" class=\"inline-flex flex-row mt-3 mr-3 cursor-pointer rounded-md\">\n <img class=\"rounded-md aspect-video object-cover w-32\" [src]=\"media.url\" />\n </div>\n }\n</div>\n", styles: [".mat-icon{transform:scale(2)}\n"] }]
|
|
920
922
|
}] });
|
|
@@ -926,10 +928,10 @@ class StorageBucketCreateComponent {
|
|
|
926
928
|
ngDoCheck() {
|
|
927
929
|
this.output.emit(this.name());
|
|
928
930
|
}
|
|
929
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
930
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.
|
|
931
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: StorageBucketCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
932
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.3", type: StorageBucketCreateComponent, isStandalone: true, selector: "rolatech-storage-bucket-create", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output" }, ngImport: i0, template: "<div>\n <mat-form-field>\n <mat-label>\u540D\u79F0</mat-label>\n <input matInput placeholder=\"\u8F93\u5165\u540D\u79F0\" [(ngModel)]=\"name\" />\n </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
931
933
|
}
|
|
932
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
934
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: StorageBucketCreateComponent, decorators: [{
|
|
933
935
|
type: Component,
|
|
934
936
|
args: [{ selector: 'rolatech-storage-bucket-create', standalone: true, imports: [MatFormFieldModule, MatInputModule, FormsModule], template: "<div>\n <mat-form-field>\n <mat-label>\u540D\u79F0</mat-label>\n <input matInput placeholder=\"\u8F93\u5165\u540D\u79F0\" [(ngModel)]=\"name\" />\n </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
|
|
935
937
|
}] });
|
|
@@ -957,10 +959,10 @@ class StorageFileUploadComponent {
|
|
|
957
959
|
removeFile() {
|
|
958
960
|
this.file = null;
|
|
959
961
|
}
|
|
960
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
961
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.
|
|
962
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: StorageFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
963
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: StorageFileUploadComponent, isStandalone: true, selector: "rolatech-storage-file-upload", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output" }, ngImport: i0, template: "<div>\n <mat-form-field>\n <mat-label>\u6807\u9898</mat-label>\n <input matInput placeholder=\"\u8F93\u5165\u6807\u9898\" [(ngModel)]=\"title\" />\n </mat-form-field>\n\n <div class=\"mt-2\">\n <input #fileInput class=\"hidden\" type=\"file\" (change)=\"selectFiles($event)\" />\n <button mat-raised-button (click)=\"fileInput.click()\">\u9009\u62E9\u6587\u4EF6</button>\n </div>\n @if (file) {\n <div class=\"p-2 flex justify-between items-center\">\n <div>{{ file.name }}</div>\n <button matSuffix mat-icon-button (click)=\"removeFile()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n }\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
962
964
|
}
|
|
963
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
965
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: StorageFileUploadComponent, decorators: [{
|
|
964
966
|
type: Component,
|
|
965
967
|
args: [{ selector: 'rolatech-storage-file-upload', standalone: true, imports: [MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatIconModule], template: "<div>\n <mat-form-field>\n <mat-label>\u6807\u9898</mat-label>\n <input matInput placeholder=\"\u8F93\u5165\u6807\u9898\" [(ngModel)]=\"title\" />\n </mat-form-field>\n\n <div class=\"mt-2\">\n <input #fileInput class=\"hidden\" type=\"file\" (change)=\"selectFiles($event)\" />\n <button mat-raised-button (click)=\"fileInput.click()\">\u9009\u62E9\u6587\u4EF6</button>\n </div>\n @if (file) {\n <div class=\"p-2 flex justify-between items-center\">\n <div>{{ file.name }}</div>\n <button matSuffix mat-icon-button (click)=\"removeFile()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n }\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
|
|
966
968
|
}] });
|
|
@@ -973,10 +975,10 @@ class StorageFolderCreateComponent {
|
|
|
973
975
|
ngDoCheck() {
|
|
974
976
|
this.output.emit({ name: this.name(), isPublic: this.isPublic() });
|
|
975
977
|
}
|
|
976
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
977
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.
|
|
978
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: StorageFolderCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
979
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.3", type: StorageFolderCreateComponent, isStandalone: true, selector: "rolatech-storage-folder-create", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, isPublic: { classPropertyName: "isPublic", publicName: "isPublic", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output" }, ngImport: i0, template: "<div>\n <mat-form-field>\n <mat-label>\u540D\u79F0</mat-label>\n <input matInput placeholder=\"\u8F93\u5165\u540D\u79F0\" [(ngModel)]=\"name\" />\n </mat-form-field>\n <div class=\"flex flex-col\">\n <mat-checkbox class=\"example-margin\" [(ngModel)]=\"isPublic\">\u516C\u5F00\u8D44\u6E90</mat-checkbox>\n <span class=\"text-sm text-gray-500 ml-2 mt-1\">\u6587\u4EF6\u5939\u4E3A\u56FE\u7247\u5185\u5BB9\u65F6, \u8BF7\u53D6\u6D88\u52FE\u9009\u6B64\u9879</span>\n </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
|
|
978
980
|
}
|
|
979
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
981
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: StorageFolderCreateComponent, decorators: [{
|
|
980
982
|
type: Component,
|
|
981
983
|
args: [{ selector: 'rolatech-storage-folder-create', standalone: true, imports: [MatFormFieldModule, MatInputModule, FormsModule, MatCheckboxModule], template: "<div>\n <mat-form-field>\n <mat-label>\u540D\u79F0</mat-label>\n <input matInput placeholder=\"\u8F93\u5165\u540D\u79F0\" [(ngModel)]=\"name\" />\n </mat-form-field>\n <div class=\"flex flex-col\">\n <mat-checkbox class=\"example-margin\" [(ngModel)]=\"isPublic\">\u516C\u5F00\u8D44\u6E90</mat-checkbox>\n <span class=\"text-sm text-gray-500 ml-2 mt-1\">\u6587\u4EF6\u5939\u4E3A\u56FE\u7247\u5185\u5BB9\u65F6, \u8BF7\u53D6\u6D88\u52FE\u9009\u6B64\u9879</span>\n </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
|
|
982
984
|
}] });
|
|
@@ -1002,10 +1004,10 @@ class WechatConnectDialogComponent {
|
|
|
1002
1004
|
this.dialogRef.close();
|
|
1003
1005
|
}
|
|
1004
1006
|
}
|
|
1005
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
1006
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
1007
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WechatConnectDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1008
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: WechatConnectDialogComponent, isStandalone: true, selector: "rolatech-wechat-connect-dialog", host: { listeners: { "window:message": "onLogin($event)" } }, ngImport: i0, template: "<div class=\"flex flex-col p-3\">\n <div class=\"text-xl font-bold\">\u626B\u7801\u7ED1\u5B9A\u5FAE\u4FE1\uFF0C\u63D0\u5347\u8D26\u53F7\u5B89\u5168\u548C\u4F7F\u7528\u4FBF\u5229\u6027</div>\n <div class=\"w-[190px] h-[190px]\">\n <iframe [src]=\"urlSafe\" class=\"w-full h-full inline\" scrolling=\"no\" frameBorder=\"no\"></iframe>\n <div></div>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0}.normalPanel .panelContent{width:188px;height:188px}.normalPanel .wrp_code{position:relative;width:188px;height:188px;margin:0}.impowerBox .title,.normalPanel .info{display:none}.impowerBox .qrcode{margin-top:0;border:0;width:188px;height:188px}#MAXIM{content:\"veg20170418191511\"}mat-mdc-dialog-content mdc-dialog__content{padding:0}\n"] });
|
|
1007
1009
|
}
|
|
1008
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
1010
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WechatConnectDialogComponent, decorators: [{
|
|
1009
1011
|
type: Component,
|
|
1010
1012
|
args: [{ selector: 'rolatech-wechat-connect-dialog', standalone: true, template: "<div class=\"flex flex-col p-3\">\n <div class=\"text-xl font-bold\">\u626B\u7801\u7ED1\u5B9A\u5FAE\u4FE1\uFF0C\u63D0\u5347\u8D26\u53F7\u5B89\u5168\u548C\u4F7F\u7528\u4FBF\u5229\u6027</div>\n <div class=\"w-[190px] h-[190px]\">\n <iframe [src]=\"urlSafe\" class=\"w-full h-full inline\" scrolling=\"no\" frameBorder=\"no\"></iframe>\n <div></div>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0}.normalPanel .panelContent{width:188px;height:188px}.normalPanel .wrp_code{position:relative;width:188px;height:188px;margin:0}.impowerBox .title,.normalPanel .info{display:none}.impowerBox .qrcode{margin-top:0;border:0;width:188px;height:188px}#MAXIM{content:\"veg20170418191511\"}mat-mdc-dialog-content mdc-dialog__content{padding:0}\n"] }]
|
|
1011
1013
|
}], ctorParameters: () => [], propDecorators: { onLogin: [{
|
|
@@ -1082,10 +1084,10 @@ class MediaUploadDialogComponent {
|
|
|
1082
1084
|
},
|
|
1083
1085
|
});
|
|
1084
1086
|
}
|
|
1085
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
1086
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.
|
|
1087
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MediaUploadDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$3.MediaService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1088
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: MediaUploadDialogComponent, isStandalone: true, selector: "rolatech-media-upload-dialog", ngImport: i0, template: "<mat-dialog-content>\n <div class=\"border-dashed border-2 border-gray-400 py-12 flex flex-col justify-center items-center\">\n <input #fileInput multiple class=\"hidden\" type=\"file\" (change)=\"selectFiles($event)\" />\n <button mat-button (click)=\"fileInput.click()\">\u4E0A\u4F20\u56FE\u7247</button>\n </div>\n <div class=\"mt-4\">\n <h2 class=\"\">\u9884\u89C8</h2>\n <div>\n <ul id=\"gallery\" class=\"flex flex-1 flex-wrap -m-1\">\n @for (item of preMedia; track item.url; let i = $index) {\n <li class=\"block p-1 w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 xl:w-1/8 h-24\">\n <article\n tabindex=\"0\"\n [ngClass]=\"item.isUploading ? 'isUploading' : ''\"\n class=\"group hasImage w-full h-full rounded-md focus:outline-none focus:shadow-outline bg-gray-100 cursor-pointer relative text-transparent hover:text-white shadow-sm\"\n >\n <img [src]=\"item.url\" class=\"img-preview w-full h-full sticky object-cover rounded-md bg-fixed\" />\n <section class=\"flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3\">\n @if (item.isUploading) {\n <div class=\"flex justify-center items-center w-full h-full\">\n <mat-spinner color=\"white\" diameter=\"28\"></mat-spinner>\n </div>\n } @else {\n <div class=\"flex\">\n <button (click)=\"removeImage(i)\" class=\"delete ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md\">\n <svg\n class=\"pointer-events-none fill-current w-4 h-4 ml-auto\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <path\n class=\"pointer-events-none\"\n d=\"M3 6l3 18h12l3-18h-18zm19-4v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711z\"\n />\n </svg>\n </button>\n </div>\n }\n </section>\n </article>\n </li>\n }\n </ul>\n </div>\n @if (preMedia.length <= 0) {\n <div class=\"flex flex-1 flex-wrap\">\n <div class=\"h-full w-full text-center flex flex-col justify-center items-center py-6\">\n <span class=\"text-small text-gray-500\">No files selected</span>\n </div>\n </div>\n }\n </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n <button mat-button mat-dialog-close>\u53D6\u6D88</button>\n @if (preMedia.length <= 0) {\n <button mat-button>\u7B49\u5F85\u9009\u62E9</button>\n }\n @if (!isFinished && preMedia.length > 0) {\n <button mat-button (click)=\"uploadFiles()\">\u7ACB\u523B\u4E0A\u4F20</button>\n }\n @if (isFinished) {\n <button mat-button [mat-dialog-close]=\"media\">\u5B8C\u6210</button>\n }\n</mat-dialog-actions>\n", styles: [".hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}.isUploading section{background-color:#05050566}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
|
|
1087
1089
|
}
|
|
1088
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
1090
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MediaUploadDialogComponent, decorators: [{
|
|
1089
1091
|
type: Component,
|
|
1090
1092
|
args: [{ selector: 'rolatech-media-upload-dialog', standalone: true, imports: [MatDialogContent, MatButtonModule, NgClass, MatProgressSpinnerModule, MatDialogActions, MatDialogClose], template: "<mat-dialog-content>\n <div class=\"border-dashed border-2 border-gray-400 py-12 flex flex-col justify-center items-center\">\n <input #fileInput multiple class=\"hidden\" type=\"file\" (change)=\"selectFiles($event)\" />\n <button mat-button (click)=\"fileInput.click()\">\u4E0A\u4F20\u56FE\u7247</button>\n </div>\n <div class=\"mt-4\">\n <h2 class=\"\">\u9884\u89C8</h2>\n <div>\n <ul id=\"gallery\" class=\"flex flex-1 flex-wrap -m-1\">\n @for (item of preMedia; track item.url; let i = $index) {\n <li class=\"block p-1 w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 xl:w-1/8 h-24\">\n <article\n tabindex=\"0\"\n [ngClass]=\"item.isUploading ? 'isUploading' : ''\"\n class=\"group hasImage w-full h-full rounded-md focus:outline-none focus:shadow-outline bg-gray-100 cursor-pointer relative text-transparent hover:text-white shadow-sm\"\n >\n <img [src]=\"item.url\" class=\"img-preview w-full h-full sticky object-cover rounded-md bg-fixed\" />\n <section class=\"flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3\">\n @if (item.isUploading) {\n <div class=\"flex justify-center items-center w-full h-full\">\n <mat-spinner color=\"white\" diameter=\"28\"></mat-spinner>\n </div>\n } @else {\n <div class=\"flex\">\n <button (click)=\"removeImage(i)\" class=\"delete ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md\">\n <svg\n class=\"pointer-events-none fill-current w-4 h-4 ml-auto\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <path\n class=\"pointer-events-none\"\n d=\"M3 6l3 18h12l3-18h-18zm19-4v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711z\"\n />\n </svg>\n </button>\n </div>\n }\n </section>\n </article>\n </li>\n }\n </ul>\n </div>\n @if (preMedia.length <= 0) {\n <div class=\"flex flex-1 flex-wrap\">\n <div class=\"h-full w-full text-center flex flex-col justify-center items-center py-6\">\n <span class=\"text-small text-gray-500\">No files selected</span>\n </div>\n </div>\n }\n </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n <button mat-button mat-dialog-close>\u53D6\u6D88</button>\n @if (preMedia.length <= 0) {\n <button mat-button>\u7B49\u5F85\u9009\u62E9</button>\n }\n @if (!isFinished && preMedia.length > 0) {\n <button mat-button (click)=\"uploadFiles()\">\u7ACB\u523B\u4E0A\u4F20</button>\n }\n @if (isFinished) {\n <button mat-button [mat-dialog-close]=\"media\">\u5B8C\u6210</button>\n }\n</mat-dialog-actions>\n", styles: [".hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}.isUploading section{background-color:#05050566}\n"] }]
|
|
1091
1093
|
}], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
@@ -1096,10 +1098,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
|
|
|
1096
1098
|
class SpacerComponent {
|
|
1097
1099
|
constructor() { }
|
|
1098
1100
|
ngOnInit() { }
|
|
1099
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
1100
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
1101
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1102
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: SpacerComponent, isStandalone: true, selector: "rolatech-spacer", ngImport: i0, template: "<span class=\"app-spacer\"></span>\n", styles: [":host{flex:1 1 auto}.app-spacer{flex:1 1 auto}\n"] });
|
|
1101
1103
|
}
|
|
1102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
1104
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SpacerComponent, decorators: [{
|
|
1103
1105
|
type: Component,
|
|
1104
1106
|
args: [{ selector: 'rolatech-spacer', standalone: true, template: "<span class=\"app-spacer\"></span>\n", styles: [":host{flex:1 1 auto}.app-spacer{flex:1 1 auto}\n"] }]
|
|
1105
1107
|
}], ctorParameters: () => [] });
|
|
@@ -1116,10 +1118,10 @@ class MediaListComponent {
|
|
|
1116
1118
|
onUpload(event) {
|
|
1117
1119
|
this.upload.emit(event);
|
|
1118
1120
|
}
|
|
1119
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
1120
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.
|
|
1121
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MediaListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1122
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: MediaListComponent, isStandalone: true, selector: "rolatech-media-list", inputs: { isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null }, media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, showAdd: { classPropertyName: "showAdd", publicName: "showAdd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaItemClick: "mediaItemClick", upload: "upload" }, ngImport: i0, template: "<div class=\"flex flex-row flex-wrap box-border items-center\">\n <div class=\"progress-bar\">\n @if (isUploading()) {\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n }\n </div>\n <div class=\"flex flex-row flex-wrap box-border items-center gap-2\">\n <ng-content></ng-content>\n <div>\n <input style=\"display: none\" type=\"file\" accept=\"image/*, video/*\" (change)=\"onUpload($event)\" #fileInput />\n @if (showAdd()) {\n <div class=\"add-button\">\n <img (click)=\"fileInput.click()\" class=\"tile-media\" src=\"assets/images/baseline_add_black_48dp.png\" alt=\"add image\" />\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".progress-bar{display:block;min-height:6px;width:100%;padding:4px 0}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:80px;width:80px;object-fit:contain;cursor:pointer;padding:6px;position:relative;box-sizing:border-box}app-media-list-item:before{border-radius:12px}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
|
|
1121
1123
|
}
|
|
1122
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
1124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MediaListComponent, decorators: [{
|
|
1123
1125
|
type: Component,
|
|
1124
1126
|
args: [{ selector: 'rolatech-media-list', standalone: true, imports: [MatProgressBarModule], template: "<div class=\"flex flex-row flex-wrap box-border items-center\">\n <div class=\"progress-bar\">\n @if (isUploading()) {\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n }\n </div>\n <div class=\"flex flex-row flex-wrap box-border items-center gap-2\">\n <ng-content></ng-content>\n <div>\n <input style=\"display: none\" type=\"file\" accept=\"image/*, video/*\" (change)=\"onUpload($event)\" #fileInput />\n @if (showAdd()) {\n <div class=\"add-button\">\n <img (click)=\"fileInput.click()\" class=\"tile-media\" src=\"assets/images/baseline_add_black_48dp.png\" alt=\"add image\" />\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".progress-bar{display:block;min-height:6px;width:100%;padding:4px 0}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:80px;width:80px;object-fit:contain;cursor:pointer;padding:6px;position:relative;box-sizing:border-box}app-media-list-item:before{border-radius:12px}\n"] }]
|
|
1125
1127
|
}] });
|
|
@@ -1135,10 +1137,10 @@ class MediaListItemComponent {
|
|
|
1135
1137
|
onDeleteMedia(media) {
|
|
1136
1138
|
this.deleteMedia.emit(media);
|
|
1137
1139
|
}
|
|
1138
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
1139
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.
|
|
1140
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MediaListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1141
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.3", type: MediaListItemComponent, isStandalone: true, selector: "rolatech-media-list-item", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: true, transformFunction: null }, uploadProgress: { classPropertyName: "uploadProgress", publicName: "uploadProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaItemClick: "mediaItemClick", deleteMedia: "deleteMedia" }, ngImport: i0, template: "<div\n class=\"media-list-item relative hasImage focus:outline-none focus:shadow-outline bg-gray-100 cursor-pointer text-transparent hover:text-white shadow-sm\"\n>\n <div class=\"absolute z-30 right-0\">\n <div class=\"flex-1\"></div>\n <div>\n <button mat-icon-button [matMenuTriggerFor]=\"beforeMenu\" class=\"ml-auto focus:outline-none hover:bg-gray-300 p-1\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item (click)=\"onDeleteMedia(media())\">\n <span>\u5220\u9664</span>\n </button>\n </mat-menu>\n </div>\n </div>\n <div id=\"thumbnail\" class=\"thumbnail\">\n <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media().url\" [alt]=\"media().alt\" />\n </div>\n <section\n (click)=\"onMediaItemClick(media())\"\n class=\"flex flex-col text-xs break-words w-full h-full z-20 absolute top-0\"\n ></section>\n</div>\n", styles: [".media-list-item{cursor:pointer;box-sizing:border-box;height:128px;width:228px;display:inline-block;display:block;position:relative;flex:none}.tile-media{height:100%;width:100%;object-fit:cover;display:inline-block;background-color:transparent}#thumbnail.thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block;position:absolute;border-radius:8px;inset:0}.hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
1140
1142
|
}
|
|
1141
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
1143
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MediaListItemComponent, decorators: [{
|
|
1142
1144
|
type: Component,
|
|
1143
1145
|
args: [{ selector: 'rolatech-media-list-item', standalone: true, imports: [MatButtonModule, MatMenuModule, MatIconModule], template: "<div\n class=\"media-list-item relative hasImage focus:outline-none focus:shadow-outline bg-gray-100 cursor-pointer text-transparent hover:text-white shadow-sm\"\n>\n <div class=\"absolute z-30 right-0\">\n <div class=\"flex-1\"></div>\n <div>\n <button mat-icon-button [matMenuTriggerFor]=\"beforeMenu\" class=\"ml-auto focus:outline-none hover:bg-gray-300 p-1\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item (click)=\"onDeleteMedia(media())\">\n <span>\u5220\u9664</span>\n </button>\n </mat-menu>\n </div>\n </div>\n <div id=\"thumbnail\" class=\"thumbnail\">\n <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media().url\" [alt]=\"media().alt\" />\n </div>\n <section\n (click)=\"onMediaItemClick(media())\"\n class=\"flex flex-col text-xs break-words w-full h-full z-20 absolute top-0\"\n ></section>\n</div>\n", styles: [".media-list-item{cursor:pointer;box-sizing:border-box;height:128px;width:228px;display:inline-block;display:block;position:relative;flex:none}.tile-media{height:100%;width:100%;object-fit:cover;display:inline-block;background-color:transparent}#thumbnail.thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block;position:absolute;border-radius:8px;inset:0}.hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}\n"] }]
|
|
1144
1146
|
}] });
|
|
@@ -1161,10 +1163,10 @@ class NotFoundComponent {
|
|
|
1161
1163
|
}
|
|
1162
1164
|
});
|
|
1163
1165
|
}
|
|
1164
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
1165
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
1166
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NotFoundComponent, deps: [{ token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
1167
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: NotFoundComponent, isStandalone: true, selector: "rolatech-not-found", ngImport: i0, template: "<div class=\"not-found-content\">\n <p>\n <b>404.</b>\n <ins>That\u2019s an error.</ins>\n </p>\n <p>\n The requested URL <code>{{ url }}</code> not found on this server.\n </p>\n <a href=\"/\">return home</a>\n</div>\n", styles: [":host{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}.not-found-content{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}\n"] });
|
|
1166
1168
|
}
|
|
1167
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
1169
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NotFoundComponent, decorators: [{
|
|
1168
1170
|
type: Component,
|
|
1169
1171
|
args: [{ selector: 'rolatech-not-found', standalone: true, template: "<div class=\"not-found-content\">\n <p>\n <b>404.</b>\n <ins>That\u2019s an error.</ins>\n </p>\n <p>\n The requested URL <code>{{ url }}</code> not found on this server.\n </p>\n <a href=\"/\">return home</a>\n</div>\n", styles: [":host{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}.not-found-content{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}\n"] }]
|
|
1170
1172
|
}], ctorParameters: () => [{ type: i1$4.Router }] });
|
|
@@ -1175,10 +1177,10 @@ class ConfirmationDialogComponent {
|
|
|
1175
1177
|
onNoClick() {
|
|
1176
1178
|
this.dialogRef.close();
|
|
1177
1179
|
}
|
|
1178
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
1179
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.
|
|
1180
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1181
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: ConfirmationDialogComponent, isStandalone: true, selector: "rolatech-confirmation-dialog", ngImport: i0, template: "@if (data.title) {\n <h2 mat-dialog-title>{{ data.title }}</h2>\n}\n<div mat-dialog-content>\n {{ data.message }}\n</div>\n<div mat-dialog-actions align=\"end\">\n <button mat-button mat-dialog-close>\u53D6\u6D88</button>\n <button mat-button [mat-dialog-close]=\"true\" cdkFocusInitial>\u786E\u5B9A</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
|
|
1180
1182
|
}
|
|
1181
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
1183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
1182
1184
|
type: Component,
|
|
1183
1185
|
args: [{ selector: 'rolatech-confirmation-dialog', standalone: true, imports: [MatDialogTitle, MatDialogContent, MatDialogActions, MatButtonModule, MatDialogClose], template: "@if (data.title) {\n <h2 mat-dialog-title>{{ data.title }}</h2>\n}\n<div mat-dialog-content>\n {{ data.message }}\n</div>\n<div mat-dialog-actions align=\"end\">\n <button mat-button mat-dialog-close>\u53D6\u6D88</button>\n <button mat-button [mat-dialog-close]=\"true\" cdkFocusInitial>\u786E\u5B9A</button>\n</div>\n" }]
|
|
1184
1186
|
}] });
|
|
@@ -1215,10 +1217,10 @@ class TableComponent {
|
|
|
1215
1217
|
this.displayedColumns = map$1(this.dataSource().columns, 'ref');
|
|
1216
1218
|
// console.log(this.displayedColumns);
|
|
1217
1219
|
}
|
|
1218
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
1219
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.
|
|
1220
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1221
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TableComponent, isStandalone: true, selector: "rolatech-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource().data\">\n @for (column of dataSource().columns; track $index) {\n <ng-container [matColumnDef]=\"column.ref\" sticky>\n <th mat-header-cell *matHeaderCellDef>{{ column.name }}</th>\n <td mat-cell *matCellDef=\"let item\">{{ item[column.ref] }}</td>\n </ng-container>\n }\n <!-- <ng-container matColumnDef=\"actions\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef class=\"actions\">\u8BE6\u60C5</th>\n <td mat-cell *matCellDef=\"let item\" class=\"actions\">\n <a [routerLink]=\"['../', item.id]\"> \u8BE6\u60C5 </a>\n </td>\n </ng-container> -->\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n</table>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: RouterModule }] });
|
|
1220
1222
|
}
|
|
1221
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
1223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TableComponent, decorators: [{
|
|
1222
1224
|
type: Component,
|
|
1223
1225
|
args: [{ selector: 'rolatech-table', standalone: true, imports: [CommonModule, MatTableModule, RouterModule], template: "<table mat-table [dataSource]=\"dataSource().data\">\n @for (column of dataSource().columns; track $index) {\n <ng-container [matColumnDef]=\"column.ref\" sticky>\n <th mat-header-cell *matHeaderCellDef>{{ column.name }}</th>\n <td mat-cell *matCellDef=\"let item\">{{ item[column.ref] }}</td>\n </ng-container>\n }\n <!-- <ng-container matColumnDef=\"actions\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef class=\"actions\">\u8BE6\u60C5</th>\n <td mat-cell *matCellDef=\"let item\" class=\"actions\">\n <a [routerLink]=\"['../', item.id]\"> \u8BE6\u60C5 </a>\n </td>\n </ng-container> -->\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n</table>\n" }]
|
|
1224
1226
|
}] });
|
|
@@ -1232,19 +1234,19 @@ class PaginatorComponent {
|
|
|
1232
1234
|
onPage(event) {
|
|
1233
1235
|
this.page.emit(event);
|
|
1234
1236
|
}
|
|
1235
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
1236
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
1237
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1238
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: PaginatorComponent, isStandalone: true, selector: "rolatech-paginator", outputs: { page: "page" }, ngImport: i0, template: "<mat-paginator\n #paginator\n [length]=\"length\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"onPage($event)\"\n hidePageSize\n showFirstLastButtons\n>\n</mat-paginator>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
|
|
1237
1239
|
}
|
|
1238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
1240
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
1239
1241
|
type: Component,
|
|
1240
1242
|
args: [{ selector: 'rolatech-paginator', standalone: true, imports: [CommonModule, MatPaginatorModule], template: "<mat-paginator\n #paginator\n [length]=\"length\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"onPage($event)\"\n hidePageSize\n showFirstLastButtons\n>\n</mat-paginator>\n" }]
|
|
1241
1243
|
}] });
|
|
1242
1244
|
|
|
1243
1245
|
class MediaPreviewComponent {
|
|
1244
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
1245
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
1246
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MediaPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1247
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: MediaPreviewComponent, isStandalone: true, selector: "rolatech-media-preview", ngImport: i0, template: "<p>media-preview works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1246
1248
|
}
|
|
1247
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
1249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MediaPreviewComponent, decorators: [{
|
|
1248
1250
|
type: Component,
|
|
1249
1251
|
args: [{ selector: 'rolatech-media-preview', standalone: true, imports: [CommonModule], template: "<p>media-preview works!</p>\n" }]
|
|
1250
1252
|
}] });
|
|
@@ -1253,10 +1255,10 @@ class ToolbarComponent {
|
|
|
1253
1255
|
title = input();
|
|
1254
1256
|
subtitle = input();
|
|
1255
1257
|
back = input(false, { transform: booleanAttribute });
|
|
1256
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
1257
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.
|
|
1258
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1259
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: ToolbarComponent, isStandalone: true, selector: "rolatech-toolbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"px-4\">\n <div class=\"flex justify-between items-center h-14\">\n @if (back()) {\n <div class=\"-ml-2\">\n <rolatech-icon-button rolatechBackButton> arrow_back </rolatech-icon-button>\n </div>\n }\n @if (title()) {\n <span class=\"text-xl font-medium\">{{ title() }}</span>\n }\n <div class=\"flex-1\"></div>\n <div class=\"flex justify-center items-center\">\n <ng-content></ng-content>\n </div>\n </div>\n @if (subtitle()) {\n <div class=\"-mt-3\">\n <span class=\"text-sm text-gray-500\">{{ subtitle() }}</span>\n </div>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconButtonComponent, selector: "rolatech-icon-button" }, { kind: "directive", type: BackButtonDirective, selector: "[rolatechBackButton]" }] });
|
|
1258
1260
|
}
|
|
1259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
1261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
1260
1262
|
type: Component,
|
|
1261
1263
|
args: [{ selector: 'rolatech-toolbar', standalone: true, imports: [CommonModule, IconButtonComponent, BackButtonDirective], template: "<div class=\"px-4\">\n <div class=\"flex justify-between items-center h-14\">\n @if (back()) {\n <div class=\"-ml-2\">\n <rolatech-icon-button rolatechBackButton> arrow_back </rolatech-icon-button>\n </div>\n }\n @if (title()) {\n <span class=\"text-xl font-medium\">{{ title() }}</span>\n }\n <div class=\"flex-1\"></div>\n <div class=\"flex justify-center items-center\">\n <ng-content></ng-content>\n </div>\n </div>\n @if (subtitle()) {\n <div class=\"-mt-3\">\n <span class=\"text-sm text-gray-500\">{{ subtitle() }}</span>\n </div>\n }\n</div>\n" }]
|
|
1262
1264
|
}] });
|
|
@@ -1270,10 +1272,10 @@ class ImageComponent {
|
|
|
1270
1272
|
image.style.visibility = 'visible';
|
|
1271
1273
|
};
|
|
1272
1274
|
}
|
|
1273
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
1274
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.
|
|
1275
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1276
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.3", type: ImageComponent, isStandalone: true, selector: "rolatech-image", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "img", first: true, predicate: ["img"], descendants: true, isSignal: true }], ngImport: i0, template: "<img #img class=\"rolatech-image bg-gray-200\" [src]=\"src()\" style=\"visibility: hidden\" loading=\"lazy\" />\n", styles: [".rolatech-image{display:inline-block;min-height:1px;min-width:1px;width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1275
1277
|
}
|
|
1276
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
1278
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ImageComponent, decorators: [{
|
|
1277
1279
|
type: Component,
|
|
1278
1280
|
args: [{ selector: 'rolatech-image', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<img #img class=\"rolatech-image bg-gray-200\" [src]=\"src()\" style=\"visibility: hidden\" loading=\"lazy\" />\n", styles: [".rolatech-image{display:inline-block;min-height:1px;min-width:1px;width:100%;height:100%;object-fit:cover}\n"] }]
|
|
1279
1281
|
}] });
|
|
@@ -1287,10 +1289,10 @@ class ThumbnailComponent {
|
|
|
1287
1289
|
sizea = effect(() => {
|
|
1288
1290
|
this.renderer.setAttribute(this.el.nativeElement, 'size', this.size());
|
|
1289
1291
|
});
|
|
1290
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
1291
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.
|
|
1292
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1293
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.3", type: ThumbnailComponent, isStandalone: true, selector: "rolatech-thumbnail", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.rt-rich-grid-media": "this.hasClass" } }, ngImport: i0, template: "<a id=\"thumbnail\" class=\"rt-thumbnail\">\n <rolatech-image [src]=\"src()\"> </rolatech-image>\n</a>\n<!-- <a id=\"thumbnail\" class=\"rt-thumbnail\">\n @defer (on viewport) {\n <rolatech-image [src]=\"src()\"> </rolatech-image>\n } @placeholder {\n <div class=\"bg-gray-200 w-full h-full rounded-lg\"></div>\n }\n</a> -->\n", styles: ["rolatech-thumbnail{display:block;width:100%;position:relative}rolatech-thumbnail:before{display:block;content:\"\";width:100%;padding-top:56.25%;background-color:rgb(229 231 235/var(--tw-bg-opacity))}rolatech-thumbnail #thumbnail.rt-thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block}rolatech-thumbnail #thumbnail.rt-thumbnail{position:absolute;inset:0}rolatech-thumbnail a.rt-thumbnail,rolatech-thumbnail:before{border-radius:0}rolatech-thumbnail[size][circular] a.rt-thumbnail,rolatech-thumbnail[size][circular]:before{border-radius:50%}rolatech-thumbnail[size=small] a.rt-thumbnail,rolatech-thumbnail[size=small]:before{border-radius:4px}rolatech-thumbnail[size=medium] a.rt-thumbnail,rolatech-thumbnail[size=medium]:before{border-radius:8px}rolatech-thumbnail[size=large] a.rt-thumbnail,rolatech-thumbnail[size=large]:before{border-radius:12px}rolatech-thumbnail[size][has-clip] a.rt-thumbnail,rolatech-thumbnail[size][has-clip]:before{border-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ImageComponent, selector: "rolatech-image", inputs: ["src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1292
1294
|
}
|
|
1293
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
1295
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ThumbnailComponent, decorators: [{
|
|
1294
1296
|
type: Component,
|
|
1295
1297
|
args: [{ selector: 'rolatech-thumbnail', standalone: true, imports: [CommonModule, ImageComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<a id=\"thumbnail\" class=\"rt-thumbnail\">\n <rolatech-image [src]=\"src()\"> </rolatech-image>\n</a>\n<!-- <a id=\"thumbnail\" class=\"rt-thumbnail\">\n @defer (on viewport) {\n <rolatech-image [src]=\"src()\"> </rolatech-image>\n } @placeholder {\n <div class=\"bg-gray-200 w-full h-full rounded-lg\"></div>\n }\n</a> -->\n", styles: ["rolatech-thumbnail{display:block;width:100%;position:relative}rolatech-thumbnail:before{display:block;content:\"\";width:100%;padding-top:56.25%;background-color:rgb(229 231 235/var(--tw-bg-opacity))}rolatech-thumbnail #thumbnail.rt-thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block}rolatech-thumbnail #thumbnail.rt-thumbnail{position:absolute;inset:0}rolatech-thumbnail a.rt-thumbnail,rolatech-thumbnail:before{border-radius:0}rolatech-thumbnail[size][circular] a.rt-thumbnail,rolatech-thumbnail[size][circular]:before{border-radius:50%}rolatech-thumbnail[size=small] a.rt-thumbnail,rolatech-thumbnail[size=small]:before{border-radius:4px}rolatech-thumbnail[size=medium] a.rt-thumbnail,rolatech-thumbnail[size=medium]:before{border-radius:8px}rolatech-thumbnail[size=large] a.rt-thumbnail,rolatech-thumbnail[size=large]:before{border-radius:12px}rolatech-thumbnail[size][has-clip] a.rt-thumbnail,rolatech-thumbnail[size][has-clip]:before{border-radius:0}\n"] }]
|
|
1296
1298
|
}], propDecorators: { hasClass: [{
|
|
@@ -1303,12 +1305,12 @@ class TabComponent {
|
|
|
1303
1305
|
hasClass = true;
|
|
1304
1306
|
label = input.required();
|
|
1305
1307
|
item = viewChild('content');
|
|
1306
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
1307
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.
|
|
1308
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1309
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.3", type: TabComponent, isStandalone: true, selector: "rolatech-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.tab": "this.hasClass" } }, viewQueries: [{ propertyName: "item", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"content\" #content>\n {{ label() }}\n</div>\n", styles: ["rolatech-tab{display:inline-flex;align-items:center;-ms-flex-pack:center;justify-content:center;flex:1 1 auto;position:relative;padding:0 12px;overflow:hidden;cursor:pointer;vertical-align:middle;font-family:Roboto,Noto,sans-serif;-webkit-font-smoothing:antialiased}rolatech-tab:hover{background-color:#f3f4f6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1308
1310
|
}
|
|
1309
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
1311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TabComponent, decorators: [{
|
|
1310
1312
|
type: Component,
|
|
1311
|
-
args: [{ selector: 'rolatech-tab', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"content\" #content>\n {{ label() }}\n</div>\n", styles: ["rolatech-tab{
|
|
1313
|
+
args: [{ selector: 'rolatech-tab', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"content\" #content>\n {{ label() }}\n</div>\n", styles: ["rolatech-tab{display:inline-flex;align-items:center;-ms-flex-pack:center;justify-content:center;flex:1 1 auto;position:relative;padding:0 12px;overflow:hidden;cursor:pointer;vertical-align:middle;font-family:Roboto,Noto,sans-serif;-webkit-font-smoothing:antialiased}rolatech-tab:hover{background-color:#f3f4f6}\n"] }]
|
|
1312
1314
|
}], propDecorators: { hasId: [{
|
|
1313
1315
|
type: HostBinding,
|
|
1314
1316
|
args: ['id']
|
|
@@ -1327,6 +1329,7 @@ class TabsComponent {
|
|
|
1327
1329
|
clientWidths = [];
|
|
1328
1330
|
ngOnInit() { }
|
|
1329
1331
|
ngAfterViewInit() {
|
|
1332
|
+
const gap = 24; // 24 = 2 * margin-left
|
|
1330
1333
|
this.tabs()[this.select()].nativeElement.setAttribute('style-target', 'host');
|
|
1331
1334
|
const selectionBarElement = this.selectionBar()?.nativeElement;
|
|
1332
1335
|
selectionBarElement.setAttribute('style-target', 'selection-bar');
|
|
@@ -1337,12 +1340,12 @@ class TabsComponent {
|
|
|
1337
1340
|
this.tabs()[this.preSelect].nativeElement.removeAttribute('style-target');
|
|
1338
1341
|
this.tabs()[index].nativeElement.setAttribute('style-target', 'host');
|
|
1339
1342
|
selectionBarElement.style.left = this.getOffset(index) + 'px';
|
|
1340
|
-
selectionBarElement.style.width = element.nativeElement.clientWidth + 'px';
|
|
1343
|
+
selectionBarElement.style.width = element.nativeElement.clientWidth - gap + 'px';
|
|
1341
1344
|
this.preSelect = index;
|
|
1342
1345
|
});
|
|
1343
1346
|
});
|
|
1344
1347
|
selectionBarElement.style.left = this.getOffset(this.select()) + 'px';
|
|
1345
|
-
selectionBarElement.style.width = this.clientWidths[this.select()] + 'px';
|
|
1348
|
+
selectionBarElement.style.width = this.clientWidths[this.select()] - gap + 'px';
|
|
1346
1349
|
this.preSelect = this.select();
|
|
1347
1350
|
}
|
|
1348
1351
|
init() {
|
|
@@ -1351,18 +1354,21 @@ class TabsComponent {
|
|
|
1351
1354
|
selectionBarElement.setAttribute('style-target', 'selection-bar');
|
|
1352
1355
|
}
|
|
1353
1356
|
getOffset(index) {
|
|
1357
|
+
// gap: tab's margin-left + margin-right
|
|
1358
|
+
const gap = 24;
|
|
1354
1359
|
let offset = 0;
|
|
1355
1360
|
for (let i = 0; i < index; i++) {
|
|
1356
|
-
offset += this.clientWidths[i] +
|
|
1361
|
+
// offset += this.clientWidths[i] + gap; // Add the width of the element and the gap
|
|
1362
|
+
offset += this.clientWidths[i]; // Add the width of the element and the gap
|
|
1357
1363
|
}
|
|
1358
1364
|
return offset;
|
|
1359
1365
|
}
|
|
1360
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
1361
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.
|
|
1366
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1367
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TabsComponent, isStandalone: true, selector: "rolatech-tabs", inputs: { select: { classPropertyName: "select", publicName: "select", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "selectChange" }, host: { properties: { "class.rolatech-tabs": "this.hasClass" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "selectionBar", first: true, predicate: ["selectionBar"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n @for (tab of tabs(); track $index) {\n <ng-content select=\"rolatech-tab\"></ng-content>\n }\n </div>\n <!-- <ng-content></ng-content> -->\n</div>\n<!-- <rolatech-icon-button>chevron_right</rolatech-icon-button> -->\n", styles: ["rolatech-tabs{display:flex;flex-direction:row;align-items:center;font-weight:500;height:44px}.selection-bar{position:absolute;height:0;bottom:0;left:0;right:0;border-bottom:2px solid var(--paper-tabs-selection-bar-color, #ffff8d);transform:scale(0);transform-origin:left center;transition:-webkit-transform;transition:transform;z-index:100}rolatech-tab[style-target=host]{color:#ea580c}.selection-bar[style-target=selection-bar]{transition:width .15s cubic-bezier(.4,0,1,1),left .15s cubic-bezier(.4,0,1,1)}.selection-bar[style-target=selection-bar]{border-width:0;background-color:var(--ytcms-policies-app-paper-tab-color, rgb(234, 88, 12));border-radius:3px 3px 0 0;height:3px;margin-left:12px;right:auto;transform:none}#tabsContainer{position:relative}#tabsContent>:not(#selectionBar){height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1362
1368
|
}
|
|
1363
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
1369
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TabsComponent, decorators: [{
|
|
1364
1370
|
type: Component,
|
|
1365
|
-
args: [{ selector: 'rolatech-tabs', standalone: true, imports: [CommonModule, IconButtonComponent], encapsulation: ViewEncapsulation.None, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n @for (tab of tabs(); track $index) {\n <ng-content select=\"rolatech-tab\"></ng-content>\n }\n </div>\n <!-- <ng-content></ng-content> -->\n</div>\n<!-- <rolatech-icon-button>chevron_right</rolatech-icon-button> -->\n", styles: ["rolatech-tabs{display:flex;flex-direction:row;align-items:center;font-weight:500;height:44px}.selection-bar{position:absolute;height:0;bottom:0;left:0;right:0;border-bottom:2px solid var(--paper-tabs-selection-bar-color, #ffff8d);transform:scale(0);transform-origin:left center;transition:-webkit-transform;transition:transform}rolatech-tab[style-target=host]{
|
|
1371
|
+
args: [{ selector: 'rolatech-tabs', standalone: true, imports: [CommonModule, IconButtonComponent], encapsulation: ViewEncapsulation.None, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n @for (tab of tabs(); track $index) {\n <ng-content select=\"rolatech-tab\"></ng-content>\n }\n </div>\n <!-- <ng-content></ng-content> -->\n</div>\n<!-- <rolatech-icon-button>chevron_right</rolatech-icon-button> -->\n", styles: ["rolatech-tabs{display:flex;flex-direction:row;align-items:center;font-weight:500;height:44px}.selection-bar{position:absolute;height:0;bottom:0;left:0;right:0;border-bottom:2px solid var(--paper-tabs-selection-bar-color, #ffff8d);transform:scale(0);transform-origin:left center;transition:-webkit-transform;transition:transform;z-index:100}rolatech-tab[style-target=host]{color:#ea580c}.selection-bar[style-target=selection-bar]{transition:width .15s cubic-bezier(.4,0,1,1),left .15s cubic-bezier(.4,0,1,1)}.selection-bar[style-target=selection-bar]{border-width:0;background-color:var(--ytcms-policies-app-paper-tab-color, rgb(234, 88, 12));border-radius:3px 3px 0 0;height:3px;margin-left:12px;right:auto;transform:none}#tabsContainer{position:relative}#tabsContent>:not(#selectionBar){height:100%}\n"] }]
|
|
1366
1372
|
}], propDecorators: { hasClass: [{
|
|
1367
1373
|
type: HostBinding,
|
|
1368
1374
|
args: ['class.rolatech-tabs']
|