@rolatech/angular-components 17.6.17 → 17.6.19

package/esm2022/lib/storage-bucket-create/storage-bucket-create.component.mjs

@@ -13,10 +13,10 @@ export class StorageBucketCreateComponent {
     ngDoCheck() {
         this.output.emit(this.name());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: StorageBucketCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.0", type: StorageBucketCreateComponent, isStandalone: true, selector: "rolatech-storage-bucket-create", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output" }, ngImport: i0, template: "<div>\n  <mat-form-field>\n    <mat-label>\u540D\u79F0</mat-label>\n    <input matInput placeholder=\"\u8F93\u5165\u540D\u79F0\" [(ngModel)]=\"name\" />\n  </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: StorageBucketCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.1", type: StorageBucketCreateComponent, isStandalone: true, selector: "rolatech-storage-bucket-create", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output" }, ngImport: i0, template: "<div>\n  <mat-form-field>\n    <mat-label>\u540D\u79F0</mat-label>\n    <input matInput placeholder=\"\u8F93\u5165\u540D\u79F0\" [(ngModel)]=\"name\" />\n  </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: StorageBucketCreateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: StorageBucketCreateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-storage-bucket-create', standalone: true, imports: [MatFormFieldModule, MatInputModule, FormsModule], template: "<div>\n  <mat-form-field>\n    <mat-label>\u540D\u79F0</mat-label>\n    <input matInput placeholder=\"\u8F93\u5165\u540D\u79F0\" [(ngModel)]=\"name\" />\n  </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }] });

package/esm2022/lib/storage-file-upload/storage-file-upload.component.mjs

@@ -33,10 +33,10 @@ export class StorageFileUploadComponent {
     removeFile() {
         this.file = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: StorageFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: StorageFileUploadComponent, isStandalone: true, selector: "rolatech-storage-file-upload", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output" }, ngImport: i0, template: "<div>\n  <mat-form-field>\n    <mat-label>\u6807\u9898</mat-label>\n    <input matInput placeholder=\"\u8F93\u5165\u6807\u9898\" [(ngModel)]=\"title\" />\n  </mat-form-field>\n\n  <div class=\"mt-2\">\n    <input #fileInput class=\"hidden\" type=\"file\" (change)=\"selectFiles($event)\" />\n    <button mat-raised-button (click)=\"fileInput.click()\">\u9009\u62E9\u6587\u4EF6</button>\n  </div>\n  @if (file) {\n    <div class=\"p-2 flex justify-between items-center\">\n      <div>{{ file.name }}</div>\n      <button matSuffix mat-icon-button (click)=\"removeFile()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  }\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: StorageFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: StorageFileUploadComponent, isStandalone: true, selector: "rolatech-storage-file-upload", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output" }, ngImport: i0, template: "<div>\n  <mat-form-field>\n    <mat-label>\u6807\u9898</mat-label>\n    <input matInput placeholder=\"\u8F93\u5165\u6807\u9898\" [(ngModel)]=\"title\" />\n  </mat-form-field>\n\n  <div class=\"mt-2\">\n    <input #fileInput class=\"hidden\" type=\"file\" (change)=\"selectFiles($event)\" />\n    <button mat-raised-button (click)=\"fileInput.click()\">\u9009\u62E9\u6587\u4EF6</button>\n  </div>\n  @if (file) {\n    <div class=\"p-2 flex justify-between items-center\">\n      <div>{{ file.name }}</div>\n      <button matSuffix mat-icon-button (click)=\"removeFile()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  }\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: StorageFileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: StorageFileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-storage-file-upload', standalone: true, imports: [MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatIconModule], template: "<div>\n  <mat-form-field>\n    <mat-label>\u6807\u9898</mat-label>\n    <input matInput placeholder=\"\u8F93\u5165\u6807\u9898\" [(ngModel)]=\"title\" />\n  </mat-form-field>\n\n  <div class=\"mt-2\">\n    <input #fileInput class=\"hidden\" type=\"file\" (change)=\"selectFiles($event)\" />\n    <button mat-raised-button (click)=\"fileInput.click()\">\u9009\u62E9\u6587\u4EF6</button>\n  </div>\n  @if (file) {\n    <div class=\"p-2 flex justify-between items-center\">\n      <div>{{ file.name }}</div>\n      <button matSuffix mat-icon-button (click)=\"removeFile()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  }\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }] });

package/esm2022/lib/storage-folder-create/storage-folder-create.component.mjs

@@ -16,10 +16,10 @@ export class StorageFolderCreateComponent {
     ngDoCheck() {
         this.output.emit({ name: this.name(), isPublic: this.isPublic() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: StorageFolderCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.0", type: StorageFolderCreateComponent, isStandalone: true, selector: "rolatech-storage-folder-create", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, isPublic: { classPropertyName: "isPublic", publicName: "isPublic", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output" }, ngImport: i0, template: "<div>\n  <mat-form-field>\n    <mat-label>\u540D\u79F0</mat-label>\n    <input matInput placeholder=\"\u8F93\u5165\u540D\u79F0\" [(ngModel)]=\"name\" />\n  </mat-form-field>\n  <div class=\"flex flex-col\">\n    <mat-checkbox class=\"example-margin\" [(ngModel)]=\"isPublic\">\u516C\u5F00\u8D44\u6E90</mat-checkbox>\n    <span class=\"text-sm text-gray-500 ml-2 mt-1\">\u6587\u4EF6\u5939\u4E3A\u56FE\u7247\u5185\u5BB9\u65F6, \u8BF7\u53D6\u6D88\u52FE\u9009\u6B64\u9879</span>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: StorageFolderCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.1", type: StorageFolderCreateComponent, isStandalone: true, selector: "rolatech-storage-folder-create", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, isPublic: { classPropertyName: "isPublic", publicName: "isPublic", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output" }, ngImport: i0, template: "<div>\n  <mat-form-field>\n    <mat-label>\u540D\u79F0</mat-label>\n    <input matInput placeholder=\"\u8F93\u5165\u540D\u79F0\" [(ngModel)]=\"name\" />\n  </mat-form-field>\n  <div class=\"flex flex-col\">\n    <mat-checkbox class=\"example-margin\" [(ngModel)]=\"isPublic\">\u516C\u5F00\u8D44\u6E90</mat-checkbox>\n    <span class=\"text-sm text-gray-500 ml-2 mt-1\">\u6587\u4EF6\u5939\u4E3A\u56FE\u7247\u5185\u5BB9\u65F6, \u8BF7\u53D6\u6D88\u52FE\u9009\u6B64\u9879</span>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: StorageFolderCreateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: StorageFolderCreateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-storage-folder-create', standalone: true, imports: [MatFormFieldModule, MatInputModule, FormsModule, MatCheckboxModule], template: "<div>\n  <mat-form-field>\n    <mat-label>\u540D\u79F0</mat-label>\n    <input matInput placeholder=\"\u8F93\u5165\u540D\u79F0\" [(ngModel)]=\"name\" />\n  </mat-form-field>\n  <div class=\"flex flex-col\">\n    <mat-checkbox class=\"example-margin\" [(ngModel)]=\"isPublic\">\u516C\u5F00\u8D44\u6E90</mat-checkbox>\n    <span class=\"text-sm text-gray-500 ml-2 mt-1\">\u6587\u4EF6\u5939\u4E3A\u56FE\u7247\u5185\u5BB9\u65F6, \u8BF7\u53D6\u6D88\u52FE\u9009\u6B64\u9879</span>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }] });

package/esm2022/lib/tab/tab.component.mjs

@@ -7,10 +7,10 @@ export class TabComponent {
     hasClass = true;
     label = input.required();
     item = viewChild('content');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.1.0", type: TabComponent, isStandalone: true, selector: "rolatech-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.tab": "this.hasClass" } }, viewQueries: [{ propertyName: "item", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"content\" #content>\n  {{ label() }}\n</div>\n", styles: ["rolatech-tab{display:inline-flex;align-items:center;-ms-flex-pack:center;justify-content:center;flex:1 1 auto;position:relative;padding-left:var(--rt-tab-padding-left, 12px);padding-right:var(--rt-tab-padding-right, 12px);overflow:hidden;cursor:pointer;vertical-align:middle;font-family:Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}rolatech-tab:hover{background-color:var(--rt-tab-hover-background-color, rgb(243, 244, 246))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.1.1", type: TabComponent, isStandalone: true, selector: "rolatech-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.tab": "this.hasClass" } }, viewQueries: [{ propertyName: "item", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"content\" #content>\n  {{ label() }}\n</div>\n", styles: ["rolatech-tab{display:inline-flex;align-items:center;-ms-flex-pack:center;justify-content:center;flex:1 1 auto;position:relative;padding-left:var(--rt-tab-padding-left, 12px);padding-right:var(--rt-tab-padding-right, 12px);overflow:hidden;cursor:pointer;vertical-align:middle;font-family:Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}rolatech-tab:hover{background-color:var(--rt-tab-hover-background-color, rgb(243, 244, 246))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-tab', standalone: true, imports: [CommonModule, RouterLink], encapsulation: ViewEncapsulation.None, template: "<div class=\"content\" #content>\n  {{ label() }}\n</div>\n", styles: ["rolatech-tab{display:inline-flex;align-items:center;-ms-flex-pack:center;justify-content:center;flex:1 1 auto;position:relative;padding-left:var(--rt-tab-padding-left, 12px);padding-right:var(--rt-tab-padding-right, 12px);overflow:hidden;cursor:pointer;vertical-align:middle;font-family:Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}rolatech-tab:hover{background-color:var(--rt-tab-hover-background-color, rgb(243, 244, 246))}\n"] }]
         }], propDecorators: { hasId: [{

package/esm2022/lib/table/table.component.mjs

@@ -11,10 +11,10 @@ export class TableComponent {
     ngOnInit() {
         this.displayedColumns = map(this.dataSource().columns, 'ref');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: TableComponent, isStandalone: true, selector: "rolatech-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource().data\">\n  @for (column of dataSource().columns; track $index) {\n    <ng-container [matColumnDef]=\"column.ref\" sticky>\n      <th mat-header-cell *matHeaderCellDef>{{ column.name }}</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item[column.ref] }}</td>\n    </ng-container>\n  }\n  <!-- <ng-container matColumnDef=\"actions\" stickyEnd>\n    <th mat-header-cell *matHeaderCellDef class=\"actions\">\u8BE6\u60C5</th>\n    <td mat-cell *matCellDef=\"let item\" class=\"actions\">\n      <a [routerLink]=\"['../', item.id]\"> \u8BE6\u60C5 </a>\n    </td>\n  </ng-container> -->\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n</table>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: RouterModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: TableComponent, isStandalone: true, selector: "rolatech-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource().data\">\n  @for (column of dataSource().columns; track $index) {\n    <ng-container [matColumnDef]=\"column.ref\" sticky>\n      <th mat-header-cell *matHeaderCellDef>{{ column.name }}</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item[column.ref] }}</td>\n    </ng-container>\n  }\n  <!-- <ng-container matColumnDef=\"actions\" stickyEnd>\n    <th mat-header-cell *matHeaderCellDef class=\"actions\">\u8BE6\u60C5</th>\n    <td mat-cell *matCellDef=\"let item\" class=\"actions\">\n      <a [routerLink]=\"['../', item.id]\"> \u8BE6\u60C5 </a>\n    </td>\n  </ng-container> -->\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n</table>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: RouterModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-table', standalone: true, imports: [CommonModule, MatTableModule, RouterModule], template: "<table mat-table [dataSource]=\"dataSource().data\">\n  @for (column of dataSource().columns; track $index) {\n    <ng-container [matColumnDef]=\"column.ref\" sticky>\n      <th mat-header-cell *matHeaderCellDef>{{ column.name }}</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item[column.ref] }}</td>\n    </ng-container>\n  }\n  <!-- <ng-container matColumnDef=\"actions\" stickyEnd>\n    <th mat-header-cell *matHeaderCellDef class=\"actions\">\u8BE6\u60C5</th>\n    <td mat-cell *matCellDef=\"let item\" class=\"actions\">\n      <a [routerLink]=\"['../', item.id]\"> \u8BE6\u60C5 </a>\n    </td>\n  </ng-container> -->\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n</table>\n" }]
         }] });

package/esm2022/lib/tabs/tabs.component.mjs

@@ -51,10 +51,10 @@ export class TabsComponent {
         }
         return offset;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: TabsComponent, isStandalone: true, selector: "rolatech-tabs", inputs: { select: { classPropertyName: "select", publicName: "select", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "selectChange" }, host: { attributes: { "ngSkipHydration": "" }, classAttribute: "rolatech-tabs" }, queries: [{ propertyName: "tabs", predicate: TabComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "selectionBar", first: true, predicate: ["selectionBar"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n  <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n    <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n    @for (tab of tabs(); track $index) {\n      <ng-content></ng-content>\n    }\n  </div>\n</div>\n<!-- <rolatech-icon-button>chevron_right</rolatech-icon-button> -->\n", styles: ["rolatech-tabs{display:flex;flex-direction:row;align-items:center;font-weight:500;height:44px;padding-left:var(--rt-tabs-padding-left, 0px);padding-right:var(--rt-tabs-padding-right, 0px)}.selection-bar{position:absolute;height:0;bottom:0;left:0;right:0;border-bottom:2px solid var(--rt-tabs-selection-bar-color, rgb(234, 88, 12));transform:scale(0);transform-origin:left center;transition:transform;z-index:100}rolatech-tab[style-target=host]{color:var(--rt-tab-color, rgb(234, 88, 12))}.selection-bar[transition-target=selection-bar-transition]{transition:width .15s cubic-bezier(.4,0,1,1),left .15s cubic-bezier(.4,0,1,1)}.selection-bar[style-target=selection-bar]{border-width:0;background-color:var(--rt-tab-color, rgb(234, 88, 12));border-radius:3px 3px 0 0;height:3px;margin-left:12px;right:auto;transform:none}#tabsContainer{position:relative}#tabsContent>:not(#selectionBar){height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: TabsComponent, isStandalone: true, selector: "rolatech-tabs", inputs: { select: { classPropertyName: "select", publicName: "select", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "selectChange" }, host: { attributes: { "ngSkipHydration": "" }, classAttribute: "rolatech-tabs" }, queries: [{ propertyName: "tabs", predicate: TabComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "selectionBar", first: true, predicate: ["selectionBar"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n  <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n    <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n    @for (tab of tabs(); track $index) {\n      <ng-content></ng-content>\n    }\n  </div>\n</div>\n<!-- <rolatech-icon-button>chevron_right</rolatech-icon-button> -->\n", styles: ["rolatech-tabs{display:flex;flex-direction:row;align-items:center;font-weight:500;height:44px;padding-left:var(--rt-tabs-padding-left, 0px);padding-right:var(--rt-tabs-padding-right, 0px)}.selection-bar{position:absolute;height:0;bottom:0;left:0;right:0;border-bottom:2px solid var(--rt-tabs-selection-bar-color, rgb(234, 88, 12));transform:scale(0);transform-origin:left center;transition:transform;z-index:100}rolatech-tab[style-target=host]{color:var(--rt-tab-color, rgb(234, 88, 12))}.selection-bar[transition-target=selection-bar-transition]{transition:width .15s cubic-bezier(.4,0,1,1),left .15s cubic-bezier(.4,0,1,1)}.selection-bar[style-target=selection-bar]{border-width:0;background-color:var(--rt-tab-color, rgb(234, 88, 12));border-radius:3px 3px 0 0;height:3px;margin-left:12px;right:auto;transform:none}#tabsContainer{position:relative}#tabsContent>:not(#selectionBar){height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-tabs', standalone: true, imports: [CommonModule, IconButtonComponent], encapsulation: ViewEncapsulation.None, host: {
                         ngSkipHydration: '',

package/esm2022/lib/thumbnail/thumbnail.component.mjs

@@ -1,23 +1,42 @@
-import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Renderer2, ViewEncapsulation, effect, inject, input, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Renderer2, ViewEncapsulation, effect, inject, input, viewChild, } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import * as i0 from "@angular/core";
 export class ThumbnailComponent {
     hasClass = true;
+    myColor = '56.25%';
+    el = inject((ElementRef));
     src = input();
     size = input.required();
-    el = inject(ElementRef);
+    mode = input('clip'); // full, clip
+    img = viewChild.required('img');
+    width = input();
+    height = input();
+    ratio = effect(() => {
+        if (this.width() && this.height()) {
+            this.renderer.setStyle(this.el.nativeElement, 'aspect-ratio', this.width() / this.height());
+        }
+        else {
+            this.renderer.setStyle(this.el.nativeElement, 'aspect-ratio', 16 / 9);
+        }
+    });
     renderer = inject(Renderer2);
     sizea = effect(() => {
         this.renderer.setAttribute(this.el.nativeElement, 'size', this.size());
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ThumbnailComponent, isStandalone: true, selector: "rolatech-thumbnail", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.rt-rich-grid-media": "this.hasClass" } }, ngImport: i0, template: "@defer (on viewport) {\n  <a id=\"thumbnail\" class=\"rt-thumbnail\">\n    <rolatech-image [src]=\"src()\"> </rolatech-image>\n  </a>\n} @placeholder {\n  <div class=\"bg-[--rt-raised-background] w-full h-full rounded-lg\"></div>\n}\n", styles: ["rolatech-thumbnail{display:block;width:100%;position:relative}rolatech-thumbnail:before{display:block;content:\"\";width:100%;padding-top:56.25%;background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .1))}rolatech-thumbnail #thumbnail.rt-thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block}rolatech-thumbnail #thumbnail.rt-thumbnail{position:absolute;inset:0}rolatech-thumbnail a.rt-thumbnail,rolatech-thumbnail:before{border-radius:0}rolatech-thumbnail[size][circular] a.rt-thumbnail,rolatech-thumbnail[size][circular]:before{border-radius:50%}rolatech-thumbnail[size=small] a.rt-thumbnail,rolatech-thumbnail[size=small]:before{border-radius:4px}rolatech-thumbnail[size=medium] a.rt-thumbnail,rolatech-thumbnail[size=medium]:before{border-radius:8px}rolatech-thumbnail[size=large] a.rt-thumbnail,rolatech-thumbnail[size=large]:before{border-radius:12px}rolatech-thumbnail[size][has-clip] a.rt-thumbnail,rolatech-thumbnail[size][has-clip]:before{border-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [import("../image/image.component").then(m => m.ImageComponent)]] });
+    full = effect(() => {
+        this.renderer.setAttribute(this.el.nativeElement, 'mode', this.mode());
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: ThumbnailComponent, isStandalone: true, selector: "rolatech-thumbnail", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rt-rich-grid-media": "this.hasClass", "style.--rt-thumbnail-padding-top": "this.myColor" } }, viewQueries: [{ propertyName: "img", first: true, predicate: ["img"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #edge class=\"absolute top-0 left-0\"></div>\n@defer (on viewport(edge)) {\n  <a id=\"thumbnail\" class=\"rt-thumbnail\">\n    <rolatech-image [src]=\"src()\"> </rolatech-image>\n  </a>\n} @placeholder {\n  <div class=\"bg-[--rt-raised-background] w-full h-full rounded-lg\"></div>\n}\n", styles: ["rolatech-thumbnail{display:block;width:100%;position:relative;--rt-thumbnail-padding-top: 56.25%}rolatech-thumbnail:before{display:block;content:\"\";width:100%;height:100%;background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .1))}rolatech-thumbnail[mode=full]:before{padding-top:0}rolatech-thumbnail[mode=clip]:before{padding-top:56.25%}rolatech-thumbnail #thumbnail.rt-thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block}rolatech-thumbnail #thumbnail.rt-thumbnail{position:absolute;inset:0}rolatech-thumbnail[mode=clip] #thumbnail.rt-thumbnail{position:absolute;inset:0}rolatech-thumbnail a.rt-thumbnail,rolatech-thumbnail:before{border-radius:0}rolatech-thumbnail[size][circular] a.rt-thumbnail,rolatech-thumbnail[size][circular]:before{border-radius:50%}rolatech-thumbnail[size=small] a.rt-thumbnail,rolatech-thumbnail[size=small]:before{border-radius:4px}rolatech-thumbnail[size=medium] a.rt-thumbnail,rolatech-thumbnail[size=medium]:before{border-radius:8px}rolatech-thumbnail[size=large] a.rt-thumbnail,rolatech-thumbnail[size=large]:before{border-radius:12px}rolatech-thumbnail[size][has-clip] a.rt-thumbnail,rolatech-thumbnail[size][has-clip]:before{border-radius:0}.rolatech-image{display:inline-block;min-height:1px;min-width:1px;width:100%;height:100%;object-fit:cover;background-color:red}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [import("../image/image.component").then(m => m.ImageComponent)]] });
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.0", ngImport: i0, type: ThumbnailComponent, resolveDeferredDeps: () => [import("../image/image.component").then(m => m.ImageComponent)], resolveMetadata: ImageComponent => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.1", ngImport: i0, type: ThumbnailComponent, resolveDeferredDeps: () => [import("../image/image.component").then(m => m.ImageComponent)], resolveMetadata: ImageComponent => ({ decorators: [{
                 type: Component,
-                args: [{ selector: 'rolatech-thumbnail', standalone: true, imports: [CommonModule, ImageComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@defer (on viewport) {\n  <a id=\"thumbnail\" class=\"rt-thumbnail\">\n    <rolatech-image [src]=\"src()\"> </rolatech-image>\n  </a>\n} @placeholder {\n  <div class=\"bg-[--rt-raised-background] w-full h-full rounded-lg\"></div>\n}\n", styles: ["rolatech-thumbnail{display:block;width:100%;position:relative}rolatech-thumbnail:before{display:block;content:\"\";width:100%;padding-top:56.25%;background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .1))}rolatech-thumbnail #thumbnail.rt-thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block}rolatech-thumbnail #thumbnail.rt-thumbnail{position:absolute;inset:0}rolatech-thumbnail a.rt-thumbnail,rolatech-thumbnail:before{border-radius:0}rolatech-thumbnail[size][circular] a.rt-thumbnail,rolatech-thumbnail[size][circular]:before{border-radius:50%}rolatech-thumbnail[size=small] a.rt-thumbnail,rolatech-thumbnail[size=small]:before{border-radius:4px}rolatech-thumbnail[size=medium] a.rt-thumbnail,rolatech-thumbnail[size=medium]:before{border-radius:8px}rolatech-thumbnail[size=large] a.rt-thumbnail,rolatech-thumbnail[size=large]:before{border-radius:12px}rolatech-thumbnail[size][has-clip] a.rt-thumbnail,rolatech-thumbnail[size][has-clip]:before{border-radius:0}\n"] }]
+                args: [{ selector: 'rolatech-thumbnail', standalone: true, imports: [CommonModule, ImageComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #edge class=\"absolute top-0 left-0\"></div>\n@defer (on viewport(edge)) {\n  <a id=\"thumbnail\" class=\"rt-thumbnail\">\n    <rolatech-image [src]=\"src()\"> </rolatech-image>\n  </a>\n} @placeholder {\n  <div class=\"bg-[--rt-raised-background] w-full h-full rounded-lg\"></div>\n}\n", styles: ["rolatech-thumbnail{display:block;width:100%;position:relative;--rt-thumbnail-padding-top: 56.25%}rolatech-thumbnail:before{display:block;content:\"\";width:100%;height:100%;background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .1))}rolatech-thumbnail[mode=full]:before{padding-top:0}rolatech-thumbnail[mode=clip]:before{padding-top:56.25%}rolatech-thumbnail #thumbnail.rt-thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block}rolatech-thumbnail #thumbnail.rt-thumbnail{position:absolute;inset:0}rolatech-thumbnail[mode=clip] #thumbnail.rt-thumbnail{position:absolute;inset:0}rolatech-thumbnail a.rt-thumbnail,rolatech-thumbnail:before{border-radius:0}rolatech-thumbnail[size][circular] a.rt-thumbnail,rolatech-thumbnail[size][circular]:before{border-radius:50%}rolatech-thumbnail[size=small] a.rt-thumbnail,rolatech-thumbnail[size=small]:before{border-radius:4px}rolatech-thumbnail[size=medium] a.rt-thumbnail,rolatech-thumbnail[size=medium]:before{border-radius:8px}rolatech-thumbnail[size=large] a.rt-thumbnail,rolatech-thumbnail[size=large]:before{border-radius:12px}rolatech-thumbnail[size][has-clip] a.rt-thumbnail,rolatech-thumbnail[size][has-clip]:before{border-radius:0}.rolatech-image{display:inline-block;min-height:1px;min-width:1px;width:100%;height:100%;object-fit:cover;background-color:red}\n"] }]
             }], ctorParameters: null, propDecorators: { hasClass: [{
                     type: HostBinding,
                     args: ['class.rt-rich-grid-media']
+                }], myColor: [{
+                    type: HostBinding,
+                    args: ['style.--rt-thumbnail-padding-top']
                 }] } }) });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGh1bWJuYWlsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1jb21wb25lbnRzL3NyYy9saWIvdGh1bWJuYWlsL3RodW1ibmFpbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL3RodW1ibmFpbC90aHVtYm5haWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsVUFBVSxFQUNWLFdBQVcsRUFDWCxTQUFTLEVBQ1QsaUJBQWlCLEVBQ2pCLE1BQU0sRUFDTixNQUFNLEVBQ04sS0FBSyxHQUNOLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFZL0MsTUFBTSxPQUFPLGtCQUFrQjtJQUNZLFFBQVEsR0FBRyxJQUFJLENBQUM7SUFDekQsR0FBRyxHQUFHLEtBQUssRUFBVSxDQUFDO0lBQ3RCLElBQUksR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFVLENBQUM7SUFDaEMsRUFBRSxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUN4QixRQUFRLEdBQUcsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzdCLEtBQUssR0FBRyxNQUFNLENBQUMsR0FBRyxFQUFFO1FBQ2xCLElBQUksQ0FBQyxRQUFRLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLE1BQU0sRUFBRSxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQztJQUN6RSxDQUFDLENBQUMsQ0FBQzt1R0FSUSxrQkFBa0I7MkZBQWxCLGtCQUFrQix1WUN2Qi9CLDRPQU9BLHFqQ0RVWSxZQUFZOztnR0FNWCxrQkFBa0I7c0JBVDlCLFNBQVM7bUNBQ0Usb0JBQW9CLGNBQ2xCLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxjQUFjLENBQUMsaUJBR3hCLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU07d0RBR04sUUFBUTswQkFBaEQsV0FBVzsyQkFBQywwQkFBMEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBIb3N0QmluZGluZyxcbiAgUmVuZGVyZXIyLFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbiAgZWZmZWN0LFxuICBpbmplY3QsXG4gIGlucHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBJbWFnZUNvbXBvbmVudCB9IGZyb20gJy4uL2ltYWdlL2ltYWdlLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3JvbGF0ZWNoLXRodW1ibmFpbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEltYWdlQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL3RodW1ibmFpbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi90aHVtYm5haWwuY29tcG9uZW50LnNjc3MnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgVGh1bWJuYWlsQ29tcG9uZW50IHtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5ydC1yaWNoLWdyaWQtbWVkaWEnKSBoYXNDbGFzcyA9IHRydWU7XG4gIHNyYyA9IGlucHV0PHN0cmluZz4oKTtcbiAgc2l6ZSA9IGlucHV0LnJlcXVpcmVkPHN0cmluZz4oKTtcbiAgZWwgPSBpbmplY3QoRWxlbWVudFJlZik7XG4gIHJlbmRlcmVyID0gaW5qZWN0KFJlbmRlcmVyMik7XG4gIHNpemVhID0gZWZmZWN0KCgpID0+IHtcbiAgICB0aGlzLnJlbmRlcmVyLnNldEF0dHJpYnV0ZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsICdzaXplJywgdGhpcy5zaXplKCkpO1xuICB9KTtcbn1cbiIsIkBkZWZlciAob24gdmlld3BvcnQpIHtcbiAgPGEgaWQ9XCJ0aHVtYm5haWxcIiBjbGFzcz1cInJ0LXRodW1ibmFpbFwiPlxuICAgIDxyb2xhdGVjaC1pbWFnZSBbc3JjXT1cInNyYygpXCI+IDwvcm9sYXRlY2gtaW1hZ2U+XG4gIDwvYT5cbn0gQHBsYWNlaG9sZGVyIHtcbiAgPGRpdiBjbGFzcz1cImJnLVstLXJ0LXJhaXNlZC1iYWNrZ3JvdW5kXSB3LWZ1bGwgaC1mdWxsIHJvdW5kZWQtbGdcIj48L2Rpdj5cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGh1bWJuYWlsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1jb21wb25lbnRzL3NyYy9saWIvdGh1bWJuYWlsL3RodW1ibmFpbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL3RodW1ibmFpbC90aHVtYm5haWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsVUFBVSxFQUNWLFdBQVcsRUFDWCxTQUFTLEVBQ1QsaUJBQWlCLEVBQ2pCLE1BQU0sRUFDTixNQUFNLEVBQ04sS0FBSyxFQUNMLFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBWS9DLE1BQU0sT0FBTyxrQkFBa0I7SUFDWSxRQUFRLEdBQUcsSUFBSSxDQUFDO0lBQ1IsT0FBTyxHQUFHLFFBQVEsQ0FBQztJQUNwRSxFQUFFLEdBQUcsTUFBTSxDQUFDLENBQUEsVUFBdUIsQ0FBQSxDQUFDLENBQUM7SUFDckMsR0FBRyxHQUFHLEtBQUssRUFBVSxDQUFDO0lBQ3RCLElBQUksR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFVLENBQUM7SUFDaEMsSUFBSSxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLGFBQWE7SUFDbkMsR0FBRyxHQUFHLFNBQVMsQ0FBQyxRQUFRLENBQWEsS0FBSyxDQUFDLENBQUM7SUFDNUMsS0FBSyxHQUFHLEtBQUssRUFBc0IsQ0FBQztJQUNwQyxNQUFNLEdBQUcsS0FBSyxFQUFzQixDQUFDO0lBQ3JDLEtBQUssR0FBRyxNQUFNLENBQUMsR0FBRyxFQUFFO1FBQ2xCLElBQUksSUFBSSxDQUFDLEtBQUssRUFBRSxJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUUsRUFBRSxDQUFDO1lBQ2xDLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLGNBQWMsRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFHLEdBQUcsSUFBSSxDQUFDLE1BQU0sRUFBRyxDQUFDLENBQUM7UUFDaEcsQ0FBQzthQUFNLENBQUM7WUFDTixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxjQUFjLEVBQUUsRUFBRSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQ3hFLENBQUM7SUFDSCxDQUFDLENBQUMsQ0FBQztJQUNILFFBQVEsR0FBRyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDN0IsS0FBSyxHQUFHLE1BQU0sQ0FBQyxHQUFHLEVBQUU7UUFDbEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsTUFBTSxFQUFFLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDO0lBQ3pFLENBQUMsQ0FBQyxDQUFDO0lBQ0gsSUFBSSxHQUFHLE1BQU0sQ0FBQyxHQUFHLEVBQUU7UUFDakIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsTUFBTSxFQUFFLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDO0lBQ3pFLENBQUMsQ0FBQyxDQUFDO3VHQXZCUSxrQkFBa0I7MkZBQWxCLGtCQUFrQiwrNEJDeEIvQixxU0FRQSwyNENEVVksWUFBWTs7Z0dBTVgsa0JBQWtCO3NCQVQ5QixTQUFTO21DQUNFLG9CQUFvQixjQUNsQixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsY0FBYyxDQUFDLGlCQUd4QixpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNO3dEQUdOLFFBQVE7MEJBQWhELFdBQVc7MkJBQUMsMEJBQTBCO29CQUNVLE9BQU87MEJBQXZELFdBQVc7MkJBQUMsa0NBQWtDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIFJlbmRlcmVyMixcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG4gIGVmZmVjdCxcbiAgaW5qZWN0LFxuICBpbnB1dCxcbiAgdmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBJbWFnZUNvbXBvbmVudCB9IGZyb20gJy4uL2ltYWdlL2ltYWdlLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3JvbGF0ZWNoLXRodW1ibmFpbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEltYWdlQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL3RodW1ibmFpbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi90aHVtYm5haWwuY29tcG9uZW50LnNjc3MnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgVGh1bWJuYWlsQ29tcG9uZW50IHtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5ydC1yaWNoLWdyaWQtbWVkaWEnKSBoYXNDbGFzcyA9IHRydWU7XG4gIEBIb3N0QmluZGluZygnc3R5bGUuLS1ydC10aHVtYm5haWwtcGFkZGluZy10b3AnKSBteUNvbG9yID0gJzU2LjI1JSc7XG4gIGVsID0gaW5qZWN0KEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+KTtcbiAgc3JjID0gaW5wdXQ8c3RyaW5nPigpO1xuICBzaXplID0gaW5wdXQucmVxdWlyZWQ8c3RyaW5nPigpO1xuICBtb2RlID0gaW5wdXQoJ2NsaXAnKTsgLy8gZnVsbCwgY2xpcFxuICBpbWcgPSB2aWV3Q2hpbGQucmVxdWlyZWQ8RWxlbWVudFJlZj4oJ2ltZycpO1xuICB3aWR0aCA9IGlucHV0PG51bWJlciB8IHVuZGVmaW5lZD4oKTtcbiAgaGVpZ2h0ID0gaW5wdXQ8bnVtYmVyIHwgdW5kZWZpbmVkPigpO1xuICByYXRpbyA9IGVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKHRoaXMud2lkdGgoKSAmJiB0aGlzLmhlaWdodCgpKSB7XG4gICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ2FzcGVjdC1yYXRpbycsIHRoaXMud2lkdGgoKSEgLyB0aGlzLmhlaWdodCgpISk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAnYXNwZWN0LXJhdGlvJywgMTYgLyA5KTtcbiAgICB9XG4gIH0pO1xuICByZW5kZXJlciA9IGluamVjdChSZW5kZXJlcjIpO1xuICBzaXplYSA9IGVmZmVjdCgoKSA9PiB7XG4gICAgdGhpcy5yZW5kZXJlci5zZXRBdHRyaWJ1dGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAnc2l6ZScsIHRoaXMuc2l6ZSgpKTtcbiAgfSk7XG4gIGZ1bGwgPSBlZmZlY3QoKCkgPT4ge1xuICAgIHRoaXMucmVuZGVyZXIuc2V0QXR0cmlidXRlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ21vZGUnLCB0aGlzLm1vZGUoKSk7XG4gIH0pO1xufVxuIiwiPGRpdiAjZWRnZSBjbGFzcz1cImFic29sdXRlIHRvcC0wIGxlZnQtMFwiPjwvZGl2PlxuQGRlZmVyIChvbiB2aWV3cG9ydChlZGdlKSkge1xuICA8YSBpZD1cInRodW1ibmFpbFwiIGNsYXNzPVwicnQtdGh1bWJuYWlsXCI+XG4gICAgPHJvbGF0ZWNoLWltYWdlIFtzcmNdPVwic3JjKClcIj4gPC9yb2xhdGVjaC1pbWFnZT5cbiAgPC9hPlxufSBAcGxhY2Vob2xkZXIge1xuICA8ZGl2IGNsYXNzPVwiYmctWy0tcnQtcmFpc2VkLWJhY2tncm91bmRdIHctZnVsbCBoLWZ1bGwgcm91bmRlZC1sZ1wiPjwvZGl2PlxufVxuIl19

package/esm2022/lib/title/title.component.mjs

@@ -6,10 +6,10 @@ export class TitleComponent {
     title = input();
     subtitle = input();
     large = input(false, { transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: TitleComponent, isStandalone: true, selector: "rolatech-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, large: { classPropertyName: "large", publicName: "large", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-title": "this.hasClass" } }, ngImport: i0, template: "<div class=\"flex flex-row items-center\">\n  @if (large()) {\n    <a class=\"block text-3xl font-bold py-3\"\n      ><span>{{ title() }}</span></a\n    >\n  } @else {\n    <a class=\"block text-xl font-bold py-3\"\n      ><span>{{ title() }}</span></a\n    >\n  }\n\n  <a class=\"text-sm leading-3 text-gray-500\"\n    ><span>{{ subtitle() }}</span></a\n  >\n</div>\n", styles: ["rolatech-title{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: TitleComponent, isStandalone: true, selector: "rolatech-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, large: { classPropertyName: "large", publicName: "large", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-title": "this.hasClass" } }, ngImport: i0, template: "<div class=\"flex flex-row items-center\">\n  @if (large()) {\n    <a class=\"block text-3xl font-bold py-3\"\n      ><span>{{ title() }}</span></a\n    >\n  } @else {\n    <a class=\"block text-xl font-bold py-3\"\n      ><span>{{ title() }}</span></a\n    >\n  }\n\n  <a class=\"text-sm leading-3 text-gray-500\"\n    ><span>{{ subtitle() }}</span></a\n  >\n</div>\n", styles: ["rolatech-title{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-title', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-row items-center\">\n  @if (large()) {\n    <a class=\"block text-3xl font-bold py-3\"\n      ><span>{{ title() }}</span></a\n    >\n  } @else {\n    <a class=\"block text-xl font-bold py-3\"\n      ><span>{{ title() }}</span></a\n    >\n  }\n\n  <a class=\"text-sm leading-3 text-gray-500\"\n    ><span>{{ subtitle() }}</span></a\n  >\n</div>\n", styles: ["rolatech-title{display:block}\n"] }]
         }], propDecorators: { hasClass: [{

package/esm2022/lib/toolbar/toolbar.component.mjs

@@ -15,10 +15,10 @@ export class ToolbarComponent {
     link = input('');
     large = input(false, { transform: booleanAttribute });
     divider = input(false, { transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ToolbarComponent, isStandalone: true, selector: "rolatech-toolbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, large: { classPropertyName: "large", publicName: "large", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.rolatech-toolbar": "this.hasClass" } }, ngImport: i0, template: "<div class=\"flex justify-between items-center\" [ngClass]=\"subtitle() ? 'h-16' : 'h-14'\">\n  <ng-container>\n    @if (back()) {\n      <rolatech-icon-button rolatechBackButton class=\"left-button\">arrow_back</rolatech-icon-button>\n    }\n    @if (link()) {\n      <rolatech-icon-button [routerLink]=\"link()\" class=\"left-button\">arrow_back</rolatech-icon-button>\n    }\n  </ng-container>\n  @if (title()) {\n    @if (large()) {\n      <span class=\"text-2xl font-medium\">{{ title() }}</span>\n    } @else {\n      <span class=\"text-xl font-medium\">{{ title() }}</span>\n    }\n  }\n  <div class=\"flex-1\"></div>\n  <div class=\"flex justify-center items-center\">\n    <ng-content></ng-content>\n  </div>\n</div>\n@if (subtitle()) {\n  <div class=\"-mt-4 mb-2 leading-none\" [ngClass]=\"back() || link() ? 'ml-[40px]' : ''\">\n    <span class=\"text-sm text-gray-500\">{{ subtitle() }}</span>\n  </div>\n}\n@if (divider()) {\n  <mat-divider></mat-divider>\n}\n", styles: ["rolatech-toolbar{display:block;padding-left:var(--rt-toolbar-padding-left, 16px);padding-right:var(--rt-toolbar-padding-right, 16px);background-color:var(--rt-base-background, #fff);border-radius:var(--rt-toolbar-border-radius, 0px);color:var(--rt-text-primary, #000)}rolatech-toolbar:has(.left-button){--rt-toolbar-padding-left: 8px;--rt-toolbar-padding-right: 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconButtonComponent, selector: "rolatech-icon-button" }, { kind: "directive", type: BackButtonDirective, selector: "[rolatechBackButton]" }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: ToolbarComponent, isStandalone: true, selector: "rolatech-toolbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, large: { classPropertyName: "large", publicName: "large", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.rolatech-toolbar": "this.hasClass" } }, ngImport: i0, template: "<div class=\"flex justify-between items-center\" [ngClass]=\"subtitle() ? 'h-16' : 'h-14'\">\n  <ng-container>\n    @if (back()) {\n      <rolatech-icon-button rolatechBackButton class=\"left-button\">arrow_back</rolatech-icon-button>\n    }\n    @if (link()) {\n      <rolatech-icon-button [routerLink]=\"link()\" class=\"left-button\">arrow_back</rolatech-icon-button>\n    }\n  </ng-container>\n  @if (title()) {\n    @if (large()) {\n      <span class=\"text-2xl font-medium\">{{ title() }}</span>\n    } @else {\n      <span class=\"text-xl font-medium\">{{ title() }}</span>\n    }\n  }\n  <div class=\"flex-1\"></div>\n  <div class=\"flex justify-center items-center\">\n    <ng-content></ng-content>\n  </div>\n</div>\n@if (subtitle()) {\n  <div class=\"-mt-4 mb-2 leading-none\" [ngClass]=\"back() || link() ? 'ml-[40px]' : ''\">\n    <span class=\"text-sm text-gray-500\">{{ subtitle() }}</span>\n  </div>\n}\n@if (divider()) {\n  <mat-divider></mat-divider>\n}\n", styles: ["rolatech-toolbar{display:block;padding-left:var(--rt-toolbar-padding-left, 16px);padding-right:var(--rt-toolbar-padding-right, 16px);background-color:var(--rt-base-background, #fff);border-radius:var(--rt-toolbar-border-radius, 0px);color:var(--rt-text-primary, #000)}rolatech-toolbar:has(.left-button){--rt-toolbar-padding-left: 8px;--rt-toolbar-padding-right: 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconButtonComponent, selector: "rolatech-icon-button" }, { kind: "directive", type: BackButtonDirective, selector: "[rolatechBackButton]" }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-toolbar', standalone: true, imports: [CommonModule, RouterLink, IconButtonComponent, BackButtonDirective, MatDivider], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex justify-between items-center\" [ngClass]=\"subtitle() ? 'h-16' : 'h-14'\">\n  <ng-container>\n    @if (back()) {\n      <rolatech-icon-button rolatechBackButton class=\"left-button\">arrow_back</rolatech-icon-button>\n    }\n    @if (link()) {\n      <rolatech-icon-button [routerLink]=\"link()\" class=\"left-button\">arrow_back</rolatech-icon-button>\n    }\n  </ng-container>\n  @if (title()) {\n    @if (large()) {\n      <span class=\"text-2xl font-medium\">{{ title() }}</span>\n    } @else {\n      <span class=\"text-xl font-medium\">{{ title() }}</span>\n    }\n  }\n  <div class=\"flex-1\"></div>\n  <div class=\"flex justify-center items-center\">\n    <ng-content></ng-content>\n  </div>\n</div>\n@if (subtitle()) {\n  <div class=\"-mt-4 mb-2 leading-none\" [ngClass]=\"back() || link() ? 'ml-[40px]' : ''\">\n    <span class=\"text-sm text-gray-500\">{{ subtitle() }}</span>\n  </div>\n}\n@if (divider()) {\n  <mat-divider></mat-divider>\n}\n", styles: ["rolatech-toolbar{display:block;padding-left:var(--rt-toolbar-padding-left, 16px);padding-right:var(--rt-toolbar-padding-right, 16px);background-color:var(--rt-base-background, #fff);border-radius:var(--rt-toolbar-border-radius, 0px);color:var(--rt-text-primary, #000)}rolatech-toolbar:has(.left-button){--rt-toolbar-padding-left: 8px;--rt-toolbar-padding-right: 8px}\n"] }]
         }], propDecorators: { hasId: [{

package/esm2022/lib/topbar/topbar.component.mjs

@@ -34,10 +34,10 @@ export class TopbarComponent {
         }
         this.appDrawer.toggle();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.0", type: TopbarComponent, isStandalone: true, selector: "rolatech-topbar", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-topbar": "this.hasClass" } }, ngImport: i0, template: "<div class=\"h-14 flex items-center\">\n  <rolatech-menu-icon id=\"topbar-menu-button\" (click)=\"onToggle()\"></rolatech-menu-icon>\n  <div class=\"cursor-pointer ml-1\" [routerLink]=\"link()\">\n    <div class=\"text-[--rt-text-primary] text-lg md:text-xl font-bold\">\n      <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n      <span>{{ appLayout.subtitle }}</span>\n    </div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <ng-content></ng-content>\n</div>\n", styles: ["rolatech-topbar{position:fixed;top:0;width:100%;z-index:900;transform:translateY(0);transition:transform .3s ease;background:var(--rt-base-background, #fff);color:var(--rt-text-primary, #030303);padding-left:var(--rt-topbar-padding-left, 16px);padding-right:var(--rt-topbar-padding-right, 16px)}rolatech-topbar:not([persistent]) #topbar-menu-button{display:none}rolatech-topbar:not(:has(#topbar-menu-button)){--rt-topbar-padding-left: 16px}rolatech-layout rolatech-drawer[persistent][opened]~rolatech-topbar{margin-left:256px}@media (max-width: 768px){:root{--rt-topbar-padding-left: 8px}rolatech-topbar #topbar-menu-button{display:block!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: MenuIconComponent, selector: "rolatech-menu-icon" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.1", type: TopbarComponent, isStandalone: true, selector: "rolatech-topbar", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-topbar": "this.hasClass" } }, ngImport: i0, template: "<div class=\"h-14 flex items-center\">\n  <rolatech-menu-icon id=\"topbar-menu-button\" (click)=\"onToggle()\"></rolatech-menu-icon>\n  <div class=\"cursor-pointer ml-1\" [routerLink]=\"link()\">\n    <div class=\"text-[--rt-text-primary] text-lg md:text-xl font-bold\">\n      <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n      <span>{{ appLayout.subtitle }}</span>\n    </div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <ng-content></ng-content>\n</div>\n", styles: ["rolatech-topbar{position:fixed;top:0;width:100%;z-index:900;transform:translateY(0);transition:transform .3s ease;background:var(--rt-base-background, #fff);color:var(--rt-text-primary, #030303);padding-left:var(--rt-topbar-padding-left, 16px);padding-right:var(--rt-topbar-padding-right, 16px)}rolatech-topbar:not([persistent]) #topbar-menu-button{display:none}rolatech-topbar:not(:has(#topbar-menu-button)){--rt-topbar-padding-left: 16px}rolatech-layout rolatech-drawer[persistent][opened]~rolatech-topbar{margin-left:256px}@media (max-width: 768px){:root{--rt-topbar-padding-left: 8px}rolatech-topbar #topbar-menu-button{display:block!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: MenuIconComponent, selector: "rolatech-menu-icon" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TopbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TopbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-topbar', standalone: true, imports: [CommonModule, RouterLink, IconButtonComponent, MatButtonModule, MatIcon, MenuIconComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"h-14 flex items-center\">\n  <rolatech-menu-icon id=\"topbar-menu-button\" (click)=\"onToggle()\"></rolatech-menu-icon>\n  <div class=\"cursor-pointer ml-1\" [routerLink]=\"link()\">\n    <div class=\"text-[--rt-text-primary] text-lg md:text-xl font-bold\">\n      <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n      <span>{{ appLayout.subtitle }}</span>\n    </div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <ng-content></ng-content>\n</div>\n", styles: ["rolatech-topbar{position:fixed;top:0;width:100%;z-index:900;transform:translateY(0);transition:transform .3s ease;background:var(--rt-base-background, #fff);color:var(--rt-text-primary, #030303);padding-left:var(--rt-topbar-padding-left, 16px);padding-right:var(--rt-topbar-padding-right, 16px)}rolatech-topbar:not([persistent]) #topbar-menu-button{display:none}rolatech-topbar:not(:has(#topbar-menu-button)){--rt-topbar-padding-left: 16px}rolatech-layout rolatech-drawer[persistent][opened]~rolatech-topbar{margin-left:256px}@media (max-width: 768px){:root{--rt-topbar-padding-left: 8px}rolatech-topbar #topbar-menu-button{display:block!important}}\n"] }]
         }], propDecorators: { hostId: [{

package/esm2022/lib/topbar-avatar-menu/topbar-avatar-menu.component.mjs

@@ -14,10 +14,10 @@ export class TopbarAvatarMenuComponent {
     platformId = inject(PLATFORM_ID);
     menu = input.required();
     avatar = input();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TopbarAvatarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: TopbarAvatarMenuComponent, isStandalone: true, selector: "rolatech-topbar-avatar-menu", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex\">\n  <a\n    class=\"flex justify-center items-center rounded-full overflow-hidden cursor-pointer hover:outline-[--rt-raised-background] outline outline-transparent outline-4\"\n    [matMenuTriggerFor]=\"menu()\"\n  >\n    <div class=\"bg-orange-600 w-9 h-9\">\n      @if (avatar()) {\n        <img class=\"w-9 h-9 object-cover\" [src]=\"avatar()\" />\n      }\n    </div>\n  </a>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TopbarAvatarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: TopbarAvatarMenuComponent, isStandalone: true, selector: "rolatech-topbar-avatar-menu", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex\">\n  <a\n    class=\"flex justify-center items-center rounded-full overflow-hidden cursor-pointer hover:outline-[--rt-raised-background] outline outline-transparent outline-4\"\n    [matMenuTriggerFor]=\"menu()\"\n  >\n    <div class=\"bg-orange-600 w-9 h-9\">\n      @if (avatar()) {\n        <img class=\"w-9 h-9 object-cover\" [src]=\"avatar()\" />\n      }\n    </div>\n  </a>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TopbarAvatarMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TopbarAvatarMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-topbar-avatar-menu', standalone: true, imports: [
                         CommonModule,

package/esm2022/lib/wechat-connect-dialog/wechat-connect-dialog.component.mjs

@@ -31,10 +31,10 @@ export class WechatConnectDialogComponent {
             this.dialogRef.close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: WechatConnectDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: WechatConnectDialogComponent, isStandalone: true, selector: "rolatech-wechat-connect-dialog", inputs: { appId: { classPropertyName: "appId", publicName: "appId", isSignal: true, isRequired: false, transformFunction: null }, redirectUri: { classPropertyName: "redirectUri", publicName: "redirectUri", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appId: "appIdChange", redirectUri: "redirectUriChange", state: "stateChange" }, host: { listeners: { "window:message": "onLogin($event)" } }, ngImport: i0, template: "<div class=\"flex flex-col p-3\">\n  <div class=\"w-[190px] h-[190px]\">\n    @if (loaded) {\n      <iframe [src]=\"urlSafe\" class=\"w-full h-full inline\" scrolling=\"no\" frameBorder=\"no\"></iframe>\n    }\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0}.normalPanel .panelContent{width:188px;height:188px}.normalPanel .wrp_code{position:relative;width:188px;height:188px;margin:0}.impowerBox .title,.normalPanel .info{display:none}.impowerBox .qrcode{margin-top:0;border:0;width:188px;height:188px}#MAXIM{content:\"veg20170418191511\"}mat-mdc-dialog-content mdc-dialog__content{padding:0}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: WechatConnectDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: WechatConnectDialogComponent, isStandalone: true, selector: "rolatech-wechat-connect-dialog", inputs: { appId: { classPropertyName: "appId", publicName: "appId", isSignal: true, isRequired: false, transformFunction: null }, redirectUri: { classPropertyName: "redirectUri", publicName: "redirectUri", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appId: "appIdChange", redirectUri: "redirectUriChange", state: "stateChange" }, host: { listeners: { "window:message": "onLogin($event)" } }, ngImport: i0, template: "<div class=\"flex flex-col p-3\">\n  <div class=\"w-[190px] h-[190px]\">\n    @if (loaded) {\n      <iframe [src]=\"urlSafe\" class=\"w-full h-full inline\" scrolling=\"no\" frameBorder=\"no\"></iframe>\n    }\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0}.normalPanel .panelContent{width:188px;height:188px}.normalPanel .wrp_code{position:relative;width:188px;height:188px;margin:0}.impowerBox .title,.normalPanel .info{display:none}.impowerBox .qrcode{margin-top:0;border:0;width:188px;height:188px}#MAXIM{content:\"veg20170418191511\"}mat-mdc-dialog-content mdc-dialog__content{padding:0}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: WechatConnectDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: WechatConnectDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-wechat-connect-dialog', standalone: true, template: "<div class=\"flex flex-col p-3\">\n  <div class=\"w-[190px] h-[190px]\">\n    @if (loaded) {\n      <iframe [src]=\"urlSafe\" class=\"w-full h-full inline\" scrolling=\"no\" frameBorder=\"no\"></iframe>\n    }\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0}.normalPanel .panelContent{width:188px;height:188px}.normalPanel .wrp_code{position:relative;width:188px;height:188px;margin:0}.impowerBox .title,.normalPanel .info{display:none}.impowerBox .qrcode{margin-top:0;border:0;width:188px;height:188px}#MAXIM{content:\"veg20170418191511\"}mat-mdc-dialog-content mdc-dialog__content{padding:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onLogin: [{