@rolatech/angular-product 17.1.10 → 17.2.0

package/esm2022/lib/components/product-action/product-action.component.mjs

@@ -22,10 +22,10 @@ export class ProductActionComponent {
     onDeposit(product) {
         this.deposit.emit(product);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ProductActionComponent, isStandalone: true, selector: "rolatech-product-action", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { cart: "cart", checkout: "checkout", deposit: "deposit" }, ngImport: i0, template: "<div class=\"flex gap-3\">\n  <a mat-stroked-button class=\"\" (click)=\"onCart(product())\">\u52A0\u5165\u8D2D\u7269\u8F66</a>\n  @if (product().priceType && product().priceType.toString() === 'PARTIAL') {\n    <a mat-flat-button class=\"\" (click)=\"onDeposit(product())\">\u652F\u4ED8\u5B9A\u91D1 \u00A5{{ displayDeposit() }}</a>\n  } @else {\n    <a mat-flat-button class=\"\" (click)=\"onCheckout(product())\">\u7ACB\u5373\u8D2D\u4E70</a>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ProductActionComponent, isStandalone: true, selector: "rolatech-product-action", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { cart: "cart", checkout: "checkout", deposit: "deposit" }, ngImport: i0, template: "<div class=\"flex gap-3\">\n  <a mat-stroked-button class=\"\" (click)=\"onCart(product())\">\u52A0\u5165\u8D2D\u7269\u8F66</a>\n  @if (product().priceType && product().priceType.toString() === 'PARTIAL') {\n    <a mat-flat-button class=\"\" (click)=\"onDeposit(product())\">\u652F\u4ED8\u5B9A\u91D1 \u00A5{{ displayDeposit() }}</a>\n  } @else {\n    <a mat-flat-button class=\"\" (click)=\"onCheckout(product())\">\u7ACB\u5373\u8D2D\u4E70</a>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-product-action', standalone: true, imports: [CommonModule, MatButtonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex gap-3\">\n  <a mat-stroked-button class=\"\" (click)=\"onCart(product())\">\u52A0\u5165\u8D2D\u7269\u8F66</a>\n  @if (product().priceType && product().priceType.toString() === 'PARTIAL') {\n    <a mat-flat-button class=\"\" (click)=\"onDeposit(product())\">\u652F\u4ED8\u5B9A\u91D1 \u00A5{{ displayDeposit() }}</a>\n  } @else {\n    <a mat-flat-button class=\"\" (click)=\"onCheckout(product())\">\u7ACB\u5373\u8D2D\u4E70</a>\n  }\n</div>\n" }]
         }] });

package/esm2022/lib/components/product-info/product-info.component.mjs

@@ -7,10 +7,10 @@ export class ProductInfoComponent {
         this.name = input.required();
         this.description = input();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.7", type: ProductInfoComponent, isStandalone: true, selector: "rolatech-product-info", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "id": "rolatech-product-info" } }, ngImport: i0, template: "<div>\n  <div class=\"text-2xl font-medium\">{{ name() }}</div>\n  <div>\n    {{ description() }}\n  </div>\n</div>\n", styles: ["rolatech-product-info mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: RouterModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.8", type: ProductInfoComponent, isStandalone: true, selector: "rolatech-product-info", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "id": "rolatech-product-info" } }, ngImport: i0, template: "<div>\n  <div class=\"text-2xl font-medium\">{{ name() }}</div>\n  <div>\n    {{ description() }}\n  </div>\n</div>\n", styles: ["rolatech-product-info mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: RouterModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-product-info', standalone: true, imports: [MatIconModule, RouterModule], encapsulation: ViewEncapsulation.None, host: {
                         id: 'rolatech-product-info',

package/esm2022/lib/components/product-item/product-item.component.mjs

@@ -7,10 +7,10 @@ export class ProductItemComponent {
     constructor() {
         this.product = input.required();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.7", type: ProductItemComponent, isStandalone: true, selector: "rolatech-product-item", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<rolatech-rich-item\n  [routerLink]=\"['./', product().id]\"\n  [thumbnail]=\"product().media[0].url + '!w400'\"\n  [title]=\"product().name\"\n  [subtitle]=\"product().description\"\n  [price]=\"product().price / 100\"\n></rolatech-rich-item>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: RichItemComponent, selector: "rolatech-rich-item", inputs: ["list", "thumbnail", "avatar", "title", "subtitle", "price", "thumbnailRatio"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.8", type: ProductItemComponent, isStandalone: true, selector: "rolatech-product-item", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<rolatech-rich-item\n  [routerLink]=\"['./', product().id]\"\n  [thumbnail]=\"product().media[0].url + '!w400'\"\n  [title]=\"product().name\"\n  [subtitle]=\"product().description\"\n  [price]=\"product().price / 100\"\n></rolatech-rich-item>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: RichItemComponent, selector: "rolatech-rich-item", inputs: ["list", "thumbnail", "avatar", "title", "subtitle", "price", "thumbnailRatio"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-product-item', standalone: true, imports: [AngularCommonModule, AngularComponentsModule, RichViewComponent, RichItemComponent], encapsulation: ViewEncapsulation.None, template: "<rolatech-rich-item\n  [routerLink]=\"['./', product().id]\"\n  [thumbnail]=\"product().media[0].url + '!w400'\"\n  [title]=\"product().name\"\n  [subtitle]=\"product().description\"\n  [price]=\"product().price / 100\"\n></rolatech-rich-item>\n" }]
         }] });

package/esm2022/lib/components/product-manage-option-add/product-manage-option-add.component.mjs

@@ -43,17 +43,17 @@ export class ProductManageOptionAddComponent {
     }
     removeValue(value) {
         if (value) {
-            let index = this.option.values.findIndex((item) => item.name === value.name);
+            const index = this.option.values.findIndex((item) => item.name === value.name);
             this.option.values?.splice(index, 1);
         }
     }
     ngDoCheck() {
         this.output.emit(this.option);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductManageOptionAddComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ProductManageOptionAddComponent, isStandalone: true, selector: "rolatech-product-manage-option-add", outputs: { cancel: "cancel", save: "save", output: "output" }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <div class=\"p-1\">\u9009\u9879</div>\n  <form>\n    <mat-form-field appearance=\"fill\">\n      <input matInput placeholder=\"\u540D\u79F0\" type=\"text\" [(ngModel)]=\"option.name\" [ngModelOptions]=\"{ standalone: true }\" />\n    </mat-form-field>\n    <mat-form-field>\n      <mat-chip-grid #chipGrid aria-label=\"Enter values\">\n        @for (value of option.values; track value) {\n          <mat-chip-row\n            (removed)=\"removeValue(value)\"\n            [editable]=\"true\"\n            [aria-description]=\"'press enter to edit ' + value.name\"\n          >\n            {{ value.name }}\n            <button matChipRemove [attr.aria-label]=\"'remove ' + value.name\">\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip-row>\n        }\n        <input\n          placeholder=\"\u9009\u9879\u503C\"\n          [matChipInputFor]=\"chipGrid\"\n          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n          [matChipInputAddOnBlur]=\"addOnBlur\"\n          (matChipInputTokenEnd)=\"addOptionValues($event)\"\n        />\n      </mat-chip-grid>\n    </mat-form-field>\n  </form>\n</div>\n@if (action) {\n  <div class=\"flex items-center justify-end\">\n    <button mat-button (click)=\"onCancel()\">\u53D6\u6D88</button>\n    <button mat-button color=\"primary\" (click)=\"onSave()\">\u4FDD\u5B58</button>\n  </div>\n}\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.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: MatIconModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductManageOptionAddComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ProductManageOptionAddComponent, isStandalone: true, selector: "rolatech-product-manage-option-add", outputs: { cancel: "cancel", save: "save", output: "output" }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <div class=\"p-1\">\u9009\u9879</div>\n  <form>\n    <mat-form-field appearance=\"fill\">\n      <input matInput placeholder=\"\u540D\u79F0\" type=\"text\" [(ngModel)]=\"option.name\" [ngModelOptions]=\"{ standalone: true }\" />\n    </mat-form-field>\n    <mat-form-field>\n      <mat-chip-grid #chipGrid aria-label=\"Enter values\">\n        @for (value of option.values; track value) {\n          <mat-chip-row\n            (removed)=\"removeValue(value)\"\n            [editable]=\"true\"\n            [aria-description]=\"'press enter to edit ' + value.name\"\n          >\n            {{ value.name }}\n            <button matChipRemove [attr.aria-label]=\"'remove ' + value.name\">\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip-row>\n        }\n        <input\n          placeholder=\"\u9009\u9879\u503C\"\n          [matChipInputFor]=\"chipGrid\"\n          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n          [matChipInputAddOnBlur]=\"addOnBlur\"\n          (matChipInputTokenEnd)=\"addOptionValues($event)\"\n        />\n      </mat-chip-grid>\n    </mat-form-field>\n  </form>\n</div>\n@if (action) {\n  <div class=\"flex items-center justify-end\">\n    <button mat-button (click)=\"onCancel()\">\u53D6\u6D88</button>\n    <button mat-button color=\"primary\" (click)=\"onSave()\">\u4FDD\u5B58</button>\n  </div>\n}\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.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: MatIconModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductManageOptionAddComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductManageOptionAddComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-product-manage-option-add', standalone: true, imports: [
                         MatChipsModule,
@@ -65,4 +65,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         ProductManageOptionActionComponent,
                     ], template: "<div class=\"flex flex-col\">\n  <div class=\"p-1\">\u9009\u9879</div>\n  <form>\n    <mat-form-field appearance=\"fill\">\n      <input matInput placeholder=\"\u540D\u79F0\" type=\"text\" [(ngModel)]=\"option.name\" [ngModelOptions]=\"{ standalone: true }\" />\n    </mat-form-field>\n    <mat-form-field>\n      <mat-chip-grid #chipGrid aria-label=\"Enter values\">\n        @for (value of option.values; track value) {\n          <mat-chip-row\n            (removed)=\"removeValue(value)\"\n            [editable]=\"true\"\n            [aria-description]=\"'press enter to edit ' + value.name\"\n          >\n            {{ value.name }}\n            <button matChipRemove [attr.aria-label]=\"'remove ' + value.name\">\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip-row>\n        }\n        <input\n          placeholder=\"\u9009\u9879\u503C\"\n          [matChipInputFor]=\"chipGrid\"\n          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n          [matChipInputAddOnBlur]=\"addOnBlur\"\n          (matChipInputTokenEnd)=\"addOptionValues($event)\"\n        />\n      </mat-chip-grid>\n    </mat-form-field>\n  </form>\n</div>\n@if (action) {\n  <div class=\"flex items-center justify-end\">\n    <button mat-button (click)=\"onCancel()\">\u53D6\u6D88</button>\n    <button mat-button color=\"primary\" (click)=\"onSave()\">\u4FDD\u5B58</button>\n  </div>\n}\n", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZHVjdC1tYW5hZ2Utb3B0aW9uLWFkZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItcHJvZHVjdC9zcmMvbGliL2NvbXBvbmVudHMvcHJvZHVjdC1tYW5hZ2Utb3B0aW9uLWFkZC9wcm9kdWN0LW1hbmFnZS1vcHRpb24tYWRkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1wcm9kdWN0L3NyYy9saWIvY29tcG9uZW50cy9wcm9kdWN0LW1hbmFnZS1vcHRpb24tYWRkL3Byb2R1Y3QtbWFuYWdlLW9wdGlvbi1hZGQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBa0IsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2xFLE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDckQsT0FBTyxFQUFxQixjQUFjLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUU1RSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDM0QsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDbEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQy9ELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxrQ0FBa0MsRUFBRSxNQUFNLHVFQUF1RSxDQUFDOzs7Ozs7OztBQWlCM0gsTUFBTSxPQUFPLCtCQUErQjtJQWY1QztRQWdCRSxXQUFNLEdBQWtCO1lBQ3RCLEVBQUUsRUFBRSxFQUFFO1lBQ04sSUFBSSxFQUFFLEVBQUU7WUFDUixNQUFNLEVBQUUsRUFBRTtTQUNYLENBQUM7UUFDRixjQUFTLEdBQUcsSUFBSSxDQUFDO1FBQ1IsdUJBQWtCLEdBQUcsQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFVLENBQUM7UUFDdEQsV0FBTSxHQUFHLE1BQU0sRUFBRSxDQUFDO1FBQ2xCLFNBQUksR0FBRyxNQUFNLEVBQWlCLENBQUM7UUFDL0IsV0FBTSxHQUFHLElBQUksQ0FBQztRQUNkLFdBQU0sR0FBRyxNQUFNLEVBQU8sQ0FBQztLQXlCeEI7SUF2QkMsUUFBUTtRQUNOLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUNELE1BQU07UUFDSixJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUVELGVBQWUsQ0FBQyxLQUF3QjtRQUN0QyxNQUFNLEtBQUssR0FBRyxDQUFDLEtBQUssQ0FBQyxLQUFLLElBQUksRUFBRSxDQUFDLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDekMsSUFBSSxLQUFLLEVBQUUsQ0FBQztZQUNWLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO1FBQzNDLENBQUM7UUFDRCxLQUFLLENBQUMsU0FBVSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQzNCLENBQUM7SUFDRCxXQUFXLENBQUMsS0FBVTtRQUNwQixJQUFJLEtBQUssRUFBRSxDQUFDO1lBQ1YsSUFBSSxLQUFLLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUMsSUFBUyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxLQUFLLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUNsRixJQUFJLENBQUMsTUFBTSxDQUFDLE1BQU0sRUFBRSxNQUFNLENBQUMsS0FBTSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQ3hDLENBQUM7SUFDSCxDQUFDO0lBQ0QsU0FBUztRQUNQLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNoQyxDQUFDOzhHQW5DVSwrQkFBK0I7a0dBQS9CLCtCQUErQiw2SkMxQjVDLDQ0Q0FxQ0EscUZEdEJJLGNBQWMsNHVCQUNkLGVBQWUsMk5BQ2Ysa0JBQWtCLHlPQUNsQixtQkFBbUIsdWlDQUNuQix1QkFBdUIsK2ZBQ3ZCLGFBQWE7OzJGQU1KLCtCQUErQjtrQkFmM0MsU0FBUzsrQkFDRSxvQ0FBb0MsY0FDbEMsSUFBSSxXQUNQO3dCQUNQLGNBQWM7d0JBQ2QsZUFBZTt3QkFDZixrQkFBa0I7d0JBQ2xCLG1CQUFtQjt3QkFDbkIsdUJBQXVCO3dCQUN2QixhQUFhO3dCQUNiLGtDQUFrQztxQkFDbkMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIERvQ2hlY2ssIG1vZGVsLCBvdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEVOVEVSLCBDT01NQSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9rZXljb2Rlcyc7XG5pbXBvcnQgeyBNYXRDaGlwSW5wdXRFdmVudCwgTWF0Q2hpcHNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9jaGlwcyc7XG5pbXBvcnQgeyBQcm9kdWN0T3B0aW9uIH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcyc7XG5pbXBvcnQgeyBNYXRCdXR0b25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9idXR0b24nO1xuaW1wb3J0IHsgTWF0Rm9ybUZpZWxkTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZm9ybS1maWVsZCc7XG5pbXBvcnQgeyBNYXRJY29uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvaWNvbic7XG5pbXBvcnQgeyBBbmd1bGFyQ29tbW9uTW9kdWxlIH0gZnJvbSAnQHJvbGF0ZWNoL2FuZ3VsYXItY29tbW9uJztcbmltcG9ydCB7IEFuZ3VsYXJDb21wb25lbnRzTW9kdWxlIH0gZnJvbSAnQHJvbGF0ZWNoL2FuZ3VsYXItY29tcG9uZW50cyc7XG5pbXBvcnQgeyBQcm9kdWN0TWFuYWdlT3B0aW9uQWN0aW9uQ29tcG9uZW50IH0gZnJvbSAnLi4vcHJvZHVjdC1tYW5nZS1vcHRpb24tYWN0aW9uL3Byb2R1Y3QtbWFuYWdlLW9wdGlvbi1hY3Rpb24uY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncm9sYXRlY2gtcHJvZHVjdC1tYW5hZ2Utb3B0aW9uLWFkZCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBNYXRDaGlwc01vZHVsZSxcbiAgICBNYXRCdXR0b25Nb2R1bGUsXG4gICAgTWF0Rm9ybUZpZWxkTW9kdWxlLFxuICAgIEFuZ3VsYXJDb21tb25Nb2R1bGUsXG4gICAgQW5ndWxhckNvbXBvbmVudHNNb2R1bGUsXG4gICAgTWF0SWNvbk1vZHVsZSxcbiAgICBQcm9kdWN0TWFuYWdlT3B0aW9uQWN0aW9uQ29tcG9uZW50LFxuICBdLFxuICB0ZW1wbGF0ZVVybDogJy4vcHJvZHVjdC1tYW5hZ2Utb3B0aW9uLWFkZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9wcm9kdWN0LW1hbmFnZS1vcHRpb24tYWRkLmNvbXBvbmVudC5zY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgUHJvZHVjdE1hbmFnZU9wdGlvbkFkZENvbXBvbmVudCBpbXBsZW1lbnRzIERvQ2hlY2sge1xuICBvcHRpb246IFByb2R1Y3RPcHRpb24gPSB7XG4gICAgaWQ6ICcnLFxuICAgIG5hbWU6ICcnLFxuICAgIHZhbHVlczogW10sXG4gIH07XG4gIGFkZE9uQmx1ciA9IHRydWU7XG4gIHJlYWRvbmx5IHNlcGFyYXRvcktleXNDb2RlcyA9IFtFTlRFUiwgQ09NTUFdIGFzIGNvbnN0O1xuICBjYW5jZWwgPSBvdXRwdXQoKTtcbiAgc2F2ZSA9IG91dHB1dDxQcm9kdWN0T3B0aW9uPigpO1xuICBhY3Rpb24gPSB0cnVlO1xuICBvdXRwdXQgPSBvdXRwdXQ8YW55PigpO1xuXG4gIG9uQ2FuY2VsKCkge1xuICAgIHRoaXMuY2FuY2VsLmVtaXQoKTtcbiAgfVxuICBvblNhdmUoKSB7XG4gICAgdGhpcy5zYXZlLmVtaXQodGhpcy5vcHRpb24pO1xuICB9XG5cbiAgYWRkT3B0aW9uVmFsdWVzKGV2ZW50OiBNYXRDaGlwSW5wdXRFdmVudCkge1xuICAgIGNvbnN0IHZhbHVlID0gKGV2ZW50LnZhbHVlIHx8ICcnKS50cmltKCk7XG4gICAgaWYgKHZhbHVlKSB7XG4gICAgICB0aGlzLm9wdGlvbi52YWx1ZXMucHVzaCh7IG5hbWU6IHZhbHVlIH0pO1xuICAgIH1cbiAgICBldmVudC5jaGlwSW5wdXQhLmNsZWFyKCk7XG4gIH1cbiAgcmVtb3ZlVmFsdWUodmFsdWU6IGFueSkge1xuICAgIGlmICh2YWx1ZSkge1xuICAgICAgbGV0IGluZGV4ID0gdGhpcy5vcHRpb24udmFsdWVzLmZpbmRJbmRleCgoaXRlbTogYW55KSA9PiBpdGVtLm5hbWUgPT09IHZhbHVlLm5hbWUpO1xuICAgICAgdGhpcy5vcHRpb24udmFsdWVzPy5zcGxpY2UoaW5kZXghLCAxKTtcbiAgICB9XG4gIH1cbiAgbmdEb0NoZWNrKCk6IHZvaWQge1xuICAgIHRoaXMub3V0cHV0LmVtaXQodGhpcy5vcHRpb24pO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZmxleCBmbGV4LWNvbFwiPlxuICA8ZGl2IGNsYXNzPVwicC0xXCI+6YCJ6aG5PC9kaXY+XG4gIDxmb3JtPlxuICAgIDxtYXQtZm9ybS1maWVsZCBhcHBlYXJhbmNlPVwiZmlsbFwiPlxuICAgICAgPGlucHV0IG1hdElucHV0IHBsYWNlaG9sZGVyPVwi5ZCN56ewXCIgdHlwZT1cInRleHRcIiBbKG5nTW9kZWwpXT1cIm9wdGlvbi5uYW1lXCIgW25nTW9kZWxPcHRpb25zXT1cInsgc3RhbmRhbG9uZTogdHJ1ZSB9XCIgLz5cbiAgICA8L21hdC1mb3JtLWZpZWxkPlxuICAgIDxtYXQtZm9ybS1maWVsZD5cbiAgICAgIDxtYXQtY2hpcC1ncmlkICNjaGlwR3JpZCBhcmlhLWxhYmVsPVwiRW50ZXIgdmFsdWVzXCI+XG4gICAgICAgIEBmb3IgKHZhbHVlIG9mIG9wdGlvbi52YWx1ZXM7IHRyYWNrIHZhbHVlKSB7XG4gICAgICAgICAgPG1hdC1jaGlwLXJvd1xuICAgICAgICAgICAgKHJlbW92ZWQpPVwicmVtb3ZlVmFsdWUodmFsdWUpXCJcbiAgICAgICAgICAgIFtlZGl0YWJsZV09XCJ0cnVlXCJcbiAgICAgICAgICAgIFthcmlhLWRlc2NyaXB0aW9uXT1cIidwcmVzcyBlbnRlciB0byBlZGl0ICcgKyB2YWx1ZS5uYW1lXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICB7eyB2YWx1ZS5uYW1lIH19XG4gICAgICAgICAgICA8YnV0dG9uIG1hdENoaXBSZW1vdmUgW2F0dHIuYXJpYS1sYWJlbF09XCIncmVtb3ZlICcgKyB2YWx1ZS5uYW1lXCI+XG4gICAgICAgICAgICAgIDxtYXQtaWNvbj5jYW5jZWw8L21hdC1pY29uPlxuICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgPC9tYXQtY2hpcC1yb3c+XG4gICAgICAgIH1cbiAgICAgICAgPGlucHV0XG4gICAgICAgICAgcGxhY2Vob2xkZXI9XCLpgInpobnlgLxcIlxuICAgICAgICAgIFttYXRDaGlwSW5wdXRGb3JdPVwiY2hpcEdyaWRcIlxuICAgICAgICAgIFttYXRDaGlwSW5wdXRTZXBhcmF0b3JLZXlDb2Rlc109XCJzZXBhcmF0b3JLZXlzQ29kZXNcIlxuICAgICAgICAgIFttYXRDaGlwSW5wdXRBZGRPbkJsdXJdPVwiYWRkT25CbHVyXCJcbiAgICAgICAgICAobWF0Q2hpcElucHV0VG9rZW5FbmQpPVwiYWRkT3B0aW9uVmFsdWVzKCRldmVudClcIlxuICAgICAgICAvPlxuICAgICAgPC9tYXQtY2hpcC1ncmlkPlxuICAgIDwvbWF0LWZvcm0tZmllbGQ+XG4gIDwvZm9ybT5cbjwvZGl2PlxuQGlmIChhY3Rpb24pIHtcbiAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyIGp1c3RpZnktZW5kXCI+XG4gICAgPGJ1dHRvbiBtYXQtYnV0dG9uIChjbGljayk9XCJvbkNhbmNlbCgpXCI+5Y+W5raIPC9idXR0b24+XG4gICAgPGJ1dHRvbiBtYXQtYnV0dG9uIGNvbG9yPVwicHJpbWFyeVwiIChjbGljayk9XCJvblNhdmUoKVwiPuS/neWtmDwvYnV0dG9uPlxuICA8L2Rpdj5cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZHVjdC1tYW5hZ2Utb3B0aW9uLWFkZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItcHJvZHVjdC9zcmMvbGliL2NvbXBvbmVudHMvcHJvZHVjdC1tYW5hZ2Utb3B0aW9uLWFkZC9wcm9kdWN0LW1hbmFnZS1vcHRpb24tYWRkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1wcm9kdWN0L3NyYy9saWIvY29tcG9uZW50cy9wcm9kdWN0LW1hbmFnZS1vcHRpb24tYWRkL3Byb2R1Y3QtbWFuYWdlLW9wdGlvbi1hZGQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBa0IsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2xFLE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDckQsT0FBTyxFQUFxQixjQUFjLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUU1RSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDM0QsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDbEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQy9ELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxrQ0FBa0MsRUFBRSxNQUFNLHVFQUF1RSxDQUFDOzs7Ozs7OztBQWlCM0gsTUFBTSxPQUFPLCtCQUErQjtJQWY1QztRQWdCRSxXQUFNLEdBQWtCO1lBQ3RCLEVBQUUsRUFBRSxFQUFFO1lBQ04sSUFBSSxFQUFFLEVBQUU7WUFDUixNQUFNLEVBQUUsRUFBRTtTQUNYLENBQUM7UUFDRixjQUFTLEdBQUcsSUFBSSxDQUFDO1FBQ1IsdUJBQWtCLEdBQUcsQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFVLENBQUM7UUFDdEQsV0FBTSxHQUFHLE1BQU0sRUFBRSxDQUFDO1FBQ2xCLFNBQUksR0FBRyxNQUFNLEVBQWlCLENBQUM7UUFDL0IsV0FBTSxHQUFHLElBQUksQ0FBQztRQUNkLFdBQU0sR0FBRyxNQUFNLEVBQU8sQ0FBQztLQXlCeEI7SUF2QkMsUUFBUTtRQUNOLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUNELE1BQU07UUFDSixJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUVELGVBQWUsQ0FBQyxLQUF3QjtRQUN0QyxNQUFNLEtBQUssR0FBRyxDQUFDLEtBQUssQ0FBQyxLQUFLLElBQUksRUFBRSxDQUFDLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDekMsSUFBSSxLQUFLLEVBQUUsQ0FBQztZQUNWLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO1FBQzNDLENBQUM7UUFDRCxLQUFLLENBQUMsU0FBVSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQzNCLENBQUM7SUFDRCxXQUFXLENBQUMsS0FBVTtRQUNwQixJQUFJLEtBQUssRUFBRSxDQUFDO1lBQ1YsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUMsSUFBUyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxLQUFLLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUNwRixJQUFJLENBQUMsTUFBTSxDQUFDLE1BQU0sRUFBRSxNQUFNLENBQUMsS0FBTSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQ3hDLENBQUM7SUFDSCxDQUFDO0lBQ0QsU0FBUztRQUNQLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNoQyxDQUFDOzhHQW5DVSwrQkFBK0I7a0dBQS9CLCtCQUErQiw2SkMxQjVDLDQ0Q0FxQ0EscUZEdEJJLGNBQWMsNHVCQUNkLGVBQWUsMk5BQ2Ysa0JBQWtCLHlPQUNsQixtQkFBbUIsdWlDQUNuQix1QkFBdUIsK2ZBQ3ZCLGFBQWE7OzJGQU1KLCtCQUErQjtrQkFmM0MsU0FBUzsrQkFDRSxvQ0FBb0MsY0FDbEMsSUFBSSxXQUNQO3dCQUNQLGNBQWM7d0JBQ2QsZUFBZTt3QkFDZixrQkFBa0I7d0JBQ2xCLG1CQUFtQjt3QkFDbkIsdUJBQXVCO3dCQUN2QixhQUFhO3dCQUNiLGtDQUFrQztxQkFDbkMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIERvQ2hlY2ssIG1vZGVsLCBvdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEVOVEVSLCBDT01NQSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9rZXljb2Rlcyc7XG5pbXBvcnQgeyBNYXRDaGlwSW5wdXRFdmVudCwgTWF0Q2hpcHNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9jaGlwcyc7XG5pbXBvcnQgeyBQcm9kdWN0T3B0aW9uIH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcyc7XG5pbXBvcnQgeyBNYXRCdXR0b25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9idXR0b24nO1xuaW1wb3J0IHsgTWF0Rm9ybUZpZWxkTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZm9ybS1maWVsZCc7XG5pbXBvcnQgeyBNYXRJY29uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvaWNvbic7XG5pbXBvcnQgeyBBbmd1bGFyQ29tbW9uTW9kdWxlIH0gZnJvbSAnQHJvbGF0ZWNoL2FuZ3VsYXItY29tbW9uJztcbmltcG9ydCB7IEFuZ3VsYXJDb21wb25lbnRzTW9kdWxlIH0gZnJvbSAnQHJvbGF0ZWNoL2FuZ3VsYXItY29tcG9uZW50cyc7XG5pbXBvcnQgeyBQcm9kdWN0TWFuYWdlT3B0aW9uQWN0aW9uQ29tcG9uZW50IH0gZnJvbSAnLi4vcHJvZHVjdC1tYW5nZS1vcHRpb24tYWN0aW9uL3Byb2R1Y3QtbWFuYWdlLW9wdGlvbi1hY3Rpb24uY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncm9sYXRlY2gtcHJvZHVjdC1tYW5hZ2Utb3B0aW9uLWFkZCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBNYXRDaGlwc01vZHVsZSxcbiAgICBNYXRCdXR0b25Nb2R1bGUsXG4gICAgTWF0Rm9ybUZpZWxkTW9kdWxlLFxuICAgIEFuZ3VsYXJDb21tb25Nb2R1bGUsXG4gICAgQW5ndWxhckNvbXBvbmVudHNNb2R1bGUsXG4gICAgTWF0SWNvbk1vZHVsZSxcbiAgICBQcm9kdWN0TWFuYWdlT3B0aW9uQWN0aW9uQ29tcG9uZW50LFxuICBdLFxuICB0ZW1wbGF0ZVVybDogJy4vcHJvZHVjdC1tYW5hZ2Utb3B0aW9uLWFkZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9wcm9kdWN0LW1hbmFnZS1vcHRpb24tYWRkLmNvbXBvbmVudC5zY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgUHJvZHVjdE1hbmFnZU9wdGlvbkFkZENvbXBvbmVudCBpbXBsZW1lbnRzIERvQ2hlY2sge1xuICBvcHRpb246IFByb2R1Y3RPcHRpb24gPSB7XG4gICAgaWQ6ICcnLFxuICAgIG5hbWU6ICcnLFxuICAgIHZhbHVlczogW10sXG4gIH07XG4gIGFkZE9uQmx1ciA9IHRydWU7XG4gIHJlYWRvbmx5IHNlcGFyYXRvcktleXNDb2RlcyA9IFtFTlRFUiwgQ09NTUFdIGFzIGNvbnN0O1xuICBjYW5jZWwgPSBvdXRwdXQoKTtcbiAgc2F2ZSA9IG91dHB1dDxQcm9kdWN0T3B0aW9uPigpO1xuICBhY3Rpb24gPSB0cnVlO1xuICBvdXRwdXQgPSBvdXRwdXQ8YW55PigpO1xuXG4gIG9uQ2FuY2VsKCkge1xuICAgIHRoaXMuY2FuY2VsLmVtaXQoKTtcbiAgfVxuICBvblNhdmUoKSB7XG4gICAgdGhpcy5zYXZlLmVtaXQodGhpcy5vcHRpb24pO1xuICB9XG5cbiAgYWRkT3B0aW9uVmFsdWVzKGV2ZW50OiBNYXRDaGlwSW5wdXRFdmVudCkge1xuICAgIGNvbnN0IHZhbHVlID0gKGV2ZW50LnZhbHVlIHx8ICcnKS50cmltKCk7XG4gICAgaWYgKHZhbHVlKSB7XG4gICAgICB0aGlzLm9wdGlvbi52YWx1ZXMucHVzaCh7IG5hbWU6IHZhbHVlIH0pO1xuICAgIH1cbiAgICBldmVudC5jaGlwSW5wdXQhLmNsZWFyKCk7XG4gIH1cbiAgcmVtb3ZlVmFsdWUodmFsdWU6IGFueSkge1xuICAgIGlmICh2YWx1ZSkge1xuICAgICAgY29uc3QgaW5kZXggPSB0aGlzLm9wdGlvbi52YWx1ZXMuZmluZEluZGV4KChpdGVtOiBhbnkpID0+IGl0ZW0ubmFtZSA9PT0gdmFsdWUubmFtZSk7XG4gICAgICB0aGlzLm9wdGlvbi52YWx1ZXM/LnNwbGljZShpbmRleCEsIDEpO1xuICAgIH1cbiAgfVxuICBuZ0RvQ2hlY2soKTogdm9pZCB7XG4gICAgdGhpcy5vdXRwdXQuZW1pdCh0aGlzLm9wdGlvbik7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJmbGV4IGZsZXgtY29sXCI+XG4gIDxkaXYgY2xhc3M9XCJwLTFcIj7pgInpobk8L2Rpdj5cbiAgPGZvcm0+XG4gICAgPG1hdC1mb3JtLWZpZWxkIGFwcGVhcmFuY2U9XCJmaWxsXCI+XG4gICAgICA8aW5wdXQgbWF0SW5wdXQgcGxhY2Vob2xkZXI9XCLlkI3np7BcIiB0eXBlPVwidGV4dFwiIFsobmdNb2RlbCldPVwib3B0aW9uLm5hbWVcIiBbbmdNb2RlbE9wdGlvbnNdPVwieyBzdGFuZGFsb25lOiB0cnVlIH1cIiAvPlxuICAgIDwvbWF0LWZvcm0tZmllbGQ+XG4gICAgPG1hdC1mb3JtLWZpZWxkPlxuICAgICAgPG1hdC1jaGlwLWdyaWQgI2NoaXBHcmlkIGFyaWEtbGFiZWw9XCJFbnRlciB2YWx1ZXNcIj5cbiAgICAgICAgQGZvciAodmFsdWUgb2Ygb3B0aW9uLnZhbHVlczsgdHJhY2sgdmFsdWUpIHtcbiAgICAgICAgICA8bWF0LWNoaXAtcm93XG4gICAgICAgICAgICAocmVtb3ZlZCk9XCJyZW1vdmVWYWx1ZSh2YWx1ZSlcIlxuICAgICAgICAgICAgW2VkaXRhYmxlXT1cInRydWVcIlxuICAgICAgICAgICAgW2FyaWEtZGVzY3JpcHRpb25dPVwiJ3ByZXNzIGVudGVyIHRvIGVkaXQgJyArIHZhbHVlLm5hbWVcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIHt7IHZhbHVlLm5hbWUgfX1cbiAgICAgICAgICAgIDxidXR0b24gbWF0Q2hpcFJlbW92ZSBbYXR0ci5hcmlhLWxhYmVsXT1cIidyZW1vdmUgJyArIHZhbHVlLm5hbWVcIj5cbiAgICAgICAgICAgICAgPG1hdC1pY29uPmNhbmNlbDwvbWF0LWljb24+XG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICA8L21hdC1jaGlwLXJvdz5cbiAgICAgICAgfVxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBwbGFjZWhvbGRlcj1cIumAiemhueWAvFwiXG4gICAgICAgICAgW21hdENoaXBJbnB1dEZvcl09XCJjaGlwR3JpZFwiXG4gICAgICAgICAgW21hdENoaXBJbnB1dFNlcGFyYXRvcktleUNvZGVzXT1cInNlcGFyYXRvcktleXNDb2Rlc1wiXG4gICAgICAgICAgW21hdENoaXBJbnB1dEFkZE9uQmx1cl09XCJhZGRPbkJsdXJcIlxuICAgICAgICAgIChtYXRDaGlwSW5wdXRUb2tlbkVuZCk9XCJhZGRPcHRpb25WYWx1ZXMoJGV2ZW50KVwiXG4gICAgICAgIC8+XG4gICAgICA8L21hdC1jaGlwLWdyaWQ+XG4gICAgPC9tYXQtZm9ybS1maWVsZD5cbiAgPC9mb3JtPlxuPC9kaXY+XG5AaWYgKGFjdGlvbikge1xuICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIganVzdGlmeS1lbmRcIj5cbiAgICA8YnV0dG9uIG1hdC1idXR0b24gKGNsaWNrKT1cIm9uQ2FuY2VsKClcIj7lj5bmtog8L2J1dHRvbj5cbiAgICA8YnV0dG9uIG1hdC1idXR0b24gY29sb3I9XCJwcmltYXJ5XCIgKGNsaWNrKT1cIm9uU2F2ZSgpXCI+5L+d5a2YPC9idXR0b24+XG4gIDwvZGl2PlxufVxuIl19

