xui
Version:
xUI Components for Angular
1,005 lines (977 loc) • 256 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, Injectable, Optional, Inject, Directive, Input, NgModule, Component, ChangeDetectionStrategy, ViewChild, EventEmitter, Output, HostListener, Host, Self, ContentChildren, HostBinding, SkipSelf, ChangeDetectorRef, ElementRef, ANIMATION_MODULE_TYPE } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule, DOCUMENT } from '@angular/common';
import { __decorate, __metadata } from 'tslib';
import { Subject, first, BehaviorSubject, combineLatest, map, filter as filter$1, lastValueFrom } from 'rxjs';
import { filter, mapTo, take } from 'rxjs/operators';
import { coerceBooleanProperty, _isNumberValue, coerceCssPixelValue } from '@angular/cdk/coercion';
import * as i1$1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i2 from '@angular/cdk/portal';
import { TemplatePortal, PortalModule, ComponentPortal } from '@angular/cdk/portal';
import * as i1$2 from '@angular/forms';
import { FormsModule, ReactiveFormsModule, NgControl } from '@angular/forms';
import * as i1$3 from '@angular/cdk/overlay';
import { ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
import * as i4 from '@angular/cdk/a11y';
import { A11yModule } from '@angular/cdk/a11y';
import { CdkMenuModule } from '@angular/cdk/menu';
import { DateTime } from 'luxon';
import * as i1$4 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import * as i1$6 from '@angular/cdk/dialog';
import { DIALOG_DATA, DialogModule } from '@angular/cdk/dialog';
import * as i1$5 from 'ngx-image-cropper';
import { ImageCropperModule } from 'ngx-image-cropper';
import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
import * as i1$7 from '@angular/router';
import { NavigationEnd, Router, RouterModule } from '@angular/router';
import * as i1$8 from '@angular/material/snack-bar';
import { MAT_SNACK_BAR_DATA, MatSnackBarModule, _MatSnackBarBase, MatSnackBarContainer } from '@angular/material/snack-bar';
import { animation, animate, keyframes, style, trigger, transition, useAnimation, state } from '@angular/animations';
import { _TooltipComponentBase, _MatTooltipBase, MAT_TOOLTIP_SCROLL_STRATEGY, MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipModule } from '@angular/material/tooltip';
import * as i3 from '@angular/cdk/platform';
import * as i5 from '@angular/cdk/bidi';
import * as i4$1 from '@angular/cdk/drag-drop';
import { DragDropModule } from '@angular/cdk/drag-drop';
import * as i3$1 from '@angular/cdk/layout';
const BADGE_MODULE = 'badge';
const BANNER_MODULE = 'banner';
const BUTTON_MODULE = 'button';
const CHECKBOX_MODULE = 'checkbox';
const DATE_PICKER_MODULE = 'datePicker';
// TODO: finish these
const DECAGRAM_MODULE = 'decagram';
const DIVIDER_MODULE = 'divider';
const IMAGE_UPLOAD_MODULE = 'imageUpload';
const INPUT_MODULE = 'input';
const LAYOUT_MODULE = 'layout';
const XUI_CONFIG = new InjectionToken('xui-config');
const isDefined = function (value) {
return value !== undefined;
};
class XuiConfigService {
constructor(defaultConfig) {
this.configUpdated$ = new Subject();
this.config = defaultConfig ? JSON.parse(JSON.stringify(defaultConfig)) : {};
}
getConfigForComponent(componentName) {
return this.config[componentName];
}
getConfigChangeEventForComponent(componentName) {
return this.configUpdated$.pipe(filter(n => n === componentName), mapTo(undefined));
}
set(componentName, value) {
this.config[componentName] = { ...this.config[componentName], ...value };
this.configUpdated$.next(componentName);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiConfigService, deps: [{ token: XUI_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiConfigService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiConfigService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [XUI_CONFIG]
}] }]; } });
function WithConfig() {
return function ConfigDecorator(target, propName, originalDescriptor) {
const privatePropName = `$$__assignedValue__${propName}`;
Object.defineProperty(target, privatePropName, {
configurable: true,
writable: true,
enumerable: false
});
return {
get() {
const originalValue = originalDescriptor?.get ? originalDescriptor.get.bind(this)() : this[privatePropName];
const assignedByUser = ((this.assignmentCount || {})[propName] || 0) > 1;
if (assignedByUser && isDefined(originalValue)) {
return originalValue;
}
const componentConfig = this.configService.getConfigForComponent(this._moduleName) || {};
const configValue = componentConfig[propName];
return isDefined(configValue) ? configValue : originalValue;
},
set(value) {
// If the value is assigned, we consider the newly assigned value as 'assigned by user'.
this.assignmentCount = this.assignmentCount || {};
this.assignmentCount[propName] = (this.assignmentCount[propName] || 0) + 1;
if (originalDescriptor?.set) {
originalDescriptor.set.bind(this)(value);
}
else {
this[privatePropName] = value;
}
},
configurable: true,
enumerable: true
};
};
}
class ConfigureDirective {
// Badge
set xuiBadgeColor(color) {
this.configService.set(BADGE_MODULE, { color });
}
// Banner
set xuiBannerType(type) {
this.configService.set(BANNER_MODULE, { type });
}
set xuiBannerDismissible(dismissible) {
this.configService.set(BANNER_MODULE, { dismissible });
}
// Button
set xuiButtonType(type) {
this.configService.set(BUTTON_MODULE, { type });
}
set xuiButtonColor(color) {
this.configService.set(BUTTON_MODULE, { color });
}
set xuiButtonSize(size) {
this.configService.set(BUTTON_MODULE, { size });
}
// Checkbox
set xuiCheckboxColor(color) {
this.configService.set(CHECKBOX_MODULE, { color });
}
set xuiCheckboxDisabled(disabled) {
this.configService.set(CHECKBOX_MODULE, { disabled });
}
// Date Picker
set xuiDatePickerColor(color) {
this.configService.set(DATE_PICKER_MODULE, { color });
}
set xuiDatePickerSize(size) {
this.configService.set(DATE_PICKER_MODULE, { size });
}
// TODO: implement these
// Input
set xuiInputColor(color) {
this.configService.set(INPUT_MODULE, { color });
}
set xuiInputSize(size) {
this.configService.set(INPUT_MODULE, { size });
}
constructor(configService) {
this.configService = configService;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ConfigureDirective, deps: [{ token: XuiConfigService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: ConfigureDirective, selector: "[xuiConfigure]", inputs: { xuiBadgeColor: "xuiBadgeColor", xuiBannerType: "xuiBannerType", xuiBannerDismissible: "xuiBannerDismissible", xuiButtonType: "xuiButtonType", xuiButtonColor: "xuiButtonColor", xuiButtonSize: "xuiButtonSize", xuiCheckboxColor: "xuiCheckboxColor", xuiCheckboxDisabled: "xuiCheckboxDisabled", xuiDatePickerColor: "xuiDatePickerColor", xuiDatePickerSize: "xuiDatePickerSize", xuiInputColor: "xuiInputColor", xuiInputSize: "xuiInputSize" }, providers: [XuiConfigService], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ConfigureDirective, decorators: [{
type: Directive,
args: [{
selector: '[xuiConfigure]',
providers: [XuiConfigService]
}]
}], ctorParameters: function () { return [{ type: XuiConfigService }]; }, propDecorators: { xuiBadgeColor: [{
type: Input
}], xuiBannerType: [{
type: Input
}], xuiBannerDismissible: [{
type: Input
}], xuiButtonType: [{
type: Input
}], xuiButtonColor: [{
type: Input
}], xuiButtonSize: [{
type: Input
}], xuiCheckboxColor: [{
type: Input
}], xuiCheckboxDisabled: [{
type: Input
}], xuiDatePickerColor: [{
type: Input
}], xuiDatePickerSize: [{
type: Input
}], xuiInputColor: [{
type: Input
}], xuiInputSize: [{
type: Input
}] } });
class XuiConfigModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiConfigModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: XuiConfigModule, declarations: [ConfigureDirective], imports: [CommonModule], exports: [ConfigureDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiConfigModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiConfigModule, decorators: [{
type: NgModule,
args: [{
declarations: [ConfigureDirective],
exports: [ConfigureDirective],
imports: [CommonModule]
}]
}] });
class BadgeComponent {
get styles() {
const ret = {
'x-badge': true
};
ret[`x-badge-${this.color}`] = true;
return ret;
}
constructor(configService) {
this.configService = configService;
this._moduleName = BADGE_MODULE;
this.color = 'primary';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: BadgeComponent, deps: [{ token: XuiConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: BadgeComponent, selector: "xui-badge", inputs: { color: "color" }, ngImport: i0, template: `<div [ngClass]="styles"><ng-content></ng-content></div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
__decorate([
WithConfig(),
__metadata("design:type", String)
], BadgeComponent.prototype, "color", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: BadgeComponent, decorators: [{
type: Component,
args: [{
selector: 'xui-badge',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<div [ngClass]="styles"><ng-content></ng-content></div>`
}]
}], ctorParameters: function () { return [{ type: XuiConfigService }]; }, propDecorators: { color: [{
type: Input
}] } });
class XuiBadgeModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: XuiBadgeModule, declarations: [BadgeComponent], imports: [CommonModule], exports: [BadgeComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiBadgeModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiBadgeModule, decorators: [{
type: NgModule,
args: [{
declarations: [BadgeComponent],
imports: [CommonModule],
exports: [BadgeComponent]
}]
}] });
function parseCss(value) {
if (value == null) {
return '';
}
return typeof value === 'string' ? value : `${value}px`;
}
function inNextTick() {
const timer = new Subject();
Promise.resolve().then(() => timer.next());
return timer.pipe(take(1)).toPromise();
}
async function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
function toBoolean(value) {
return coerceBooleanProperty(value);
}
function toNumber(value, fallbackValue = 0) {
return _isNumberValue(value) ? Number(value) : fallbackValue;
}
function toCssPixel(value) {
return coerceCssPixelValue(value);
}
function propDecoratorFactory(name, fallback) {
function propDecorator(target, propName, originalDescriptor) {
const privatePropName = `$$__${propName}`;
if (Object.prototype.hasOwnProperty.call(target, privatePropName)) {
console.warn(`The prop "${privatePropName}" already exists and it will be overridden by ${name} decorator.`);
}
Object.defineProperty(target, privatePropName, {
configurable: true,
writable: true
});
return {
get() {
return originalDescriptor?.get ? originalDescriptor.get.bind(this)() : this[privatePropName];
},
set(value) {
if (originalDescriptor?.set) {
originalDescriptor.set.bind(this)(fallback(value));
}
this[privatePropName] = fallback(value);
}
};
}
return propDecorator;
}
function InputBoolean() {
return propDecoratorFactory('InputBoolean', toBoolean);
}
function InputCssPixel() {
return propDecoratorFactory('InputCssPixel', toCssPixel);
}
function InputNumber(fallbackValue) {
return propDecoratorFactory('InputNumber', (value) => toNumber(value, fallbackValue));
}
class IconComponent {
get icon() {
return this.input.nativeElement.innerHTML;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: IconComponent, selector: "xui-icon", viewQueries: [{ propertyName: "input", first: true, predicate: ["iconName"], descendants: true, static: true }], ngImport: i0, template: `<mat-icon [svgIcon]="icon"></mat-icon>
<span style="display: none" #iconName><ng-content></ng-content></span>`, isInline: true, dependencies: [{ kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: IconComponent, decorators: [{
type: Component,
args: [{
selector: 'xui-icon',
// changeDetection: ChangeDetectionStrategy.OnPush, not working with checkbox
template: `<mat-icon [svgIcon]="icon"></mat-icon>
<span style="display: none" #iconName><ng-content></ng-content></span>`
}]
}], propDecorators: { input: [{
type: ViewChild,
args: ['iconName', { static: true }]
}] } });
class BannerComponent {
get styles() {
const ret = {
'x-banner': true,
'x-banner-dismissible': this.dismissible
};
ret[`x-banner-${this.type}`] = true;
return ret;
}
constructor(configService) {
this.configService = configService;
this._moduleName = BANNER_MODULE;
this.type = 'info';
this.dismissible = false;
this.bannerClose = new EventEmitter();
}
dismiss() {
this.bannerClose.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: BannerComponent, deps: [{ token: XuiConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: BannerComponent, selector: "xui-banner", inputs: { type: "type", stamp: "stamp", dismissible: "dismissible" }, outputs: { bannerClose: "bannerClose" }, host: { listeners: { "click": "dismiss()" } }, ngImport: i0, template: "<div [ngClass]=\"styles\">\n <div *ngIf=\"stamp\" class=\"x-banner-stamp\">\n {{ stamp }}\n </div>\n <ng-content></ng-content>\n <xui-icon *ngIf=\"dismissible\" class=\"x-banner-close\">close-thick</xui-icon>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "xui-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
__decorate([
WithConfig(),
__metadata("design:type", String)
], BannerComponent.prototype, "type", void 0);
__decorate([
InputBoolean(),
WithConfig(),
__metadata("design:type", Object)
], BannerComponent.prototype, "dismissible", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: BannerComponent, decorators: [{
type: Component,
args: [{ selector: 'xui-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"styles\">\n <div *ngIf=\"stamp\" class=\"x-banner-stamp\">\n {{ stamp }}\n </div>\n <ng-content></ng-content>\n <xui-icon *ngIf=\"dismissible\" class=\"x-banner-close\">close-thick</xui-icon>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: XuiConfigService }]; }, propDecorators: { type: [{
type: Input
}], stamp: [{
type: Input
}], dismissible: [{
type: Input
}], bannerClose: [{
type: Output
}], dismiss: [{
type: HostListener,
args: ['click']
}] } });
class XuiIconModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: XuiIconModule, declarations: [IconComponent], imports: [CommonModule, MatIconModule], exports: [IconComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiIconModule, imports: [CommonModule, MatIconModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiIconModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, MatIconModule],
declarations: [IconComponent],
exports: [IconComponent]
}]
}] });
class XuiBannerModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiBannerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: XuiBannerModule, declarations: [BannerComponent], imports: [CommonModule, XuiIconModule], exports: [BannerComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiBannerModule, imports: [CommonModule, XuiIconModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiBannerModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, XuiIconModule],
declarations: [BannerComponent],
exports: [BannerComponent]
}]
}] });
class ButtonGroupComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: ButtonGroupComponent, selector: "xui-button-group", inputs: { type: "type", size: "size", color: "color" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ButtonGroupComponent, decorators: [{
type: Component,
args: [{
selector: 'xui-button-group',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>'
}]
}], propDecorators: { type: [{
type: Input
}], size: [{
type: Input
}], color: [{
type: Input
}] } });
class ButtonComponent {
constructor(
// TODO: Anchor for popover; consider removing it and refactoring
elementRef, configService, group, cdr) {
this.elementRef = elementRef;
this.configService = configService;
this.group = group;
this.cdr = cdr;
this._moduleName = BUTTON_MODULE;
this.state = 0;
this.shine = false;
this.disabled = false;
this.stateDelay = 5000;
// Used to emit event when user interacts with button with spacebar or enter
// eslint-disable-next-line @angular-eslint/no-output-native
this.click = new EventEmitter();
}
get styles() {
const config = this.configService.getConfigForComponent(BUTTON_MODULE);
const ret = {
'x-button': true,
'x-button--non-idle': this.state != 0,
'x-button--loading': this.state == 1,
'x-button--succeeded': this.state == 2,
'x-button--failed': this.state === 3
};
ret[`x-button-${this.size ?? this.group?.size ?? config?.size ?? 'medium'}`] = true;
ret[`x-button-${this.type ?? this.group?.type ?? config?.type ?? 'normal'}`] = true;
ret[`x-button-${this.color ?? this.group?.color ?? config?.color ?? 'primary'}`] = true;
return ret;
}
async _onAsync(event) {
event?.preventDefault();
event?.stopPropagation();
if (this.disabled) {
return;
}
this.click.emit(event);
if (!this.onClick) {
return;
}
this.state = 1;
try {
this.state = (await this.onClick()) ? 2 : 3;
}
catch {
this.state = 2;
}
this.cdr.markForCheck();
await delay(5000);
this.state = 0;
this.cdr.markForCheck();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: XuiConfigService }, { token: ButtonGroupComponent, host: true, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: ButtonComponent, selector: "xui-button", inputs: { type: "type", size: "size", color: "color", shine: "shine", disabled: "disabled", onClick: "onClick", stateDelay: "stateDelay" }, outputs: { click: "click" }, host: { listeners: { "keydown.enter": "_onAsync($event)", "keydown.space": "_onAsync($event)" } }, ngImport: i0, template: `
<div
[ngClass]="styles"
[attr.disabled]="disabled || null"
[tabindex]="disabled ? -1 : 0"
(click)="_onAsync($event)"
>
<div class="x-button-content">
<ng-content></ng-content>
</div>
<div class="x-button-state-image"></div>
<div class="x-button-shine" *ngIf="shine && !disabled">
<div class="x-button-shine-inner">
<div class="x-button-shine-element"></div>
</div>
</div>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], ButtonComponent.prototype, "shine", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], ButtonComponent.prototype, "disabled", void 0);
__decorate([
InputNumber(),
WithConfig(),
__metadata("design:type", Object)
], ButtonComponent.prototype, "stateDelay", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ButtonComponent, decorators: [{
type: Component,
args: [{
selector: 'xui-button',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div
[ngClass]="styles"
[attr.disabled]="disabled || null"
[tabindex]="disabled ? -1 : 0"
(click)="_onAsync($event)"
>
<div class="x-button-content">
<ng-content></ng-content>
</div>
<div class="x-button-state-image"></div>
<div class="x-button-shine" *ngIf="shine && !disabled">
<div class="x-button-shine-inner">
<div class="x-button-shine-element"></div>
</div>
</div>
</div>
`
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: XuiConfigService }, { type: ButtonGroupComponent, decorators: [{
type: Optional
}, {
type: Host
}] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { type: [{
type: Input
}], size: [{
type: Input
}], color: [{
type: Input
}], shine: [{
type: Input
}], disabled: [{
type: Input
}], onClick: [{
type: Input
}], stateDelay: [{
type: Input
}], click: [{
type: Output
}], _onAsync: [{
type: HostListener,
args: ['keydown.enter', ['$event']]
}, {
type: HostListener,
args: ['keydown.space', ['$event']]
}] } });
class XuiButtonModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: XuiButtonModule, declarations: [ButtonComponent, ButtonGroupComponent], imports: [CommonModule], exports: [ButtonComponent, ButtonGroupComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiButtonModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiButtonModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
declarations: [ButtonComponent, ButtonGroupComponent],
exports: [ButtonComponent, ButtonGroupComponent]
}]
}] });
class CardComponent {
// @Input() loading!: boolean;
constructor(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
ngOnInit() {
if (this.titleDirective) {
this.titlePortal = new TemplatePortal(this.titleDirective, this.viewContainerRef);
}
if (this.actionsDirective) {
this.actionsPortal = new TemplatePortal(this.actionsDirective, this.viewContainerRef);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CardComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: CardComponent, selector: "xui-card", ngImport: i0, template: "<div class=\"x-card-header\" *ngIf=\"titleDirective\">\n <ng-template [cdkPortalOutlet]=\"titlePortal\"></ng-template>\n</div>\n\n<div class=\"x-card-content\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"x-card-actions\" *ngIf=\"actionsDirective\">\n <ng-template [cdkPortalOutlet]=\"actionsPortal\"></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CardComponent, decorators: [{
type: Component,
args: [{ selector: 'xui-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-card-header\" *ngIf=\"titleDirective\">\n <ng-template [cdkPortalOutlet]=\"titlePortal\"></ng-template>\n</div>\n\n<div class=\"x-card-content\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"x-card-actions\" *ngIf=\"actionsDirective\">\n <ng-template [cdkPortalOutlet]=\"actionsPortal\"></ng-template>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
class CardActionsDirective {
constructor(card, templateRef) {
card.actionsDirective = templateRef;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CardActionsDirective, deps: [{ token: CardComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CardActionsDirective, selector: "[xuiCardActions]", exportAs: ["xuiCardActions"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CardActionsDirective, decorators: [{
type: Directive,
args: [{
selector: '[xuiCardActions]',
exportAs: 'xuiCardActions'
}]
}], ctorParameters: function () { return [{ type: CardComponent }, { type: i0.TemplateRef }]; } });
class CardTitleDirective {
constructor(card, templateRef) {
card.titleDirective = templateRef;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CardTitleDirective, deps: [{ token: CardComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CardTitleDirective, selector: "[xuiCardTitle]", exportAs: ["xuiCardTitle"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CardTitleDirective, decorators: [{
type: Directive,
args: [{
selector: '[xuiCardTitle]',
exportAs: 'xuiCardTitle'
}]
}], ctorParameters: function () { return [{ type: CardComponent }, { type: i0.TemplateRef }]; } });
class XuiCardModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: XuiCardModule, declarations: [CardComponent, CardActionsDirective, CardTitleDirective], imports: [CommonModule, PortalModule], exports: [CardComponent, CardActionsDirective, CardTitleDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiCardModule, imports: [CommonModule, PortalModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiCardModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, PortalModule],
declarations: [CardComponent, CardActionsDirective, CardTitleDirective],
exports: [CardComponent, CardActionsDirective, CardTitleDirective]
}]
}] });
class CheckboxComponent {
get styles() {
const ret = {
'x-checkbox': true,
'x-checkbox-disabled': this.disabled
};
ret[`x-checkbox-${this.color}`] = true;
return ret;
}
get value() {
return this._value;
}
set value(v) {
if (this._value !== v) {
this._value = v;
this.onChange?.(v);
}
}
constructor(configService, cdr, control) {
this.configService = configService;
this.cdr = cdr;
this.control = control;
this._moduleName = CHECKBOX_MODULE;
this._value = false;
this.disabled = false;
this.color = 'primary';
if (this.control) {
this.control.valueAccessor = this;
}
}
ngOnInit() {
this.control?.statusChanges?.subscribe(() => this.cdr.markForCheck());
}
writeValue(source) {
this.value = source;
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
_focusOut() {
this.onTouched?.();
}
_click(event) {
event?.preventDefault();
if (!this.disabled) {
this.value = !this.value;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CheckboxComponent, deps: [{ token: XuiConfigService }, { token: i0.ChangeDetectorRef }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: CheckboxComponent, selector: "xui-checkbox", inputs: { disabled: "disabled", color: "color", value: "value" }, host: { listeners: { "focusout": "_focusOut()", "click": "_click()", "keydown.enter": "_click($event)", "keydown.space": "_click($event)" } }, ngImport: i0, template: ` <div [ngClass]="styles">
<div class="x-checkbox-box" tabindex="0" [class.x-checkbox-checked]="value">
<svg
*ngIf="value"
viewBox="0 0 24 24"
height="100%"
width="100%"
preserveAspectRatio="xMidYMid meet"
focusable="false"
>
<path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</div>
<ng-content></ng-content>
</div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
__decorate([
InputBoolean(),
WithConfig(),
__metadata("design:type", Object)
], CheckboxComponent.prototype, "disabled", void 0);
__decorate([
WithConfig(),
__metadata("design:type", String)
], CheckboxComponent.prototype, "color", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], CheckboxComponent.prototype, "value", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CheckboxComponent, decorators: [{
type: Component,
args: [{
selector: 'xui-checkbox',
changeDetection: ChangeDetectionStrategy.OnPush,
template: ` <div [ngClass]="styles">
<div class="x-checkbox-box" tabindex="0" [class.x-checkbox-checked]="value">
<svg
*ngIf="value"
viewBox="0 0 24 24"
height="100%"
width="100%"
preserveAspectRatio="xMidYMid meet"
focusable="false"
>
<path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</div>
<ng-content></ng-content>
</div>`
}]
}], ctorParameters: function () { return [{ type: XuiConfigService }, { type: i0.ChangeDetectorRef }, { type: i1$2.NgControl, decorators: [{
type: Self
}, {
type: Optional
}] }]; }, propDecorators: { disabled: [{
type: Input
}], color: [{
type: Input
}], value: [{
type: Input
}], _focusOut: [{
type: HostListener,
args: ['focusout']
}], _click: [{
type: HostListener,
args: ['click']
}, {
type: HostListener,
args: ['keydown.enter', ['$event']]
}, {
type: HostListener,
args: ['keydown.space', ['$event']]
}] } });
class XuiCheckboxModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: XuiCheckboxModule, declarations: [CheckboxComponent], imports: [CommonModule], exports: [CheckboxComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiCheckboxModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiCheckboxModule, decorators: [{
type: NgModule,
args: [{
declarations: [CheckboxComponent],
imports: [CommonModule],
exports: [CheckboxComponent]
}]
}] });
class ContextMenuComponent {
constructor(overlay, viewContainerRef) {
this.overlay = overlay;
this.viewContainerRef = viewContainerRef;
this.afterClosed = new EventEmitter();
const config = {
scrollStrategy: this.overlay.scrollStrategies.reposition(),
hasBackdrop: true,
backdropClass: 'x-context-menu-backdrop'
};
this.overlayRef = this.overlay.create(config);
this.overlayRef.backdropClick().subscribe(() => {
this.close();
});
}
open(anchor) {
this.overlayRef.updatePositionStrategy(this.calculatePositionStrategy(anchor ?? this.anchor));
const userProfilePortal = new TemplatePortal(this.templateRef, this.viewContainerRef);
this.overlayRef.attach(userProfilePortal);
for (const btn of this.buttons) {
btn.click.pipe(first()).subscribe(() => this.close());
}
}
calculatePositionStrategy(anchor) {
return this.overlay
.position()
.flexibleConnectedTo(anchor?.elementRef ?? anchor)
.withPositions([
new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' })
])
.withPush(false);
}
close() {
this.overlayRef.detach();
this.afterClosed.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ContextMenuComponent, deps: [{ token: i1$3.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: ContextMenuComponent, selector: "xui-context-menu", inputs: { anchor: "anchor" }, outputs: { afterClosed: "afterClosed" }, host: { listeners: { "document:keydown.esc": "close()" } }, queries: [{ propertyName: "buttons", predicate: ButtonComponent }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, static: true }], ngImport: i0, template: `
<ng-template #templateRef>
<div class="x-context-menu" cdkTrapFocus (click)="close()">
<ng-content></ng-content>
</div>
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ContextMenuComponent, decorators: [{
type: Component,
args: [{
selector: 'xui-context-menu',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-template #templateRef>
<div class="x-context-menu" cdkTrapFocus (click)="close()">
<ng-content></ng-content>
</div>
</ng-template>
`
}]
}], ctorParameters: function () { return [{ type: i1$3.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { anchor: [{
type: Input
}], afterClosed: [{
type: Output
}], templateRef: [{
type: ViewChild,
args: ['templateRef', { static: true }]
}], buttons: [{
type: ContentChildren,
args: [ButtonComponent]
}], close: [{
type: HostListener,
args: ['document:keydown.esc']
}] } });
class MenuTriggerForDirective {
constructor(elementRef) {
this.elementRef = elementRef;
}
_click() {
this.menu.open(this.elementRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MenuTriggerForDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: MenuTriggerForDirective, selector: "[xuiMenuTriggerFor]", inputs: { menu: ["xuiMenuTriggerFor", "menu"] }, host: { listeners: { "click": "_click()" } }, exportAs: ["xuiMenuTriggerFor"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MenuTriggerForDirective, decorators: [{
type: Directive,
args: [{
selector: '[xuiMenuTriggerFor]',
exportAs: 'xuiMenuTriggerFor'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { menu: [{
type: Input,
args: ['xuiMenuTriggerFor']
}], _click: [{
type: HostListener,
args: ['click']
}] } });
class ContextMenuTriggerForDirective {
constructor(elementRef) {
this.elementRef = elementRef;
}
_click(event) {
this.menu.open(this.elementRef);
event.preventDefault();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ContextMenuTriggerForDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: ContextMenuTriggerForDirective, selector: "[xuiContextMenuTriggerFor]", inputs: { menu: ["xuiContextMenuTriggerFor", "menu"] }, host: { listeners: { "contextmenu": "_click($event)" } }, exportAs: ["xuiContextMenuTriggerFor"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ContextMenuTriggerForDirective, decorators: [{
type: Directive,
args: [{
selector: '[xuiContextMenuTriggerFor]',
exportAs: 'xuiContextMenuTriggerFor'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { menu: [{
type: Input,
args: ['xuiContextMenuTriggerFor']
}], _click: [{
type: HostListener,
args: ['contextmenu', ['$event']]
}] } });
class XuiContextMenuModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: XuiContextMenuModule, declarations: [ContextMenuComponent, MenuTriggerForDirective, ContextMenuTriggerForDirective], imports: [CommonModule, CdkMenuModule, A11yModule], exports: [ContextMenuComponent, CdkMenuModule, MenuTriggerForDirective, ContextMenuTriggerForDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiContextMenuModule, imports: [CommonModule, CdkMenuModule, A11yModule, CdkMenuModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: XuiContextMenuModule, decorators: [{
type: NgModule,
args: [{
declarations: [ContextMenuComponent, MenuTriggerForDirective, ContextMenuTriggerForDirective],
imports: [CommonModule, CdkMenuModule, A11yModule],
exports: [ContextMenuComponent, CdkMenuModule, MenuTriggerForDirective, ContextMenuTriggerForDirective]
}]
}] });
const INPUT_GROUP_ACCESSOR = new InjectionToken('xui-input-group');
class InputComponent {
get value() {
return this._value;
}
set value(v) {
if (this._value !== v) {
this._value = v;
this.onChange?.(v);
this.cdr.markForCheck();
}
}
get styles() {
const ret = {
'x-input': true,
'x-input-error': this.showError
};
ret[`x-input-${this.color}`] = true;
ret[`x-input-${this.group?.size ?? this.size}`] = true;
return ret;
}
get errorMessage() {
const msg = this.control?.getError('message');
return this.translation.instant(msg);
}
constructor(configService, cdr, translation, group, control) {
this.configService = configService;
this.cdr = cdr;
this.translation = translation;
this.group = group;
this.control = control;
this._moduleName = INPUT_MODULE;
this._value = null;
this.disabled = false;
this.readOnly = false;
this.color = 'light';
this.size = 'large';
this.type = 'text';
if (this.control) {
this.control.valueAccessor = this;
}
}
ngOnInit() {
this.control?.statusChanges?.subscribe(() => this.cdr.markForCheck());
}
get invalid() {
return !!this.control?.invalid;
}
get showError() {
if (!this.control) {
return false;
}
const { dirty, touched } = this.control;
return this.invalid ? (dirty ?? false) || (touched ?? false) : false;
}
writeValue(source) {
this.value = source;
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
_focusOut() {
this.onTouched?.();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: InputComponent, deps: [{ token: XuiConfigService }, { token: i0.ChangeDetectorRef }, { token: i1$4.TranslateService }, { token: INPUT_GROUP_ACCESSOR, optional: true }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: InputComponent, selector: "xui-input", inputs: { placeholder: "pl