@teenageinterface/input
Version:
The `Input` component is a customizable input field for various types of data in your Angular application. It supports different input types, including text, password, email, and file inputs, and emits events on value changes and when the enter key is pre
82 lines (77 loc) • 33.4 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output } from '@angular/core';
import { IconsComponent } from '@teenageinterface/icons';
/**
* @Author: 0K0 <contact@oko.app>
* @Date: 14-12-2024 20:56:21
* @Last Modified by: 0K0 <contact@oko.app>
* @Last Modified time: 14-12-2024 23:21:31
*/
class InputComponent {
id = null;
disabled = false;
serverError = false;
_value = "";
set value(val) {
this.valueChange.emit(val);
this._value = val;
}
get value() {
return this._value;
}
placeholder = "";
required = false;
type = "text";
patternEmail = "[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$";
valueChange = new EventEmitter();
onEnter = new EventEmitter();
get pattern() {
const classMap = {
text: ".*",
password: ".*",
email: this.patternEmail,
file: ".*",
bigFile: ".*",
};
return classMap[this.type] || classMap.text;
}
enter() {
this.onEnter.emit(this.value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: InputComponent, isStandalone: true, selector: "tiInput", inputs: { id: "id", disabled: "disabled", serverError: "serverError", value: "value", placeholder: "placeholder", required: "required", type: "type" }, outputs: { valueChange: "valueChange", onEnter: "onEnter" }, ngImport: i0, template: "<div *ngIf=\"type !== 'bigFile'\" class=\"flex flex-col gap-2\">\r\n <input [class.!h-fit]=\"type === 'file'\" [class.dark:!border-red-400]=\"serverError\" [class.!border-red-500]=\"serverError\" (keyup.enter)=\"enter()\" [pattern]=\"pattern\" [(ngModel)]=\"value\" [name]=\"type\" [id]=\"id\" [placeholder]=\"placeholder\" [required]=\"required\" [type]=\"type\" class=\"peer file:bg-blue-800 file:text-neutral-50 file:rounded-lg file:text-xs dark:file:bg-blue-600 file:border-0 file:me-4 file:py-3 file:px-4 autofill:shadow-autofill autofill:dark:shadow-autofill-dark autofill:dark:text-fill-dark autofill:text-fill autofill:dark:!border-autofill-dark autofill:!border-autofill dark:text-neutral-50 text-neutral-900 invalid:not-invalid:border-red-500 invalid:not-invalid:dark:border-red-400 dark:bg-neutral-900 bg-neutral-50 border dark:border-neutral-700 border-neutral-300 hover:dark:border-neutral-500 hover:border-neutral-400 transition-colors duration-300 placeholder:dark:text-neutral-500 placeholder:text-neutral-400 disabled:cursor-not-allowed disabled:opacity-50 flex focus-visible:outline-none focus:dark:border-neutral-500 focus:border-neutral-400 h-10 px-3 py-4 rounded-lg font-medium text-sm w-full\">\r\n <span *ngIf=\"!serverError && type === 'email'\" class=\"hidden font-geist text-xs dark:text-red-400 text-red-500 peer-placeholder-invalid:block\">\r\n Please enter a valid email address. Include \"@\" and the missing part. The address \"{{value}}\" is incomplete.\r\n </span>\r\n <span *ngIf=\"serverError\" class=\"font-geist text-xs text-red-400\">\r\n Something went wrong, try again later.\r\n </span>\r\n</div>\r\n\r\n<div *ngIf=\"type === 'bigFile'\" class=\"group flex flex-col gap-2 items-center relative justify-center p-6 w-full h-60 border border-dashed dark:border-neutral-800 border-neutral-300 rounded-lg\">\r\n <input type=\"file\" class=\"absolute top-0 left-0 w-full h-full cursor-pointer opacity-0 file:cursor-pointer\">\r\n <div class=\"dark:bg-neutral-900 bg-neutral-200 p-2 rounded-lg w-11 h-11 flex items-center justify-center text-neutral-500\">\r\n <tiIcon icon=\"upload\" other=\"!w-5 !h-5\" />\r\n </div>\r\n <div class=\"text-center text-sm dark:text-neutral-300 text-neutral-700\">\r\n <div>Drag & drop files or <span class=\"text-blue-600 group-hover:underline\">browse files</span></div>\r\n <div>{{placeholder}}</div>\r\n </div>\r\n</div>\r\n", styles: ["*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:\"\"}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,ui-sans-serif,system-ui,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}text-fill{-webkit-text-fill-color:#0a0a0a}text-fill-dark{-webkit-text-fill-color:#fafafa}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-0{top:0}.flex{display:flex}.hidden{display:none}.\\!h-5{height:1.25rem!important}.\\!h-fit{height:-moz-fit-content!important;height:fit-content!important}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-60{height:15rem}.h-full{height:100%}.\\!w-5{width:1.25rem!important}.w-11{width:2.75rem}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-dashed{border-style:dashed}.\\!border-red-500{--tw-border-opacity:1!important;border-color:rgb(239 68 68/var(--tw-border-opacity,1))!important}.border-neutral-300{--tw-border-opacity:1;border-color:rgb(212 212 212/var(--tw-border-opacity,1))}.bg-neutral-200{--tw-bg-opacity:1;background-color:rgb(229 229 229/var(--tw-bg-opacity,1))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.p-2{padding:.5rem}.p-6{padding:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.text-center{text-align:center}.font-geist{font-family:Geist}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-neutral-500{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity,1))}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64/var(--tw-text-opacity,1))}.text-neutral-900{--tw-text-opacity:1;color:rgb(23 23 23/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.file\\:me-4::file-selector-button{margin-inline-end:1rem}.file\\:cursor-pointer::file-selector-button{cursor:pointer}.file\\:rounded-lg::file-selector-button{border-radius:.5rem}.file\\:border-0::file-selector-button{border-width:0}.file\\:bg-blue-800::file-selector-button{--tw-bg-opacity:1;background-color:rgb(30 64 175/var(--tw-bg-opacity,1))}.file\\:px-4::file-selector-button{padding-left:1rem;padding-right:1rem}.file\\:py-3::file-selector-button{padding-top:.75rem;padding-bottom:.75rem}.file\\:text-xs::file-selector-button{font-size:.75rem;line-height:1rem}.file\\:text-neutral-50::file-selector-button{--tw-text-opacity:1;color:rgb(250 250 250/var(--tw-text-opacity,1))}.placeholder\\:text-neutral-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity,1))}.placeholder\\:text-neutral-400::placeholder{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity,1))}.autofill\\:\\!border-autofill:-webkit-autofill{--tw-border-opacity:1!important;border-color:rgb(147 197 253/var(--tw-border-opacity,1))!important}.autofill\\:\\!border-autofill:autofill{--tw-border-opacity:1!important;border-color:rgb(147 197 253/var(--tw-border-opacity,1))!important}.autofill\\:shadow-autofill:-webkit-autofill{--tw-shadow:inset 0 0 0px 1000px #dbeafe;--tw-shadow-colored:inset 0 0 0px 1000px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-shadow-color:#93c5fd;--tw-shadow:var(--tw-shadow-colored)}.autofill\\:shadow-autofill:autofill{--tw-shadow:inset 0 0 0px 1000px #dbeafe;--tw-shadow-colored:inset 0 0 0px 1000px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-shadow-color:#93c5fd;--tw-shadow:var(--tw-shadow-colored)}.focus\\:border-neutral-400:focus,.hover\\:border-neutral-400:hover{--tw-border-opacity:1;border-color:rgb(163 163 163/var(--tw-border-opacity,1))}.focus-visible\\:outline-none:focus-visible{outline:2px solid #0000;outline-offset:2px}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\\:underline{text-decoration-line:underline}.invalid\\:not-invalid\\:border-red-500:not(:-moz-placeholder-shown):not(:focus):invalid{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.invalid\\:not-invalid\\:border-red-500:not(:placeholder-shown):not(:focus):invalid{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.peer:not(:-moz-placeholder-shown):not(:focus):invalid~.peer-placeholder-invalid\\:block{display:block}.peer:not(:placeholder-shown):not(:focus):invalid~.peer-placeholder-invalid\\:block{display:block}.peer-placeholder-invalid\\:block:has(~.peer:not(:-moz-placeholder-shown):not(:focus):invalid){display:block}.peer-placeholder-invalid\\:block:has(~.peer:not(:placeholder-shown):not(:focus):invalid){display:block}.dark\\:\\!border-red-400:where([data-mode=dark],[data-mode=dark] *){--tw-border-opacity:1!important;border-color:rgb(248 113 113/var(--tw-border-opacity,1))!important}.dark\\:border-neutral-700:where([data-mode=dark],[data-mode=dark] *){--tw-border-opacity:1;border-color:rgb(64 64 64/var(--tw-border-opacity,1))}.dark\\:border-neutral-800:where([data-mode=dark],[data-mode=dark] *){--tw-border-opacity:1;border-color:rgb(38 38 38/var(--tw-border-opacity,1))}.dark\\:bg-neutral-900:where([data-mode=dark],[data-mode=dark] *){--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.dark\\:text-neutral-300:where([data-mode=dark],[data-mode=dark] *){--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity,1))}.dark\\:text-neutral-50:where([data-mode=dark],[data-mode=dark] *){--tw-text-opacity:1;color:rgb(250 250 250/var(--tw-text-opacity,1))}.dark\\:text-red-400:where([data-mode=dark],[data-mode=dark] *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\\:file\\:bg-blue-600:where([data-mode=dark],[data-mode=dark] *)::file-selector-button{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.placeholder\\:dark\\:text-neutral-500:where([data-mode=dark],[data-mode=dark] *)::-moz-placeholder{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity,1))}.placeholder\\:dark\\:text-neutral-500:where([data-mode=dark],[data-mode=dark] *)::placeholder{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity,1))}.autofill\\:dark\\:\\!border-autofill-dark:where([data-mode=dark],[data-mode=dark] *):-webkit-autofill{--tw-border-opacity:1!important;border-color:rgb(85 92 104/var(--tw-border-opacity,1))!important}.autofill\\:dark\\:\\!border-autofill-dark:where([data-mode=dark],[data-mode=dark] *):autofill{--tw-border-opacity:1!important;border-color:rgb(85 92 104/var(--tw-border-opacity,1))!important}.autofill\\:dark\\:shadow-autofill-dark:where([data-mode=dark],[data-mode=dark] *):-webkit-autofill{--tw-shadow:inset 0 0 0px 1000px #202938;--tw-shadow-colored:inset 0 0 0px 1000px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-shadow-color:#555c68;--tw-shadow:var(--tw-shadow-colored)}.autofill\\:dark\\:shadow-autofill-dark:where([data-mode=dark],[data-mode=dark] *):autofill{--tw-shadow:inset 0 0 0px 1000px #202938;--tw-shadow-colored:inset 0 0 0px 1000px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-shadow-color:#555c68;--tw-shadow:var(--tw-shadow-colored)}.hover\\:dark\\:border-neutral-500:where([data-mode=dark],[data-mode=dark] *):hover{--tw-border-opacity:1;border-color:rgb(115 115 115/var(--tw-border-opacity,1))}.focus\\:dark\\:border-neutral-500:where([data-mode=dark],[data-mode=dark] *):focus{--tw-border-opacity:1;border-color:rgb(115 115 115/var(--tw-border-opacity,1))}.invalid\\:not-invalid\\:dark\\:border-red-400:where([data-mode=dark],[data-mode=dark] *):not(:-moz-placeholder-shown):not(:focus):invalid{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}.invalid\\:not-invalid\\:dark\\:border-red-400:where([data-mode=dark],[data-mode=dark] *):not(:placeholder-shown):not(:focus):invalid{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}\n/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/\n", ":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconsComponent, selector: "tiIcon", inputs: ["icon", "other"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: InputComponent, decorators: [{
type: Component,
args: [{ selector: 'tiInput', imports: [CommonModule, FormsModule, IconsComponent], template: "<div *ngIf=\"type !== 'bigFile'\" class=\"flex flex-col gap-2\">\r\n <input [class.!h-fit]=\"type === 'file'\" [class.dark:!border-red-400]=\"serverError\" [class.!border-red-500]=\"serverError\" (keyup.enter)=\"enter()\" [pattern]=\"pattern\" [(ngModel)]=\"value\" [name]=\"type\" [id]=\"id\" [placeholder]=\"placeholder\" [required]=\"required\" [type]=\"type\" class=\"peer file:bg-blue-800 file:text-neutral-50 file:rounded-lg file:text-xs dark:file:bg-blue-600 file:border-0 file:me-4 file:py-3 file:px-4 autofill:shadow-autofill autofill:dark:shadow-autofill-dark autofill:dark:text-fill-dark autofill:text-fill autofill:dark:!border-autofill-dark autofill:!border-autofill dark:text-neutral-50 text-neutral-900 invalid:not-invalid:border-red-500 invalid:not-invalid:dark:border-red-400 dark:bg-neutral-900 bg-neutral-50 border dark:border-neutral-700 border-neutral-300 hover:dark:border-neutral-500 hover:border-neutral-400 transition-colors duration-300 placeholder:dark:text-neutral-500 placeholder:text-neutral-400 disabled:cursor-not-allowed disabled:opacity-50 flex focus-visible:outline-none focus:dark:border-neutral-500 focus:border-neutral-400 h-10 px-3 py-4 rounded-lg font-medium text-sm w-full\">\r\n <span *ngIf=\"!serverError && type === 'email'\" class=\"hidden font-geist text-xs dark:text-red-400 text-red-500 peer-placeholder-invalid:block\">\r\n Please enter a valid email address. Include \"@\" and the missing part. The address \"{{value}}\" is incomplete.\r\n </span>\r\n <span *ngIf=\"serverError\" class=\"font-geist text-xs text-red-400\">\r\n Something went wrong, try again later.\r\n </span>\r\n</div>\r\n\r\n<div *ngIf=\"type === 'bigFile'\" class=\"group flex flex-col gap-2 items-center relative justify-center p-6 w-full h-60 border border-dashed dark:border-neutral-800 border-neutral-300 rounded-lg\">\r\n <input type=\"file\" class=\"absolute top-0 left-0 w-full h-full cursor-pointer opacity-0 file:cursor-pointer\">\r\n <div class=\"dark:bg-neutral-900 bg-neutral-200 p-2 rounded-lg w-11 h-11 flex items-center justify-center text-neutral-500\">\r\n <tiIcon icon=\"upload\" other=\"!w-5 !h-5\" />\r\n </div>\r\n <div class=\"text-center text-sm dark:text-neutral-300 text-neutral-700\">\r\n <div>Drag & drop files or <span class=\"text-blue-600 group-hover:underline\">browse files</span></div>\r\n <div>{{placeholder}}</div>\r\n </div>\r\n</div>\r\n", styles: ["*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:\"\"}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,ui-sans-serif,system-ui,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}text-fill{-webkit-text-fill-color:#0a0a0a}text-fill-dark{-webkit-text-fill-color:#fafafa}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-0{top:0}.flex{display:flex}.hidden{display:none}.\\!h-5{height:1.25rem!important}.\\!h-fit{height:-moz-fit-content!important;height:fit-content!important}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-60{height:15rem}.h-full{height:100%}.\\!w-5{width:1.25rem!important}.w-11{width:2.75rem}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-dashed{border-style:dashed}.\\!border-red-500{--tw-border-opacity:1!important;border-color:rgb(239 68 68/var(--tw-border-opacity,1))!important}.border-neutral-300{--tw-border-opacity:1;border-color:rgb(212 212 212/var(--tw-border-opacity,1))}.bg-neutral-200{--tw-bg-opacity:1;background-color:rgb(229 229 229/var(--tw-bg-opacity,1))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.p-2{padding:.5rem}.p-6{padding:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.text-center{text-align:center}.font-geist{font-family:Geist}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-neutral-500{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity,1))}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64/var(--tw-text-opacity,1))}.text-neutral-900{--tw-text-opacity:1;color:rgb(23 23 23/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.file\\:me-4::file-selector-button{margin-inline-end:1rem}.file\\:cursor-pointer::file-selector-button{cursor:pointer}.file\\:rounded-lg::file-selector-button{border-radius:.5rem}.file\\:border-0::file-selector-button{border-width:0}.file\\:bg-blue-800::file-selector-button{--tw-bg-opacity:1;background-color:rgb(30 64 175/var(--tw-bg-opacity,1))}.file\\:px-4::file-selector-button{padding-left:1rem;padding-right:1rem}.file\\:py-3::file-selector-button{padding-top:.75rem;padding-bottom:.75rem}.file\\:text-xs::file-selector-button{font-size:.75rem;line-height:1rem}.file\\:text-neutral-50::file-selector-button{--tw-text-opacity:1;color:rgb(250 250 250/var(--tw-text-opacity,1))}.placeholder\\:text-neutral-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity,1))}.placeholder\\:text-neutral-400::placeholder{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity,1))}.autofill\\:\\!border-autofill:-webkit-autofill{--tw-border-opacity:1!important;border-color:rgb(147 197 253/var(--tw-border-opacity,1))!important}.autofill\\:\\!border-autofill:autofill{--tw-border-opacity:1!important;border-color:rgb(147 197 253/var(--tw-border-opacity,1))!important}.autofill\\:shadow-autofill:-webkit-autofill{--tw-shadow:inset 0 0 0px 1000px #dbeafe;--tw-shadow-colored:inset 0 0 0px 1000px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-shadow-color:#93c5fd;--tw-shadow:var(--tw-shadow-colored)}.autofill\\:shadow-autofill:autofill{--tw-shadow:inset 0 0 0px 1000px #dbeafe;--tw-shadow-colored:inset 0 0 0px 1000px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-shadow-color:#93c5fd;--tw-shadow:var(--tw-shadow-colored)}.focus\\:border-neutral-400:focus,.hover\\:border-neutral-400:hover{--tw-border-opacity:1;border-color:rgb(163 163 163/var(--tw-border-opacity,1))}.focus-visible\\:outline-none:focus-visible{outline:2px solid #0000;outline-offset:2px}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\\:underline{text-decoration-line:underline}.invalid\\:not-invalid\\:border-red-500:not(:-moz-placeholder-shown):not(:focus):invalid{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.invalid\\:not-invalid\\:border-red-500:not(:placeholder-shown):not(:focus):invalid{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.peer:not(:-moz-placeholder-shown):not(:focus):invalid~.peer-placeholder-invalid\\:block{display:block}.peer:not(:placeholder-shown):not(:focus):invalid~.peer-placeholder-invalid\\:block{display:block}.peer-placeholder-invalid\\:block:has(~.peer:not(:-moz-placeholder-shown):not(:focus):invalid){display:block}.peer-placeholder-invalid\\:block:has(~.peer:not(:placeholder-shown):not(:focus):invalid){display:block}.dark\\:\\!border-red-400:where([data-mode=dark],[data-mode=dark] *){--tw-border-opacity:1!important;border-color:rgb(248 113 113/var(--tw-border-opacity,1))!important}.dark\\:border-neutral-700:where([data-mode=dark],[data-mode=dark] *){--tw-border-opacity:1;border-color:rgb(64 64 64/var(--tw-border-opacity,1))}.dark\\:border-neutral-800:where([data-mode=dark],[data-mode=dark] *){--tw-border-opacity:1;border-color:rgb(38 38 38/var(--tw-border-opacity,1))}.dark\\:bg-neutral-900:where([data-mode=dark],[data-mode=dark] *){--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.dark\\:text-neutral-300:where([data-mode=dark],[data-mode=dark] *){--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity,1))}.dark\\:text-neutral-50:where([data-mode=dark],[data-mode=dark] *){--tw-text-opacity:1;color:rgb(250 250 250/var(--tw-text-opacity,1))}.dark\\:text-red-400:where([data-mode=dark],[data-mode=dark] *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\\:file\\:bg-blue-600:where([data-mode=dark],[data-mode=dark] *)::file-selector-button{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.placeholder\\:dark\\:text-neutral-500:where([data-mode=dark],[data-mode=dark] *)::-moz-placeholder{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity,1))}.placeholder\\:dark\\:text-neutral-500:where([data-mode=dark],[data-mode=dark] *)::placeholder{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity,1))}.autofill\\:dark\\:\\!border-autofill-dark:where([data-mode=dark],[data-mode=dark] *):-webkit-autofill{--tw-border-opacity:1!important;border-color:rgb(85 92 104/var(--tw-border-opacity,1))!important}.autofill\\:dark\\:\\!border-autofill-dark:where([data-mode=dark],[data-mode=dark] *):autofill{--tw-border-opacity:1!important;border-color:rgb(85 92 104/var(--tw-border-opacity,1))!important}.autofill\\:dark\\:shadow-autofill-dark:where([data-mode=dark],[data-mode=dark] *):-webkit-autofill{--tw-shadow:inset 0 0 0px 1000px #202938;--tw-shadow-colored:inset 0 0 0px 1000px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-shadow-color:#555c68;--tw-shadow:var(--tw-shadow-colored)}.autofill\\:dark\\:shadow-autofill-dark:where([data-mode=dark],[data-mode=dark] *):autofill{--tw-shadow:inset 0 0 0px 1000px #202938;--tw-shadow-colored:inset 0 0 0px 1000px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-shadow-color:#555c68;--tw-shadow:var(--tw-shadow-colored)}.hover\\:dark\\:border-neutral-500:where([data-mode=dark],[data-mode=dark] *):hover{--tw-border-opacity:1;border-color:rgb(115 115 115/var(--tw-border-opacity,1))}.focus\\:dark\\:border-neutral-500:where([data-mode=dark],[data-mode=dark] *):focus{--tw-border-opacity:1;border-color:rgb(115 115 115/var(--tw-border-opacity,1))}.invalid\\:not-invalid\\:dark\\:border-red-400:where([data-mode=dark],[data-mode=dark] *):not(:-moz-placeholder-shown):not(:focus):invalid{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}.invalid\\:not-invalid\\:dark\\:border-red-400:where([data-mode=dark],[data-mode=dark] *):not(:placeholder-shown):not(:focus):invalid{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}\n/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/\n", ":host{width:100%}\n"] }]
}], propDecorators: { id: [{
type: Input
}], disabled: [{
type: Input
}], serverError: [{
type: Input
}], value: [{
type: Input
}], placeholder: [{
type: Input
}], required: [{
type: Input
}], type: [{
type: Input
}], valueChange: [{
type: Output
}], onEnter: [{
type: Output
}] } });
/*
* Public API Surface of input
*/
/**
* Generated bundle index. Do not edit.
*/
export { InputComponent };
//# sourceMappingURL=teenageinterface-input.mjs.map