@rolatech/angular-components 17.2.16 → 17.2.17
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/index.mjs +3 -1
- package/esm2022/lib/app-drawer/app-drawer.component.mjs +21 -10
- package/esm2022/lib/app-drawer/expansion-animations.mjs +33 -0
- package/esm2022/lib/app-footer/app-footer.component.mjs +6 -10
- package/esm2022/lib/app-layout/app-layout.component.mjs +1 -1
- package/esm2022/lib/loading-spinner/loading-spinner.component.mjs +6 -8
- package/esm2022/lib/media-list/media-list.component.mjs +10 -20
- package/esm2022/lib/media-list-item/media-list-item.component.mjs +9 -18
- package/esm2022/lib/media-upload/media-upload.component.mjs +11 -23
- package/esm2022/lib/menu-user/menu-user.component.mjs +7 -11
- package/esm2022/lib/paginator/paginator.component.mjs +22 -0
- package/esm2022/lib/storage-bucket-create/storage-bucket-create.component.mjs +7 -11
- package/esm2022/lib/storage-file-upload/storage-file-upload.component.mjs +6 -10
- package/esm2022/lib/storage-folder-create/storage-folder-create.component.mjs +8 -14
- package/esm2022/lib/table/table.component.mjs +37 -0
- package/esm2022/lib/topbar/topbar.component.mjs +3 -6
- package/esm2022/lib/topbar-avatar-menu/topbar-avatar-menu.component.mjs +7 -11
- package/fesm2022/rolatech-angular-components.mjs +161 -132
- package/fesm2022/rolatech-angular-components.mjs.map +1 -1
- package/index.d.ts +2 -0
- package/lib/app-drawer/app-drawer.component.d.ts +5 -2
- package/lib/app-drawer/expansion-animations.d.ts +8 -0
- package/lib/app-footer/app-footer.component.d.ts +3 -3
- package/lib/loading-spinner/loading-spinner.component.d.ts +2 -2
- package/lib/media-list/media-list.component.d.ts +6 -7
- package/lib/media-list-item/media-list-item.component.d.ts +5 -6
- package/lib/media-upload/media-upload.component.d.ts +7 -8
- package/lib/menu-user/menu-user.component.d.ts +3 -3
- package/lib/paginator/paginator.component.d.ts +12 -0
- package/lib/storage-bucket-create/storage-bucket-create.component.d.ts +4 -4
- package/lib/storage-file-upload/storage-file-upload.component.d.ts +4 -4
- package/lib/storage-folder-create/storage-folder-create.component.d.ts +5 -5
- package/lib/table/table.component.d.ts +18 -0
- package/lib/topbar/topbar.component.d.ts +2 -3
- package/lib/topbar-avatar-menu/topbar-avatar-menu.component.d.ts +3 -3
- package/package.json +3 -3
- package/themes/_default.scss +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ViewEncapsulation, HostBinding, InjectionToken, makeEnvironmentProviders,
|
|
2
|
+
import { Component, ViewEncapsulation, HostBinding, InjectionToken, makeEnvironmentProviders, inject, ElementRef, Renderer2, PLATFORM_ID, input, viewChild, ChangeDetectionStrategy, contentChild, Inject, NgModule, ChangeDetectorRef, output, HostListener } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, isPlatformBrowser, NgClass } from '@angular/common';
|
|
5
5
|
import * as i2$1 from '@angular/material/icon';
|
|
@@ -7,11 +7,13 @@ import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
|
7
7
|
import { MatSidenavModule, MatSidenav } from '@angular/material/sidenav';
|
|
8
8
|
import { MatNavList, MatListModule } from '@angular/material/list';
|
|
9
9
|
import * as i1$4 from '@angular/router';
|
|
10
|
-
import { RouterLink, RouterLinkActive, RouterOutlet, RouterEvent, NavigationEnd, ActivatedRoute, Router } from '@angular/router';
|
|
10
|
+
import { RouterLink, RouterLinkActive, RouterOutlet, RouterEvent, NavigationEnd, ActivatedRoute, Router, RouterModule } from '@angular/router';
|
|
11
11
|
import * as i4 from '@angular/material/button';
|
|
12
12
|
import { MatButtonModule } from '@angular/material/button';
|
|
13
13
|
import { BreakpointObserver, Breakpoints, LayoutModule } from '@angular/cdk/layout';
|
|
14
14
|
import { map, shareReplay, filter } from 'rxjs';
|
|
15
|
+
import { MatExpansionPanel, MatExpansionPanelHeader, MatExpansionModule } from '@angular/material/expansion';
|
|
16
|
+
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
15
17
|
import { APP_CONFIG, AngularCommonModule } from '@rolatech/angular-common';
|
|
16
18
|
import * as i2 from '@angular/material/menu';
|
|
17
19
|
import { MatMenuModule } from '@angular/material/menu';
|
|
@@ -37,12 +39,12 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
|
37
39
|
import { MatChipsModule } from '@angular/material/chips';
|
|
38
40
|
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
|
|
39
41
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
40
|
-
import { MatExpansionModule } from '@angular/material/expansion';
|
|
41
42
|
import * as i1$2 from '@angular/material/form-field';
|
|
42
43
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
43
44
|
import { MatGridListModule } from '@angular/material/grid-list';
|
|
44
45
|
import * as i2$2 from '@angular/material/input';
|
|
45
46
|
import { MatInputModule } from '@angular/material/input';
|
|
47
|
+
import * as i1$6 from '@angular/material/paginator';
|
|
46
48
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
47
49
|
import * as i1$3 from '@angular/material/progress-bar';
|
|
48
50
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
@@ -55,6 +57,7 @@ import { MatSliderModule } from '@angular/material/slider';
|
|
|
55
57
|
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
|
56
58
|
import { MatSortModule } from '@angular/material/sort';
|
|
57
59
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
60
|
+
import * as i1$5 from '@angular/material/table';
|
|
58
61
|
import { MatTableModule } from '@angular/material/table';
|
|
59
62
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
60
63
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
@@ -65,6 +68,7 @@ import { LoadingService, DialogService, SnackBarService } from '@rolatech/angula
|
|
|
65
68
|
import * as i3$1 from '@angular/forms';
|
|
66
69
|
import { FormsModule } from '@angular/forms';
|
|
67
70
|
import { DomSanitizer, Title } from '@angular/platform-browser';
|
|
71
|
+
import { map as map$1 } from 'lodash';
|
|
68
72
|
|
|
69
73
|
class IconComponent {
|
|
70
74
|
hasClass = true;
|
|
@@ -138,7 +142,6 @@ class TopbarComponent {
|
|
|
138
142
|
hostId = 'rolatech-topbar';
|
|
139
143
|
hasClass = true;
|
|
140
144
|
persistent;
|
|
141
|
-
toggle = new EventEmitter();
|
|
142
145
|
el = inject(ElementRef);
|
|
143
146
|
renderer = inject(Renderer2);
|
|
144
147
|
platformId = inject(PLATFORM_ID);
|
|
@@ -176,7 +179,7 @@ class TopbarComponent {
|
|
|
176
179
|
this.appDrawer.toggle();
|
|
177
180
|
}
|
|
178
181
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
179
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: TopbarComponent, isStandalone: true, selector: "rolatech-topbar",
|
|
182
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: TopbarComponent, isStandalone: true, selector: "rolatech-topbar", host: { properties: { "id": "this.hostId", "class.rolatech-topbar": "this.hasClass" } }, ngImport: i0, template: "<div class=\"h-14 px-2 sm:px-4 flex items-center\">\n @if (persistent || (isHandset$ | async)) {\n <rolatech-icon-button id=\"topbar-menu-button\" (click)=\"onToggle()\">menu</rolatech-icon-button>\n }\n <div id=\"title\" class=\"cursor-pointer\" routerLink=\"/\">\n <div class=\"text-black text-lg sm:text-xl font-bold\">\n <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n <span>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div class=\"flex-1\"></div>\n <ng-content></ng-content>\n</div>\n", styles: ["rolatech-topbar{position:fixed;top:0;width:100%;z-index:900;transform:translateY(0);transition:transform .3s ease;background:var(--rolatech-topbar-background-color, #fff);color:var(--rolatech-topbar-color, #000)}rolatech-topbar:not(:has(#topbar-menu-button)) #title{padding-left:16px}rolatech-app-layout rolatech-app-drawer[persistent][opened]~rolatech-topbar{margin-left:256px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconButtonComponent, selector: "rolatech-icon-button" }, { kind: "ngmodule", type: MatButtonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
180
183
|
}
|
|
181
184
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TopbarComponent, decorators: [{
|
|
182
185
|
type: Component,
|
|
@@ -187,13 +190,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
187
190
|
}], hasClass: [{
|
|
188
191
|
type: HostBinding,
|
|
189
192
|
args: ['class.rolatech-topbar']
|
|
190
|
-
}], toggle: [{
|
|
191
|
-
type: Output
|
|
192
193
|
}] } });
|
|
193
194
|
|
|
195
|
+
/** Time and timing curve for expansion panel animations. */
|
|
196
|
+
// Note: Keep this in sync with the Sass variable for the panel header animation.
|
|
197
|
+
const EXPANSION_PANEL_ANIMATION_TIMING$1 = '225ms cubic-bezier(0.4,0.0,0.2,1)';
|
|
198
|
+
const matExpansionAnimations = {
|
|
199
|
+
/** Animation that rotates the indicator arrow. */
|
|
200
|
+
indicatorRotate: trigger('indicatorRotate', [
|
|
201
|
+
state('collapsed, void', style({ transform: 'rotate(0deg)' })),
|
|
202
|
+
state('expanded', style({ transform: 'rotate(180deg)' })),
|
|
203
|
+
transition('expanded <=> collapsed, void => collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING$1)),
|
|
204
|
+
]),
|
|
205
|
+
/** Animation that expands and collapses the panel content. */
|
|
206
|
+
bodyExpansion: trigger('bodyExpansion', [
|
|
207
|
+
state('collapsed, void', style({ height: '0px', visibility: 'hidden' })),
|
|
208
|
+
// Clear the `visibility` while open, otherwise the content will be visible when placed in
|
|
209
|
+
// a parent that's `visibility: hidden`, because `visibility` doesn't apply to descendants
|
|
210
|
+
// that have a `visibility` of their own (see #27436).
|
|
211
|
+
state('expanded', style({ height: '*', visibility: '' })),
|
|
212
|
+
transition('expanded <=> collapsed, void => collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING$1)),
|
|
213
|
+
]),
|
|
214
|
+
};
|
|
215
|
+
const heightAnimation = trigger('heightAnimation', [
|
|
216
|
+
state('open', style({
|
|
217
|
+
height: '*',
|
|
218
|
+
visibility: '',
|
|
219
|
+
})),
|
|
220
|
+
state('closed', style({
|
|
221
|
+
height: '0px',
|
|
222
|
+
visibility: 'hidden',
|
|
223
|
+
})),
|
|
224
|
+
transition('open <=> closed', [animate(EXPANSION_PANEL_ANIMATION_TIMING$1)]),
|
|
225
|
+
]);
|
|
226
|
+
|
|
227
|
+
const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
|
|
194
228
|
class AppDrawerComponent {
|
|
195
229
|
opened = false;
|
|
196
|
-
links =
|
|
230
|
+
links = input();
|
|
197
231
|
hostId = 'rolatech-app-drawer';
|
|
198
232
|
hasClass = true;
|
|
199
233
|
duration = '200ms';
|
|
@@ -211,6 +245,7 @@ class AppDrawerComponent {
|
|
|
211
245
|
isMobile = false;
|
|
212
246
|
isPersistent = true;
|
|
213
247
|
completed = false;
|
|
248
|
+
panelOpenState = false;
|
|
214
249
|
open() {
|
|
215
250
|
this.opened = true;
|
|
216
251
|
this.renderer.setAttribute(this.el.nativeElement, 'opened', '');
|
|
@@ -261,16 +296,22 @@ class AppDrawerComponent {
|
|
|
261
296
|
}
|
|
262
297
|
}
|
|
263
298
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AppDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
264
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: AppDrawerComponent, isStandalone: true, selector: "rolatech-app-drawer", inputs: {
|
|
299
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: AppDrawerComponent, isStandalone: true, selector: "rolatech-app-drawer", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-app-drawer": "this.hasClass", "style.transition-duration": "this.duration" } }, viewQueries: [{ propertyName: "guideEl", first: true, predicate: ["guide"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "scrimEl", first: true, predicate: ["scrim"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"scrim\" #scrim class=\"tp-yt-app-drawer\" (click)=\"close()\" style=\"transition-duration: 200ms\"></div>\n<div id=\"contentContainer\" #content class=\"tp-yt-app-drawer\" style=\"transition-duration: 200ms\">\n <div id=\"guide-wrapper\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\">\n <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n <rolatech-icon-button #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\">menu</rolatech-icon-button>\n <div class=\"text-black text-lg sm:text-xl font-bold\" routerLink=\"/\">\n <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n <span>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div id=\"guide-inner-content\" class=\"flex flex-col ytd-app\">\n @if (completed) {\n <div class=\"flex p-3 flex-col gap-2\">\n @for (item of links(); track $index) {\n @if (item.children) {\n <div class=\"cursor-pointer panel\">\n <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n <span class=\"ml-3\">{{ item.title }}</span>\n <div class=\"flex-1\"></div>\n <rolatech-icon\n style=\"transition-duration:.5s;transform: {{ panelOpenState ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n >expand_more</rolatech-icon\n >\n </div>\n <div class=\"flex flex-col pl-8\" [@heightAnimation]=\"panelOpenState === true ? 'open' : 'closed'\">\n @for (child of item.children; track child) {\n <a\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-3\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <span class=\"text-sm\">{{ child.title }}</span>\n </a>\n }\n </div>\n </div>\n } @else {\n @if (item.openinView) {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [href]=\"item.link\"\n target=\"_blank\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm opacity-75\">{{ item.subtitle }}</span>\n </div>\n </div>\n <rolatech-icon class=\"scale-90\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [routerLink]=\"item.link\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-app-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility}rolatech-app-drawer[opened]{visibility:visible}rolatech-app-drawer:not(:has(#drawer-menu-button)){padding-left:16px}[hidden]{display:none!important}#contentContainer.tp-yt-app-drawer{position:absolute;top:0;bottom:0;left:0;width:var(--app-drawer-width, 256px);padding:var(--app-drawer-content-padding, 120px 0);transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);background-color:#fff;background-color:var(--app-drawer-content-container-background-color, white)}#contentContainer.tp-yt-app-drawer[opened]{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}#guide-inner-content.ytd-app{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.tp-yt-app-drawer{position:absolute;inset:0;transition-property:opacity;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:0;background:var(--app-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.tp-yt-app-drawer{opacity:1}rolatech-app-drawer[persistent]{width:var(--app-drawer-width, 256px)}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-app-drawer:not([persistent]) #guide-spacer{display:none}rolatech-app-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:#0000000d;border-radius:8px;font-weight:500}mat-panel-title{margin-left:12px}mat-panel-description{flex-basis:100%}.mat-expansion-panel-header{height:44px!important;padding:0!important}.mat-expansion-panel-header .panel-icon{margin-right:24px}.mat-expansion-panel-header .toggle-icon{position:absolute;right:12px}.mat-expansion-panel-body{padding:0 12px!important}.panel{box-sizing:content-box;display:block;margin:0;overflow:hidden;transition:margin 225ms cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1);position:relative;background:var(--mat-expansion-container-background-color);color:var(--mat-expansion-container-text-color);border-radius:var(--mat-expansion-container-shape)}.transform{box-sizing:content-box;display:block;margin:0;overflow:hidden;transition:margin 225ms cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1)}.content{display:flex;flex-direction:column;overflow:visible;font-family:var(--mat-expansion-container-text-font);font-size:var(--mat-expansion-container-text-size);font-weight:var(--mat-expansion-container-text-weight);line-height:var(--mat-expansion-container-text-line-height);letter-spacing:var(--mat-expansion-container-text-tracking)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconButtonComponent, selector: "rolatech-icon-button" }, { kind: "component", type: IconComponent, selector: "rolatech-icon" }], animations: [heightAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
265
300
|
}
|
|
266
301
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AppDrawerComponent, decorators: [{
|
|
267
302
|
type: Component,
|
|
268
|
-
args: [{ selector: 'rolatech-app-drawer', standalone: true, imports: [
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
303
|
+
args: [{ selector: 'rolatech-app-drawer', standalone: true, imports: [
|
|
304
|
+
CommonModule,
|
|
305
|
+
MatNavList,
|
|
306
|
+
RouterLink,
|
|
307
|
+
MatExpansionPanel,
|
|
308
|
+
MatExpansionPanelHeader,
|
|
309
|
+
MatIcon,
|
|
310
|
+
RouterLinkActive,
|
|
311
|
+
IconButtonComponent,
|
|
312
|
+
IconComponent,
|
|
313
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [heightAnimation], template: "<div id=\"scrim\" #scrim class=\"tp-yt-app-drawer\" (click)=\"close()\" style=\"transition-duration: 200ms\"></div>\n<div id=\"contentContainer\" #content class=\"tp-yt-app-drawer\" style=\"transition-duration: 200ms\">\n <div id=\"guide-wrapper\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\">\n <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n <rolatech-icon-button #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\">menu</rolatech-icon-button>\n <div class=\"text-black text-lg sm:text-xl font-bold\" routerLink=\"/\">\n <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n <span>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div id=\"guide-inner-content\" class=\"flex flex-col ytd-app\">\n @if (completed) {\n <div class=\"flex p-3 flex-col gap-2\">\n @for (item of links(); track $index) {\n @if (item.children) {\n <div class=\"cursor-pointer panel\">\n <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n <span class=\"ml-3\">{{ item.title }}</span>\n <div class=\"flex-1\"></div>\n <rolatech-icon\n style=\"transition-duration:.5s;transform: {{ panelOpenState ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n >expand_more</rolatech-icon\n >\n </div>\n <div class=\"flex flex-col pl-8\" [@heightAnimation]=\"panelOpenState === true ? 'open' : 'closed'\">\n @for (child of item.children; track child) {\n <a\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-3\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <span class=\"text-sm\">{{ child.title }}</span>\n </a>\n }\n </div>\n </div>\n } @else {\n @if (item.openinView) {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [href]=\"item.link\"\n target=\"_blank\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm opacity-75\">{{ item.subtitle }}</span>\n </div>\n </div>\n <rolatech-icon class=\"scale-90\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [routerLink]=\"item.link\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-app-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility}rolatech-app-drawer[opened]{visibility:visible}rolatech-app-drawer:not(:has(#drawer-menu-button)){padding-left:16px}[hidden]{display:none!important}#contentContainer.tp-yt-app-drawer{position:absolute;top:0;bottom:0;left:0;width:var(--app-drawer-width, 256px);padding:var(--app-drawer-content-padding, 120px 0);transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);background-color:#fff;background-color:var(--app-drawer-content-container-background-color, white)}#contentContainer.tp-yt-app-drawer[opened]{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}#guide-inner-content.ytd-app{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.tp-yt-app-drawer{position:absolute;inset:0;transition-property:opacity;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:0;background:var(--app-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.tp-yt-app-drawer{opacity:1}rolatech-app-drawer[persistent]{width:var(--app-drawer-width, 256px)}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-app-drawer:not([persistent]) #guide-spacer{display:none}rolatech-app-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:#0000000d;border-radius:8px;font-weight:500}mat-panel-title{margin-left:12px}mat-panel-description{flex-basis:100%}.mat-expansion-panel-header{height:44px!important;padding:0!important}.mat-expansion-panel-header .panel-icon{margin-right:24px}.mat-expansion-panel-header .toggle-icon{position:absolute;right:12px}.mat-expansion-panel-body{padding:0 12px!important}.panel{box-sizing:content-box;display:block;margin:0;overflow:hidden;transition:margin 225ms cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1);position:relative;background:var(--mat-expansion-container-background-color);color:var(--mat-expansion-container-text-color);border-radius:var(--mat-expansion-container-shape)}.transform{box-sizing:content-box;display:block;margin:0;overflow:hidden;transition:margin 225ms cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1)}.content{display:flex;flex-direction:column;overflow:visible;font-family:var(--mat-expansion-container-text-font);font-size:var(--mat-expansion-container-text-size);font-weight:var(--mat-expansion-container-text-weight);line-height:var(--mat-expansion-container-text-line-height);letter-spacing:var(--mat-expansion-container-text-tracking)}\n"] }]
|
|
314
|
+
}], propDecorators: { hostId: [{
|
|
274
315
|
type: HostBinding,
|
|
275
316
|
args: ['id']
|
|
276
317
|
}], hasClass: [{
|
|
@@ -365,24 +406,20 @@ class AppFooterComponent {
|
|
|
365
406
|
hostId = 'rolatech-app-footer';
|
|
366
407
|
hasClass = true;
|
|
367
408
|
config = inject(APP_CONFIG);
|
|
368
|
-
title =
|
|
369
|
-
copyright = '';
|
|
409
|
+
title = input();
|
|
410
|
+
copyright = input('');
|
|
370
411
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AppFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
371
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
412
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.0", type: AppFooterComponent, isStandalone: true, selector: "rolatech-app-footer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-app-footer": "this.hasClass" } }, ngImport: i0, template: "<div class=\"bg-gray-100 text-black flex flex-col justify-between px-5 sm:px-16 py-6\">\n <div class=\"flex flex-col sm:flex-row sm:gap-10 gap-3 py-3\">\n <ng-content></ng-content>\n </div>\n <div class=\"flex justify-between mt-6\">\n <div class=\"cursor-pointer\">\n <a href=\"/\" target=\"_blank\" class=\"text-lg font-bold\">{{ title() }}</a>\n </div>\n <span class=\"text-sm font-thin\">\u00A9{{ copyright() }}</span>\n </div>\n</div>\n", styles: [".rolatech-app-footer{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
372
413
|
}
|
|
373
414
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AppFooterComponent, decorators: [{
|
|
374
415
|
type: Component,
|
|
375
|
-
args: [{ selector: 'rolatech-app-footer', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"bg-gray-100 text-black flex flex-col justify-between px-5 sm:px-16 py-6\">\n <div class=\"flex flex-col sm:flex-row sm:gap-10 gap-3 py-3\">\n <ng-content></ng-content>\n </div>\n <div class=\"flex justify-between mt-6\">\n <div class=\"cursor-pointer\">\n <a href=\"/\" target=\"_blank\" class=\"text-lg font-bold\">{{ title }}</a>\n </div>\n <span class=\"text-sm font-thin\">\u00A9{{ copyright }}</span>\n </div>\n</div>\n", styles: [".rolatech-app-footer{width:100%}\n"] }]
|
|
416
|
+
args: [{ selector: 'rolatech-app-footer', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"bg-gray-100 text-black flex flex-col justify-between px-5 sm:px-16 py-6\">\n <div class=\"flex flex-col sm:flex-row sm:gap-10 gap-3 py-3\">\n <ng-content></ng-content>\n </div>\n <div class=\"flex justify-between mt-6\">\n <div class=\"cursor-pointer\">\n <a href=\"/\" target=\"_blank\" class=\"text-lg font-bold\">{{ title() }}</a>\n </div>\n <span class=\"text-sm font-thin\">\u00A9{{ copyright() }}</span>\n </div>\n</div>\n", styles: [".rolatech-app-footer{width:100%}\n"] }]
|
|
376
417
|
}], propDecorators: { hostId: [{
|
|
377
418
|
type: HostBinding,
|
|
378
419
|
args: ['id']
|
|
379
420
|
}], hasClass: [{
|
|
380
421
|
type: HostBinding,
|
|
381
422
|
args: ['class.rolatech-app-footer']
|
|
382
|
-
}], title: [{
|
|
383
|
-
type: Input
|
|
384
|
-
}], copyright: [{
|
|
385
|
-
type: Input
|
|
386
423
|
}] } });
|
|
387
424
|
|
|
388
425
|
class ConsoleLayoutComponent {
|
|
@@ -395,27 +432,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
395
432
|
}] });
|
|
396
433
|
|
|
397
434
|
class MenuUserComponent {
|
|
398
|
-
user;
|
|
399
|
-
myaccountUrl =
|
|
435
|
+
user = input();
|
|
436
|
+
myaccountUrl = input();
|
|
400
437
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MenuUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
401
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: MenuUserComponent, isStandalone: true, selector: "rolatech-menu-user", inputs: { user: "user", myaccountUrl: "myaccountUrl" }, ngImport: i0, template: "<div class=\"min-w-[256px]\">\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
|
|
438
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: MenuUserComponent, isStandalone: true, selector: "rolatech-menu-user", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, myaccountUrl: { classPropertyName: "myaccountUrl", publicName: "myaccountUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"min-w-[256px]\">\n <div class=\"px-6 py-3\">\n <div class=\"flex flex-row items-center\">\n <div class=\"mr-3 w-14 h-14 rounded-full bg-orange-600\">\n @if (user().avatar) {\n <img [src]=\"user().avatar\" class=\"w-14 h-14 object-cover rounded-full\" />\n }\n </div>\n <div class=\"flex flex-col\">\n <div>\n <div class=\"text-lg font-bold\">{{ user().name }}</div>\n <div class=\"formated-string\">\n <span>@{{ user().username }}</span>\n </div>\n </div>\n </div>\n </div>\n <!-- <div class=\"flex\">\n <a\n [href]=\"myaccountUrl\"\n target=\"_blank\"\n class=\"text-sm my-2 p-1 px-6 ml-24 rounded border border-gray-300 hover:bg-gray-200\"\n >\u7528\u6237\u4E2D\u5FC3</a\n >\n </div> -->\n </div>\n <div class=\"flex justify-between items-center\">\n <a mat-menu-item [href]=\"myaccountUrl()\" target=\"_blank\" class=\"px-6\">\n <span class=\"flex justify-between items-center\">\n <span class=\"pl-2\"> \u7528\u6237\u4E2D\u5FC3 </span>\n <span class=\"flex\"> <mat-icon>open_in_new</mat-icon></span>\n </span>\n </a>\n </div>\n</div>\n", styles: [".formated-string{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
402
439
|
}
|
|
403
440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MenuUserComponent, decorators: [{
|
|
404
441
|
type: Component,
|
|
405
|
-
args: [{ standalone: true, imports: [MatMenuModule, MatIconModule], selector: 'rolatech-menu-user', template: "<div class=\"min-w-[256px]\">\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
|
|
406
|
-
}]
|
|
407
|
-
type: Input
|
|
408
|
-
}], myaccountUrl: [{
|
|
409
|
-
type: Input
|
|
410
|
-
}] } });
|
|
442
|
+
args: [{ standalone: true, imports: [MatMenuModule, MatIconModule], selector: 'rolatech-menu-user', template: "<div class=\"min-w-[256px]\">\n <div class=\"px-6 py-3\">\n <div class=\"flex flex-row items-center\">\n <div class=\"mr-3 w-14 h-14 rounded-full bg-orange-600\">\n @if (user().avatar) {\n <img [src]=\"user().avatar\" class=\"w-14 h-14 object-cover rounded-full\" />\n }\n </div>\n <div class=\"flex flex-col\">\n <div>\n <div class=\"text-lg font-bold\">{{ user().name }}</div>\n <div class=\"formated-string\">\n <span>@{{ user().username }}</span>\n </div>\n </div>\n </div>\n </div>\n <!-- <div class=\"flex\">\n <a\n [href]=\"myaccountUrl\"\n target=\"_blank\"\n class=\"text-sm my-2 p-1 px-6 ml-24 rounded border border-gray-300 hover:bg-gray-200\"\n >\u7528\u6237\u4E2D\u5FC3</a\n >\n </div> -->\n </div>\n <div class=\"flex justify-between items-center\">\n <a mat-menu-item [href]=\"myaccountUrl()\" target=\"_blank\" class=\"px-6\">\n <span class=\"flex justify-between items-center\">\n <span class=\"pl-2\"> \u7528\u6237\u4E2D\u5FC3 </span>\n <span class=\"flex\"> <mat-icon>open_in_new</mat-icon></span>\n </span>\n </a>\n </div>\n</div>\n", styles: [".formated-string{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}\n"] }]
|
|
443
|
+
}] });
|
|
411
444
|
|
|
412
445
|
class TopbarAvatarMenuComponent {
|
|
413
446
|
environment = inject(APP_CONFIG);
|
|
414
447
|
platformId = inject(PLATFORM_ID);
|
|
415
|
-
menu;
|
|
416
|
-
user;
|
|
448
|
+
menu = input.required();
|
|
449
|
+
user = input();
|
|
417
450
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TopbarAvatarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
418
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: TopbarAvatarMenuComponent, isStandalone: true, selector: "rolatech-topbar-avatar-menu", inputs: { menu: "menu", user: "user" }, ngImport: i0, template: "
|
|
451
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: TopbarAvatarMenuComponent, isStandalone: true, selector: "rolatech-topbar-avatar-menu", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (user()) {\n <div class=\"flex\">\n <a\n class=\"flex justify-center items-center rounded-full overflow-hidden cursor-pointer hover:outline-gray-200 outline outline-transparent outline-4\"\n [matMenuTriggerFor]=\"menu()\"\n >\n <div class=\"bg-orange-600 w-9 h-9\">\n @if (user().avatar) {\n <img class=\"w-9 h-9 object-cover\" [src]=\"user().avatar\" />\n }\n </div>\n </a>\n </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
|
|
419
452
|
}
|
|
420
453
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TopbarAvatarMenuComponent, decorators: [{
|
|
421
454
|
type: Component,
|
|
@@ -428,12 +461,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
428
461
|
MatMenuModule,
|
|
429
462
|
RouterOutlet,
|
|
430
463
|
MenuUserComponent,
|
|
431
|
-
], template: "
|
|
432
|
-
}]
|
|
433
|
-
type: Input
|
|
434
|
-
}], user: [{
|
|
435
|
-
type: Input
|
|
436
|
-
}] } });
|
|
464
|
+
], template: "@if (user()) {\n <div class=\"flex\">\n <a\n class=\"flex justify-center items-center rounded-full overflow-hidden cursor-pointer hover:outline-gray-200 outline outline-transparent outline-4\"\n [matMenuTriggerFor]=\"menu()\"\n >\n <div class=\"bg-orange-600 w-9 h-9\">\n @if (user().avatar) {\n <img class=\"w-9 h-9 object-cover\" [src]=\"user().avatar\" />\n }\n </div>\n </a>\n </div>\n}\n" }]
|
|
465
|
+
}] });
|
|
437
466
|
|
|
438
467
|
class FolderComponent {
|
|
439
468
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -691,7 +720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
691
720
|
}] });
|
|
692
721
|
|
|
693
722
|
class LoadingSpinnerComponent {
|
|
694
|
-
title =
|
|
723
|
+
title = input();
|
|
695
724
|
isLoading;
|
|
696
725
|
loadingSubscription;
|
|
697
726
|
loadingService = inject(LoadingService);
|
|
@@ -711,22 +740,20 @@ class LoadingSpinnerComponent {
|
|
|
711
740
|
this.loadingSubscription.unsubscribe();
|
|
712
741
|
}
|
|
713
742
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: LoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
714
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
743
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.0", type: LoadingSpinnerComponent, isStandalone: true, selector: "rolatech-loading-spinner", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"spinner-container flex flex-col\">\n <div class=\"sk-fading-circle\">\n <div class=\"sk-circle1 sk-circle\"></div>\n <div class=\"sk-circle2 sk-circle\"></div>\n <div class=\"sk-circle3 sk-circle\"></div>\n <div class=\"sk-circle4 sk-circle\"></div>\n <div class=\"sk-circle5 sk-circle\"></div>\n <div class=\"sk-circle6 sk-circle\"></div>\n <div class=\"sk-circle7 sk-circle\"></div>\n <div class=\"sk-circle8 sk-circle\"></div>\n <div class=\"sk-circle9 sk-circle\"></div>\n <div class=\"sk-circle10 sk-circle\"></div>\n <div class=\"sk-circle11 sk-circle\"></div>\n <div class=\"sk-circle12 sk-circle\"></div>\n </div>\n <div class=\"text-lg font-bold text-center\">{{ title() }}</div>\n</div>\n", styles: [".spinner-container{display:flex;justify-content:center}.sk-fading-circle{margin:12px auto;width:40px;height:40px;position:relative}.sk-fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-fading-circle .sk-circle:before{content:\"\";display:block;margin:0 auto;width:12%;height:15%;background-color:#333;border-radius:100%;-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.sk-fading-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-fading-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-fading-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-fading-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-fading-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-fading-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-fading-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-fading-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-fading-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-fading-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-fading-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-fading-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-fading-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.sk-fading-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.sk-fading-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.sk-fading-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.sk-fading-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.sk-fading-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.sk-fading-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.sk-fading-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}@keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}\n"] });
|
|
715
744
|
}
|
|
716
745
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: LoadingSpinnerComponent, decorators: [{
|
|
717
746
|
type: Component,
|
|
718
|
-
args: [{ selector: 'rolatech-loading-spinner', standalone: true, template: "<div class=\"spinner-container flex flex-col\">\n <div class=\"sk-fading-circle\">\n <div class=\"sk-circle1 sk-circle\"></div>\n <div class=\"sk-circle2 sk-circle\"></div>\n <div class=\"sk-circle3 sk-circle\"></div>\n <div class=\"sk-circle4 sk-circle\"></div>\n <div class=\"sk-circle5 sk-circle\"></div>\n <div class=\"sk-circle6 sk-circle\"></div>\n <div class=\"sk-circle7 sk-circle\"></div>\n <div class=\"sk-circle8 sk-circle\"></div>\n <div class=\"sk-circle9 sk-circle\"></div>\n <div class=\"sk-circle10 sk-circle\"></div>\n <div class=\"sk-circle11 sk-circle\"></div>\n <div class=\"sk-circle12 sk-circle\"></div>\n </div>\n <div class=\"text-lg font-bold text-center\">{{ title }}</div>\n</div>\n", styles: [".spinner-container{display:flex;justify-content:center}.sk-fading-circle{margin:12px auto;width:40px;height:40px;position:relative}.sk-fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-fading-circle .sk-circle:before{content:\"\";display:block;margin:0 auto;width:12%;height:15%;background-color:#333;border-radius:100%;-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.sk-fading-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-fading-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-fading-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-fading-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-fading-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-fading-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-fading-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-fading-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-fading-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-fading-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-fading-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-fading-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-fading-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.sk-fading-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.sk-fading-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.sk-fading-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.sk-fading-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.sk-fading-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.sk-fading-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.sk-fading-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}@keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}\n"] }]
|
|
719
|
-
}]
|
|
720
|
-
type: Input
|
|
721
|
-
}] } });
|
|
747
|
+
args: [{ selector: 'rolatech-loading-spinner', standalone: true, template: "<div class=\"spinner-container flex flex-col\">\n <div class=\"sk-fading-circle\">\n <div class=\"sk-circle1 sk-circle\"></div>\n <div class=\"sk-circle2 sk-circle\"></div>\n <div class=\"sk-circle3 sk-circle\"></div>\n <div class=\"sk-circle4 sk-circle\"></div>\n <div class=\"sk-circle5 sk-circle\"></div>\n <div class=\"sk-circle6 sk-circle\"></div>\n <div class=\"sk-circle7 sk-circle\"></div>\n <div class=\"sk-circle8 sk-circle\"></div>\n <div class=\"sk-circle9 sk-circle\"></div>\n <div class=\"sk-circle10 sk-circle\"></div>\n <div class=\"sk-circle11 sk-circle\"></div>\n <div class=\"sk-circle12 sk-circle\"></div>\n </div>\n <div class=\"text-lg font-bold text-center\">{{ title() }}</div>\n</div>\n", styles: [".spinner-container{display:flex;justify-content:center}.sk-fading-circle{margin:12px auto;width:40px;height:40px;position:relative}.sk-fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-fading-circle .sk-circle:before{content:\"\";display:block;margin:0 auto;width:12%;height:15%;background-color:#333;border-radius:100%;-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.sk-fading-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-fading-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-fading-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-fading-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-fading-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-fading-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-fading-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-fading-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-fading-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-fading-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-fading-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-fading-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-fading-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.sk-fading-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.sk-fading-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.sk-fading-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.sk-fading-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.sk-fading-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.sk-fading-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.sk-fading-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}@keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}\n"] }]
|
|
748
|
+
}] });
|
|
722
749
|
|
|
723
750
|
class MediaUploadComponent {
|
|
724
|
-
title = '上传图片';
|
|
725
|
-
subtitle = '文件大小';
|
|
726
|
-
description = '不能超过5MB';
|
|
727
|
-
isUploading = false;
|
|
728
|
-
mediaItemClick =
|
|
729
|
-
upload =
|
|
751
|
+
title = input('上传图片');
|
|
752
|
+
subtitle = input('文件大小');
|
|
753
|
+
description = input('不能超过5MB');
|
|
754
|
+
isUploading = input(false);
|
|
755
|
+
mediaItemClick = output();
|
|
756
|
+
upload = output();
|
|
730
757
|
media = [];
|
|
731
758
|
dialog = inject(MatDialog);
|
|
732
759
|
onMediaItemClick(item) {
|
|
@@ -763,47 +790,31 @@ class MediaUploadComponent {
|
|
|
763
790
|
}
|
|
764
791
|
}
|
|
765
792
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MediaUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
766
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: MediaUploadComponent, isStandalone: true, selector: "rolatech-media-upload", inputs: { title: "title", subtitle: "subtitle", description: "description", isUploading: "isUploading" }, outputs: { mediaItemClick: "mediaItemClick", upload: "upload" }, ngImport: i0, template: "<div class=\"bg-gray-100 rounded p-6 min-h-[320px] flex items-center justify-center\">\n @if (isUploading) {\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"p-3\">\n <mat-icon>upload</mat-icon>\n </div>\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"font-lg font-bold py-3\">{{ title }}</div>\n <div class=\"font-sm text-gray-400\">{{ subtitle }}</div>\n <div class=\"font-sm text-gray-400\">{{ description }}</div>\n </div>\n <div class=\"py-2\">\n <input style=\"display: none\" type=\"file\" (change)=\"onUpload($event)\" #fileInput />\n <button mat-flat-button color=\"primary\" (click)=\"fileInput.click()\">\u4E0A\u4F20\u56FE\u7247</button>\n </div>\n </div>\n } @else {\n <rolatech-loading-spinner title=\"\u4E0A\u4F20\u4E2D\"></rolatech-loading-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: LoadingSpinnerComponent, selector: "rolatech-loading-spinner", inputs: ["title"] }] });
|
|
793
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: MediaUploadComponent, isStandalone: true, selector: "rolatech-media-upload", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaItemClick: "mediaItemClick", upload: "upload" }, ngImport: i0, template: "<div class=\"bg-gray-100 rounded p-6 min-h-[320px] flex items-center justify-center\">\n @if (isUploading()) {\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"p-3\">\n <mat-icon>upload</mat-icon>\n </div>\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"font-lg font-bold py-3\">{{ title() }}</div>\n <div class=\"font-sm text-gray-400\">{{ subtitle() }}</div>\n <div class=\"font-sm text-gray-400\">{{ description() }}</div>\n </div>\n <div class=\"py-2\">\n <input style=\"display: none\" type=\"file\" (change)=\"onUpload($event)\" #fileInput />\n <button mat-flat-button color=\"primary\" (click)=\"fileInput.click()\">\u4E0A\u4F20\u56FE\u7247</button>\n </div>\n </div>\n } @else {\n <rolatech-loading-spinner title=\"\u4E0A\u4F20\u4E2D\"></rolatech-loading-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: LoadingSpinnerComponent, selector: "rolatech-loading-spinner", inputs: ["title"] }] });
|
|
767
794
|
}
|
|
768
795
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MediaUploadComponent, decorators: [{
|
|
769
796
|
type: Component,
|
|
770
|
-
args: [{ standalone: true, imports: [AngularCommonModule, AngularComponentsModule, LoadingSpinnerComponent], selector: 'rolatech-media-upload', template: "<div class=\"bg-gray-100 rounded p-6 min-h-[320px] flex items-center justify-center\">\n @if (isUploading) {\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"p-3\">\n <mat-icon>upload</mat-icon>\n </div>\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"font-lg font-bold py-3\">{{ title }}</div>\n <div class=\"font-sm text-gray-400\">{{ subtitle }}</div>\n <div class=\"font-sm text-gray-400\">{{ description }}</div>\n </div>\n <div class=\"py-2\">\n <input style=\"display: none\" type=\"file\" (change)=\"onUpload($event)\" #fileInput />\n <button mat-flat-button color=\"primary\" (click)=\"fileInput.click()\">\u4E0A\u4F20\u56FE\u7247</button>\n </div>\n </div>\n } @else {\n <rolatech-loading-spinner title=\"\u4E0A\u4F20\u4E2D\"></rolatech-loading-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"] }]
|
|
771
|
-
}]
|
|
772
|
-
type: Input
|
|
773
|
-
}], subtitle: [{
|
|
774
|
-
type: Input
|
|
775
|
-
}], description: [{
|
|
776
|
-
type: Input
|
|
777
|
-
}], isUploading: [{
|
|
778
|
-
type: Input
|
|
779
|
-
}], mediaItemClick: [{
|
|
780
|
-
type: Output
|
|
781
|
-
}], upload: [{
|
|
782
|
-
type: Output
|
|
783
|
-
}] } });
|
|
797
|
+
args: [{ standalone: true, imports: [AngularCommonModule, AngularComponentsModule, LoadingSpinnerComponent], selector: 'rolatech-media-upload', template: "<div class=\"bg-gray-100 rounded p-6 min-h-[320px] flex items-center justify-center\">\n @if (isUploading()) {\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"p-3\">\n <mat-icon>upload</mat-icon>\n </div>\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"font-lg font-bold py-3\">{{ title() }}</div>\n <div class=\"font-sm text-gray-400\">{{ subtitle() }}</div>\n <div class=\"font-sm text-gray-400\">{{ description() }}</div>\n </div>\n <div class=\"py-2\">\n <input style=\"display: none\" type=\"file\" (change)=\"onUpload($event)\" #fileInput />\n <button mat-flat-button color=\"primary\" (click)=\"fileInput.click()\">\u4E0A\u4F20\u56FE\u7247</button>\n </div>\n </div>\n } @else {\n <rolatech-loading-spinner title=\"\u4E0A\u4F20\u4E2D\"></rolatech-loading-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"] }]
|
|
798
|
+
}] });
|
|
784
799
|
|
|
785
800
|
class StorageBucketCreateComponent {
|
|
786
|
-
name;
|
|
787
|
-
output =
|
|
801
|
+
name = input();
|
|
802
|
+
output = output();
|
|
788
803
|
ngOnInit() { }
|
|
789
804
|
ngDoCheck() {
|
|
790
|
-
this.output.emit(this.name);
|
|
805
|
+
this.output.emit(this.name());
|
|
791
806
|
}
|
|
792
807
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: StorageBucketCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
793
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
808
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.0", 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"] }] });
|
|
794
809
|
}
|
|
795
810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: StorageBucketCreateComponent, decorators: [{
|
|
796
811
|
type: Component,
|
|
797
812
|
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"] }]
|
|
798
|
-
}]
|
|
799
|
-
type: Input
|
|
800
|
-
}], output: [{
|
|
801
|
-
type: Output
|
|
802
|
-
}] } });
|
|
813
|
+
}] });
|
|
803
814
|
|
|
804
815
|
class StorageFileUploadComponent {
|
|
805
|
-
title;
|
|
806
|
-
output =
|
|
816
|
+
title = input();
|
|
817
|
+
output = output();
|
|
807
818
|
fileData;
|
|
808
819
|
progressInfos = [];
|
|
809
820
|
isFinished = false;
|
|
@@ -825,38 +836,28 @@ class StorageFileUploadComponent {
|
|
|
825
836
|
this.file = null;
|
|
826
837
|
}
|
|
827
838
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: StorageFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
828
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: StorageFileUploadComponent, isStandalone: true, selector: "rolatech-storage-file-upload", inputs: { title: "title" }, 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"] }] });
|
|
839
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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"] }] });
|
|
829
840
|
}
|
|
830
841
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: StorageFileUploadComponent, decorators: [{
|
|
831
842
|
type: Component,
|
|
832
843
|
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"] }]
|
|
833
|
-
}]
|
|
834
|
-
type: Input
|
|
835
|
-
}], output: [{
|
|
836
|
-
type: Output
|
|
837
|
-
}] } });
|
|
844
|
+
}] });
|
|
838
845
|
|
|
839
846
|
class StorageFolderCreateComponent {
|
|
840
|
-
name;
|
|
841
|
-
isPublic = true;
|
|
842
|
-
output =
|
|
847
|
+
name = input();
|
|
848
|
+
isPublic = input(true);
|
|
849
|
+
output = output();
|
|
843
850
|
ngOnInit() { }
|
|
844
851
|
ngDoCheck() {
|
|
845
|
-
this.output.emit({ name: this.name, isPublic: this.isPublic });
|
|
852
|
+
this.output.emit({ name: this.name(), isPublic: this.isPublic() });
|
|
846
853
|
}
|
|
847
854
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: StorageFolderCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
848
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
855
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.0", 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"] }] });
|
|
849
856
|
}
|
|
850
857
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: StorageFolderCreateComponent, decorators: [{
|
|
851
858
|
type: Component,
|
|
852
859
|
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"] }]
|
|
853
|
-
}]
|
|
854
|
-
type: Input
|
|
855
|
-
}], isPublic: [{
|
|
856
|
-
type: Input
|
|
857
|
-
}], output: [{
|
|
858
|
-
type: Output
|
|
859
|
-
}] } });
|
|
860
|
+
}] });
|
|
860
861
|
|
|
861
862
|
class WechatConnectDialogComponent {
|
|
862
863
|
dialogRef = inject(MatDialogRef);
|
|
@@ -982,11 +983,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
982
983
|
}], ctorParameters: () => [] });
|
|
983
984
|
|
|
984
985
|
class MediaListComponent {
|
|
985
|
-
isUploading;
|
|
986
|
-
media =
|
|
987
|
-
showAdd = true;
|
|
988
|
-
mediaItemClick =
|
|
989
|
-
upload =
|
|
986
|
+
isUploading = input();
|
|
987
|
+
media = input();
|
|
988
|
+
showAdd = input(true);
|
|
989
|
+
mediaItemClick = output();
|
|
990
|
+
upload = output();
|
|
990
991
|
onMediaItemClick(item) {
|
|
991
992
|
this.mediaItemClick.emit(item);
|
|
992
993
|
}
|
|
@@ -994,29 +995,18 @@ class MediaListComponent {
|
|
|
994
995
|
this.upload.emit(event);
|
|
995
996
|
}
|
|
996
997
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MediaListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
997
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: MediaListComponent, isStandalone: true, selector: "rolatech-media-list", inputs: { isUploading: "isUploading", media: "media", showAdd: "showAdd" }, outputs: { mediaItemClick: "mediaItemClick", upload: "upload" }, ngImport: i0, template: "<div class=\"flex flex-row flex-wrap box-border items-center\">\n <div class=\"progress-bar\">\n @if (isUploading) {\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n }\n </div>\n <div class=\"flex flex-row flex-wrap box-border items-center gap-2\">\n <ng-content></ng-content>\n <div>\n <input style=\"display: none\" type=\"file\" accept=\"image/*, video/*\" (change)=\"onUpload($event)\" #fileInput />\n @if (showAdd) {\n <div class=\"add-button\">\n <img (click)=\"fileInput.click()\" class=\"tile-media\" src=\"assets/images/baseline_add_black_48dp.png\" alt=\"add image\" />\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".progress-bar{display:block;min-height:6px;width:100%;padding:4px 0}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:80px;width:80px;object-fit:contain;cursor:pointer;padding:6px;position:relative;box-sizing:border-box}app-media-list-item:before{border-radius:12px}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
|
|
998
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: MediaListComponent, isStandalone: true, selector: "rolatech-media-list", inputs: { isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null }, media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, showAdd: { classPropertyName: "showAdd", publicName: "showAdd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaItemClick: "mediaItemClick", upload: "upload" }, ngImport: i0, template: "<div class=\"flex flex-row flex-wrap box-border items-center\">\n <div class=\"progress-bar\">\n @if (isUploading()) {\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n }\n </div>\n <div class=\"flex flex-row flex-wrap box-border items-center gap-2\">\n <ng-content></ng-content>\n <div>\n <input style=\"display: none\" type=\"file\" accept=\"image/*, video/*\" (change)=\"onUpload($event)\" #fileInput />\n @if (showAdd()) {\n <div class=\"add-button\">\n <img (click)=\"fileInput.click()\" class=\"tile-media\" src=\"assets/images/baseline_add_black_48dp.png\" alt=\"add image\" />\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".progress-bar{display:block;min-height:6px;width:100%;padding:4px 0}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:80px;width:80px;object-fit:contain;cursor:pointer;padding:6px;position:relative;box-sizing:border-box}app-media-list-item:before{border-radius:12px}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
|
|
998
999
|
}
|
|
999
1000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MediaListComponent, decorators: [{
|
|
1000
1001
|
type: Component,
|
|
1001
|
-
args: [{ selector: 'rolatech-media-list', standalone: true, imports: [MatProgressBarModule], template: "<div class=\"flex flex-row flex-wrap box-border items-center\">\n <div class=\"progress-bar\">\n @if (isUploading) {\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n }\n </div>\n <div class=\"flex flex-row flex-wrap box-border items-center gap-2\">\n <ng-content></ng-content>\n <div>\n <input style=\"display: none\" type=\"file\" accept=\"image/*, video/*\" (change)=\"onUpload($event)\" #fileInput />\n @if (showAdd) {\n <div class=\"add-button\">\n <img (click)=\"fileInput.click()\" class=\"tile-media\" src=\"assets/images/baseline_add_black_48dp.png\" alt=\"add image\" />\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".progress-bar{display:block;min-height:6px;width:100%;padding:4px 0}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:80px;width:80px;object-fit:contain;cursor:pointer;padding:6px;position:relative;box-sizing:border-box}app-media-list-item:before{border-radius:12px}\n"] }]
|
|
1002
|
-
}]
|
|
1003
|
-
type: Input
|
|
1004
|
-
}], media: [{
|
|
1005
|
-
type: Input
|
|
1006
|
-
}], showAdd: [{
|
|
1007
|
-
type: Input
|
|
1008
|
-
}], mediaItemClick: [{
|
|
1009
|
-
type: Output
|
|
1010
|
-
}], upload: [{
|
|
1011
|
-
type: Output
|
|
1012
|
-
}] } });
|
|
1002
|
+
args: [{ selector: 'rolatech-media-list', standalone: true, imports: [MatProgressBarModule], template: "<div class=\"flex flex-row flex-wrap box-border items-center\">\n <div class=\"progress-bar\">\n @if (isUploading()) {\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n }\n </div>\n <div class=\"flex flex-row flex-wrap box-border items-center gap-2\">\n <ng-content></ng-content>\n <div>\n <input style=\"display: none\" type=\"file\" accept=\"image/*, video/*\" (change)=\"onUpload($event)\" #fileInput />\n @if (showAdd()) {\n <div class=\"add-button\">\n <img (click)=\"fileInput.click()\" class=\"tile-media\" src=\"assets/images/baseline_add_black_48dp.png\" alt=\"add image\" />\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".progress-bar{display:block;min-height:6px;width:100%;padding:4px 0}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:80px;width:80px;object-fit:contain;cursor:pointer;padding:6px;position:relative;box-sizing:border-box}app-media-list-item:before{border-radius:12px}\n"] }]
|
|
1003
|
+
}] });
|
|
1013
1004
|
|
|
1014
1005
|
class MediaListItemComponent {
|
|
1015
|
-
media;
|
|
1016
|
-
uploadProgress = 0;
|
|
1017
|
-
mediaItemClick =
|
|
1018
|
-
|
|
1019
|
-
deleteMedia = new EventEmitter();
|
|
1006
|
+
media = input.required();
|
|
1007
|
+
uploadProgress = input(0);
|
|
1008
|
+
mediaItemClick = output();
|
|
1009
|
+
deleteMedia = output();
|
|
1020
1010
|
onMediaItemClick(event) {
|
|
1021
1011
|
this.mediaItemClick.emit(event);
|
|
1022
1012
|
}
|
|
@@ -1024,20 +1014,12 @@ class MediaListItemComponent {
|
|
|
1024
1014
|
this.deleteMedia.emit(media);
|
|
1025
1015
|
}
|
|
1026
1016
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MediaListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1027
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1017
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.0", type: MediaListItemComponent, isStandalone: true, selector: "rolatech-media-list-item", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: true, transformFunction: null }, uploadProgress: { classPropertyName: "uploadProgress", publicName: "uploadProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaItemClick: "mediaItemClick", deleteMedia: "deleteMedia" }, ngImport: i0, template: "<div\n class=\"media-list-item relative hasImage focus:outline-none focus:shadow-outline bg-gray-100 cursor-pointer text-transparent hover:text-white shadow-sm\"\n>\n <div class=\"absolute z-30 right-0\">\n <div class=\"flex-1\"></div>\n <div>\n <button mat-icon-button [matMenuTriggerFor]=\"beforeMenu\" class=\"ml-auto focus:outline-none hover:bg-gray-300 p-1\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item (click)=\"onDeleteMedia(media())\">\n <span>\u5220\u9664</span>\n </button>\n </mat-menu>\n </div>\n </div>\n <div id=\"thumbnail\" class=\"thumbnail\">\n <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media().url\" [alt]=\"media().alt\" />\n </div>\n <section\n (click)=\"onMediaItemClick(media())\"\n class=\"flex flex-col text-xs break-words w-full h-full z-20 absolute top-0\"\n ></section>\n</div>\n", styles: [".media-list-item{cursor:pointer;box-sizing:border-box;height:128px;width:228px;display:inline-block;display:block;position:relative;flex:none}.tile-media{height:100%;width:100%;object-fit:cover;display:inline-block;background-color:transparent}#thumbnail.thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block;position:absolute;border-radius:8px;inset:0}.hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
1028
1018
|
}
|
|
1029
1019
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MediaListItemComponent, decorators: [{
|
|
1030
1020
|
type: Component,
|
|
1031
|
-
args: [{ selector: 'rolatech-media-list-item', standalone: true, imports: [MatButtonModule, MatMenuModule, MatIconModule], template: "<div\n class=\"media-list-item relative hasImage focus:outline-none focus:shadow-outline bg-gray-100 cursor-pointer text-transparent hover:text-white shadow-sm\"\n>\n <div class=\"absolute z-30 right-0\">\n <div class=\"flex-1\"></div>\n <div>\n <button mat-icon-button [matMenuTriggerFor]=\"beforeMenu\" class=\"ml-auto focus:outline-none hover:bg-gray-300 p-1\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item (click)=\"onDeleteMedia(media)\">\n <span>\u5220\u9664</span>\n </button>\n </mat-menu>\n </div>\n </div>\n <div id=\"thumbnail\" class=\"thumbnail\">\n <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n </div>\n <section\n (click)=\"onMediaItemClick(media)\"\n class=\"flex flex-col text-xs break-words w-full h-full z-20 absolute top-0\"\n ></section>\n</div>\n", styles: [".media-list-item{cursor:pointer;box-sizing:border-box;height:128px;width:228px;display:inline-block;display:block;position:relative;flex:none}.tile-media{height:100%;width:100%;object-fit:cover;display:inline-block;background-color:transparent}#thumbnail.thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block;position:absolute;border-radius:8px;inset:0}.hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}\n"] }]
|
|
1032
|
-
}]
|
|
1033
|
-
type: Input
|
|
1034
|
-
}], uploadProgress: [{
|
|
1035
|
-
type: Input
|
|
1036
|
-
}], mediaItemClick: [{
|
|
1037
|
-
type: Output
|
|
1038
|
-
}], deleteMedia: [{
|
|
1039
|
-
type: Output
|
|
1040
|
-
}] } });
|
|
1021
|
+
args: [{ selector: 'rolatech-media-list-item', standalone: true, imports: [MatButtonModule, MatMenuModule, MatIconModule], template: "<div\n class=\"media-list-item relative hasImage focus:outline-none focus:shadow-outline bg-gray-100 cursor-pointer text-transparent hover:text-white shadow-sm\"\n>\n <div class=\"absolute z-30 right-0\">\n <div class=\"flex-1\"></div>\n <div>\n <button mat-icon-button [matMenuTriggerFor]=\"beforeMenu\" class=\"ml-auto focus:outline-none hover:bg-gray-300 p-1\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item (click)=\"onDeleteMedia(media())\">\n <span>\u5220\u9664</span>\n </button>\n </mat-menu>\n </div>\n </div>\n <div id=\"thumbnail\" class=\"thumbnail\">\n <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media().url\" [alt]=\"media().alt\" />\n </div>\n <section\n (click)=\"onMediaItemClick(media())\"\n class=\"flex flex-col text-xs break-words w-full h-full z-20 absolute top-0\"\n ></section>\n</div>\n", styles: [".media-list-item{cursor:pointer;box-sizing:border-box;height:128px;width:228px;display:inline-block;display:block;position:relative;flex:none}.tile-media{height:100%;width:100%;object-fit:cover;display:inline-block;background-color:transparent}#thumbnail.thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block;position:absolute;border-radius:8px;inset:0}.hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}\n"] }]
|
|
1022
|
+
}] });
|
|
1041
1023
|
|
|
1042
1024
|
class NotFoundComponent {
|
|
1043
1025
|
router;
|
|
@@ -1089,9 +1071,56 @@ class BaseComponent {
|
|
|
1089
1071
|
titleService = inject(Title);
|
|
1090
1072
|
}
|
|
1091
1073
|
|
|
1074
|
+
class TableComponent {
|
|
1075
|
+
// dataSource = new MatTableDataSource<TableData<any>>();
|
|
1076
|
+
dataSource = input.required();
|
|
1077
|
+
// displayedColumns: string[] = ['name', 'description', 'resource', 'code', 'pattern', 'method', 'actions'];
|
|
1078
|
+
// displayedColumns = effect(() => {
|
|
1079
|
+
// const keyToFind = 'ref';
|
|
1080
|
+
// const newArray = map(this.dataSource().columns, keyToFind);
|
|
1081
|
+
// console.log(newArray);
|
|
1082
|
+
// return newArray;
|
|
1083
|
+
// // return this.dataSource().columns.reduce((acc: any, obj) => {
|
|
1084
|
+
// // if (keyToFind in obj) {
|
|
1085
|
+
// // acc.push(obj[keyToFind]);
|
|
1086
|
+
// // }
|
|
1087
|
+
// // console.log(acc);
|
|
1088
|
+
// // return acc;
|
|
1089
|
+
// // }, []);
|
|
1090
|
+
// });
|
|
1091
|
+
displayedColumns = [];
|
|
1092
|
+
ngOnInit() {
|
|
1093
|
+
this.displayedColumns = map$1(this.dataSource().columns, 'ref');
|
|
1094
|
+
// console.log(this.displayedColumns);
|
|
1095
|
+
}
|
|
1096
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1097
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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 }] });
|
|
1098
|
+
}
|
|
1099
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableComponent, decorators: [{
|
|
1100
|
+
type: Component,
|
|
1101
|
+
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" }]
|
|
1102
|
+
}] });
|
|
1103
|
+
|
|
1104
|
+
class PaginatorComponent {
|
|
1105
|
+
length = 100;
|
|
1106
|
+
pageSize = 15;
|
|
1107
|
+
pageSizeOptions = [5, 10, 25, 100];
|
|
1108
|
+
pageEvent;
|
|
1109
|
+
page = output();
|
|
1110
|
+
onPage(event) {
|
|
1111
|
+
this.page.emit(event);
|
|
1112
|
+
}
|
|
1113
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1114
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: PaginatorComponent, isStandalone: true, selector: "rolatech-paginator", outputs: { page: "page" }, ngImport: i0, template: "<mat-paginator\n #paginator\n [length]=\"length\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"onPage($event)\"\n hidePageSize\n showFirstLastButtons\n>\n</mat-paginator>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
|
|
1115
|
+
}
|
|
1116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
1117
|
+
type: Component,
|
|
1118
|
+
args: [{ selector: 'rolatech-paginator', standalone: true, imports: [CommonModule, MatPaginatorModule], template: "<mat-paginator\n #paginator\n [length]=\"length\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"onPage($event)\"\n hidePageSize\n showFirstLastButtons\n>\n</mat-paginator>\n" }]
|
|
1119
|
+
}] });
|
|
1120
|
+
|
|
1092
1121
|
/**
|
|
1093
1122
|
* Generated bundle index. Do not edit.
|
|
1094
1123
|
*/
|
|
1095
1124
|
|
|
1096
|
-
export { APP_LAYOUT, AngularComponentsModule, AppContainerComponent, AppDrawerComponent, AppFooterComponent, AppLayoutComponent, AppPageComponent, BaseComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, FolderComponent, IconButtonComponent, IconComponent, LoadingSpinnerComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuUserComponent, NotFoundComponent, SpacerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TitleComponent, TopbarAvatarMenuComponent, TopbarComponent, WechatConnectDialogComponent, provideAngularLayout };
|
|
1125
|
+
export { APP_LAYOUT, AngularComponentsModule, AppContainerComponent, AppDrawerComponent, AppFooterComponent, AppLayoutComponent, AppPageComponent, BaseComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, FolderComponent, IconButtonComponent, IconComponent, LoadingSpinnerComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuUserComponent, NotFoundComponent, PaginatorComponent, SpacerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TableComponent, TitleComponent, TopbarAvatarMenuComponent, TopbarComponent, WechatConnectDialogComponent, provideAngularLayout };
|
|
1097
1126
|
//# sourceMappingURL=rolatech-angular-components.mjs.map
|