@klippa/ngx-enhancy-forms 18.26.9 → 18.26.10
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.
|
@@ -13,19 +13,22 @@ export class RadioComponent extends ValueAccessorBase {
|
|
|
13
13
|
super(...arguments);
|
|
14
14
|
this.orientation = Orientation.ROW;
|
|
15
15
|
this.variant = 'classic';
|
|
16
|
+
this.size = 'medium';
|
|
16
17
|
this.Orientation = Orientation;
|
|
17
18
|
}
|
|
18
19
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
19
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</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{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;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.classic .description{opacity:1;color:#888da8}.optionContainer.classic .nameAndDescription{color:#515365}.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}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\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"] }] }); }
|
|
20
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: RadioComponent, selector: "klp-form-radio", inputs: { options: "options", orientation: "orientation", variant: "variant", size: "size" }, 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, buttonGray: variant === 'buttonGray', sizeSmall: size === 'small'}\">\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', buttonGray: variant === 'buttonGray', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</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}.componentContainer.horizontallyOriented.buttonGray .optionContainer:first-child{border-radius:5px}.componentContainer.horizontallyOriented.buttonGray .optionContainer:last-child{border-radius:5px}.componentContainer.buttonGray{background:#eaecf0;border-radius:5px;display:inline-block}.componentContainer.sizeSmall .optionContainer{padding:.4rem .8rem}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;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.classic .description{opacity:1;color:#888da8}.optionContainer.classic .nameAndDescription{color:#515365}.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}.optionContainer.buttonGray{position:relative;cursor:pointer;padding:10px 14px;margin:2px;color:#515365;background:#eaecf0;border-radius:5px}.optionContainer.buttonGray.isSelected{background:#fff;color:#101828}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\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"] }] }); }
|
|
20
21
|
}
|
|
21
22
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RadioComponent, decorators: [{
|
|
22
23
|
type: Component,
|
|
23
|
-
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=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</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{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;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.classic .description{opacity:1;color:#888da8}.optionContainer.classic .nameAndDescription{color:#515365}.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}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"] }]
|
|
24
|
+
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, buttonGray: variant === 'buttonGray', sizeSmall: size === 'small'}\">\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', buttonGray: variant === 'buttonGray', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</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}.componentContainer.horizontallyOriented.buttonGray .optionContainer:first-child{border-radius:5px}.componentContainer.horizontallyOriented.buttonGray .optionContainer:last-child{border-radius:5px}.componentContainer.buttonGray{background:#eaecf0;border-radius:5px;display:inline-block}.componentContainer.sizeSmall .optionContainer{padding:.4rem .8rem}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;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.classic .description{opacity:1;color:#888da8}.optionContainer.classic .nameAndDescription{color:#515365}.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}.optionContainer.buttonGray{position:relative;cursor:pointer;padding:10px 14px;margin:2px;color:#515365;background:#eaecf0;border-radius:5px}.optionContainer.buttonGray.isSelected{background:#fff;color:#101828}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"] }]
|
|
24
25
|
}], propDecorators: { options: [{
|
|
25
26
|
type: Input
|
|
26
27
|
}], orientation: [{
|
|
27
28
|
type: Input
|
|
28
29
|
}], variant: [{
|
|
29
30
|
type: Input
|
|
31
|
+
}], size: [{
|
|
32
|
+
type: Input
|
|
30
33
|
}] } });
|
|
31
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
34
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xpcHBhL25neC1lbmhhbmN5LWZvcm1zL3NyYy9saWIvZWxlbWVudHMvcmFkaW8vcmFkaW8uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xpcHBhL25neC1lbmhhbmN5LWZvcm1zL3NyYy9saWIvZWxlbWVudHMvcmFkaW8vcmFkaW8uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDaEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sc0RBQXNELENBQUM7OztBQUV6RixNQUFNLENBQU4sSUFBWSxXQUdYO0FBSEQsV0FBWSxXQUFXO0lBQ3RCLGdDQUFpQixDQUFBO0lBQ2pCLDBCQUFXLENBQUE7QUFDWixDQUFDLEVBSFcsV0FBVyxLQUFYLFdBQVcsUUFHdEI7QUFlRCxNQUFNLE9BQU8sY0FBZSxTQUFRLGlCQUF5QjtJQU43RDs7UUFRVSxnQkFBVyxHQUFnQixXQUFXLENBQUMsR0FBRyxDQUFDO1FBQzNDLFlBQU8sR0FBd0MsU0FBUyxDQUFDO1FBQ3pELFNBQUksR0FBd0IsUUFBUSxDQUFDO1FBQ3ZDLGdCQUFXLEdBQUcsV0FBVyxDQUFDO0tBQ2pDOzhHQU5ZLGNBQWM7a0dBQWQsY0FBYyx1SUFGZixDQUFDLEVBQUUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLFdBQVcsRUFBRSxjQUFjLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxDQUFDLGlEQ3BCdEYsKytCQWtCQTs7MkZESWEsY0FBYztrQkFOMUIsU0FBUzsrQkFDQyxnQkFBZ0IsYUFHZixDQUFDLEVBQUUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLFdBQVcsZ0JBQWdCLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxDQUFDOzhCQUc1RSxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IFZhbHVlQWNjZXNzb3JCYXNlIH0gZnJvbSAnLi4vdmFsdWUtYWNjZXNzb3ItYmFzZS92YWx1ZS1hY2Nlc3Nvci1iYXNlLmNvbXBvbmVudCc7XG5cbmV4cG9ydCBlbnVtIE9yaWVudGF0aW9uIHtcblx0Q09MVU1OID0gJ2NvbHVtbicsXG5cdFJPVyA9ICdyb3cnXG59XG5leHBvcnQgdHlwZSBSYWRpb09wdGlvbnMgPSBBcnJheTxSYWRpb09wdGlvbj47XG5leHBvcnQgdHlwZSBSYWRpb09wdGlvbiA9IHtcblx0aWQ6IGFueTtcblx0bmFtZTogc3RyaW5nO1xuXHRkZXNjcmlwdGlvbj86IHN0cmluZztcbn07XG5cblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAna2xwLWZvcm0tcmFkaW8nLFxuXHR0ZW1wbGF0ZVVybDogJy4vcmFkaW8uY29tcG9uZW50Lmh0bWwnLFxuXHRzdHlsZVVybHM6IFsnLi9yYWRpby5jb21wb25lbnQuc2NzcyddLFxuXHRwcm92aWRlcnM6IFt7IHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLCB1c2VFeGlzdGluZzogUmFkaW9Db21wb25lbnQsIG11bHRpOiB0cnVlIH1dLFxufSlcbmV4cG9ydCBjbGFzcyBSYWRpb0NvbXBvbmVudCBleHRlbmRzIFZhbHVlQWNjZXNzb3JCYXNlPHN0cmluZz57XG5cdEBJbnB1dCgpIG9wdGlvbnM6IFJhZGlvT3B0aW9ucztcblx0QElucHV0KCkgb3JpZW50YXRpb246IE9yaWVudGF0aW9uID0gT3JpZW50YXRpb24uUk9XO1xuXHRASW5wdXQoKSB2YXJpYW50OiAnY2xhc3NpYycgfCAnYnV0dG9uJyB8ICdidXR0b25HcmF5JyA9ICdjbGFzc2ljJztcblx0QElucHV0KCkgc2l6ZTogJ3NtYWxsJyB8ICdtZWRpdW0nICA9ICdtZWRpdW0nO1xuXHRwdWJsaWMgT3JpZW50YXRpb24gPSBPcmllbnRhdGlvbjtcbn1cblxuIiwiPGRpdiBjbGFzcz1cImNvbXBvbmVudENvbnRhaW5lclwiIFtuZ0NsYXNzXT1cInsndmVydGljYWxseU9yaWVudGVkJzogb3JpZW50YXRpb24gPT09IE9yaWVudGF0aW9uLkNPTFVNTiwgJ2hvcml6b250YWxseU9yaWVudGVkJzogb3JpZW50YXRpb24gPT09IE9yaWVudGF0aW9uLlJPVywgYnV0dG9uR3JheTogdmFyaWFudCA9PT0gJ2J1dHRvbkdyYXknLCBzaXplU21hbGw6IHNpemUgPT09ICdzbWFsbCd9XCI+XG5cdDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBvcHRpb25zXCI+XG5cdFx0PGJ1dHRvbiBjbGFzcz1cIm9wdGlvbkNvbnRhaW5lclwiXG5cdFx0XHRbbmdDbGFzc109XCJ7Y2xhc3NpYzogdmFyaWFudCA9PT0gJ2NsYXNzaWMnLCBidXR0b246IHZhcmlhbnQgPT09ICdidXR0b24nLCBidXR0b25HcmF5OiB2YXJpYW50ID09PSAnYnV0dG9uR3JheScsIGlzU2VsZWN0ZWQ6IGlubmVyVmFsdWUgPT09IG9wdGlvbi5pZH1cIlxuXHRcdFx0KGNsaWNrKT1cInNldElubmVyVmFsdWVBbmROb3RpZnkob3B0aW9uLmlkKVwiXG5cdFx0PlxuXHRcdFx0PGRpdiBjbGFzcz1cInJhZGlvQW5kTmFtZVwiPlxuXHRcdFx0XHQ8ZGl2IGNsYXNzPVwic2VsZWN0ZWRSYWRpb0J0bkNvbnRhaW5lclwiICpuZ0lmPVwidmFyaWFudCA9PT0gJ2NsYXNzaWMnXCI+XG5cdFx0XHRcdFx0PGRpdiBjbGFzcz1cInNlbGVjdGVkXCIgKm5nSWY9XCJpbm5lclZhbHVlID09PSBvcHRpb24uaWRcIj48L2Rpdj5cblx0XHRcdFx0PC9kaXY+XG5cdFx0XHRcdDxkaXYgY2xhc3M9XCJuYW1lQW5kRGVzY3JpcHRpb25cIj5cblx0XHRcdFx0XHQ8ZGl2Pnt7b3B0aW9uLm5hbWV9fTwvZGl2PlxuXHRcdFx0XHRcdDxkaXYgY2xhc3M9XCJkZXNjcmlwdGlvblwiICpuZ0lmPVwib3B0aW9uLmRlc2NyaXB0aW9uXCI+e3tvcHRpb24uZGVzY3JpcHRpb259fTwvZGl2PlxuXHRcdFx0XHQ8L2Rpdj5cblx0XHRcdDwvZGl2PlxuXHRcdDwvYnV0dG9uPlxuXHQ8L25nLWNvbnRhaW5lcj5cbjwvZGl2PlxuIl19
|
|
@@ -2755,20 +2755,23 @@ class RadioComponent extends ValueAccessorBase {
|
|
|
2755
2755
|
super(...arguments);
|
|
2756
2756
|
this.orientation = Orientation.ROW;
|
|
2757
2757
|
this.variant = 'classic';
|
|
2758
|
+
this.size = 'medium';
|
|
2758
2759
|
this.Orientation = Orientation;
|
|
2759
2760
|
}
|
|
2760
2761
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2761
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</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{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;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.classic .description{opacity:1;color:#888da8}.optionContainer.classic .nameAndDescription{color:#515365}.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}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\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"] }] }); }
|
|
2762
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: RadioComponent, selector: "klp-form-radio", inputs: { options: "options", orientation: "orientation", variant: "variant", size: "size" }, 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, buttonGray: variant === 'buttonGray', sizeSmall: size === 'small'}\">\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', buttonGray: variant === 'buttonGray', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</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}.componentContainer.horizontallyOriented.buttonGray .optionContainer:first-child{border-radius:5px}.componentContainer.horizontallyOriented.buttonGray .optionContainer:last-child{border-radius:5px}.componentContainer.buttonGray{background:#eaecf0;border-radius:5px;display:inline-block}.componentContainer.sizeSmall .optionContainer{padding:.4rem .8rem}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;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.classic .description{opacity:1;color:#888da8}.optionContainer.classic .nameAndDescription{color:#515365}.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}.optionContainer.buttonGray{position:relative;cursor:pointer;padding:10px 14px;margin:2px;color:#515365;background:#eaecf0;border-radius:5px}.optionContainer.buttonGray.isSelected{background:#fff;color:#101828}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\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"] }] }); }
|
|
2762
2763
|
}
|
|
2763
2764
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RadioComponent, decorators: [{
|
|
2764
2765
|
type: Component,
|
|
2765
|
-
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=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</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{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;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.classic .description{opacity:1;color:#888da8}.optionContainer.classic .nameAndDescription{color:#515365}.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}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"] }]
|
|
2766
|
+
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, buttonGray: variant === 'buttonGray', sizeSmall: size === 'small'}\">\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', buttonGray: variant === 'buttonGray', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</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}.componentContainer.horizontallyOriented.buttonGray .optionContainer:first-child{border-radius:5px}.componentContainer.horizontallyOriented.buttonGray .optionContainer:last-child{border-radius:5px}.componentContainer.buttonGray{background:#eaecf0;border-radius:5px;display:inline-block}.componentContainer.sizeSmall .optionContainer{padding:.4rem .8rem}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;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.classic .description{opacity:1;color:#888da8}.optionContainer.classic .nameAndDescription{color:#515365}.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}.optionContainer.buttonGray{position:relative;cursor:pointer;padding:10px 14px;margin:2px;color:#515365;background:#eaecf0;border-radius:5px}.optionContainer.buttonGray.isSelected{background:#fff;color:#101828}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"] }]
|
|
2766
2767
|
}], propDecorators: { options: [{
|
|
2767
2768
|
type: Input
|
|
2768
2769
|
}], orientation: [{
|
|
2769
2770
|
type: Input
|
|
2770
2771
|
}], variant: [{
|
|
2771
2772
|
type: Input
|
|
2773
|
+
}], size: [{
|
|
2774
|
+
type: Input
|
|
2772
2775
|
}] } });
|
|
2773
2776
|
|
|
2774
2777
|
const triangleSize = '12px';
|