@klippa/ngx-enhancy-forms 14.1.0 → 14.1.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.
- package/esm2020/lib/elements/radio/radio.component.mjs +4 -3
- package/esm2020/lib/elements/select/select.component.mjs +12 -6
- package/fesm2015/klippa-ngx-enhancy-forms.mjs +14 -7
- package/fesm2015/klippa-ngx-enhancy-forms.mjs.map +1 -1
- package/fesm2020/klippa-ngx-enhancy-forms.mjs +14 -7
- package/fesm2020/klippa-ngx-enhancy-forms.mjs.map +1 -1
- package/lib/elements/radio/radio.component.d.ts +1 -0
- package/lib/elements/select/select.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -796,6 +796,7 @@ class SelectComponent extends ValueAccessorBase {
|
|
|
796
796
|
ngOnChanges(changes) {
|
|
797
797
|
if (isValueSet(changes.options)) {
|
|
798
798
|
this.lastItemIndexReached = -1;
|
|
799
|
+
this.setWidthBasedOnOptionsWidths();
|
|
799
800
|
}
|
|
800
801
|
this.dropdownPositionToUse = this.dropdownPosition;
|
|
801
802
|
}
|
|
@@ -830,13 +831,18 @@ class SelectComponent extends ValueAccessorBase {
|
|
|
830
831
|
// waiting for the thing to render until we fire the event
|
|
831
832
|
setTimeout(() => {
|
|
832
833
|
this.onOpened.emit();
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
834
|
+
this.setWidthBasedOnOptionsWidths();
|
|
835
|
+
});
|
|
836
|
+
}
|
|
837
|
+
setWidthBasedOnOptionsWidths() {
|
|
838
|
+
if (this.truncateOptions === false) {
|
|
839
|
+
const widths = Array.from(this.elRef.nativeElement.querySelectorAll('.ng-option div')).map((e) => e.scrollWidth);
|
|
840
|
+
const maxWidth = Math.max(...widths);
|
|
841
|
+
const dropdownPanel = this.elRef.nativeElement.querySelector('ng-dropdown-panel');
|
|
842
|
+
if (dropdownPanel) {
|
|
837
843
|
dropdownPanel.style.width = `${maxWidth + 40}px`;
|
|
838
844
|
}
|
|
839
|
-
}
|
|
845
|
+
}
|
|
840
846
|
}
|
|
841
847
|
determineDropdownPosition() {
|
|
842
848
|
let current = this.elRef.nativeElement;
|
|
@@ -1886,13 +1892,14 @@ class RadioComponent extends ValueAccessorBase {
|
|
|
1886
1892
|
super(...arguments);
|
|
1887
1893
|
this.orientation = Orientation.ROW;
|
|
1888
1894
|
this.variant = 'classic';
|
|
1895
|
+
this.Orientation = Orientation;
|
|
1889
1896
|
}
|
|
1890
1897
|
}
|
|
1891
1898
|
RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1892
|
-
RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: RadioComponent, selector: "klp-form-radio", inputs: { options: "options", orientation: "orientation", variant: "variant" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [
|
|
1899
|
+
RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: RadioComponent, selector: "klp-form-radio", inputs: { options: "options", orientation: "orientation", variant: "variant" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW}\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t</div>\n\t\t\t<div>{{option.name}}</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.optionContainer{display:flex;flex-direction:row;margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1893
1900
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RadioComponent, decorators: [{
|
|
1894
1901
|
type: Component,
|
|
1895
|
-
args: [{ selector: 'klp-form-radio', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], template: "<div class=\"componentContainer\" [
|
|
1902
|
+
args: [{ selector: 'klp-form-radio', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW}\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t</div>\n\t\t\t<div>{{option.name}}</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.optionContainer{display:flex;flex-direction:row;margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}\n"] }]
|
|
1896
1903
|
}], propDecorators: { options: [{
|
|
1897
1904
|
type: Input
|
|
1898
1905
|
}], orientation: [{
|