package/esm2022/lib/components/product-manage-option-item/product-manage-option-item.component.mjs

@@ -29,10 +29,10 @@ export class ProductManageOptionItemComponent {
     onEdit() {
         this.edit.emit(this.option());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductManageOptionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.7", type: ProductManageOptionItemComponent, isStandalone: true, selector: "rolatech-product-manage-option-item", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { delete: "delete", save: "save", edit: "edit" }, ngImport: i0, template: "<div class=\"group flex justify-between items-center h-14 hover:bg-[--rt-raised-background] cursor-pointer px-2\">\n  <div class=\"flex\">\n    <div class=\"min-w-[100px]\">{{ option().name }}</div>\n    <div class=\"overflow-hidden line-clamp-1\">\n      {{ option().values! | options }}\n    </div>\n  </div>\n  <div class=\"flex justify-end max-w-24 w-24 invisible group-hover:visible\">\n    <button mat-icon-button (click)=\"onEdit()\">\n      <mat-icon>edit</mat-icon>\n    </button>\n    <button mat-icon-button (click)=\"onDelete()\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n</div>\n<mat-divider></mat-divider>\n", styles: ["mat-icon{scale:.9}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: OptionsFormatPipe, name: "options" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductManageOptionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.8", type: ProductManageOptionItemComponent, isStandalone: true, selector: "rolatech-product-manage-option-item", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { delete: "delete", save: "save", edit: "edit" }, ngImport: i0, template: "<div class=\"group flex justify-between items-center h-14 hover:bg-[--rt-raised-background] cursor-pointer px-2\">\n  <div class=\"flex\">\n    <div class=\"min-w-[100px]\">{{ option().name }}</div>\n    <div class=\"overflow-hidden line-clamp-1\">\n      {{ option().values! | options }}\n    </div>\n  </div>\n  <div class=\"flex justify-end max-w-24 w-24 invisible group-hover:visible\">\n    <button mat-icon-button (click)=\"onEdit()\">\n      <mat-icon>edit</mat-icon>\n    </button>\n    <button mat-icon-button (click)=\"onDelete()\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n</div>\n<mat-divider></mat-divider>\n", styles: ["mat-icon{scale:.9}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: OptionsFormatPipe, name: "options" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductManageOptionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductManageOptionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-product-manage-option-item', standalone: true, imports: [
                         MatChipsModule,

package/esm2022/lib/components/product-manage-variant/product-manage-variant.component.mjs

@@ -90,8 +90,8 @@ export class ProductManageVariantComponent {
             return { ...currentVariant };
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductManageVariantComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ProductManageVariantComponent, isStandalone: true, selector: "rolatech-product-manage-variant", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { variant: "variantChange", upload: "upload" }, ngImport: i0, template: "<div class=\"flex items-center h-[72px] cursor-pointer px-2\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n  <div>{{ variant().options | options }}</div>\n  <div class=\"flex-1\"></div>\n  <div class=\"px-3 dense-2\" (click)=\"$event.stopPropagation()\">\n    <mat-form-field subscriptSizing=\"dynamic\" class=\"h-12\">\n      <span matTextPrefix> \u00A5 &nbsp;</span>\n      <input matInput type=\"text\" [value]=\"price()\" (change)=\"onPriceChange($event)\" rolatechDecimal />\n    </mat-form-field>\n  </div>\n  <div class=\"px-3\">\n    <mat-form-field class=\"dense-2\" (click)=\"$event.stopPropagation()\" subscriptSizing=\"dynamic\">\n      <mat-select\n        name=\"type\"\n        [compareWith]=\"statusCompareFn\"\n        (selectionChange)=\"onStatusChange($event)\"\n        [(ngModel)]=\"variant().status\"\n      >\n        @for (key of enumKeys; track key) {\n          <mat-option [value]=\"variantStatus[key]\">\n            {{ variantStatus[key] }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div class=\"block w-20 text-right\">\n    <button mat-icon-button aria-label=\"expand row\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n      @if (expanded) {\n        <mat-icon>keyboard_arrow_up</mat-icon>\n      } @else {\n        <mat-icon>keyboard_arrow_down</mat-icon>\n      }\n    </button>\n  </div>\n</div>\n<div>\n  <div class=\"flex flex-col gap-3 w-full overflow-hidden\" [@detailExpand]=\"expanded ? 'expanded' : 'collapsed'\">\n    <div class=\"flex flex-col my-3 md:w-1/2\">\n      <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\" class=\"h-12\">\n        <span matTextPrefix> \u00A5 &nbsp;</span>\n        <input matInput type=\"number\" [value]=\"price()\" rolatechDecimal />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n        <mat-label>\u5E93\u5B58</mat-label>\n        <input matInput type=\"text\" [(ngModel)]=\"variant().price\" />\n      </mat-form-field>\n    </div>\n    <div class=\"flex flex-col items-start my-3 md:w-1/2\">\n      <div class=\"flex flex-wrap\">\n        @for (media of variant().media; track $index) {\n          <div class=\"media-list-item\">\n            <div class=\"inner-media\">\n              @defer (on viewport()) {\n                <img (click)=\"onMediaClick($index)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n              @if (media.uploading) {\n                <div class=\"absolute flex items-center justify-center p-4 w-full h-full bg-[--rt-20-percent-layer]\">\n                  <mat-spinner></mat-spinner>\n                  <!--\n                  <svg\n                    viewBox=\"0 0 24 24\"\n                    preserveAspectRatio=\"xMidYMid meet\"\n                    focusable=\"false\"\n                    class=\"style-scope tp-yt-iron-icon\"\n                    style=\"pointer-events: none; display: block; width: 100%; height: 100%\"\n                  >\n                    <g class=\"style-scope tp-yt-iron-icon\">\n                      <path\n                        d=\"M17,18v1H6V18ZM6.49,9l.71.71L11,5.91V16h1V5.91l3.8,3.81L16.51,9l-5-5Z\"\n                        class=\"style-scope tp-yt-iron-icon\"\n                      ></path>\n                    </g>\n                  </svg>\n                  <span>Uploading\u2026</span> -->\n                </div>\n              }\n            </div>\n          </div>\n        }\n        <div class=\"media-list-item\">\n          <div class=\"inner-media\" (click)=\"fileInput.click()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n              <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n            </svg>\n          </div>\n        </div>\n        <input style=\"display: none\" type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" #fileInput />\n      </div>\n    </div>\n  </div>\n</div>\n<mat-divider></mat-divider>\n", styles: [".media-list-item{cursor:pointer;position:relative;padding:2px}.inner-media{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:4px;border:1px solid grey;position:relative;cursor:pointer;overflow:hidden}mat-form-field{width:160px}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7.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: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "pipe", type: OptionsFormatPipe, name: "options" }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: DecimalDirective, selector: "[rolatechDecimal]" }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatSelectModule }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductManageVariantComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ProductManageVariantComponent, isStandalone: true, selector: "rolatech-product-manage-variant", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { variant: "variantChange", upload: "upload" }, ngImport: i0, template: "<div class=\"flex items-center h-[72px] cursor-pointer px-2\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n  <div>{{ variant().options | options }}</div>\n  <div class=\"flex-1\"></div>\n  <div class=\"px-3 dense-2\" (click)=\"$event.stopPropagation()\">\n    <mat-form-field subscriptSizing=\"dynamic\" class=\"h-12\">\n      <span matTextPrefix> \u00A5 &nbsp;</span>\n      <input matInput type=\"text\" [value]=\"price()\" (change)=\"onPriceChange($event)\" rolatechDecimal />\n    </mat-form-field>\n  </div>\n  <div class=\"px-3\">\n    <mat-form-field class=\"dense-2\" (click)=\"$event.stopPropagation()\" subscriptSizing=\"dynamic\">\n      <mat-select\n        name=\"type\"\n        [compareWith]=\"statusCompareFn\"\n        (selectionChange)=\"onStatusChange($event)\"\n        [(ngModel)]=\"variant().status\"\n      >\n        @for (key of enumKeys; track key) {\n          <mat-option [value]=\"variantStatus[key]\">\n            {{ variantStatus[key] }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div class=\"block w-20 text-right\">\n    <button mat-icon-button aria-label=\"expand row\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n      @if (expanded) {\n        <mat-icon>keyboard_arrow_up</mat-icon>\n      } @else {\n        <mat-icon>keyboard_arrow_down</mat-icon>\n      }\n    </button>\n  </div>\n</div>\n<div>\n  <div class=\"flex flex-col gap-3 w-full overflow-hidden\" [@detailExpand]=\"expanded ? 'expanded' : 'collapsed'\">\n    <div class=\"flex flex-col my-3 md:w-1/2\">\n      <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\" class=\"h-12\">\n        <span matTextPrefix> \u00A5 &nbsp;</span>\n        <input matInput type=\"number\" [value]=\"price()\" rolatechDecimal />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n        <mat-label>\u5E93\u5B58</mat-label>\n        <input matInput type=\"text\" [(ngModel)]=\"variant().price\" />\n      </mat-form-field>\n    </div>\n    <div class=\"flex flex-col items-start my-3 md:w-1/2\">\n      <div class=\"flex flex-wrap\">\n        @for (media of variant().media; track $index) {\n          <div class=\"media-list-item\">\n            <div class=\"inner-media\">\n              @defer (on viewport()) {\n                <img (click)=\"onMediaClick($index)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n              @if (media.uploading) {\n                <div class=\"absolute flex items-center justify-center p-4 w-full h-full bg-[--rt-20-percent-layer]\">\n                  <mat-spinner></mat-spinner>\n                  <!--\n                  <svg\n                    viewBox=\"0 0 24 24\"\n                    preserveAspectRatio=\"xMidYMid meet\"\n                    focusable=\"false\"\n                    class=\"style-scope tp-yt-iron-icon\"\n                    style=\"pointer-events: none; display: block; width: 100%; height: 100%\"\n                  >\n                    <g class=\"style-scope tp-yt-iron-icon\">\n                      <path\n                        d=\"M17,18v1H6V18ZM6.49,9l.71.71L11,5.91V16h1V5.91l3.8,3.81L16.51,9l-5-5Z\"\n                        class=\"style-scope tp-yt-iron-icon\"\n                      ></path>\n                    </g>\n                  </svg>\n                  <span>Uploading\u2026</span> -->\n                </div>\n              }\n            </div>\n          </div>\n        }\n        <div class=\"media-list-item\">\n          <div class=\"inner-media\" (click)=\"fileInput.click()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n              <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n            </svg>\n          </div>\n        </div>\n        <input style=\"display: none\" type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" #fileInput />\n      </div>\n    </div>\n  </div>\n</div>\n<mat-divider></mat-divider>\n", styles: [".media-list-item{cursor:pointer;position:relative;padding:2px}.inner-media{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:4px;border:1px solid grey;position:relative;cursor:pointer;overflow:hidden}mat-form-field{width:160px}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7.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: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "pipe", type: OptionsFormatPipe, name: "options" }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: DecimalDirective, selector: "[rolatechDecimal]" }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatSelectModule }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px' })),
                 state('expanded', style({ height: '*' })),
@@ -99,7 +99,7 @@ export class ProductManageVariantComponent {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductManageVariantComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductManageVariantComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-product-manage-variant', standalone: true, imports: [
                         AngularCommonModule,

package/esm2022/lib/components/product-mange-option-action/product-manage-option-action.component.mjs

@@ -12,10 +12,10 @@ export class ProductManageOptionActionComponent {
     onSave(option) {
         this.save.emit(option);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductManageOptionActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ProductManageOptionActionComponent, isStandalone: true, selector: "rolatech-product-manage-option-action", outputs: { delete: "delete", save: "save" }, ngImport: i0, template: "<div>\n  <!-- <button mat-button color=\"primary\" (click)=\"onDelete(item)\">\u5220\u9664</button>\n  <button mat-button color=\"primary\" (click)=\"onSave(item)\">\u4FDD\u5B58</button> -->\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductManageOptionActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ProductManageOptionActionComponent, isStandalone: true, selector: "rolatech-product-manage-option-action", outputs: { delete: "delete", save: "save" }, ngImport: i0, template: "<div>\n  <!-- <button mat-button color=\"primary\" (click)=\"onDelete(item)\">\u5220\u9664</button>\n  <button mat-button color=\"primary\" (click)=\"onSave(item)\">\u4FDD\u5B58</button> -->\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductManageOptionActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductManageOptionActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-product-manage-option-action', standalone: true, imports: [MatButtonModule], template: "<div>\n  <!-- <button mat-button color=\"primary\" (click)=\"onDelete(item)\">\u5220\u9664</button>\n  <button mat-button color=\"primary\" (click)=\"onSave(item)\">\u4FDD\u5B58</button> -->\n</div>\n" }]
         }] });

package/esm2022/lib/components/product-mange-section-item/product-mange-section-item.component.mjs

@@ -56,8 +56,8 @@ export class ProductManageSectionItemComponent {
         this.deleteMedia.emit({ section: this.section(), media });
         this.selectedImg = this.section().media ? first(this.section().media) : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductManageSectionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ProductManageSectionItemComponent, isStandalone: true, selector: "rolatech-product-manage-section-item", inputs: { isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, selectMedia: { classPropertyName: "selectMedia", publicName: "selectMedia", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { upload: "upload", delete: "delete", save: "save", deleteMedia: "deleteMedia" }, ngImport: i0, template: "<div class=\"px-3\">\n  <div\n    class=\"h-14 py-3 flex items-center justify-between cursor-pointer\"\n    (click)=\"expanded = !expanded; $event.stopPropagation()\"\n  >\n    <div class=\"flex\">\n      <div class=\"w-32 line-clamp-1\">{{ section().title }}</div>\n      <div class=\"line-clamp-1\">{{ section().description }}</div>\n    </div>\n    <div>\n      <button mat-icon-button aria-label=\"expand row\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n        @if (expanded) {\n          <mat-icon>keyboard_arrow_up</mat-icon>\n        } @else {\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        }\n      </button>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 w-full overflow-hidden\" [@detailExpand]=\"expanded ? 'expanded' : 'collapsed'\">\n    <div class=\"flex flex-col lg:flex-row\">\n      <div class=\"flex flex-col grow\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label>\u6807\u9898</mat-label>\n          <input matInput placeholder=\"\u6807\u9898\" [(ngModel)]=\"section().title\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n          <mat-label>\u63CF\u8FF0</mat-label>\n          <textarea\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n            placeholder=\"\u63CF\u8FF0\"\n            [(ngModel)]=\"section().description\"\n          ></textarea>\n        </mat-form-field>\n      </div>\n      <!-- media -->\n      <div class=\"lg:basis-1/2 px-0 lg:px-3\">\n        @if (selectedImg) {\n          <div class=\"flex flex-row justify-center relative aspect-video\">\n            <img class=\"object-contain w-full\" [src]=\"selectedImg.url\" [alt]=\"selectedImg.alt\" />\n            <div class=\"absolute z-30 right-0\">\n              <button\n                mat-icon-button\n                [matMenuTriggerFor]=\"beforeMenu\"\n                class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1\"\n              >\n                <mat-icon>more_vert</mat-icon>\n              </button>\n              <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n                <button mat-menu-item (click)=\"onDeleteMedia(selectedImg)\">\n                  <span>\u5220\u9664</span>\n                </button>\n              </mat-menu>\n            </div>\n          </div>\n        }\n\n        <!-- media -->\n        <div>\n          <div class=\"flex flex-row flex-wrap cursor-pointer relative box-border\" fxLayout=\"row\">\n            <div class=\"progress-bar\">\n              @if (section().isUploading) {\n                <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n              }\n            </div>\n            @for (media of section().media; track media) {\n              <div class=\"media-list-item\">\n                <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n              </div>\n            }\n            <input style=\"display: none\" type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" #fileInput />\n            <div class=\"add-button\">\n              <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n                  <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    @if (actions()) {\n      <div class=\"flex flex-row justify-end p-3 gap-3\">\n        <button mat-button class=\"max-h-8\" (click)=\"onDelete(section())\">\u5220\u9664</button>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(section())\">\u4FDD\u5B58</button>\n      </div>\n    }\n  </div>\n</div>\n\n<mat-divider></mat-divider>\n", styles: [".media-list{flex-wrap:wrap;box-sizing:border-box}.progress-bar{display:block;min-height:6px;width:100%}.media-list-item{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:64px;width:64px;object-fit:contain;cursor:pointer;border:1px solid grey;position:relative;box-sizing:border-box;border-radius:8px}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: "directive", type: i3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.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: MatProgressBarModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductManageSectionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ProductManageSectionItemComponent, isStandalone: true, selector: "rolatech-product-manage-section-item", inputs: { isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, selectMedia: { classPropertyName: "selectMedia", publicName: "selectMedia", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { upload: "upload", delete: "delete", save: "save", deleteMedia: "deleteMedia" }, ngImport: i0, template: "<div class=\"px-3\">\n  <div\n    class=\"h-14 py-3 flex items-center justify-between cursor-pointer\"\n    (click)=\"expanded = !expanded; $event.stopPropagation()\"\n  >\n    <div class=\"flex\">\n      <div class=\"w-32 line-clamp-1\">{{ section().title }}</div>\n      <div class=\"line-clamp-1\">{{ section().description }}</div>\n    </div>\n    <div>\n      <button mat-icon-button aria-label=\"expand row\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n        @if (expanded) {\n          <mat-icon>keyboard_arrow_up</mat-icon>\n        } @else {\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        }\n      </button>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 w-full overflow-hidden\" [@detailExpand]=\"expanded ? 'expanded' : 'collapsed'\">\n    <div class=\"flex flex-col lg:flex-row\">\n      <div class=\"flex flex-col grow\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label>\u6807\u9898</mat-label>\n          <input matInput placeholder=\"\u6807\u9898\" [(ngModel)]=\"section().title\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n          <mat-label>\u63CF\u8FF0</mat-label>\n          <textarea\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n            placeholder=\"\u63CF\u8FF0\"\n            [(ngModel)]=\"section().description\"\n          ></textarea>\n        </mat-form-field>\n      </div>\n      <!-- media -->\n      <div class=\"lg:basis-1/2 px-0 lg:px-3\">\n        @if (selectedImg) {\n          <div class=\"flex flex-row justify-center relative aspect-video\">\n            <img class=\"object-contain w-full\" [src]=\"selectedImg.url\" [alt]=\"selectedImg.alt\" />\n            <div class=\"absolute z-30 right-0\">\n              <button\n                mat-icon-button\n                [matMenuTriggerFor]=\"beforeMenu\"\n                class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1\"\n              >\n                <mat-icon>more_vert</mat-icon>\n              </button>\n              <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n                <button mat-menu-item (click)=\"onDeleteMedia(selectedImg)\">\n                  <span>\u5220\u9664</span>\n                </button>\n              </mat-menu>\n            </div>\n          </div>\n        }\n\n        <!-- media -->\n        <div>\n          <div class=\"flex flex-row flex-wrap cursor-pointer relative box-border\" fxLayout=\"row\">\n            <div class=\"progress-bar\">\n              @if (section().isUploading) {\n                <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n              }\n            </div>\n            @for (media of section().media; track media) {\n              <div class=\"media-list-item\">\n                <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n              </div>\n            }\n            <input style=\"display: none\" type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" #fileInput />\n            <div class=\"add-button\">\n              <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n                  <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    @if (actions()) {\n      <div class=\"flex flex-row justify-end p-3 gap-3\">\n        <button mat-button class=\"max-h-8\" (click)=\"onDelete(section())\">\u5220\u9664</button>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(section())\">\u4FDD\u5B58</button>\n      </div>\n    }\n  </div>\n</div>\n\n<mat-divider></mat-divider>\n", styles: [".media-list{flex-wrap:wrap;box-sizing:border-box}.progress-bar{display:block;min-height:6px;width:100%}.media-list-item{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:64px;width:64px;object-fit:contain;cursor:pointer;border:1px solid grey;position:relative;box-sizing:border-box;border-radius:8px}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: "directive", type: i3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.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: MatProgressBarModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px' })),
                 state('expanded', style({ height: '*' })),
@@ -65,7 +65,7 @@ export class ProductManageSectionItemComponent {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductManageSectionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductManageSectionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-product-manage-section-item', standalone: true, imports: [
                         NgClass,

package/esm2022/lib/components/product-media/product-media.component.mjs

@@ -24,10 +24,10 @@ export class ProductMediaComponent {
         });
         dialogRef.afterClosed().subscribe((result) => { });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ProductMediaComponent, isStandalone: true, selector: "rolatech-product-media", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (media()) {\n  <div>\n    <div class=\"object-cover aspect-video bg-[--rt-raised-background]\">\n      <rolatech-thumbnail [src]=\"media()[mediaIndex].url\" size=\"small\" mode=\"full\"></rolatech-thumbnail>\n    </div>\n    @for (media of media(); track media; let index = $index) {\n      <div\n        class=\"inline-flex flex-row mt-3 mr-3 cursor-pointer w-28 p-2 bg-[--rt-10-percent-layer]\"\n        (click)=\"mediaIndex = index\"\n        [ngClass]=\"mediaIndex === index ? 'border border-black' : 'opacity-70'\"\n      >\n        <rolatech-thumbnail [src]=\"media.url\" mode=\"full\"></rolatech-thumbnail>\n      </div>\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ProductMediaComponent, isStandalone: true, selector: "rolatech-product-media", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (media()) {\n  <div>\n    <div class=\"object-cover aspect-video bg-[--rt-raised-background]\">\n      <rolatech-thumbnail [src]=\"media()[mediaIndex].url\" size=\"small\" mode=\"full\"></rolatech-thumbnail>\n    </div>\n    @for (media of media(); track media; let index = $index) {\n      <div\n        class=\"inline-flex flex-row mt-3 mr-3 cursor-pointer w-28 p-2 bg-[--rt-10-percent-layer]\"\n        (click)=\"mediaIndex = index\"\n        [ngClass]=\"mediaIndex === index ? 'border border-black' : 'opacity-70'\"\n      >\n        <rolatech-thumbnail [src]=\"media.url\" mode=\"full\"></rolatech-thumbnail>\n      </div>\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductMediaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductMediaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-product-media', standalone: true, imports: [NgClass, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "@if (media()) {\n  <div>\n    <div class=\"object-cover aspect-video bg-[--rt-raised-background]\">\n      <rolatech-thumbnail [src]=\"media()[mediaIndex].url\" size=\"small\" mode=\"full\"></rolatech-thumbnail>\n    </div>\n    @for (media of media(); track media; let index = $index) {\n      <div\n        class=\"inline-flex flex-row mt-3 mr-3 cursor-pointer w-28 p-2 bg-[--rt-10-percent-layer]\"\n        (click)=\"mediaIndex = index\"\n        [ngClass]=\"mediaIndex === index ? 'border border-black' : 'opacity-70'\"\n      >\n        <rolatech-thumbnail [src]=\"media.url\" mode=\"full\"></rolatech-thumbnail>\n      </div>\n    }\n  </div>\n}\n" }]
         }] });

package/esm2022/lib/components/product-option/product-option.component.mjs

@@ -13,10 +13,10 @@ export class ProductOptionComponent {
         this.value.set(value);
         this.change.emit({ option: this.option(), value: value });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ProductOptionComponent, isStandalone: true, selector: "rolatech-product-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", selected: "selectedChange", value: "valueChange" }, ngImport: i0, template: "<div class=\"mb-3\">\n  <div class=\"text-xl font-bold py-3\">{{ option().name }}</div>\n  <div class=\"flex flex-wrap gap-3\">\n    @for (item of option().values; track $index) {\n      <div\n        class=\"w-24 h-12 border border-[--rt-border-color] rounded flex justify-center items-center hover:text-[--rt-text-primary-inverse] hover:bg-[--rt-base-background-inverse] cursor-pointer\"\n        (click)=\"onChange(item)\"\n        [ngClass]=\"value()?.id === item.id ? 'bg-[--rt-base-background-inverse] text-[--rt-text-primary-inverse]' : ''\"\n      >\n        {{ item.name }}\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ProductOptionComponent, isStandalone: true, selector: "rolatech-product-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", selected: "selectedChange", value: "valueChange" }, ngImport: i0, template: "<div class=\"mb-3\">\n  <div class=\"text-xl font-bold py-3\">{{ option().name }}</div>\n  <div class=\"flex flex-wrap gap-3\">\n    @for (item of option().values; track $index) {\n      <div\n        class=\"w-24 h-12 border border-[--rt-border-color] rounded flex justify-center items-center hover:text-[--rt-text-primary-inverse] hover:bg-[--rt-base-background-inverse] cursor-pointer\"\n        (click)=\"onChange(item)\"\n        [ngClass]=\"value()?.id === item.id ? 'bg-[--rt-base-background-inverse] text-[--rt-text-primary-inverse]' : ''\"\n      >\n        {{ item.name }}\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-product-option', standalone: true, imports: [CommonModule], template: "<div class=\"mb-3\">\n  <div class=\"text-xl font-bold py-3\">{{ option().name }}</div>\n  <div class=\"flex flex-wrap gap-3\">\n    @for (item of option().values; track $index) {\n      <div\n        class=\"w-24 h-12 border border-[--rt-border-color] rounded flex justify-center items-center hover:text-[--rt-text-primary-inverse] hover:bg-[--rt-base-background-inverse] cursor-pointer\"\n        (click)=\"onChange(item)\"\n        [ngClass]=\"value()?.id === item.id ? 'bg-[--rt-base-background-inverse] text-[--rt-text-primary-inverse]' : ''\"\n      >\n        {{ item.name }}\n      </div>\n    }\n  </div>\n</div>\n" }]
         }] });

