@kris701/ez-ui 1.3.1 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2663,6 +2663,7 @@ class EzUIMarkdownEditor {
2663
2663
  editor;
2664
2664
  fileUpload;
2665
2665
  disabled = false;
2666
+ slim = false;
2666
2667
  value = null;
2667
2668
  valueChange = new EventEmitter();
2668
2669
  unsavedValue = signal("", /* @ts-ignore */
@@ -2852,7 +2853,7 @@ class EzUIMarkdownEditor {
2852
2853
  setTimeout(async () => await this.formatPreview(), 500);
2853
2854
  }
2854
2855
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMarkdownEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
2855
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMarkdownEditor, isStandalone: true, selector: "ezui-markdowneditor", inputs: { disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "flex h-full w-full" }, viewQueries: [{ propertyName: "preview", first: true, predicate: ["preview"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
2856
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMarkdownEditor, isStandalone: true, selector: "ezui-markdowneditor", inputs: { disabled: "disabled", slim: "slim", value: "value" }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "flex h-full w-full" }, viewQueries: [{ propertyName: "preview", first: true, predicate: ["preview"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
2856
2857
  @if(isEditing() && !disabled){
2857
2858
  <div class="editor-container">
2858
2859
  <div class="editor">
@@ -2879,16 +2880,28 @@ class EzUIMarkdownEditor {
2879
2880
  </div>
2880
2881
  }
2881
2882
  @else {
2882
- <div class="preview-readonly-container">
2883
+ <div
2884
+ class="preview-readonly-container"
2885
+ [style.border-radius]="slim ? '0px' : ''"
2886
+ [style.background-color]="slim ? 'transparent' : 'var(--tui-background-base)'"
2887
+ [style.outline]="slim ? '0' : ''"
2888
+ >
2883
2889
  @if(!disabled){
2884
2890
  <button tuiButton class="edit-button" iconStart="edit" appearance="flat" size="s"(click)="toggleEdit(false)"></button>
2885
2891
  }
2886
2892
  <tui-scrollbar>
2887
- <div class="preview" #preview>Rendering...</div>
2893
+ <div
2894
+ class="preview"
2895
+ #preview
2896
+ [style.margin-left]="disabled ? (slim ? '0px' : '10px') : '20px'"
2897
+ [style.padding]="slim ? '0px' : ''"
2898
+ >
2899
+ Rendering...
2900
+ </div>
2888
2901
  </tui-scrollbar>
2889
2902
  </div>
2890
2903
  }
2891
- `, isInline: true, styles: [".editor-container{display:flex;flex-direction:row;width:100%;outline:.125rem solid var(--tui-background-accent-1);border-radius:var(--tui-radius-l)}.editor-container .editor{display:flex;flex-direction:column;width:100%}.editor-container .editor .editor-field{block-size:100%;border-radius:0px 0px 0px var(--tui-radius-l)}.preview-container{width:100%;border-radius:0px var(--tui-radius-l) var(--tui-radius-l) 0px;transition-property:box-shadow,background-color,outline-color,border-color,color;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);--t-shadow: 0 .125rem .1875rem rgba(0, 0, 0, .1);background-color:var(--tui-background-base);color:var(--tui-text-tertiary);box-shadow:var(--t-shadow);outline:1px solid var(--tui-border-normal);outline-offset:-1px;border-width:0;block-size:100%}.preview-container ::ng-deep tui-scrollbar{height:100%}.preview-container ::ng-deep .t-content{display:flex;block-size:auto!important}.preview-container .preview{padding:10px}.preview-readonly-container{width:100%;border-radius:var(--tui-radius-l);transition-property:box-shadow,background-color,outline-color,border-color,color;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);--t-shadow: 0 .125rem .1875rem rgba(0, 0, 0, .1);background-color:var(--tui-background-base);color:var(--tui-text-tertiary);box-shadow:var(--t-shadow);outline:1px solid var(--tui-border-normal);outline-offset:-1px;border-width:0;block-size:100%}.preview-readonly-container .edit-button{position:absolute;z-index:999}.preview-readonly-container ::ng-deep tui-scrollbar{height:100%}.preview-readonly-container ::ng-deep .t-content{display:flex;block-size:auto!important}.preview-readonly-container .preview{padding:10px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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: CommonModule }, { kind: "directive", type: i4$1.TuiTextareaComponent, selector: "textarea[tuiTextarea]", inputs: ["min", "max", "content"] }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }, { kind: "component", type: EzUIMenuBar, selector: "ezui-menubar", inputs: ["items"] }] });
2904
+ `, isInline: true, styles: [".editor-container{display:flex;flex-direction:row;width:100%;outline:.125rem solid var(--tui-background-accent-1);border-radius:var(--tui-radius-l)}.editor-container .editor{display:flex;flex-direction:column;width:100%}.editor-container .editor .editor-field{block-size:100%;border-radius:0px 0px 0px var(--tui-radius-l)}.preview-container{width:100%;border-radius:0px var(--tui-radius-l) var(--tui-radius-l) 0px;transition-property:box-shadow,background-color,outline-color,border-color,color;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);--t-shadow: 0 .125rem .1875rem rgba(0, 0, 0, .1);background-color:var(--tui-background-base);color:var(--tui-text-tertiary);box-shadow:var(--t-shadow);outline:1px solid var(--tui-border-normal);outline-offset:-1px;border-width:0;block-size:100%}.preview-container ::ng-deep tui-scrollbar{height:100%}.preview-container ::ng-deep .t-content{display:flex;block-size:auto!important}.preview-container .preview{padding:10px}.preview-container .preview ::ng-deep p{margin:0}.preview-readonly-container{width:100%;border-radius:var(--tui-radius-l);transition-property:box-shadow,background-color,outline-color,border-color,color;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);--t-shadow: 0 .125rem .1875rem rgba(0, 0, 0, .1);background-color:var(--tui-background-base);color:var(--tui-text-tertiary);box-shadow:var(--t-shadow);outline:1px solid var(--tui-border-normal);outline-offset:-1px;border-width:0;block-size:100%}.preview-readonly-container .edit-button{position:absolute;z-index:999}.preview-readonly-container ::ng-deep tui-scrollbar{height:100%}.preview-readonly-container ::ng-deep .t-content{display:flex;block-size:auto!important}.preview-readonly-container .preview{padding:10px}.preview-readonly-container .preview ::ng-deep p{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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: CommonModule }, { kind: "directive", type: i4$1.TuiTextareaComponent, selector: "textarea[tuiTextarea]", inputs: ["min", "max", "content"] }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }, { kind: "component", type: EzUIMenuBar, selector: "ezui-menubar", inputs: ["items"] }] });
2892
2905
  }
2893
2906
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMarkdownEditor, decorators: [{
2894
2907
  type: Component,
@@ -2919,18 +2932,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
2919
2932
  </div>
2920
2933
  }
2921
2934
  @else {
2922
- <div class="preview-readonly-container">
2935
+ <div
2936
+ class="preview-readonly-container"
2937
+ [style.border-radius]="slim ? '0px' : ''"
2938
+ [style.background-color]="slim ? 'transparent' : 'var(--tui-background-base)'"
2939
+ [style.outline]="slim ? '0' : ''"
2940
+ >
2923
2941
  @if(!disabled){
2924
2942
  <button tuiButton class="edit-button" iconStart="edit" appearance="flat" size="s"(click)="toggleEdit(false)"></button>
2925
2943
  }
2926
2944
  <tui-scrollbar>
2927
- <div class="preview" #preview>Rendering...</div>
2945
+ <div
2946
+ class="preview"
2947
+ #preview
2948
+ [style.margin-left]="disabled ? (slim ? '0px' : '10px') : '20px'"
2949
+ [style.padding]="slim ? '0px' : ''"
2950
+ >
2951
+ Rendering...
2952
+ </div>
2928
2953
  </tui-scrollbar>
2929
2954
  </div>
2930
2955
  }
2931
2956
  `, host: {
2932
2957
  class: 'flex h-full w-full'
2933
- }, styles: [".editor-container{display:flex;flex-direction:row;width:100%;outline:.125rem solid var(--tui-background-accent-1);border-radius:var(--tui-radius-l)}.editor-container .editor{display:flex;flex-direction:column;width:100%}.editor-container .editor .editor-field{block-size:100%;border-radius:0px 0px 0px var(--tui-radius-l)}.preview-container{width:100%;border-radius:0px var(--tui-radius-l) var(--tui-radius-l) 0px;transition-property:box-shadow,background-color,outline-color,border-color,color;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);--t-shadow: 0 .125rem .1875rem rgba(0, 0, 0, .1);background-color:var(--tui-background-base);color:var(--tui-text-tertiary);box-shadow:var(--t-shadow);outline:1px solid var(--tui-border-normal);outline-offset:-1px;border-width:0;block-size:100%}.preview-container ::ng-deep tui-scrollbar{height:100%}.preview-container ::ng-deep .t-content{display:flex;block-size:auto!important}.preview-container .preview{padding:10px}.preview-readonly-container{width:100%;border-radius:var(--tui-radius-l);transition-property:box-shadow,background-color,outline-color,border-color,color;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);--t-shadow: 0 .125rem .1875rem rgba(0, 0, 0, .1);background-color:var(--tui-background-base);color:var(--tui-text-tertiary);box-shadow:var(--t-shadow);outline:1px solid var(--tui-border-normal);outline-offset:-1px;border-width:0;block-size:100%}.preview-readonly-container .edit-button{position:absolute;z-index:999}.preview-readonly-container ::ng-deep tui-scrollbar{height:100%}.preview-readonly-container ::ng-deep .t-content{display:flex;block-size:auto!important}.preview-readonly-container .preview{padding:10px}\n"] }]
2958
+ }, styles: [".editor-container{display:flex;flex-direction:row;width:100%;outline:.125rem solid var(--tui-background-accent-1);border-radius:var(--tui-radius-l)}.editor-container .editor{display:flex;flex-direction:column;width:100%}.editor-container .editor .editor-field{block-size:100%;border-radius:0px 0px 0px var(--tui-radius-l)}.preview-container{width:100%;border-radius:0px var(--tui-radius-l) var(--tui-radius-l) 0px;transition-property:box-shadow,background-color,outline-color,border-color,color;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);--t-shadow: 0 .125rem .1875rem rgba(0, 0, 0, .1);background-color:var(--tui-background-base);color:var(--tui-text-tertiary);box-shadow:var(--t-shadow);outline:1px solid var(--tui-border-normal);outline-offset:-1px;border-width:0;block-size:100%}.preview-container ::ng-deep tui-scrollbar{height:100%}.preview-container ::ng-deep .t-content{display:flex;block-size:auto!important}.preview-container .preview{padding:10px}.preview-container .preview ::ng-deep p{margin:0}.preview-readonly-container{width:100%;border-radius:var(--tui-radius-l);transition-property:box-shadow,background-color,outline-color,border-color,color;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);--t-shadow: 0 .125rem .1875rem rgba(0, 0, 0, .1);background-color:var(--tui-background-base);color:var(--tui-text-tertiary);box-shadow:var(--t-shadow);outline:1px solid var(--tui-border-normal);outline-offset:-1px;border-width:0;block-size:100%}.preview-readonly-container .edit-button{position:absolute;z-index:999}.preview-readonly-container ::ng-deep tui-scrollbar{height:100%}.preview-readonly-container ::ng-deep .t-content{display:flex;block-size:auto!important}.preview-readonly-container .preview{padding:10px}.preview-readonly-container .preview ::ng-deep p{margin:0}\n"] }]
2934
2959
  }], propDecorators: { preview: [{
2935
2960
  type: ViewChild,
2936
2961
  args: ['preview']
@@ -2942,6 +2967,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
2942
2967
  args: ['fileUpload']
2943
2968
  }], disabled: [{
2944
2969
  type: Input
2970
+ }], slim: [{
2971
+ type: Input
2945
2972
  }], value: [{
2946
2973
  type: Input
2947
2974
  }], valueChange: [{