@notiz/formly-tailwindcss
Version:
Formly TailwindCSS theme
1,057 lines (1,029 loc) • 85 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, HostBinding, NgModule, Directive } from '@angular/core';
import * as i1 from '@ngx-formly/core';
import { FieldType, FormlyModule, FieldWrapper } from '@ngx-formly/core';
import { NgClass, NgIf, NgTemplateOutlet, NgFor, AsyncPipe } from '@angular/common';
import * as i1$1 from '@angular/forms';
import { ReactiveFormsModule, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
import * as i3 from '@ngx-formly/core/select';
import { FormlySelectModule } from '@ngx-formly/core/select';
import { RouterLink } from '@angular/router';
class FormlyTailwindButton extends FieldType {
constructor() {
super(...arguments);
this.class = 'block mt-4';
this.defaultOptions = {
props: {
type: 'button', // button, submit, reset
},
};
}
onClick(event) {
if (this.props.onClick) {
this.props.onClick(event);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindButton, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: FormlyTailwindButton, isStandalone: true, selector: "formly-button", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: `
<button
class="form-button w-full"
[type]="props.type"
[ngClass]="'form-button-' + props.style"
[class.form-button-disabled]="props.disabled"
(click)="onClick($event)"
[disabled]="
props.type === 'submit'
? form.invalid || props.disabled
: props.disabled
"
>
<ng-container
*ngIf="props.template || props.text as content"
[ngTemplateOutlet]="stringOrTemplate"
[ngTemplateOutletContext]="{ content: content }"
>
</ng-container>
</button>
<ng-template #stringOrTemplate let-content="content">
<ng-container *ngIf="!content.createEmbeddedView; else template">
{{ content }}
</ng-container>
<ng-template #template>
<ng-container
[ngTemplateOutlet]="content"
[ngTemplateOutletContext]="{ field: props }"
></ng-container>
</ng-template>
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindButton, decorators: [{
type: Component,
args: [{
selector: 'formly-button',
template: `
<button
class="form-button w-full"
[type]="props.type"
[ngClass]="'form-button-' + props.style"
[class.form-button-disabled]="props.disabled"
(click)="onClick($event)"
[disabled]="
props.type === 'submit'
? form.invalid || props.disabled
: props.disabled
"
>
<ng-container
*ngIf="props.template || props.text as content"
[ngTemplateOutlet]="stringOrTemplate"
[ngTemplateOutletContext]="{ content: content }"
>
</ng-container>
</button>
<ng-template #stringOrTemplate let-content="content">
<ng-container *ngIf="!content.createEmbeddedView; else template">
{{ content }}
</ng-container>
<ng-template #template>
<ng-container
[ngTemplateOutlet]="content"
[ngTemplateOutletContext]="{ field: props }"
></ng-container>
</ng-template>
</ng-template>
`,
standalone: true,
imports: [NgClass, NgIf, NgTemplateOutlet],
}]
}], propDecorators: { class: [{
type: HostBinding,
args: ['class']
}] } });
class FormlyTailwindButtonModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindButtonModule, imports: [i1.FormlyModule, FormlyTailwindButton], exports: [FormlyTailwindButton] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindButtonModule, imports: [FormlyModule.forChild({
types: [
{
name: 'button',
component: FormlyTailwindButton,
},
],
})] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindButtonModule, decorators: [{
type: NgModule,
args: [{
imports: [
FormlyModule.forChild({
types: [
{
name: 'button',
component: FormlyTailwindButton,
},
],
}),
FormlyTailwindButton,
],
exports: [FormlyTailwindButton],
}]
}] });
class FormlyTailwindCheckbox extends FieldType {
constructor() {
super(...arguments);
this.defaultOptions = {
props: {
indeterminate: true,
hideLabel: true,
},
};
}
get class() {
return `flex items-center ${this.props.disabled ? 'cursor-not-allowed' : ''}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: FormlyTailwindCheckbox, isStandalone: true, selector: "formly-checkbox", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: `
<input
class="form-checkbox"
[ngClass]="{ 'cursor-not-allowed': props.disabled }"
type="checkbox"
[id]="id"
[name]="key"
[readonly]="props.readonly"
[disabled]="props.disabled ? props.disabled : false"
[required]="props.required ? props.required : false"
[formControl]="formControl"
[formlyAttributes]="field"
[indeterminate]="props.indeterminate && formControl.value == null"
[tabIndex]="props.tabindex"
[attr.aria-describedby]="key"
/>
<label
[for]="id"
class="form-checkbox-label ml-2 flex items-center text-gray-700"
[ngClass]="{ 'cursor-not-allowed': props.disabled }"
>
<!-- TODO same label as the wrapper -->
<div [innerHtml]="props.label"></div>
<!-- TODO is this needed when the wrapper is applied? -->
<span
*ngIf="props.required && !props.hideRequiredMarker"
class="form-required text-red-700"
>
*
</span>
</label>
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindCheckbox, decorators: [{
type: Component,
args: [{
selector: 'formly-checkbox',
template: `
<input
class="form-checkbox"
[ngClass]="{ 'cursor-not-allowed': props.disabled }"
type="checkbox"
[id]="id"
[name]="key"
[readonly]="props.readonly"
[disabled]="props.disabled ? props.disabled : false"
[required]="props.required ? props.required : false"
[formControl]="formControl"
[formlyAttributes]="field"
[indeterminate]="props.indeterminate && formControl.value == null"
[tabIndex]="props.tabindex"
[attr.aria-describedby]="key"
/>
<label
[for]="id"
class="form-checkbox-label ml-2 flex items-center text-gray-700"
[ngClass]="{ 'cursor-not-allowed': props.disabled }"
>
<!-- TODO same label as the wrapper -->
<div [innerHtml]="props.label"></div>
<!-- TODO is this needed when the wrapper is applied? -->
<span
*ngIf="props.required && !props.hideRequiredMarker"
class="form-required text-red-700"
>
*
</span>
</label>
`,
standalone: true,
imports: [NgClass, ReactiveFormsModule, FormlyModule, NgIf],
}]
}], propDecorators: { class: [{
type: HostBinding,
args: ['class']
}] } });
class FormlyTailwindCheckboxModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindCheckboxModule, imports: [i1.FormlyModule, FormlyTailwindCheckbox], exports: [FormlyTailwindCheckbox] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindCheckboxModule, imports: [FormlyModule.forChild({
types: [
{
name: 'checkbox',
component: FormlyTailwindCheckbox,
wrappers: ['form-field'],
},
{
name: 'boolean',
extends: 'checkbox',
},
],
}),
FormlyTailwindCheckbox] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindCheckboxModule, decorators: [{
type: NgModule,
args: [{
imports: [
FormlyModule.forChild({
types: [
{
name: 'checkbox',
component: FormlyTailwindCheckbox,
wrappers: ['form-field'],
},
{
name: 'boolean',
extends: 'checkbox',
},
],
}),
FormlyTailwindCheckbox,
],
exports: [FormlyTailwindCheckbox],
}]
}] });
class FormlyTailwindDatepicker extends FieldType {
constructor() {
super(...arguments);
this.class = 'block';
this.supportedDateTypes = ['date', 'datetime-local', 'month', 'week', 'time'];
}
get type() {
if (this.props.type !== undefined) {
const supportedType = this.supportedDateTypes.some((types) => types === this.props.type);
if (!supportedType) {
console.warn(`Datepicker doesn't support ${this.props.type} fallback to 'date'.`);
}
return supportedType ? this.props.type : 'date';
}
return 'date';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindDatepicker, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: FormlyTailwindDatepicker, isStandalone: true, selector: "formly-datepicker", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: `
<input
class="form-input w-full"
[class.cursor-not-allowed]="props.disabled"
[type]="type"
[id]="id"
[name]="key"
[readonly]="props.readonly"
[required]="props.required ? props.required : false"
[formControl]="formControl"
[formlyAttributes]="field"
[tabIndex]="props.tabindex"
[placeholder]="props.placeholder"
/>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindDatepicker, decorators: [{
type: Component,
args: [{
selector: 'formly-datepicker',
template: `
<input
class="form-input w-full"
[class.cursor-not-allowed]="props.disabled"
[type]="type"
[id]="id"
[name]="key"
[readonly]="props.readonly"
[required]="props.required ? props.required : false"
[formControl]="formControl"
[formlyAttributes]="field"
[tabIndex]="props.tabindex"
[placeholder]="props.placeholder"
/>
`,
standalone: true,
imports: [ReactiveFormsModule, FormlyModule],
}]
}], propDecorators: { class: [{
type: HostBinding,
args: ['class']
}] } });
class FormlyTailwindDatepickerModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindDatepickerModule, imports: [i1.FormlyModule, FormlyTailwindDatepicker], exports: [FormlyTailwindDatepicker] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindDatepickerModule, imports: [FormlyModule.forChild({
types: [
{
name: 'datepicker',
component: FormlyTailwindDatepicker,
wrappers: ['form-field'],
},
{
name: 'date',
extends: 'datepicker',
},
{
name: 'datetime-local',
extends: 'datepicker',
defaultOptions: {
props: {
type: 'datetime-local',
},
},
},
{
name: 'month',
extends: 'datepicker',
defaultOptions: {
props: {
type: 'month',
},
},
},
{
name: 'week',
extends: 'datepicker',
defaultOptions: {
props: {
type: 'week',
},
},
},
{
name: 'time',
extends: 'datepicker',
defaultOptions: {
props: {
type: 'time',
},
},
},
],
}),
FormlyTailwindDatepicker] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindDatepickerModule, decorators: [{
type: NgModule,
args: [{
imports: [
FormlyModule.forChild({
types: [
{
name: 'datepicker',
component: FormlyTailwindDatepicker,
wrappers: ['form-field'],
},
{
name: 'date',
extends: 'datepicker',
},
{
name: 'datetime-local',
extends: 'datepicker',
defaultOptions: {
props: {
type: 'datetime-local',
},
},
},
{
name: 'month',
extends: 'datepicker',
defaultOptions: {
props: {
type: 'month',
},
},
},
{
name: 'week',
extends: 'datepicker',
defaultOptions: {
props: {
type: 'week',
},
},
},
{
name: 'time',
extends: 'datepicker',
defaultOptions: {
props: {
type: 'time',
},
},
},
],
}),
FormlyTailwindDatepicker,
],
exports: [FormlyTailwindDatepicker],
}]
}] });
class FormlyTailwindDivider extends FieldType {
constructor() {
super(...arguments);
this.class = 'block mt-4';
this.defaultOptions = {
props: {
dividerClasses: 'border-gray-300',
textClasses: 'bg-white text-sm text-red-500',
},
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindDivider, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: FormlyTailwindDivider, isStandalone: true, selector: "formly-divider", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: `
<div class="form-divider relative">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div
class="form-divider-border w-full border-t"
[ngClass]="[props.dividerClasses]"
></div>
</div>
<div class="relative flex justify-center">
<span class="form-divider-text px-2" [ngClass]="[props.textClasses]">
{{ props.text }}
</span>
</div>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindDivider, decorators: [{
type: Component,
args: [{
selector: 'formly-divider',
template: `
<div class="form-divider relative">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div
class="form-divider-border w-full border-t"
[ngClass]="[props.dividerClasses]"
></div>
</div>
<div class="relative flex justify-center">
<span class="form-divider-text px-2" [ngClass]="[props.textClasses]">
{{ props.text }}
</span>
</div>
</div>
`,
standalone: true,
imports: [NgClass],
}]
}], propDecorators: { class: [{
type: HostBinding,
args: ['class']
}] } });
class FormlyTailwindDividerModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindDividerModule, imports: [i1.FormlyModule, FormlyTailwindDivider], exports: [FormlyTailwindDivider] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindDividerModule, imports: [FormlyModule.forChild({
types: [
{
name: 'divider',
component: FormlyTailwindDivider,
},
],
})] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindDividerModule, decorators: [{
type: NgModule,
args: [{
imports: [
FormlyModule.forChild({
types: [
{
name: 'divider',
component: FormlyTailwindDivider,
},
],
}),
FormlyTailwindDivider,
],
exports: [FormlyTailwindDivider],
}]
}] });
class FileValueAccessor {
constructor() {
this.onChange = (_) => { };
this.onTouched = () => { };
}
writeValue(value) { }
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FileValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: FileValueAccessor, isStandalone: true, selector: "input[type=file]", host: { listeners: { "change": "onChange($event.target.files)", "blur": "onTouched()" } }, providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: FileValueAccessor, multi: true },
], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FileValueAccessor, decorators: [{
type: Directive,
args: [{
selector: 'input[type=file]',
host: {
'(change)': 'onChange($event.target.files)',
'(blur)': 'onTouched()',
},
providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: FileValueAccessor, multi: true },
],
standalone: true,
}]
}] });
class FormlyTailwindFile extends FieldType {
constructor() {
super(...arguments);
this.class = 'block';
this.defaultOptions = {
props: {
accept: [],
multiple: false,
},
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindFile, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: FormlyTailwindFile, isStandalone: true, selector: "formly-file", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: `
<!-- TODO use file variant in tailwindcss@3.x.x to style the input -->
<input
class="form-file w-full"
type="file"
[id]="id"
[formControl]="formControl"
[formlyAttributes]="field"
[accept]="props.accept"
[multiple]="props.multiple"
/>
`, isInline: true, dependencies: [{ kind: "directive", type: FileValueAccessor, selector: "input[type=file]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindFile, decorators: [{
type: Component,
args: [{
selector: 'formly-file',
template: `
<!-- TODO use file variant in tailwindcss@3.x.x to style the input -->
<input
class="form-file w-full"
type="file"
[id]="id"
[formControl]="formControl"
[formlyAttributes]="field"
[accept]="props.accept"
[multiple]="props.multiple"
/>
`,
standalone: true,
imports: [FileValueAccessor, ReactiveFormsModule, FormlyModule],
}]
}], propDecorators: { class: [{
type: HostBinding,
args: ['class']
}] } });
class FormlyTailwindFileModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindFileModule, imports: [i1.FormlyModule, FormlyTailwindFile], exports: [FormlyTailwindFile] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindFileModule, imports: [FormlyModule.forChild({
types: [
{
name: 'file',
component: FormlyTailwindFile,
wrappers: ['form-field'],
},
],
}),
FormlyTailwindFile] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindFileModule, decorators: [{
type: NgModule,
args: [{
imports: [
FormlyModule.forChild({
types: [
{
name: 'file',
component: FormlyTailwindFile,
wrappers: ['form-field'],
},
],
}),
FormlyTailwindFile,
],
exports: [FormlyTailwindFile],
providers: [],
}]
}] });
class FormlyTailwindWrapperFormField extends FieldWrapper {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindWrapperFormField, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: FormlyTailwindWrapperFormField, isStandalone: true, selector: "formly-field", usesInheritance: true, ngImport: i0, template: `
<div
class="mt-4 block"
[class.form-error]="showError"
[class.form-disabled]="props.disabled"
[ngClass]="{
'form-disabled opacity-50': props.disabled
}"
>
<label
*ngIf="props.label && !props.hideLabel"
class="form-label mb-0.5 inline-flex text-gray-700"
[for]="id"
>
<div [innerHtml]="props.label"></div>
<span
*ngIf="props.required && !props.hideRequiredMarker"
class="form-required text-red-700"
>
*
</span>
</label>
<ng-container #fieldComponent></ng-container>
<div
*ngIf="
(props.description || props.hintStart || props.hintEnd) && !showError
"
class="form-hint mt-0.5 flex justify-between"
>
<ng-container
*ngIf="props.description || props.hintStart as hint"
[ngTemplateOutlet]="stringOrTemplate"
[ngTemplateOutletContext]="{ content: hint }"
>
</ng-container>
<!-- divider if hintStart is empty to position hintEnd correctly -->
<div
*ngIf="!(props.description || props.hintStart) && props.hintEnd"
></div>
<ng-container
*ngIf="props.hintEnd as hintEnd"
[ngTemplateOutlet]="stringOrTemplate"
[ngTemplateOutletContext]="{ content: hintEnd }"
>
</ng-container>
</div>
<div
*ngIf="showError"
class="form-error-message mt-0.5 text-sm text-red-400"
>
<formly-validation-message [field]="field"></formly-validation-message>
</div>
</div>
<ng-template #stringOrTemplate let-content="content">
<ng-container *ngIf="!content.createEmbeddedView; else template">
<span class="form-hint-text text-sm text-gray-600">
{{ content }}
</span>
</ng-container>
<ng-template #template>
<ng-container *ngTemplateOutlet="content"></ng-container>
</ng-template>
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindWrapperFormField, decorators: [{
type: Component,
args: [{
selector: 'formly-field',
template: `
<div
class="mt-4 block"
[class.form-error]="showError"
[class.form-disabled]="props.disabled"
[ngClass]="{
'form-disabled opacity-50': props.disabled
}"
>
<label
*ngIf="props.label && !props.hideLabel"
class="form-label mb-0.5 inline-flex text-gray-700"
[for]="id"
>
<div [innerHtml]="props.label"></div>
<span
*ngIf="props.required && !props.hideRequiredMarker"
class="form-required text-red-700"
>
*
</span>
</label>
<ng-container #fieldComponent></ng-container>
<div
*ngIf="
(props.description || props.hintStart || props.hintEnd) && !showError
"
class="form-hint mt-0.5 flex justify-between"
>
<ng-container
*ngIf="props.description || props.hintStart as hint"
[ngTemplateOutlet]="stringOrTemplate"
[ngTemplateOutletContext]="{ content: hint }"
>
</ng-container>
<!-- divider if hintStart is empty to position hintEnd correctly -->
<div
*ngIf="!(props.description || props.hintStart) && props.hintEnd"
></div>
<ng-container
*ngIf="props.hintEnd as hintEnd"
[ngTemplateOutlet]="stringOrTemplate"
[ngTemplateOutletContext]="{ content: hintEnd }"
>
</ng-container>
</div>
<div
*ngIf="showError"
class="form-error-message mt-0.5 text-sm text-red-400"
>
<formly-validation-message [field]="field"></formly-validation-message>
</div>
</div>
<ng-template #stringOrTemplate let-content="content">
<ng-container *ngIf="!content.createEmbeddedView; else template">
<span class="form-hint-text text-sm text-gray-600">
{{ content }}
</span>
</ng-container>
<ng-template #template>
<ng-container *ngTemplateOutlet="content"></ng-container>
</ng-template>
</ng-template>
`,
standalone: true,
imports: [NgClass, NgIf, NgTemplateOutlet, FormlyModule],
}]
}] });
class FormlyTailwindFormFieldModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindFormFieldModule, imports: [i1.FormlyModule, FormlyTailwindWrapperFormField], exports: [FormlyTailwindWrapperFormField] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindFormFieldModule, imports: [FormlyModule.forChild({
wrappers: [
{
name: 'form-field',
component: FormlyTailwindWrapperFormField,
},
],
}),
FormlyTailwindWrapperFormField] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindFormFieldModule, decorators: [{
type: NgModule,
args: [{
imports: [
FormlyModule.forChild({
wrappers: [
{
name: 'form-field',
component: FormlyTailwindWrapperFormField,
},
],
}),
FormlyTailwindWrapperFormField,
],
exports: [FormlyTailwindWrapperFormField],
}]
}] });
class FormlyTailwindInput extends FieldType {
constructor() {
super(...arguments);
this.class = 'block';
}
get type() {
return this.props.type || 'text';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindInput, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: FormlyTailwindInput, isStandalone: true, selector: "formly-input", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: `
<input
*ngIf="type !== 'number'; else numberInput"
class="form-input w-full"
[class.cursor-not-allowed]="props.disabled"
[id]="id"
[name]="key"
[type]="type"
[readonly]="props.readonly"
[required]="props.required ? props.required : false"
[formControl]="formControl"
[formlyAttributes]="field"
[tabIndex]="props.tabindex"
[placeholder]="props.placeholder"
/>
<ng-template #numberInput>
<input
type="number"
class="form-input w-full"
[class.cursor-not-allowed]="props.disabled"
[id]="id"
[name]="key"
[readonly]="props.readonly"
[required]="props.required ? props.required : false"
[formControl]="formControl"
[formlyAttributes]="field"
[tabIndex]="props.tabindex"
[placeholder]="props.placeholder"
/>
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindInput, decorators: [{
type: Component,
args: [{
selector: 'formly-input',
template: `
<input
*ngIf="type !== 'number'; else numberInput"
class="form-input w-full"
[class.cursor-not-allowed]="props.disabled"
[id]="id"
[name]="key"
[type]="type"
[readonly]="props.readonly"
[required]="props.required ? props.required : false"
[formControl]="formControl"
[formlyAttributes]="field"
[tabIndex]="props.tabindex"
[placeholder]="props.placeholder"
/>
<ng-template #numberInput>
<input
type="number"
class="form-input w-full"
[class.cursor-not-allowed]="props.disabled"
[id]="id"
[name]="key"
[readonly]="props.readonly"
[required]="props.required ? props.required : false"
[formControl]="formControl"
[formlyAttributes]="field"
[tabIndex]="props.tabindex"
[placeholder]="props.placeholder"
/>
</ng-template>
`,
standalone: true,
imports: [NgIf, ReactiveFormsModule, FormlyModule],
}]
}], propDecorators: { class: [{
type: HostBinding,
args: ['class']
}] } });
class FormlyTailwindInputModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindInputModule, imports: [i1.FormlyModule, FormlyTailwindInput], exports: [FormlyTailwindInput] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindInputModule, imports: [FormlyModule.forChild({
types: [
{
name: 'input',
component: FormlyTailwindInput,
wrappers: ['form-field'],
},
{ name: 'string', extends: 'input' },
{ name: 'text', extends: 'input' },
{
name: 'email',
extends: 'input',
defaultOptions: {
props: {
type: 'email',
},
},
},
{
name: 'password',
extends: 'input',
defaultOptions: {
props: {
type: 'password',
},
},
},
{
name: 'number',
extends: 'input',
defaultOptions: {
props: {
type: 'number',
},
},
},
],
}),
FormlyTailwindInput] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindInputModule, decorators: [{
type: NgModule,
args: [{
imports: [
FormlyModule.forChild({
types: [
{
name: 'input',
component: FormlyTailwindInput,
wrappers: ['form-field'],
},
{ name: 'string', extends: 'input' },
{ name: 'text', extends: 'input' },
{
name: 'email',
extends: 'input',
defaultOptions: {
props: {
type: 'email',
},
},
},
{
name: 'password',
extends: 'input',
defaultOptions: {
props: {
type: 'password',
},
},
},
{
name: 'number',
extends: 'input',
defaultOptions: {
props: {
type: 'number',
},
},
},
],
}),
FormlyTailwindInput,
],
exports: [FormlyTailwindInput],
}]
}] });
class FormlyTailwindTextarea extends FieldType {
constructor() {
super(...arguments);
this.class = 'block';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindTextarea, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: FormlyTailwindTextarea, isStandalone: true, selector: "formly-textarea", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: `
<textarea
class="form-textarea w-full"
[class.cursor-not-allowed]="props.disabled"
[id]="id"
[cols]="props.cols"
[rows]="props.rows"
[required]="props.required ? props.required : false"
[formControl]="formControl"
[formlyAttributes]="field"
[tabIndex]="props.tabindex"
></textarea>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindTextarea, decorators: [{
type: Component,
args: [{
selector: 'formly-textarea',
template: `
<textarea
class="form-textarea w-full"
[class.cursor-not-allowed]="props.disabled"
[id]="id"
[cols]="props.cols"
[rows]="props.rows"
[required]="props.required ? props.required : false"
[formControl]="formControl"
[formlyAttributes]="field"
[tabIndex]="props.tabindex"
></textarea>
`,
standalone: true,
imports: [ReactiveFormsModule, FormlyModule],
}]
}], propDecorators: { class: [{
type: HostBinding,
args: ['class']
}] } });
class FormlyTailwindTextareaModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindTextareaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindTextareaModule, imports: [i1.FormlyModule, FormlyTailwindTextarea], exports: [FormlyTailwindTextarea] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindTextareaModule, imports: [FormlyModule.forChild({
types: [
{
name: 'textarea',
component: FormlyTailwindTextarea,
wrappers: ['form-field'],
},
],
}),
FormlyTailwindTextarea] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FormlyTailwindTextareaModule, decorators: [{
type: NgModule,