@ipi-soft/ng-components
Version:
Custom Angular Components
65 lines (61 loc) • 11.6 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output } from '@angular/core';
import { NgClass, NgTemplateOutlet } from '@angular/common';
import * as i1 from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TooltipPosition, IpiTooltipDirective } from '@ipi-soft/ng-components/tooltip';
class IpiCheckboxComponent {
constructor(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
this.checked = false;
this.disabled = false;
this.tooltip = null;
this.options = null;
this.clickChange = new EventEmitter();
this.tooltipPosition = TooltipPosition;
}
ngAfterViewInit() {
this.checkIfControlDisabled();
}
ngOnDestroy() {
if (this.controlSubscription) {
this.controlSubscription.unsubscribe();
}
}
onChange() {
this.clickChange.emit(this.checked);
}
checkIfControlDisabled() {
if (!this.options || !this.options.formGroup || !this.options.formControlName || !this.options.formGroup.get(this.options.formControlName)) {
return;
}
this.disabled = this.options.formGroup.controls[this.options.formControlName].disabled;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: IpiCheckboxComponent, isStandalone: true, selector: "ipi-checkbox", inputs: { checked: "checked", disabled: "disabled", tooltip: "tooltip", options: "options" }, outputs: { clickChange: "clickChange" }, ngImport: i0, template: "@if (options && options.formGroup && options.formControlName) {\n <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n <div class=\"checkbox-svg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n} @else {\n <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n <div class=\"checkbox-svg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n \n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n}\n\n<ng-template #content>\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (tooltip) {\n <div class=\"tooltip-svg\">\n <svg [ipiTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g stroke=\"#fff\">\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n </div>\n }\n</ng-template>\n", styles: [":host{touch-action:manipulation}.checkbox{display:flex;align-items:center;position:relative;cursor:pointer}.checkbox.disabled{opacity:var(--ipi-checkbox-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.checkbox span{color:var(--ipi-checkbox-text-color, #0B1222);text-wrap:wrap;word-break:break-all;font-size:var(--ipi-checkbox-font-size, 14px)}.checkbox span:not(:empty){margin:0 4px 0 8px}.checkbox input[type=checkbox]{width:20px;min-width:20px;height:20px;display:block}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;cursor:pointer;outline:var(--ipi-checkbox-outline-color, none);background-color:var(--ipi-checkbox-background-color, #F7F8FB);border:1px solid var(--ipi-checkbox-border-color, #E9E9E9);border-radius:4px;transition:box-shadow .3s,border .25s;box-shadow:inset 0 0 0 0 var(--ipi-checkbox-border-color);margin:0}.checkbox.checked input[type=checkbox]{box-shadow:inset 0 0 0 10px var(--ipi-checkbox-box-shadow-color, #F96138)}.checkbox-svg{width:20px;height:20px;position:absolute}.checkbox .checkbox-svg svg{position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%)}.checkbox .checkbox-svg svg path{fill:none;stroke:none;pointer-events:none;stroke:transparent;stroke-linecap:round;stroke-linejoin:round}.checkbox.checked .checkbox-svg svg path{stroke:var(--ipi-checkbox-arrow-color, #FFFFFF)}.tooltip-svg{width:16px;height:16px}.tooltip-svg g{stroke:var(--ipi-checkbox-tooltip-icon-stroke, #FFFFFF)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IpiTooltipDirective, selector: "[ipiTooltip]", inputs: ["ipiTooltip", "tooltipPosition"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiCheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'ipi-checkbox', imports: [
NgClass,
FormsModule,
NgTemplateOutlet,
IpiTooltipDirective,
ReactiveFormsModule,
], template: "@if (options && options.formGroup && options.formControlName) {\n <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n <div class=\"checkbox-svg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n} @else {\n <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n <div class=\"checkbox-svg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n \n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n}\n\n<ng-template #content>\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (tooltip) {\n <div class=\"tooltip-svg\">\n <svg [ipiTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g stroke=\"#fff\">\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n </div>\n }\n</ng-template>\n", styles: [":host{touch-action:manipulation}.checkbox{display:flex;align-items:center;position:relative;cursor:pointer}.checkbox.disabled{opacity:var(--ipi-checkbox-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.checkbox span{color:var(--ipi-checkbox-text-color, #0B1222);text-wrap:wrap;word-break:break-all;font-size:var(--ipi-checkbox-font-size, 14px)}.checkbox span:not(:empty){margin:0 4px 0 8px}.checkbox input[type=checkbox]{width:20px;min-width:20px;height:20px;display:block}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;cursor:pointer;outline:var(--ipi-checkbox-outline-color, none);background-color:var(--ipi-checkbox-background-color, #F7F8FB);border:1px solid var(--ipi-checkbox-border-color, #E9E9E9);border-radius:4px;transition:box-shadow .3s,border .25s;box-shadow:inset 0 0 0 0 var(--ipi-checkbox-border-color);margin:0}.checkbox.checked input[type=checkbox]{box-shadow:inset 0 0 0 10px var(--ipi-checkbox-box-shadow-color, #F96138)}.checkbox-svg{width:20px;height:20px;position:absolute}.checkbox .checkbox-svg svg{position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%)}.checkbox .checkbox-svg svg path{fill:none;stroke:none;pointer-events:none;stroke:transparent;stroke-linecap:round;stroke-linejoin:round}.checkbox.checked .checkbox-svg svg path{stroke:var(--ipi-checkbox-arrow-color, #FFFFFF)}.tooltip-svg{width:16px;height:16px}.tooltip-svg g{stroke:var(--ipi-checkbox-tooltip-icon-stroke, #FFFFFF)}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { checked: [{
type: Input
}], disabled: [{
type: Input
}], tooltip: [{
type: Input
}], options: [{
type: Input
}], clickChange: [{
type: Output
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { IpiCheckboxComponent };
//# sourceMappingURL=ipi-soft-ng-components-checkbox.mjs.map