package/esm2022/lib/components/product-owner-renderer/product-owner-renderer.component.mjs

@@ -10,11 +10,11 @@ export class ProductOwnerRendererComponent {
         this.avatar = input();
         this.username = input();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductOwnerRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ProductOwnerRendererComponent, isStandalone: true, selector: "rolatech-product-owner-renderer", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-row items-center py-3\">\n  <div class=\"flex mr-3 gap-2 items-center\">\n    @if (avatar()) {\n      <div class=\"cursor-pointer\" [routerLink]=\"['/', '@' + username()]\">\n        <img [src]=\"avatar()\" class=\"w-11 h-11 rounded-full\" />\n      </div>\n    } @else {\n      <div class=\"w-11 h-11 rounded-full bg-[--rt-brand-color]\"></div>\n    }\n    <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n      <a [routerLink]=\"['/', '@' + username()]\">\n        <span>{{ name() }}</span>\n      </a>\n      <mat-icon color=\"primary\">verified</mat-icon>\n    </div>\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductOwnerRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ProductOwnerRendererComponent, isStandalone: true, selector: "rolatech-product-owner-renderer", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-row items-center py-3\">\n  <div class=\"flex mr-3 gap-2 items-center\">\n    @if (avatar()) {\n      <div class=\"cursor-pointer\" [routerLink]=\"['/', '@' + username()]\">\n        <img [src]=\"avatar()\" class=\"w-11 h-11 rounded-full\" alt />\n      </div>\n    } @else {\n      <div class=\"w-11 h-11 rounded-full bg-[--rt-brand-color]\"></div>\n    }\n    <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n      <a [routerLink]=\"['/', '@' + username()]\">\n        <span>{{ name() }}</span>\n      </a>\n      <mat-icon color=\"primary\">verified</mat-icon>\n    </div>\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductOwnerRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductOwnerRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-product-owner-renderer', standalone: true, imports: [AngularCommonModule, MatIconModule], template: "<div class=\"flex flex-row items-center py-3\">\n  <div class=\"flex mr-3 gap-2 items-center\">\n    @if (avatar()) {\n      <div class=\"cursor-pointer\" [routerLink]=\"['/', '@' + username()]\">\n        <img [src]=\"avatar()\" class=\"w-11 h-11 rounded-full\" />\n      </div>\n    } @else {\n      <div class=\"w-11 h-11 rounded-full bg-[--rt-brand-color]\"></div>\n    }\n    <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n      <a [routerLink]=\"['/', '@' + username()]\">\n        <span>{{ name() }}</span>\n      </a>\n      <mat-icon color=\"primary\">verified</mat-icon>\n    </div>\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"] }]
+            args: [{ selector: 'rolatech-product-owner-renderer', standalone: true, imports: [AngularCommonModule, MatIconModule], template: "<div class=\"flex flex-row items-center py-3\">\n  <div class=\"flex mr-3 gap-2 items-center\">\n    @if (avatar()) {\n      <div class=\"cursor-pointer\" [routerLink]=\"['/', '@' + username()]\">\n        <img [src]=\"avatar()\" class=\"w-11 h-11 rounded-full\" alt />\n      </div>\n    } @else {\n      <div class=\"w-11 h-11 rounded-full bg-[--rt-brand-color]\"></div>\n    }\n    <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n      <a [routerLink]=\"['/', '@' + username()]\">\n        <span>{{ name() }}</span>\n      </a>\n      <mat-icon color=\"primary\">verified</mat-icon>\n    </div>\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"] }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZHVjdC1vd25lci1yZW5kZXJlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItcHJvZHVjdC9zcmMvbGliL2NvbXBvbmVudHMvcHJvZHVjdC1vd25lci1yZW5kZXJlci9wcm9kdWN0LW93bmVyLXJlbmRlcmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1wcm9kdWN0L3NyYy9saWIvY29tcG9uZW50cy9wcm9kdWN0LW93bmVyLXJlbmRlcmVyL3Byb2R1Y3Qtb3duZXItcmVuZGVyZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDBCQUEwQixDQUFDOzs7O0FBUy9ELE1BQU0sT0FBTyw2QkFBNkI7SUFQMUM7UUFRRSxTQUFJLEdBQUcsS0FBSyxFQUFVLENBQUM7UUFDdkIsV0FBTSxHQUFHLEtBQUssRUFBVSxDQUFDO1FBQ3pCLGFBQVEsR0FBRyxLQUFLLEVBQVUsQ0FBQztLQUM1Qjs4R0FKWSw2QkFBNkI7a0dBQTdCLDZCQUE2Qix3ZENYMUMsMm5CQWlCQSx3RkRWWSxtQkFBbUIsK1FBQUUsYUFBYTs7MkZBSWpDLDZCQUE2QjtrQkFQekMsU0FBUzsrQkFDRSxpQ0FBaUMsY0FDL0IsSUFBSSxXQUNQLENBQUMsbUJBQW1CLEVBQUUsYUFBYSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0SWNvbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2ljb24nO1xuaW1wb3J0IHsgQW5ndWxhckNvbW1vbk1vZHVsZSB9IGZyb20gJ0Byb2xhdGVjaC9hbmd1bGFyLWNvbW1vbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3JvbGF0ZWNoLXByb2R1Y3Qtb3duZXItcmVuZGVyZXInLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQW5ndWxhckNvbW1vbk1vZHVsZSwgTWF0SWNvbk1vZHVsZV0sXG4gIHRlbXBsYXRlVXJsOiAnLi9wcm9kdWN0LW93bmVyLXJlbmRlcmVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL3Byb2R1Y3Qtb3duZXItcmVuZGVyZXIuY29tcG9uZW50LnNjc3MnLFxufSlcbmV4cG9ydCBjbGFzcyBQcm9kdWN0T3duZXJSZW5kZXJlckNvbXBvbmVudCB7XG4gIG5hbWUgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIGF2YXRhciA9IGlucHV0PHN0cmluZz4oKTtcbiAgdXNlcm5hbWUgPSBpbnB1dDxzdHJpbmc+KCk7XG59XG4iLCI8ZGl2IGNsYXNzPVwiZmxleCBmbGV4LXJvdyBpdGVtcy1jZW50ZXIgcHktM1wiPlxuICA8ZGl2IGNsYXNzPVwiZmxleCBtci0zIGdhcC0yIGl0ZW1zLWNlbnRlclwiPlxuICAgIEBpZiAoYXZhdGFyKCkpIHtcbiAgICAgIDxkaXYgY2xhc3M9XCJjdXJzb3ItcG9pbnRlclwiIFtyb3V0ZXJMaW5rXT1cIlsnLycsICdAJyArIHVzZXJuYW1lKCldXCI+XG4gICAgICAgIDxpbWcgW3NyY109XCJhdmF0YXIoKVwiIGNsYXNzPVwidy0xMSBoLTExIHJvdW5kZWQtZnVsbFwiIC8+XG4gICAgICA8L2Rpdj5cbiAgICB9IEBlbHNlIHtcbiAgICAgIDxkaXYgY2xhc3M9XCJ3LTExIGgtMTEgcm91bmRlZC1mdWxsIGJnLVstLXJ0LWJyYW5kLWNvbG9yXVwiPjwvZGl2PlxuICAgIH1cbiAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIgdGV4dC1sZyBmb250LWJvbGQgY3Vyc29yLXBvaW50ZXJcIj5cbiAgICAgIDxhIFtyb3V0ZXJMaW5rXT1cIlsnLycsICdAJyArIHVzZXJuYW1lKCldXCI+XG4gICAgICAgIDxzcGFuPnt7IG5hbWUoKSB9fTwvc3Bhbj5cbiAgICAgIDwvYT5cbiAgICAgIDxtYXQtaWNvbiBjb2xvcj1cInByaW1hcnlcIj52ZXJpZmllZDwvbWF0LWljb24+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZHVjdC1vd25lci1yZW5kZXJlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItcHJvZHVjdC9zcmMvbGliL2NvbXBvbmVudHMvcHJvZHVjdC1vd25lci1yZW5kZXJlci9wcm9kdWN0LW93bmVyLXJlbmRlcmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1wcm9kdWN0L3NyYy9saWIvY29tcG9uZW50cy9wcm9kdWN0LW93bmVyLXJlbmRlcmVyL3Byb2R1Y3Qtb3duZXItcmVuZGVyZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDBCQUEwQixDQUFDOzs7O0FBUy9ELE1BQU0sT0FBTyw2QkFBNkI7SUFQMUM7UUFRRSxTQUFJLEdBQUcsS0FBSyxFQUFVLENBQUM7UUFDdkIsV0FBTSxHQUFHLEtBQUssRUFBVSxDQUFDO1FBQ3pCLGFBQVEsR0FBRyxLQUFLLEVBQVUsQ0FBQztLQUM1Qjs4R0FKWSw2QkFBNkI7a0dBQTdCLDZCQUE2Qix3ZENYMUMsK25CQWlCQSx3RkRWWSxtQkFBbUIsK1FBQUUsYUFBYTs7MkZBSWpDLDZCQUE2QjtrQkFQekMsU0FBUzsrQkFDRSxpQ0FBaUMsY0FDL0IsSUFBSSxXQUNQLENBQUMsbUJBQW1CLEVBQUUsYUFBYSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0SWNvbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2ljb24nO1xuaW1wb3J0IHsgQW5ndWxhckNvbW1vbk1vZHVsZSB9IGZyb20gJ0Byb2xhdGVjaC9hbmd1bGFyLWNvbW1vbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3JvbGF0ZWNoLXByb2R1Y3Qtb3duZXItcmVuZGVyZXInLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQW5ndWxhckNvbW1vbk1vZHVsZSwgTWF0SWNvbk1vZHVsZV0sXG4gIHRlbXBsYXRlVXJsOiAnLi9wcm9kdWN0LW93bmVyLXJlbmRlcmVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL3Byb2R1Y3Qtb3duZXItcmVuZGVyZXIuY29tcG9uZW50LnNjc3MnLFxufSlcbmV4cG9ydCBjbGFzcyBQcm9kdWN0T3duZXJSZW5kZXJlckNvbXBvbmVudCB7XG4gIG5hbWUgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIGF2YXRhciA9IGlucHV0PHN0cmluZz4oKTtcbiAgdXNlcm5hbWUgPSBpbnB1dDxzdHJpbmc+KCk7XG59XG4iLCI8ZGl2IGNsYXNzPVwiZmxleCBmbGV4LXJvdyBpdGVtcy1jZW50ZXIgcHktM1wiPlxuICA8ZGl2IGNsYXNzPVwiZmxleCBtci0zIGdhcC0yIGl0ZW1zLWNlbnRlclwiPlxuICAgIEBpZiAoYXZhdGFyKCkpIHtcbiAgICAgIDxkaXYgY2xhc3M9XCJjdXJzb3ItcG9pbnRlclwiIFtyb3V0ZXJMaW5rXT1cIlsnLycsICdAJyArIHVzZXJuYW1lKCldXCI+XG4gICAgICAgIDxpbWcgW3NyY109XCJhdmF0YXIoKVwiIGNsYXNzPVwidy0xMSBoLTExIHJvdW5kZWQtZnVsbFwiIGFsdCAvPlxuICAgICAgPC9kaXY+XG4gICAgfSBAZWxzZSB7XG4gICAgICA8ZGl2IGNsYXNzPVwidy0xMSBoLTExIHJvdW5kZWQtZnVsbCBiZy1bLS1ydC1icmFuZC1jb2xvcl1cIj48L2Rpdj5cbiAgICB9XG4gICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyIHRleHQtbGcgZm9udC1ib2xkIGN1cnNvci1wb2ludGVyXCI+XG4gICAgICA8YSBbcm91dGVyTGlua109XCJbJy8nLCAnQCcgKyB1c2VybmFtZSgpXVwiPlxuICAgICAgICA8c3Bhbj57eyBuYW1lKCkgfX08L3NwYW4+XG4gICAgICA8L2E+XG4gICAgICA8bWF0LWljb24gY29sb3I9XCJwcmltYXJ5XCI+dmVyaWZpZWQ8L21hdC1pY29uPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19

package/esm2022/lib/components/product-pricing/product-pricing.component.mjs

