adp-web-components 0.0.48 → 0.0.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/contact-us-form.cjs.entry.js +26 -4
- package/dist/cjs/dead-stock-lookup_3.cjs.entry.js +2 -2
- package/dist/cjs/dynamic-claim_6.cjs.entry.js +1 -1
- package/dist/cjs/dynamic-redeem.cjs.entry.js +1 -1
- package/dist/cjs/form-dialog_5.cjs.entry.js +344 -0
- package/dist/cjs/form-structure_2.cjs.entry.js +10 -9
- package/dist/cjs/{get-local-language-ebb05d9e.js → get-local-language-9c24d981.js} +2 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/part-lookup.cjs.entry.js +1 -1
- package/dist/cjs/shift-components.cjs.js +1 -1
- package/dist/cjs/vehicle-lookup.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/form-elements/form-dialog.css +1 -0
- package/dist/collection/components/form-elements/form-dialog.js +137 -0
- package/dist/collection/components/form-elements/form-input.css +1 -1
- package/dist/collection/components/form-elements/form-input.js +38 -1
- package/dist/collection/components/form-elements/form-select.css +1 -1
- package/dist/collection/components/form-elements/form-select.js +30 -3
- package/dist/collection/components/form-elements/form-structure-error.css +1 -1
- package/dist/collection/components/form-elements/form-structure-error.js +1 -1
- package/dist/collection/components/form-elements/form-structure.css +1 -1
- package/dist/collection/components/form-elements/form-structure.js +23 -5
- package/dist/collection/components/form-elements/form-submit.css +1 -1
- package/dist/collection/components/form-elements/form-submit.js +2 -2
- package/dist/collection/components/form-elements/form-text-area.css +1 -1
- package/dist/collection/components/form-elements/form-text-area.js +52 -1
- package/dist/collection/components/forms/contact-us/form.css +1 -1
- package/dist/collection/components/forms/contact-us-form.js +7 -2
- package/dist/collection/global/lib/form-hook.js +18 -0
- package/dist/collection/global/types/locales/general.js +1 -0
- package/dist/components/contact-us-form.js +1 -1
- package/dist/components/dead-stock-lookup.js +1 -1
- package/dist/components/distributor-lookup.js +1 -1
- package/dist/components/dynamic-claim.js +1 -1
- package/dist/components/dynamic-redeem.js +1 -1
- package/dist/components/form-dialog.d.ts +11 -0
- package/dist/components/form-dialog.js +5 -0
- package/dist/components/form-input.js +1 -1
- package/dist/components/form-select.js +1 -1
- package/dist/components/form-structure-error.js +1 -1
- package/dist/components/form-structure.js +1 -1
- package/dist/components/form-submit.js +1 -1
- package/dist/components/form-text-area.js +1 -1
- package/dist/components/manufacturer-lookup.js +1 -1
- package/dist/components/p-15eb8e7b.js +5 -0
- package/dist/components/p-237a7c55.js +5 -0
- package/dist/components/p-2eadbfd5.js +5 -0
- package/dist/components/{p-ac4a782f.js → p-49f54b37.js} +1 -1
- package/dist/components/{p-62beac88.js → p-5d3020cf.js} +1 -1
- package/dist/components/p-5f7ef1e2.js +5 -0
- package/dist/components/{p-7e62f352.js → p-7b4a568a.js} +1 -1
- package/dist/components/{p-8de98849.js → p-a762e41e.js} +1 -1
- package/dist/components/{p-08357e63.js → p-a7c8367b.js} +1 -1
- package/dist/components/{p-0d76f2b9.js → p-ad293da0.js} +1 -1
- package/dist/components/p-b155c713.js +5 -0
- package/dist/components/p-c015f62c.js +5 -0
- package/dist/components/{p-9a50bc07.js → p-c9c50bd5.js} +1 -1
- package/dist/components/{p-bb28c098.js → p-cd16aa91.js} +1 -1
- package/dist/components/{p-344f4417.js → p-dd2ca9f8.js} +1 -1
- package/dist/components/p-df782441.js +5 -0
- package/dist/components/{p-af8083e5.js → p-e74a2c29.js} +1 -1
- package/dist/components/{p-b400d6f6.js → p-f7ea9714.js} +1 -1
- package/dist/components/{p-171807db.js → p-f9be83de.js} +1 -1
- package/dist/components/paint-thickness.js +1 -1
- package/dist/components/part-lookup.js +1 -1
- package/dist/components/service-history.js +1 -1
- package/dist/components/vehicle-accessories.js +1 -1
- package/dist/components/vehicle-lookup.js +1 -1
- package/dist/components/vehicle-specification.js +1 -1
- package/dist/components/warranty-details.js +1 -1
- package/dist/esm/contact-us-form.entry.js +26 -4
- package/dist/esm/dead-stock-lookup_3.entry.js +2 -2
- package/dist/esm/dynamic-claim_6.entry.js +1 -1
- package/dist/esm/dynamic-redeem.entry.js +1 -1
- package/dist/esm/form-dialog_5.entry.js +336 -0
- package/dist/esm/form-structure_2.entry.js +10 -9
- package/dist/esm/{get-local-language-50038b04.js → get-local-language-80b87597.js} +2 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/part-lookup.entry.js +1 -1
- package/dist/esm/shift-components.js +1 -1
- package/dist/esm/vehicle-lookup.entry.js +1 -1
- package/dist/locales/ar.json +1 -0
- package/dist/locales/en.json +1 -0
- package/dist/locales/ku.json +1 -0
- package/dist/locales/ru.json +1 -0
- package/dist/shift-components/p-07c08204.entry.js +5 -0
- package/dist/shift-components/p-13d46f3d.entry.js +5 -0
- package/dist/shift-components/{p-b7d8b392.entry.js → p-27c1f365.entry.js} +1 -1
- package/dist/shift-components/p-4a717542.entry.js +5 -0
- package/dist/shift-components/{p-49005e96.entry.js → p-654aaa7d.entry.js} +1 -1
- package/dist/shift-components/{p-983cb144.entry.js → p-940585ec.entry.js} +1 -1
- package/dist/shift-components/{p-b11c327e.js → p-991b3547.js} +1 -1
- package/dist/shift-components/{p-4e5e528c.entry.js → p-bff6ab62.entry.js} +1 -1
- package/dist/shift-components/p-ea177504.entry.js +5 -0
- package/dist/shift-components/shift-components.esm.js +1 -1
- package/dist/types/components/form-elements/form-dialog.d.ts +13 -0
- package/dist/types/components/form-elements/form-input.d.ts +8 -2
- package/dist/types/components/form-elements/form-select.d.ts +5 -3
- package/dist/types/components/form-elements/form-structure.d.ts +1 -0
- package/dist/types/components/form-elements/form-text-area.d.ts +8 -2
- package/dist/types/components/forms/contact-us-form.d.ts +1 -0
- package/dist/types/components.d.ts +31 -2
- package/dist/types/global/lib/form-hook.d.ts +10 -1
- package/dist/types/global/types/forms.d.ts +8 -0
- package/dist/types/global/types/locales/general.d.ts +2 -0
- package/dist/types/global/types/locales/index.d.ts +2 -0
- package/package.json +1 -1
- package/dist/cjs/form-input_4.cjs.entry.js +0 -256
- package/dist/components/p-5d5842e9.js +0 -5
- package/dist/components/p-638e64fa.js +0 -5
- package/dist/components/p-87da0395.js +0 -5
- package/dist/components/p-aae5c784.js +0 -5
- package/dist/components/p-da2ea879.js +0 -5
- package/dist/components/p-fefbfbe8.js +0 -5
- package/dist/esm/form-input_4.entry.js +0 -249
- package/dist/shift-components/p-6cd76655.entry.js +0 -5
- package/dist/shift-components/p-96570d9d.entry.js +0 -5
- package/dist/shift-components/p-aad6afa6.entry.js +0 -5
- package/dist/shift-components/p-bc1b619c.entry.js +0 -5
|
@@ -9,16 +9,16 @@ import { ErrorKeys, LanguageKeys } from "./global/types/locales/index";
|
|
|
9
9
|
import { PartInformation } from "./global/types/part-information";
|
|
10
10
|
import { DotNetObjectReference, MockJson } from "./global/types/components";
|
|
11
11
|
import { ServiceItem, VehicleInformation } from "./global/types/vehicle-information";
|
|
12
|
-
import { FormElementMapper, FormFieldParams, FormInputChanges, FormSelectFetcher, LocaleFormKeys, StructureObject } from "./global/types/forms";
|
|
13
12
|
import { FormHook } from "./global/lib/form-hook";
|
|
13
|
+
import { FormElementMapper, FormFieldParams, FormInputChanges, FormSelectFetcher, LocaleFormKeys, StructureObject } from "./global/types/forms";
|
|
14
14
|
import { ActiveElement } from "./components/part-lookup/part-lookup";
|
|
15
15
|
import { ActiveElement as ActiveElement1 } from "./components/vehicle-lookup/vehicle-lookup";
|
|
16
16
|
export { ErrorKeys, LanguageKeys } from "./global/types/locales/index";
|
|
17
17
|
export { PartInformation } from "./global/types/part-information";
|
|
18
18
|
export { DotNetObjectReference, MockJson } from "./global/types/components";
|
|
19
19
|
export { ServiceItem, VehicleInformation } from "./global/types/vehicle-information";
|
|
20
|
-
export { FormElementMapper, FormFieldParams, FormInputChanges, FormSelectFetcher, LocaleFormKeys, StructureObject } from "./global/types/forms";
|
|
21
20
|
export { FormHook } from "./global/lib/form-hook";
|
|
21
|
+
export { FormElementMapper, FormFieldParams, FormInputChanges, FormSelectFetcher, LocaleFormKeys, StructureObject } from "./global/types/forms";
|
|
22
22
|
export { ActiveElement } from "./components/part-lookup/part-lookup";
|
|
23
23
|
export { ActiveElement as ActiveElement1 } from "./components/vehicle-lookup/vehicle-lookup";
|
|
24
24
|
export namespace Components {
|
|
@@ -88,6 +88,11 @@ export namespace Components {
|
|
|
88
88
|
"unInvoicedByBrokerName"?: string;
|
|
89
89
|
"vin"?: string;
|
|
90
90
|
}
|
|
91
|
+
interface FormDialog {
|
|
92
|
+
"dialogClosed": () => void;
|
|
93
|
+
"errorMessage": string;
|
|
94
|
+
"language": LanguageKeys;
|
|
95
|
+
}
|
|
91
96
|
interface FormInput {
|
|
92
97
|
"class": string;
|
|
93
98
|
"componentClass": string;
|
|
@@ -95,6 +100,7 @@ export namespace Components {
|
|
|
95
100
|
"defaultValue"?: string;
|
|
96
101
|
"disabled": boolean;
|
|
97
102
|
"errorMessage": string;
|
|
103
|
+
"form": FormHook<any>;
|
|
98
104
|
"formLocaleName": LocaleFormKeys;
|
|
99
105
|
"inputChanges": FormInputChanges;
|
|
100
106
|
"inputPreFix": string;
|
|
@@ -114,6 +120,7 @@ export namespace Components {
|
|
|
114
120
|
"disabled": boolean;
|
|
115
121
|
"errorMessage": string;
|
|
116
122
|
"fetcher": FormSelectFetcher;
|
|
123
|
+
"form": FormHook<any>;
|
|
117
124
|
"formLocaleName": string;
|
|
118
125
|
"inputChanges": FormInputChanges;
|
|
119
126
|
"isError": boolean;
|
|
@@ -124,6 +131,7 @@ export namespace Components {
|
|
|
124
131
|
"placeholder": string;
|
|
125
132
|
}
|
|
126
133
|
interface FormStructure {
|
|
134
|
+
"errorMessage": string;
|
|
127
135
|
"form": FormHook<any>;
|
|
128
136
|
"formElementMapper": FormElementMapper;
|
|
129
137
|
"formFieldParams": FormFieldParams;
|
|
@@ -143,8 +151,10 @@ export namespace Components {
|
|
|
143
151
|
interface FormTextArea {
|
|
144
152
|
"componentClass": string;
|
|
145
153
|
"componentId": string;
|
|
154
|
+
"defaultValue"?: string;
|
|
146
155
|
"disabled": boolean;
|
|
147
156
|
"errorMessage": string;
|
|
157
|
+
"form": FormHook<any>;
|
|
148
158
|
"formLocaleName": LocaleFormKeys;
|
|
149
159
|
"inputChanges": FormInputChanges;
|
|
150
160
|
"isError": boolean;
|
|
@@ -310,6 +320,12 @@ declare global {
|
|
|
310
320
|
prototype: HTMLDynamicRedeemElement;
|
|
311
321
|
new (): HTMLDynamicRedeemElement;
|
|
312
322
|
};
|
|
323
|
+
interface HTMLFormDialogElement extends Components.FormDialog, HTMLStencilElement {
|
|
324
|
+
}
|
|
325
|
+
var HTMLFormDialogElement: {
|
|
326
|
+
prototype: HTMLFormDialogElement;
|
|
327
|
+
new (): HTMLFormDialogElement;
|
|
328
|
+
};
|
|
313
329
|
interface HTMLFormInputElement extends Components.FormInput, HTMLStencilElement {
|
|
314
330
|
}
|
|
315
331
|
var HTMLFormInputElement: {
|
|
@@ -400,6 +416,7 @@ declare global {
|
|
|
400
416
|
"distributor-lookup": HTMLDistributorLookupElement;
|
|
401
417
|
"dynamic-claim": HTMLDynamicClaimElement;
|
|
402
418
|
"dynamic-redeem": HTMLDynamicRedeemElement;
|
|
419
|
+
"form-dialog": HTMLFormDialogElement;
|
|
403
420
|
"form-input": HTMLFormInputElement;
|
|
404
421
|
"form-select": HTMLFormSelectElement;
|
|
405
422
|
"form-structure": HTMLFormStructureElement;
|
|
@@ -468,6 +485,11 @@ declare namespace LocalJSX {
|
|
|
468
485
|
"unInvoicedByBrokerName"?: string;
|
|
469
486
|
"vin"?: string;
|
|
470
487
|
}
|
|
488
|
+
interface FormDialog {
|
|
489
|
+
"dialogClosed"?: () => void;
|
|
490
|
+
"errorMessage"?: string;
|
|
491
|
+
"language"?: LanguageKeys;
|
|
492
|
+
}
|
|
471
493
|
interface FormInput {
|
|
472
494
|
"class"?: string;
|
|
473
495
|
"componentClass"?: string;
|
|
@@ -475,6 +497,7 @@ declare namespace LocalJSX {
|
|
|
475
497
|
"defaultValue"?: string;
|
|
476
498
|
"disabled"?: boolean;
|
|
477
499
|
"errorMessage"?: string;
|
|
500
|
+
"form"?: FormHook<any>;
|
|
478
501
|
"formLocaleName"?: LocaleFormKeys;
|
|
479
502
|
"inputChanges"?: FormInputChanges;
|
|
480
503
|
"inputPreFix"?: string;
|
|
@@ -494,6 +517,7 @@ declare namespace LocalJSX {
|
|
|
494
517
|
"disabled"?: boolean;
|
|
495
518
|
"errorMessage"?: string;
|
|
496
519
|
"fetcher"?: FormSelectFetcher;
|
|
520
|
+
"form"?: FormHook<any>;
|
|
497
521
|
"formLocaleName"?: string;
|
|
498
522
|
"inputChanges"?: FormInputChanges;
|
|
499
523
|
"isError"?: boolean;
|
|
@@ -504,6 +528,7 @@ declare namespace LocalJSX {
|
|
|
504
528
|
"placeholder"?: string;
|
|
505
529
|
}
|
|
506
530
|
interface FormStructure {
|
|
531
|
+
"errorMessage"?: string;
|
|
507
532
|
"form"?: FormHook<any>;
|
|
508
533
|
"formElementMapper"?: FormElementMapper;
|
|
509
534
|
"formFieldParams"?: FormFieldParams;
|
|
@@ -523,8 +548,10 @@ declare namespace LocalJSX {
|
|
|
523
548
|
interface FormTextArea {
|
|
524
549
|
"componentClass"?: string;
|
|
525
550
|
"componentId"?: string;
|
|
551
|
+
"defaultValue"?: string;
|
|
526
552
|
"disabled"?: boolean;
|
|
527
553
|
"errorMessage"?: string;
|
|
554
|
+
"form"?: FormHook<any>;
|
|
528
555
|
"formLocaleName"?: LocaleFormKeys;
|
|
529
556
|
"inputChanges"?: FormInputChanges;
|
|
530
557
|
"isError"?: boolean;
|
|
@@ -636,6 +663,7 @@ declare namespace LocalJSX {
|
|
|
636
663
|
"distributor-lookup": DistributorLookup;
|
|
637
664
|
"dynamic-claim": DynamicClaim;
|
|
638
665
|
"dynamic-redeem": DynamicRedeem;
|
|
666
|
+
"form-dialog": FormDialog;
|
|
639
667
|
"form-input": FormInput;
|
|
640
668
|
"form-select": FormSelect;
|
|
641
669
|
"form-structure": FormStructure;
|
|
@@ -661,6 +689,7 @@ declare module "@stencil/core" {
|
|
|
661
689
|
"distributor-lookup": LocalJSX.DistributorLookup & JSXBase.HTMLAttributes<HTMLDistributorLookupElement>;
|
|
662
690
|
"dynamic-claim": LocalJSX.DynamicClaim & JSXBase.HTMLAttributes<HTMLDynamicClaimElement>;
|
|
663
691
|
"dynamic-redeem": LocalJSX.DynamicRedeem & JSXBase.HTMLAttributes<HTMLDynamicRedeemElement>;
|
|
692
|
+
"form-dialog": LocalJSX.FormDialog & JSXBase.HTMLAttributes<HTMLFormDialogElement>;
|
|
664
693
|
"form-input": LocalJSX.FormInput & JSXBase.HTMLAttributes<HTMLFormInputElement>;
|
|
665
694
|
"form-select": LocalJSX.FormSelect & JSXBase.HTMLAttributes<HTMLFormSelectElement>;
|
|
666
695
|
"form-structure": LocalJSX.FormStructure & JSXBase.HTMLAttributes<HTMLFormStructureElement>;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { AnyObjectSchema } from 'yup';
|
|
2
|
-
import { Field, FieldType, FormHookInterface, FormStateOptions } from "../types/forms";
|
|
2
|
+
import { Field, FieldType, FormElement, FormHookInterface, FormStateOptions } from "../types/forms";
|
|
3
3
|
export declare class FormHook<T> {
|
|
4
4
|
private isSubmitted;
|
|
5
|
+
private subscribers;
|
|
5
6
|
private context;
|
|
6
7
|
private schemaObject;
|
|
8
|
+
private haltValidation;
|
|
7
9
|
private validationType;
|
|
8
10
|
private subscribedFields;
|
|
9
11
|
formErrors: {
|
|
@@ -11,6 +13,13 @@ export declare class FormHook<T> {
|
|
|
11
13
|
};
|
|
12
14
|
formController: any;
|
|
13
15
|
constructor(context: FormHookInterface<T>, schemaObject: AnyObjectSchema, formStateOptions?: FormStateOptions);
|
|
16
|
+
subscribe: (formName: string, formElement: FormElement) => number;
|
|
17
|
+
unsubscribe: (formName: string) => {
|
|
18
|
+
name: string;
|
|
19
|
+
context: FormElement;
|
|
20
|
+
}[];
|
|
21
|
+
reset(): void;
|
|
22
|
+
resetFormErrorMessage: () => string;
|
|
14
23
|
getFormErrors: () => {
|
|
15
24
|
[key: string]: string;
|
|
16
25
|
};
|
|
@@ -5,6 +5,7 @@ export interface FormHookInterface<T> {
|
|
|
5
5
|
structure: string;
|
|
6
6
|
renderControl: {};
|
|
7
7
|
isLoading: boolean;
|
|
8
|
+
errorMessage: string;
|
|
8
9
|
language: LanguageKeys;
|
|
9
10
|
structureObject: StructureObject;
|
|
10
11
|
formSubmit: (formValues: T) => void;
|
|
@@ -45,4 +46,11 @@ export type Params = {
|
|
|
45
46
|
formLocaleName: LocaleFormKeys;
|
|
46
47
|
};
|
|
47
48
|
export type FormFieldParams = Record<string, Params>;
|
|
49
|
+
export interface FormElement {
|
|
50
|
+
reset: (newValue?: string) => void;
|
|
51
|
+
}
|
|
52
|
+
export type Subscribers = {
|
|
53
|
+
name: string;
|
|
54
|
+
context: FormElement;
|
|
55
|
+
}[];
|
|
48
56
|
export {};
|
|
@@ -48,6 +48,7 @@ export declare const localeSchema: import("yup").ObjectSchema<{
|
|
|
48
48
|
requestFailedPleaseTryAgainLater?: string;
|
|
49
49
|
};
|
|
50
50
|
general: {
|
|
51
|
+
close?: string;
|
|
51
52
|
noSelectOptions?: string;
|
|
52
53
|
};
|
|
53
54
|
lang: string;
|
|
@@ -227,6 +228,7 @@ export declare const localeSchema: import("yup").ObjectSchema<{
|
|
|
227
228
|
requestFailedPleaseTryAgainLater: undefined;
|
|
228
229
|
};
|
|
229
230
|
general: {
|
|
231
|
+
close: undefined;
|
|
230
232
|
noSelectOptions: undefined;
|
|
231
233
|
};
|
|
232
234
|
lang: undefined;
|
package/package.json
CHANGED
|
@@ -1,256 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Built by ShiftSoftware
|
|
3
|
-
* Copyright (c)
|
|
4
|
-
*/
|
|
5
|
-
'use strict';
|
|
6
|
-
|
|
7
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
8
|
-
|
|
9
|
-
const index = require('./index-603d8f32.js');
|
|
10
|
-
const cn = require('./cn-f559f9e5.js');
|
|
11
|
-
const getLocalLanguage = require('./get-local-language-ebb05d9e.js');
|
|
12
|
-
const loader = require('./loader-baf2418b.js');
|
|
13
|
-
|
|
14
|
-
const formInputCss = "*,: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-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--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-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){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-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height: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:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-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,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{all:initial!important;display:block}*{font-family:Arial}.static{position:static}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0}.left-0{left:0}.top-0{top:0}.-z-10{z-index:-10}.mb-\\[4px\\]{margin-bottom:4px}.ms-0\\.5{margin-inline-start:.125rem}.flex{display:flex}.inline-flex{display:inline-flex}.h-\\[38px\\]{height:38px}.w-full{width:100%}.flex-1{flex:1 1 0%}.-translate-y-\\[4px\\]{--tw-translate-y:-4px}.-translate-y-\\[4px\\],.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.appearance-none{appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-md{border-radius:.375rem}.border{border-width:1px}.\\!border-red-500{--tw-border-opacity:1!important;border-color:rgb(239 68 68/var(--tw-border-opacity,1))!important}.px-2{padding-left:.5rem;padding-right:.5rem}.px-\\[12px\\]{padding-left:12px;padding-right:12px}.py-\\[6px\\]{padding-bottom:6px;padding-top:6px}.pt-\\[1px\\]{padding-top:1px}.text-\\[12px\\]{font-size:12px}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-75{opacity:.75}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.focus\\:border-slate-600:focus{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.focus\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(239\\2c 68\\2c 68\\2c 0\\.25\\)\\]:focus{--tw-shadow:0 0 0 0.2rem rgba(239,68,68,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(71\\2c 85\\2c 105\\2c 0\\.25\\)\\]:focus{--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.disabled\\:bg-white:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.\\[\\&\\:\\:-webkit-inner-spin-button\\]\\:appearance-none::-webkit-inner-spin-button,.\\[\\&\\:\\:-webkit-outer-spin-button\\]\\:appearance-none::-webkit-outer-spin-button{appearance:none}.pointer-events-auto{pointer-events:auto}.z-\\[10\\]{z-index:10}.-mt-\\[8px\\]{margin-top:-8px}.mt-\\[8px\\]{margin-top:8px}.hidden{display:none}.size-5{height:1.25rem;width:1.25rem}.size-6{height:1.5rem;width:1.5rem}.size-\\[22px\\]{height:22px;width:22px}.h-\\[100px\\]{height:100px}.max-h-\\[250px\\]{max-height:250px}.-translate-y-\\[4px\\],.-translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%}.translate-y-\\[38px\\]{--tw-translate-y:38px}.rotate-180,.translate-y-\\[38px\\],.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.animate-spin-2s{animation:spin 2s linear infinite}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-\\[\\#9CA3AF\\]{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.enabled\\:border-slate-600:enabled{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.enabled\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(71\\2c 85\\2c 105\\2c 0\\.25\\)\\]:enabled{--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.enabled\\:focus\\:border-slate-600:focus:enabled{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.enabled\\:focus\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(71\\2c 85\\2c 105\\2c 0\\.25\\)\\]:focus:enabled{--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.disabled\\:opacity-75:disabled{opacity:.75}.mx-auto{margin-left:auto;margin-right:auto}.min-h-\\[100px\\]{min-height:100px}.w-fit{width:fit-content}.rounded-\\[8px\\]{border-radius:8px}.border-\\[\\#f2aeb5\\]{--tw-border-opacity:1;border-color:rgb(242 174 181/var(--tw-border-opacity,1))}.bg-\\[\\#f7d7d8\\]{--tw-bg-opacity:1;background-color:rgb(247 215 216/var(--tw-bg-opacity,1))}.px-\\[16px\\]{padding-left:16px;padding-right:16px}.py-\\[16px\\]{padding-bottom:16px;padding-top:16px}.py-\\[8px\\]{padding-bottom:8px;padding-top:8px}.text-\\[20px\\]{font-size:20px}.text-\\[\\#58151c\\]{--tw-text-opacity:1;color:rgb(88 21 28/var(--tw-text-opacity,1))}.size-full{height:100%;width:100%}.-translate-y-full,.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.rounded{border-radius:.25rem}.bg-slate-600{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.duration-1000{transition-duration:1s}.enabled\\:hover\\:bg-slate-600:hover:enabled{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.enabled\\:active\\:bg-slate-800:active:enabled{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.-mt-\\[4px\\]{margin-top:-4px}.h-\\[200px\\]{height:200px}.-translate-y-\\[10px\\]{--tw-translate-y:-10px}.-translate-y-\\[10px\\],.translate-y-\\[calc\\(100\\%-5px\\)\\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\\[calc\\(100\\%-5px\\)\\]{--tw-translate-y:calc(100% - 5px)}.resize-none{resize:none}";
|
|
15
|
-
const FormInputStyle0 = formInputCss;
|
|
16
|
-
|
|
17
|
-
const FormInput = class {
|
|
18
|
-
constructor(hostRef) {
|
|
19
|
-
index.registerInstance(this, hostRef);
|
|
20
|
-
this.name = undefined;
|
|
21
|
-
this.type = undefined;
|
|
22
|
-
this.label = undefined;
|
|
23
|
-
this.class = undefined;
|
|
24
|
-
this.isError = undefined;
|
|
25
|
-
this.disabled = undefined;
|
|
26
|
-
this.componentId = undefined;
|
|
27
|
-
this.inputPreFix = undefined;
|
|
28
|
-
this.isRequired = undefined;
|
|
29
|
-
this.placeholder = undefined;
|
|
30
|
-
this.errorMessage = undefined;
|
|
31
|
-
this.defaultValue = undefined;
|
|
32
|
-
this.componentClass = undefined;
|
|
33
|
-
this.numberDirection = undefined;
|
|
34
|
-
this.language = 'en';
|
|
35
|
-
this.formLocaleName = undefined;
|
|
36
|
-
this.inputChanges = undefined;
|
|
37
|
-
this.onChangeMiddleware = undefined;
|
|
38
|
-
this.locale = getLocalLanguage.localeSchema.getDefault();
|
|
39
|
-
}
|
|
40
|
-
async componentWillLoad() {
|
|
41
|
-
await this.changeLanguage(this.language);
|
|
42
|
-
}
|
|
43
|
-
async changeLanguage(newLanguage) {
|
|
44
|
-
this.locale = await getLocalLanguage.getLocaleLanguage(newLanguage);
|
|
45
|
-
}
|
|
46
|
-
render() {
|
|
47
|
-
const { class: inputClass, type, disabled, label, isError, name, errorMessage, placeholder, isRequired, inputChanges } = this;
|
|
48
|
-
const prefix = this.el.getElementsByClassName('prefix')[0];
|
|
49
|
-
const prefixWidth = prefix ? prefix.getBoundingClientRect().width : 0;
|
|
50
|
-
const texts = this.locale.forms[this.formLocaleName];
|
|
51
|
-
const onInput = this.onChangeMiddleware ? event => inputChanges(this.onChangeMiddleware(event)) : inputChanges;
|
|
52
|
-
return (index.h(index.Host, { key: '079dce246ec83c5190a7f1c1972204d88d32d146' }, index.h("label", { key: '0ae5338fc8768d4b0f8fcde117bc2fa7dfbc534e', id: this.componentId, class: cn.cn('relative w-full inline-flex flex-col', this.componentClass) }, label && (index.h("div", { key: 'e07ac798e530e4850006402d0b2c3cbca8ac5ac5', class: "mb-[4px]" }, texts[label] || label, isRequired && index.h("span", { key: '5a3c3ecd54686a26337821cedb2b36221d44faae', class: "ms-0.5 text-red-600" }, "*"))), index.h("div", { key: 'e5dd30615ed6223c23d721b1368dfa6e2ad08db3', dir: this.numberDirection ? 'ltr' : this.locale.direction, class: cn.cn('relative', { 'opacity-75': disabled }) }, this.inputPreFix && index.h("div", { key: '2b3480db10c9a31ce593128f0e800e370226ce9a', class: "prefix absolute h-[38px] px-2 left-0 top-0 pointer-events-none items-center justify-center flex" }, this.inputPreFix), index.h("input", { key: '14ad7ac6a5c44a26f498f1660715eceaa111b5f2', name: name, type: type, onInput: onInput, disabled: disabled, defaultValue: this.defaultValue, style: Object.assign({}, (prefixWidth ? { paddingLeft: `${prefixWidth}px` } : {})), placeholder: texts[placeholder] || texts[label] || placeholder || label, class: cn.cn('border appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none form-input disabled:bg-white flex-1 py-[6px] px-[12px] transition duration-300 rounded-md outline-none focus:border-slate-600 focus:shadow-[0_0_0_0.2rem_rgba(71,85,105,0.25)] w-full', { '!border-red-500 focus:shadow-[0_0_0_0.2rem_rgba(239,68,68,0.25)]': isError, 'rtl-form-input': this.locale.direction === 'rtl' && this.numberDirection }, inputClass) })), index.h("div", { key: 'bc51de50564b5e192adcb142b6a77484baeacc2c', class: cn.cn('absolute text-[12px] pt-[1px] -z-10 text-red-500 opacity-0 -translate-y-[4px] bottom-0 transition duration-300', {
|
|
53
|
-
'translate-y-full error-message opacity-100': isError,
|
|
54
|
-
}) }, texts[errorMessage] || this.locale.forms.inputValueIsIncorrect || errorMessage))));
|
|
55
|
-
}
|
|
56
|
-
get el() { return index.getElement(this); }
|
|
57
|
-
static get watchers() { return {
|
|
58
|
-
"language": ["changeLanguage"]
|
|
59
|
-
}; }
|
|
60
|
-
};
|
|
61
|
-
FormInput.style = FormInputStyle0;
|
|
62
|
-
|
|
63
|
-
const formSelectCss = "*,: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-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--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-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){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-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height: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:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-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,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{all:initial!important;display:block}*{font-family:Arial}.rtl-form-input::-moz-placeholder{direction:rtl;text-align:right}.rtl-form-input::placeholder{direction:rtl;text-align:right}.static{position:static}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0}.left-0{left:0}.top-0{top:0}.-z-10{z-index:-10}.mb-\\[4px\\]{margin-bottom:4px}.ms-0\\.5{margin-inline-start:.125rem}.flex{display:flex}.inline-flex{display:inline-flex}.h-\\[38px\\]{height:38px}.w-full{width:100%}.flex-1{flex:1 1 0%}.-translate-y-\\[4px\\]{--tw-translate-y:-4px}.-translate-y-\\[4px\\],.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.appearance-none{appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-md{border-radius:.375rem}.border{border-width:1px}.\\!border-red-500{--tw-border-opacity:1!important;border-color:rgb(239 68 68/var(--tw-border-opacity,1))!important}.px-2{padding-left:.5rem;padding-right:.5rem}.px-\\[12px\\]{padding-left:12px;padding-right:12px}.py-\\[6px\\]{padding-bottom:6px;padding-top:6px}.pt-\\[1px\\]{padding-top:1px}.text-\\[12px\\]{font-size:12px}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-75{opacity:.75}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.focus\\:border-slate-600:focus{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.focus\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(239\\2c 68\\2c 68\\2c 0\\.25\\)\\]:focus{--tw-shadow:0 0 0 0.2rem rgba(239,68,68,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(71\\2c 85\\2c 105\\2c 0\\.25\\)\\]:focus{--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.disabled\\:bg-white:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.\\[\\&\\:\\:-webkit-inner-spin-button\\]\\:appearance-none::-webkit-inner-spin-button,.\\[\\&\\:\\:-webkit-outer-spin-button\\]\\:appearance-none::-webkit-outer-spin-button{appearance:none}.pointer-events-auto{pointer-events:auto}.z-\\[10\\]{z-index:10}.-mt-\\[8px\\]{margin-top:-8px}.mt-\\[8px\\]{margin-top:8px}.hidden{display:none}.size-5{height:1.25rem;width:1.25rem}.size-6{height:1.5rem;width:1.5rem}.size-\\[22px\\]{height:22px;width:22px}.h-\\[100px\\]{height:100px}.max-h-\\[250px\\]{max-height:250px}.-translate-y-\\[4px\\],.-translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%}.translate-y-\\[38px\\]{--tw-translate-y:38px}.rotate-180,.translate-y-\\[38px\\],.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.animate-spin-2s{animation:spin 2s linear infinite}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-\\[\\#9CA3AF\\]{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.enabled\\:border-slate-600:enabled{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.enabled\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(71\\2c 85\\2c 105\\2c 0\\.25\\)\\]:enabled{--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.enabled\\:focus\\:border-slate-600:focus:enabled{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.enabled\\:focus\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(71\\2c 85\\2c 105\\2c 0\\.25\\)\\]:focus:enabled{--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.disabled\\:opacity-75:disabled{opacity:.75}.mx-auto{margin-left:auto;margin-right:auto}.min-h-\\[100px\\]{min-height:100px}.w-fit{width:fit-content}.rounded-\\[8px\\]{border-radius:8px}.border-\\[\\#f2aeb5\\]{--tw-border-opacity:1;border-color:rgb(242 174 181/var(--tw-border-opacity,1))}.bg-\\[\\#f7d7d8\\]{--tw-bg-opacity:1;background-color:rgb(247 215 216/var(--tw-bg-opacity,1))}.px-\\[16px\\]{padding-left:16px;padding-right:16px}.py-\\[16px\\]{padding-bottom:16px;padding-top:16px}.py-\\[8px\\]{padding-bottom:8px;padding-top:8px}.text-\\[20px\\]{font-size:20px}.text-\\[\\#58151c\\]{--tw-text-opacity:1;color:rgb(88 21 28/var(--tw-text-opacity,1))}.size-full{height:100%;width:100%}.-translate-y-full,.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.rounded{border-radius:.25rem}.bg-slate-600{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.duration-1000{transition-duration:1s}.enabled\\:hover\\:bg-slate-600:hover:enabled{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.enabled\\:active\\:bg-slate-800:active:enabled{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.-mt-\\[4px\\]{margin-top:-4px}.h-\\[200px\\]{height:200px}.-translate-y-\\[10px\\]{--tw-translate-y:-10px}.-translate-y-\\[10px\\],.translate-y-\\[calc\\(100\\%-5px\\)\\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\\[calc\\(100\\%-5px\\)\\]{--tw-translate-y:calc(100% - 5px)}.resize-none{resize:none}";
|
|
64
|
-
const FormSelectStyle0 = formSelectCss;
|
|
65
|
-
|
|
66
|
-
const FormSelect = class {
|
|
67
|
-
constructor(hostRef) {
|
|
68
|
-
index.registerInstance(this, hostRef);
|
|
69
|
-
this.toggleDropdown = () => {
|
|
70
|
-
if (this.isOpen)
|
|
71
|
-
this.isOpen = false;
|
|
72
|
-
else
|
|
73
|
-
this.adjustDropdownPosition();
|
|
74
|
-
};
|
|
75
|
-
this.closeDropdown = (event) => {
|
|
76
|
-
if (!this.el.contains(event.target)) {
|
|
77
|
-
this.isOpen = false;
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
this.name = undefined;
|
|
81
|
-
this.label = undefined;
|
|
82
|
-
this.isError = undefined;
|
|
83
|
-
this.disabled = undefined;
|
|
84
|
-
this.componentId = undefined;
|
|
85
|
-
this.isRequired = undefined;
|
|
86
|
-
this.errorMessage = undefined;
|
|
87
|
-
this.componentClass = undefined;
|
|
88
|
-
this.formLocaleName = undefined;
|
|
89
|
-
this.fetcher = undefined;
|
|
90
|
-
this.language = 'en';
|
|
91
|
-
this.inputChanges = undefined;
|
|
92
|
-
this.placeholder = 'Select an option';
|
|
93
|
-
this.isLoading = undefined;
|
|
94
|
-
this.isOpen = false;
|
|
95
|
-
this.selectedValue = '';
|
|
96
|
-
this.openUpwards = false;
|
|
97
|
-
this.options = [];
|
|
98
|
-
this.fetchingErrorMessage = null;
|
|
99
|
-
this.locale = getLocalLanguage.localeSchema.getDefault();
|
|
100
|
-
}
|
|
101
|
-
async changeLanguage(newLanguage) {
|
|
102
|
-
this.locale = await getLocalLanguage.getLocaleLanguage(newLanguage);
|
|
103
|
-
this.fetch();
|
|
104
|
-
}
|
|
105
|
-
async componentWillLoad() {
|
|
106
|
-
await this.changeLanguage(this.language);
|
|
107
|
-
}
|
|
108
|
-
adjustDropdownPosition() {
|
|
109
|
-
requestAnimationFrame(() => {
|
|
110
|
-
const selectButton = this.el.getElementsByClassName('select-button')[0];
|
|
111
|
-
const selectContainer = this.el.getElementsByClassName('select-container')[0];
|
|
112
|
-
const rect = selectButton.getBoundingClientRect();
|
|
113
|
-
const spaceBelow = window.innerHeight - rect.bottom - 20; // 20 is padding
|
|
114
|
-
this.openUpwards = spaceBelow < selectContainer.getBoundingClientRect().height;
|
|
115
|
-
setTimeout(() => {
|
|
116
|
-
this.isOpen = true;
|
|
117
|
-
}, 10);
|
|
118
|
-
});
|
|
119
|
-
}
|
|
120
|
-
handleSelection(option) {
|
|
121
|
-
this.selectedValue = option.value;
|
|
122
|
-
this.inputChanges(option.value);
|
|
123
|
-
this.isOpen = false;
|
|
124
|
-
}
|
|
125
|
-
handleKeyDown(event) {
|
|
126
|
-
if (!this.isOpen)
|
|
127
|
-
return;
|
|
128
|
-
if (event.key === 'Escape') {
|
|
129
|
-
this.isOpen = false;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
async fetch() {
|
|
133
|
-
try {
|
|
134
|
-
this.isLoading = true;
|
|
135
|
-
if (this.abortController)
|
|
136
|
-
this.abortController.abort();
|
|
137
|
-
this.abortController = new AbortController();
|
|
138
|
-
const options = await this.fetcher(this.language, this.abortController.signal);
|
|
139
|
-
this.fetchingErrorMessage = null;
|
|
140
|
-
this.options = options;
|
|
141
|
-
}
|
|
142
|
-
catch (error) {
|
|
143
|
-
if (error && (error === null || error === void 0 ? void 0 : error.name) === 'AbortError')
|
|
144
|
-
return;
|
|
145
|
-
console.error(error);
|
|
146
|
-
this.options = [];
|
|
147
|
-
this.fetchingErrorMessage = error.message;
|
|
148
|
-
}
|
|
149
|
-
finally {
|
|
150
|
-
this.isLoading = false;
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
async componentDidLoad() {
|
|
154
|
-
document.addEventListener('click', this.closeDropdown);
|
|
155
|
-
document.addEventListener('keydown', this.handleKeyDown.bind(this));
|
|
156
|
-
}
|
|
157
|
-
async disconnectedCallback() {
|
|
158
|
-
this.abortController.abort();
|
|
159
|
-
document.removeEventListener('click', this.closeDropdown);
|
|
160
|
-
document.removeEventListener('keydown', this.handleKeyDown.bind(this));
|
|
161
|
-
}
|
|
162
|
-
render() {
|
|
163
|
-
const texts = this.locale.forms[this.formLocaleName];
|
|
164
|
-
const selectedItem = this.options.find(item => this.selectedValue === item.value);
|
|
165
|
-
if (!selectedItem) {
|
|
166
|
-
this.inputChanges('');
|
|
167
|
-
this.selectedValue = '';
|
|
168
|
-
}
|
|
169
|
-
return (index.h(index.Host, { key: '562c0d9b52622e131fd05a000ffdb11f60460757' }, index.h("label", { key: 'fc29e774ae6b09ecbc065c795c6c581e8024123a', id: this.componentId, class: cn.cn('relative w-full inline-flex flex-col', this.componentClass) }, this.label && (index.h("div", { key: 'fa663a177fb92d2e4133f2a162910fb74743f3b6', class: "mb-[4px]" }, texts[this.label] || this.label, this.isRequired && index.h("span", { key: 'c47a7057afded058ff176d5d4854273e4719a49c', class: "ms-0.5 text-red-600" }, "*"))), index.h("input", { key: 'dfde114c4393b61b09f732f54a209379fe36a029', name: this.name, type: "string", hidden: true, value: this.selectedValue }), index.h("div", { key: 'c70fc3c67f8c86696022557df03af555ff9f8c0d', class: "relative" }, index.h("button", { key: '237714e00aa2640974f8768aea44bd4c8c75464f', type: "button", name: this.name, disabled: this.disabled, onClick: this.toggleDropdown, class: cn.cn('select-button enabled:focus:border-slate-600 enabled:focus:shadow-[0_0_0_0.2rem_rgba(71,85,105,0.25)] border bg-white h-[38px] flex justify-between overflow-hidden disabled:opacity-75 flex-1 py-[6px] px-[12px] transition-all duration-300 rounded-md outline-none w-full', {
|
|
170
|
-
'text-[#9CA3AF]': !selectedItem,
|
|
171
|
-
'!border-red-500 focus:shadow-[0_0_0_0.2rem_rgba(239,68,68,0.25)]': this.isError,
|
|
172
|
-
'enabled:border-slate-600 enabled:shadow-[0_0_0_0.2rem_rgba(71,85,105,0.25)]': this.isOpen,
|
|
173
|
-
}) }, selectedItem ? selectedItem.label : index.h("span", null, texts[this.placeholder]), index.h("svg", { key: '796d9919db735447a34c6441d1a597dbbf7e59be', fill: "none", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", class: cn.cn('select-arrow size-6 transition duration-300', { 'rotate-180': this.isOpen }) }, index.h("path", { key: '598694998590e961db0ecb161ca8aadf34166fe4', d: "m6 9 6 6 6-6" }))), index.h("div", { key: 'c8587527f7e56aacc70bbc63edafb726f675e2c5', class: cn.cn('select-container z-[10] flex flex-col pointer-events-none absolute w-full bg-white border rounded-md shadow opacity-0 transition-opacity duration-300 max-h-[250px] overflow-auto', {
|
|
174
|
-
'opacity-100 pointer-events-auto': this.isOpen,
|
|
175
|
-
'top-0 -mt-[8px] -translate-y-full': this.openUpwards,
|
|
176
|
-
'top-0 mt-[8px] translate-y-[38px]': !this.openUpwards,
|
|
177
|
-
}) }, !!this.options.length &&
|
|
178
|
-
this.options.map(option => (index.h("button", { type: "button", onClick: () => this.handleSelection(option), class: cn.cn('select-option flex justify-between px-4 py-2 hover:bg-slate-100 transition-colors duration-300', {
|
|
179
|
-
'bg-slate-200': this.selectedValue === option.value,
|
|
180
|
-
}) }, index.h("div", null, option.label), index.h("svg", { fill: "none", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", class: cn.cn('size-5 opacity-0 transition duration-300', { 'opacity-100': this.selectedValue === option.value }) }, index.h("path", { d: "M20 6 9 17l-5-5" }))))), !this.options.length && (index.h("div", { key: '522aaa79d8957022325fbc8f8e8db0d63c3d04f9', class: cn.cn('select-empty-container h-[100px] flex items-center justify-center', { 'text-red-500': this.fetchingErrorMessage }) }, this.fetchingErrorMessage && (this.locale.errors[this.fetchingErrorMessage] || this.locale.errors.wildCard), !this.fetchingErrorMessage && (this.isLoading ? index.h("img", { class: "animate-spin-2s size-[22px]", src: loader.loaderSvg }) : this.locale.general.noSelectOptions))))), index.h("div", { key: 'f7f9a5779e6ee3985facf497bd23543e12ac8908', class: cn.cn('absolute pt-[1px] -z-10 text-[12px] text-red-500 opacity-0 -translate-y-[4px] bottom-0 transition duration-300', {
|
|
181
|
-
'translate-y-full error-message opacity-100': this.isError,
|
|
182
|
-
}) }, texts[this.errorMessage] || this.locale.forms.inputValueIsIncorrect || this.errorMessage))));
|
|
183
|
-
}
|
|
184
|
-
get el() { return index.getElement(this); }
|
|
185
|
-
static get watchers() { return {
|
|
186
|
-
"language": ["changeLanguage"]
|
|
187
|
-
}; }
|
|
188
|
-
};
|
|
189
|
-
FormSelect.style = FormSelectStyle0;
|
|
190
|
-
|
|
191
|
-
const whiteLoaderSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIgogICAgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxvYWRlciI+CiAgICA8cGF0aCBkPSJNMTIgMnY0IiAvPgogICAgPHBhdGggZD0ibTE2LjIgNy44IDIuOS0yLjkiIC8+CiAgICA8cGF0aCBkPSJNMTggMTJoNCIgLz4KICAgIDxwYXRoIGQ9Im0xNi4yIDE2LjIgMi45IDIuOSIgLz4KICAgIDxwYXRoIGQ9Ik0xMiAxOHY0IiAvPgogICAgPHBhdGggZD0ibTQuOSAxOS4xIDIuOS0yLjkiIC8+CiAgICA8cGF0aCBkPSJNMiAxMmg0IiAvPgogICAgPHBhdGggZD0ibTQuOSA0LjkgMi45IDIuOSIgLz4KPC9zdmc+';
|
|
192
|
-
|
|
193
|
-
const formSubmitCss = "*,: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-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--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-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){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-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height: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:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-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,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{all:initial!important;display:block}*{font-family:Arial}.static{position:static}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0}.left-0{left:0}.top-0{top:0}.-z-10{z-index:-10}.mb-\\[4px\\]{margin-bottom:4px}.ms-0\\.5{margin-inline-start:.125rem}.flex{display:flex}.inline-flex{display:inline-flex}.h-\\[38px\\]{height:38px}.w-full{width:100%}.flex-1{flex:1 1 0%}.-translate-y-\\[4px\\]{--tw-translate-y:-4px}.-translate-y-\\[4px\\],.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.appearance-none{appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-md{border-radius:.375rem}.border{border-width:1px}.\\!border-red-500{--tw-border-opacity:1!important;border-color:rgb(239 68 68/var(--tw-border-opacity,1))!important}.px-2{padding-left:.5rem;padding-right:.5rem}.px-\\[12px\\]{padding-left:12px;padding-right:12px}.py-\\[6px\\]{padding-bottom:6px;padding-top:6px}.pt-\\[1px\\]{padding-top:1px}.text-\\[12px\\]{font-size:12px}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-75{opacity:.75}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.focus\\:border-slate-600:focus{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.focus\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(239\\2c 68\\2c 68\\2c 0\\.25\\)\\]:focus{--tw-shadow:0 0 0 0.2rem rgba(239,68,68,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(71\\2c 85\\2c 105\\2c 0\\.25\\)\\]:focus{--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.disabled\\:bg-white:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.\\[\\&\\:\\:-webkit-inner-spin-button\\]\\:appearance-none::-webkit-inner-spin-button,.\\[\\&\\:\\:-webkit-outer-spin-button\\]\\:appearance-none::-webkit-outer-spin-button{appearance:none}.pointer-events-auto{pointer-events:auto}.z-\\[10\\]{z-index:10}.-mt-\\[8px\\]{margin-top:-8px}.mt-\\[8px\\]{margin-top:8px}.hidden{display:none}.size-5{height:1.25rem;width:1.25rem}.size-6{height:1.5rem;width:1.5rem}.size-\\[22px\\]{height:22px;width:22px}.h-\\[100px\\]{height:100px}.max-h-\\[250px\\]{max-height:250px}.-translate-y-\\[4px\\],.-translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%}.translate-y-\\[38px\\]{--tw-translate-y:38px}.rotate-180,.translate-y-\\[38px\\],.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.animate-spin-2s{animation:spin 2s linear infinite}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-\\[\\#9CA3AF\\]{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.enabled\\:border-slate-600:enabled{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.enabled\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(71\\2c 85\\2c 105\\2c 0\\.25\\)\\]:enabled{--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.enabled\\:focus\\:border-slate-600:focus:enabled{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.enabled\\:focus\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(71\\2c 85\\2c 105\\2c 0\\.25\\)\\]:focus:enabled{--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.disabled\\:opacity-75:disabled{opacity:.75}.mx-auto{margin-left:auto;margin-right:auto}.min-h-\\[100px\\]{min-height:100px}.w-fit{width:fit-content}.rounded-\\[8px\\]{border-radius:8px}.border-\\[\\#f2aeb5\\]{--tw-border-opacity:1;border-color:rgb(242 174 181/var(--tw-border-opacity,1))}.bg-\\[\\#f7d7d8\\]{--tw-bg-opacity:1;background-color:rgb(247 215 216/var(--tw-bg-opacity,1))}.px-\\[16px\\]{padding-left:16px;padding-right:16px}.py-\\[16px\\]{padding-bottom:16px;padding-top:16px}.py-\\[8px\\]{padding-bottom:8px;padding-top:8px}.text-\\[20px\\]{font-size:20px}.text-\\[\\#58151c\\]{--tw-text-opacity:1;color:rgb(88 21 28/var(--tw-text-opacity,1))}.size-full{height:100%;width:100%}.-translate-y-full,.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.rounded{border-radius:.25rem}.bg-slate-600{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.duration-1000{transition-duration:1s}.enabled\\:hover\\:bg-slate-600:hover:enabled{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.enabled\\:active\\:bg-slate-800:active:enabled{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.-mt-\\[4px\\]{margin-top:-4px}.h-\\[200px\\]{height:200px}.-translate-y-\\[10px\\]{--tw-translate-y:-10px}.-translate-y-\\[10px\\],.translate-y-\\[calc\\(100\\%-5px\\)\\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\\[calc\\(100\\%-5px\\)\\]{--tw-translate-y:calc(100% - 5px)}.resize-none{resize:none}";
|
|
194
|
-
const FormSubmitStyle0 = formSubmitCss;
|
|
195
|
-
|
|
196
|
-
const FormSubmit = class {
|
|
197
|
-
constructor(hostRef) {
|
|
198
|
-
index.registerInstance(this, hostRef);
|
|
199
|
-
this.isLoading = undefined;
|
|
200
|
-
this.params = undefined;
|
|
201
|
-
this.structureElement = undefined;
|
|
202
|
-
}
|
|
203
|
-
render() {
|
|
204
|
-
return (index.h("button", Object.assign({ key: 'fb7054e64a235b04fdaf97a9086c5f3ccbbe636d', type: "submit" }, this.params, { disabled: this.isLoading, id: this.structureElement.id, class: cn.cn('h-[38px] relative overflow-hidden px-4 enabled:hover:bg-slate-600 transition-colors duration-300 bg-slate-700 enabled:active:bg-slate-800 rounded text-white flex items-center', {
|
|
205
|
-
'bg-slate-600': this.isLoading,
|
|
206
|
-
}) }), index.h("div", { key: '08b08d4b345ba9074a7c7f2724382bbe131113da', class: "opacity-0" }, this.structureElement.class), index.h("div", { key: '139e9f1a1c3dee3959dd33911e7f98078a52c589', class: cn.cn('absolute size-full top-0 left-0 flex items-center justify-center transition duration-1000', { 'translate-y-full': this.isLoading }) }, this.structureElement.class), index.h("div", { key: 'c000dea48ed2d3f93bbfe3869455573663d57497', class: cn.cn('absolute flex justify-center items-center top-0 left-0 size-full transition duration-1000 -translate-y-full', { 'translate-y-0': this.isLoading }) }, index.h("img", { key: 'f94df8b5893c4e19b1b43c059e383a4435c8e99a', class: "animate-spin-2s size-[22px]", src: whiteLoaderSvg }))));
|
|
207
|
-
}
|
|
208
|
-
};
|
|
209
|
-
FormSubmit.style = FormSubmitStyle0;
|
|
210
|
-
|
|
211
|
-
const formTextAreaCss = "*,: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-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--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-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){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-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height: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:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-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,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{all:initial!important;display:block}*{font-family:Arial}.static{position:static}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0}.left-0{left:0}.top-0{top:0}.-z-10{z-index:-10}.mb-\\[4px\\]{margin-bottom:4px}.ms-0\\.5{margin-inline-start:.125rem}.flex{display:flex}.inline-flex{display:inline-flex}.h-\\[38px\\]{height:38px}.w-full{width:100%}.flex-1{flex:1 1 0%}.-translate-y-\\[4px\\]{--tw-translate-y:-4px}.-translate-y-\\[4px\\],.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.appearance-none{appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-md{border-radius:.375rem}.border{border-width:1px}.\\!border-red-500{--tw-border-opacity:1!important;border-color:rgb(239 68 68/var(--tw-border-opacity,1))!important}.px-2{padding-left:.5rem;padding-right:.5rem}.px-\\[12px\\]{padding-left:12px;padding-right:12px}.py-\\[6px\\]{padding-bottom:6px;padding-top:6px}.pt-\\[1px\\]{padding-top:1px}.text-\\[12px\\]{font-size:12px}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-75{opacity:.75}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.focus\\:border-slate-600:focus{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.focus\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(239\\2c 68\\2c 68\\2c 0\\.25\\)\\]:focus{--tw-shadow:0 0 0 0.2rem rgba(239,68,68,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(71\\2c 85\\2c 105\\2c 0\\.25\\)\\]:focus{--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.disabled\\:bg-white:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.\\[\\&\\:\\:-webkit-inner-spin-button\\]\\:appearance-none::-webkit-inner-spin-button,.\\[\\&\\:\\:-webkit-outer-spin-button\\]\\:appearance-none::-webkit-outer-spin-button{appearance:none}.pointer-events-auto{pointer-events:auto}.z-\\[10\\]{z-index:10}.-mt-\\[8px\\]{margin-top:-8px}.mt-\\[8px\\]{margin-top:8px}.hidden{display:none}.size-5{height:1.25rem;width:1.25rem}.size-6{height:1.5rem;width:1.5rem}.size-\\[22px\\]{height:22px;width:22px}.h-\\[100px\\]{height:100px}.max-h-\\[250px\\]{max-height:250px}.-translate-y-\\[4px\\],.-translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%}.translate-y-\\[38px\\]{--tw-translate-y:38px}.rotate-180,.translate-y-\\[38px\\],.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.animate-spin-2s{animation:spin 2s linear infinite}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-\\[\\#9CA3AF\\]{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.enabled\\:border-slate-600:enabled{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.enabled\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(71\\2c 85\\2c 105\\2c 0\\.25\\)\\]:enabled{--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.enabled\\:focus\\:border-slate-600:focus:enabled{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.enabled\\:focus\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(71\\2c 85\\2c 105\\2c 0\\.25\\)\\]:focus:enabled{--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.disabled\\:opacity-75:disabled{opacity:.75}.mx-auto{margin-left:auto;margin-right:auto}.min-h-\\[100px\\]{min-height:100px}.w-fit{width:fit-content}.rounded-\\[8px\\]{border-radius:8px}.border-\\[\\#f2aeb5\\]{--tw-border-opacity:1;border-color:rgb(242 174 181/var(--tw-border-opacity,1))}.bg-\\[\\#f7d7d8\\]{--tw-bg-opacity:1;background-color:rgb(247 215 216/var(--tw-bg-opacity,1))}.px-\\[16px\\]{padding-left:16px;padding-right:16px}.py-\\[16px\\]{padding-bottom:16px;padding-top:16px}.py-\\[8px\\]{padding-bottom:8px;padding-top:8px}.text-\\[20px\\]{font-size:20px}.text-\\[\\#58151c\\]{--tw-text-opacity:1;color:rgb(88 21 28/var(--tw-text-opacity,1))}.size-full{height:100%;width:100%}.-translate-y-full,.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.rounded{border-radius:.25rem}.bg-slate-600{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.duration-1000{transition-duration:1s}.enabled\\:hover\\:bg-slate-600:hover:enabled{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.enabled\\:active\\:bg-slate-800:active:enabled{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.-mt-\\[4px\\]{margin-top:-4px}.h-\\[200px\\]{height:200px}.-translate-y-\\[10px\\]{--tw-translate-y:-10px}.-translate-y-\\[10px\\],.translate-y-\\[calc\\(100\\%-5px\\)\\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\\[calc\\(100\\%-5px\\)\\]{--tw-translate-y:calc(100% - 5px)}.resize-none{resize:none}";
|
|
212
|
-
const FormTextAreaStyle0 = formTextAreaCss;
|
|
213
|
-
|
|
214
|
-
const FormTextArea = class {
|
|
215
|
-
constructor(hostRef) {
|
|
216
|
-
index.registerInstance(this, hostRef);
|
|
217
|
-
this.name = undefined;
|
|
218
|
-
this.label = undefined;
|
|
219
|
-
this.isError = undefined;
|
|
220
|
-
this.disabled = undefined;
|
|
221
|
-
this.isRequired = undefined;
|
|
222
|
-
this.componentId = undefined;
|
|
223
|
-
this.placeholder = undefined;
|
|
224
|
-
this.errorMessage = undefined;
|
|
225
|
-
this.componentClass = undefined;
|
|
226
|
-
this.language = 'en';
|
|
227
|
-
this.formLocaleName = undefined;
|
|
228
|
-
this.inputChanges = undefined;
|
|
229
|
-
this.locale = getLocalLanguage.localeSchema.getDefault();
|
|
230
|
-
}
|
|
231
|
-
async componentWillLoad() {
|
|
232
|
-
await this.changeLanguage(this.language);
|
|
233
|
-
}
|
|
234
|
-
async changeLanguage(newLanguage) {
|
|
235
|
-
this.locale = await getLocalLanguage.getLocaleLanguage(newLanguage);
|
|
236
|
-
}
|
|
237
|
-
render() {
|
|
238
|
-
const { disabled, label, isError, name, errorMessage, placeholder, isRequired, inputChanges } = this;
|
|
239
|
-
const prefix = this.el.getElementsByClassName('prefix')[0];
|
|
240
|
-
const prefixWidth = prefix ? prefix.getBoundingClientRect().width : 0;
|
|
241
|
-
const texts = this.locale.forms[this.formLocaleName];
|
|
242
|
-
return (index.h(index.Host, { key: '96fc237174362ee609e9557ad3019092d9341798' }, index.h("label", { key: '02988b40069f9854d3495f208c4762637fe02232', id: this.componentId, class: cn.cn('relative w-full inline-flex flex-col', this.componentClass) }, label && (index.h("div", { key: '04320fcc9ec59e0acf827f65af7ac2cb5a139156', class: "mb-[4px]" }, texts[label] || label, isRequired && index.h("span", { key: '1b2c7bc3e9d11d0672e2d8dbcbdd09eff1a1f1fa', class: "ms-0.5 text-red-600" }, "*"))), index.h("div", { key: '3132e43064f5f9ed932fb4fa235d88c5a9bc76ae', class: cn.cn('relative', { 'opacity-75': disabled }) }, index.h("textarea", { key: '28faa273ee7405133e6b582cd2ed8f6180449510', name: name, disabled: disabled, onInput: inputChanges, style: Object.assign({}, (prefixWidth ? { paddingLeft: `${prefixWidth}px` } : {})), placeholder: texts[placeholder] || texts[label] || placeholder || label, class: cn.cn('border h-[200px] form-input resize-none disabled:bg-white flex-1 py-[6px] px-[12px] transition duration-300 rounded-md outline-none focus:border-slate-600 focus:shadow-[0_0_0_0.2rem_rgba(71,85,105,0.25)] w-full', { '!border-red-500 focus:shadow-[0_0_0_0.2rem_rgba(239,68,68,0.25)]': isError }) })), index.h("div", { key: '6cb1e8278f26d4cf8996cc961c5faf6cde7f1708', class: cn.cn('absolute text-[12px] -mt-[4px] -z-10 text-red-500 opacity-0 -translate-y-[10px] bottom-0 transition duration-300', {
|
|
243
|
-
'translate-y-[calc(100%-5px)] error-message opacity-100': isError,
|
|
244
|
-
}) }, texts[errorMessage] || this.locale.forms.inputValueIsIncorrect || errorMessage))));
|
|
245
|
-
}
|
|
246
|
-
get el() { return index.getElement(this); }
|
|
247
|
-
static get watchers() { return {
|
|
248
|
-
"language": ["changeLanguage"]
|
|
249
|
-
}; }
|
|
250
|
-
};
|
|
251
|
-
FormTextArea.style = FormTextAreaStyle0;
|
|
252
|
-
|
|
253
|
-
exports.form_input = FormInput;
|
|
254
|
-
exports.form_select = FormSelect;
|
|
255
|
-
exports.form_submit = FormSubmit;
|
|
256
|
-
exports.form_text_area = FormTextArea;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Built by ShiftSoftware
|
|
3
|
-
* Copyright (c)
|
|
4
|
-
*/
|
|
5
|
-
import{p as t,H as e,h as a}from"./p-75476014.js";import{c as o}from"./p-98d9e7ab.js";const r=t(class extends e{constructor(){super(),this.__registerHost(),this.isLoading=void 0,this.params=void 0,this.structureElement=void 0}render(){return a("button",Object.assign({key:"fb7054e64a235b04fdaf97a9086c5f3ccbbe636d",type:"submit"},this.params,{disabled:this.isLoading,id:this.structureElement.id,class:o("h-[38px] relative overflow-hidden px-4 enabled:hover:bg-slate-600 transition-colors duration-300 bg-slate-700 enabled:active:bg-slate-800 rounded text-white flex items-center",{"bg-slate-600":this.isLoading})}),a("div",{key:"08b08d4b345ba9074a7c7f2724382bbe131113da",class:"opacity-0"},this.structureElement.class),a("div",{key:"139e9f1a1c3dee3959dd33911e7f98078a52c589",class:o("absolute size-full top-0 left-0 flex items-center justify-center transition duration-1000",{"translate-y-full":this.isLoading})},this.structureElement.class),a("div",{key:"c000dea48ed2d3f93bbfe3869455573663d57497",class:o("absolute flex justify-center items-center top-0 left-0 size-full transition duration-1000 -translate-y-full",{"translate-y-0":this.isLoading})},a("img",{key:"f94df8b5893c4e19b1b43c059e383a4435c8e99a",class:"animate-spin-2s size-[22px]",src:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIgogICAgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxvYWRlciI+CiAgICA8cGF0aCBkPSJNMTIgMnY0IiAvPgogICAgPHBhdGggZD0ibTE2LjIgNy44IDIuOS0yLjkiIC8+CiAgICA8cGF0aCBkPSJNMTggMTJoNCIgLz4KICAgIDxwYXRoIGQ9Im0xNi4yIDE2LjIgMi45IDIuOSIgLz4KICAgIDxwYXRoIGQ9Ik0xMiAxOHY0IiAvPgogICAgPHBhdGggZD0ibTQuOSAxOS4xIDIuOS0yLjkiIC8+CiAgICA8cGF0aCBkPSJNMiAxMmg0IiAvPgogICAgPHBhdGggZD0ibTQuOSA0LjkgMi45IDIuOSIgLz4KPC9zdmc+"})))}static get style(){return'*,: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-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--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-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){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-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height: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:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-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,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{all:initial!important;display:block}*{font-family:Arial}.static{position:static}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0}.left-0{left:0}.top-0{top:0}.-z-10{z-index:-10}.mb-\\[4px\\]{margin-bottom:4px}.ms-0\\.5{margin-inline-start:.125rem}.flex{display:flex}.inline-flex{display:inline-flex}.h-\\[38px\\]{height:38px}.w-full{width:100%}.flex-1{flex:1 1 0%}.-translate-y-\\[4px\\]{--tw-translate-y:-4px}.-translate-y-\\[4px\\],.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.appearance-none{appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-md{border-radius:.375rem}.border{border-width:1px}.\\!border-red-500{--tw-border-opacity:1!important;border-color:rgb(239 68 68/var(--tw-border-opacity,1))!important}.px-2{padding-left:.5rem;padding-right:.5rem}.px-\\[12px\\]{padding-left:12px;padding-right:12px}.py-\\[6px\\]{padding-bottom:6px;padding-top:6px}.pt-\\[1px\\]{padding-top:1px}.text-\\[12px\\]{font-size:12px}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-75{opacity:.75}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.focus\\:border-slate-600:focus{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.focus\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(239\\2c 68\\2c 68\\2c 0\\.25\\)\\]:focus{--tw-shadow:0 0 0 0.2rem rgba(239,68,68,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(71\\2c 85\\2c 105\\2c 0\\.25\\)\\]:focus{--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.disabled\\:bg-white:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.\\[\\&\\:\\:-webkit-inner-spin-button\\]\\:appearance-none::-webkit-inner-spin-button,.\\[\\&\\:\\:-webkit-outer-spin-button\\]\\:appearance-none::-webkit-outer-spin-button{appearance:none}.pointer-events-auto{pointer-events:auto}.z-\\[10\\]{z-index:10}.-mt-\\[8px\\]{margin-top:-8px}.mt-\\[8px\\]{margin-top:8px}.hidden{display:none}.size-5{height:1.25rem;width:1.25rem}.size-6{height:1.5rem;width:1.5rem}.size-\\[22px\\]{height:22px;width:22px}.h-\\[100px\\]{height:100px}.max-h-\\[250px\\]{max-height:250px}.-translate-y-\\[4px\\],.-translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%}.translate-y-\\[38px\\]{--tw-translate-y:38px}.rotate-180,.translate-y-\\[38px\\],.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.animate-spin-2s{animation:spin 2s linear infinite}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-\\[\\#9CA3AF\\]{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.enabled\\:border-slate-600:enabled{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.enabled\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(71\\2c 85\\2c 105\\2c 0\\.25\\)\\]:enabled{--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.enabled\\:focus\\:border-slate-600:focus:enabled{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.enabled\\:focus\\:shadow-\\[0_0_0_0\\.2rem_rgba\\(71\\2c 85\\2c 105\\2c 0\\.25\\)\\]:focus:enabled{--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.disabled\\:opacity-75:disabled{opacity:.75}.mx-auto{margin-left:auto;margin-right:auto}.min-h-\\[100px\\]{min-height:100px}.w-fit{width:fit-content}.rounded-\\[8px\\]{border-radius:8px}.border-\\[\\#f2aeb5\\]{--tw-border-opacity:1;border-color:rgb(242 174 181/var(--tw-border-opacity,1))}.bg-\\[\\#f7d7d8\\]{--tw-bg-opacity:1;background-color:rgb(247 215 216/var(--tw-bg-opacity,1))}.px-\\[16px\\]{padding-left:16px;padding-right:16px}.py-\\[16px\\]{padding-bottom:16px;padding-top:16px}.py-\\[8px\\]{padding-bottom:8px;padding-top:8px}.text-\\[20px\\]{font-size:20px}.text-\\[\\#58151c\\]{--tw-text-opacity:1;color:rgb(88 21 28/var(--tw-text-opacity,1))}.size-full{height:100%;width:100%}.-translate-y-full,.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.rounded{border-radius:.25rem}.bg-slate-600{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.duration-1000{transition-duration:1s}.enabled\\:hover\\:bg-slate-600:hover:enabled{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.enabled\\:active\\:bg-slate-800:active:enabled{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.-mt-\\[4px\\]{margin-top:-4px}.h-\\[200px\\]{height:200px}.-translate-y-\\[10px\\]{--tw-translate-y:-10px}.-translate-y-\\[10px\\],.translate-y-\\[calc\\(100\\%-5px\\)\\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\\[calc\\(100\\%-5px\\)\\]{--tw-translate-y:calc(100% - 5px)}.resize-none{resize:none}'}},[0,"form-submit",{isLoading:[4,"is-loading"],params:[16],structureElement:[16]}]);function i(){"undefined"!=typeof customElements&&["form-submit"].forEach((t=>{"form-submit"===t&&(customElements.get(t)||customElements.define(t,r))}))}i();export{r as F,i as d}
|