@rolatech/angular-components 20.2.1 → 20.2.2-beta.2
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.
|
@@ -1260,11 +1260,14 @@ class MediaListComponent {
|
|
|
1260
1260
|
this.upload.emit(event);
|
|
1261
1261
|
}
|
|
1262
1262
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MediaListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1263
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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=\"
|
|
1263
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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" }, host: { attributes: { "id": "rolatech-media-list" }, classAttribute: "rolatech-media-list" }, ngImport: i0, template: "<div class=\"flex flex-row flex-wrap box-border items-center\">\n <div class=\"flex flex-row flex-wrap box-border items-center w-full\">\n <ng-content></ng-content>\n @if (showAdd()) {\n <div class=\"upload-button\">\n @if (!isUploading()) {\n <div\n class=\"flex flex-col items-center justify-center border border-[--rt-border-color] border-dashed rounded-md aspect-video cursor-pointer\"\n (click)=\"fileInput.click()\"\n >\n <input\n style=\"display: none\"\n type=\"file\"\n accept=\"image/*, video/*\"\n (change)=\"onUpload($event)\"\n #fileInput\n multiple\n />\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n </svg>\n </div>\n } @else {\n <div class=\"w-full py-1\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: ["rolatech-media-list{--rt-media-items-per-row: 1;--rt-media-item-margin: 16px}rolatech-media-list-item:before{border-radius:12px}.upload-button{margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);margin-bottom:var(--rt-media-item-margin);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}rolatech-media-list:not([list]){--rt-media-items-per-row: 2}rolatech-media-list:not([list]) rolatech-media-list-item{margin-bottom:16px}@media(min-width:600px){rolatech-media-list:not([list]){--rt-media-items-per-row: 2}}@media(min-width:768px){rolatech-media-list:not([list]){--rt-media-items-per-row: 2}}@media(min-width:1280px){rolatech-media-list:not([list]){--rt-media-items-per-row: 3}}@media(min-width:1536px){rolatech-media-list:not([list]){--rt-media-items-per-row: 4}}@media(min-width:1920px){rolatech-media-list:not([list]){--rt-media-items-per-row: 5}}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1264
1264
|
}
|
|
1265
1265
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MediaListComponent, decorators: [{
|
|
1266
1266
|
type: Component,
|
|
1267
|
-
args: [{ selector: 'rolatech-media-list', imports: [MatProgressBarModule],
|
|
1267
|
+
args: [{ selector: 'rolatech-media-list', imports: [MatProgressBarModule], encapsulation: ViewEncapsulation.None, host: {
|
|
1268
|
+
id: 'rolatech-media-list',
|
|
1269
|
+
class: 'rolatech-media-list',
|
|
1270
|
+
}, template: "<div class=\"flex flex-row flex-wrap box-border items-center\">\n <div class=\"flex flex-row flex-wrap box-border items-center w-full\">\n <ng-content></ng-content>\n @if (showAdd()) {\n <div class=\"upload-button\">\n @if (!isUploading()) {\n <div\n class=\"flex flex-col items-center justify-center border border-[--rt-border-color] border-dashed rounded-md aspect-video cursor-pointer\"\n (click)=\"fileInput.click()\"\n >\n <input\n style=\"display: none\"\n type=\"file\"\n accept=\"image/*, video/*\"\n (change)=\"onUpload($event)\"\n #fileInput\n multiple\n />\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n </svg>\n </div>\n } @else {\n <div class=\"w-full py-1\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: ["rolatech-media-list{--rt-media-items-per-row: 1;--rt-media-item-margin: 16px}rolatech-media-list-item:before{border-radius:12px}.upload-button{margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);margin-bottom:var(--rt-media-item-margin);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}rolatech-media-list:not([list]){--rt-media-items-per-row: 2}rolatech-media-list:not([list]) rolatech-media-list-item{margin-bottom:16px}@media(min-width:600px){rolatech-media-list:not([list]){--rt-media-items-per-row: 2}}@media(min-width:768px){rolatech-media-list:not([list]){--rt-media-items-per-row: 2}}@media(min-width:1280px){rolatech-media-list:not([list]){--rt-media-items-per-row: 3}}@media(min-width:1536px){rolatech-media-list:not([list]){--rt-media-items-per-row: 4}}@media(min-width:1920px){rolatech-media-list:not([list]){--rt-media-items-per-row: 5}}\n"] }]
|
|
1268
1271
|
}], propDecorators: { isUploading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isUploading", required: false }] }], media: [{ type: i0.Input, args: [{ isSignal: true, alias: "media", required: false }] }], showAdd: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAdd", required: false }] }], mediaItemClick: [{ type: i0.Output, args: ["mediaItemClick"] }], upload: [{ type: i0.Output, args: ["upload"] }] } });
|
|
1269
1272
|
|
|
1270
1273
|
class MediaListItemComponent {
|
|
@@ -1280,11 +1283,14 @@ class MediaListItemComponent {
|
|
|
1280
1283
|
this.deleteMedia.emit(media);
|
|
1281
1284
|
}
|
|
1282
1285
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MediaListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1283
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaItemClick: "mediaItemClick", deleteMedia: "deleteMedia" }, ngImport: i0, template: "<div\n class=\"group media-list-item relative hasImage focus:outline-none focus:shadow-outline bg-[--rt-raised-background] cursor-pointer text-transparent hover:text-white shadow-sm\"\n>\n <div class=\"absolute z-30 right-0 p-1 group-hover:bg-white\">\n <div class=\"flex-1\"></div>\n <div class=\"w-full\">\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"beforeMenu\"\n class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1 group-hover:bg-white\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item (click)=\"onDeleteMedia(media())\">\n <span i18n>Delete</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<div class=\"w-full py-1\">\n @if (uploading()) {\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n }\n</div>\n", styles: ["
|
|
1286
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaItemClick: "mediaItemClick", deleteMedia: "deleteMedia" }, host: { attributes: { "id": "rolatech-media-list-item" }, classAttribute: "rolatech-media-list-item" }, ngImport: i0, template: "<div\n class=\"group media-list-item rounded-md relative hasImage focus:outline-none focus:shadow-outline bg-[--rt-raised-background] cursor-pointer text-transparent hover:text-white shadow-sm\"\n>\n <div class=\"absolute z-30 right-0 p-1 group-hover:bg-white\">\n <div class=\"flex-1\"></div>\n <div class=\"w-full\">\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"beforeMenu\"\n class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1 group-hover:bg-white\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item (click)=\"onDeleteMedia(media())\">\n <span i18n>Delete</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<div class=\"w-full py-1\">\n @if (uploading()) {\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n }\n</div>\n", styles: ["rolatech-media-list-item{--rt-media-item-margin: 16px;margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}.media-list-item{cursor:pointer;width:100%;aspect-ratio:16/9}.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}rolatech-media-list-item{--rt-media-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.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$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1284
1287
|
}
|
|
1285
1288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MediaListItemComponent, decorators: [{
|
|
1286
1289
|
type: Component,
|
|
1287
|
-
args: [{ selector: 'rolatech-media-list-item', imports: [MatButtonModule, MatMenuModule, MatIconModule, MatProgressBar],
|
|
1290
|
+
args: [{ selector: 'rolatech-media-list-item', imports: [MatButtonModule, MatMenuModule, MatIconModule, MatProgressBar], encapsulation: ViewEncapsulation.None, host: {
|
|
1291
|
+
id: 'rolatech-media-list-item',
|
|
1292
|
+
class: 'rolatech-media-list-item',
|
|
1293
|
+
}, template: "<div\n class=\"group media-list-item rounded-md relative hasImage focus:outline-none focus:shadow-outline bg-[--rt-raised-background] cursor-pointer text-transparent hover:text-white shadow-sm\"\n>\n <div class=\"absolute z-30 right-0 p-1 group-hover:bg-white\">\n <div class=\"flex-1\"></div>\n <div class=\"w-full\">\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"beforeMenu\"\n class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1 group-hover:bg-white\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item (click)=\"onDeleteMedia(media())\">\n <span i18n>Delete</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<div class=\"w-full py-1\">\n @if (uploading()) {\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n }\n</div>\n", styles: ["rolatech-media-list-item{--rt-media-item-margin: 16px;margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}.media-list-item{cursor:pointer;width:100%;aspect-ratio:16/9}.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}rolatech-media-list-item{--rt-media-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}\n"] }]
|
|
1288
1294
|
}], propDecorators: { media: [{ type: i0.Input, args: [{ isSignal: true, alias: "media", required: true }] }], uploadProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadProgress", required: false }] }], uploading: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploading", required: false }] }], mediaItemClick: [{ type: i0.Output, args: ["mediaItemClick"] }], deleteMedia: [{ type: i0.Output, args: ["deleteMedia"] }] } });
|
|
1289
1295
|
|
|
1290
1296
|
class NotFoundComponent {
|
|
@@ -1994,11 +2000,11 @@ class RichItemComponent {
|
|
|
1994
2000
|
thumbnailRatio = input('rectangle', ...(ngDevMode ? [{ debugName: "thumbnailRatio" }] : []));
|
|
1995
2001
|
thumbnailMode = input('full', ...(ngDevMode ? [{ debugName: "thumbnailMode" }] : []));
|
|
1996
2002
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RichItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1997
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: RichItemComponent, isStandalone: true, selector: "rolatech-rich-item", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, thumbnailRatio: { classPropertyName: "thumbnailRatio", publicName: "thumbnailRatio", isSignal: true, isRequired: false, transformFunction: null }, thumbnailMode: { classPropertyName: "thumbnailMode", publicName: "thumbnailMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-rich-item": "this.hasClass" } }, ngImport: i0, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n @defer (on viewport()) {\n <rolatech-thumbnail\n [src]=\"thumbnail()\"\n size=\"medium\"\n [ratio]=\"thumbnailRatio()\"\n [mode]=\"thumbnailMode()\"\n ></rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-10-percent-layer] h-full w-full object-cover aspect-video rounded-lg\"></div>\n }\n</div>\n<div id=\"details\" class=\"rolatech-rich-item\">\n <div>\n <div class=\"py-1\">\n <a class=\"md:text-xl font-bold break-words line-clamp-1 md:line-clamp-2 whitespace-normal\">\n {{ title() }}\n </a>\n </div>\n <div class=\"invisible h-0 md:h-auto md:visible break-words line-clamp-1 whitespace-normal\">\n {{ subtitle() }}\n </div>\n <ng-content></ng-content>\n </div>\n @if (price()) {\n <div class=\"md:text-lg font-bold py-1\">{{ price() | price }}</div>\n }\n</div>\n", styles: ["rolatech-rich-item{--rt-rich-view-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-rich-view-item-margin) / 2);margin-right:calc(var(--rt-rich-view-item-margin) / 2);width:calc(100% / var(--rt-rich-view-items-per-row) - var(--rt-rich-view-item-margin)
|
|
2003
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: RichItemComponent, isStandalone: true, selector: "rolatech-rich-item", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, thumbnailRatio: { classPropertyName: "thumbnailRatio", publicName: "thumbnailRatio", isSignal: true, isRequired: false, transformFunction: null }, thumbnailMode: { classPropertyName: "thumbnailMode", publicName: "thumbnailMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-rich-item": "this.hasClass" } }, ngImport: i0, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n @defer (on viewport()) {\n <rolatech-thumbnail\n [src]=\"thumbnail()\"\n size=\"medium\"\n [ratio]=\"thumbnailRatio()\"\n [mode]=\"thumbnailMode()\"\n ></rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-10-percent-layer] h-full w-full object-cover aspect-video rounded-lg\"></div>\n }\n</div>\n<div id=\"details\" class=\"rolatech-rich-item\">\n <div>\n <div class=\"py-1\">\n <a class=\"md:text-xl font-bold break-words line-clamp-1 md:line-clamp-2 whitespace-normal\">\n {{ title() }}\n </a>\n </div>\n <div class=\"invisible h-0 md:h-auto md:visible break-words line-clamp-1 whitespace-normal\">\n {{ subtitle() }}\n </div>\n <ng-content></ng-content>\n </div>\n @if (price()) {\n <div class=\"md:text-lg font-bold py-1\">{{ price() | price }}</div>\n }\n</div>\n", styles: ["rolatech-rich-item{--rt-rich-view-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-rich-view-item-margin) / 2);margin-right:calc(var(--rt-rich-view-item-margin) / 2);width:calc(100% / var(--rt-rich-view-items-per-row) - var(--rt-rich-view-item-margin))}#details.rolatech-rich-item{display:flex;flex-direction:column;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: PricePipe, name: "price" }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)]] });
|
|
1998
2004
|
}
|
|
1999
2005
|
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.0", ngImport: i0, type: RichItemComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)], resolveMetadata: ThumbnailComponent => ({ decorators: [{
|
|
2000
2006
|
type: Component,
|
|
2001
|
-
args: [{ selector: 'rolatech-rich-item', imports: [CommonModule, ThumbnailComponent, PricePipe], encapsulation: ViewEncapsulation.None, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n @defer (on viewport()) {\n <rolatech-thumbnail\n [src]=\"thumbnail()\"\n size=\"medium\"\n [ratio]=\"thumbnailRatio()\"\n [mode]=\"thumbnailMode()\"\n ></rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-10-percent-layer] h-full w-full object-cover aspect-video rounded-lg\"></div>\n }\n</div>\n<div id=\"details\" class=\"rolatech-rich-item\">\n <div>\n <div class=\"py-1\">\n <a class=\"md:text-xl font-bold break-words line-clamp-1 md:line-clamp-2 whitespace-normal\">\n {{ title() }}\n </a>\n </div>\n <div class=\"invisible h-0 md:h-auto md:visible break-words line-clamp-1 whitespace-normal\">\n {{ subtitle() }}\n </div>\n <ng-content></ng-content>\n </div>\n @if (price()) {\n <div class=\"md:text-lg font-bold py-1\">{{ price() | price }}</div>\n }\n</div>\n", styles: ["rolatech-rich-item{--rt-rich-view-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-rich-view-item-margin) / 2);margin-right:calc(var(--rt-rich-view-item-margin) / 2);width:calc(100% / var(--rt-rich-view-items-per-row) - var(--rt-rich-view-item-margin)
|
|
2007
|
+
args: [{ selector: 'rolatech-rich-item', imports: [CommonModule, ThumbnailComponent, PricePipe], encapsulation: ViewEncapsulation.None, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n @defer (on viewport()) {\n <rolatech-thumbnail\n [src]=\"thumbnail()\"\n size=\"medium\"\n [ratio]=\"thumbnailRatio()\"\n [mode]=\"thumbnailMode()\"\n ></rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-10-percent-layer] h-full w-full object-cover aspect-video rounded-lg\"></div>\n }\n</div>\n<div id=\"details\" class=\"rolatech-rich-item\">\n <div>\n <div class=\"py-1\">\n <a class=\"md:text-xl font-bold break-words line-clamp-1 md:line-clamp-2 whitespace-normal\">\n {{ title() }}\n </a>\n </div>\n <div class=\"invisible h-0 md:h-auto md:visible break-words line-clamp-1 whitespace-normal\">\n {{ subtitle() }}\n </div>\n <ng-content></ng-content>\n </div>\n @if (price()) {\n <div class=\"md:text-lg font-bold py-1\">{{ price() | price }}</div>\n }\n</div>\n", styles: ["rolatech-rich-item{--rt-rich-view-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-rich-view-item-margin) / 2);margin-right:calc(var(--rt-rich-view-item-margin) / 2);width:calc(100% / var(--rt-rich-view-items-per-row) - var(--rt-rich-view-item-margin))}#details.rolatech-rich-item{display:flex;flex-direction:column;justify-content:space-between}\n"] }]
|
|
2002
2008
|
}], ctorParameters: null, propDecorators: { hasClass: [{
|
|
2003
2009
|
type: HostBinding,
|
|
2004
2010
|
args: ['class.rolatech-rich-item']
|