@rolatech/angular-components 17.7.0 → 17.7.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.
- package/esm2022/lib/rich-item/rich-item.component.mjs +4 -3
- package/esm2022/lib/rich-view/rich-view.component.mjs +3 -3
- package/esm2022/lib/thumbnail/thumbnail.component.mjs +2 -2
- package/fesm2022/rolatech-angular-components.mjs +6 -5
- package/fesm2022/rolatech-angular-components.mjs.map +1 -1
- package/lib/rich-item/rich-item.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -9,14 +9,15 @@ export class RichItemComponent {
|
|
|
9
9
|
title = input();
|
|
10
10
|
subtitle = input();
|
|
11
11
|
price = input(0);
|
|
12
|
+
thumbnailRatio = input('rectangle');
|
|
12
13
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RichItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: RichItemComponent, isStandalone: true, selector: "rolatech-rich-item", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-rich-item": "this.hasClass" } }, ngImport: i0, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\" ratio=\"
|
|
14
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", 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 } }, host: { properties: { "class.rolatech-rich-item": "this.hasClass" } }, ngImport: i0, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\" [ratio]=\"thumbnailRatio()\"></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\">\u00A5{{ 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) - .01px)}#details.rolatech-rich-item{display:flex;flex-direction:column;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [import("../thumbnail/thumbnail.component").then(m => m.ThumbnailComponent)]] });
|
|
14
15
|
}
|
|
15
16
|
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.4", ngImport: i0, type: RichItemComponent, resolveDeferredDeps: () => [import("../thumbnail/thumbnail.component").then(m => m.ThumbnailComponent)], resolveMetadata: ThumbnailComponent => ({ decorators: [{
|
|
16
17
|
type: Component,
|
|
17
|
-
args: [{ selector: 'rolatech-rich-item', standalone: true, imports: [CommonModule, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\" ratio=\"
|
|
18
|
+
args: [{ selector: 'rolatech-rich-item', standalone: true, imports: [CommonModule, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\" [ratio]=\"thumbnailRatio()\"></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\">\u00A5{{ 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) - .01px)}#details.rolatech-rich-item{display:flex;flex-direction:column;justify-content:space-between}\n"] }]
|
|
18
19
|
}], ctorParameters: null, propDecorators: { hasClass: [{
|
|
19
20
|
type: HostBinding,
|
|
20
21
|
args: ['class.rolatech-rich-item']
|
|
21
22
|
}] } }) });
|
|
22
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
23
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmljaC1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1jb21wb25lbnRzL3NyYy9saWIvcmljaC1pdGVtL3JpY2gtaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL3JpY2gtaXRlbS9yaWNoLWl0ZW0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsaUJBQWlCLEVBQUUsZ0JBQWdCLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ25HLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFXL0MsTUFBTSxPQUFPLGlCQUFpQjtJQUNhLFFBQVEsR0FBRyxJQUFJLENBQUM7SUFDekQsSUFBSSxHQUFHLEtBQUssQ0FBQyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsQ0FBQyxDQUFDO0lBQ3JELFNBQVMsR0FBRyxLQUFLLEVBQVUsQ0FBQztJQUM1QixNQUFNLEdBQUcsS0FBSyxFQUFVLENBQUM7SUFDekIsS0FBSyxHQUFHLEtBQUssRUFBVSxDQUFDO0lBQ3hCLFFBQVEsR0FBRyxLQUFLLEVBQVUsQ0FBQztJQUMzQixLQUFLLEdBQUcsS0FBSyxDQUFNLENBQUMsQ0FBQyxDQUFDO0lBQ3RCLGNBQWMsR0FBRyxLQUFLLENBQVMsV0FBVyxDQUFDLENBQUM7dUdBUmpDLGlCQUFpQjsyRkFBakIsaUJBQWlCLHloQ0NaOUIsaTFCQXVCQSw0ZERoQlksWUFBWTs7Z0dBS1gsaUJBQWlCO3NCQVI3QixTQUFTO21DQUNFLG9CQUFvQixjQUNsQixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsa0JBQWtCLENBQUMsaUJBRzVCLGlCQUFpQixDQUFDLElBQUk7d0RBR0ksUUFBUTswQkFBaEQsV0FBVzsyQkFBQywwQkFBMEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBWaWV3RW5jYXBzdWxhdGlvbiwgYm9vbGVhbkF0dHJpYnV0ZSwgaW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBUaHVtYm5haWxDb21wb25lbnQgfSBmcm9tICcuLi90aHVtYm5haWwvdGh1bWJuYWlsLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3JvbGF0ZWNoLXJpY2gtaXRlbScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIFRodW1ibmFpbENvbXBvbmVudF0sXG4gIHRlbXBsYXRlVXJsOiAnLi9yaWNoLWl0ZW0uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vcmljaC1pdGVtLmNvbXBvbmVudC5zY3NzJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgUmljaEl0ZW1Db21wb25lbnQge1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLnJvbGF0ZWNoLXJpY2gtaXRlbScpIGhhc0NsYXNzID0gdHJ1ZTtcbiAgbGlzdCA9IGlucHV0KGZhbHNlLCB7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSB9KTtcbiAgdGh1bWJuYWlsID0gaW5wdXQ8c3RyaW5nPigpO1xuICBhdmF0YXIgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHRpdGxlID0gaW5wdXQ8c3RyaW5nPigpO1xuICBzdWJ0aXRsZSA9IGlucHV0PHN0cmluZz4oKTtcbiAgcHJpY2UgPSBpbnB1dDxhbnk+KDApO1xuICB0aHVtYm5haWxSYXRpbyA9IGlucHV0PHN0cmluZz4oJ3JlY3RhbmdsZScpO1xufVxuIiwiPGRpdiBpZD1cInRodW1ibmFpbFwiIGNsYXNzPVwicm9sYXRlY2gtcmljaC1pdGVtXCI+XG4gIEBkZWZlciAob24gdmlld3BvcnQoKSkge1xuICAgIDxyb2xhdGVjaC10aHVtYm5haWwgW3NyY109XCJ0aHVtYm5haWwoKVwiIHNpemU9XCJtZWRpdW1cIiBbcmF0aW9dPVwidGh1bWJuYWlsUmF0aW8oKVwiPjwvcm9sYXRlY2gtdGh1bWJuYWlsPlxuICB9IEBwbGFjZWhvbGRlciB7XG4gICAgPGRpdiBjbGFzcz1cImJnLVstLXJ0LTEwLXBlcmNlbnQtbGF5ZXJdIGgtZnVsbCB3LWZ1bGwgb2JqZWN0LWNvdmVyIGFzcGVjdC12aWRlbyByb3VuZGVkLWxnXCI+PC9kaXY+XG4gIH1cbjwvZGl2PlxuPGRpdiBpZD1cImRldGFpbHNcIiBjbGFzcz1cInJvbGF0ZWNoLXJpY2gtaXRlbVwiPlxuICA8ZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJweS0xXCI+XG4gICAgICA8YSBjbGFzcz1cIm1kOnRleHQteGwgZm9udC1ib2xkIGJyZWFrLXdvcmRzIGxpbmUtY2xhbXAtMSBtZDpsaW5lLWNsYW1wLTIgd2hpdGVzcGFjZS1ub3JtYWxcIj5cbiAgICAgICAge3sgdGl0bGUoKSB9fVxuICAgICAgPC9hPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJpbnZpc2libGUgaC0wIG1kOmgtYXV0byBtZDp2aXNpYmxlIGJyZWFrLXdvcmRzIGxpbmUtY2xhbXAtMSB3aGl0ZXNwYWNlLW5vcm1hbFwiPlxuICAgICAge3sgc3VidGl0bGUoKSB9fVxuICAgIDwvZGl2PlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPC9kaXY+XG4gIEBpZiAocHJpY2UoKSkge1xuICAgIDxkaXYgY2xhc3M9XCJtZDp0ZXh0LWxnIGZvbnQtYm9sZCBweS0xXCI+wqV7eyBwcmljZSgpIH19PC9kaXY+XG4gIH1cbjwvZGl2PlxuIl19
|
|
@@ -58,11 +58,11 @@ export class RichViewComponent {
|
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RichViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
61
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.1.4", type: RichViewComponent, isStandalone: true, selector: "rolatech-rich-view", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-rich-view": "this.hasClass", "class.scrollbar-hide": "this.disableScrollbar" } }, queries: [{ propertyName: "items", predicate: RichItemComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n<!-- <div class=\"rich-view-content\">\n <ng-content></ng-content>\n</div> -->\n<!-- <div class=\"rich-view-button\">\n <button mat-stroked-button>\u52A0\u8F7D\u66F4\u591A</button>\n</div> -->\n", styles: ["rolatech-rich-view{--rt-rich-view-items-per-row: 1;--rt-rich-view-item-max-width: 500px;position:relative;display:flex;padding-bottom:16px;margin-bottom:56px}rolatech-rich-view[list]{flex-direction:column;flex-wrap:nowrap}rolatech-rich-view[wrap]{flex-wrap:wrap}rolatech-rich-view:not([wrap]){overflow-x:scroll}rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 40%;min-width:var(--rt-rich-view-item-min-width)}@media (min-width: 768px){rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 28%}}rolatech-rich-view[list] rolatech-rich-item{flex-direction:row;padding:12px 0;cursor:pointer}rolatech-rich-view[list] rolatech-rich-item #thumbnail.rolatech-rich-item{width:33%;min-width:33%}rolatech-rich-view[list] rolatech-rich-item #details.rolatech-rich-item{margin-left:12px}rolatech-rich-view[list] rolatech-rich-item:hover{background-color:var(--rt-10-percent-layer)}rolatech-rich-view:not([list]) rolatech-rich-item{margin-bottom:32px}@media (min-width: 600px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row:
|
|
61
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.1.4", type: RichViewComponent, isStandalone: true, selector: "rolatech-rich-view", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-rich-view": "this.hasClass", "class.scrollbar-hide": "this.disableScrollbar" } }, queries: [{ propertyName: "items", predicate: RichItemComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n<!-- <div class=\"rich-view-content\">\n <ng-content></ng-content>\n</div> -->\n<!-- <div class=\"rich-view-button\">\n <button mat-stroked-button>\u52A0\u8F7D\u66F4\u591A</button>\n</div> -->\n", styles: ["rolatech-rich-view{--rt-rich-view-items-per-row: 1;--rt-rich-view-item-max-width: 500px;position:relative;display:flex;padding-bottom:16px;margin-bottom:56px}rolatech-rich-view[list]{flex-direction:column;flex-wrap:nowrap}rolatech-rich-view[wrap]{flex-wrap:wrap;--rt-rich-view-items-per-row: 2}rolatech-rich-view:not([wrap]){overflow-x:scroll}rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 40%;min-width:var(--rt-rich-view-item-min-width)}@media (min-width: 768px){rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 28%}}rolatech-rich-view[list] rolatech-rich-item{flex-direction:row;padding:12px 0;cursor:pointer}rolatech-rich-view[list] rolatech-rich-item #thumbnail.rolatech-rich-item{width:33%;min-width:33%}rolatech-rich-view[list] rolatech-rich-item #details.rolatech-rich-item{margin-left:12px}rolatech-rich-view[list] rolatech-rich-item:hover{background-color:var(--rt-10-percent-layer)}rolatech-rich-view:not([list]) rolatech-rich-item{margin-bottom:32px}@media (min-width: 600px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 2}}@media (min-width: 768px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 5}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.rich-view-button{position:absolute;bottom:-44px;left:50%;transform:translate(-50%,-50%);background-color:var(--yt-spec-base-background);z-index:1;width:360px;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
62
62
|
}
|
|
63
63
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RichViewComponent, decorators: [{
|
|
64
64
|
type: Component,
|
|
65
|
-
args: [{ selector: 'rolatech-rich-view', standalone: true, imports: [CommonModule, ThumbnailComponent, MatButtonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n\n<!-- <div class=\"rich-view-content\">\n <ng-content></ng-content>\n</div> -->\n<!-- <div class=\"rich-view-button\">\n <button mat-stroked-button>\u52A0\u8F7D\u66F4\u591A</button>\n</div> -->\n", styles: ["rolatech-rich-view{--rt-rich-view-items-per-row: 1;--rt-rich-view-item-max-width: 500px;position:relative;display:flex;padding-bottom:16px;margin-bottom:56px}rolatech-rich-view[list]{flex-direction:column;flex-wrap:nowrap}rolatech-rich-view[wrap]{flex-wrap:wrap}rolatech-rich-view:not([wrap]){overflow-x:scroll}rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 40%;min-width:var(--rt-rich-view-item-min-width)}@media (min-width: 768px){rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 28%}}rolatech-rich-view[list] rolatech-rich-item{flex-direction:row;padding:12px 0;cursor:pointer}rolatech-rich-view[list] rolatech-rich-item #thumbnail.rolatech-rich-item{width:33%;min-width:33%}rolatech-rich-view[list] rolatech-rich-item #details.rolatech-rich-item{margin-left:12px}rolatech-rich-view[list] rolatech-rich-item:hover{background-color:var(--rt-10-percent-layer)}rolatech-rich-view:not([list]) rolatech-rich-item{margin-bottom:32px}@media (min-width: 600px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row:
|
|
65
|
+
args: [{ selector: 'rolatech-rich-view', standalone: true, imports: [CommonModule, ThumbnailComponent, MatButtonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n\n<!-- <div class=\"rich-view-content\">\n <ng-content></ng-content>\n</div> -->\n<!-- <div class=\"rich-view-button\">\n <button mat-stroked-button>\u52A0\u8F7D\u66F4\u591A</button>\n</div> -->\n", styles: ["rolatech-rich-view{--rt-rich-view-items-per-row: 1;--rt-rich-view-item-max-width: 500px;position:relative;display:flex;padding-bottom:16px;margin-bottom:56px}rolatech-rich-view[list]{flex-direction:column;flex-wrap:nowrap}rolatech-rich-view[wrap]{flex-wrap:wrap;--rt-rich-view-items-per-row: 2}rolatech-rich-view:not([wrap]){overflow-x:scroll}rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 40%;min-width:var(--rt-rich-view-item-min-width)}@media (min-width: 768px){rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 28%}}rolatech-rich-view[list] rolatech-rich-item{flex-direction:row;padding:12px 0;cursor:pointer}rolatech-rich-view[list] rolatech-rich-item #thumbnail.rolatech-rich-item{width:33%;min-width:33%}rolatech-rich-view[list] rolatech-rich-item #details.rolatech-rich-item{margin-left:12px}rolatech-rich-view[list] rolatech-rich-item:hover{background-color:var(--rt-10-percent-layer)}rolatech-rich-view:not([list]) rolatech-rich-item{margin-bottom:32px}@media (min-width: 600px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 2}}@media (min-width: 768px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 5}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.rich-view-button{position:absolute;bottom:-44px;left:50%;transform:translate(-50%,-50%);background-color:var(--yt-spec-base-background);z-index:1;width:360px;max-width:100%}\n"] }]
|
|
66
66
|
}], ctorParameters: () => [], propDecorators: { hasClass: [{
|
|
67
67
|
type: HostBinding,
|
|
68
68
|
args: ['class.rolatech-rich-view']
|
|
@@ -70,4 +70,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
70
70
|
type: HostBinding,
|
|
71
71
|
args: ['class.scrollbar-hide']
|
|
72
72
|
}] } });
|
|
73
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
73
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmljaC12aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1jb21wb25lbnRzL3NyYy9saWIvcmljaC12aWV3L3JpY2gtdmlldy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL3JpY2gtdmlldy9yaWNoLXZpZXcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLFNBQVMsRUFDVCxVQUFVLEVBQ1YsV0FBVyxFQUVYLFdBQVcsRUFDWCxpQkFBaUIsRUFDakIsZ0JBQWdCLEVBQ2hCLGVBQWUsRUFDZixNQUFNLEVBQ04sTUFBTSxFQUNOLEtBQUssR0FDTixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsWUFBWSxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDbEUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDdEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDckUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDBCQUEwQixDQUFDOztBQVUzRCxNQUFNLE9BQU8saUJBQWlCO0lBQ2EsUUFBUSxHQUFHLElBQUksQ0FBQztJQUNwQixnQkFBZ0IsR0FBRyxJQUFJLENBQUM7SUFDN0QsVUFBVSxHQUFHLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQztJQUNqQyxFQUFFLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQ3hCLEtBQUssR0FBRyxlQUFlLENBQUMsaUJBQWlCLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLENBQUMsQ0FBQztJQUNqRSxJQUFJLEdBQUcsS0FBSyxDQUFDLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxDQUFDLENBQUM7SUFD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LGtCQUFrQixFQUFFLGVBQWUsQ0FBQyxpQkFHN0MsaUJBQWlCLENBQUMsSUFBSTt3REFHSSxRQUFRO3NCQUFoRCxXQUFXO3VCQUFDLDBCQUEwQjtnQkFDRixnQkFBZ0I7c0JBQXBELFdBQVc7dUJBQUMsc0JBQXNCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBIb3N0QmluZGluZyxcbiAgT25Jbml0LFxuICBQTEFURk9STV9JRCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG4gIGJvb2xlYW5BdHRyaWJ1dGUsXG4gIGNvbnRlbnRDaGlsZHJlbixcbiAgZWZmZWN0LFxuICBpbmplY3QsXG4gIGlucHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSwgaXNQbGF0Zm9ybUJyb3dzZXIgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgVGh1bWJuYWlsQ29tcG9uZW50IH0gZnJvbSAnLi4vdGh1bWJuYWlsL3RodW1ibmFpbC5jb21wb25lbnQnO1xuaW1wb3J0IHsgUmljaEl0ZW1Db21wb25lbnQgfSBmcm9tICcuLi9yaWNoLWl0ZW0vcmljaC1pdGVtLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBNYXRCdXR0b25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9idXR0b24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdyb2xhdGVjaC1yaWNoLXZpZXcnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBUaHVtYm5haWxDb21wb25lbnQsIE1hdEJ1dHRvbk1vZHVsZV0sXG4gIHRlbXBsYXRlVXJsOiAnLi9yaWNoLXZpZXcuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vcmljaC12aWV3LmNvbXBvbmVudC5zY3NzJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgUmljaFZpZXdDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyVmlld0luaXQge1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLnJvbGF0ZWNoLXJpY2gtdmlldycpIGhhc0NsYXNzID0gdHJ1ZTtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5zY3JvbGxiYXItaGlkZScpIGRpc2FibGVTY3JvbGxiYXIgPSB0cnVlO1xuICBwbGF0Zm9ybUlkID0gaW5qZWN0KFBMQVRGT1JNX0lEKTtcbiAgZWwgPSBpbmplY3QoRWxlbWVudFJlZik7XG4gIGl0ZW1zID0gY29udGVudENoaWxkcmVuKFJpY2hJdGVtQ29tcG9uZW50LCB7IHJlYWQ6IEVsZW1lbnRSZWYgfSk7XG4gIGxpc3QgPSBpbnB1dChmYWxzZSwgeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSk7XG4gIHdyYXAgPSBpbnB1dChmYWxzZSwgeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSk7XG4gIHByaXZhdGUgcmVzaXplT2JzZXJ2ZXIhOiBSZXNpemVPYnNlcnZlcjtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBlZmZlY3QoKCkgPT4ge1xuICAgICAgaWYgKHRoaXMubGlzdCgpKSB7XG4gICAgICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5zZXRBdHRyaWJ1dGUoJ2xpc3QnLCAnJyk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQucmVtb3ZlQXR0cmlidXRlKCdsaXN0JywgJycpO1xuICAgICAgfVxuICAgICAgaWYgKHRoaXMud3JhcCgpKSB7XG4gICAgICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5zZXRBdHRyaWJ1dGUoJ3dyYXAnLCAnJyk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQucmVtb3ZlQXR0cmlidXRlKCd3cmFwJywgJycpO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIGlmIChpc1BsYXRmb3JtQnJvd3Nlcih0aGlzLnBsYXRmb3JtSWQpKSB7XG4gICAgICB0aGlzLnJlc2l6ZU9ic2VydmVyID0gbmV3IFJlc2l6ZU9ic2VydmVyKChlbnRyaWVzKSA9PiB7XG4gICAgICAgIGZvciAobGV0IGVudHJ5IG9mIGVudHJpZXMpIHtcbiAgICAgICAgICAvLyB0aGlzLnNldEN1c3RvbVByb3BlcnRpZXMoZW50cnkuY29udGVudFJlY3Qud2lkdGgpO1xuICAgICAgICB9XG4gICAgICB9KTtcbiAgICAgIHRoaXMucmVzaXplT2JzZXJ2ZXIub2JzZXJ2ZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQpO1xuICAgIH1cbiAgfVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHt9XG4gIHNldEN1c3RvbVByb3BlcnRpZXMod2lkdGg6IG51bWJlcikge1xuICAgIGlmICh3aWR0aCA8PSA2MDApIHtcbiAgICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5zdHlsZS5zZXRQcm9wZXJ0eSgnLS1ydC1yaWNoLXZpZXctaXRlbXMtcGVyLXJvdycsIDEpO1xuICAgIH1cbiAgICBpZiAoNjAwIDwgd2lkdGggJiYgd2lkdGggPD0gNzY4KSB7XG4gICAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoJy0tcnQtcmljaC12aWV3LWl0ZW1zLXBlci1yb3cnLCAyKTtcbiAgICB9XG4gICAgaWYgKDc2OCA8IHdpZHRoICYmIHdpZHRoIDw9IDEyODApIHtcbiAgICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5zdHlsZS5zZXRQcm9wZXJ0eSgnLS1ydC1yaWNoLXZpZXctaXRlbXMtcGVyLXJvdycsIDMpO1xuICAgIH1cbiAgICBpZiAoMTI4MCA8IHdpZHRoICYmIHdpZHRoIDw9IDE1MzYpIHtcbiAgICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5zdHlsZS5zZXRQcm9wZXJ0eSgnLS1ydC1yaWNoLXZpZXctaXRlbXMtcGVyLXJvdycsIDQpO1xuICAgIH1cbiAgICBpZiAod2lkdGggPiAxNTM2KSB7XG4gICAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoJy0tcnQtcmljaC12aWV3LWl0ZW1zLXBlci1yb3cnLCA1KTtcbiAgICB9XG4gIH1cbn1cbiIsIjxuZy1jb250ZW50PjwvbmctY29udGVudD5cblxuPCEtLSA8ZGl2IGNsYXNzPVwicmljaC12aWV3LWNvbnRlbnRcIj5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9kaXY+IC0tPlxuPCEtLSA8ZGl2IGNsYXNzPVwicmljaC12aWV3LWJ1dHRvblwiPlxuICA8YnV0dG9uIG1hdC1zdHJva2VkLWJ1dHRvbj7liqDovb3mm7TlpJo8L2J1dHRvbj5cbjwvZGl2PiAtLT5cbiJdfQ==
|
|
@@ -8,7 +8,7 @@ export class ThumbnailComponent {
|
|
|
8
8
|
src = input();
|
|
9
9
|
size = input();
|
|
10
10
|
mode = input('clip'); // full, clip
|
|
11
|
-
ratio = input('
|
|
11
|
+
ratio = input('rectangle'); // rectangle, square
|
|
12
12
|
img = viewChild.required('img');
|
|
13
13
|
width = input();
|
|
14
14
|
height = input();
|
|
@@ -43,4 +43,4 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.4", ng
|
|
|
43
43
|
type: HostBinding,
|
|
44
44
|
args: ['style.--rt-thumbnail-padding-top']
|
|
45
45
|
}] } }) });
|
|
46
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
46
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGh1bWJuYWlsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1jb21wb25lbnRzL3NyYy9saWIvdGh1bWJuYWlsL3RodW1ibmFpbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL3RodW1ibmFpbC90aHVtYm5haWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsVUFBVSxFQUNWLFdBQVcsRUFDWCxTQUFTLEVBQ1QsaUJBQWlCLEVBQ2pCLE1BQU0sRUFDTixNQUFNLEVBQ04sS0FBSyxFQUNMLFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBWS9DLE1BQU0sT0FBTyxrQkFBa0I7SUFDWSxRQUFRLEdBQUcsSUFBSSxDQUFDO0lBQ1IsT0FBTyxHQUFHLFFBQVEsQ0FBQztJQUNwRSxFQUFFLEdBQUcsTUFBTSxDQUFDLENBQUEsVUFBdUIsQ0FBQSxDQUFDLENBQUM7SUFDckMsR0FBRyxHQUFHLEtBQUssRUFBVSxDQUFDO0lBQ3RCLElBQUksR0FBRyxLQUFLLEVBQVUsQ0FBQztJQUN2QixJQUFJLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsYUFBYTtJQUNuQyxLQUFLLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsb0JBQW9CO0lBQ2hELEdBQUcsR0FBRyxTQUFTLENBQUMsUUFBUSxDQUFhLEtBQUssQ0FBQyxDQUFDO0lBQzVDLEtBQUssR0FBRyxLQUFLLEVBQXNCLENBQUM7SUFDcEMsTUFBTSxHQUFHLEtBQUssRUFBc0IsQ0FBQztJQUNyQyxRQUFRLEdBQUcsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzdCLEtBQUssR0FBRyxNQUFNLENBQUMsR0FBRyxFQUFFO1FBQ2xCLElBQUksQ0FBQyxRQUFRLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLE1BQU0sRUFBRSxJQUFJLENBQUMsSUFBSSxFQUFHLENBQUMsQ0FBQztJQUMxRSxDQUFDLENBQUMsQ0FBQztJQUNILElBQUksR0FBRyxNQUFNLENBQUMsR0FBRyxFQUFFO1FBQ2pCLElBQUksQ0FBQyxRQUFRLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLE1BQU0sRUFBRSxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQztRQUN2RSxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsS0FBSyxNQUFNLEVBQUUsQ0FBQztZQUMzQixJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQztnQkFDbEMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsY0FBYyxFQUFFLElBQUksQ0FBQyxLQUFLLEVBQUcsR0FBRyxJQUFJLENBQUMsTUFBTSxFQUFHLENBQUMsQ0FBQztZQUNoRyxDQUFDO2lCQUFNLENBQUM7Z0JBQ04sSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsY0FBYyxFQUFFLEVBQUUsR0FBRyxDQUFDLENBQUMsQ0FBQztZQUN4RSxDQUFDO1FBQ0gsQ0FBQztJQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0gsUUFBUSxHQUFHLE1BQU0sQ0FBQyxHQUFHLEVBQUU7UUFDckIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsT0FBTyxFQUFFLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDO0lBQzNFLENBQUMsQ0FBQyxDQUFDO3VHQTNCUSxrQkFBa0I7MkZBQWxCLGtCQUFrQix3Z0NDeEIvQixxU0FRQSxnaUREVVksWUFBWTs7Z0dBTVgsa0JBQWtCO3NCQVQ5QixTQUFTO21DQUNFLG9CQUFvQixjQUNsQixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsY0FBYyxDQUFDLGlCQUd4QixpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNO3dEQUdOLFFBQVE7MEJBQWhELFdBQVc7MkJBQUMsMEJBQTBCO29CQUNVLE9BQU87MEJBQXZELFdBQVc7MkJBQUMsa0NBQWtDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIFJlbmRlcmVyMixcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG4gIGVmZmVjdCxcbiAgaW5qZWN0LFxuICBpbnB1dCxcbiAgdmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBJbWFnZUNvbXBvbmVudCB9IGZyb20gJy4uL2ltYWdlL2ltYWdlLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3JvbGF0ZWNoLXRodW1ibmFpbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEltYWdlQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL3RodW1ibmFpbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi90aHVtYm5haWwuY29tcG9uZW50LnNjc3MnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgVGh1bWJuYWlsQ29tcG9uZW50IHtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5ydC1yaWNoLWdyaWQtbWVkaWEnKSBoYXNDbGFzcyA9IHRydWU7XG4gIEBIb3N0QmluZGluZygnc3R5bGUuLS1ydC10aHVtYm5haWwtcGFkZGluZy10b3AnKSBteUNvbG9yID0gJzU2LjI1JSc7XG4gIGVsID0gaW5qZWN0KEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+KTtcbiAgc3JjID0gaW5wdXQ8c3RyaW5nPigpO1xuICBzaXplID0gaW5wdXQ8c3RyaW5nPigpO1xuICBtb2RlID0gaW5wdXQoJ2NsaXAnKTsgLy8gZnVsbCwgY2xpcFxuICByYXRpbyA9IGlucHV0KCdyZWN0YW5nbGUnKTsgLy8gcmVjdGFuZ2xlLCBzcXVhcmVcbiAgaW1nID0gdmlld0NoaWxkLnJlcXVpcmVkPEVsZW1lbnRSZWY+KCdpbWcnKTtcbiAgd2lkdGggPSBpbnB1dDxudW1iZXIgfCB1bmRlZmluZWQ+KCk7XG4gIGhlaWdodCA9IGlucHV0PG51bWJlciB8IHVuZGVmaW5lZD4oKTtcbiAgcmVuZGVyZXIgPSBpbmplY3QoUmVuZGVyZXIyKTtcbiAgc2l6ZWEgPSBlZmZlY3QoKCkgPT4ge1xuICAgIHRoaXMucmVuZGVyZXIuc2V0QXR0cmlidXRlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ3NpemUnLCB0aGlzLnNpemUoKSEpO1xuICB9KTtcbiAgZnVsbCA9IGVmZmVjdCgoKSA9PiB7XG4gICAgdGhpcy5yZW5kZXJlci5zZXRBdHRyaWJ1dGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAnbW9kZScsIHRoaXMubW9kZSgpKTtcbiAgICBpZiAodGhpcy5tb2RlKCkgPT09ICdmdWxsJykge1xuICAgICAgaWYgKHRoaXMud2lkdGgoKSAmJiB0aGlzLmhlaWdodCgpKSB7XG4gICAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAnYXNwZWN0LXJhdGlvJywgdGhpcy53aWR0aCgpISAvIHRoaXMuaGVpZ2h0KCkhKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAnYXNwZWN0LXJhdGlvJywgMTYgLyA5KTtcbiAgICAgIH1cbiAgICB9XG4gIH0pO1xuICByYXRpb1NldCA9IGVmZmVjdCgoKSA9PiB7XG4gICAgdGhpcy5yZW5kZXJlci5zZXRBdHRyaWJ1dGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAncmF0aW8nLCB0aGlzLnJhdGlvKCkpO1xuICB9KTtcbn1cbiIsIjxkaXYgI2VkZ2UgY2xhc3M9XCJhYnNvbHV0ZSB0b3AtMCBsZWZ0LTBcIj48L2Rpdj5cbkBkZWZlciAob24gdmlld3BvcnQoZWRnZSkpIHtcbiAgPGEgaWQ9XCJ0aHVtYm5haWxcIiBjbGFzcz1cInJ0LXRodW1ibmFpbFwiPlxuICAgIDxyb2xhdGVjaC1pbWFnZSBbc3JjXT1cInNyYygpXCI+IDwvcm9sYXRlY2gtaW1hZ2U+XG4gIDwvYT5cbn0gQHBsYWNlaG9sZGVyIHtcbiAgPGRpdiBjbGFzcz1cImJnLVstLXJ0LXJhaXNlZC1iYWNrZ3JvdW5kXSB3LWZ1bGwgaC1mdWxsIHJvdW5kZWQtbGdcIj48L2Rpdj5cbn1cbiJdfQ==
|
|
@@ -1259,7 +1259,7 @@ class ThumbnailComponent {
|
|
|
1259
1259
|
src = input();
|
|
1260
1260
|
size = input();
|
|
1261
1261
|
mode = input('clip'); // full, clip
|
|
1262
|
-
ratio = input('
|
|
1262
|
+
ratio = input('rectangle'); // rectangle, square
|
|
1263
1263
|
img = viewChild.required('img');
|
|
1264
1264
|
width = input();
|
|
1265
1265
|
height = input();
|
|
@@ -1642,12 +1642,13 @@ class RichItemComponent {
|
|
|
1642
1642
|
title = input();
|
|
1643
1643
|
subtitle = input();
|
|
1644
1644
|
price = input(0);
|
|
1645
|
+
thumbnailRatio = input('rectangle');
|
|
1645
1646
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RichItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1646
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: RichItemComponent, isStandalone: true, selector: "rolatech-rich-item", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-rich-item": "this.hasClass" } }, ngImport: i0, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\" ratio=\"
|
|
1647
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", 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 } }, host: { properties: { "class.rolatech-rich-item": "this.hasClass" } }, ngImport: i0, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\" [ratio]=\"thumbnailRatio()\"></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\">\u00A5{{ 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) - .01px)}#details.rolatech-rich-item{display:flex;flex-direction:column;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)]] });
|
|
1647
1648
|
}
|
|
1648
1649
|
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.4", ngImport: i0, type: RichItemComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)], resolveMetadata: ThumbnailComponent => ({ decorators: [{
|
|
1649
1650
|
type: Component,
|
|
1650
|
-
args: [{ selector: 'rolatech-rich-item', standalone: true, imports: [CommonModule, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\" ratio=\"
|
|
1651
|
+
args: [{ selector: 'rolatech-rich-item', standalone: true, imports: [CommonModule, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "<div id=\"thumbnail\" class=\"rolatech-rich-item\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\" [ratio]=\"thumbnailRatio()\"></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\">\u00A5{{ 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) - .01px)}#details.rolatech-rich-item{display:flex;flex-direction:column;justify-content:space-between}\n"] }]
|
|
1651
1652
|
}], ctorParameters: null, propDecorators: { hasClass: [{
|
|
1652
1653
|
type: HostBinding,
|
|
1653
1654
|
args: ['class.rolatech-rich-item']
|
|
@@ -1707,11 +1708,11 @@ class RichViewComponent {
|
|
|
1707
1708
|
}
|
|
1708
1709
|
}
|
|
1709
1710
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RichViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1710
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.1.4", type: RichViewComponent, isStandalone: true, selector: "rolatech-rich-view", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-rich-view": "this.hasClass", "class.scrollbar-hide": "this.disableScrollbar" } }, queries: [{ propertyName: "items", predicate: RichItemComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n<!-- <div class=\"rich-view-content\">\n <ng-content></ng-content>\n</div> -->\n<!-- <div class=\"rich-view-button\">\n <button mat-stroked-button>\u52A0\u8F7D\u66F4\u591A</button>\n</div> -->\n", styles: ["rolatech-rich-view{--rt-rich-view-items-per-row: 1;--rt-rich-view-item-max-width: 500px;position:relative;display:flex;padding-bottom:16px;margin-bottom:56px}rolatech-rich-view[list]{flex-direction:column;flex-wrap:nowrap}rolatech-rich-view[wrap]{flex-wrap:wrap}rolatech-rich-view:not([wrap]){overflow-x:scroll}rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 40%;min-width:var(--rt-rich-view-item-min-width)}@media (min-width: 768px){rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 28%}}rolatech-rich-view[list] rolatech-rich-item{flex-direction:row;padding:12px 0;cursor:pointer}rolatech-rich-view[list] rolatech-rich-item #thumbnail.rolatech-rich-item{width:33%;min-width:33%}rolatech-rich-view[list] rolatech-rich-item #details.rolatech-rich-item{margin-left:12px}rolatech-rich-view[list] rolatech-rich-item:hover{background-color:var(--rt-10-percent-layer)}rolatech-rich-view:not([list]) rolatech-rich-item{margin-bottom:32px}@media (min-width: 600px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row:
|
|
1711
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.1.4", type: RichViewComponent, isStandalone: true, selector: "rolatech-rich-view", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-rich-view": "this.hasClass", "class.scrollbar-hide": "this.disableScrollbar" } }, queries: [{ propertyName: "items", predicate: RichItemComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n<!-- <div class=\"rich-view-content\">\n <ng-content></ng-content>\n</div> -->\n<!-- <div class=\"rich-view-button\">\n <button mat-stroked-button>\u52A0\u8F7D\u66F4\u591A</button>\n</div> -->\n", styles: ["rolatech-rich-view{--rt-rich-view-items-per-row: 1;--rt-rich-view-item-max-width: 500px;position:relative;display:flex;padding-bottom:16px;margin-bottom:56px}rolatech-rich-view[list]{flex-direction:column;flex-wrap:nowrap}rolatech-rich-view[wrap]{flex-wrap:wrap;--rt-rich-view-items-per-row: 2}rolatech-rich-view:not([wrap]){overflow-x:scroll}rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 40%;min-width:var(--rt-rich-view-item-min-width)}@media (min-width: 768px){rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 28%}}rolatech-rich-view[list] rolatech-rich-item{flex-direction:row;padding:12px 0;cursor:pointer}rolatech-rich-view[list] rolatech-rich-item #thumbnail.rolatech-rich-item{width:33%;min-width:33%}rolatech-rich-view[list] rolatech-rich-item #details.rolatech-rich-item{margin-left:12px}rolatech-rich-view[list] rolatech-rich-item:hover{background-color:var(--rt-10-percent-layer)}rolatech-rich-view:not([list]) rolatech-rich-item{margin-bottom:32px}@media (min-width: 600px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 2}}@media (min-width: 768px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 5}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.rich-view-button{position:absolute;bottom:-44px;left:50%;transform:translate(-50%,-50%);background-color:var(--yt-spec-base-background);z-index:1;width:360px;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1711
1712
|
}
|
|
1712
1713
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RichViewComponent, decorators: [{
|
|
1713
1714
|
type: Component,
|
|
1714
|
-
args: [{ selector: 'rolatech-rich-view', standalone: true, imports: [CommonModule, ThumbnailComponent, MatButtonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n\n<!-- <div class=\"rich-view-content\">\n <ng-content></ng-content>\n</div> -->\n<!-- <div class=\"rich-view-button\">\n <button mat-stroked-button>\u52A0\u8F7D\u66F4\u591A</button>\n</div> -->\n", styles: ["rolatech-rich-view{--rt-rich-view-items-per-row: 1;--rt-rich-view-item-max-width: 500px;position:relative;display:flex;padding-bottom:16px;margin-bottom:56px}rolatech-rich-view[list]{flex-direction:column;flex-wrap:nowrap}rolatech-rich-view[wrap]{flex-wrap:wrap}rolatech-rich-view:not([wrap]){overflow-x:scroll}rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 40%;min-width:var(--rt-rich-view-item-min-width)}@media (min-width: 768px){rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 28%}}rolatech-rich-view[list] rolatech-rich-item{flex-direction:row;padding:12px 0;cursor:pointer}rolatech-rich-view[list] rolatech-rich-item #thumbnail.rolatech-rich-item{width:33%;min-width:33%}rolatech-rich-view[list] rolatech-rich-item #details.rolatech-rich-item{margin-left:12px}rolatech-rich-view[list] rolatech-rich-item:hover{background-color:var(--rt-10-percent-layer)}rolatech-rich-view:not([list]) rolatech-rich-item{margin-bottom:32px}@media (min-width: 600px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row:
|
|
1715
|
+
args: [{ selector: 'rolatech-rich-view', standalone: true, imports: [CommonModule, ThumbnailComponent, MatButtonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n\n<!-- <div class=\"rich-view-content\">\n <ng-content></ng-content>\n</div> -->\n<!-- <div class=\"rich-view-button\">\n <button mat-stroked-button>\u52A0\u8F7D\u66F4\u591A</button>\n</div> -->\n", styles: ["rolatech-rich-view{--rt-rich-view-items-per-row: 1;--rt-rich-view-item-max-width: 500px;position:relative;display:flex;padding-bottom:16px;margin-bottom:56px}rolatech-rich-view[list]{flex-direction:column;flex-wrap:nowrap}rolatech-rich-view[wrap]{flex-wrap:wrap;--rt-rich-view-items-per-row: 2}rolatech-rich-view:not([wrap]){overflow-x:scroll}rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 40%;min-width:var(--rt-rich-view-item-min-width)}@media (min-width: 768px){rolatech-rich-view:not([wrap]) rolatech-rich-item{--rt-rich-view-item-min-width: 28%}}rolatech-rich-view[list] rolatech-rich-item{flex-direction:row;padding:12px 0;cursor:pointer}rolatech-rich-view[list] rolatech-rich-item #thumbnail.rolatech-rich-item{width:33%;min-width:33%}rolatech-rich-view[list] rolatech-rich-item #details.rolatech-rich-item{margin-left:12px}rolatech-rich-view[list] rolatech-rich-item:hover{background-color:var(--rt-10-percent-layer)}rolatech-rich-view:not([list]) rolatech-rich-item{margin-bottom:32px}@media (min-width: 600px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 2}}@media (min-width: 768px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-rich-view:not([list]){--rt-rich-view-items-per-row: 5}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.rich-view-button{position:absolute;bottom:-44px;left:50%;transform:translate(-50%,-50%);background-color:var(--yt-spec-base-background);z-index:1;width:360px;max-width:100%}\n"] }]
|
|
1715
1716
|
}], ctorParameters: () => [], propDecorators: { hasClass: [{
|
|
1716
1717
|
type: HostBinding,
|
|
1717
1718
|
args: ['class.rolatech-rich-view']
|