@rolatech/angular-components 17.6.2 → 17.6.4
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/accordion/accordion.component.mjs +3 -3
- package/esm2022/lib/angular-components.module.mjs +4 -4
- package/esm2022/lib/avatar/avatar.component.mjs +3 -3
- package/esm2022/lib/chip-bar/chip-bar.component.mjs +21 -14
- 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/container/container.component.mjs +3 -3
- package/esm2022/lib/container-content/container-content.component.mjs +3 -3
- package/esm2022/lib/content/content.component.mjs +3 -3
- package/esm2022/lib/drawer/drawer-animations.mjs +34 -15
- package/esm2022/lib/drawer/drawer.component.mjs +6 -6
- package/esm2022/lib/editor/editor.component.mjs +6 -6
- package/esm2022/lib/empty/empty.component.mjs +3 -3
- package/esm2022/lib/folder/folder.component.mjs +3 -3
- package/esm2022/lib/footer/footer.component.mjs +3 -3
- package/esm2022/lib/icon/icon.component.mjs +3 -3
- package/esm2022/lib/icon-button/icon-button.component.mjs +3 -3
- package/esm2022/lib/image/image.component.mjs +3 -3
- package/esm2022/lib/image-placeholder/image-placeholder.component.mjs +3 -3
- package/esm2022/lib/image-preview-dialog/image-preview-dialog.component.mjs +3 -3
- package/esm2022/lib/input/input.component.mjs +3 -3
- package/esm2022/lib/layout/layout.component.mjs +5 -5
- package/esm2022/lib/list/list.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-icon/menu-icon.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/page/page.component.mjs +7 -7
- package/esm2022/lib/paginator/paginator.component.mjs +3 -3
- package/esm2022/lib/panel/panel-header.component.mjs +3 -3
- package/esm2022/lib/panel/panel.component.mjs +5 -5
- package/esm2022/lib/rich-item/rich-item.component.mjs +3 -3
- package/esm2022/lib/rich-view/rich-view.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 +3 -3
- package/esm2022/lib/table/table.component.mjs +3 -3
- package/esm2022/lib/tabs/tabs.component.mjs +10 -7
- package/esm2022/lib/thumbnail/thumbnail.component.mjs +3 -3
- package/esm2022/lib/title/title.component.mjs +11 -7
- 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 +230 -197
- package/fesm2022/rolatech-angular-components.mjs.map +1 -1
- package/lib/chip-bar/chip-bar.component.d.ts +3 -2
- package/lib/drawer/drawer-animations.d.ts +6 -3
- package/lib/page/page.component.d.ts +1 -1
- package/lib/tabs/tabs.component.d.ts +3 -2
- package/lib/title/title.component.d.ts +1 -0
- package/package.json +1 -1
- package/themes/_default.scss +1 -1
|
@@ -69,6 +69,7 @@ import { FormsModule } from '@angular/forms';
|
|
|
69
69
|
import * as i2$4 from '@angular/platform-browser';
|
|
70
70
|
import { DomSanitizer, Title } from '@angular/platform-browser';
|
|
71
71
|
import { map as map$1 } from 'lodash';
|
|
72
|
+
import { Platform } from '@angular/cdk/platform';
|
|
72
73
|
|
|
73
74
|
class IconComponent {
|
|
74
75
|
hasClass = true;
|
|
@@ -84,10 +85,10 @@ class IconComponent {
|
|
|
84
85
|
}
|
|
85
86
|
});
|
|
86
87
|
}
|
|
87
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
88
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.
|
|
88
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
89
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.5", 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(--rt-icon-width, 24px);height:var(--rt-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
90
|
}
|
|
90
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
91
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IconComponent, decorators: [{
|
|
91
92
|
type: Component,
|
|
92
93
|
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(--rt-icon-width, 24px);height:var(--rt-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
94
|
}], ctorParameters: () => [], propDecorators: { hasClass: [{
|
|
@@ -97,10 +98,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
97
98
|
|
|
98
99
|
class IconButtonComponent {
|
|
99
100
|
hasClass = true;
|
|
100
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
101
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
101
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
102
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", 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-[--rt-10-percent-layer] 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{--rt-icon-button-icon-width: 24px;--rt-icon-button-icon-height: 24px;color:var(--rt-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;width:100%;height:100%;line-height:0;-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
103
|
}
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
104
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
104
105
|
type: Component,
|
|
105
106
|
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-[--rt-10-percent-layer] 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{--rt-icon-button-icon-width: 24px;--rt-icon-button-icon-height: 24px;color:var(--rt-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;width:100%;height:100%;line-height:0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}\n"] }]
|
|
106
107
|
}], propDecorators: { hasClass: [{
|
|
@@ -109,24 +110,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
109
110
|
}] } });
|
|
110
111
|
|
|
111
112
|
class TitleComponent {
|
|
113
|
+
hasClass = true;
|
|
112
114
|
title = input();
|
|
113
115
|
subtitle = input();
|
|
114
116
|
large = input(false, { transform: booleanAttribute });
|
|
115
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
116
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
117
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
118
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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 }, large: { classPropertyName: "large", publicName: "large", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-title": "this.hasClass" } }, ngImport: i0, template: "<div class=\"flex flex-row items-center\">\n @if (large()) {\n <a class=\"block text-3xl font-bold py-3\"\n ><span>{{ title() }}</span></a\n >\n } @else {\n <a class=\"block text-xl font-bold py-3\"\n ><span>{{ title() }}</span></a\n >\n }\n\n <a class=\"text-sm leading-3 text-gray-500\"\n ><span>{{ subtitle() }}</span></a\n >\n</div>\n", styles: ["rolatech-title{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
117
119
|
}
|
|
118
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TitleComponent, decorators: [{
|
|
119
121
|
type: Component,
|
|
120
|
-
args: [{ selector: 'rolatech-title', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-row items-center\">\n @if (large()) {\n <a class=\"block text-
|
|
121
|
-
}]
|
|
122
|
+
args: [{ selector: 'rolatech-title', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-row items-center\">\n @if (large()) {\n <a class=\"block text-3xl font-bold py-3\"\n ><span>{{ title() }}</span></a\n >\n } @else {\n <a class=\"block text-xl font-bold py-3\"\n ><span>{{ title() }}</span></a\n >\n }\n\n <a class=\"text-sm leading-3 text-gray-500\"\n ><span>{{ subtitle() }}</span></a\n >\n</div>\n", styles: ["rolatech-title{display:block}\n"] }]
|
|
123
|
+
}], propDecorators: { hasClass: [{
|
|
124
|
+
type: HostBinding,
|
|
125
|
+
args: ['class.rolatech-title']
|
|
126
|
+
}] } });
|
|
122
127
|
|
|
123
128
|
class ContainerComponent {
|
|
124
129
|
hasId = 'rolatech-container';
|
|
125
130
|
hasClass = true;
|
|
126
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
127
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
131
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
132
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ContainerComponent, isStandalone: true, selector: "rolatech-container", host: { properties: { "id": "this.hasId", "class.rolatech-container": "this.hasClass" } }, ngImport: i0, template: "<div class=\"xl:max-w-[1024px] 2xl:max-w-[1280px] m-auto\">\n <ng-content select=\"rolatech-toolbar\"></ng-content>\n <ng-content select=\"rolatech-tabs\"></ng-content>\n <ng-content select=\"rolatech-chip-bar\"></ng-content>\n <ng-content select=\"rolatech-list\"></ng-content>\n <ng-content select=\"rolatech-content\"></ng-content>\n <div class=\"container-content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["@media (min-width: 1280){.rolatech-container{max-width:var(--rt-container-max-width, 1024px)}}@media (min-width: 1536px){.rolatech-container{max-width:var(--rt-container-max-width, 1280px)}}rolatech-container .container-content{margin:0 auto;display:block;padding-left:var(--rt-container-content-padding-left, 16px);padding-right:var(--rt-container-content-padding-right, 16px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
128
133
|
}
|
|
129
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ContainerComponent, decorators: [{
|
|
130
135
|
type: Component,
|
|
131
136
|
args: [{ standalone: true, selector: 'rolatech-container', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"xl:max-w-[1024px] 2xl:max-w-[1280px] m-auto\">\n <ng-content select=\"rolatech-toolbar\"></ng-content>\n <ng-content select=\"rolatech-tabs\"></ng-content>\n <ng-content select=\"rolatech-chip-bar\"></ng-content>\n <ng-content select=\"rolatech-list\"></ng-content>\n <ng-content select=\"rolatech-content\"></ng-content>\n <div class=\"container-content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["@media (min-width: 1280){.rolatech-container{max-width:var(--rt-container-max-width, 1024px)}}@media (min-width: 1536px){.rolatech-container{max-width:var(--rt-container-max-width, 1280px)}}rolatech-container .container-content{margin:0 auto;display:block;padding-left:var(--rt-container-content-padding-left, 16px);padding-right:var(--rt-container-content-padding-right, 16px)}\n"] }]
|
|
132
137
|
}], propDecorators: { hasId: [{
|
|
@@ -138,10 +143,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
138
143
|
}] } });
|
|
139
144
|
|
|
140
145
|
class ContainerContentComponent {
|
|
141
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
142
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
146
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ContainerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
147
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ContainerContentComponent, isStandalone: true, selector: "rolatech-container-content", ngImport: i0, template: "<div>\n <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSidenavModule }] });
|
|
143
148
|
}
|
|
144
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
149
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ContainerContentComponent, decorators: [{
|
|
145
150
|
type: Component,
|
|
146
151
|
args: [{ selector: 'rolatech-container-content', standalone: true, imports: [CommonModule, MatSidenavModule], template: "<div>\n <ng-content></ng-content>\n</div>\n" }]
|
|
147
152
|
}] });
|
|
@@ -159,10 +164,10 @@ function provideAngularLayout(config) {
|
|
|
159
164
|
|
|
160
165
|
class MenuIconComponent {
|
|
161
166
|
hasClass = true;
|
|
162
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
163
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
167
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MenuIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
168
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: MenuIconComponent, isStandalone: true, selector: "rolatech-menu-icon", 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-[--rt-10-percent-layer] rounded-full rolatech-icon-button\"\n onclick=\"this.blur()\"\n>\n <div style=\"width: 100%; height: 100%; display: block; fill: currentcolor\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n focusable=\"false\"\n style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n >\n <path d=\"M21 6H3V5h18v1zm0 5H3v1h18v-1zm0 6H3v1h18v-1z\"></path>\n </svg>\n </div>\n</button>\n", styles: ["rolatech-menu-icon{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
164
169
|
}
|
|
165
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
170
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MenuIconComponent, decorators: [{
|
|
166
171
|
type: Component,
|
|
167
172
|
args: [{ selector: 'rolatech-menu-icon', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<button\n id=\"button\"\n class=\"w-10 h-10 p-2 inline-block relative cursor-pointer hover:bg-[--rt-10-percent-layer] rounded-full rolatech-icon-button\"\n onclick=\"this.blur()\"\n>\n <div style=\"width: 100%; height: 100%; display: block; fill: currentcolor\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n focusable=\"false\"\n style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n >\n <path d=\"M21 6H3V5h18v1zm0 5H3v1h18v-1zm0 6H3v1h18v-1z\"></path>\n </svg>\n </div>\n</button>\n", styles: ["rolatech-menu-icon{display:block}\n"] }]
|
|
168
173
|
}], propDecorators: { hasClass: [{
|
|
@@ -219,10 +224,10 @@ class TopbarComponent {
|
|
|
219
224
|
}
|
|
220
225
|
this.appDrawer.toggle();
|
|
221
226
|
}
|
|
222
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
223
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
227
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
228
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: TopbarComponent, isStandalone: true, selector: "rolatech-topbar", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-topbar": "this.hasClass" } }, ngImport: i0, template: "<div class=\"h-14 flex items-center\">\n @if (persistent || (isHandset$ | async)) {\n <rolatech-menu-icon id=\"topbar-menu-button\" (click)=\"onToggle()\"></rolatech-menu-icon>\n }\n <div class=\"cursor-pointer ml-1\" [routerLink]=\"link()\">\n <div class=\"text-[--rt-text-primary] text-lg md: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(--rt-base-background, #fff);color:var(--rt-text-primary, #030303);padding-left:var(--rt-topbar-padding-left, 16px);padding-right:var(--rt-topbar-padding-right, 16px)}rolatech-topbar:not(:has(#topbar-menu-button)){--rt-topbar-padding-left: 16px}rolatech-layout rolatech-drawer[persistent][opened]~rolatech-topbar{margin-left:256px}@media (max-width: 768px){:root{--rt-topbar-padding-left: 8px}}\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: "ngmodule", type: MatButtonModule }, { kind: "component", type: MenuIconComponent, selector: "rolatech-menu-icon" }], encapsulation: i0.ViewEncapsulation.None });
|
|
224
229
|
}
|
|
225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TopbarComponent, decorators: [{
|
|
226
231
|
type: Component,
|
|
227
232
|
args: [{ selector: 'rolatech-topbar', standalone: true, imports: [CommonModule, RouterLink, IconButtonComponent, MatButtonModule, MatIcon, MenuIconComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"h-14 flex items-center\">\n @if (persistent || (isHandset$ | async)) {\n <rolatech-menu-icon id=\"topbar-menu-button\" (click)=\"onToggle()\"></rolatech-menu-icon>\n }\n <div class=\"cursor-pointer ml-1\" [routerLink]=\"link()\">\n <div class=\"text-[--rt-text-primary] text-lg md: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(--rt-base-background, #fff);color:var(--rt-text-primary, #030303);padding-left:var(--rt-topbar-padding-left, 16px);padding-right:var(--rt-topbar-padding-right, 16px)}rolatech-topbar:not(:has(#topbar-menu-button)){--rt-topbar-padding-left: 16px}rolatech-layout rolatech-drawer[persistent][opened]~rolatech-topbar{margin-left:256px}@media (max-width: 768px){:root{--rt-topbar-padding-left: 8px}}\n"] }]
|
|
228
233
|
}], ctorParameters: () => [], propDecorators: { hostId: [{
|
|
@@ -233,20 +238,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
233
238
|
args: ['class.rolatech-topbar']
|
|
234
239
|
}] } });
|
|
235
240
|
|
|
236
|
-
|
|
237
|
-
//
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
241
|
+
// export const DRAWER_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
|
|
242
|
+
// export const heightAnimation = trigger('heightAnimation', [
|
|
243
|
+
// state(
|
|
244
|
+
// 'expanded',
|
|
245
|
+
// style({
|
|
246
|
+
// height: '*',
|
|
247
|
+
// visibility: 'visible',
|
|
248
|
+
// }),
|
|
249
|
+
// ),
|
|
250
|
+
// state(
|
|
251
|
+
// 'collapsed',
|
|
252
|
+
// style({
|
|
253
|
+
// height: '0px',
|
|
254
|
+
// visibility: 'hidden',
|
|
255
|
+
// }),
|
|
256
|
+
// ),
|
|
257
|
+
// transition('expanded <=> collapsed', [animate(DRAWER_ANIMATION_TIMING)]),
|
|
258
|
+
// ]);
|
|
259
|
+
const PANEL_ANIMATION_TIMING$1 = '225ms cubic-bezier(0.4,0.0,0.2,1)';
|
|
260
|
+
const panelAnimations$1 = {
|
|
261
|
+
/** Animation that rotates the indicator arrow. */
|
|
262
|
+
indicator: trigger('indicator', [
|
|
263
|
+
state('collapsed, void', style({ transform: 'rotate(0deg)' })),
|
|
264
|
+
state('expanded', style({ transform: 'rotate(180deg)' })),
|
|
265
|
+
transition('expanded <=> collapsed, void => collapsed', animate(PANEL_ANIMATION_TIMING$1)),
|
|
266
|
+
]),
|
|
267
|
+
/** Animation that expands and collapses the panel content. */
|
|
268
|
+
content: trigger('content', [
|
|
269
|
+
state('collapsed, void', style({ height: '0px', visibility: 'hidden' })),
|
|
270
|
+
state('expanded', style({ height: '*', visibility: 'visible' })),
|
|
271
|
+
transition('expanded <=> collapsed, void => collapsed', animate(PANEL_ANIMATION_TIMING$1)),
|
|
272
|
+
]),
|
|
273
|
+
};
|
|
250
274
|
|
|
251
275
|
class DrawerComponent {
|
|
252
276
|
opened = false;
|
|
@@ -320,10 +344,10 @@ class DrawerComponent {
|
|
|
320
344
|
});
|
|
321
345
|
}
|
|
322
346
|
}
|
|
323
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
324
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: DrawerComponent, isStandalone: true, selector: "rolatech-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-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=\"rolatech-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-drawer\">\n <div id=\"guide-wrapper\" class=\"rolatech-drawer\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\" class=\"rolatech-drawer\">\n <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n <rolatech-menu-icon #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\"></rolatech-menu-icon>\n <div class=\"text-[--rt-text-primary] text-lg md: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=\"rolatech-drawer\">\n @if (completed) {\n <div>\n <div class=\"block p-3\">\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 id=\"endpoint\"\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-3 rt-guide-entry\"\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-[--rt-10-percent-layer] 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 mr-3\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n @if (item.button) {\n <a\n class=\"flex app-drawer-button min-h-11 rounded-xl mb-2\"\n [routerLink]=\"item.link\"\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\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n } @else {\n <a\n id=\"endpoint\"\n class=\"flex hover:bg-[--rt-10-percent-layer] min-h-11 rt-guide-entry\"\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 }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-drawer[persistent][position=top]{width:100%}rolatech-drawer[opened]{visibility:visible}rolatech-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-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-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=left]{right:auto}rolatech-drawer[persistent][position=right]{left:auto}rolatech-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-drawer{height:100%;display:flexbox;display:flex;flex-direction:column}#contentContainer.rolatech-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--rt-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.rolatech-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-drawer:not([persistent]) #guide-spacer{display:none}rolatech-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:var(--rt-drawer-active-background-color, rgba(0, 0, 0, .05));font-weight:500;border-radius:10px}.content{display:flex;flex-direction:column;overflow:visible}.app-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.app-drawer-button:hover{box-shadow:0 1px 3px #3c40434d,0 4px 8px 3px #3c404326;background-color:var(--rt-brand-color, #c2e7ff)}#endpoint.rt-guide-entry:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}\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: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }, { kind: "component", type: MenuIconComponent, selector: "rolatech-menu-icon" }, { kind: "ngmodule", type: MatButtonModule }], animations: [heightAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
347
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
348
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: DrawerComponent, isStandalone: true, selector: "rolatech-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-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=\"rolatech-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-drawer\">\n <div id=\"guide-wrapper\" class=\"rolatech-drawer\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\" class=\"rolatech-drawer\">\n <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n <rolatech-menu-icon #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\"></rolatech-menu-icon>\n <div class=\"text-[--rt-text-primary] text-lg md: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=\"rolatech-drawer\">\n @if (completed) {\n <div>\n <div class=\"block p-3\">\n @for (item of links(); track $index) {\n @if (item.children) {\n <div class=\"flex cursor-pointer overflow-hidden\">\n @if (item.icon) {\n <div class=\"h-11 flex items-center\">\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n </div>\n }\n <div class=\"w-full\">\n <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n <span class=\"ml-3\">{{ item.title }}</span>\n <div class=\"flex-1\"></div>\n <rolatech-icon [@indicator]=\"panelOpenState === true ? 'expanded' : 'collapsed'\"\n >expand_more</rolatech-icon\n >\n </div>\n <div\n class=\"flex flex-col ml-4 overflow-visible\"\n [@content]=\"panelOpenState === true ? 'expanded' : 'collapsed'\"\n >\n @for (child of item.children; track child) {\n <a\n id=\"endpoint\"\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-2 rt-guide-entry\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <span class=\"text-sm\">{{ child.title }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n } @else {\n @if (item.openinView) {\n <a\n class=\"flex hover:bg-[--rt-10-percent-layer] 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 items-center\">\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 mr-3\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n @if (item.button) {\n <a\n class=\"flex app-drawer-button min-h-11 rounded-xl mb-2\"\n [routerLink]=\"item.link\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\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\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n } @else {\n <a\n id=\"endpoint\"\n class=\"flex hover:bg-[--rt-10-percent-layer] min-h-11 rt-guide-entry\"\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 items-center\">\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 }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-drawer[persistent][position=top]{width:100%}rolatech-drawer[opened]{visibility:visible}rolatech-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-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-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=left]{right:auto}rolatech-drawer[persistent][position=right]{left:auto}rolatech-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-drawer{height:100%;display:flex;flex-direction:column}#contentContainer.rolatech-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--rt-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.rolatech-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-drawer:not([persistent]) #guide-spacer{display:none}rolatech-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:var(--rt-drawer-active-background-color, rgba(0, 0, 0, .05));font-weight:500;border-radius:10px}.content{display:flex;flex-direction:column;overflow:visible}.app-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.app-drawer-button:hover{box-shadow:0 1px 3px #3c40434d,0 4px 8px 3px #3c404326;background-color:var(--rt-brand-color, #c2e7ff)}#endpoint.rt-guide-entry:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}\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: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }, { kind: "component", type: MenuIconComponent, selector: "rolatech-menu-icon" }, { kind: "ngmodule", type: MatButtonModule }], animations: [panelAnimations$1.indicator, panelAnimations$1.content], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
325
349
|
}
|
|
326
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
350
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
327
351
|
type: Component,
|
|
328
352
|
args: [{ selector: 'rolatech-drawer', standalone: true, imports: [
|
|
329
353
|
CommonModule,
|
|
@@ -337,7 +361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
337
361
|
IconComponent,
|
|
338
362
|
MenuIconComponent,
|
|
339
363
|
MatButtonModule,
|
|
340
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
364
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [panelAnimations$1.indicator, panelAnimations$1.content], template: "<div id=\"scrim\" #scrim class=\"rolatech-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-drawer\">\n <div id=\"guide-wrapper\" class=\"rolatech-drawer\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\" class=\"rolatech-drawer\">\n <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n <rolatech-menu-icon #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\"></rolatech-menu-icon>\n <div class=\"text-[--rt-text-primary] text-lg md: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=\"rolatech-drawer\">\n @if (completed) {\n <div>\n <div class=\"block p-3\">\n @for (item of links(); track $index) {\n @if (item.children) {\n <div class=\"flex cursor-pointer overflow-hidden\">\n @if (item.icon) {\n <div class=\"h-11 flex items-center\">\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n </div>\n }\n <div class=\"w-full\">\n <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n <span class=\"ml-3\">{{ item.title }}</span>\n <div class=\"flex-1\"></div>\n <rolatech-icon [@indicator]=\"panelOpenState === true ? 'expanded' : 'collapsed'\"\n >expand_more</rolatech-icon\n >\n </div>\n <div\n class=\"flex flex-col ml-4 overflow-visible\"\n [@content]=\"panelOpenState === true ? 'expanded' : 'collapsed'\"\n >\n @for (child of item.children; track child) {\n <a\n id=\"endpoint\"\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-2 rt-guide-entry\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <span class=\"text-sm\">{{ child.title }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n } @else {\n @if (item.openinView) {\n <a\n class=\"flex hover:bg-[--rt-10-percent-layer] 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 items-center\">\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 mr-3\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n @if (item.button) {\n <a\n class=\"flex app-drawer-button min-h-11 rounded-xl mb-2\"\n [routerLink]=\"item.link\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\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\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n } @else {\n <a\n id=\"endpoint\"\n class=\"flex hover:bg-[--rt-10-percent-layer] min-h-11 rt-guide-entry\"\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 items-center\">\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 }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-drawer[persistent][position=top]{width:100%}rolatech-drawer[opened]{visibility:visible}rolatech-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-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-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=left]{right:auto}rolatech-drawer[persistent][position=right]{left:auto}rolatech-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-drawer{height:100%;display:flex;flex-direction:column}#contentContainer.rolatech-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--rt-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.rolatech-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-drawer:not([persistent]) #guide-spacer{display:none}rolatech-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:var(--rt-drawer-active-background-color, rgba(0, 0, 0, .05));font-weight:500;border-radius:10px}.content{display:flex;flex-direction:column;overflow:visible}.app-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.app-drawer-button:hover{box-shadow:0 1px 3px #3c40434d,0 4px 8px 3px #3c404326;background-color:var(--rt-brand-color, #c2e7ff)}#endpoint.rt-guide-entry:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}\n"] }]
|
|
341
365
|
}], propDecorators: { hostId: [{
|
|
342
366
|
type: HostBinding,
|
|
343
367
|
args: ['id']
|
|
@@ -405,10 +429,10 @@ class MiniGuideComponent {
|
|
|
405
429
|
}
|
|
406
430
|
this.opened ? this.close() : this.open();
|
|
407
431
|
}
|
|
408
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
409
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
432
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MiniGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
433
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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 id=\"min-guide-endpoint\"\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-3 rt-guide-entry\"\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(--rt-toolbar-height, 56px);bottom:0;width:var(--rt-mini-guide-width, 72px);box-sizing:border-box;display:inline-block;background-color:var(--rt-base-background, #fff);color:var(--rt-text-primary, #000);z-index:2028;padding:0 4px}.min-guide-active{background-color:#0000000d;border-radius:8px;font-weight:500}#min-guide-endpoint.rt-guide-entry:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}\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 });
|
|
410
434
|
}
|
|
411
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
435
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MiniGuideComponent, decorators: [{
|
|
412
436
|
type: Component,
|
|
413
437
|
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 id=\"min-guide-endpoint\"\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-3 rt-guide-entry\"\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(--rt-toolbar-height, 56px);bottom:0;width:var(--rt-mini-guide-width, 72px);box-sizing:border-box;display:inline-block;background-color:var(--rt-base-background, #fff);color:var(--rt-text-primary, #000);z-index:2028;padding:0 4px}.min-guide-active{background-color:#0000000d;border-radius:8px;font-weight:500}#min-guide-endpoint.rt-guide-entry:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}\n"] }]
|
|
414
438
|
}], propDecorators: { hasId: [{
|
|
@@ -477,10 +501,10 @@ class LayoutComponent {
|
|
|
477
501
|
this.renderer.removeAttribute(this.el.nativeElement, 'mini-guide-visible');
|
|
478
502
|
}
|
|
479
503
|
}
|
|
480
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
481
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.
|
|
504
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
505
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.5", type: LayoutComponent, isStandalone: true, selector: "rolatech-layout", host: { properties: { "id": "this.hostId", "class.rolatech-layout": "this.hasClass" } }, queries: [{ propertyName: "topbar", first: true, predicate: TopbarComponent, descendants: true, isSignal: true }, { propertyName: "drawer", first: true, predicate: DrawerComponent, 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-drawer\"></ng-content>\n<ng-content select=\"rolatech-mini-guide\"></ng-content>\n<ng-content select=\"rolatech-page\"></ng-content>\n<div class=\"flex-1\"></div>\n<ng-content select=\"rolatech-footer\"></ng-content>\n", styles: ["rolatech-layout{display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--rt-layout-background-color, #fff);color:var(--rt-layout-color, #000)}rolatech-layout rolatech-drawer[persistent][opened][position=top]~rolatech-page{margin-top:56px}rolatech-layout rolatech-drawer[persistent][opened][position=left]~rolatech-page{margin-left:256px}rolatech-layout rolatech-drawer[persistent][opened][position=right]~rolatech-page{margin-right:256px}rolatech-layout rolatech-mini-guide[mini-guide-visible]~rolatech-page{margin-left:var(--rt-mini-guide-width, 72px)}rolatech-page{display:block;margin-top:56px}rolatech-page[mini-guide-visible] .content{margin-left:72px}rolatech-layout[mini-guide-visible] rolatech-page.rt-page{margin-left:var(--rt-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 });
|
|
482
506
|
}
|
|
483
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
484
508
|
type: Component,
|
|
485
509
|
args: [{ selector: 'rolatech-layout', standalone: true, imports: [
|
|
486
510
|
CommonModule,
|
|
@@ -496,7 +520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
496
520
|
MatSidenavModule,
|
|
497
521
|
TopbarComponent,
|
|
498
522
|
DrawerComponent,
|
|
499
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-drawer\"></ng-content>\n<ng-content select=\"rolatech-mini-guide\"></ng-content>\n<ng-content select=\"rolatech-page\"></ng-content>\n<div class=\"flex-1\"></div>\n<ng-content select=\"rolatech-footer\"></ng-content>\n", styles: ["rolatech-layout{display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--rt-layout-background-color, #fff);color:var(--rt-layout-color, #000)}rolatech-layout rolatech-drawer[persistent][opened][position=top]~rolatech-page{margin-top:56px}rolatech-layout rolatech-drawer[persistent][opened][position=left]~rolatech-page{margin-left:256px}rolatech-layout rolatech-drawer[persistent][opened][position=right]~rolatech-page{margin-right:256px}rolatech-layout rolatech-mini-guide[mini-guide-visible]~rolatech-page{margin-left:var(--rt-mini-guide-width, 72px)}rolatech-page{display:block;margin-top:56px}rolatech-page[mini-guide-visible] .content{margin-left:72px}rolatech-layout[mini-guide-visible] rolatech-page.rt-
|
|
523
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-drawer\"></ng-content>\n<ng-content select=\"rolatech-mini-guide\"></ng-content>\n<ng-content select=\"rolatech-page\"></ng-content>\n<div class=\"flex-1\"></div>\n<ng-content select=\"rolatech-footer\"></ng-content>\n", styles: ["rolatech-layout{display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--rt-layout-background-color, #fff);color:var(--rt-layout-color, #000)}rolatech-layout rolatech-drawer[persistent][opened][position=top]~rolatech-page{margin-top:56px}rolatech-layout rolatech-drawer[persistent][opened][position=left]~rolatech-page{margin-left:256px}rolatech-layout rolatech-drawer[persistent][opened][position=right]~rolatech-page{margin-right:256px}rolatech-layout rolatech-mini-guide[mini-guide-visible]~rolatech-page{margin-left:var(--rt-mini-guide-width, 72px)}rolatech-page{display:block;margin-top:56px}rolatech-page[mini-guide-visible] .content{margin-left:72px}rolatech-layout[mini-guide-visible] rolatech-page.rt-page{margin-left:var(--rt-mini-guide-width, 72px)}\n"] }]
|
|
500
524
|
}], propDecorators: { hostId: [{
|
|
501
525
|
type: HostBinding,
|
|
502
526
|
args: ['id']
|
|
@@ -508,11 +532,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
508
532
|
class AppPageComponent {
|
|
509
533
|
hostId = 'rolatech-page';
|
|
510
534
|
hasClass = true;
|
|
511
|
-
|
|
512
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
513
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
535
|
+
hasPageClass = true;
|
|
536
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AppPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
537
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: AppPageComponent, isStandalone: true, selector: "rolatech-page", host: { properties: { "id": "this.hostId", "class.rolatech-page": "this.hasClass", "class.rt-page": "this.hasPageClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
514
538
|
}
|
|
515
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
539
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AppPageComponent, decorators: [{
|
|
516
540
|
type: Component,
|
|
517
541
|
args: [{ selector: 'rolatech-page', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
|
|
518
542
|
}], propDecorators: { hostId: [{
|
|
@@ -521,9 +545,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
521
545
|
}], hasClass: [{
|
|
522
546
|
type: HostBinding,
|
|
523
547
|
args: ['class.rolatech-page']
|
|
524
|
-
}],
|
|
548
|
+
}], hasPageClass: [{
|
|
525
549
|
type: HostBinding,
|
|
526
|
-
args: ['class.rt-
|
|
550
|
+
args: ['class.rt-page']
|
|
527
551
|
}] } });
|
|
528
552
|
|
|
529
553
|
class FooterComponent {
|
|
@@ -532,10 +556,10 @@ class FooterComponent {
|
|
|
532
556
|
config = inject(APP_CONFIG);
|
|
533
557
|
title = input();
|
|
534
558
|
copyright = input('');
|
|
535
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
536
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.
|
|
559
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
560
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.5", type: FooterComponent, isStandalone: true, selector: "rolatech-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-footer": "this.hasClass" } }, ngImport: i0, template: "<div class=\"bg-[--rt-base-background] flex flex-col justify-between px-5 md:px-16 py-6\">\n <div class=\"flex flex-col md:flex-row md: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\">\u00A9{{ copyright() }}</span>\n </div>\n</div>\n", styles: [".rolatech-footer{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
537
561
|
}
|
|
538
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
562
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FooterComponent, decorators: [{
|
|
539
563
|
type: Component,
|
|
540
564
|
args: [{ selector: 'rolatech-footer', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"bg-[--rt-base-background] flex flex-col justify-between px-5 md:px-16 py-6\">\n <div class=\"flex flex-col md:flex-row md: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\">\u00A9{{ copyright() }}</span>\n </div>\n</div>\n", styles: [".rolatech-footer{width:100%}\n"] }]
|
|
541
565
|
}], propDecorators: { hostId: [{
|
|
@@ -547,10 +571,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
547
571
|
}] } });
|
|
548
572
|
|
|
549
573
|
class ConsoleLayoutComponent {
|
|
550
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
551
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
574
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ConsoleLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
575
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ConsoleLayoutComponent, isStandalone: true, selector: "rolatech-console-layout", ngImport: i0, template: "<p>console-layout works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
552
576
|
}
|
|
553
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
577
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ConsoleLayoutComponent, decorators: [{
|
|
554
578
|
type: Component,
|
|
555
579
|
args: [{ selector: 'rolatech-console-layout', standalone: true, imports: [CommonModule], template: "<p>console-layout works!</p>\n" }]
|
|
556
580
|
}] });
|
|
@@ -567,10 +591,10 @@ class MenuUserComponent {
|
|
|
567
591
|
// this.data = this.user();
|
|
568
592
|
// });
|
|
569
593
|
}
|
|
570
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
571
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
594
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MenuUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
595
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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>\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: ["rolatech-menu-user{background-color:var(--rt-menu-background, #fff);color:var(--rt-text-primary, #000)}.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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
572
596
|
}
|
|
573
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
597
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MenuUserComponent, decorators: [{
|
|
574
598
|
type: Component,
|
|
575
599
|
args: [{ standalone: true, imports: [MatMenuModule, MatIconModule], selector: 'rolatech-menu-user', encapsulation: ViewEncapsulation.None, 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>\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: ["rolatech-menu-user{background-color:var(--rt-menu-background, #fff);color:var(--rt-text-primary, #000)}.formated-string{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}\n"] }]
|
|
576
600
|
}], ctorParameters: () => [] });
|
|
@@ -580,10 +604,10 @@ class TopbarAvatarMenuComponent {
|
|
|
580
604
|
platformId = inject(PLATFORM_ID);
|
|
581
605
|
menu = input.required();
|
|
582
606
|
avatar = input();
|
|
583
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
584
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
607
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TopbarAvatarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
608
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: TopbarAvatarMenuComponent, isStandalone: true, selector: "rolatech-topbar-avatar-menu", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex\">\n <a\n class=\"flex justify-center items-center rounded-full overflow-hidden cursor-pointer hover:outline-[--rt-raised-background] outline outline-transparent outline-4\"\n [matMenuTriggerFor]=\"menu()\"\n >\n <div class=\"bg-orange-600 w-9 h-9\">\n @if (avatar()) {\n <img class=\"w-9 h-9 object-cover\" [src]=\"avatar()\" />\n }\n </div>\n </a>\n</div>\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"] }] });
|
|
585
609
|
}
|
|
586
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
610
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TopbarAvatarMenuComponent, decorators: [{
|
|
587
611
|
type: Component,
|
|
588
612
|
args: [{ selector: 'rolatech-topbar-avatar-menu', standalone: true, imports: [
|
|
589
613
|
CommonModule,
|
|
@@ -598,10 +622,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
598
622
|
}] });
|
|
599
623
|
|
|
600
624
|
class FolderComponent {
|
|
601
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
602
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
625
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
626
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: FolderComponent, isStandalone: true, selector: "rolatech-folder", ngImport: i0, template: "<div></div>\n", styles: [""] });
|
|
603
627
|
}
|
|
604
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
628
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FolderComponent, decorators: [{
|
|
605
629
|
type: Component,
|
|
606
630
|
args: [{ selector: 'rolatech-folder', standalone: true, template: "<div></div>\n" }]
|
|
607
631
|
}] });
|
|
@@ -636,10 +660,10 @@ class MediaPreviewDialogComponent {
|
|
|
636
660
|
this.prevDisabled = this.selected === 0;
|
|
637
661
|
this.nextDisabled = this.selected === this.data.media.length - 1;
|
|
638
662
|
}
|
|
639
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
640
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
663
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MediaPreviewDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
664
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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"] }] });
|
|
641
665
|
}
|
|
642
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
666
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MediaPreviewDialogComponent, decorators: [{
|
|
643
667
|
type: Component,
|
|
644
668
|
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" }]
|
|
645
669
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -695,8 +719,8 @@ const MAT_MODULE = [
|
|
|
695
719
|
ScrollingModule,
|
|
696
720
|
];
|
|
697
721
|
class MaterialModule {
|
|
698
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
699
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.
|
|
722
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
723
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: MaterialModule, imports: [A11yModule,
|
|
700
724
|
ClipboardModule,
|
|
701
725
|
CdkStepperModule,
|
|
702
726
|
CdkTableModule,
|
|
@@ -785,7 +809,7 @@ class MaterialModule {
|
|
|
785
809
|
MatTreeModule,
|
|
786
810
|
PortalModule,
|
|
787
811
|
ScrollingModule] });
|
|
788
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.
|
|
812
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MaterialModule, imports: [MAT_MODULE, A11yModule,
|
|
789
813
|
ClipboardModule,
|
|
790
814
|
CdkStepperModule,
|
|
791
815
|
CdkTableModule,
|
|
@@ -831,7 +855,7 @@ class MaterialModule {
|
|
|
831
855
|
PortalModule,
|
|
832
856
|
ScrollingModule] });
|
|
833
857
|
}
|
|
834
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
858
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MaterialModule, decorators: [{
|
|
835
859
|
type: NgModule,
|
|
836
860
|
args: [{
|
|
837
861
|
imports: [...MAT_MODULE],
|
|
@@ -840,11 +864,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
840
864
|
}] });
|
|
841
865
|
|
|
842
866
|
class AngularComponentsModule {
|
|
843
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
844
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.
|
|
845
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.
|
|
867
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
868
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: AngularComponentsModule, imports: [MaterialModule], exports: [MaterialModule] });
|
|
869
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AngularComponentsModule, imports: [MaterialModule, MaterialModule] });
|
|
846
870
|
}
|
|
847
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
871
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AngularComponentsModule, decorators: [{
|
|
848
872
|
type: NgModule,
|
|
849
873
|
args: [{
|
|
850
874
|
imports: [MaterialModule],
|
|
@@ -871,10 +895,10 @@ class SpinnerComponent {
|
|
|
871
895
|
if (this.loadingSubscription)
|
|
872
896
|
this.loadingSubscription.unsubscribe();
|
|
873
897
|
}
|
|
874
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
875
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.
|
|
898
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
899
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.5", 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 }] });
|
|
876
900
|
}
|
|
877
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
901
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
878
902
|
type: Component,
|
|
879
903
|
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"] }]
|
|
880
904
|
}] });
|
|
@@ -921,10 +945,10 @@ class MediaUploadComponent {
|
|
|
921
945
|
};
|
|
922
946
|
}
|
|
923
947
|
}
|
|
924
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
925
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
948
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MediaUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
949
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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-[--rt-raised-background] 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"] }] });
|
|
926
950
|
}
|
|
927
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
951
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MediaUploadComponent, decorators: [{
|
|
928
952
|
type: Component,
|
|
929
953
|
args: [{ standalone: true, imports: [AngularCommonModule, AngularComponentsModule, SpinnerComponent], selector: 'rolatech-media-upload', template: "<div class=\"bg-[--rt-raised-background] 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"] }]
|
|
930
954
|
}] });
|
|
@@ -936,10 +960,10 @@ class StorageBucketCreateComponent {
|
|
|
936
960
|
ngDoCheck() {
|
|
937
961
|
this.output.emit(this.name());
|
|
938
962
|
}
|
|
939
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
940
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.
|
|
963
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: StorageBucketCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
964
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.5", 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"] }] });
|
|
941
965
|
}
|
|
942
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
966
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: StorageBucketCreateComponent, decorators: [{
|
|
943
967
|
type: Component,
|
|
944
968
|
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"] }]
|
|
945
969
|
}] });
|
|
@@ -967,10 +991,10 @@ class StorageFileUploadComponent {
|
|
|
967
991
|
removeFile() {
|
|
968
992
|
this.file = null;
|
|
969
993
|
}
|
|
970
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
971
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
994
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: StorageFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
995
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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"] }] });
|
|
972
996
|
}
|
|
973
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
997
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: StorageFileUploadComponent, decorators: [{
|
|
974
998
|
type: Component,
|
|
975
999
|
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"] }]
|
|
976
1000
|
}] });
|
|
@@ -983,10 +1007,10 @@ class StorageFolderCreateComponent {
|
|
|
983
1007
|
ngDoCheck() {
|
|
984
1008
|
this.output.emit({ name: this.name(), isPublic: this.isPublic() });
|
|
985
1009
|
}
|
|
986
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
987
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.
|
|
1010
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: StorageFolderCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1011
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.5", 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"] }] });
|
|
988
1012
|
}
|
|
989
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1013
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: StorageFolderCreateComponent, decorators: [{
|
|
990
1014
|
type: Component,
|
|
991
1015
|
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"] }]
|
|
992
1016
|
}] });
|
|
@@ -1019,10 +1043,10 @@ class WechatConnectDialogComponent {
|
|
|
1019
1043
|
this.dialogRef.close();
|
|
1020
1044
|
}
|
|
1021
1045
|
}
|
|
1022
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1023
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
1046
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: WechatConnectDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1047
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: WechatConnectDialogComponent, isStandalone: true, selector: "rolatech-wechat-connect-dialog", inputs: { appId: { classPropertyName: "appId", publicName: "appId", isSignal: true, isRequired: false, transformFunction: null }, redirectUri: { classPropertyName: "redirectUri", publicName: "redirectUri", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appId: "appIdChange", redirectUri: "redirectUriChange", state: "stateChange" }, host: { listeners: { "window:message": "onLogin($event)" } }, ngImport: i0, template: "<div class=\"flex flex-col p-3\">\n <div class=\"w-[190px] h-[190px]\">\n @if (loaded) {\n <iframe [src]=\"urlSafe\" class=\"w-full h-full inline\" scrolling=\"no\" frameBorder=\"no\"></iframe>\n }\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"] });
|
|
1024
1048
|
}
|
|
1025
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1049
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: WechatConnectDialogComponent, decorators: [{
|
|
1026
1050
|
type: Component,
|
|
1027
1051
|
args: [{ selector: 'rolatech-wechat-connect-dialog', standalone: true, template: "<div class=\"flex flex-col p-3\">\n <div class=\"w-[190px] h-[190px]\">\n @if (loaded) {\n <iframe [src]=\"urlSafe\" class=\"w-full h-full inline\" scrolling=\"no\" frameBorder=\"no\"></iframe>\n }\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"] }]
|
|
1028
1052
|
}], ctorParameters: () => [], propDecorators: { onLogin: [{
|
|
@@ -1099,10 +1123,10 @@ class MediaUploadDialogComponent {
|
|
|
1099
1123
|
},
|
|
1100
1124
|
});
|
|
1101
1125
|
}
|
|
1102
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1103
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
1126
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MediaUploadDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$3.MediaService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1127
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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-[--rt-raised-background] 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\n (click)=\"removeImage(i)\"\n class=\"delete ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1 rounded-md\"\n >\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"] }] });
|
|
1104
1128
|
}
|
|
1105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1129
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MediaUploadDialogComponent, decorators: [{
|
|
1106
1130
|
type: Component,
|
|
1107
1131
|
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-[--rt-raised-background] 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\n (click)=\"removeImage(i)\"\n class=\"delete ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1 rounded-md\"\n >\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"] }]
|
|
1108
1132
|
}], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
@@ -1113,10 +1137,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
1113
1137
|
class SpacerComponent {
|
|
1114
1138
|
constructor() { }
|
|
1115
1139
|
ngOnInit() { }
|
|
1116
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1117
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
1140
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1141
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", 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"] });
|
|
1118
1142
|
}
|
|
1119
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1143
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SpacerComponent, decorators: [{
|
|
1120
1144
|
type: Component,
|
|
1121
1145
|
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"] }]
|
|
1122
1146
|
}], ctorParameters: () => [] });
|
|
@@ -1133,10 +1157,10 @@ class MediaListComponent {
|
|
|
1133
1157
|
onUpload(event) {
|
|
1134
1158
|
this.upload.emit(event);
|
|
1135
1159
|
}
|
|
1136
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1137
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
1160
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MediaListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1161
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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 <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n </svg>\n </div>\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"] }] });
|
|
1138
1162
|
}
|
|
1139
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1163
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MediaListComponent, decorators: [{
|
|
1140
1164
|
type: Component,
|
|
1141
1165
|
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 <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n </svg>\n </div>\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"] }]
|
|
1142
1166
|
}] });
|
|
@@ -1152,10 +1176,10 @@ class MediaListItemComponent {
|
|
|
1152
1176
|
onDeleteMedia(media) {
|
|
1153
1177
|
this.deleteMedia.emit(media);
|
|
1154
1178
|
}
|
|
1155
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1156
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.
|
|
1179
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MediaListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.5", 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-[--rt-raised-background] 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\n mat-icon-button\n [matMenuTriggerFor]=\"beforeMenu\"\n class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1\"\n >\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"] }] });
|
|
1157
1181
|
}
|
|
1158
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MediaListItemComponent, decorators: [{
|
|
1159
1183
|
type: Component,
|
|
1160
1184
|
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-[--rt-raised-background] 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\n mat-icon-button\n [matMenuTriggerFor]=\"beforeMenu\"\n class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1\"\n >\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"] }]
|
|
1161
1185
|
}] });
|
|
@@ -1178,10 +1202,10 @@ class NotFoundComponent {
|
|
|
1178
1202
|
}
|
|
1179
1203
|
});
|
|
1180
1204
|
}
|
|
1181
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1182
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
1205
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NotFoundComponent, deps: [{ token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
1206
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", 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"] });
|
|
1183
1207
|
}
|
|
1184
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NotFoundComponent, decorators: [{
|
|
1185
1209
|
type: Component,
|
|
1186
1210
|
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"] }]
|
|
1187
1211
|
}], ctorParameters: () => [{ type: i1$4.Router }] });
|
|
@@ -1192,10 +1216,10 @@ class ConfirmationDialogComponent {
|
|
|
1192
1216
|
onNoClick() {
|
|
1193
1217
|
this.dialogRef.close();
|
|
1194
1218
|
}
|
|
1195
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1196
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
1219
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1220
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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"] }] });
|
|
1197
1221
|
}
|
|
1198
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1222
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
1199
1223
|
type: Component,
|
|
1200
1224
|
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" }]
|
|
1201
1225
|
}] });
|
|
@@ -1216,10 +1240,10 @@ class TableComponent {
|
|
|
1216
1240
|
ngOnInit() {
|
|
1217
1241
|
this.displayedColumns = map$1(this.dataSource().columns, 'ref');
|
|
1218
1242
|
}
|
|
1219
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1220
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
1243
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1244
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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 }] });
|
|
1221
1245
|
}
|
|
1222
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1246
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TableComponent, decorators: [{
|
|
1223
1247
|
type: Component,
|
|
1224
1248
|
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" }]
|
|
1225
1249
|
}] });
|
|
@@ -1227,19 +1251,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
1227
1251
|
class PaginatorComponent {
|
|
1228
1252
|
prevClick() { }
|
|
1229
1253
|
nextClick() { }
|
|
1230
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1231
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
1254
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1255
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: PaginatorComponent, isStandalone: true, selector: "rolatech-paginator", ngImport: i0, template: "<div class=\"flex h-14 items-center\">\n <button mat-icon-button></button>\n <button mat-icon-button (click)=\"prevClick()\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n <div></div>\n <button mat-icon-button (click)=\"nextClick()\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1232
1256
|
}
|
|
1233
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1257
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
1234
1258
|
type: Component,
|
|
1235
1259
|
args: [{ selector: 'rolatech-paginator', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex h-14 items-center\">\n <button mat-icon-button></button>\n <button mat-icon-button (click)=\"prevClick()\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n <div></div>\n <button mat-icon-button (click)=\"nextClick()\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n</div>\n" }]
|
|
1236
1260
|
}] });
|
|
1237
1261
|
|
|
1238
1262
|
class MediaPreviewComponent {
|
|
1239
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1240
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
1263
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MediaPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1264
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: MediaPreviewComponent, isStandalone: true, selector: "rolatech-media-preview", ngImport: i0, template: "<p>media-preview works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1241
1265
|
}
|
|
1242
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1266
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MediaPreviewComponent, decorators: [{
|
|
1243
1267
|
type: Component,
|
|
1244
1268
|
args: [{ selector: 'rolatech-media-preview', standalone: true, imports: [CommonModule], template: "<p>media-preview works!</p>\n" }]
|
|
1245
1269
|
}] });
|
|
@@ -1253,10 +1277,10 @@ class ToolbarComponent {
|
|
|
1253
1277
|
link = input('');
|
|
1254
1278
|
large = input(false, { transform: booleanAttribute });
|
|
1255
1279
|
divider = input(false, { transform: booleanAttribute });
|
|
1256
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1257
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
1280
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1281
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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 }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, large: { classPropertyName: "large", publicName: "large", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.rolatech-toolbar": "this.hasClass" } }, ngImport: i0, template: "<div class=\"flex justify-between items-center\" [ngClass]=\"subtitle() ? 'h-16' : 'h-14'\">\n <ng-container>\n @if (back()) {\n <rolatech-icon-button rolatechBackButton class=\"left-button\">arrow_back</rolatech-icon-button>\n }\n @if (link()) {\n <rolatech-icon-button [routerLink]=\"link()\" class=\"left-button\">arrow_back</rolatech-icon-button>\n }\n </ng-container>\n @if (title()) {\n @if (large()) {\n <span class=\"text-2xl font-medium\">{{ title() }}</span>\n } @else {\n <span class=\"text-xl font-medium\">{{ title() }}</span>\n }\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-4 mb-2 leading-none\" [ngClass]=\"back() || link() ? 'ml-[40px]' : ''\">\n <span class=\"text-sm text-gray-500\">{{ subtitle() }}</span>\n </div>\n}\n@if (divider()) {\n <mat-divider></mat-divider>\n}\n", styles: ["rolatech-toolbar{display:block;padding-left:var(--rt-toolbar-padding-left, 16px);padding-right:var(--rt-toolbar-padding-right, 16px);background-color:var(--rt-base-background, #fff);border-radius:var(--rt-toolbar-border-radius, 0px);color:var(--rt-text-primary, #000)}rolatech-toolbar:has(.left-button){--rt-toolbar-padding-left: 8px;--rt-toolbar-padding-right: 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: BackButtonDirective, selector: "[rolatechBackButton]" }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1258
1282
|
}
|
|
1259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1283
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
1260
1284
|
type: Component,
|
|
1261
1285
|
args: [{ selector: 'rolatech-toolbar', standalone: true, imports: [CommonModule, RouterLink, IconButtonComponent, BackButtonDirective, MatDivider], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex justify-between items-center\" [ngClass]=\"subtitle() ? 'h-16' : 'h-14'\">\n <ng-container>\n @if (back()) {\n <rolatech-icon-button rolatechBackButton class=\"left-button\">arrow_back</rolatech-icon-button>\n }\n @if (link()) {\n <rolatech-icon-button [routerLink]=\"link()\" class=\"left-button\">arrow_back</rolatech-icon-button>\n }\n </ng-container>\n @if (title()) {\n @if (large()) {\n <span class=\"text-2xl font-medium\">{{ title() }}</span>\n } @else {\n <span class=\"text-xl font-medium\">{{ title() }}</span>\n }\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-4 mb-2 leading-none\" [ngClass]=\"back() || link() ? 'ml-[40px]' : ''\">\n <span class=\"text-sm text-gray-500\">{{ subtitle() }}</span>\n </div>\n}\n@if (divider()) {\n <mat-divider></mat-divider>\n}\n", styles: ["rolatech-toolbar{display:block;padding-left:var(--rt-toolbar-padding-left, 16px);padding-right:var(--rt-toolbar-padding-right, 16px);background-color:var(--rt-base-background, #fff);border-radius:var(--rt-toolbar-border-radius, 0px);color:var(--rt-text-primary, #000)}rolatech-toolbar:has(.left-button){--rt-toolbar-padding-left: 8px;--rt-toolbar-padding-right: 8px}\n"] }]
|
|
1262
1286
|
}], propDecorators: { hasId: [{
|
|
@@ -1276,10 +1300,10 @@ class ThumbnailComponent {
|
|
|
1276
1300
|
sizea = effect(() => {
|
|
1277
1301
|
this.renderer.setAttribute(this.el.nativeElement, 'size', this.size());
|
|
1278
1302
|
});
|
|
1279
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1280
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
1303
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1304
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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: "@defer (on viewport) {\n <a id=\"thumbnail\" class=\"rt-thumbnail\">\n <rolatech-image [src]=\"src()\"> </rolatech-image>\n </a>\n} @placeholder {\n <div class=\"bg-[--rt-raised-background] w-full h-full rounded-lg\"></div>\n}\n", styles: ["rolatech-thumbnail{display:block;width:100%;position:relative}rolatech-thumbnail:before{display:block;content:\"\";width:100%;padding-top:56.25%;background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .1))}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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [Promise.resolve().then(function () { return image_component; }).then(m => m.ImageComponent)]] });
|
|
1281
1305
|
}
|
|
1282
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.0.
|
|
1306
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.0.5", ngImport: i0, type: ThumbnailComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return image_component; }).then(m => m.ImageComponent)], resolveMetadata: ImageComponent => ({ decorators: [{
|
|
1283
1307
|
type: Component,
|
|
1284
1308
|
args: [{ selector: 'rolatech-thumbnail', standalone: true, imports: [CommonModule, ImageComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@defer (on viewport) {\n <a id=\"thumbnail\" class=\"rt-thumbnail\">\n <rolatech-image [src]=\"src()\"> </rolatech-image>\n </a>\n} @placeholder {\n <div class=\"bg-[--rt-raised-background] w-full h-full rounded-lg\"></div>\n}\n", styles: ["rolatech-thumbnail{display:block;width:100%;position:relative}rolatech-thumbnail:before{display:block;content:\"\";width:100%;padding-top:56.25%;background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .1))}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"] }]
|
|
1285
1309
|
}], ctorParameters: null, propDecorators: { hasClass: [{
|
|
@@ -1301,10 +1325,10 @@ class ImageComponent {
|
|
|
1301
1325
|
image.style.visibility = 'visible';
|
|
1302
1326
|
};
|
|
1303
1327
|
}
|
|
1304
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1305
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.
|
|
1328
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1329
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.5", 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-[--rt-base-background]\" [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 });
|
|
1306
1330
|
}
|
|
1307
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1331
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ImageComponent, decorators: [{
|
|
1308
1332
|
type: Component,
|
|
1309
1333
|
args: [{ selector: 'rolatech-image', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<img #img class=\"rolatech-image bg-[--rt-base-background]\" [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"] }]
|
|
1310
1334
|
}] });
|
|
@@ -1319,10 +1343,10 @@ class TabComponent {
|
|
|
1319
1343
|
hasClass = true;
|
|
1320
1344
|
label = input.required();
|
|
1321
1345
|
item = viewChild('content');
|
|
1322
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1323
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.
|
|
1346
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1347
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.5", 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-left:var(--rt-tab-padding-left, 12px);padding-right:var(--rt-tab-padding-right, 12px);overflow:hidden;cursor:pointer;vertical-align:middle;font-family:Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}rolatech-tab:hover{background-color:var(--rt-tab-hover-background-color, rgb(243, 244, 246))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1324
1348
|
}
|
|
1325
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TabComponent, decorators: [{
|
|
1326
1350
|
type: Component,
|
|
1327
1351
|
args: [{ selector: 'rolatech-tab', standalone: true, imports: [CommonModule, RouterLink], 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-left:var(--rt-tab-padding-left, 12px);padding-right:var(--rt-tab-padding-right, 12px);overflow:hidden;cursor:pointer;vertical-align:middle;font-family:Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}rolatech-tab:hover{background-color:var(--rt-tab-hover-background-color, rgb(243, 244, 246))}\n"] }]
|
|
1328
1352
|
}], propDecorators: { hasId: [{
|
|
@@ -1337,11 +1361,12 @@ class TabsComponent {
|
|
|
1337
1361
|
hasClass = true;
|
|
1338
1362
|
renderer = inject(Renderer2);
|
|
1339
1363
|
tabs = contentChildren(TabComponent, { read: ElementRef });
|
|
1340
|
-
selectionBar = viewChild('selectionBar', { read: ElementRef });
|
|
1364
|
+
selectionBar = viewChild.required('selectionBar', { read: ElementRef });
|
|
1341
1365
|
select = model(0);
|
|
1342
1366
|
loading = input(false);
|
|
1343
1367
|
preSelect = 0;
|
|
1344
1368
|
clientWidths = [];
|
|
1369
|
+
_isServer = !inject(Platform).isBrowser;
|
|
1345
1370
|
ngOnInit() { }
|
|
1346
1371
|
ngAfterViewInit() {
|
|
1347
1372
|
this.init();
|
|
@@ -1349,8 +1374,9 @@ class TabsComponent {
|
|
|
1349
1374
|
init() {
|
|
1350
1375
|
const gap = 24; // 24 = 2 * margin-left
|
|
1351
1376
|
this.tabs()[this.select()].nativeElement.setAttribute('style-target', 'host');
|
|
1352
|
-
const selectionBarElement = this.selectionBar()
|
|
1377
|
+
const selectionBarElement = this.selectionBar().nativeElement;
|
|
1353
1378
|
selectionBarElement.setAttribute('style-target', 'selection-bar');
|
|
1379
|
+
// selectionBarElement.setAttribute('transition-target', 'selection-bar-transition');
|
|
1354
1380
|
setTimeout(() => {
|
|
1355
1381
|
selectionBarElement.setAttribute('transition-target', 'selection-bar-transition');
|
|
1356
1382
|
}, 10);
|
|
@@ -1376,12 +1402,12 @@ class TabsComponent {
|
|
|
1376
1402
|
}
|
|
1377
1403
|
return offset;
|
|
1378
1404
|
}
|
|
1379
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1380
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
1405
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1406
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: TabsComponent, isStandalone: true, selector: "rolatech-tabs", inputs: { select: { classPropertyName: "select", publicName: "select", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", 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></ng-content> -->\n <ng-content select=\"rolatech-tab\"></ng-content>\n }\n </div>\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;padding-left:var(--rt-tabs-padding-left, 0px);padding-right:var(--rt-tabs-padding-right, 0px)}.selection-bar{position:absolute;height:0;bottom:0;left:0;right:0;border-bottom:2px solid var(--rt-tabs-selection-bar-color, rgb(234, 88, 12));transform:scale(0);transform-origin:left center;transition:transform;z-index:100}rolatech-tab[style-target=host]{color:var(--rt-tab-color, rgb(234, 88, 12))}.selection-bar[transition-target=selection-bar-transition]{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(--rt-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 });
|
|
1381
1407
|
}
|
|
1382
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1408
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TabsComponent, decorators: [{
|
|
1383
1409
|
type: Component,
|
|
1384
|
-
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></ng-content
|
|
1410
|
+
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></ng-content> -->\n <ng-content select=\"rolatech-tab\"></ng-content>\n }\n </div>\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;padding-left:var(--rt-tabs-padding-left, 0px);padding-right:var(--rt-tabs-padding-right, 0px)}.selection-bar{position:absolute;height:0;bottom:0;left:0;right:0;border-bottom:2px solid var(--rt-tabs-selection-bar-color, rgb(234, 88, 12));transform:scale(0);transform-origin:left center;transition:transform;z-index:100}rolatech-tab[style-target=host]{color:var(--rt-tab-color, rgb(234, 88, 12))}.selection-bar[transition-target=selection-bar-transition]{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(--rt-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"] }]
|
|
1385
1411
|
}], propDecorators: { hasClass: [{
|
|
1386
1412
|
type: HostBinding,
|
|
1387
1413
|
args: ['class.rolatech-tabs']
|
|
@@ -1390,10 +1416,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
1390
1416
|
class ListComponent {
|
|
1391
1417
|
id = 'rolatech-list';
|
|
1392
1418
|
hasClass = true;
|
|
1393
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1394
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
1419
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1420
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ListComponent, isStandalone: true, selector: "rolatech-list", host: { properties: { "id": "this.id", "class.rolatech-list": "this.hasClass" } }, ngImport: i0, template: "<div class=\"flex flex-col\">\n <ng-content></ng-content>\n</div>\n", styles: ["rolatech-list{padding-left:var(--rt-list-padding-left, 0px);padding-right:var(--rt-list-padding-right, 0px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1395
1421
|
}
|
|
1396
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1422
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ListComponent, decorators: [{
|
|
1397
1423
|
type: Component,
|
|
1398
1424
|
args: [{ selector: 'rolatech-list', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-col\">\n <ng-content></ng-content>\n</div>\n", styles: ["rolatech-list{padding-left:var(--rt-list-padding-left, 0px);padding-right:var(--rt-list-padding-right, 0px)}\n"] }]
|
|
1399
1425
|
}], propDecorators: { id: [{
|
|
@@ -1405,10 +1431,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
1405
1431
|
}] } });
|
|
1406
1432
|
|
|
1407
1433
|
class ContentComponent {
|
|
1408
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1409
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
1434
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1435
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ContentComponent, isStandalone: true, selector: "rolatech-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["rolatech-content{padding-left:var(--rt-content-padding-left, 0px);padding-right:var(--rt-content-padding-right, 0px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1410
1436
|
}
|
|
1411
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1437
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ContentComponent, decorators: [{
|
|
1412
1438
|
type: Component,
|
|
1413
1439
|
args: [{ selector: 'rolatech-content', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: ["rolatech-content{padding-left:var(--rt-content-padding-left, 0px);padding-right:var(--rt-content-padding-right, 0px)}\n"] }]
|
|
1414
1440
|
}] });
|
|
@@ -1445,20 +1471,26 @@ class ChipBarComponent {
|
|
|
1445
1471
|
resizeObserver;
|
|
1446
1472
|
chips = viewChild('chips', { read: ElementRef });
|
|
1447
1473
|
scroller = viewChild.required('scroller', { read: ElementRef });
|
|
1448
|
-
constructor(iconRegistry, sanitizer) {
|
|
1449
|
-
// Note that we provide the icon here as a string literal here due to a limitation in
|
|
1450
|
-
// Stackblitz. If you want to provide the icon from a URL, you can use:
|
|
1451
|
-
// `iconRegistry.addSvgIcon('thumbs-up', sanitizer.bypassSecurityTrustResourceUrl('icon.svg'));`
|
|
1452
|
-
iconRegistry.addSvgIconLiteral('chevron_left', sanitizer.bypassSecurityTrustHtml(CHEVRON_LEFT));
|
|
1453
|
-
iconRegistry.addSvgIconLiteral('chevron_right', sanitizer.bypassSecurityTrustHtml(CHEVRON_RIGHT));
|
|
1454
|
-
}
|
|
1455
1474
|
router = input('../courses/categories/');
|
|
1456
1475
|
items = input([]);
|
|
1457
1476
|
fluid = input(false, { transform: booleanAttribute });
|
|
1477
|
+
fixed = input(false, { transform: booleanAttribute });
|
|
1458
1478
|
platformId = inject(PLATFORM_ID);
|
|
1459
1479
|
clientWidth = 0;
|
|
1460
1480
|
scrollWidth = 0;
|
|
1461
1481
|
scrollLeft = 0;
|
|
1482
|
+
constructor(iconRegistry, sanitizer) {
|
|
1483
|
+
iconRegistry.addSvgIconLiteral('chevron_left', sanitizer.bypassSecurityTrustHtml(CHEVRON_LEFT));
|
|
1484
|
+
iconRegistry.addSvgIconLiteral('chevron_right', sanitizer.bypassSecurityTrustHtml(CHEVRON_RIGHT));
|
|
1485
|
+
effect(() => {
|
|
1486
|
+
if (this.fixed()) {
|
|
1487
|
+
this.el.nativeElement.setAttribute('fixed', '');
|
|
1488
|
+
}
|
|
1489
|
+
else {
|
|
1490
|
+
this.el.nativeElement.removeAttribute('fixed');
|
|
1491
|
+
}
|
|
1492
|
+
});
|
|
1493
|
+
}
|
|
1462
1494
|
ngAfterViewInit() {
|
|
1463
1495
|
this.clientWidth = this.el.nativeElement.clientWidth;
|
|
1464
1496
|
this.scrollWidth = this.scroller()?.nativeElement.scrollWidth;
|
|
@@ -1479,7 +1511,8 @@ class ChipBarComponent {
|
|
|
1479
1511
|
this.el.nativeElement.style.setProperty('--rt-rich-grid-chips-bar-width', width + 'px');
|
|
1480
1512
|
}
|
|
1481
1513
|
init() {
|
|
1482
|
-
|
|
1514
|
+
// fix: this.scrollWidth 1365.11 ~ 1366, this.scrollWidth - 1
|
|
1515
|
+
if (this.clientWidth + this.scrollLeft > this.scrollWidth - 1) {
|
|
1483
1516
|
this.el.nativeElement.setAttribute('at-end', '');
|
|
1484
1517
|
}
|
|
1485
1518
|
else {
|
|
@@ -1502,12 +1535,12 @@ class ChipBarComponent {
|
|
|
1502
1535
|
rightArrowClick() {
|
|
1503
1536
|
this.scroller().nativeElement.scrollLeft += 320;
|
|
1504
1537
|
}
|
|
1505
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1506
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
1538
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChipBarComponent, deps: [{ token: i2$1.MatIconRegistry }, { token: i2$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
1539
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: ChipBarComponent, isStandalone: true, selector: "rolatech-chip-bar", inputs: { router: { classPropertyName: "router", publicName: "router", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.rolatech-chip-bar": "this.hasClass" } }, viewQueries: [{ propertyName: "chips", first: true, predicate: ["chips"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div id=\"chips-wrapper\" class=\"rolatech-chip-bar\">\n <div id=\"chips-content\" class=\"rolatech-chip-bar\">\n <div id=\"left-arrow\" class=\"rolatech-chip-bar\">\n <div id=\"left-arrow-button\" class=\"rolatech-chip-bar\">\n <button mat-icon-button (click)=\"leftArrowClick()\">\n <mat-icon>chevron_left</mat-icon>\n <!-- <mat-icon svgIcon=\"chevron_left\"></mat-icon> -->\n\n <!-- <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n focusable=\"false\"\n style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n >\n <path d=\"M14.96 18.96 8 12l6.96-6.96.71.71L9.41 12l6.25 6.25-.7.71z\"></path>\n </svg> -->\n </button>\n </div>\n </div>\n <div\n id=\"scroll-container\"\n #scroller\n class=\"rolatech-chip-bar overflow-x-scroll overflow-y-hidden scrollbar-hide\"\n (scroll)=\"onScroll($event)\"\n >\n <div id=\"chips\" #chips class=\"rolatech-chip-bar inline-block\">\n @for (link of items(); track link; let index = $index) {\n <a\n id=\"chip-item\"\n class=\"rolatech-chip-bar h-8 cursor-pointer bg-[--rt-10-percent-layer] rounded-md inline-flex items-center px-3 m-3 ml-0\"\n routerLinkActive=\"chip-bar-active\"\n [routerLink]=\"[router(), link.link]\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n >\n <span class=\"px-3 text-md\">{{ link.name }}</span>\n </a>\n }\n </div>\n </div>\n <div id=\"right-arrow\" class=\"rolatech-chip-bar\">\n <div id=\"right-arrow-button\" class=\"rolatech-chip-bar\">\n <button mat-icon-button (click)=\"rightArrowClick()\">\n <mat-icon>chevron_right</mat-icon>\n <!-- <mat-icon svgIcon=\"chevron_right\"></mat-icon> -->\n\n <!-- <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n focusable=\"false\"\n style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n >\n <path d=\"m9.4 18.4-.7-.7 5.6-5.6-5.7-5.7.7-.7 6.4 6.4-6.3 6.3z\"></path>\n </svg> -->\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}rolatech-chip-bar{--rt-chips-bar-base-height: 56px;display:flex;width:100%;padding-left:var(--rt-chip-bar-padding, 0px);padding-right:var(--rt-chip-bar-padding, 0px);background-color:var(--rt-chip-bar-barckground-color, #fff);color:var(--rt-chip-bar-color, #000);height:var(--rt-chips-bar-base-height)}.chip-bar-active{border-radius:var(--rt-chip-bar-border-radius, 8px);color:var(--rt-chip-bar-active-color, orangered)}@media (max-width: 768px){.chip-bar-active{border-radius:var(--rt-chip-bar-border-radius, 8px);background-color:#000;color:#fff}}#scroll-container.rolatech-chip-bar{scroll-behavior:smooth;position:relative;white-space:nowrap}rolatech-chip-bar[fixed] #chips-wrapper.rolatech-chip-bar{position:fixed;top:var(--rt-rich-grid-chips-bar-top, 56px)}#chips-wrapper.rolatech-chip-bar{position:relative;width:var(--rt-rich-grid-chips-bar-width);background-color:var(--rt-base-background);z-index:2000;display:flex;justify-content:center}rolatech-chip-bar[fluid-width] #chips-content.rolatech-chip-bar{max-width:calc(var(--rt-rich-grid-content-max-width) + 2 * var(--rt-chip-bar-padding));padding-left:var(--rt-chip-bar-padding, 0px);padding-right:var(--rt-chip-bar-padding, 0px)}#chips-content.rolatech-chip-bar{box-sizing:border-box;width:100%;display:flex}#chips.rolatech-chip-bar{transition-duration:.15s;transition-timing-function:cubic-bezier(.05,0,0,1);will-change:transform;white-space:nowrap}#left-arrow.rolatech-chip-bar,#right-arrow.rolatech-chip-bar{position:absolute;height:100%;z-index:2020;display:flex;flex-direction:row;justify-content:center}#left-arrow.rolatech-chip-bar{top:0;left:0}#right-arrow.rolatech-chip-bar{top:0;right:0}#left-arrow-button.rolatech-chip-bar,#right-arrow-button.rolatech-chip-bar{background-color:var(--rt-base-background);display:flex;flex-direction:column;justify-content:center}#right-arrow.rolatech-chip-bar:before{height:100%;width:50px;content:\"\";pointer-events:none}rolatech-chip-bar[at-start] #left-arrow.rolatech-chip-bar{display:none}rolatech-chip-bar[at-end] #right-arrow.rolatech-chip-bar{display:none}#left-arrow.rolatech-chip-bar:after,#right-arrow.rolatech-chip-bar:before{height:100%;width:50px;content:\"\";pointer-events:none}#left-arrow.rolatech-chip-bar:after{background:linear-gradient(to right,var(--rt-base-background) 20%,rgba(255,255,255,0) 80%)}#right-arrow.rolatech-chip-bar:before{background:linear-gradient(to left,var(--rt-base-background) 20%,rgba(255,255,255,0) 80%)}#chip-item.rolatech-chip-bar{margin:12px 12px 12px 0}#chip-item.rolatech-chip-bar:last-of-type{margin-right:0}#chip-item:not([selected]):hover,#chip-item:not([selected]):focus{background-color:var(--rt-20-percent-layer)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1507
1540
|
}
|
|
1508
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1541
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChipBarComponent, decorators: [{
|
|
1509
1542
|
type: Component,
|
|
1510
|
-
args: [{ selector: 'rolatech-chip-bar', standalone: true, imports: [CommonModule, RouterModule, IconButtonComponent, MatButtonModule, MatIconModule], encapsulation: ViewEncapsulation.None, template: "<div id=\"chips-wrapper\" class=\"rolatech-chip-bar\">\n <div id=\"chips-content\" class=\"rolatech-chip-bar\">\n <div id=\"left-arrow\" class=\"rolatech-chip-bar\">\n <div id=\"left-arrow-button\" class=\"rolatech-chip-bar\">\n <button mat-icon-button (click)=\"leftArrowClick()\">\n <mat-icon>chevron_left</mat-icon>\n <!-- <mat-icon svgIcon=\"chevron_left\"></mat-icon> -->\n\n <!-- <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n focusable=\"false\"\n style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n >\n <path d=\"M14.96 18.96 8 12l6.96-6.96.71.71L9.41 12l6.25 6.25-.7.71z\"></path>\n </svg> -->\n </button>\n </div>\n </div>\n <div\n id=\"scroll-container\"\n #scroller\n class=\"rolatech-chip-bar overflow-x-scroll overflow-y-hidden scrollbar-hide\"\n (scroll)=\"onScroll($event)\"\n >\n <div id=\"chips\" #chips class=\"rolatech-chip-bar inline-block\">\n @for (link of items(); track link; let index = $index) {\n <a\n id=\"chip-item\"\n class=\"rolatech-chip-bar h-8 cursor-pointer bg-[--rt-10-percent-layer] rounded-md inline-flex items-center px-3 m-3 ml-0\"\n routerLinkActive=\"chip-bar-active\"\n [routerLink]=\"[router(), link.link]\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n >\n <span class=\"px-3 text-md\">{{ link.name }}</span>\n </a>\n }\n </div>\n </div>\n <div id=\"right-arrow\" class=\"rolatech-chip-bar\">\n <div id=\"right-arrow-button\" class=\"rolatech-chip-bar\">\n <button mat-icon-button (click)=\"rightArrowClick()\">\n <mat-icon>chevron_right</mat-icon>\n <!-- <mat-icon svgIcon=\"chevron_right\"></mat-icon> -->\n\n <!-- <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n focusable=\"false\"\n style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n >\n <path d=\"m9.4 18.4-.7-.7 5.6-5.6-5.7-5.7.7-.7 6.4 6.4-6.3 6.3z\"></path>\n </svg> -->\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}rolatech-chip-bar{--rt-chips-bar-base-height: 56px;display:flex;width:100%;padding-left:var(--rt-chip-bar-padding
|
|
1543
|
+
args: [{ selector: 'rolatech-chip-bar', standalone: true, imports: [CommonModule, RouterModule, IconButtonComponent, MatButtonModule, MatIconModule], encapsulation: ViewEncapsulation.None, template: "<div id=\"chips-wrapper\" class=\"rolatech-chip-bar\">\n <div id=\"chips-content\" class=\"rolatech-chip-bar\">\n <div id=\"left-arrow\" class=\"rolatech-chip-bar\">\n <div id=\"left-arrow-button\" class=\"rolatech-chip-bar\">\n <button mat-icon-button (click)=\"leftArrowClick()\">\n <mat-icon>chevron_left</mat-icon>\n <!-- <mat-icon svgIcon=\"chevron_left\"></mat-icon> -->\n\n <!-- <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n focusable=\"false\"\n style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n >\n <path d=\"M14.96 18.96 8 12l6.96-6.96.71.71L9.41 12l6.25 6.25-.7.71z\"></path>\n </svg> -->\n </button>\n </div>\n </div>\n <div\n id=\"scroll-container\"\n #scroller\n class=\"rolatech-chip-bar overflow-x-scroll overflow-y-hidden scrollbar-hide\"\n (scroll)=\"onScroll($event)\"\n >\n <div id=\"chips\" #chips class=\"rolatech-chip-bar inline-block\">\n @for (link of items(); track link; let index = $index) {\n <a\n id=\"chip-item\"\n class=\"rolatech-chip-bar h-8 cursor-pointer bg-[--rt-10-percent-layer] rounded-md inline-flex items-center px-3 m-3 ml-0\"\n routerLinkActive=\"chip-bar-active\"\n [routerLink]=\"[router(), link.link]\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n >\n <span class=\"px-3 text-md\">{{ link.name }}</span>\n </a>\n }\n </div>\n </div>\n <div id=\"right-arrow\" class=\"rolatech-chip-bar\">\n <div id=\"right-arrow-button\" class=\"rolatech-chip-bar\">\n <button mat-icon-button (click)=\"rightArrowClick()\">\n <mat-icon>chevron_right</mat-icon>\n <!-- <mat-icon svgIcon=\"chevron_right\"></mat-icon> -->\n\n <!-- <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n focusable=\"false\"\n style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n >\n <path d=\"m9.4 18.4-.7-.7 5.6-5.6-5.7-5.7.7-.7 6.4 6.4-6.3 6.3z\"></path>\n </svg> -->\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}rolatech-chip-bar{--rt-chips-bar-base-height: 56px;display:flex;width:100%;padding-left:var(--rt-chip-bar-padding, 0px);padding-right:var(--rt-chip-bar-padding, 0px);background-color:var(--rt-chip-bar-barckground-color, #fff);color:var(--rt-chip-bar-color, #000);height:var(--rt-chips-bar-base-height)}.chip-bar-active{border-radius:var(--rt-chip-bar-border-radius, 8px);color:var(--rt-chip-bar-active-color, orangered)}@media (max-width: 768px){.chip-bar-active{border-radius:var(--rt-chip-bar-border-radius, 8px);background-color:#000;color:#fff}}#scroll-container.rolatech-chip-bar{scroll-behavior:smooth;position:relative;white-space:nowrap}rolatech-chip-bar[fixed] #chips-wrapper.rolatech-chip-bar{position:fixed;top:var(--rt-rich-grid-chips-bar-top, 56px)}#chips-wrapper.rolatech-chip-bar{position:relative;width:var(--rt-rich-grid-chips-bar-width);background-color:var(--rt-base-background);z-index:2000;display:flex;justify-content:center}rolatech-chip-bar[fluid-width] #chips-content.rolatech-chip-bar{max-width:calc(var(--rt-rich-grid-content-max-width) + 2 * var(--rt-chip-bar-padding));padding-left:var(--rt-chip-bar-padding, 0px);padding-right:var(--rt-chip-bar-padding, 0px)}#chips-content.rolatech-chip-bar{box-sizing:border-box;width:100%;display:flex}#chips.rolatech-chip-bar{transition-duration:.15s;transition-timing-function:cubic-bezier(.05,0,0,1);will-change:transform;white-space:nowrap}#left-arrow.rolatech-chip-bar,#right-arrow.rolatech-chip-bar{position:absolute;height:100%;z-index:2020;display:flex;flex-direction:row;justify-content:center}#left-arrow.rolatech-chip-bar{top:0;left:0}#right-arrow.rolatech-chip-bar{top:0;right:0}#left-arrow-button.rolatech-chip-bar,#right-arrow-button.rolatech-chip-bar{background-color:var(--rt-base-background);display:flex;flex-direction:column;justify-content:center}#right-arrow.rolatech-chip-bar:before{height:100%;width:50px;content:\"\";pointer-events:none}rolatech-chip-bar[at-start] #left-arrow.rolatech-chip-bar{display:none}rolatech-chip-bar[at-end] #right-arrow.rolatech-chip-bar{display:none}#left-arrow.rolatech-chip-bar:after,#right-arrow.rolatech-chip-bar:before{height:100%;width:50px;content:\"\";pointer-events:none}#left-arrow.rolatech-chip-bar:after{background:linear-gradient(to right,var(--rt-base-background) 20%,rgba(255,255,255,0) 80%)}#right-arrow.rolatech-chip-bar:before{background:linear-gradient(to left,var(--rt-base-background) 20%,rgba(255,255,255,0) 80%)}#chip-item.rolatech-chip-bar{margin:12px 12px 12px 0}#chip-item.rolatech-chip-bar:last-of-type{margin-right:0}#chip-item:not([selected]):hover,#chip-item:not([selected]):focus{background-color:var(--rt-20-percent-layer)}\n"] }]
|
|
1511
1544
|
}], ctorParameters: () => [{ type: i2$1.MatIconRegistry }, { type: i2$4.DomSanitizer }], propDecorators: { hasId: [{
|
|
1512
1545
|
type: HostBinding,
|
|
1513
1546
|
args: ['id']
|
|
@@ -1525,10 +1558,10 @@ class AvatarComponent {
|
|
|
1525
1558
|
sizea = effect(() => {
|
|
1526
1559
|
this.renderer.setAttribute(this.el.nativeElement, 'size', this.size());
|
|
1527
1560
|
});
|
|
1528
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1529
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
1561
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1562
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: AvatarComponent, isStandalone: true, selector: "rolatech-avatar", 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: "@defer (on viewport()) {\n <a id=\"avatar\" class=\"rt-avatar\">\n <rolatech-image [src]=\"src()\"> </rolatech-image>\n </a>\n} @placeholder {\n <div class=\"bg-[--rt-10-percent-layer] w-full h-full rounded-lg\"></div>\n}\n", styles: ["rolatech-avatar{display:block;width:100%;position:relative}rolatech-avatar:before{display:block;content:\"\";width:100%;padding-top:100%;background-color:var(--rt-10-percent-layer, #f1f1f1)}rolatech-avatar #avatar.rt-avatar{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block}rolatech-avatar #avatar.rt-avatar{position:absolute;inset:0}rolatech-avatar a.rt-avatar,rolatech-avatar:before{border-radius:0}rolatech-avatar[size=small] a.rt-avatar,rolatech-avatar[size=small]:before{border-radius:4px}rolatech-avatar[size=medium] a.rt-avatar,rolatech-avatar[size=medium]:before{border-radius:8px}rolatech-avatar[size=large] a.rt-avatar,rolatech-avatar[size=large]:before{border-radius:12px}rolatech-avatar[size=full] a.rt-avatar,rolatech-avatar[size=full]:before{border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [Promise.resolve().then(function () { return image_component; }).then(m => m.ImageComponent)]] });
|
|
1530
1563
|
}
|
|
1531
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.0.
|
|
1564
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.0.5", ngImport: i0, type: AvatarComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return image_component; }).then(m => m.ImageComponent)], resolveMetadata: ImageComponent => ({ decorators: [{
|
|
1532
1565
|
type: Component,
|
|
1533
1566
|
args: [{ selector: 'rolatech-avatar', standalone: true, imports: [CommonModule, ImageComponent], encapsulation: ViewEncapsulation.None, template: "@defer (on viewport()) {\n <a id=\"avatar\" class=\"rt-avatar\">\n <rolatech-image [src]=\"src()\"> </rolatech-image>\n </a>\n} @placeholder {\n <div class=\"bg-[--rt-10-percent-layer] w-full h-full rounded-lg\"></div>\n}\n", styles: ["rolatech-avatar{display:block;width:100%;position:relative}rolatech-avatar:before{display:block;content:\"\";width:100%;padding-top:100%;background-color:var(--rt-10-percent-layer, #f1f1f1)}rolatech-avatar #avatar.rt-avatar{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block}rolatech-avatar #avatar.rt-avatar{position:absolute;inset:0}rolatech-avatar a.rt-avatar,rolatech-avatar:before{border-radius:0}rolatech-avatar[size=small] a.rt-avatar,rolatech-avatar[size=small]:before{border-radius:4px}rolatech-avatar[size=medium] a.rt-avatar,rolatech-avatar[size=medium]:before{border-radius:8px}rolatech-avatar[size=large] a.rt-avatar,rolatech-avatar[size=large]:before{border-radius:12px}rolatech-avatar[size=full] a.rt-avatar,rolatech-avatar[size=full]:before{border-radius:50%}\n"] }]
|
|
1534
1567
|
}], ctorParameters: null, propDecorators: { hasClass: [{
|
|
@@ -1538,10 +1571,10 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.0.3", ng
|
|
|
1538
1571
|
|
|
1539
1572
|
class ImagePlaceholderComponent {
|
|
1540
1573
|
ngOnInit() { }
|
|
1541
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1542
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
1574
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ImagePlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1575
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ImagePlaceholderComponent, isStandalone: true, selector: "rolatech-image-placeholder", ngImport: i0, template: "<div class=\"w-full h-full flex justify-center items-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n <path\n d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\"\n />\n </svg>\n</div>\n", styles: ["rolatech-image-placeholder{display:block;aspect-ratio:16/9;background-color:var(--rt-10-percent-layer);border-radius:var(--rt-rounded-base, 8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1543
1576
|
}
|
|
1544
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1577
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ImagePlaceholderComponent, decorators: [{
|
|
1545
1578
|
type: Component,
|
|
1546
1579
|
args: [{ selector: 'rolatech-image-placeholder', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"w-full h-full flex justify-center items-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n <path\n d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\"\n />\n </svg>\n</div>\n", styles: ["rolatech-image-placeholder{display:block;aspect-ratio:16/9;background-color:var(--rt-10-percent-layer);border-radius:var(--rt-rounded-base, 8px)}\n"] }]
|
|
1547
1580
|
}] });
|
|
@@ -1576,10 +1609,10 @@ class ImagePreviewDialogComponent {
|
|
|
1576
1609
|
this.prevDisabled = this.selected === 0;
|
|
1577
1610
|
this.nextDisabled = this.selected === this.data.media.length - 1;
|
|
1578
1611
|
}
|
|
1579
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1580
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
1612
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ImagePreviewDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1613
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: ImagePreviewDialogComponent, isStandalone: true, selector: "rolatech-image-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"] }] });
|
|
1581
1614
|
}
|
|
1582
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1615
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ImagePreviewDialogComponent, decorators: [{
|
|
1583
1616
|
type: Component,
|
|
1584
1617
|
args: [{ selector: 'rolatech-image-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" }]
|
|
1585
1618
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -1588,10 +1621,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
1588
1621
|
}] }, { type: i1$1.MatDialogRef }] });
|
|
1589
1622
|
|
|
1590
1623
|
class EmptyComponent {
|
|
1591
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1592
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
1624
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1625
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EmptyComponent, isStandalone: true, selector: "rolatech-empty", ngImport: i0, template: "<div class=\"px-4 py-2 flex items-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n <path\n d=\"M460-300h40v-220h-40v220Zm20-276.92q10.46 0 17.54-7.08 7.08-7.08 7.08-17.54 0-10.46-7.08-17.54-7.08-7.07-17.54-7.07-10.46 0-17.54 7.07-7.08 7.08-7.08 17.54 0 10.46 7.08 17.54 7.08 7.08 17.54 7.08Zm.13 456.92q-74.67 0-140.41-28.34-65.73-28.34-114.36-76.92-48.63-48.58-76.99-114.26Q120-405.19 120-479.87q0-74.67 28.34-140.41 28.34-65.73 76.92-114.36 48.58-48.63 114.26-76.99Q405.19-840 479.87-840q74.67 0 140.41 28.34 65.73 28.34 114.36 76.92 48.63 48.58 76.99 114.26Q840-554.81 840-480.13q0 74.67-28.34 140.41-28.34 65.73-76.92 114.36-48.58 48.63-114.26 76.99Q554.81-120 480.13-120Zm-.13-40q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"\n />\n </svg>\n <span class=\"ml-2\">No Data</span>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1593
1626
|
}
|
|
1594
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1627
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EmptyComponent, decorators: [{
|
|
1595
1628
|
type: Component,
|
|
1596
1629
|
args: [{ selector: 'rolatech-empty', standalone: true, imports: [CommonModule], template: "<div class=\"px-4 py-2 flex items-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n <path\n d=\"M460-300h40v-220h-40v220Zm20-276.92q10.46 0 17.54-7.08 7.08-7.08 7.08-17.54 0-10.46-7.08-17.54-7.08-7.07-17.54-7.07-10.46 0-17.54 7.07-7.08 7.08-7.08 17.54 0 10.46 7.08 17.54 7.08 7.08 17.54 7.08Zm.13 456.92q-74.67 0-140.41-28.34-65.73-28.34-114.36-76.92-48.63-48.58-76.99-114.26Q120-405.19 120-479.87q0-74.67 28.34-140.41 28.34-65.73 76.92-114.36 48.58-48.63 114.26-76.99Q405.19-840 479.87-840q74.67 0 140.41 28.34 65.73 28.34 114.36 76.92 48.63 48.58 76.99 114.26Q840-554.81 840-480.13q0 74.67-28.34 140.41-28.34 65.73-76.92 114.36-48.58 48.63-114.26 76.99Q554.81-120 480.13-120Zm-.13-40q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"\n />\n </svg>\n <span class=\"ml-2\">No Data</span>\n</div>\n" }]
|
|
1597
1630
|
}] });
|
|
@@ -1599,10 +1632,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
1599
1632
|
class InputComponent {
|
|
1600
1633
|
title = model();
|
|
1601
1634
|
placeholder = input('Title');
|
|
1602
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1603
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.
|
|
1635
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1636
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.5", type: InputComponent, isStandalone: true, selector: "rolatech-input", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange" }, ngImport: i0, template: "<div class=\"rt-input-wrapper\">\n <input class=\"rt__input\" [placeholder]=\"placeholder()\" [(ngModel)]=\"title\" />\n</div>\n", styles: ["rolatech-input{width:100%;padding:8px}.rt-input-wrapper{width:100%;z-index:0;padding:12px;background-color:var(--rt-additive-background, #fff);border-radius:var(--rt-input-rounded, 8px);border:1px solid var(--rt-brand-color)}.rt__input{box-shadow:none;background:none;border-radius:0;width:100%;min-width:0;border:none;display:block}.rt__input:focus-visible{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1604
1637
|
}
|
|
1605
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1638
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: InputComponent, decorators: [{
|
|
1606
1639
|
type: Component,
|
|
1607
1640
|
args: [{ selector: 'rolatech-input', standalone: true, imports: [CommonModule, FormsModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"rt-input-wrapper\">\n <input class=\"rt__input\" [placeholder]=\"placeholder()\" [(ngModel)]=\"title\" />\n</div>\n", styles: ["rolatech-input{width:100%;padding:8px}.rt-input-wrapper{width:100%;z-index:0;padding:12px;background-color:var(--rt-additive-background, #fff);border-radius:var(--rt-input-rounded, 8px);border:1px solid var(--rt-brand-color)}.rt__input{box-shadow:none;background:none;border-radius:0;width:100%;min-width:0;border:none;display:block}.rt__input:focus-visible{outline:none}\n"] }]
|
|
1608
1641
|
}] });
|
|
@@ -1615,10 +1648,10 @@ class RichItemComponent {
|
|
|
1615
1648
|
title = input();
|
|
1616
1649
|
subtitle = input();
|
|
1617
1650
|
price = input(0);
|
|
1618
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1619
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.
|
|
1651
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: RichItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1652
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: RichItemComponent, isStandalone: true, selector: "rolatech-rich-item", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-rich-item": "this.hasClass" } }, ngImport: i0, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\"></rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-10-percent-layer] h-full w-full object-cover aspect-video rounded-lg\"></div>\n }\n</div>\n<div id=\"details\" class=\"rolatech-rich-item\">\n <div>\n <div class=\"md:text-xl font-bold break-words line-clamp-1 md:line-clamp-2 whitespace-normal py-1\">\n {{ title() }}\n </div>\n <div class=\"invisible h-0 md:h-auto md:visible break-words line-clamp-1 whitespace-normal\">\n {{ subtitle() }}\n </div>\n <ng-content></ng-content>\n </div>\n @if (price()) {\n <div class=\"md:text-lg font-bold py-1\">\u00A5{{ price() }}</div>\n }\n</div>\n", styles: ["rolatech-rich-item{--rt-rich-view-item-margin: 16px;display:flex;position:relative;flex-direction:column;margin-left:calc(var(--rt-rich-view-item-margin) / 2);margin-right:calc(var(--rt-rich-view-item-margin) / 2);width:calc(100% / var(--rt-rich-view-items-per-row) - var(--rt-rich-view-item-margin) - .01px)}#details.rolatech-rich-item{display:flex;flex-direction:column;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)]] });
|
|
1620
1653
|
}
|
|
1621
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.0.
|
|
1654
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.0.5", ngImport: i0, type: RichItemComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)], resolveMetadata: ThumbnailComponent => ({ decorators: [{
|
|
1622
1655
|
type: Component,
|
|
1623
1656
|
args: [{ selector: 'rolatech-rich-item', standalone: true, imports: [CommonModule, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\"></rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-10-percent-layer] h-full w-full object-cover aspect-video rounded-lg\"></div>\n }\n</div>\n<div id=\"details\" class=\"rolatech-rich-item\">\n <div>\n <div class=\"md:text-xl font-bold break-words line-clamp-1 md:line-clamp-2 whitespace-normal py-1\">\n {{ title() }}\n </div>\n <div class=\"invisible h-0 md:h-auto md:visible break-words line-clamp-1 whitespace-normal\">\n {{ subtitle() }}\n </div>\n <ng-content></ng-content>\n </div>\n @if (price()) {\n <div class=\"md:text-lg font-bold py-1\">\u00A5{{ price() }}</div>\n }\n</div>\n", styles: ["rolatech-rich-item{--rt-rich-view-item-margin: 16px;display:flex;position:relative;flex-direction:column;margin-left:calc(var(--rt-rich-view-item-margin) / 2);margin-right:calc(var(--rt-rich-view-item-margin) / 2);width:calc(100% / var(--rt-rich-view-items-per-row) - var(--rt-rich-view-item-margin) - .01px)}#details.rolatech-rich-item{display:flex;flex-direction:column;justify-content:space-between}\n"] }]
|
|
1624
1657
|
}], ctorParameters: null, propDecorators: { hasClass: [{
|
|
@@ -1679,10 +1712,10 @@ class RichViewComponent {
|
|
|
1679
1712
|
this.el.nativeElement.style.setProperty('--rt-rich-view-items-per-row', 5);
|
|
1680
1713
|
}
|
|
1681
1714
|
}
|
|
1682
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1683
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.
|
|
1715
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: RichViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1716
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.5", type: RichViewComponent, isStandalone: true, selector: "rolatech-rich-view", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-rich-view": "this.hasClass", "class.scrollbar-hide": "this.disableScrollbar" } }, queries: [{ propertyName: "items", predicate: RichItemComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["rolatech-rich-view{display:flex;--rt-rich-view-items-per-row: 1;--rt-rich-view-item-max-width: 500px}rolatech-rich-view[list]{flex-direction:column;flex-wrap:nowrap}rolatech-rich-view[wrap]{flex-wrap:wrap}rolatech-rich-view:not([wrap]){overflow-x:scroll}rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 40%;min-width:var(--rt-rich-view-item-min-width)}@media (min-width: 768px){rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 28%}}rolatech-rich-view[list] rolatech-rich-item{flex-direction:row;padding:12px 0;cursor:pointer}rolatech-rich-view[list] rolatech-rich-item #thumbnail.rolatech-rich-item{width:33%;min-width:33%}rolatech-rich-view[list] rolatech-rich-item #details.rolatech-rich-item{margin-left:12px}rolatech-rich-view[list] rolatech-rich-item:hover{background-color:var(--rt-10-percent-layer)}rolatech-rich-view:not([list]) rolatech-rich-item{margin-bottom:32px}@media (min-width: 600px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 1}}@media (min-width: 768px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 2}}@media (min-width: 1280px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 5}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1684
1717
|
}
|
|
1685
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1718
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: RichViewComponent, decorators: [{
|
|
1686
1719
|
type: Component,
|
|
1687
1720
|
args: [{ selector: 'rolatech-rich-view', standalone: true, imports: [CommonModule, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: ["rolatech-rich-view{display:flex;--rt-rich-view-items-per-row: 1;--rt-rich-view-item-max-width: 500px}rolatech-rich-view[list]{flex-direction:column;flex-wrap:nowrap}rolatech-rich-view[wrap]{flex-wrap:wrap}rolatech-rich-view:not([wrap]){overflow-x:scroll}rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 40%;min-width:var(--rt-rich-view-item-min-width)}@media (min-width: 768px){rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 28%}}rolatech-rich-view[list] rolatech-rich-item{flex-direction:row;padding:12px 0;cursor:pointer}rolatech-rich-view[list] rolatech-rich-item #thumbnail.rolatech-rich-item{width:33%;min-width:33%}rolatech-rich-view[list] rolatech-rich-item #details.rolatech-rich-item{margin-left:12px}rolatech-rich-view[list] rolatech-rich-item:hover{background-color:var(--rt-10-percent-layer)}rolatech-rich-view:not([list]) rolatech-rich-item{margin-bottom:32px}@media (min-width: 600px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 1}}@media (min-width: 768px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 2}}@media (min-width: 1280px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 5}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
|
|
1688
1721
|
}], ctorParameters: () => [], propDecorators: { hasClass: [{
|
|
@@ -1710,10 +1743,10 @@ class EditorComponent {
|
|
|
1710
1743
|
// const quill = new Quill('#editor', options);
|
|
1711
1744
|
}
|
|
1712
1745
|
ngAfterViewInit() {
|
|
1713
|
-
|
|
1746
|
+
this.quill();
|
|
1714
1747
|
}
|
|
1715
1748
|
ngOnInit() {
|
|
1716
|
-
this.quill();
|
|
1749
|
+
// this.quill();
|
|
1717
1750
|
}
|
|
1718
1751
|
get toolbar() {
|
|
1719
1752
|
return [
|
|
@@ -1745,20 +1778,20 @@ class EditorComponent {
|
|
|
1745
1778
|
console.log(`🚀 => AppComponent => quill => this.editor:`, this.editor);
|
|
1746
1779
|
}
|
|
1747
1780
|
}
|
|
1748
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1749
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
1781
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1782
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EditorComponent, isStandalone: true, selector: "rolatech-editor", ngImport: i0, template: "<div id=\"editor\"></div>\n", styles: ["@import\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css\";.ql-snow{position:relative}.ql-snow .ql-toolbar{position:sticky;top:5em}.ql-snow button{width:inherit!important;height:24px!important}.ql-snow .ql-editor{border:4px solid #efefef}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1750
1783
|
}
|
|
1751
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1784
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EditorComponent, decorators: [{
|
|
1752
1785
|
type: Component,
|
|
1753
1786
|
args: [{ selector: 'rolatech-editor', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div id=\"editor\"></div>\n", styles: ["@import\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css\";.ql-snow{position:relative}.ql-snow .ql-toolbar{position:sticky;top:5em}.ql-snow button{width:inherit!important;height:24px!important}.ql-snow .ql-editor{border:4px solid #efefef}\n"] }]
|
|
1754
1787
|
}], ctorParameters: () => [] });
|
|
1755
1788
|
|
|
1756
1789
|
class AccordionComponent {
|
|
1757
1790
|
hasClass = true;
|
|
1758
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1759
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
1791
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1792
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: AccordionComponent, isStandalone: true, selector: "rolatech-accordion", host: { properties: { "class.rolatech-accordion": "this.hasClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1760
1793
|
}
|
|
1761
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1794
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
1762
1795
|
type: Component,
|
|
1763
1796
|
args: [{ selector: 'rolatech-accordion', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
|
|
1764
1797
|
}], propDecorators: { hasClass: [{
|
|
@@ -1783,10 +1816,10 @@ const panelAnimations = {
|
|
|
1783
1816
|
};
|
|
1784
1817
|
|
|
1785
1818
|
class PanelHeaderComponent {
|
|
1786
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1787
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.
|
|
1819
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: PanelHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1820
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: PanelHeaderComponent, isStandalone: true, selector: "rolatech-panel-header", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1788
1821
|
}
|
|
1789
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1822
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: PanelHeaderComponent, decorators: [{
|
|
1790
1823
|
type: Component,
|
|
1791
1824
|
args: [{ selector: 'rolatech-panel-header', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
|
|
1792
1825
|
}] });
|
|
@@ -1826,12 +1859,12 @@ class PanelComponent {
|
|
|
1826
1859
|
toggle() {
|
|
1827
1860
|
this.expanded.set(!this.expanded());
|
|
1828
1861
|
}
|
|
1829
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.
|
|
1830
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.
|
|
1862
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1863
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.5", type: PanelComponent, isStandalone: true, selector: "rolatech-panel", inputs: { border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class.rolatech-panel": "this.hasClass" } }, ngImport: i0, template: "<div id=\"header\" class=\"header rolatech-panel w-full h-11\" (click)=\"toggle(); $event.stopPropagation()\">\n <ng-content select=\"rolatech-panel-header\"></ng-content>\n <div>{{ title() }}</div>\n <rolatech-icon [@indicator]=\"expanded() === true ? 'expanded' : 'collapsed'\">expand_more</rolatech-icon>\n</div>\n<div class=\"content-container rolatech-panel\" [@content]=\"expanded() === true ? 'expanded' : 'collapsed'\">\n <div class=\"content-inner rolatech-panel\">\n <ng-content>No content</ng-content>\n </div>\n</div>\n", styles: ["rolatech-panel{box-sizing:content-box;display:block;overflow:hidden;background:var(--rt-base-background);color:var(--rt-text-primary);--rt-panel-padding: 12px}rolatech-panel:not([border]){margin-bottom:var(--rt-panel-padding)}rolatech-panel .header{padding:var(--rt-panel-padding);display:flex;justify-content:space-between;align-items:center;height:44px;background-color:var(--rt-10-percent-layer);cursor:pointer}rolatech-panel .header:hover{background-color:var(--rt-20-percent-layer)}rolatech-panel .content-container{overflow:visible}rolatech-panel .content-container .content-inner{padding:var(--rt-panel-padding)}rolatech-panel[border]{border-top:1px solid #d1d7dc;border-left:1px solid #d1d7dc;border-right:1px solid #d1d7dc}rolatech-panel[border]:last-child{border-bottom:1px solid #d1d7dc}rolatech-panel[divider]{border-bottom:1px solid #d1d7dc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }], animations: [panelAnimations.indicator, panelAnimations.content], encapsulation: i0.ViewEncapsulation.None });
|
|
1831
1864
|
}
|
|
1832
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.
|
|
1865
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: PanelComponent, decorators: [{
|
|
1833
1866
|
type: Component,
|
|
1834
|
-
args: [{ selector: 'rolatech-panel', standalone: true, imports: [CommonModule, IconComponent, PanelHeaderComponent], encapsulation: ViewEncapsulation.None, animations: [panelAnimations.indicator, panelAnimations.content], template: "<div id=\"header\" class=\"header rolatech-panel w-full h-11\" (click)=\"toggle(); $event.stopPropagation()\">\n <ng-content select=\"rolatech-panel-header\"></ng-content>\n <div>{{ title() }}</div>\n <rolatech-icon [@indicator]=\"expanded() === true ? 'expanded' : 'collapsed'\">expand_more</rolatech-icon>\n</div>\n<div class=\"content-container rolatech-panel\" [@content]=\"expanded() === true ? 'expanded' : 'collapsed'\">\n <div class=\"content-inner rolatech-panel\">\n <ng-content>No content</ng-content>\n </div>\n</div>\n", styles: ["rolatech-panel{box-sizing:content-box;display:block;overflow:hidden;background:var(--rt-base-background);color:var(--rt-text-primary);--rt-panel-padding: 12px
|
|
1867
|
+
args: [{ selector: 'rolatech-panel', standalone: true, imports: [CommonModule, IconComponent, PanelHeaderComponent], encapsulation: ViewEncapsulation.None, animations: [panelAnimations.indicator, panelAnimations.content], template: "<div id=\"header\" class=\"header rolatech-panel w-full h-11\" (click)=\"toggle(); $event.stopPropagation()\">\n <ng-content select=\"rolatech-panel-header\"></ng-content>\n <div>{{ title() }}</div>\n <rolatech-icon [@indicator]=\"expanded() === true ? 'expanded' : 'collapsed'\">expand_more</rolatech-icon>\n</div>\n<div class=\"content-container rolatech-panel\" [@content]=\"expanded() === true ? 'expanded' : 'collapsed'\">\n <div class=\"content-inner rolatech-panel\">\n <ng-content>No content</ng-content>\n </div>\n</div>\n", styles: ["rolatech-panel{box-sizing:content-box;display:block;overflow:hidden;background:var(--rt-base-background);color:var(--rt-text-primary);--rt-panel-padding: 12px}rolatech-panel:not([border]){margin-bottom:var(--rt-panel-padding)}rolatech-panel .header{padding:var(--rt-panel-padding);display:flex;justify-content:space-between;align-items:center;height:44px;background-color:var(--rt-10-percent-layer);cursor:pointer}rolatech-panel .header:hover{background-color:var(--rt-20-percent-layer)}rolatech-panel .content-container{overflow:visible}rolatech-panel .content-container .content-inner{padding:var(--rt-panel-padding)}rolatech-panel[border]{border-top:1px solid #d1d7dc;border-left:1px solid #d1d7dc;border-right:1px solid #d1d7dc}rolatech-panel[border]:last-child{border-bottom:1px solid #d1d7dc}rolatech-panel[divider]{border-bottom:1px solid #d1d7dc}\n"] }]
|
|
1835
1868
|
}], ctorParameters: () => [], propDecorators: { hasClass: [{
|
|
1836
1869
|
type: HostBinding,
|
|
1837
1870
|
args: ['class.rolatech-panel']
|