@lluc_llull/ui-lib 0.35.0 → 0.36.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lluc_llull/ui-lib",
-  "version": "0.35.0",
+  "version": "0.36.1",
   "description": "Angular UI component library",
   "author": "lluc_llull",
   "license": "MIT",
@@ -14,6 +14,7 @@
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0",
     "lucide-angular": "^0.577.0",
     "swiper": "^12.0.0",
     "three": "^0.183.0",
@@ -147,6 +148,14 @@
       "types": "./types/lluc_llull-ui-lib-footers-visual-footer.d.ts",
       "default": "./fesm2022/lluc_llull-ui-lib-footers-visual-footer.mjs"
     },
+    "./forms": {
+      "types": "./types/lluc_llull-ui-lib-forms.d.ts",
+      "default": "./fesm2022/lluc_llull-ui-lib-forms.mjs"
+    },
+    "./forms/contact-form": {
+      "types": "./types/lluc_llull-ui-lib-forms-contact-form.d.ts",
+      "default": "./fesm2022/lluc_llull-ui-lib-forms-contact-form.mjs"
+    },
     "./headers": {
       "types": "./types/lluc_llull-ui-lib-headers.d.ts",
       "default": "./fesm2022/lluc_llull-ui-lib-headers.mjs"

package/src/lib/styles/main.css

@@ -191,10 +191,6 @@ ul {
 }
 
 .debug-grid-overlay {
-  display: none;
-}
-
-body.show-grid .debug-grid-overlay {
   position: fixed !important;
   inset-block: 0;
   left: 50%;
@@ -207,14 +203,119 @@ body.show-grid .debug-grid-overlay {
   grid-template-columns: repeat(12, 1fr);
   column-gap: 1.5rem;
 }
-body.show-grid .debug-grid-overlay div {
+.debug-grid-overlay div {
   height: 100%;
   background-color: rgba(255, 0, 0, 0.13);
 }
+.debug-grid-overlay {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 160ms ease-out, visibility 0s linear 520ms;
+}
+.debug-grid-overlay div {
+  transform: scaleY(0);
+  transform-origin: top;
+  transition: transform 360ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.debug-grid-overlay div:nth-child(1) {
+  transition-delay: 154ms;
+}
+.debug-grid-overlay div:nth-child(2) {
+  transition-delay: 140ms;
+}
+.debug-grid-overlay div:nth-child(3) {
+  transition-delay: 126ms;
+}
+.debug-grid-overlay div:nth-child(4) {
+  transition-delay: 112ms;
+}
+.debug-grid-overlay div:nth-child(5) {
+  transition-delay: 98ms;
+}
+.debug-grid-overlay div:nth-child(6) {
+  transition-delay: 84ms;
+}
+.debug-grid-overlay div:nth-child(7) {
+  transition-delay: 70ms;
+}
+.debug-grid-overlay div:nth-child(8) {
+  transition-delay: 56ms;
+}
+.debug-grid-overlay div:nth-child(9) {
+  transition-delay: 42ms;
+}
+.debug-grid-overlay div:nth-child(10) {
+  transition-delay: 28ms;
+}
+.debug-grid-overlay div:nth-child(11) {
+  transition-delay: 14ms;
+}
+.debug-grid-overlay div:nth-child(12) {
+  transition-delay: 0ms;
+}
+
 body.show-grid .debug-grid-overlay {
-  display: grid !important;
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 160ms ease-out, visibility 0s;
+}
+body.show-grid .debug-grid-overlay div:nth-child(1) {
+  transform: scaleY(1);
+  transition-delay: 0ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(2) {
+  transform: scaleY(1);
+  transition-delay: 14ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(3) {
+  transform: scaleY(1);
+  transition-delay: 28ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(4) {
+  transform: scaleY(1);
+  transition-delay: 42ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(5) {
+  transform: scaleY(1);
+  transition-delay: 56ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(6) {
+  transform: scaleY(1);
+  transition-delay: 70ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(7) {
+  transform: scaleY(1);
+  transition-delay: 84ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(8) {
+  transform: scaleY(1);
+  transition-delay: 98ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(9) {
+  transform: scaleY(1);
+  transition-delay: 112ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(10) {
+  transform: scaleY(1);
+  transition-delay: 126ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(11) {
+  transform: scaleY(1);
+  transition-delay: 140ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(12) {
+  transform: scaleY(1);
+  transition-delay: 154ms;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .debug-grid-overlay,
+  .debug-grid-overlay div,
+  body.show-grid .debug-grid-overlay {
+    transition-duration: 1ms;
+    transition-delay: 0ms;
+  }
+}
 .main-grid {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));

package/styles/main.css

@@ -191,10 +191,6 @@ ul {
 }
 
 .debug-grid-overlay {
-  display: none;
-}
-
-body.show-grid .debug-grid-overlay {
   position: fixed !important;
   inset-block: 0;
   left: 50%;
@@ -207,14 +203,119 @@ body.show-grid .debug-grid-overlay {
   grid-template-columns: repeat(12, 1fr);
   column-gap: 1.5rem;
 }
-body.show-grid .debug-grid-overlay div {
+.debug-grid-overlay div {
   height: 100%;
   background-color: rgba(255, 0, 0, 0.13);
 }
+.debug-grid-overlay {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 160ms ease-out, visibility 0s linear 520ms;
+}
+.debug-grid-overlay div {
+  transform: scaleY(0);
+  transform-origin: top;
+  transition: transform 360ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.debug-grid-overlay div:nth-child(1) {
+  transition-delay: 154ms;
+}
+.debug-grid-overlay div:nth-child(2) {
+  transition-delay: 140ms;
+}
+.debug-grid-overlay div:nth-child(3) {
+  transition-delay: 126ms;
+}
+.debug-grid-overlay div:nth-child(4) {
+  transition-delay: 112ms;
+}
+.debug-grid-overlay div:nth-child(5) {
+  transition-delay: 98ms;
+}
+.debug-grid-overlay div:nth-child(6) {
+  transition-delay: 84ms;
+}
+.debug-grid-overlay div:nth-child(7) {
+  transition-delay: 70ms;
+}
+.debug-grid-overlay div:nth-child(8) {
+  transition-delay: 56ms;
+}
+.debug-grid-overlay div:nth-child(9) {
+  transition-delay: 42ms;
+}
+.debug-grid-overlay div:nth-child(10) {
+  transition-delay: 28ms;
+}
+.debug-grid-overlay div:nth-child(11) {
+  transition-delay: 14ms;
+}
+.debug-grid-overlay div:nth-child(12) {
+  transition-delay: 0ms;
+}
+
 body.show-grid .debug-grid-overlay {
-  display: grid !important;
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 160ms ease-out, visibility 0s;
+}
+body.show-grid .debug-grid-overlay div:nth-child(1) {
+  transform: scaleY(1);
+  transition-delay: 0ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(2) {
+  transform: scaleY(1);
+  transition-delay: 14ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(3) {
+  transform: scaleY(1);
+  transition-delay: 28ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(4) {
+  transform: scaleY(1);
+  transition-delay: 42ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(5) {
+  transform: scaleY(1);
+  transition-delay: 56ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(6) {
+  transform: scaleY(1);
+  transition-delay: 70ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(7) {
+  transform: scaleY(1);
+  transition-delay: 84ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(8) {
+  transform: scaleY(1);
+  transition-delay: 98ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(9) {
+  transform: scaleY(1);
+  transition-delay: 112ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(10) {
+  transform: scaleY(1);
+  transition-delay: 126ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(11) {
+  transform: scaleY(1);
+  transition-delay: 140ms;
+}
+body.show-grid .debug-grid-overlay div:nth-child(12) {
+  transform: scaleY(1);
+  transition-delay: 154ms;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .debug-grid-overlay,
+  .debug-grid-overlay div,
+  body.show-grid .debug-grid-overlay {
+    transition-duration: 1ms;
+    transition-delay: 0ms;
+  }
+}
 .main-grid {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));

package/types/lluc_llull-ui-lib-forms-contact-form.d.ts

@@ -0,0 +1,86 @@
+import * as i0 from "@angular/core";
+import { EventEmitter } from "@angular/core";
+import { FormControl, FormGroup } from "@angular/forms";
+import { UiLibImageI } from "@lluc_llull/ui-lib/interfaces";
+export interface ContactFormTextsI {
+  title: string;
+  intro: string;
+  requiredHint: string;
+  name: string;
+  surname: string;
+  email: string;
+  phone: string;
+  message: string;
+  namePlaceholder: string;
+  surnamePlaceholder: string;
+  emailPlaceholder: string;
+  phonePlaceholder: string;
+  messagePlaceholder: string;
+  privacyTitle: string;
+  privacyResponsible: string;
+  privacyPurpose: string;
+  privacyLegalBasis: string;
+  privacyRecipients: string;
+  privacyRetention: string;
+  privacyRights: string;
+  privacyLinkLead: string;
+  privacyLink: string;
+  privacyLinkTail: string;
+  send: string;
+  sending: string;
+  success: string;
+  error: string;
+  deliveryNotConfigured: string;
+  requiredError: string;
+  emailError: string;
+  lengthError: string;
+  invalidError: string;
+}
+export interface ContactFormSubmissionI {
+  name: string;
+  surname: string;
+  email: string;
+  phone: string;
+  message: string;
+  website: string;
+}
+type ContactField = 'name' | 'email' | 'message';
+type ContactFormStatus = 'idle' | 'sending' | 'success' | 'error';
+export declare class ContactFormComponent {
+  texts: ContactFormTextsI;
+  privacyUrl: string;
+  img: UiLibImageI | null;
+  readonly messageSubmitted: EventEmitter<ContactFormSubmissionI>;
+  readonly status: import("@angular/core").WritableSignal<ContactFormStatus>;
+  readonly submissionError: import("@angular/core").WritableSignal<string>;
+  submitted: boolean;
+  readonly form: FormGroup<{
+    name: FormControl<string>;
+    surname: FormControl<string>;
+    email: FormControl<string>;
+    phone: FormControl<string>;
+    message: FormControl<string>;
+    website: FormControl<string>;
+  }>;
+  getError(field: ContactField): string;
+  submit(): void;
+  setSubmissionResult(success: boolean, errorMessage?: string): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ContactFormComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ContactFormComponent, "lib-contact-form", never, {
+    "texts": {
+      "alias": "texts";
+      "required": true;
+    };
+    "privacyUrl": {
+      "alias": "privacyUrl";
+      "required": false;
+    };
+    "img": {
+      "alias": "img";
+      "required": false;
+    };
+  }, {
+    "messageSubmitted": "messageSubmitted";
+  }, never, never, true, never>;
+}
+export {};

package/types/lluc_llull-ui-lib-forms.d.ts

@@ -0,0 +1,220 @@
+import * as i0 from "@angular/core";
+import { ControlValueAccessor } from "@angular/forms";
+export declare class FormFieldComponent {
+  controlId: string;
+  label: string;
+  required: boolean;
+  hint: string;
+  error: string;
+  get errorId(): string;
+  get hintId(): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "lib-form-field", never, {
+    "controlId": {
+      "alias": "controlId";
+      "required": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+    };
+    "hint": {
+      "alias": "hint";
+      "required": false;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+export type UiLibInputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';
+export declare class FormInputComponent implements ControlValueAccessor {
+  id: string;
+  type: UiLibInputType;
+  placeholder: string;
+  autocomplete: string;
+  describedBy: string;
+  maxLength: number | null;
+  required: boolean;
+  invalid: boolean;
+  value: string;
+  disabled: boolean;
+  private onChange;
+  private onTouched;
+  writeValue(value: string | null): void;
+  registerOnChange(fn: (value: string) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(disabled: boolean): void;
+  handleInput(event: Event): void;
+  handleBlur(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<FormInputComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<FormInputComponent, "lib-form-input", never, {
+    "id": {
+      "alias": "id";
+      "required": true;
+    };
+    "type": {
+      "alias": "type";
+      "required": false;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+    };
+    "autocomplete": {
+      "alias": "autocomplete";
+      "required": false;
+    };
+    "describedBy": {
+      "alias": "describedBy";
+      "required": false;
+    };
+    "maxLength": {
+      "alias": "maxLength";
+      "required": false;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+    };
+  }, {}, never, never, true, never>;
+}
+export interface UiLibSelectOptionI {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+export declare class FormSelectComponent implements ControlValueAccessor {
+  id: string;
+  options: UiLibSelectOptionI[];
+  placeholder: string;
+  describedBy: string;
+  required: boolean;
+  invalid: boolean;
+  value: string;
+  disabled: boolean;
+  private onChange;
+  private onTouched;
+  writeValue(value: string | null): void;
+  registerOnChange(fn: (value: string) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(disabled: boolean): void;
+  handleChange(event: Event): void;
+  handleBlur(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<FormSelectComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<FormSelectComponent, "lib-form-select", never, {
+    "id": {
+      "alias": "id";
+      "required": true;
+    };
+    "options": {
+      "alias": "options";
+      "required": false;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+    };
+    "describedBy": {
+      "alias": "describedBy";
+      "required": false;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+    };
+  }, {}, never, never, true, never>;
+}
+export declare class FormTextareaComponent implements ControlValueAccessor {
+  id: string;
+  placeholder: string;
+  describedBy: string;
+  rows: number;
+  maxLength: number | null;
+  required: boolean;
+  invalid: boolean;
+  showCounter: boolean;
+  value: string;
+  disabled: boolean;
+  private onChange;
+  private onTouched;
+  writeValue(value: string | null): void;
+  registerOnChange(fn: (value: string) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(disabled: boolean): void;
+  handleInput(event: Event): void;
+  handleBlur(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<FormTextareaComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<FormTextareaComponent, "lib-form-textarea", never, {
+    "id": {
+      "alias": "id";
+      "required": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+    };
+    "describedBy": {
+      "alias": "describedBy";
+      "required": false;
+    };
+    "rows": {
+      "alias": "rows";
+      "required": false;
+    };
+    "maxLength": {
+      "alias": "maxLength";
+      "required": false;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+    };
+    "showCounter": {
+      "alias": "showCounter";
+      "required": false;
+    };
+  }, {}, never, never, true, never>;
+}
+export declare class FormToggleComponent implements ControlValueAccessor {
+  id: string;
+  describedBy: string;
+  checked: boolean;
+  disabled: boolean;
+  private onChange;
+  private onTouched;
+  writeValue(value: boolean | null): void;
+  registerOnChange(fn: (value: boolean) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(disabled: boolean): void;
+  handleChange(event: Event): void;
+  handleBlur(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<FormToggleComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<FormToggleComponent, "lib-form-toggle", never, {
+    "id": {
+      "alias": "id";
+      "required": true;
+    };
+    "describedBy": {
+      "alias": "describedBy";
+      "required": false;
+    };
+  }, {}, never, ["*"], true, never>;
+}

package/types/lluc_llull-ui-lib-mapper.d.ts

@@ -5,6 +5,7 @@ type ComponentMapperFn = (props: any, cdn?: string) => any;
 export declare const map404: ComponentMapperFn;
 export declare const mapCategoryProgress: ComponentMapperFn;
 export declare const mapContactMinimal: ComponentMapperFn;
+export declare const mapContactForm: ComponentMapperFn;
 export declare const mapHeaderClear: ComponentMapperFn;
 export declare const mapHeroSection: ComponentMapperFn;
 export declare const mapLangModal: (langs: any[], currentLang?: string) => UiLibLangItemI[];