ngx-rs-ant 1.9.7 → 1.9.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/box-container/box-item/box-item.component.mjs +10 -6
- package/esm2020/box-container/box-item/item-style/style/style.component.mjs +5 -3
- package/esm2020/box-container/plugin-active/divider/divider-line/divider-line.component.mjs +2 -2
- package/esm2020/box-container/plugin-active/divider/divider.component.mjs +2 -2
- package/fesm2015/ngx-rs-ant.mjs +21 -15
- package/fesm2015/ngx-rs-ant.mjs.map +1 -1
- package/fesm2020/ngx-rs-ant.mjs +17 -11
- package/fesm2020/ngx-rs-ant.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2020/ngx-rs-ant.mjs
CHANGED
|
@@ -51,10 +51,10 @@ class DividerLineComponent {
|
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
DividerLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DividerLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
54
|
-
DividerLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DividerLineComponent, selector: "rs-divider-line", inputs: { direction: "direction", targetElement: "targetElement" }, host: { properties: { "style": "this._style" } }, ngImport: i0, template: "", styles: ["
|
|
54
|
+
DividerLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DividerLineComponent, selector: "rs-divider-line", inputs: { direction: "direction", targetElement: "targetElement" }, host: { properties: { "style": "this._style" } }, ngImport: i0, template: "", styles: ["rs-divider:hover>:host{position:absolute;top:-5px;border:1px dashed var(--coast-default-color, rgb(51, 122, 183))}\n"] });
|
|
55
55
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DividerLineComponent, decorators: [{
|
|
56
56
|
type: Component,
|
|
57
|
-
args: [{ selector: 'rs-divider-line', template: "", styles: ["
|
|
57
|
+
args: [{ selector: 'rs-divider-line', template: "", styles: ["rs-divider:hover>:host{position:absolute;top:-5px;border:1px dashed var(--coast-default-color, rgb(51, 122, 183))}\n"] }]
|
|
58
58
|
}], propDecorators: { direction: [{
|
|
59
59
|
type: Input
|
|
60
60
|
}], targetElement: [{
|
|
@@ -93,10 +93,10 @@ class DividerComponent {
|
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
95
|
DividerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
96
|
-
DividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DividerComponent, selector: "rs-divider", inputs: { direction: "direction", targetElement: "targetElement" }, outputs: { dividerClick: "dividerClick" }, host: { listeners: { "click": "onClick()" }, properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"divider-image\"></div>\n<rs-divider-line [targetElement]=\"targetElement\" [direction]=\"direction\"></rs-divider-line>\n", styles: [":host{position:absolute;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;width:24px;height:24px;background-color:#fff;border-radius:12px;cursor:pointer}:host .divider-image{width:12px;height:12px;background-size:contain;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACO0lEQVRIDa2Uy6tNURzHN7cwMUAmHncot0QeV5QiBgZKmWEgzDDx+ANu5soMcUkxIY+iEFIKEZnIyMC9GZAMrke6hXt9Pvus1VnntPbZ53B/9dnrt36P7zpr7bVPUTRtD+5j+Arv4QwshDpbTIG1o2CvGmq12CVmk/ADnsGnMHccgCpbRiLWjuA/BTXUUrM0VzNwD+aVkcbjIMNveJnEUrePyWuYgP1JYi6+WmqWO3FLrpqKMy3tHE8LtzemLc99ITfcEm1MXERNtYsxcGs520nQBV61JWcyHw253W25OFVzbDqPj1D1MheF6tWM24LvcAD6w7yqdwF5tYvT4K90y6m5zQ/wE37BC9Bmw2f4Ah6DNdamFo/vlEHP3pvwB87CLjgGNrrwEbgY/K2MQ8E/zHg0+NbaY68aaqmpdmlLeT4HBSPf8RXQloA3ylvzDTx/34OmsLWxz9Hdqtlivo/l4NXy1syB1C4ziSK547THXjXU6tk20uECnn1fz91dNJynJu5gUxf1PZV4nr6DdzABj2BK7Rpq/votcDX4GxinxNagovjDoOZLdBcPwvy/h/souMDaROlGiK1PYv/kbg5C19u6V4b43bZ4z1M/GF/uQKbzFjF3NpjJdRXaEQQuVFQr7AK3K/Idw36Jb2Ec+jtU3iHnIqs61GRTe4naeDKbbQbXhbqbzVC9N4OSEfAPbD7UmbfMa7uirjDmD+H464/HQM3oB2f9lVxd7l9vFoVv4ESuIRN7QkzxaZlc8RcdnI7tMHZBlAAAAABJRU5ErkJggg==)}:host:hover{background-color:var(--coast-default-color, rgb(51, 122, 183))}\n"], dependencies: [{ kind: "component", type: DividerLineComponent, selector: "rs-divider-line", inputs: ["direction", "targetElement"] }] });
|
|
96
|
+
DividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DividerComponent, selector: "rs-divider", inputs: { direction: "direction", targetElement: "targetElement" }, outputs: { dividerClick: "dividerClick" }, host: { listeners: { "click": "onClick()" }, properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"divider-image\"></div>\n<rs-divider-line [targetElement]=\"targetElement\" [direction]=\"direction\"></rs-divider-line>\n", styles: [":host{position:absolute;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;width:24px;height:24px;background-color:#fff;border-radius:12px;pointer-events:all;cursor:pointer}:host .divider-image{width:12px;height:12px;background-size:contain;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACO0lEQVRIDa2Uy6tNURzHN7cwMUAmHncot0QeV5QiBgZKmWEgzDDx+ANu5soMcUkxIY+iEFIKEZnIyMC9GZAMrke6hXt9Pvus1VnntPbZ53B/9dnrt36P7zpr7bVPUTRtD+5j+Arv4QwshDpbTIG1o2CvGmq12CVmk/ADnsGnMHccgCpbRiLWjuA/BTXUUrM0VzNwD+aVkcbjIMNveJnEUrePyWuYgP1JYi6+WmqWO3FLrpqKMy3tHE8LtzemLc99ITfcEm1MXERNtYsxcGs520nQBV61JWcyHw253W25OFVzbDqPj1D1MheF6tWM24LvcAD6w7yqdwF5tYvT4K90y6m5zQ/wE37BC9Bmw2f4Ah6DNdamFo/vlEHP3pvwB87CLjgGNrrwEbgY/K2MQ8E/zHg0+NbaY68aaqmpdmlLeT4HBSPf8RXQloA3ylvzDTx/34OmsLWxz9Hdqtlivo/l4NXy1syB1C4ziSK547THXjXU6tk20uECnn1fz91dNJynJu5gUxf1PZV4nr6DdzABj2BK7Rpq/votcDX4GxinxNagovjDoOZLdBcPwvy/h/souMDaROlGiK1PYv/kbg5C19u6V4b43bZ4z1M/GF/uQKbzFjF3NpjJdRXaEQQuVFQr7AK3K/Idw36Jb2Ec+jtU3iHnIqs61GRTe4naeDKbbQbXhbqbzVC9N4OSEfAPbD7UmbfMa7uirjDmD+H464/HQM3oB2f9lVxd7l9vFoVv4ESuIRN7QkzxaZlc8RcdnI7tMHZBlAAAAABJRU5ErkJggg==)}:host:hover{background-color:var(--coast-default-color, rgb(51, 122, 183))}\n"], dependencies: [{ kind: "component", type: DividerLineComponent, selector: "rs-divider-line", inputs: ["direction", "targetElement"] }] });
|
|
97
97
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DividerComponent, decorators: [{
|
|
98
98
|
type: Component,
|
|
99
|
-
args: [{ selector: 'rs-divider', template: "<div class=\"divider-image\"></div>\n<rs-divider-line [targetElement]=\"targetElement\" [direction]=\"direction\"></rs-divider-line>\n", styles: [":host{position:absolute;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;width:24px;height:24px;background-color:#fff;border-radius:12px;cursor:pointer}:host .divider-image{width:12px;height:12px;background-size:contain;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACO0lEQVRIDa2Uy6tNURzHN7cwMUAmHncot0QeV5QiBgZKmWEgzDDx+ANu5soMcUkxIY+iEFIKEZnIyMC9GZAMrke6hXt9Pvus1VnntPbZ53B/9dnrt36P7zpr7bVPUTRtD+5j+Arv4QwshDpbTIG1o2CvGmq12CVmk/ADnsGnMHccgCpbRiLWjuA/BTXUUrM0VzNwD+aVkcbjIMNveJnEUrePyWuYgP1JYi6+WmqWO3FLrpqKMy3tHE8LtzemLc99ITfcEm1MXERNtYsxcGs520nQBV61JWcyHw253W25OFVzbDqPj1D1MheF6tWM24LvcAD6w7yqdwF5tYvT4K90y6m5zQ/wE37BC9Bmw2f4Ah6DNdamFo/vlEHP3pvwB87CLjgGNrrwEbgY/K2MQ8E/zHg0+NbaY68aaqmpdmlLeT4HBSPf8RXQloA3ylvzDTx/34OmsLWxz9Hdqtlivo/l4NXy1syB1C4ziSK547THXjXU6tk20uECnn1fz91dNJynJu5gUxf1PZV4nr6DdzABj2BK7Rpq/votcDX4GxinxNagovjDoOZLdBcPwvy/h/souMDaROlGiK1PYv/kbg5C19u6V4b43bZ4z1M/GF/uQKbzFjF3NpjJdRXaEQQuVFQr7AK3K/Idw36Jb2Ec+jtU3iHnIqs61GRTe4naeDKbbQbXhbqbzVC9N4OSEfAPbD7UmbfMa7uirjDmD+H464/HQM3oB2f9lVxd7l9vFoVv4ESuIRN7QkzxaZlc8RcdnI7tMHZBlAAAAABJRU5ErkJggg==)}:host:hover{background-color:var(--coast-default-color, rgb(51, 122, 183))}\n"] }]
|
|
99
|
+
args: [{ selector: 'rs-divider', template: "<div class=\"divider-image\"></div>\n<rs-divider-line [targetElement]=\"targetElement\" [direction]=\"direction\"></rs-divider-line>\n", styles: [":host{position:absolute;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;width:24px;height:24px;background-color:#fff;border-radius:12px;pointer-events:all;cursor:pointer}:host .divider-image{width:12px;height:12px;background-size:contain;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACO0lEQVRIDa2Uy6tNURzHN7cwMUAmHncot0QeV5QiBgZKmWEgzDDx+ANu5soMcUkxIY+iEFIKEZnIyMC9GZAMrke6hXt9Pvus1VnntPbZ53B/9dnrt36P7zpr7bVPUTRtD+5j+Arv4QwshDpbTIG1o2CvGmq12CVmk/ADnsGnMHccgCpbRiLWjuA/BTXUUrM0VzNwD+aVkcbjIMNveJnEUrePyWuYgP1JYi6+WmqWO3FLrpqKMy3tHE8LtzemLc99ITfcEm1MXERNtYsxcGs520nQBV61JWcyHw253W25OFVzbDqPj1D1MheF6tWM24LvcAD6w7yqdwF5tYvT4K90y6m5zQ/wE37BC9Bmw2f4Ah6DNdamFo/vlEHP3pvwB87CLjgGNrrwEbgY/K2MQ8E/zHg0+NbaY68aaqmpdmlLeT4HBSPf8RXQloA3ylvzDTx/34OmsLWxz9Hdqtlivo/l4NXy1syB1C4ziSK547THXjXU6tk20uECnn1fz91dNJynJu5gUxf1PZV4nr6DdzABj2BK7Rpq/votcDX4GxinxNagovjDoOZLdBcPwvy/h/souMDaROlGiK1PYv/kbg5C19u6V4b43bZ4z1M/GF/uQKbzFjF3NpjJdRXaEQQuVFQr7AK3K/Idw36Jb2Ec+jtU3iHnIqs61GRTe4naeDKbbQbXhbqbzVC9N4OSEfAPbD7UmbfMa7uirjDmD+H464/HQM3oB2f9lVxd7l9vFoVv4ESuIRN7QkzxaZlc8RcdnI7tMHZBlAAAAABJRU5ErkJggg==)}:host:hover{background-color:var(--coast-default-color, rgb(51, 122, 183))}\n"] }]
|
|
100
100
|
}], propDecorators: { direction: [{
|
|
101
101
|
type: Input
|
|
102
102
|
}], targetElement: [{
|
|
@@ -205,7 +205,9 @@ class StyleComponent {
|
|
|
205
205
|
}
|
|
206
206
|
ngOnInit() {
|
|
207
207
|
this.style.width = this.style.width ? this.style.width : 'auto';
|
|
208
|
+
this.style.widthType = this.style.widthType ? this.style.widthType : 'screen';
|
|
208
209
|
this.style.height = this.style.height ? this.style.height : 'auto';
|
|
210
|
+
this.style.heightType = this.style.heightType ? this.style.heightType : 'screen';
|
|
209
211
|
if (this.style.width !== 'auto') {
|
|
210
212
|
this.width = this.style.width.substring(0, this.style.width.length - 2);
|
|
211
213
|
}
|
|
@@ -236,10 +238,10 @@ class StyleComponent {
|
|
|
236
238
|
}
|
|
237
239
|
}
|
|
238
240
|
StyleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
239
|
-
StyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StyleComponent, selector: "rs-style", ngImport: i0, template: "<div class=\"config-item\">\n <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\n <div class=\"item-setting\">\n <div class=\"card-style-radio\">\n <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\n (click)=\"select('width','auto')\">\n <span>\u81EA\u9002\u5E94</span>\n </div>\n <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\n (click)=\"select('width',240)\">\n <span>\u56FA\u5B9A\u503C</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"config-item\">\n <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\n <div class=\"item-setting\">\n <dx-number-box [min]=\"0\"\n [showSpinButtons]=\"true\"\n [showClearButton]=\"true\"\n [(value)]=\"width\"\n (onValueChanged)=\"typing('width', $event.value)\"
|
|
241
|
+
StyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StyleComponent, selector: "rs-style", ngImport: i0, template: "<div class=\"config-item\">\n <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\n <div class=\"item-setting\">\n <div class=\"card-style-radio\">\n <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\n (click)=\"select('width','auto')\">\n <span>\u81EA\u9002\u5E94</span>\n </div>\n <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\n (click)=\"select('width',240)\">\n <span>\u56FA\u5B9A\u503C</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"config-item\" *ngIf=\"style.width === 'auto'\">\n <div class=\"item-title\">\u9002\u5E94\u65B9\u5F0F</div>\n <div class=\"item-setting\">\n <div class=\"card-style-radio\">\n <div class=\"radio-value\" [ngClass]=\"!style.widthType || style.widthType === 'screen' ? 'active' : ''\"\n (click)=\"style.widthType = 'screen'\">\n <span>\u6309\u5C4F\u5E55</span>\n </div>\n <div class=\"radio-value\" [ngClass]=\"style.widthType && style.widthType === 'content' ? 'active' : ''\"\n (click)=\"style.widthType = 'content'\">\n <span>\u6309\u5185\u5BB9</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"config-item\" *ngIf=\"style.width !== 'auto'\">\n <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\n <div class=\"item-setting\">\n <dx-number-box [min]=\"0\"\n [showSpinButtons]=\"true\"\n [showClearButton]=\"true\"\n [(value)]=\"width\"\n (onValueChanged)=\"typing('width', $event.value)\">\n </dx-number-box>\n </div>\n</div>\n<div class=\"config-item\">\n <div class=\"item-title\">\u9AD8\u5EA6\u7C7B\u578B</div>\n <div class=\"item-setting\">\n <div class=\"card-style-radio\">\n <div class=\"radio-value\" [ngClass]=\"!style.height || style.height === 'auto' ? 'active' : ''\"\n (click)=\"select('height','auto')\">\n <span>\u81EA\u9002\u5E94</span>\n </div>\n <div class=\"radio-value\" [ngClass]=\"style.height && style.height !== 'auto' ? 'active' : ''\"\n (click)=\"select('height',800)\">\n <span>\u56FA\u5B9A\u503C</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"config-item\" *ngIf=\"style.height === 'auto'\">\n <div class=\"item-title\">\u9002\u5E94\u65B9\u5F0F</div>\n <div class=\"item-setting\">\n <div class=\"card-style-radio\">\n <div class=\"radio-value\" [ngClass]=\"!style.heightType || style.heightType === 'screen' ? 'active' : ''\"\n (click)=\"style.heightType = 'screen'\">\n <span>\u6309\u5C4F\u5E55</span>\n </div>\n <div class=\"radio-value\" [ngClass]=\"style.heightType && style.heightType === 'content' ? 'active' : ''\"\n (click)=\"style.heightType = 'content'\">\n <span>\u6309\u5185\u5BB9</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"config-item\" *ngIf=\"style.height !== 'auto'\">\n <div class=\"item-title\">\u56FA\u5B9A\u9AD8\u5EA6</div>\n <div class=\"item-setting\">\n <dx-number-box [min]=\"0\"\n [showSpinButtons]=\"true\"\n [showClearButton]=\"true\"\n [(value)]=\"height\"\n (onValueChanged)=\"typing('height', $event.value)\">\n </dx-number-box>\n </div>\n</div>\n", styles: [":host .config-item{display:flex;flex-flow:row nowrap;align-items:center;margin-bottom:8px}:host .config-item .item-title{flex:0 0 80px}:host .config-item .item-setting{flex:1;display:flex;flex-flow:row nowrap}:host .config-item .item-setting .card-style-radio{flex:1;display:flex;flex-flow:row nowrap;justify-content:stretch}:host .config-item .item-setting .card-style-radio .radio-value{flex:1;border:1px solid var(--coast-border-color, rgb(221, 221, 221));text-align:center;padding:4px;margin-left:-1px;cursor:pointer}:host .config-item .item-setting .card-style-radio .radio-value span{-webkit-user-select:none;user-select:none}:host .config-item .item-setting .card-style-radio .radio-value.active{color:var(--coast-default-color, rgb(51, 122, 183));border:1px solid var(--coast-default-color, rgb(51, 122, 183));z-index:1}:host .config-item .item-setting dx-number-box{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxNumberBoxComponent, selector: "dx-number-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "format", "height", "hint", "hoverStateEnabled", "inputAttr", "invalidValueMessage", "isDirty", "isValid", "label", "labelMode", "max", "min", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showSpinButtons", "step", "stylingMode", "tabIndex", "text", "useLargeSpinButtons", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formatChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "invalidValueMessageChange", "isDirtyChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "minChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showSpinButtonsChange", "stepChange", "stylingModeChange", "tabIndexChange", "textChange", "useLargeSpinButtonsChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }] });
|
|
240
242
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StyleComponent, decorators: [{
|
|
241
243
|
type: Component,
|
|
242
|
-
args: [{ selector: 'rs-style', template: "<div class=\"config-item\">\n <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\n <div class=\"item-setting\">\n <div class=\"card-style-radio\">\n <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\n (click)=\"select('width','auto')\">\n <span>\u81EA\u9002\u5E94</span>\n </div>\n <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\n (click)=\"select('width',240)\">\n <span>\u56FA\u5B9A\u503C</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"config-item\">\n <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\n <div class=\"item-setting\">\n <dx-number-box [min]=\"0\"\n [showSpinButtons]=\"true\"\n [showClearButton]=\"true\"\n [(value)]=\"width\"\n (onValueChanged)=\"typing('width', $event.value)\"
|
|
244
|
+
args: [{ selector: 'rs-style', template: "<div class=\"config-item\">\n <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\n <div class=\"item-setting\">\n <div class=\"card-style-radio\">\n <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\n (click)=\"select('width','auto')\">\n <span>\u81EA\u9002\u5E94</span>\n </div>\n <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\n (click)=\"select('width',240)\">\n <span>\u56FA\u5B9A\u503C</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"config-item\" *ngIf=\"style.width === 'auto'\">\n <div class=\"item-title\">\u9002\u5E94\u65B9\u5F0F</div>\n <div class=\"item-setting\">\n <div class=\"card-style-radio\">\n <div class=\"radio-value\" [ngClass]=\"!style.widthType || style.widthType === 'screen' ? 'active' : ''\"\n (click)=\"style.widthType = 'screen'\">\n <span>\u6309\u5C4F\u5E55</span>\n </div>\n <div class=\"radio-value\" [ngClass]=\"style.widthType && style.widthType === 'content' ? 'active' : ''\"\n (click)=\"style.widthType = 'content'\">\n <span>\u6309\u5185\u5BB9</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"config-item\" *ngIf=\"style.width !== 'auto'\">\n <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\n <div class=\"item-setting\">\n <dx-number-box [min]=\"0\"\n [showSpinButtons]=\"true\"\n [showClearButton]=\"true\"\n [(value)]=\"width\"\n (onValueChanged)=\"typing('width', $event.value)\">\n </dx-number-box>\n </div>\n</div>\n<div class=\"config-item\">\n <div class=\"item-title\">\u9AD8\u5EA6\u7C7B\u578B</div>\n <div class=\"item-setting\">\n <div class=\"card-style-radio\">\n <div class=\"radio-value\" [ngClass]=\"!style.height || style.height === 'auto' ? 'active' : ''\"\n (click)=\"select('height','auto')\">\n <span>\u81EA\u9002\u5E94</span>\n </div>\n <div class=\"radio-value\" [ngClass]=\"style.height && style.height !== 'auto' ? 'active' : ''\"\n (click)=\"select('height',800)\">\n <span>\u56FA\u5B9A\u503C</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"config-item\" *ngIf=\"style.height === 'auto'\">\n <div class=\"item-title\">\u9002\u5E94\u65B9\u5F0F</div>\n <div class=\"item-setting\">\n <div class=\"card-style-radio\">\n <div class=\"radio-value\" [ngClass]=\"!style.heightType || style.heightType === 'screen' ? 'active' : ''\"\n (click)=\"style.heightType = 'screen'\">\n <span>\u6309\u5C4F\u5E55</span>\n </div>\n <div class=\"radio-value\" [ngClass]=\"style.heightType && style.heightType === 'content' ? 'active' : ''\"\n (click)=\"style.heightType = 'content'\">\n <span>\u6309\u5185\u5BB9</span>\n </div>\n </div>\n </div>\n</div>\n<div class=\"config-item\" *ngIf=\"style.height !== 'auto'\">\n <div class=\"item-title\">\u56FA\u5B9A\u9AD8\u5EA6</div>\n <div class=\"item-setting\">\n <dx-number-box [min]=\"0\"\n [showSpinButtons]=\"true\"\n [showClearButton]=\"true\"\n [(value)]=\"height\"\n (onValueChanged)=\"typing('height', $event.value)\">\n </dx-number-box>\n </div>\n</div>\n", styles: [":host .config-item{display:flex;flex-flow:row nowrap;align-items:center;margin-bottom:8px}:host .config-item .item-title{flex:0 0 80px}:host .config-item .item-setting{flex:1;display:flex;flex-flow:row nowrap}:host .config-item .item-setting .card-style-radio{flex:1;display:flex;flex-flow:row nowrap;justify-content:stretch}:host .config-item .item-setting .card-style-radio .radio-value{flex:1;border:1px solid var(--coast-border-color, rgb(221, 221, 221));text-align:center;padding:4px;margin-left:-1px;cursor:pointer}:host .config-item .item-setting .card-style-radio .radio-value span{-webkit-user-select:none;user-select:none}:host .config-item .item-setting .card-style-radio .radio-value.active{color:var(--coast-default-color, rgb(51, 122, 183));border:1px solid var(--coast-default-color, rgb(51, 122, 183));z-index:1}:host .config-item .item-setting dx-number-box{flex:1}\n"] }]
|
|
243
245
|
}] });
|
|
244
246
|
|
|
245
247
|
class StyleBlankComponent {
|
|
@@ -547,8 +549,10 @@ class BoxItemComponent {
|
|
|
547
549
|
return {};
|
|
548
550
|
}
|
|
549
551
|
const width = this.style?.width ? this.style.width : 'auto';
|
|
552
|
+
const widthType = this.style?.widthType ? this.style.widthType : 'screen';
|
|
550
553
|
const height = this.style?.height ? this.style.height : 'auto';
|
|
551
|
-
|
|
554
|
+
const heightType = this.style?.heightType ? this.style.heightType : 'screen';
|
|
555
|
+
return this._calcStyle(this.pDirection, width, widthType, height, heightType);
|
|
552
556
|
}
|
|
553
557
|
ngOnInit() {
|
|
554
558
|
this.load();
|
|
@@ -648,23 +652,25 @@ class BoxItemComponent {
|
|
|
648
652
|
}
|
|
649
653
|
calcStyle(item) {
|
|
650
654
|
const width = item.style?.width ? item.style.width : 'auto';
|
|
655
|
+
const widthType = item.style?.widthType ? item.style.widthType : 'screen';
|
|
651
656
|
const height = item.style?.height ? item.style.height : 'auto';
|
|
657
|
+
const heightType = item.style?.heightType ? item.style.heightType : 'screen';
|
|
652
658
|
return {
|
|
653
|
-
...this._calcStyle(this.config.direction, width, height),
|
|
659
|
+
...this._calcStyle(this.config.direction, width, widthType, height, heightType),
|
|
654
660
|
position: 'relative'
|
|
655
661
|
};
|
|
656
662
|
}
|
|
657
|
-
_calcStyle(direction, width, height) {
|
|
663
|
+
_calcStyle(direction, width, widthType, height, heightType) {
|
|
658
664
|
if (direction === 'row') {
|
|
659
665
|
return {
|
|
660
|
-
flex: width === 'auto' ? '1' : '0 0 ' + width,
|
|
666
|
+
flex: width === 'auto' ? (widthType === 'screen' ? '1' : 'none') : '0 0 ' + width,
|
|
661
667
|
height
|
|
662
668
|
};
|
|
663
669
|
}
|
|
664
670
|
else if (direction === 'column') {
|
|
665
671
|
return {
|
|
666
672
|
width,
|
|
667
|
-
flex: height === 'auto' ? 'auto' : '0 0 ' + height
|
|
673
|
+
flex: height === 'auto' ? (heightType === 'screen' ? 'auto' : 'none') : '0 0 ' + height
|
|
668
674
|
};
|
|
669
675
|
}
|
|
670
676
|
return {};
|