ngx-rs-ant 1.9.7 → 1.9.8
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/fesm2015/ngx-rs-ant.mjs +17 -11
- package/fesm2015/ngx-rs-ant.mjs.map +1 -1
- package/fesm2020/ngx-rs-ant.mjs +13 -7
- package/fesm2020/ngx-rs-ant.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2020/ngx-rs-ant.mjs
CHANGED
|
@@ -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 {};
|