@@ -21,10 +21,10 @@ export class ProductPricingComponent {
     onWish(product) {
         this.wish.emit(product);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductPricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ProductPricingComponent, isStandalone: true, selector: "rolatech-product-pricing", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: true, transformFunction: null }, inWishList: { classPropertyName: "inWishList", publicName: "inWishList", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wish: "wish" }, ngImport: i0, template: "<div class=\"py-3\">\n  <div class=\"flex justify-between items-center\">\n    <div class=\"text-xl font-bold py-3\">\u00A5 {{ displayPrice() }}</div>\n    <button mat-icon-button (click)=\"onWish(product())\">\n      @if (inWishList()) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n          <path\n            d=\"m293-203.08 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08Z\"\n          />\n        </svg>\n      } @else {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n          <path\n            d=\"m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143Zm-61 83.92 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08ZM480-470Z\"\n          />\n        </svg>\n      }\n    </button>\n  </div>\n  <mat-divider></mat-divider>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductPricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ProductPricingComponent, isStandalone: true, selector: "rolatech-product-pricing", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: true, transformFunction: null }, inWishList: { classPropertyName: "inWishList", publicName: "inWishList", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wish: "wish" }, ngImport: i0, template: "<div class=\"py-3\">\n  <div class=\"flex justify-between items-center\">\n    <div class=\"text-xl font-bold py-3\">\u00A5 {{ displayPrice() }}</div>\n    <button mat-icon-button (click)=\"onWish(product())\">\n      @if (inWishList()) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n          <path\n            d=\"m293-203.08 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08Z\"\n          />\n        </svg>\n      } @else {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n          <path\n            d=\"m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143Zm-61 83.92 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08ZM480-470Z\"\n          />\n        </svg>\n      }\n    </button>\n  </div>\n  <mat-divider></mat-divider>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductPricingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductPricingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-product-pricing', standalone: true, imports: [CommonModule, MatButtonModule, MatIcon, MatDivider], encapsulation: ViewEncapsulation.None, template: "<div class=\"py-3\">\n  <div class=\"flex justify-between items-center\">\n    <div class=\"text-xl font-bold py-3\">\u00A5 {{ displayPrice() }}</div>\n    <button mat-icon-button (click)=\"onWish(product())\">\n      @if (inWishList()) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n          <path\n            d=\"m293-203.08 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08Z\"\n          />\n        </svg>\n      } @else {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n          <path\n            d=\"m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143Zm-61 83.92 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08ZM480-470Z\"\n          />\n        </svg>\n      }\n    </button>\n  </div>\n  <mat-divider></mat-divider>\n</div>\n" }]
         }] });

package/esm2022/lib/components/product-section/product-section.component.mjs

