kwikui
Version:
KwikID's UI Component Library in Angular
1,050 lines (1,029 loc) • 526 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, forwardRef, Pipe, ViewChild, Injectable, ChangeDetectionStrategy, Directive, HostListener, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { isEmptyValue, isNotEmptyValue, isNull, checkObjectKeyExists, logMethod, isObject, isBoolean, isVideo, isPdf, isImage } from 'kwikid-toolkit';
import * as i2 from '@taiga-ui/core';
import { TUI_SANITIZER, TUI_NUMBER_FORMAT, TuiButtonModule, TuiCalendarModule, TuiHintModule, TuiPrimitiveYearMonthPaginationModule, TuiTextfieldControllerModule, TuiLabelModule, TuiSvgModule, TuiDropdownModule, TuiDataListModule, TuiFormatNumberPipeModule, TuiPrimitiveTextfieldModule, TuiRootModule, TuiAlertModule } from '@taiga-ui/core';
import * as i2$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/forms';
import { FormControl, FormGroup, NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i3$2 from '@taiga-ui/cdk';
import { TUI_FIRST_DAY, TUI_LAST_DAY, TUI_DATE_FORMAT, TUI_DATE_SEPARATOR, TuiDay, TuiLetModule } from '@taiga-ui/cdk';
import { Subscription, BehaviorSubject, Subject } from 'rxjs';
import { distinctUntilChanged, debounceTime } from 'rxjs/operators';
import * as i1$1 from '@taiga-ui/kit';
import { TUI_INPUT_PASSWORD_OPTIONS, TUI_INPUT_PASSWORD_DEFAULT_OPTIONS, TuiCheckboxModule, TuiCheckboxBlockModule, TuiCheckboxLabeledModule, TuiRatingModule, TuiInputDateRangeModule, TuiUnfinishedValidatorModule, TuiInputDateModule, TuiInputFilesModule, TuiMarkerIconModule, TuiInputNumberModule, TuiInputPasswordModule, TuiInputPhoneModule, TuiRadioListModule, TuiComboBoxModule, TuiDataListWrapperModule, TuiFilterByInputPipeModule, TuiSelectModule, TuiInputSliderModule, TuiInputTimeModule, TuiInputModule, TuiTextAreaModule, TuiStepperModule, TuiProgressModule } from '@taiga-ui/kit';
import * as i1 from '@angular/platform-browser';
import { NgDompurifySanitizer } from '@tinkoff/ng-dompurify';
import * as i3$1 from '@taiga-ui/kit/components/files';
import { trigger, transition, style, animate } from '@angular/animations';
import * as i1$2 from '@taiga-ui/addon-table';
import { tuiTablePaginationOptionsProvider, TuiTableModule, TuiTablePaginationModule } from '@taiga-ui/addon-table';
import { __decorate } from 'tslib';
import * as i1$3 from 'ngx-lottie';
import { LottieModule } from 'ngx-lottie';
import player from 'lottie-web';
/**
* @description Handles error message generation
*
* @param {string} key - Key represents attribute name of button.
* @param {string} value - Value represents attribute value received from the input.
*/
const throwErrorMessage = (componentName, id, key, value, DEFAULT_VALUES) => {
console.error(`${componentName} with ID '${id}' has incorrect type/value for '${key}' property. Received '${value}' of type '${typeof value}'. Using default value '${DEFAULT_VALUES}' of type '${typeof DEFAULT_VALUES}'.`);
};
// Button Appearence
var EKwikUIButtonAppearance;
(function (EKwikUIButtonAppearance) {
EKwikUIButtonAppearance["PRIMARY"] = "primary";
EKwikUIButtonAppearance["ACCENT"] = "accent";
EKwikUIButtonAppearance["SECONDARY"] = "secondary";
EKwikUIButtonAppearance["SECONDARY_DESTRUCTIVE"] = "secondary-destructive";
EKwikUIButtonAppearance["OUTLINE"] = "outline";
EKwikUIButtonAppearance["MONO"] = "mono";
EKwikUIButtonAppearance["FLAT"] = "flat";
EKwikUIButtonAppearance["WHITEBLOCK"] = "whiteblock";
EKwikUIButtonAppearance["WHITEBLOCK_ACTIVE"] = "whiteblock-active";
EKwikUIButtonAppearance["ICON"] = "icon";
})(EKwikUIButtonAppearance || (EKwikUIButtonAppearance = {}));
const VKwikUIButtonAppearance = [
EKwikUIButtonAppearance.PRIMARY,
EKwikUIButtonAppearance.ACCENT,
EKwikUIButtonAppearance.SECONDARY,
EKwikUIButtonAppearance.SECONDARY_DESTRUCTIVE,
EKwikUIButtonAppearance.OUTLINE,
EKwikUIButtonAppearance.MONO,
EKwikUIButtonAppearance.FLAT,
EKwikUIButtonAppearance.WHITEBLOCK,
EKwikUIButtonAppearance.WHITEBLOCK_ACTIVE,
EKwikUIButtonAppearance.ICON
];
// Button Type
var EKwikUIButtonType;
(function (EKwikUIButtonType) {
EKwikUIButtonType["BUTTON"] = "button";
EKwikUIButtonType["SUBMIT"] = "submit";
EKwikUIButtonType["RESET"] = "reset";
})(EKwikUIButtonType || (EKwikUIButtonType = {}));
const VKwikUIButtonType = [
EKwikUIButtonType.BUTTON,
EKwikUIButtonType.SUBMIT,
EKwikUIButtonType.RESET
];
// Button Shape
var EKwikUIButtonShape;
(function (EKwikUIButtonShape) {
EKwikUIButtonShape["SQUARE"] = "square";
EKwikUIButtonShape["ROUNDED"] = "rounded";
})(EKwikUIButtonShape || (EKwikUIButtonShape = {}));
const VKwikUIButtonShape = [
null,
EKwikUIButtonShape.SQUARE,
EKwikUIButtonShape.ROUNDED
];
// Button Size
var EKwikUIButtonSize;
(function (EKwikUIButtonSize) {
EKwikUIButtonSize["XS"] = "xs";
EKwikUIButtonSize["S"] = "s";
EKwikUIButtonSize["M"] = "m";
EKwikUIButtonSize["L"] = "l";
EKwikUIButtonSize["XL"] = "xl";
})(EKwikUIButtonSize || (EKwikUIButtonSize = {}));
const VKwikUIButtonSize = [
EKwikUIButtonSize.XS,
EKwikUIButtonSize.S,
EKwikUIButtonSize.M,
EKwikUIButtonSize.L,
EKwikUIButtonSize.XL
];
const DEFAULT_VALUES$u = {
appearance: EKwikUIButtonAppearance.PRIMARY,
class: "",
disabled: false,
icon: "",
iconRight: "",
id: "button",
label: "",
shape: null,
showLoader: false,
size: EKwikUIButtonSize.M,
styles: "",
type: EKwikUIButtonType.BUTTON,
pseudoHover: null
};
const VALIDATE_KEY_VALUES$u = {
appearance: true,
class: true,
disabled: true,
icon: true,
iconRight: true,
id: true,
label: true,
shape: true,
showLoader: true,
size: true,
styles: true,
type: true
};
const isValidKeyValue$u = (key, value) => {
const isBoolean = (x) => typeof x === "boolean";
const isString = (x) => typeof x === "string";
const methods = {
appearance: (x) => VKwikUIButtonAppearance.includes(x),
class: isString,
disabled: isBoolean,
icon: isString,
iconRight: isString,
id: isString,
label: isString,
shape: (x) => VKwikUIButtonShape.includes(x),
showLoader: isBoolean,
size: (x) => VKwikUIButtonSize.includes(x),
styles: isString,
type: (x) => VKwikUIButtonType.includes(x)
};
return methods[key] && methods[key](value);
};
class KwikUIButtonComponent {
constructor() {
this.appearance = DEFAULT_VALUES$u.appearance;
this.class = DEFAULT_VALUES$u.class;
this.disabled = DEFAULT_VALUES$u.disabled;
this.icon = DEFAULT_VALUES$u.icon;
this.iconRight = DEFAULT_VALUES$u.iconRight;
this.id = DEFAULT_VALUES$u.id;
this.label = DEFAULT_VALUES$u.label;
this.shape = DEFAULT_VALUES$u.shape;
this.showLoader = DEFAULT_VALUES$u.showLoader;
this.size = DEFAULT_VALUES$u.size;
this.styles = DEFAULT_VALUES$u.styles;
this.type = DEFAULT_VALUES$u.type;
this.pseudoHover = DEFAULT_VALUES$u.pseudoHover;
this.onClick = new EventEmitter();
this.showIconButton = false;
}
ngOnInit() {
this.evaluateShowIconButton();
}
ngOnChanges(changes) {
for (const change of Object.entries(changes)) {
const key = change[0];
const value = change[1].currentValue;
this.validateInputProperty(key, value);
}
this.evaluateShowIconButton();
}
validateInputProperty(key, value) {
if (VALIDATE_KEY_VALUES$u[key] && !isValidKeyValue$u(key, value)) {
this[key] = DEFAULT_VALUES$u[key];
throwErrorMessage("kwikui-button", this.id, key, value, DEFAULT_VALUES$u[key]);
}
}
handleOnClick(e) {
this.onClick.emit(e);
}
evaluateShowIconButton() {
this.showIconButton =
isEmptyValue(this.label) &&
isEmptyValue(this.iconRight) &&
isNotEmptyValue(this.icon);
}
}
/** @nocollapse */ KwikUIButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUIButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikUIButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikUIButtonComponent, selector: "kwikui-button", inputs: { appearance: "appearance", class: "class", disabled: "disabled", icon: "icon", iconRight: "iconRight", id: "id", label: "label", shape: "shape", showLoader: "showLoader", size: "size", styles: "styles", type: "type", pseudoHover: "pseudoHover" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: "<button\n *ngIf=\"!showIconButton; else iconButtonTemplate\"\n tuiButton\n [appearance]=\"appearance\"\n [class]=\"class\"\n [disabled]=\"disabled\"\n [icon]=\"icon\"\n [iconRight]=\"iconRight\"\n [id]=\"id\"\n [nativeId]=\"id\"\n [shape]=\"shape\"\n [showLoader]=\"showLoader\"\n [size]=\"size\"\n [style]=\"styles\"\n [type]=\"type\"\n [pseudoHover]=\"pseudoHover\"\n (click)=\"handleOnClick($event)\"\n>\n {{ label }}\n</button>\n\n<ng-template #iconButtonTemplate>\n <button\n tuiIconButton\n [appearance]=\"appearance\"\n [class]=\"class\"\n [disabled]=\"disabled\"\n [icon]=\"icon\"\n [id]=\"id\"\n [nativeId]=\"id\"\n [shape]=\"shape\"\n [showLoader]=\"showLoader\"\n [size]=\"size\"\n [style]=\"styles\"\n [type]=\"type\"\n [pseudoHover]=\"pseudoHover\"\n (click)=\"handleOnClick($event)\"\n ></button>\n</ng-template>\n", styles: [".w-100{width:100%}button{margin:0}.view-button-underline:hover{background:none;text-decoration:underline;-webkit-text-decoration-color:var(--tui-primary);text-decoration-color:var(--tui-primary)}\n"], components: [{ type: i2.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUIButtonComponent, decorators: [{
type: Component,
args: [{
selector: "kwikui-button",
templateUrl: "./button.component.html",
styleUrls: ["./button.component.scss"]
}]
}], ctorParameters: function () { return []; }, propDecorators: { appearance: [{
type: Input
}], class: [{
type: Input
}], disabled: [{
type: Input
}], icon: [{
type: Input
}], iconRight: [{
type: Input
}], id: [{
type: Input
}], label: [{
type: Input
}], shape: [{
type: Input
}], showLoader: [{
type: Input
}], size: [{
type: Input
}], styles: [{
type: Input
}], type: [{
type: Input
}], pseudoHover: [{
type: Input
}], onClick: [{
type: Output
}] } });
const DEFAULT_VALUES$t = {
disabled: false,
disableItems: () => !1,
formControlName: "form_calendar_name",
id: "calendar",
isShowAdjacentValues: true,
min: TUI_FIRST_DAY,
max: TUI_LAST_DAY,
value: null
};
const VALIDATE_KEY_VALUES$t = {
disabled: true,
disableItems: true,
formControlName: true,
id: true,
isShowAdjacentValues: true,
min: true,
max: true
};
const isValidKeyValue$t = (key, value) => {
const isBoolean = (x) => typeof x === "boolean";
const isFunction = (x) => typeof x === "function";
const isString = (x) => typeof x === "string";
const validateDate = (date) => {
return (date.hasOwnProperty("day") &&
date.hasOwnProperty("month") &&
date.hasOwnProperty("year"));
};
const methods = {
disabled: isBoolean,
disableItems: isFunction,
formControlName: isString,
id: isString,
isShowAdjacentValues: isBoolean,
max: validateDate,
min: validateDate
};
return methods[key] && methods[key](value);
};
class KwikUICalendarComponent {
constructor() {
this.disabled = DEFAULT_VALUES$t.disabled;
this.disableItems = DEFAULT_VALUES$t.disableItems;
this.formControl = new FormControl({});
this.formControlName = DEFAULT_VALUES$t.formControlName;
this.id = DEFAULT_VALUES$t.id;
this.isShowAdjacentValues = DEFAULT_VALUES$t.isShowAdjacentValues;
this.min = DEFAULT_VALUES$t.min;
this.max = DEFAULT_VALUES$t.max;
this.value = DEFAULT_VALUES$t.value;
this.onDayClick = new EventEmitter();
this.onMonthChange = new EventEmitter();
this.getKeyValue = new EventEmitter();
this.formGroup = new FormGroup({});
}
ngOnInit() {
if (isNotEmptyValue(this.formControl.value)) {
this.value = this.formControl.value;
}
}
ngOnChanges(changes) {
const verifyChange = (key) => {
return changes.hasOwnProperty(key) && !changes[key].firstChange;
};
for (const change of Object.entries(changes)) {
const key = change[0];
const value = change[1].currentValue;
this.validateInputProperty(key, value);
}
if (verifyChange("formControl")) {
this.formControl = changes.formControl.currentValue;
this.value = this.formControl.value;
}
if (verifyChange("disabled")) {
this.disabled = Boolean(changes.disabled.currentValue);
this.setDisabled();
}
}
validateInputProperty(key, value) {
if (VALIDATE_KEY_VALUES$t[key] && !isValidKeyValue$t(key, value)) {
this[key] = DEFAULT_VALUES$t[key];
throwErrorMessage("kwikui-calendar", this.id, key, value, DEFAULT_VALUES$t[key]);
}
}
setDisabled() {
if (this.formGroup.controls[this.formControlName] !== undefined) {
if (this.disabled === true) {
this.formGroup.controls[this.formControlName].disable({
emitEvent: false
});
}
else {
this.formGroup.controls[this.formControlName].enable({
emitEvent: false
});
}
}
}
handleOnDayClick(day) {
this.value = day;
this.emitEvent(this.onDayClick, day);
this.emitEvent(this.getKeyValue, {
key: this.formControlName,
value: this.value
});
}
handleOnMonthChange(month) {
this.emitEvent(this.onMonthChange, month);
}
emitEvent(event, data) {
event.emit(data);
}
/** Method Implementations for Abstract Control */
writeValue(value) { }
registerOnChange(fn) { }
registerOnTouched(fn) { }
setDisabledState(isDisabled) { }
}
/** @nocollapse */ KwikUICalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUICalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikUICalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikUICalendarComponent, selector: "kwikui-calendar", inputs: { disabled: "disabled", disableItems: "disableItems", formControl: "formControl", formControlName: "formControlName", id: "id", isShowAdjacentValues: "isShowAdjacentValues", min: "min", max: "max", value: "value" }, outputs: { onDayClick: "onDayClick", onMonthChange: "onMonthChange", getKeyValue: "getKeyValue" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((() => KwikUICalendarComponent)),
multi: true
}
], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"calendar\"\n [class.disabled]=\"disabled\"\n [formGroup]=\"formGroup\"\n>\n <tui-calendar\n [disabledItemHandler]=\"disableItems\"\n [min]=\"min\"\n [max]=\"max\"\n [showAdjacent]=\"isShowAdjacentValues\"\n [value]=\"value\"\n (dayClick)=\"handleOnDayClick($event)\"\n (monthChange)=\"handleOnMonthChange($event)\"\n ></tui-calendar\n></div>\n", styles: [".calendar{width:-moz-fit-content;width:fit-content}.calendar.disabled{opacity:.75;pointer-events:none}\n"], components: [{ type: i2.TuiCalendarComponent, selector: "tui-calendar", inputs: ["initialView", "month", "disabledItemHandler", "min", "max", "minViewedMonth", "maxViewedMonth", "hoveredItem", "showAdjacent", "markerHandler", "value"], outputs: ["dayClick", "monthChange", "hoveredItemChange"] }], directives: [{ type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUICalendarComponent, decorators: [{
type: Component,
args: [{
selector: "kwikui-calendar",
templateUrl: "./calendar.component.html",
styleUrls: ["./calendar.component.scss"],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((() => KwikUICalendarComponent)),
multi: true
}
]
}]
}], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
type: Input
}], disableItems: [{
type: Input
}], formControl: [{
type: Input
}], formControlName: [{
type: Input
}], id: [{
type: Input
}], isShowAdjacentValues: [{
type: Input
}], min: [{
type: Input
}], max: [{
type: Input
}], value: [{
type: Input
}], onDayClick: [{
type: Output
}], onMonthChange: [{
type: Output
}], getKeyValue: [{
type: Output
}] } });
var EKwikUICheckboxSize;
(function (EKwikUICheckboxSize) {
EKwikUICheckboxSize["M"] = "m";
EKwikUICheckboxSize["L"] = "l";
})(EKwikUICheckboxSize || (EKwikUICheckboxSize = {}));
const VKwikUICheckboxSize = [
EKwikUICheckboxSize.M,
EKwikUICheckboxSize.L
];
var EKwikUICheckboxContentAlign;
(function (EKwikUICheckboxContentAlign) {
EKwikUICheckboxContentAlign["LEFT"] = "left";
EKwikUICheckboxContentAlign["RIGHT"] = "right";
})(EKwikUICheckboxContentAlign || (EKwikUICheckboxContentAlign = {}));
const VKwikUICheckboxContentAlign = [
EKwikUICheckboxContentAlign.RIGHT,
EKwikUICheckboxContentAlign.LEFT
];
var EKwikUICheckboxVarient;
(function (EKwikUICheckboxVarient) {
EKwikUICheckboxVarient["BASIC"] = "basic";
EKwikUICheckboxVarient["BLOCK"] = "block";
EKwikUICheckboxVarient["LABELED"] = "labeled";
})(EKwikUICheckboxVarient || (EKwikUICheckboxVarient = {}));
const VKwikUICheckboxVarient = [
EKwikUICheckboxVarient.BASIC,
EKwikUICheckboxVarient.BLOCK,
EKwikUICheckboxVarient.LABELED
];
const DEFAULT_VALUES$s = {
contentAlign: EKwikUICheckboxContentAlign.LEFT,
disabled: false,
focus: false,
formControlName: "form_control_checkbox_labeled",
id: "checkbox_labeled",
invalid: false,
label: "Labeled Checkbox",
placeholder: "Please select Labeled Checkbox",
size: EKwikUICheckboxSize.M,
variant: EKwikUICheckboxVarient.BLOCK
};
const VALIDATE_KEY_VALUES$s = {
contentAlign: true,
disabled: true,
focus: true,
formControlName: true,
id: true,
invalid: true,
label: true,
placeholder: true,
size: true
};
const isValidKeyValue$s = (key, value) => {
const isBoolean = (x) => typeof x === "boolean";
const isString = (x) => typeof x === "string";
const methods = {
contentAlign: (x) => VKwikUICheckboxContentAlign.includes(x),
disabled: isBoolean,
focus: isBoolean,
formControlName: isString,
id: isString,
invalid: isBoolean,
label: isString,
placeholder: isString,
size: (x) => VKwikUICheckboxSize.includes(x)
};
return methods[key] && methods[key](value);
};
class KwikUISafeHtmlPipe {
constructor(sanitizer) {
this.sanitizer = sanitizer;
}
transform(html) {
return this.sanitizer.bypassSecurityTrustHtml(html);
}
}
/** @nocollapse */ KwikUISafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUISafeHtmlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
/** @nocollapse */ KwikUISafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUISafeHtmlPipe, name: "kwikuiSafeHtml" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUISafeHtmlPipe, decorators: [{
type: Pipe,
args: [{
name: "kwikuiSafeHtml"
}]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; } });
class KwikUICheckboxComponent {
constructor() {
this.contentAlign = DEFAULT_VALUES$s.contentAlign;
this.disabled = DEFAULT_VALUES$s.disabled;
this.focus = DEFAULT_VALUES$s.focus;
this.formControl = new FormControl({});
this.formControlName = DEFAULT_VALUES$s.formControlName;
this.id = DEFAULT_VALUES$s.id;
this.invalid = DEFAULT_VALUES$s.invalid;
this.label = DEFAULT_VALUES$s.label;
this.placeholder = DEFAULT_VALUES$s.placeholder;
this.properties = { readOnly: false };
this.size = DEFAULT_VALUES$s.size;
this.validators = { required: true };
this.variant = DEFAULT_VALUES$s.variant;
this.getKeyValue = new EventEmitter();
this.formGroup = new FormGroup({});
this.subscriptions = new Subscription();
}
ngOnInit() {
this.variant = isEmptyValue(this.variant)
? EKwikUICheckboxVarient.LABELED
: this.variant;
if (this.validators.required === true) {
this.formControl.setValidators([Validators.requiredTrue]);
}
this.formGroup.addControl(this.formControlName, this.formControl);
this.focus = this.focus === undefined ? false : this.focus;
this.invalid =
this.invalid === undefined ? false : this.invalid && this.focus;
this.validators = Object.assign({}, this.validators);
this.properties = Object.assign({}, this.properties);
this.setDisabled();
this.subscriptions.add(this.formGroup.controls[this.formControlName].valueChanges
.pipe(distinctUntilChanged()) // makes sure the value has actually changed.
.subscribe((value) => this.handleValueChange(value)));
}
ngOnChanges(changes) {
const verifyChange = (key) => {
return changes.hasOwnProperty(key) && !changes[key].firstChange;
};
for (const change of Object.entries(changes)) {
const key = change[0];
const value = change[1].currentValue;
this.validateInputProperty(key, value);
}
if (verifyChange("formControl")) {
this.formControl = changes.formControl.currentValue;
}
if (verifyChange("invalid")) {
this.invalid = Boolean(changes.invalid.currentValue);
this.setError();
}
if (verifyChange("focus")) {
this.focus = Boolean(changes.focus.currentValue);
}
if (verifyChange("disabled")) {
this.disabled = Boolean(changes.disabled.currentValue);
this.setDisabled();
}
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
// ensure when component is destroyed the subscription is also and not left open.
}
validateInputProperty(key, value) {
if (VALIDATE_KEY_VALUES$s[key] && !isValidKeyValue$s(key, value)) {
this[key] = DEFAULT_VALUES$s[key];
throwErrorMessage("kwikui-checkbox", this.id, key, value, DEFAULT_VALUES$s[key]);
}
}
/**
* @description Handles setting up of error and focus on the input field is it is invalid
*/
setDisabled() {
if (this.formGroup.controls[this.formControlName] !== undefined) {
if (this.disabled === true) {
this.formGroup.controls[this.formControlName].disable({
emitEvent: false
});
}
else {
this.formGroup.controls[this.formControlName].enable({
emitEvent: false
});
}
}
}
/**
* @description Handles setting up of error and focus on the input field is it is invalid
*/
setError() {
if (this.formGroup.controls[this.formControlName] !== undefined &&
this.formGroup.controls[this.formControlName].invalid) {
this.invalid = true;
this.focus = true;
}
else {
this.invalid = false;
this.focus = false;
}
}
/**
* @description Handles firing of 2 events on (keyup) event
*
* @param value
*/
handleValueChange(value) {
if (value === this.formControl.value) {
this.emitEvent(this.getKeyValue, {
key: this.formControlName,
value: this.formControl.value
});
}
}
handleFocusedChange(e) {
if (!this.invalid) {
this.focus = e;
}
}
emitEvent(event, data) {
event.emit(data);
}
/** Method Implementations for Abstract Control */
writeValue(value) { }
registerOnChange(fn) { }
registerOnTouched(fn) { }
setDisabledState(isDisabled) { }
}
/** @nocollapse */ KwikUICheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUICheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikUICheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikUICheckboxComponent, selector: "kwikui-checkbox", inputs: { contentAlign: "contentAlign", disabled: "disabled", focus: "focus", formControl: "formControl", formControlName: "formControlName", id: "id", invalid: "invalid", label: "label", placeholder: "placeholder", properties: "properties", size: "size", validators: "validators", variant: "variant" }, outputs: { getKeyValue: "getKeyValue" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((() => KwikUICheckboxComponent)),
multi: true
}
], usesOnChanges: true, ngImport: i0, template: "<div\n [formGroup]=\"formGroup\"\n *ngIf=\"variant === 'basic'\"\n id=\"checkbox-basic-container\"\n>\n <tui-checkbox\n [formControlName]=\"formControlName\"\n [nativeId]=\"id\"\n [pseudoInvalid]=\"invalid === undefined ? null : invalid\"\n [pseudoFocus]=\"focus ?? null\"\n [readOnly]=\"properties?.readOnly ?? false\"\n [size]=\"size\"\n (focusedChange)=\"handleFocusedChange($event)\"\n >\n <span\n class=\"tui-required\"\n *ngIf=\"validators.required\"\n ></span>\n <span [innerHTML]=\"label | kwikuiSafeHtml\"></span>\n </tui-checkbox>\n</div>\n<div\n [formGroup]=\"formGroup\"\n *ngIf=\"variant === 'labeled'\"\n id=\"checkbox-labeled-container\"\n>\n <tui-checkbox-labeled\n [formControlName]=\"formControlName\"\n [nativeId]=\"id\"\n [pseudoInvalid]=\"invalid === undefined ? null : invalid\"\n [pseudoFocus]=\"focus ?? null\"\n [readOnly]=\"properties?.readOnly ?? false\"\n [size]=\"size\"\n (focusedChange)=\"handleFocusedChange($event)\"\n >\n <div class=\"inner\">\n <div class=\"text\">\n <span\n class=\"tui-required\"\n *ngIf=\"validators.required\"\n ></span>\n <span [innerHTML]=\"label | kwikuiSafeHtml\"></span>\n </div>\n </div>\n </tui-checkbox-labeled>\n</div>\n<div\n [formGroup]=\"formGroup\"\n *ngIf=\"variant === 'block'\"\n id=\"checkbox-block-container\"\n>\n <tui-checkbox-block\n [formControlName]=\"formControlName\"\n [nativeId]=\"id\"\n [pseudoInvalid]=\"invalid === undefined ? null : invalid\"\n [pseudoFocus]=\"focus ?? null\"\n [readOnly]=\"properties?.readOnly ?? false\"\n [size]=\"size\"\n [contentAlign]=\"contentAlign\"\n (focusedChange)=\"handleFocusedChange($event)\"\n >\n <div class=\"inner\">\n <div class=\"text\">\n <span\n class=\"tui-required\"\n *ngIf=\"validators.required\"\n ></span>\n <span [innerHTML]=\"label | kwikuiSafeHtml\"></span>\n </div>\n </div>\n </tui-checkbox-block>\n</div>\n", styles: ["#checkbox-basic-container .inner{margin:0;white-space:normal}#checkbox-basic-container .inner_flex{display:flex;justify-content:space-between;margin:0;width:31.25rem}#checkbox-labeled-container .inner{margin:0;white-space:normal}#checkbox-labeled-container .inner_flex{display:flex;justify-content:space-between;margin:0;width:31.25rem}#checkbox-block-container .inner{margin:.75rem 0;white-space:normal}#checkbox-block-container .inner_flex{display:flex;justify-content:space-between;margin:0;width:31.25rem}\n"], components: [{ type: i1$1.TuiCheckboxComponent, selector: "tui-checkbox", inputs: ["size"] }, { type: i1$1.TuiCheckboxLabeledComponent, selector: "tui-checkbox-labeled", inputs: ["size"] }, { type: i1$1.TuiCheckboxBlockComponent, selector: "tui-checkbox-block", inputs: ["contentAlign", "hideCheckbox", "size"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "kwikuiSafeHtml": KwikUISafeHtmlPipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUICheckboxComponent, decorators: [{
type: Component,
args: [{
selector: "kwikui-checkbox",
templateUrl: "./checkbox.component.html",
styleUrls: ["./checkbox.component.scss"],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((() => KwikUICheckboxComponent)),
multi: true
}
]
}]
}], ctorParameters: function () { return []; }, propDecorators: { contentAlign: [{
type: Input
}], disabled: [{
type: Input
}], focus: [{
type: Input
}], formControl: [{
type: Input
}], formControlName: [{
type: Input
}], id: [{
type: Input
}], invalid: [{
type: Input
}], label: [{
type: Input
}], placeholder: [{
type: Input
}], properties: [{
type: Input
}], size: [{
type: Input
}], validators: [{
type: Input
}], variant: [{
type: Input
}], getKeyValue: [{
type: Output
}] } });
var EKwikUIStarRatingSize;
(function (EKwikUIStarRatingSize) {
EKwikUIStarRatingSize["S"] = "s";
EKwikUIStarRatingSize["M"] = "m";
EKwikUIStarRatingSize["L"] = "l";
})(EKwikUIStarRatingSize || (EKwikUIStarRatingSize = {}));
const VKwikUIStarRatingSize = [
EKwikUIStarRatingSize.S,
EKwikUIStarRatingSize.M,
EKwikUIStarRatingSize.L
];
const DEFAULT_VALUES$r = {
color: "var(--tui-primary)",
disabled: false,
focus: false,
formControlName: "form_control_star_rating",
icon: `<svg xml:space="preserve" width="48px" viewBox="0 0 48 48" version="1.1" id="_x3C_Layer_x3E_" height="48px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g id="star_x2C__favorite"><path id="XMLID_2_" fill="transparent" stroke-width="3" stroke="var(--tui-rating-color)" d="M 23.3 38.6 l -10.9 5.7 c -1.2 0.6 -2.5 -0.4 -2.3 -1.6 l 2.1 -12.1 c 0.1 -0.5 -0.1 -1 -0.4 -1.4 l -8.8 -8.6 c -0.9 -0.9 -0.4 -2.5 0.9 -2.6 l 12.2 -1.8 c 0.5 -0.1 1 -0.4 1.2 -0.8 l 5.5 -11 c 0.6 -1.2 2.2 -1.2 2.8 0 l 5.5 11 c 0.2 0.5 0.7 0.8 1.2 0.8 l 12.2 1.8 c 1.3 0.2 1.8 1.8 0.9 2.6 l -8.8 8.6 c -0.4 0.4 -0.5 0.9 -0.4 1.4 l 2.1 12.1 c 0.2 1.3 -1.1 2.2 -2.3 1.6 l -10.9 -5.7 C 24.3 38.4 23.7 38.4 23.3 38.6 z"></path></g></svg>`,
iconMarked: `<svg xml:space="preserve" width="48px" viewBox="0 0 48 48" version="1.1" id="_x3C_Layer_x3E_" height="48px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g id="star_x2C__favorite"><path id="XMLID_2_" fill="var(--tui-rating-color)" stroke="var(--tui-rating-color)" stroke-width="3" d="M 23.3 38.6 l -10.9 5.7 c -1.2 0.6 -2.5 -0.4 -2.3 -1.6 l 2.1 -12.1 c 0.1 -0.5 -0.1 -1 -0.4 -1.4 l -8.8 -8.6 c -0.9 -0.9 -0.4 -2.5 0.9 -2.6 l 12.2 -1.8 c 0.5 -0.1 1 -0.4 1.2 -0.8 l 5.5 -11 c 0.6 -1.2 2.2 -1.2 2.8 0 l 5.5 11 c 0.2 0.5 0.7 0.8 1.2 0.8 l 12.2 1.8 c 1.3 0.2 1.8 1.8 0.9 2.6 l -8.8 8.6 c -0.4 0.4 -0.5 0.9 -0.4 1.4 l 2.1 12.1 c 0.2 1.3 -1.1 2.2 -2.3 1.6 l -10.9 -5.7 C 24.3 38.4 23.7 38.4 23.3 38.6 z"></path></g></svg>`,
id: "star-rating",
invalid: false,
label: "Star Rating",
max: 5,
min: 0,
placeholder: "Please provide feedback",
size: EKwikUIStarRatingSize.M
};
const VALIDATE_KEY_VALUES$r = {
color: true,
disabled: true,
focus: true,
formControlName: true,
icon: true,
iconMarked: true,
id: true,
invalid: true,
label: true,
max: true,
min: true,
placeholder: true,
size: true
};
const isValidKeyValue$r = (key, value) => {
const isBoolean = (x) => typeof x === "boolean";
const isString = (x) => typeof x === "string";
const isNumber = (x) => typeof x === "number";
const methods = {
color: isString,
disabled: isBoolean,
focus: isBoolean,
formControlName: isString,
icon: isString && isNotEmptyValue,
iconMarked: isString && isNotEmptyValue,
id: isString,
invalid: isBoolean,
label: isString,
max: isNumber,
min: isNumber,
placeholder: isString,
size: (x) => VKwikUIStarRatingSize.includes(x)
};
return methods[key] && methods[key](value);
};
class KwikUIStarRatingComponent {
constructor() {
this.color = DEFAULT_VALUES$r.color;
this.disabled = DEFAULT_VALUES$r.disabled;
this.focus = DEFAULT_VALUES$r.focus;
this.formControl = new FormControl({});
this.formControlName = DEFAULT_VALUES$r.formControlName;
this.icon = DEFAULT_VALUES$r.icon;
this.iconMarked = DEFAULT_VALUES$r.iconMarked;
this.id = DEFAULT_VALUES$r.id;
this.invalid = DEFAULT_VALUES$r.invalid;
this.label = DEFAULT_VALUES$r.label;
this.max = DEFAULT_VALUES$r.max;
this.min = DEFAULT_VALUES$r.min;
this.placeholder = DEFAULT_VALUES$r.placeholder;
this.properties = { readOnly: false };
this.size = DEFAULT_VALUES$r.size;
this.validators = { required: true };
this.getKeyValue = new EventEmitter();
this.formGroup = new FormGroup({});
this.subscriptions = new Subscription();
}
ngOnInit() {
this.formGroup.addControl(this.formControlName, this.formControl);
this.focus = this.focus === undefined ? false : this.focus;
this.invalid =
this.invalid === undefined ? false : this.invalid && this.focus;
this.validators = Object.assign({}, this.validators);
this.properties = Object.assign({}, this.properties);
this.setDisabled();
this.subscriptions.add(this.formGroup.controls[this.formControlName].valueChanges
.pipe(distinctUntilChanged()) // makes sure the value has actually changed.
.subscribe((value) => this.handleValueChange(value)));
}
ngOnChanges(changes) {
const verifyChange = (key) => {
return changes.hasOwnProperty(key) && !changes[key].firstChange;
};
for (const change of Object.entries(changes)) {
const key = change[0];
const value = change[1].currentValue;
this.validateInputProperty(key, value);
}
if (verifyChange("formControl")) {
this.formControl = changes.formControl.currentValue;
}
if (verifyChange("invalid")) {
this.invalid = Boolean(changes.invalid.currentValue);
this.setError();
}
if (verifyChange("focus")) {
this.focus = Boolean(changes.focus.currentValue);
}
if (verifyChange("disabled")) {
this.disabled = Boolean(changes.disabled.currentValue);
this.setDisabled();
}
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
// ensure when component is destroyed the subscription is also and not left open.
}
validateInputProperty(key, value) {
if (VALIDATE_KEY_VALUES$r[key] && !isValidKeyValue$r(key, value)) {
this[key] = DEFAULT_VALUES$r[key];
throwErrorMessage("kwikui-star-rating", this.id, key, value, DEFAULT_VALUES$r[key]);
}
}
/**
* @description Handles setting up of error and focus on the input field is it is invalid
*/
setDisabled() {
if (this.formGroup.controls[this.formControlName] !== undefined) {
if (this.disabled === true) {
this.formGroup.controls[this.formControlName].disable({
emitEvent: false
});
}
else {
this.formGroup.controls[this.formControlName].enable({
emitEvent: false
});
}
}
}
/**
* @description Handles setting up of error and focus on the input field is it is invalid
*/
setError() {
if (this.formGroup.controls[this.formControlName] !== undefined &&
this.formGroup.controls[this.formControlName].invalid) {
this.invalid = true;
this.focus = true;
}
else {
this.invalid = false;
this.focus = false;
}
}
/**
* @description Handles firing of 2 events on (keyup) event
*
* @param value
*/
handleValueChange(value) {
if (value === this.formControl.value) {
this.emitEvent(this.getKeyValue, {
key: this.formControlName,
value: this.formControl.value
});
}
}
handleFocusedChange(e) {
if (!this.invalid) {
this.focus = e;
}
}
emitEvent(event, data) {
event.emit(data);
}
/** Method Implementations for Abstract Control */
writeValue(value) { }
registerOnChange(fn) { }
registerOnTouched(fn) { }
setDisabledState(isDisabled) { }
}
/** @nocollapse */ KwikUIStarRatingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUIStarRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikUIStarRatingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikUIStarRatingComponent, selector: "kwikui-star-rating", inputs: { color: "color", disabled: "disabled", focus: "focus", formControl: "formControl", formControlName: "formControlName", icon: "icon", iconMarked: "iconMarked", id: "id", invalid: "invalid", label: "label", max: "max", min: "min", placeholder: "placeholder", properties: "properties", size: "size", validators: "validators" }, outputs: { getKeyValue: "getKeyValue" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((() => KwikUIStarRatingComponent)),
multi: true
}
], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"kwikui-star-rating-container\"\n [formGroup]=\"formGroup\"\n [class.small]=\"size === 's'\"\n [class.medium]=\"size === 'm'\"\n [class.large]=\"size === 'l'\"\n>\n <tui-rating\n [style.--tui-rating-color]=\"color\"\n [disabled]=\"disabled\"\n [formControl]=\"formControl\"\n [iconFilled]=\"iconMarked\"\n [iconNormal]=\"icon\"\n [max]=\"max\"\n [min]=\"min\"\n [readOnly]=\"properties?.readOnly\"\n ></tui-rating>\n</div>\n", styles: [":host{--tui-rating-color: var(--tui-primary)}:host .small{--tui-rating-size: 1.25rem}:host .medium{--tui-rating-size: 2rem}:host .large{--tui-rating-size: 2.75rem}.kwikui-star-rating-container{display:flex;flex-direction:column;align-items:stretch}.kwikui-star-rating-container>*:not(:last-child){margin-bottom:.5rem}\n"], components: [{ type: i1$1.TuiRatingComponent, selector: "tui-rating", inputs: ["min", "max", "iconNormal", "iconFilled"] }], directives: [{ type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUIStarRatingComponent, decorators: [{
type: Component,
args: [{
selector: "kwikui-star-rating",
templateUrl: "./star-rating.component.html",
styleUrls: ["./star-rating.component.scss"],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((() => KwikUIStarRatingComponent)),
multi: true
}
]
}]
}], ctorParameters: function () { return []; }, propDecorators: { color: [{
type: Input
}], disabled: [{
type: Input
}], focus: [{
type: Input
}], formControl: [{
type: Input
}], formControlName: [{
type: Input
}], icon: [{
type: Input
}], iconMarked: [{
type: Input
}], id: [{
type: Input
}], invalid: [{
type: Input
}], label: [{
type: Input
}], max: [{
type: Input
}], min: [{
type: Input
}], placeholder: [{
type: Input
}], properties: [{
type: Input
}], size: [{
type: Input
}], validators: [{
type: Input
}], getKeyValue: [{
type: Output
}] } });
var EKwikUIImageType;
(function (EKwikUIImageType) {
EKwikUIImageType["BASE64"] = "base64";
EKwikUIImageType["URL"] = "url";
})(EKwikUIImageType || (EKwikUIImageType = {}));
const VKwikUIImageType = [
EKwikUIImageType.BASE64,
EKwikUIImageType.URL
];
var EKwikUIImageLoadingType;
(function (EKwikUIImageLoadingType) {
EKwikUIImageLoadingType["AUTO"] = "auto";
EKwikUIImageLoadingType["LAZY"] = "lazy";
EKwikUIImageLoadingType["EAGER"] = "eager";
})(EKwikUIImageLoadingType || (EKwikUIImageLoadingType = {}));
const VKwikUIImageLoadingType = [
EKwikUIImageLoadingType.AUTO,
EKwikUIImageLoadingType.LAZY,
EKwikUIImageLoadingType.EAGER
];
const DEFAULT_VALUES$q = {
altText: "Image",
class: "",
html: { before: "", after: "" },
id: "",
imageSrc: "",
imageType: EKwikUIImageType.URL,
loadingType: EKwikUIImageLoadingType.AUTO,
styles: ""
};
const VALIDATE_KEY_VALUES$q = {
altText: true,
class: true,
id: true,
imageSrc: true,
imageType: true,
loadingType: true,
styles: true
};
const isValidKeyValue$q = (key, value) => {
const isString = (x) => typeof x === "string";
const methods = {
altText: isString,
class: isString,
id: isString,
imageSrc: isString,
imageType: (x) => VKwikUIImageType.includes(x),
loadingType: (x) => VKwikUIImageLoadingType.includes(x),
styles: isString
};
return methods[key] && methods[key](value);
};
class KwikUIImageComponent {
constructor(domSanitizer) {
this.domSanitizer = domSanitizer;
this.altText = DEFAULT_VALUES$q.altText;
this.class = DEFAULT_VALUES$q.class;
this.html = DEFAULT_VALUES$q.html;
this.id = DEFAULT_VALUES$q.id;
this.imageSrc = DEFAULT_VALUES$q.imageSrc;
this.imageType = DEFAULT_VALUES$q.imageType;
this.loadingType = DEFAULT_VALUES$q.loadingType;
this.styles = DEFAULT_VALUES$q.styles;
this.onClick = new EventEmitter();
}
ngOnInit() {
this.handleImageBasedOnImageType();
}
ngOnChanges(changes) {
const verifyChange = (key) => {
return changes.hasOwnProperty(key) && !changes[key].firstChange;
};
for (const change of Object.entries(changes)) {
const key = change[0];
const value = change[1].currentValue;
this.validateInputProperty(key, value);
}
if (verifyChange("imageSrc")) {
this.imageSrc = changes.imageSrc.currentValue;
this.handleImageBasedOnImageType();
}
if (verifyChange("altText")) {
this.altText = changes.altText.currentValue;
}
if (verifyChange("imageType")) {
this.imageType = changes.imageType.currentValue;
this.handleImageBasedOnImageType();
}
if (verifyChange("loadingType")) {
this.loadingType = changes.loadingType.currentValue;
}
}
validateInputProperty(key, value) {
if (VALIDATE_KEY_VALUES$q[key] && !isValidKeyValue$q(key, value)) {
this[key] = DEFAULT_VALUES$q[key];
throwErrorMessage("kwikui-image", this.id, key, value, DEFAULT_VALUES$q[key]);
}
}
handleOnClick(e) {
this.onClick.emit(e);
}
cleanImageSrc() {
this.imageSrc = this.imageSrc.trim();
}
sanitizeImage() {
this.safeImageSrc = this.domSanitizer.bypassSecurityTrustResourceUrl(this.imageSrc);
}
handleImageBasedOnImageType() {
this.cleanImageSrc();
switch (this.imageType) {
case EKwikUIImageType.BASE64:
if (!this.imageSrc.startsWith("data:image")) {
this.imageSrc = `data:image/png;base64,${this.imageSrc}`;
}
break;
case EKwikUIImageType.URL:
break;
default:
break;
}
this.sanitizeImage();
}
}
/** @nocollapse */ KwikUIImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUIImageComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikUIImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikUIImageComponent, selector: "kwikui-image", inputs: { altText: "altText", class: "class", html: "html", id: "id", imageSrc: "imageSrc", imageType: "imageType", loadingType: "loadingType", styles: "styles" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"image-container\">\n <div [innerHtml]=\"html?.before ?? '' | kwikuiSafeHtml\"></div>\n <img\n [attr.alt]=\"altText\"\n [attr.id]=\"id\"\n [attr.loading]=\"loadingType\"\n [attr.src]=\"safeImageSrc\"\n [class]=\"class\"\n [style]=\"styles\"\n (click)=\"handleOnClick($event)\"\n />\n <div [innerHtml]=\"html?.after ?? '' | kwikuiSafeHtml\"></div>\n</div>\n", styles: [".image-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:space-between;grid-gap:.5rem;gap:.5rem}img{max-width: