@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
1 lines • 6.55 kB
Source Map (JSON)
{"version":3,"file":"teenageinterface-input.mjs","sources":["../../../libs/input/src/lib/input.component.ts","../../../libs/input/src/lib/input.component.html","../../../libs/input/src/public-api.ts","../../../libs/input/src/teenageinterface-input.ts"],"sourcesContent":["/**\r\n * @Author: 0K0 <contact@oko.app>\r\n * @Date: 14-12-2024 20:56:21\r\n * @Last Modified by: 0K0 <contact@oko.app>\r\n * @Last Modified time: 14-12-2024 23:21:31\r\n */\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { Component, EventEmitter, Input, Output } from '@angular/core';\r\nimport { IconsComponent } from '@teenageinterface/icons';\r\n\r\n@Component({\r\n selector: 'tiInput',\r\n imports: [CommonModule, FormsModule, IconsComponent],\r\n templateUrl: './input.component.html',\r\n styles: [':host { width: 100% }'],\r\n styleUrl: './tailwind.css'\r\n})\r\nexport class InputComponent {\r\n\r\n @Input() id: string | null = null;\r\n @Input() disabled: boolean = false;\r\n @Input() serverError: boolean = false;\r\n _value: string = \"\";\r\n @Input()\r\n set value(val: string) {\r\n this.valueChange.emit(val);\r\n this._value = val\r\n }\r\n get value() {\r\n return this._value;\r\n }\r\n @Input() placeholder: string = \"\";\r\n @Input() required: boolean = false;\r\n @Input() type: \"text\" | \"password\" | \"email\" | \"file\" | \"bigFile\" = \"text\";\r\n\r\n private patternEmail: string = \"[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$\"\r\n\r\n @Output() valueChange: EventEmitter<string> = new EventEmitter<string>();\r\n @Output() onEnter: EventEmitter<string> = new EventEmitter<string>();\r\n\r\n public get pattern(): string {\r\n const classMap: { [key in typeof this.type]: string } = {\r\n text: \".*\",\r\n password: \".*\",\r\n email: this.patternEmail,\r\n file: \".*\",\r\n bigFile: \".*\",\r\n };\r\n\r\n return classMap[this.type] || classMap.text;\r\n }\r\n\r\n public enter() {\r\n this.onEnter.emit(this.value);\r\n }\r\n}\r\n","<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","/*\r\n * Public API Surface of input\r\n */\r\n\r\nexport * from './lib/input.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;AAAA;;;;;AAKG;MAaU,cAAc,CAAA;IAEhB,EAAE,GAAkB,IAAI;IACxB,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAY,KAAK;IACrC,MAAM,GAAW,EAAE;IACnB,IACI,KAAK,CAAC,GAAW,EAAA;AACnB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC;AAC1B,QAAA,IAAI,CAAC,MAAM,GAAG,GAAG;;AAEnB,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,IAAI,CAAC,MAAM;;IAEX,WAAW,GAAW,EAAE;IACxB,QAAQ,GAAY,KAAK;IACzB,IAAI,GAAuD,MAAM;IAElE,YAAY,GAAW,wCAAwC;AAE7D,IAAA,WAAW,GAAyB,IAAI,YAAY,EAAU;AAC9D,IAAA,OAAO,GAAyB,IAAI,YAAY,EAAU;AAEpE,IAAA,IAAW,OAAO,GAAA;AAChB,QAAA,MAAM,QAAQ,GAA0C;AACtD,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,IAAI,CAAC,YAAY;AACxB,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,OAAO,EAAE,IAAI;SACd;QAED,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,IAAI;;IAGtC,KAAK,GAAA;QACV,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;uGApCpB,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,wRClB3B,03EAoBA,EAAA,MAAA,EAAA,CAAA,g7XAAA,EAAA,qBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDPY,YAAY,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,WAAW,q+BAAE,cAAc,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAKxC,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,WACV,CAAC,YAAY,EAAE,WAAW,EAAE,cAAc,CAAC,EAAA,QAAA,EAAA,03EAAA,EAAA,MAAA,EAAA,CAAA,g7XAAA,EAAA,qBAAA,CAAA,EAAA;8BAO3C,EAAE,EAAA,CAAA;sBAAV;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,WAAW,EAAA,CAAA;sBAAnB;gBAGG,KAAK,EAAA,CAAA;sBADR;gBAQQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBAIS,WAAW,EAAA,CAAA;sBAApB;gBACS,OAAO,EAAA,CAAA;sBAAhB;;;AEvCH;;AAEG;;ACFH;;AAEG;;;;"}