@@ -16,10 +16,10 @@ export class ProductSectionComponent {
     onClickScroller(id) {
         this.viewportScroller.scrollToAnchor(id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ProductSectionComponent, isStandalone: true, selector: "rolatech-product-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (section(); as section) {\n  @if (row()) {\n    <div>\n      @if (section.title) {\n        <div class=\"py-3 flex items-center gap-3\">\n          <span class=\"h-4 w-1 bg-[--rt-brand-color] inline-block\"></span>\n          <span class=\"text-lg font-medium py-1\"> {{ section.title }}</span>\n        </div>\n      }\n      @if (section.description) {\n        <div>\n          {{ section.description }}\n        </div>\n      }\n      @if (section.media) {\n        <div class=\"w-80%\">\n          @for (item of section.media; track item) {\n            <div class=\"py-3\">\n              <rolatech-thumbnail\n                [src]=\"item.url\"\n                size=\"small\"\n                mode=\"full\"\n                [width]=\"item.width\"\n                [height]=\"item.height\"\n              ></rolatech-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <div\n      class=\"flex w-full p-3\"\n      [ngClass]=\"reverse() ? 'flex-col-reverse md:flex-row-reverse' : 'flex-col-reverse md:flex-row'\"\n    >\n      <div\n        class=\"w-full md:w-1/2 py-3 flex flex-col justify-center items-center gap-3\"\n        [ngClass]=\"reverse() ? ' md:ml-16' : 'md:mr-16'\"\n      >\n        <span class=\"text-3xl font-bold py-1\"> {{ section.title }}</span>\n        <span>\n          {{ section.description }}\n        </span>\n      </div>\n      <div class=\"w-full md:w-1/2 py-11\">\n        @for (item of section.media; track item) {\n          <div class=\"py-3\">\n            <rolatech-thumbnail\n              [src]=\"item.url\"\n              size=\"small\"\n              mode=\"full\"\n              [width]=\"item.width\"\n              [height]=\"item.height\"\n            ></rolatech-thumbnail>\n          </div>\n        }\n      </div>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ProductSectionComponent, isStandalone: true, selector: "rolatech-product-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (section(); as section) {\n  @if (row()) {\n    <div>\n      @if (section.title) {\n        <div class=\"py-3 flex items-center gap-3\">\n          <span class=\"h-4 w-1 bg-[--rt-brand-color] inline-block\"></span>\n          <span class=\"text-lg font-medium py-1\"> {{ section.title }}</span>\n        </div>\n      }\n      @if (section.description) {\n        <div>\n          {{ section.description }}\n        </div>\n      }\n      @if (section.media) {\n        <div class=\"w-80%\">\n          @for (item of section.media; track item) {\n            <div class=\"py-3\">\n              <rolatech-thumbnail\n                [src]=\"item.url\"\n                size=\"small\"\n                mode=\"full\"\n                [width]=\"item.width\"\n                [height]=\"item.height\"\n              ></rolatech-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <div\n      class=\"flex w-full p-3\"\n      [ngClass]=\"reverse() ? 'flex-col-reverse md:flex-row-reverse' : 'flex-col-reverse md:flex-row'\"\n    >\n      <div\n        class=\"w-full md:w-1/2 py-3 flex flex-col justify-center items-center gap-3\"\n        [ngClass]=\"reverse() ? ' md:ml-16' : 'md:mr-16'\"\n      >\n        <span class=\"text-3xl font-bold py-1\"> {{ section.title }}</span>\n        <span>\n          {{ section.description }}\n        </span>\n      </div>\n      <div class=\"w-full md:w-1/2 py-11\">\n        @for (item of section.media; track item) {\n          <div class=\"py-3\">\n            <rolatech-thumbnail\n              [src]=\"item.url\"\n              size=\"small\"\n              mode=\"full\"\n              [width]=\"item.width\"\n              [height]=\"item.height\"\n            ></rolatech-thumbnail>\n          </div>\n        }\n      </div>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-product-section', standalone: true, imports: [CommonModule, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "@if (section(); as section) {\n  @if (row()) {\n    <div>\n      @if (section.title) {\n        <div class=\"py-3 flex items-center gap-3\">\n          <span class=\"h-4 w-1 bg-[--rt-brand-color] inline-block\"></span>\n          <span class=\"text-lg font-medium py-1\"> {{ section.title }}</span>\n        </div>\n      }\n      @if (section.description) {\n        <div>\n          {{ section.description }}\n        </div>\n      }\n      @if (section.media) {\n        <div class=\"w-80%\">\n          @for (item of section.media; track item) {\n            <div class=\"py-3\">\n              <rolatech-thumbnail\n                [src]=\"item.url\"\n                size=\"small\"\n                mode=\"full\"\n                [width]=\"item.width\"\n                [height]=\"item.height\"\n              ></rolatech-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <div\n      class=\"flex w-full p-3\"\n      [ngClass]=\"reverse() ? 'flex-col-reverse md:flex-row-reverse' : 'flex-col-reverse md:flex-row'\"\n    >\n      <div\n        class=\"w-full md:w-1/2 py-3 flex flex-col justify-center items-center gap-3\"\n        [ngClass]=\"reverse() ? ' md:ml-16' : 'md:mr-16'\"\n      >\n        <span class=\"text-3xl font-bold py-1\"> {{ section.title }}</span>\n        <span>\n          {{ section.description }}\n        </span>\n      </div>\n      <div class=\"w-full md:w-1/2 py-11\">\n        @for (item of section.media; track item) {\n          <div class=\"py-3\">\n            <rolatech-thumbnail\n              [src]=\"item.url\"\n              size=\"small\"\n              mode=\"full\"\n              [width]=\"item.width\"\n              [height]=\"item.height\"\n            ></rolatech-thumbnail>\n          </div>\n        }\n      </div>\n    </div>\n  }\n}\n" }]
         }] });

package/esm2022/lib/pages/product/product-category/product-category.component.mjs

@@ -1,8 +1,7 @@
 import { Component, inject } from '@angular/core';
-import { ProductService } from '@rolatech/angular-services';
+import { ProductCategoryService, ProductService } from '@rolatech/angular-services';
 import { AngularComponentsModule, BaseComponent, RichItemComponent, RichViewComponent } from '@rolatech/angular-components';
 import { AngularCommonModule } from '@rolatech/angular-common';
-import { ProductCategoryService } from '../../../services';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/router";
 export class ProductCategoryComponent extends BaseComponent {
@@ -64,11 +63,11 @@ export class ProductCategoryComponent extends BaseComponent {
             relativeTo: this.route,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductCategoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ProductCategoryComponent, isStandalone: true, selector: "rolatech-product-category", usesInheritance: true, ngImport: i0, template: "<div>\n  @if (category) {\n    <div class=\"p-3 hidden md:block text-2xl font-medium\">{{ category.name }}</div>\n  } @else {\n    <div class=\"flex flex-row animate-pulse w-full\">\n      <div class=\"h-4 bg-[--rt-base-background] rounded col-span-2\"></div>\n    </div>\n  }\n  @if (loading) {\n    @for (number of [0, 1, 2, 3, 4, 5]; track number) {\n      <div class=\"flex flex-row animate-pulse mt-3 mr-4 cursor-pointer w-full\">\n        <div class=\"h-fit w-2/5 md:w-1/4 aspect-video bg-[--rt-base-background] rounded-lg\"></div>\n        <div class=\"w-3/5 md:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n          <div class=\"space-y-3\">\n            <div class=\"h-4 bg-[--rt-base-background] rounded col-span-2\"></div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-1\"></div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-1 py-1\"></div>\n          </div>\n          <div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-2 py-1\"></div>\n          </div>\n        </div>\n      </div>\n    }\n  } @else {\n    <rolatech-rich-view list>\n      @for (item of products; track item) {\n        @defer {\n          <rolatech-rich-item\n            [routerLink]=\"['../../', item.id]\"\n            [thumbnail]=\"item.media[0].url + '!w400'\"\n            [title]=\"item.name\"\n            [subtitle]=\"item.description\"\n            [price]=\"item.price / 100\"\n          ></rolatech-rich-item>\n        }\n      }\n    </rolatech-rich-view>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: RichViewComponent, selector: "rolatech-rich-view", inputs: ["list", "wrap"] }], deferBlockDependencies: [() => [i1.RouterLink, RichItemComponent]] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductCategoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ProductCategoryComponent, isStandalone: true, selector: "rolatech-product-category", usesInheritance: true, ngImport: i0, template: "<div>\n  @if (category) {\n    <div class=\"p-3 hidden md:block text-2xl font-medium\">{{ category.name }}</div>\n  } @else {\n    <div class=\"flex flex-row animate-pulse w-full\">\n      <div class=\"h-4 bg-[--rt-base-background] rounded col-span-2\"></div>\n    </div>\n  }\n  @if (loading) {\n    @for (number of [0, 1, 2, 3, 4, 5]; track number) {\n      <div class=\"flex flex-row animate-pulse mt-3 mr-4 cursor-pointer w-full\">\n        <div class=\"h-fit w-2/5 md:w-1/4 aspect-video bg-[--rt-base-background] rounded-lg\"></div>\n        <div class=\"w-3/5 md:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n          <div class=\"space-y-3\">\n            <div class=\"h-4 bg-[--rt-base-background] rounded col-span-2\"></div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-1\"></div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-1 py-1\"></div>\n          </div>\n          <div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-2 py-1\"></div>\n          </div>\n        </div>\n      </div>\n    }\n  } @else {\n    <rolatech-rich-view list>\n      @for (item of products; track item) {\n        @defer {\n          <rolatech-rich-item\n            [routerLink]=\"['../../', item.id]\"\n            [thumbnail]=\"item.media[0].url + '!w400'\"\n            [title]=\"item.name\"\n            [subtitle]=\"item.description\"\n            [price]=\"item.price / 100\"\n          ></rolatech-rich-item>\n        }\n      }\n    </rolatech-rich-view>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: RichViewComponent, selector: "rolatech-rich-view", inputs: ["list", "wrap"] }], deferBlockDependencies: [() => [i1.RouterLink, RichItemComponent]] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProductCategoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ProductCategoryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-product-category', standalone: true, imports: [AngularCommonModule, AngularComponentsModule, RichViewComponent, RichItemComponent], template: "<div>\n  @if (category) {\n    <div class=\"p-3 hidden md:block text-2xl font-medium\">{{ category.name }}</div>\n  } @else {\n    <div class=\"flex flex-row animate-pulse w-full\">\n      <div class=\"h-4 bg-[--rt-base-background] rounded col-span-2\"></div>\n    </div>\n  }\n  @if (loading) {\n    @for (number of [0, 1, 2, 3, 4, 5]; track number) {\n      <div class=\"flex flex-row animate-pulse mt-3 mr-4 cursor-pointer w-full\">\n        <div class=\"h-fit w-2/5 md:w-1/4 aspect-video bg-[--rt-base-background] rounded-lg\"></div>\n        <div class=\"w-3/5 md:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n          <div class=\"space-y-3\">\n            <div class=\"h-4 bg-[--rt-base-background] rounded col-span-2\"></div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-1\"></div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-1 py-1\"></div>\n          </div>\n          <div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-2 py-1\"></div>\n          </div>\n        </div>\n      </div>\n    }\n  } @else {\n    <rolatech-rich-view list>\n      @for (item of products; track item) {\n        @defer {\n          <rolatech-rich-item\n            [routerLink]=\"['../../', item.id]\"\n            [thumbnail]=\"item.media[0].url + '!w400'\"\n            [title]=\"item.name\"\n            [subtitle]=\"item.description\"\n            [price]=\"item.price / 100\"\n          ></rolatech-rich-item>\n        }\n      }\n    </rolatech-rich-view>\n  }\n</div>\n" }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZHVjdC1jYXRlZ29yeS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItcHJvZHVjdC9zcmMvbGliL3BhZ2VzL3Byb2R1Y3QvcHJvZHVjdC1jYXRlZ29yeS9wcm9kdWN0LWNhdGVnb3J5LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1wcm9kdWN0L3NyYy9saWIvcGFnZXMvcHJvZHVjdC9wcm9kdWN0LWNhdGVnb3J5L3Byb2R1Y3QtY2F0ZWdvcnkuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDMUQsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQzVELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxhQUFhLEVBQUUsaUJBQWlCLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUc1SCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUMvRCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQzs7O0FBUzNELE1BQU0sT0FBTyx3QkFBeUIsU0FBUSxhQUFhO0lBUDNEOztRQVFFLG9CQUFlLEdBQUcsTUFBTSxDQUFDLHNCQUFzQixDQUFDLENBQUM7UUFDakQsbUJBQWMsR0FBRyxNQUFNLENBQUMsY0FBYyxDQUFDLENBQUM7UUFFeEMsYUFBUSxHQUFjLEVBQUUsQ0FBQztRQUN6QixlQUFVLEdBQXNCLEVBQUUsQ0FBQztRQUNuQyxZQUFPLEdBQUcsS0FBSyxDQUFDO0tBcURqQjtJQW5EQyxRQUFRO1FBQ04sSUFBSSxDQUFDLGlCQUFpQixFQUFFLENBQUM7UUFDekIsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLENBQUMsTUFBZ0IsRUFBRSxFQUFFO1lBQ2pELE1BQU0sRUFBRSxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFXLENBQUM7WUFDdEMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLEVBQUUsQ0FBQyxDQUFDO1lBQzFCLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUNwQyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFDRCxpQkFBaUI7UUFDZixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyxTQUFTLENBQUM7WUFDdEMsSUFBSSxFQUFFLENBQUMsR0FBUSxFQUFFLEVBQUU7Z0JBQ2pCLElBQUksQ0FBQyxVQUFVLEdBQUcsR0FBRyxDQUFDLElBQUksQ0FBQztZQUM3QixDQUFDO1NBQ0YsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUNELGdCQUFnQixDQUFDLEVBQVU7UUFDekIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLENBQUMsU0FBUyxDQUFDO1lBQ3JDLElBQUksRUFBRSxDQUFDLEdBQVEsRUFBRSxFQUFFO2dCQUNqQixJQUFJLENBQUMsUUFBUSxHQUFHLEdBQUcsQ0FBQyxJQUFJLENBQUM7WUFDM0IsQ0FBQztTQUNGLENBQUMsQ0FBQztJQUNMLENBQUM7SUFDRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUMsU0FBUyxDQUFDO1lBQ3JDLElBQUksRUFBRSxDQUFDLEdBQVEsRUFBRSxFQUFFO2dCQUNqQixJQUFJLENBQUMsUUFBUSxHQUFHLEdBQUcsQ0FBQyxJQUFJLENBQUM7WUFDM0IsQ0FBQztTQUNGLENBQUMsQ0FBQztJQUNMLENBQUM7SUFDRCx3QkFBd0IsQ0FBQyxFQUFVO1FBQ2pDLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO1FBQ3BCLE1BQU0sT0FBTyxHQUFHO1lBQ2QsTUFBTSxFQUFFLGNBQWMsRUFBRSxpQkFBaUI7U0FDMUMsQ0FBQztRQUNGLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLFNBQVMsQ0FBQztZQUMxQyxJQUFJLEVBQUUsQ0FBQyxHQUFRLEVBQUUsRUFBRTtnQkFDakIsSUFBSSxDQUFDLFFBQVEsR0FBRyxHQUFHLENBQUMsSUFBSSxDQUFDO2dCQUN6QixJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztZQUN2QixDQUFDO1lBQ0QsS0FBSyxFQUFFLENBQUMsS0FBSyxFQUFFLEVBQUU7Z0JBQ2YsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7WUFDdkIsQ0FBQztTQUNGLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxzQkFBc0IsQ0FBQyxJQUFTO1FBQzlCLHlDQUF5QztRQUN6QyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLFNBQVMsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDLEVBQUU7WUFDekMsVUFBVSxFQUFFLElBQUksQ0FBQyxLQUFLO1NBQ3ZCLENBQUMsQ0FBQztJQUNMLENBQUM7OEdBMURVLHdCQUF3QjtrR0FBeEIsd0JBQXdCLDRHQ2ZyQyxtaERBd0NBLHlERDdCWSxtQkFBbUIsOEJBQUUsdUJBQXVCLCtCQUFFLGlCQUFpQiw4R0FBRSxpQkFBaUI7OzJGQUlqRix3QkFBd0I7a0JBUHBDLFNBQVM7K0JBQ0UsMkJBQTJCLGNBQ3pCLElBQUksV0FDUCxDQUFDLG1CQUFtQixFQUFFLHVCQUF1QixFQUFFLGlCQUFpQixFQUFFLGlCQUFpQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBpbmplY3QsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUHJvZHVjdFNlcnZpY2UgfSBmcm9tICdAcm9sYXRlY2gvYW5ndWxhci1zZXJ2aWNlcyc7XG5pbXBvcnQgeyBBbmd1bGFyQ29tcG9uZW50c01vZHVsZSwgQmFzZUNvbXBvbmVudCwgUmljaEl0ZW1Db21wb25lbnQsIFJpY2hWaWV3Q29tcG9uZW50IH0gZnJvbSAnQHJvbGF0ZWNoL2FuZ3VsYXItY29tcG9uZW50cyc7XG5pbXBvcnQgeyBQcm9kdWN0LCBQcm9kdWN0Q2F0ZWdvcnkgfSBmcm9tICcuLi8uLi8uLi9pbnRlcmZhY2VzJztcbmltcG9ydCB7IFBhcmFtTWFwIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcbmltcG9ydCB7IEFuZ3VsYXJDb21tb25Nb2R1bGUgfSBmcm9tICdAcm9sYXRlY2gvYW5ndWxhci1jb21tb24nO1xuaW1wb3J0IHsgUHJvZHVjdENhdGVnb3J5U2VydmljZSB9IGZyb20gJy4uLy4uLy4uL3NlcnZpY2VzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncm9sYXRlY2gtcHJvZHVjdC1jYXRlZ29yeScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtBbmd1bGFyQ29tbW9uTW9kdWxlLCBBbmd1bGFyQ29tcG9uZW50c01vZHVsZSwgUmljaFZpZXdDb21wb25lbnQsIFJpY2hJdGVtQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL3Byb2R1Y3QtY2F0ZWdvcnkuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vcHJvZHVjdC1jYXRlZ29yeS5jb21wb25lbnQuc2NzcycsXG59KVxuZXhwb3J0IGNsYXNzIFByb2R1Y3RDYXRlZ29yeUNvbXBvbmVudCBleHRlbmRzIEJhc2VDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBjYXRlZ29yeVNlcnZpY2UgPSBpbmplY3QoUHJvZHVjdENhdGVnb3J5U2VydmljZSk7XG4gIHByb2R1Y3RTZXJ2aWNlID0gaW5qZWN0KFByb2R1Y3RTZXJ2aWNlKTtcbiAgY2F0ZWdvcnkhOiBQcm9kdWN0Q2F0ZWdvcnk7XG4gIHByb2R1Y3RzOiBQcm9kdWN0W10gPSBbXTtcbiAgY2F0ZWdvcmllczogUHJvZHVjdENhdGVnb3J5W10gPSBbXTtcbiAgbG9hZGluZyA9IGZhbHNlO1xuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuZmluZEFsbENhdGVnb3JpZXMoKTtcbiAgICB0aGlzLnJvdXRlLnBhcmFtTWFwLnN1YnNjcmliZSgocGFyYW1zOiBQYXJhbU1hcCkgPT4ge1xuICAgICAgY29uc3QgaWQgPSBwYXJhbXMuZ2V0KCdpZCcpIGFzIHN0cmluZztcbiAgICAgIHRoaXMuZmluZENhdGVnb3J5QnlJZChpZCk7XG4gICAgICB0aGlzLmZpbmRQcm9kdWN0c0J5Q2F0ZWdvcnlJZChpZCk7XG4gICAgfSk7XG4gIH1cbiAgZmluZEFsbENhdGVnb3JpZXMoKSB7XG4gICAgdGhpcy5jYXRlZ29yeVNlcnZpY2UuZmluZCh7fSkuc3Vic2NyaWJlKHtcbiAgICAgIG5leHQ6IChyZXM6IGFueSkgPT4ge1xuICAgICAgICB0aGlzLmNhdGVnb3JpZXMgPSByZXMuZGF0YTtcbiAgICAgIH0sXG4gICAgfSk7XG4gIH1cbiAgZmluZENhdGVnb3J5QnlJZChpZDogc3RyaW5nKSB7XG4gICAgdGhpcy5jYXRlZ29yeVNlcnZpY2UuZ2V0KGlkKS5zdWJzY3JpYmUoe1xuICAgICAgbmV4dDogKHJlczogYW55KSA9PiB7XG4gICAgICAgIHRoaXMuY2F0ZWdvcnkgPSByZXMuZGF0YTtcbiAgICAgIH0sXG4gICAgfSk7XG4gIH1cbiAgZmluZEFsbFByb2R1Y3RzKCkge1xuICAgIHRoaXMucHJvZHVjdFNlcnZpY2UuZmluZCh7fSkuc3Vic2NyaWJlKHtcbiAgICAgIG5leHQ6IChyZXM6IGFueSkgPT4ge1xuICAgICAgICB0aGlzLnByb2R1Y3RzID0gcmVzLmRhdGE7XG4gICAgICB9LFxuICAgIH0pO1xuICB9XG4gIGZpbmRQcm9kdWN0c0J5Q2F0ZWdvcnlJZChpZDogc3RyaW5nKSB7XG4gICAgdGhpcy5sb2FkaW5nID0gdHJ1ZTtcbiAgICBjb25zdCBvcHRpb25zID0ge1xuICAgICAgZmlsdGVyOiBgY2F0ZWdvcmllczoke2lkfSxwdWJsaXNoZWQ6dHJ1ZWAsXG4gICAgfTtcbiAgICB0aGlzLnByb2R1Y3RTZXJ2aWNlLmZpbmQob3B0aW9ucykuc3Vic2NyaWJlKHtcbiAgICAgIG5leHQ6IChyZXM6IGFueSkgPT4ge1xuICAgICAgICB0aGlzLnByb2R1Y3RzID0gcmVzLmRhdGE7XG4gICAgICAgIHRoaXMubG9hZGluZyA9IGZhbHNlO1xuICAgICAgfSxcbiAgICAgIGVycm9yOiAoZXJyb3IpID0+IHtcbiAgICAgICAgdGhpcy5sb2FkaW5nID0gZmFsc2U7XG4gICAgICB9LFxuICAgIH0pO1xuICB9XG5cbiAgbG9hZFByb2R1Y3RzQnlDYXRlZ29yeShpdGVtOiBhbnkpIHtcbiAgICAvLyAgW3JvdXRlckxpbmtdID0gXCJbJy4uLy4uLycsIGl0ZW0uaWRdXCI7XG4gICAgdGhpcy5yb3V0ZXIubmF2aWdhdGUoW2AuLi8uLi8ke2l0ZW0uaWR9YF0sIHtcbiAgICAgIHJlbGF0aXZlVG86IHRoaXMucm91dGUsXG4gICAgfSk7XG4gIH1cbn1cbiIsIjxkaXY+XG4gIEBpZiAoY2F0ZWdvcnkpIHtcbiAgICA8ZGl2IGNsYXNzPVwicC0zIGhpZGRlbiBtZDpibG9jayB0ZXh0LTJ4bCBmb250LW1lZGl1bVwiPnt7IGNhdGVnb3J5Lm5hbWUgfX08L2Rpdj5cbiAgfSBAZWxzZSB7XG4gICAgPGRpdiBjbGFzcz1cImZsZXggZmxleC1yb3cgYW5pbWF0ZS1wdWxzZSB3LWZ1bGxcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJoLTQgYmctWy0tcnQtYmFzZS1iYWNrZ3JvdW5kXSByb3VuZGVkIGNvbC1zcGFuLTJcIj48L2Rpdj5cbiAgICA8L2Rpdj5cbiAgfVxuICBAaWYgKGxvYWRpbmcpIHtcbiAgICBAZm9yIChudW1iZXIgb2YgWzAsIDEsIDIsIDMsIDQsIDVdOyB0cmFjayBudW1iZXIpIHtcbiAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGZsZXgtcm93IGFuaW1hdGUtcHVsc2UgbXQtMyBtci00IGN1cnNvci1wb2ludGVyIHctZnVsbFwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiaC1maXQgdy0yLzUgbWQ6dy0xLzQgYXNwZWN0LXZpZGVvIGJnLVstLXJ0LWJhc2UtYmFja2dyb3VuZF0gcm91bmRlZC1sZ1wiPjwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwidy0zLzUgbWQ6dy0zLzQgbWwtMyBweS0xIGZsZXggZmxleC1jb2wganVzdGlmeS1iZXR3ZWVuXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cInNwYWNlLXktM1wiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImgtNCBiZy1bLS1ydC1iYXNlLWJhY2tncm91bmRdIHJvdW5kZWQgY29sLXNwYW4tMlwiPjwvZGl2PlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImgtMiBiZy1bLS1ydC1iYXNlLWJhY2tncm91bmRdIHJvdW5kZWQgY29sLXNwYW4tMVwiPjwvZGl2PlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImgtMiBiZy1bLS1ydC1iYXNlLWJhY2tncm91bmRdIHJvdW5kZWQgY29sLXNwYW4tMSBweS0xXCI+PC9kaXY+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJoLTIgYmctWy0tcnQtYmFzZS1iYWNrZ3JvdW5kXSByb3VuZGVkIGNvbC1zcGFuLTIgcHktMVwiPjwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIH1cbiAgfSBAZWxzZSB7XG4gICAgPHJvbGF0ZWNoLXJpY2gtdmlldyBsaXN0PlxuICAgICAgQGZvciAoaXRlbSBvZiBwcm9kdWN0czsgdHJhY2sgaXRlbSkge1xuICAgICAgICBAZGVmZXIge1xuICAgICAgICAgIDxyb2xhdGVjaC1yaWNoLWl0ZW1cbiAgICAgICAgICAgIFtyb3V0ZXJMaW5rXT1cIlsnLi4vLi4vJywgaXRlbS5pZF1cIlxuICAgICAgICAgICAgW3RodW1ibmFpbF09XCJpdGVtLm1lZGlhWzBdLnVybCArICchdzQwMCdcIlxuICAgICAgICAgICAgW3RpdGxlXT1cIml0ZW0ubmFtZVwiXG4gICAgICAgICAgICBbc3VidGl0bGVdPVwiaXRlbS5kZXNjcmlwdGlvblwiXG4gICAgICAgICAgICBbcHJpY2VdPVwiaXRlbS5wcmljZSAvIDEwMFwiXG4gICAgICAgICAgPjwvcm9sYXRlY2gtcmljaC1pdGVtPlxuICAgICAgICB9XG4gICAgICB9XG4gICAgPC9yb2xhdGVjaC1yaWNoLXZpZXc+XG4gIH1cbjwvZGl2PlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZHVjdC1jYXRlZ29yeS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItcHJvZHVjdC9zcmMvbGliL3BhZ2VzL3Byb2R1Y3QvcHJvZHVjdC1jYXRlZ29yeS9wcm9kdWN0LWNhdGVnb3J5LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1wcm9kdWN0L3NyYy9saWIvcGFnZXMvcHJvZHVjdC9wcm9kdWN0LWNhdGVnb3J5L3Byb2R1Y3QtY2F0ZWdvcnkuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDMUQsT0FBTyxFQUFFLHNCQUFzQixFQUFFLGNBQWMsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ3BGLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxhQUFhLEVBQUUsaUJBQWlCLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUc1SCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQzs7O0FBUy9ELE1BQU0sT0FBTyx3QkFBeUIsU0FBUSxhQUFhO0lBUDNEOztRQVFFLG9CQUFlLEdBQUcsTUFBTSxDQUFDLHNCQUFzQixDQUFDLENBQUM7UUFDakQsbUJBQWMsR0FBRyxNQUFNLENBQUMsY0FBYyxDQUFDLENBQUM7UUFFeEMsYUFBUSxHQUFjLEVBQUUsQ0FBQztRQUN6QixlQUFVLEdBQXNCLEVBQUUsQ0FBQztRQUNuQyxZQUFPLEdBQUcsS0FBSyxDQUFDO0tBcURqQjtJQW5EQyxRQUFRO1FBQ04sSUFBSSxDQUFDLGlCQUFpQixFQUFFLENBQUM7UUFDekIsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLENBQUMsTUFBZ0IsRUFBRSxFQUFFO1lBQ2pELE1BQU0sRUFBRSxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFXLENBQUM7WUFDdEMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLEVBQUUsQ0FBQyxDQUFDO1lBQzFCLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUNwQyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFDRCxpQkFBaUI7UUFDZixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyxTQUFTLENBQUM7WUFDdEMsSUFBSSxFQUFFLENBQUMsR0FBUSxFQUFFLEVBQUU7Z0JBQ2pCLElBQUksQ0FBQyxVQUFVLEdBQUcsR0FBRyxDQUFDLElBQUksQ0FBQztZQUM3QixDQUFDO1NBQ0YsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUNELGdCQUFnQixDQUFDLEVBQVU7UUFDekIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLENBQUMsU0FBUyxDQUFDO1lBQ3JDLElBQUksRUFBRSxDQUFDLEdBQVEsRUFBRSxFQUFFO2dCQUNqQixJQUFJLENBQUMsUUFBUSxHQUFHLEdBQUcsQ0FBQyxJQUFJLENBQUM7WUFDM0IsQ0FBQztTQUNGLENBQUMsQ0FBQztJQUNMLENBQUM7SUFDRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUMsU0FBUyxDQUFDO1lBQ3JDLElBQUksRUFBRSxDQUFDLEdBQVEsRUFBRSxFQUFFO2dCQUNqQixJQUFJLENBQUMsUUFBUSxHQUFHLEdBQUcsQ0FBQyxJQUFJLENBQUM7WUFDM0IsQ0FBQztTQUNGLENBQUMsQ0FBQztJQUNMLENBQUM7SUFDRCx3QkFBd0IsQ0FBQyxFQUFVO1FBQ2pDLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO1FBQ3BCLE1BQU0sT0FBTyxHQUFHO1lBQ2QsTUFBTSxFQUFFLGNBQWMsRUFBRSxpQkFBaUI7U0FDMUMsQ0FBQztRQUNGLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLFNBQVMsQ0FBQztZQUMxQyxJQUFJLEVBQUUsQ0FBQyxHQUFRLEVBQUUsRUFBRTtnQkFDakIsSUFBSSxDQUFDLFFBQVEsR0FBRyxHQUFHLENBQUMsSUFBSSxDQUFDO2dCQUN6QixJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztZQUN2QixDQUFDO1lBQ0QsS0FBSyxFQUFFLENBQUMsS0FBSyxFQUFFLEVBQUU7Z0JBQ2YsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7WUFDdkIsQ0FBQztTQUNGLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxzQkFBc0IsQ0FBQyxJQUFTO1FBQzlCLHlDQUF5QztRQUN6QyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLFNBQVMsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDLEVBQUU7WUFDekMsVUFBVSxFQUFFLElBQUksQ0FBQyxLQUFLO1NBQ3ZCLENBQUMsQ0FBQztJQUNMLENBQUM7OEdBMURVLHdCQUF3QjtrR0FBeEIsd0JBQXdCLDRHQ2RyQyxtaERBd0NBLHlERDlCWSxtQkFBbUIsOEJBQUUsdUJBQXVCLCtCQUFFLGlCQUFpQiw4R0FBRSxpQkFBaUI7OzJGQUlqRix3QkFBd0I7a0JBUHBDLFNBQVM7K0JBQ0UsMkJBQTJCLGNBQ3pCLElBQUksV0FDUCxDQUFDLG1CQUFtQixFQUFFLHVCQUF1QixFQUFFLGlCQUFpQixFQUFFLGlCQUFpQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBpbmplY3QsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUHJvZHVjdENhdGVnb3J5U2VydmljZSwgUHJvZHVjdFNlcnZpY2UgfSBmcm9tICdAcm9sYXRlY2gvYW5ndWxhci1zZXJ2aWNlcyc7XG5pbXBvcnQgeyBBbmd1bGFyQ29tcG9uZW50c01vZHVsZSwgQmFzZUNvbXBvbmVudCwgUmljaEl0ZW1Db21wb25lbnQsIFJpY2hWaWV3Q29tcG9uZW50IH0gZnJvbSAnQHJvbGF0ZWNoL2FuZ3VsYXItY29tcG9uZW50cyc7XG5pbXBvcnQgeyBQcm9kdWN0LCBQcm9kdWN0Q2F0ZWdvcnkgfSBmcm9tICcuLi8uLi8uLi9pbnRlcmZhY2VzJztcbmltcG9ydCB7IFBhcmFtTWFwIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcbmltcG9ydCB7IEFuZ3VsYXJDb21tb25Nb2R1bGUgfSBmcm9tICdAcm9sYXRlY2gvYW5ndWxhci1jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdyb2xhdGVjaC1wcm9kdWN0LWNhdGVnb3J5JyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0FuZ3VsYXJDb21tb25Nb2R1bGUsIEFuZ3VsYXJDb21wb25lbnRzTW9kdWxlLCBSaWNoVmlld0NvbXBvbmVudCwgUmljaEl0ZW1Db21wb25lbnRdLFxuICB0ZW1wbGF0ZVVybDogJy4vcHJvZHVjdC1jYXRlZ29yeS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9wcm9kdWN0LWNhdGVnb3J5LmNvbXBvbmVudC5zY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgUHJvZHVjdENhdGVnb3J5Q29tcG9uZW50IGV4dGVuZHMgQmFzZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIGNhdGVnb3J5U2VydmljZSA9IGluamVjdChQcm9kdWN0Q2F0ZWdvcnlTZXJ2aWNlKTtcbiAgcHJvZHVjdFNlcnZpY2UgPSBpbmplY3QoUHJvZHVjdFNlcnZpY2UpO1xuICBjYXRlZ29yeSE6IFByb2R1Y3RDYXRlZ29yeTtcbiAgcHJvZHVjdHM6IFByb2R1Y3RbXSA9IFtdO1xuICBjYXRlZ29yaWVzOiBQcm9kdWN0Q2F0ZWdvcnlbXSA9IFtdO1xuICBsb2FkaW5nID0gZmFsc2U7XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5maW5kQWxsQ2F0ZWdvcmllcygpO1xuICAgIHRoaXMucm91dGUucGFyYW1NYXAuc3Vic2NyaWJlKChwYXJhbXM6IFBhcmFtTWFwKSA9PiB7XG4gICAgICBjb25zdCBpZCA9IHBhcmFtcy5nZXQoJ2lkJykgYXMgc3RyaW5nO1xuICAgICAgdGhpcy5maW5kQ2F0ZWdvcnlCeUlkKGlkKTtcbiAgICAgIHRoaXMuZmluZFByb2R1Y3RzQnlDYXRlZ29yeUlkKGlkKTtcbiAgICB9KTtcbiAgfVxuICBmaW5kQWxsQ2F0ZWdvcmllcygpIHtcbiAgICB0aGlzLmNhdGVnb3J5U2VydmljZS5maW5kKHt9KS5zdWJzY3JpYmUoe1xuICAgICAgbmV4dDogKHJlczogYW55KSA9PiB7XG4gICAgICAgIHRoaXMuY2F0ZWdvcmllcyA9IHJlcy5kYXRhO1xuICAgICAgfSxcbiAgICB9KTtcbiAgfVxuICBmaW5kQ2F0ZWdvcnlCeUlkKGlkOiBzdHJpbmcpIHtcbiAgICB0aGlzLmNhdGVnb3J5U2VydmljZS5nZXQoaWQpLnN1YnNjcmliZSh7XG4gICAgICBuZXh0OiAocmVzOiBhbnkpID0+IHtcbiAgICAgICAgdGhpcy5jYXRlZ29yeSA9IHJlcy5kYXRhO1xuICAgICAgfSxcbiAgICB9KTtcbiAgfVxuICBmaW5kQWxsUHJvZHVjdHMoKSB7XG4gICAgdGhpcy5wcm9kdWN0U2VydmljZS5maW5kKHt9KS5zdWJzY3JpYmUoe1xuICAgICAgbmV4dDogKHJlczogYW55KSA9PiB7XG4gICAgICAgIHRoaXMucHJvZHVjdHMgPSByZXMuZGF0YTtcbiAgICAgIH0sXG4gICAgfSk7XG4gIH1cbiAgZmluZFByb2R1Y3RzQnlDYXRlZ29yeUlkKGlkOiBzdHJpbmcpIHtcbiAgICB0aGlzLmxvYWRpbmcgPSB0cnVlO1xuICAgIGNvbnN0IG9wdGlvbnMgPSB7XG4gICAgICBmaWx0ZXI6IGBjYXRlZ29yaWVzOiR7aWR9LHB1Ymxpc2hlZDp0cnVlYCxcbiAgICB9O1xuICAgIHRoaXMucHJvZHVjdFNlcnZpY2UuZmluZChvcHRpb25zKS5zdWJzY3JpYmUoe1xuICAgICAgbmV4dDogKHJlczogYW55KSA9PiB7XG4gICAgICAgIHRoaXMucHJvZHVjdHMgPSByZXMuZGF0YTtcbiAgICAgICAgdGhpcy5sb2FkaW5nID0gZmFsc2U7XG4gICAgICB9LFxuICAgICAgZXJyb3I6IChlcnJvcikgPT4ge1xuICAgICAgICB0aGlzLmxvYWRpbmcgPSBmYWxzZTtcbiAgICAgIH0sXG4gICAgfSk7XG4gIH1cblxuICBsb2FkUHJvZHVjdHNCeUNhdGVnb3J5KGl0ZW06IGFueSkge1xuICAgIC8vICBbcm91dGVyTGlua10gPSBcIlsnLi4vLi4vJywgaXRlbS5pZF1cIjtcbiAgICB0aGlzLnJvdXRlci5uYXZpZ2F0ZShbYC4uLy4uLyR7aXRlbS5pZH1gXSwge1xuICAgICAgcmVsYXRpdmVUbzogdGhpcy5yb3V0ZSxcbiAgICB9KTtcbiAgfVxufVxuIiwiPGRpdj5cbiAgQGlmIChjYXRlZ29yeSkge1xuICAgIDxkaXYgY2xhc3M9XCJwLTMgaGlkZGVuIG1kOmJsb2NrIHRleHQtMnhsIGZvbnQtbWVkaXVtXCI+e3sgY2F0ZWdvcnkubmFtZSB9fTwvZGl2PlxuICB9IEBlbHNlIHtcbiAgICA8ZGl2IGNsYXNzPVwiZmxleCBmbGV4LXJvdyBhbmltYXRlLXB1bHNlIHctZnVsbFwiPlxuICAgICAgPGRpdiBjbGFzcz1cImgtNCBiZy1bLS1ydC1iYXNlLWJhY2tncm91bmRdIHJvdW5kZWQgY29sLXNwYW4tMlwiPjwvZGl2PlxuICAgIDwvZGl2PlxuICB9XG4gIEBpZiAobG9hZGluZykge1xuICAgIEBmb3IgKG51bWJlciBvZiBbMCwgMSwgMiwgMywgNCwgNV07IHRyYWNrIG51bWJlcikge1xuICAgICAgPGRpdiBjbGFzcz1cImZsZXggZmxleC1yb3cgYW5pbWF0ZS1wdWxzZSBtdC0zIG1yLTQgY3Vyc29yLXBvaW50ZXIgdy1mdWxsXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJoLWZpdCB3LTIvNSBtZDp3LTEvNCBhc3BlY3QtdmlkZW8gYmctWy0tcnQtYmFzZS1iYWNrZ3JvdW5kXSByb3VuZGVkLWxnXCI+PC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJ3LTMvNSBtZDp3LTMvNCBtbC0zIHB5LTEgZmxleCBmbGV4LWNvbCBqdXN0aWZ5LWJldHdlZW5cIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwic3BhY2UteS0zXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiaC00IGJnLVstLXJ0LWJhc2UtYmFja2dyb3VuZF0gcm91bmRlZCBjb2wtc3Bhbi0yXCI+PC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiaC0yIGJnLVstLXJ0LWJhc2UtYmFja2dyb3VuZF0gcm91bmRlZCBjb2wtc3Bhbi0xXCI+PC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiaC0yIGJnLVstLXJ0LWJhc2UtYmFja2dyb3VuZF0gcm91bmRlZCBjb2wtc3Bhbi0xIHB5LTFcIj48L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImgtMiBiZy1bLS1ydC1iYXNlLWJhY2tncm91bmRdIHJvdW5kZWQgY29sLXNwYW4tMiBweS0xXCI+PC9kaXY+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgfVxuICB9IEBlbHNlIHtcbiAgICA8cm9sYXRlY2gtcmljaC12aWV3IGxpc3Q+XG4gICAgICBAZm9yIChpdGVtIG9mIHByb2R1Y3RzOyB0cmFjayBpdGVtKSB7XG4gICAgICAgIEBkZWZlciB7XG4gICAgICAgICAgPHJvbGF0ZWNoLXJpY2gtaXRlbVxuICAgICAgICAgICAgW3JvdXRlckxpbmtdPVwiWycuLi8uLi8nLCBpdGVtLmlkXVwiXG4gICAgICAgICAgICBbdGh1bWJuYWlsXT1cIml0ZW0ubWVkaWFbMF0udXJsICsgJyF3NDAwJ1wiXG4gICAgICAgICAgICBbdGl0bGVdPVwiaXRlbS5uYW1lXCJcbiAgICAgICAgICAgIFtzdWJ0aXRsZV09XCJpdGVtLmRlc2NyaXB0aW9uXCJcbiAgICAgICAgICAgIFtwcmljZV09XCJpdGVtLnByaWNlIC8gMTAwXCJcbiAgICAgICAgICA+PC9yb2xhdGVjaC1yaWNoLWl0ZW0+XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICA8L3JvbGF0ZWNoLXJpY2gtdmlldz5cbiAgfVxuPC9kaXY+XG4iXX0=