@lluc_llull/ui-lib 0.34.3 → 0.36.0

package/fesm2022/lluc_llull-ui-lib-forms.mjs

@@ -0,0 +1,443 @@
+import * as i0 from "@angular/core";
+import { Component, Input, forwardRef } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+var FormFieldComponent = class FormFieldComponent {
+	controlId = "";
+	label = "";
+	required = false;
+	hint = "";
+	error = "";
+	get errorId() {
+		return `${this.controlId}-error`;
+	}
+	get hintId() {
+		return `${this.controlId}-hint`;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: FormFieldComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: FormFieldComponent,
+		isStandalone: true,
+		selector: "lib-form-field",
+		inputs: {
+			controlId: "controlId",
+			label: "label",
+			required: "required",
+			hint: "hint",
+			error: "error"
+		},
+		host: { classAttribute: "form-field" },
+		ngImport: i0,
+		template: "@if (label) {\n    <label [for]=\"controlId\">\n        {{ label }}\n        @if (required) {\n            <span class=\"form-field-required\" aria-hidden=\"true\">*</span>\n        }\n    </label>\n}\n<ng-content />\n@if (hint && !error) {\n    <span class=\"form-field-hint\" [id]=\"hintId\">{{ hint }}</span>\n}\n@if (error) {\n    <span class=\"form-field-error\" [id]=\"errorId\" role=\"alert\">{{ error }}</span>\n}\n",
+		styles: [":host{display:flex;min-width:0;flex-direction:column;gap:.65rem}:host>label{color:var(--text-primary);font-family:var(--font-base);font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;padding-top:1rem}.form-field-required{color:var(--color-secondary)}.form-field-hint{color:var(--text-primary-60);font-size:.8rem;line-height:1.4}.form-field-error{color:#b42318;font-size:.875rem;line-height:1.4}\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: FormFieldComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-form-field",
+			standalone: true,
+			host: { class: "form-field" },
+			template: "@if (label) {\n    <label [for]=\"controlId\">\n        {{ label }}\n        @if (required) {\n            <span class=\"form-field-required\" aria-hidden=\"true\">*</span>\n        }\n    </label>\n}\n<ng-content />\n@if (hint && !error) {\n    <span class=\"form-field-hint\" [id]=\"hintId\">{{ hint }}</span>\n}\n@if (error) {\n    <span class=\"form-field-error\" [id]=\"errorId\" role=\"alert\">{{ error }}</span>\n}\n",
+			styles: [":host{display:flex;min-width:0;flex-direction:column;gap:.65rem}:host>label{color:var(--text-primary);font-family:var(--font-base);font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;padding-top:1rem}.form-field-required{color:var(--color-secondary)}.form-field-hint{color:var(--text-primary-60);font-size:.8rem;line-height:1.4}.form-field-error{color:#b42318;font-size:.875rem;line-height:1.4}\n"]
+		}]
+	}],
+	propDecorators: {
+		controlId: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		label: [{ type: Input }],
+		required: [{ type: Input }],
+		hint: [{ type: Input }],
+		error: [{ type: Input }]
+	}
+});
+var FormInputComponent = class FormInputComponent {
+	id = "";
+	type = "text";
+	placeholder = "";
+	autocomplete = "";
+	describedBy = "";
+	maxLength = null;
+	required = false;
+	invalid = false;
+	value = "";
+	disabled = false;
+	onChange = () => {};
+	onTouched = () => {};
+	writeValue(value) {
+		this.value = value ?? "";
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(disabled) {
+		this.disabled = disabled;
+	}
+	handleInput(event) {
+		this.value = event.target.value;
+		this.onChange(this.value);
+	}
+	handleBlur() {
+		this.onTouched();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: FormInputComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		type: FormInputComponent,
+		isStandalone: true,
+		selector: "lib-form-input",
+		inputs: {
+			id: "id",
+			type: "type",
+			placeholder: "placeholder",
+			autocomplete: "autocomplete",
+			describedBy: "describedBy",
+			maxLength: "maxLength",
+			required: "required",
+			invalid: "invalid"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => FormInputComponent),
+			multi: true
+		}],
+		ngImport: i0,
+		template: "<input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [attr.autocomplete]=\"autocomplete || null\"\n    [attr.maxlength]=\"maxLength ?? null\"\n    [attr.aria-describedby]=\"describedBy || null\"\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n/>\n",
+		styles: [":host{display:block;min-width:0}input{box-sizing:border-box;width:100%;min-height:3.5rem;border:4px solid var(--border-primary);border-radius:0;padding:.9rem 1rem;background:var(--surface-primary);color:var(--text-primary);font:1rem/1.5 var(--font-base);transition:border-color .16s ease,box-shadow .16s ease}input::placeholder{color:var(--text-primary-50);opacity:1}input:hover:not(:disabled){border-color:var(--text-primary)}input:focus-visible{border-color:var(--color-secondary);outline:2px solid var(--color-secondary);outline-offset:3px;box-shadow:inset 0 -3px 0 var(--color-secondary)}input[aria-invalid=true]{border-color:#b42318}input:disabled{cursor:not-allowed;opacity:.65}@media(prefers-reduced-motion:reduce){input{transition:none}}\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: FormInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-form-input",
+			standalone: true,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => FormInputComponent),
+				multi: true
+			}],
+			template: "<input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [attr.autocomplete]=\"autocomplete || null\"\n    [attr.maxlength]=\"maxLength ?? null\"\n    [attr.aria-describedby]=\"describedBy || null\"\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n/>\n",
+			styles: [":host{display:block;min-width:0}input{box-sizing:border-box;width:100%;min-height:3.5rem;border:4px solid var(--border-primary);border-radius:0;padding:.9rem 1rem;background:var(--surface-primary);color:var(--text-primary);font:1rem/1.5 var(--font-base);transition:border-color .16s ease,box-shadow .16s ease}input::placeholder{color:var(--text-primary-50);opacity:1}input:hover:not(:disabled){border-color:var(--text-primary)}input:focus-visible{border-color:var(--color-secondary);outline:2px solid var(--color-secondary);outline-offset:3px;box-shadow:inset 0 -3px 0 var(--color-secondary)}input[aria-invalid=true]{border-color:#b42318}input:disabled{cursor:not-allowed;opacity:.65}@media(prefers-reduced-motion:reduce){input{transition:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		id: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		type: [{ type: Input }],
+		placeholder: [{ type: Input }],
+		autocomplete: [{ type: Input }],
+		describedBy: [{ type: Input }],
+		maxLength: [{ type: Input }],
+		required: [{ type: Input }],
+		invalid: [{ type: Input }]
+	}
+});
+var FormSelectComponent = class FormSelectComponent {
+	id = "";
+	options = [];
+	placeholder = "";
+	describedBy = "";
+	required = false;
+	invalid = false;
+	value = "";
+	disabled = false;
+	onChange = () => {};
+	onTouched = () => {};
+	writeValue(value) {
+		this.value = value ?? "";
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(disabled) {
+		this.disabled = disabled;
+	}
+	handleChange(event) {
+		this.value = event.target.value;
+		this.onChange(this.value);
+	}
+	handleBlur() {
+		this.onTouched();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: FormSelectComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: FormSelectComponent,
+		isStandalone: true,
+		selector: "lib-form-select",
+		inputs: {
+			id: "id",
+			options: "options",
+			placeholder: "placeholder",
+			describedBy: "describedBy",
+			required: "required",
+			invalid: "invalid"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => FormSelectComponent),
+			multi: true
+		}],
+		ngImport: i0,
+		template: "<select\n    [id]=\"id\"\n    [value]=\"value\"\n    [attr.aria-describedby]=\"describedBy || null\"\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    (change)=\"handleChange($event)\"\n    (blur)=\"handleBlur()\"\n>\n    @if (placeholder) {\n        <option value=\"\" disabled>{{ placeholder }}</option>\n    }\n    @for (option of options; track option.value) {\n        <option [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            {{ option.label }}\n        </option>\n    }\n</select>\n",
+		styles: [":host{display:block;min-width:0}select{box-sizing:border-box;width:100%;min-height:3.5rem;border:4px solid var(--border-primary);border-radius:0;padding:.9rem 1rem;background:var(--surface-primary);color:var(--text-primary);font:1rem/1.5 var(--font-base)}select:hover:not(:disabled){border-color:var(--text-primary)}select:focus-visible{border-color:var(--color-secondary);outline:2px solid var(--color-secondary);outline-offset:3px}select[aria-invalid=true]{border-color:#b42318}select:disabled{cursor:not-allowed;opacity:.65}\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: FormSelectComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-form-select",
+			standalone: true,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => FormSelectComponent),
+				multi: true
+			}],
+			template: "<select\n    [id]=\"id\"\n    [value]=\"value\"\n    [attr.aria-describedby]=\"describedBy || null\"\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    (change)=\"handleChange($event)\"\n    (blur)=\"handleBlur()\"\n>\n    @if (placeholder) {\n        <option value=\"\" disabled>{{ placeholder }}</option>\n    }\n    @for (option of options; track option.value) {\n        <option [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            {{ option.label }}\n        </option>\n    }\n</select>\n",
+			styles: [":host{display:block;min-width:0}select{box-sizing:border-box;width:100%;min-height:3.5rem;border:4px solid var(--border-primary);border-radius:0;padding:.9rem 1rem;background:var(--surface-primary);color:var(--text-primary);font:1rem/1.5 var(--font-base)}select:hover:not(:disabled){border-color:var(--text-primary)}select:focus-visible{border-color:var(--color-secondary);outline:2px solid var(--color-secondary);outline-offset:3px}select[aria-invalid=true]{border-color:#b42318}select:disabled{cursor:not-allowed;opacity:.65}\n"]
+		}]
+	}],
+	propDecorators: {
+		id: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		options: [{ type: Input }],
+		placeholder: [{ type: Input }],
+		describedBy: [{ type: Input }],
+		required: [{ type: Input }],
+		invalid: [{ type: Input }]
+	}
+});
+var FormTextareaComponent = class FormTextareaComponent {
+	id = "";
+	placeholder = "";
+	describedBy = "";
+	rows = 6;
+	maxLength = null;
+	required = false;
+	invalid = false;
+	showCounter = false;
+	value = "";
+	disabled = false;
+	onChange = () => {};
+	onTouched = () => {};
+	writeValue(value) {
+		this.value = value ?? "";
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(disabled) {
+		this.disabled = disabled;
+	}
+	handleInput(event) {
+		this.value = event.target.value;
+		this.onChange(this.value);
+	}
+	handleBlur() {
+		this.onTouched();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: FormTextareaComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: FormTextareaComponent,
+		isStandalone: true,
+		selector: "lib-form-textarea",
+		inputs: {
+			id: "id",
+			placeholder: "placeholder",
+			describedBy: "describedBy",
+			rows: "rows",
+			maxLength: "maxLength",
+			required: "required",
+			invalid: "invalid",
+			showCounter: "showCounter"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => FormTextareaComponent),
+			multi: true
+		}],
+		ngImport: i0,
+		template: "<textarea\n    [id]=\"id\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [rows]=\"rows\"\n    [attr.maxlength]=\"maxLength ?? null\"\n    [attr.aria-describedby]=\"describedBy || null\"\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n></textarea>\n@if (showCounter && maxLength) {\n    <span class=\"form-textarea-counter\" aria-live=\"polite\">\n        {{ value.length }} / {{ maxLength }}\n    </span>\n}\n",
+		styles: [":host{display:block;min-width:0}textarea{box-sizing:border-box;display:block;width:100%;min-height:12rem;border:4px solid var(--border-primary);border-radius:0;padding:.9rem 1rem;background:var(--surface-primary);color:var(--text-primary);font:1rem/1.5 var(--font-base);resize:vertical;transition:border-color .16s ease,box-shadow .16s ease}textarea::placeholder{color:var(--text-primary-50);opacity:1}textarea:hover:not(:disabled){border-color:var(--text-primary)}textarea:focus-visible{border-color:var(--color-secondary);outline:2px solid var(--color-secondary);outline-offset:3px;box-shadow:inset 0 -3px 0 var(--color-secondary)}textarea[aria-invalid=true]{border-color:#b42318}textarea:disabled{cursor:not-allowed;opacity:.65}.form-textarea-counter{display:block;margin-top:.35rem;color:var(--text-primary-60);font-size:.75rem;text-align:right}@media(prefers-reduced-motion:reduce){textarea{transition:none}}\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: FormTextareaComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-form-textarea",
+			standalone: true,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => FormTextareaComponent),
+				multi: true
+			}],
+			template: "<textarea\n    [id]=\"id\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [rows]=\"rows\"\n    [attr.maxlength]=\"maxLength ?? null\"\n    [attr.aria-describedby]=\"describedBy || null\"\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n></textarea>\n@if (showCounter && maxLength) {\n    <span class=\"form-textarea-counter\" aria-live=\"polite\">\n        {{ value.length }} / {{ maxLength }}\n    </span>\n}\n",
+			styles: [":host{display:block;min-width:0}textarea{box-sizing:border-box;display:block;width:100%;min-height:12rem;border:4px solid var(--border-primary);border-radius:0;padding:.9rem 1rem;background:var(--surface-primary);color:var(--text-primary);font:1rem/1.5 var(--font-base);resize:vertical;transition:border-color .16s ease,box-shadow .16s ease}textarea::placeholder{color:var(--text-primary-50);opacity:1}textarea:hover:not(:disabled){border-color:var(--text-primary)}textarea:focus-visible{border-color:var(--color-secondary);outline:2px solid var(--color-secondary);outline-offset:3px;box-shadow:inset 0 -3px 0 var(--color-secondary)}textarea[aria-invalid=true]{border-color:#b42318}textarea:disabled{cursor:not-allowed;opacity:.65}.form-textarea-counter{display:block;margin-top:.35rem;color:var(--text-primary-60);font-size:.75rem;text-align:right}@media(prefers-reduced-motion:reduce){textarea{transition:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		id: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		placeholder: [{ type: Input }],
+		describedBy: [{ type: Input }],
+		rows: [{ type: Input }],
+		maxLength: [{ type: Input }],
+		required: [{ type: Input }],
+		invalid: [{ type: Input }],
+		showCounter: [{ type: Input }]
+	}
+});
+var FormToggleComponent = class FormToggleComponent {
+	id = "";
+	describedBy = "";
+	checked = false;
+	disabled = false;
+	onChange = () => {};
+	onTouched = () => {};
+	writeValue(value) {
+		this.checked = value ?? false;
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(disabled) {
+		this.disabled = disabled;
+	}
+	handleChange(event) {
+		this.checked = event.target.checked;
+		this.onChange(this.checked);
+	}
+	handleBlur() {
+		this.onTouched();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: FormToggleComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		type: FormToggleComponent,
+		isStandalone: true,
+		selector: "lib-form-toggle",
+		inputs: {
+			id: "id",
+			describedBy: "describedBy"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => FormToggleComponent),
+			multi: true
+		}],
+		ngImport: i0,
+		template: "<label class=\"form-toggle\" [for]=\"id\">\n    <input\n        [id]=\"id\"\n        type=\"checkbox\"\n        role=\"switch\"\n        [checked]=\"checked\"\n        [attr.aria-describedby]=\"describedBy || null\"\n        [disabled]=\"disabled\"\n        (change)=\"handleChange($event)\"\n        (blur)=\"handleBlur()\"\n    />\n    <span class=\"form-toggle-track\" aria-hidden=\"true\"><span></span></span>\n    <span class=\"form-toggle-label\"><ng-content /></span>\n</label>\n",
+		styles: [":host{display:inline-block}.form-toggle{display:inline-flex;align-items:center;gap:.75rem;cursor:pointer;font:1rem/1.5 var(--font-base)}.form-toggle input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.form-toggle-track{display:inline-flex;width:2.75rem;height:1.5rem;align-items:center;border:1px solid var(--border-primary-50);padding:.15rem;background:var(--surface-secondary);transition:background-color .16s ease}.form-toggle-track>span{width:1rem;height:1rem;background:var(--text-primary);transition:transform .16s ease}.form-toggle input:checked+.form-toggle-track{border-color:var(--color-secondary);background:var(--color-secondary)}.form-toggle input:checked+.form-toggle-track>span{background:var(--color-primary);transform:translate(1.2rem)}.form-toggle input:focus-visible+.form-toggle-track{outline:2px solid var(--color-secondary);outline-offset:3px}.form-toggle input:disabled+.form-toggle-track,.form-toggle input:disabled~.form-toggle-label{cursor:not-allowed;opacity:.6}@media(prefers-reduced-motion:reduce){.form-toggle-track,.form-toggle-track>span{transition:none}}\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: FormToggleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-form-toggle",
+			standalone: true,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => FormToggleComponent),
+				multi: true
+			}],
+			template: "<label class=\"form-toggle\" [for]=\"id\">\n    <input\n        [id]=\"id\"\n        type=\"checkbox\"\n        role=\"switch\"\n        [checked]=\"checked\"\n        [attr.aria-describedby]=\"describedBy || null\"\n        [disabled]=\"disabled\"\n        (change)=\"handleChange($event)\"\n        (blur)=\"handleBlur()\"\n    />\n    <span class=\"form-toggle-track\" aria-hidden=\"true\"><span></span></span>\n    <span class=\"form-toggle-label\"><ng-content /></span>\n</label>\n",
+			styles: [":host{display:inline-block}.form-toggle{display:inline-flex;align-items:center;gap:.75rem;cursor:pointer;font:1rem/1.5 var(--font-base)}.form-toggle input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.form-toggle-track{display:inline-flex;width:2.75rem;height:1.5rem;align-items:center;border:1px solid var(--border-primary-50);padding:.15rem;background:var(--surface-secondary);transition:background-color .16s ease}.form-toggle-track>span{width:1rem;height:1rem;background:var(--text-primary);transition:transform .16s ease}.form-toggle input:checked+.form-toggle-track{border-color:var(--color-secondary);background:var(--color-secondary)}.form-toggle input:checked+.form-toggle-track>span{background:var(--color-primary);transform:translate(1.2rem)}.form-toggle input:focus-visible+.form-toggle-track{outline:2px solid var(--color-secondary);outline-offset:3px}.form-toggle input:disabled+.form-toggle-track,.form-toggle input:disabled~.form-toggle-label{cursor:not-allowed;opacity:.6}@media(prefers-reduced-motion:reduce){.form-toggle-track,.form-toggle-track>span{transition:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		id: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		describedBy: [{ type: Input }]
+	}
+});
+export { FormFieldComponent, FormInputComponent, FormSelectComponent, FormTextareaComponent, FormToggleComponent };
+
+//# sourceMappingURL=lluc_llull-ui-lib-forms.mjs.map

package/fesm2022/lluc_llull-ui-lib-forms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lluc_llull-ui-lib-forms.mjs","names":[],"sources":["../../../projects/ui-lib/forms/form-field/form-field.component.ts","../../../projects/ui-lib/forms/form-field/form-field.component.html","../../../projects/ui-lib/forms/form-input/form-input.component.ts","../../../projects/ui-lib/forms/form-input/form-input.component.html","../../../projects/ui-lib/forms/form-select/form-select.component.ts","../../../projects/ui-lib/forms/form-select/form-select.component.html","../../../projects/ui-lib/forms/form-textarea/form-textarea.component.ts","../../../projects/ui-lib/forms/form-textarea/form-textarea.component.html","../../../projects/ui-lib/forms/form-toggle/form-toggle.component.ts","../../../projects/ui-lib/forms/form-toggle/form-toggle.component.html"],"sourcesContent":["import { Component, Input } from '@angular/core';\n\n@Component({\n    selector: 'lib-form-field',\n    standalone: true,\n    templateUrl: './form-field.component.html',\n    styleUrl: './form-field.component.scss',\n    host: {\n        class: 'form-field',\n    },\n})\nexport class FormFieldComponent {\n    @Input({ required: true }) controlId = '';\n    @Input() label = '';\n    @Input() required = false;\n    @Input() hint = '';\n    @Input() error = '';\n\n    get errorId(): string {\n        return `${this.controlId}-error`;\n    }\n\n    get hintId(): string {\n        return `${this.controlId}-hint`;\n    }\n}\n","@if (label) {\n    <label [for]=\"controlId\">\n        {{ label }}\n        @if (required) {\n            <span class=\"form-field-required\" aria-hidden=\"true\">*</span>\n        }\n    </label>\n}\n<ng-content />\n@if (hint && !error) {\n    <span class=\"form-field-hint\" [id]=\"hintId\">{{ hint }}</span>\n}\n@if (error) {\n    <span class=\"form-field-error\" [id]=\"errorId\" role=\"alert\">{{ error }}</span>\n}\n","import { Component, forwardRef, Input } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport type UiLibInputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';\n\n@Component({\n    selector: 'lib-form-input',\n    standalone: true,\n    templateUrl: './form-input.component.html',\n    styleUrl: './form-input.component.scss',\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => FormInputComponent),\n            multi: true,\n        },\n    ],\n})\nexport class FormInputComponent implements ControlValueAccessor {\n    @Input({ required: true }) id = '';\n    @Input() type: UiLibInputType = 'text';\n    @Input() placeholder = '';\n    @Input() autocomplete = '';\n    @Input() describedBy = '';\n    @Input() maxLength: number | null = null;\n    @Input() required = false;\n    @Input() invalid = false;\n\n    value = '';\n    disabled = false;\n    private onChange: (value: string) => void = () => {};\n    private onTouched: () => void = () => {};\n\n    writeValue(value: string | null): void {\n        this.value = value ?? '';\n    }\n\n    registerOnChange(fn: (value: string) => void): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(disabled: boolean): void {\n        this.disabled = disabled;\n    }\n\n    handleInput(event: Event): void {\n        this.value = (event.target as HTMLInputElement).value;\n        this.onChange(this.value);\n    }\n\n    handleBlur(): void {\n        this.onTouched();\n    }\n}\n","<input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [attr.autocomplete]=\"autocomplete || null\"\n    [attr.maxlength]=\"maxLength ?? null\"\n    [attr.aria-describedby]=\"describedBy || null\"\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n/>\n","import { Component, forwardRef, Input } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport interface UiLibSelectOptionI {\n    label: string;\n    value: string;\n    disabled?: boolean;\n}\n\n@Component({\n    selector: 'lib-form-select',\n    standalone: true,\n    templateUrl: './form-select.component.html',\n    styleUrl: './form-select.component.scss',\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => FormSelectComponent),\n            multi: true,\n        },\n    ],\n})\nexport class FormSelectComponent implements ControlValueAccessor {\n    @Input({ required: true }) id = '';\n    @Input() options: UiLibSelectOptionI[] = [];\n    @Input() placeholder = '';\n    @Input() describedBy = '';\n    @Input() required = false;\n    @Input() invalid = false;\n\n    value = '';\n    disabled = false;\n    private onChange: (value: string) => void = () => {};\n    private onTouched: () => void = () => {};\n\n    writeValue(value: string | null): void {\n        this.value = value ?? '';\n    }\n\n    registerOnChange(fn: (value: string) => void): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(disabled: boolean): void {\n        this.disabled = disabled;\n    }\n\n    handleChange(event: Event): void {\n        this.value = (event.target as HTMLSelectElement).value;\n        this.onChange(this.value);\n    }\n\n    handleBlur(): void {\n        this.onTouched();\n    }\n}\n","<select\n    [id]=\"id\"\n    [value]=\"value\"\n    [attr.aria-describedby]=\"describedBy || null\"\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    (change)=\"handleChange($event)\"\n    (blur)=\"handleBlur()\"\n>\n    @if (placeholder) {\n        <option value=\"\" disabled>{{ placeholder }}</option>\n    }\n    @for (option of options; track option.value) {\n        <option [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            {{ option.label }}\n        </option>\n    }\n</select>\n","import { Component, forwardRef, Input } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n    selector: 'lib-form-textarea',\n    standalone: true,\n    templateUrl: './form-textarea.component.html',\n    styleUrl: './form-textarea.component.scss',\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => FormTextareaComponent),\n            multi: true,\n        },\n    ],\n})\nexport class FormTextareaComponent implements ControlValueAccessor {\n    @Input({ required: true }) id = '';\n    @Input() placeholder = '';\n    @Input() describedBy = '';\n    @Input() rows = 6;\n    @Input() maxLength: number | null = null;\n    @Input() required = false;\n    @Input() invalid = false;\n    @Input() showCounter = false;\n\n    value = '';\n    disabled = false;\n    private onChange: (value: string) => void = () => {};\n    private onTouched: () => void = () => {};\n\n    writeValue(value: string | null): void {\n        this.value = value ?? '';\n    }\n\n    registerOnChange(fn: (value: string) => void): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(disabled: boolean): void {\n        this.disabled = disabled;\n    }\n\n    handleInput(event: Event): void {\n        this.value = (event.target as HTMLTextAreaElement).value;\n        this.onChange(this.value);\n    }\n\n    handleBlur(): void {\n        this.onTouched();\n    }\n}\n","<textarea\n    [id]=\"id\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [rows]=\"rows\"\n    [attr.maxlength]=\"maxLength ?? null\"\n    [attr.aria-describedby]=\"describedBy || null\"\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n></textarea>\n@if (showCounter && maxLength) {\n    <span class=\"form-textarea-counter\" aria-live=\"polite\">\n        {{ value.length }} / {{ maxLength }}\n    </span>\n}\n","import { Component, forwardRef, Input } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n    selector: 'lib-form-toggle',\n    standalone: true,\n    templateUrl: './form-toggle.component.html',\n    styleUrl: './form-toggle.component.scss',\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => FormToggleComponent),\n            multi: true,\n        },\n    ],\n})\nexport class FormToggleComponent implements ControlValueAccessor {\n    @Input({ required: true }) id = '';\n    @Input() describedBy = '';\n\n    checked = false;\n    disabled = false;\n    private onChange: (value: boolean) => void = () => {};\n    private onTouched: () => void = () => {};\n\n    writeValue(value: boolean | null): void {\n        this.checked = value ?? false;\n    }\n\n    registerOnChange(fn: (value: boolean) => void): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(disabled: boolean): void {\n        this.disabled = disabled;\n    }\n\n    handleChange(event: Event): void {\n        this.checked = (event.target as HTMLInputElement).checked;\n        this.onChange(this.checked);\n    }\n\n    handleBlur(): void {\n        this.onTouched();\n    }\n}\n","<label class=\"form-toggle\" [for]=\"id\">\n    <input\n        [id]=\"id\"\n        type=\"checkbox\"\n        role=\"switch\"\n        [checked]=\"checked\"\n        [attr.aria-describedby]=\"describedBy || null\"\n        [disabled]=\"disabled\"\n        (change)=\"handleChange($event)\"\n        (blur)=\"handleBlur()\"\n    />\n    <span class=\"form-toggle-track\" aria-hidden=\"true\"><span></span></span>\n    <span class=\"form-toggle-label\"><ng-content /></span>\n</label>\n"],"mappings":"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"}

package/fesm2022/lluc_llull-ui-lib-headers-header-clear.mjs

@@ -89,8 +89,8 @@ var HeaderClearComponent = class HeaderClearComponent {
 		},
 		usesOnChanges: true,
 		ngImport: i0,
-		template: "<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</header>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n",
-		styles: [".header-clear{border-radius:0;position:sticky;top:0;z-index:100;padding-block:0;margin-top:1rem;transition:background .3s ease,box-shadow .3s ease;background:var(--header-bg)}.header-clear.is-scrolled{background:var(--header-bg-fixed-dark);box-shadow:0 2px 12px #00000014}.header-clear.is-scrolled .header-logo a{padding-inline:1.5rem}.header-clear.is-scrolled .header-logo span{color:var(--header-logo-text-dark)}.header-clear.is-scrolled .header-actions{padding-inline:1.5rem}.header-clear.is-scrolled .header-actions .btn-header{background:var(--header-bg-fixed-light)}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:80px;height:80px;object-fit:contain;object-position:left}.header-logo span{display:flex;min-width:10rem}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:1rem}.lang{text-transform:uppercase}\n"],
+		template: "<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'currentColor'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</header>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n",
+		styles: [".header-clear{border-radius:0;position:sticky;top:0;z-index:100;padding-block:0;margin-top:1rem;transition:background .3s ease,box-shadow .3s ease;background:var(--header-bg)}.header-clear.is-scrolled{background:var(--header-bg-fixed-dark);box-shadow:0 2px 12px #00000014;border:4px solid var(--border-primary)}.header-clear.is-scrolled .header-logo a{padding-inline:1.5rem}.header-clear.is-scrolled .header-logo span{color:var(--header-logo-text-dark)}.header-clear.is-scrolled .header-actions{padding-inline:1.5rem}.header-clear.is-scrolled .header-actions .btn-header{border:4px solid var(--border-primary);background:var(--button-header-bg)}.header-clear.is-scrolled .header-actions .btn-header:hover{background:var(--button-header-bg-scrolled-hover)!important}.header-clear.is-scrolled.is-over-light{background:var(--header-bg-fixed-light)}.header-clear.is-scrolled.is-over-light .header-logo span{color:var(--header-logo-text-light)}.header-clear.is-scrolled.is-over-dark,.header-clear.is-scrolled.is-over-dark .header-actions .btn-header{border:4px solid var(--border-secondary)}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:80px;height:80px;object-fit:contain;object-position:left}.header-logo span{display:flex;min-width:10rem}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:1rem}.lang{text-transform:uppercase}\n"],
 		dependencies: [
 			{
 				kind: "ngmodule",
@@ -152,8 +152,8 @@ i0.ɵɵngDeclareClassMetadata({
 				HeaderScrollDirective
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</header>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n",
-			styles: [".header-clear{border-radius:0;position:sticky;top:0;z-index:100;padding-block:0;margin-top:1rem;transition:background .3s ease,box-shadow .3s ease;background:var(--header-bg)}.header-clear.is-scrolled{background:var(--header-bg-fixed-dark);box-shadow:0 2px 12px #00000014}.header-clear.is-scrolled .header-logo a{padding-inline:1.5rem}.header-clear.is-scrolled .header-logo span{color:var(--header-logo-text-dark)}.header-clear.is-scrolled .header-actions{padding-inline:1.5rem}.header-clear.is-scrolled .header-actions .btn-header{background:var(--header-bg-fixed-light)}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:80px;height:80px;object-fit:contain;object-position:left}.header-logo span{display:flex;min-width:10rem}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:1rem}.lang{text-transform:uppercase}\n"]
+			template: "<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'currentColor'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</header>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n",
+			styles: [".header-clear{border-radius:0;position:sticky;top:0;z-index:100;padding-block:0;margin-top:1rem;transition:background .3s ease,box-shadow .3s ease;background:var(--header-bg)}.header-clear.is-scrolled{background:var(--header-bg-fixed-dark);box-shadow:0 2px 12px #00000014;border:4px solid var(--border-primary)}.header-clear.is-scrolled .header-logo a{padding-inline:1.5rem}.header-clear.is-scrolled .header-logo span{color:var(--header-logo-text-dark)}.header-clear.is-scrolled .header-actions{padding-inline:1.5rem}.header-clear.is-scrolled .header-actions .btn-header{border:4px solid var(--border-primary);background:var(--button-header-bg)}.header-clear.is-scrolled .header-actions .btn-header:hover{background:var(--button-header-bg-scrolled-hover)!important}.header-clear.is-scrolled.is-over-light{background:var(--header-bg-fixed-light)}.header-clear.is-scrolled.is-over-light .header-logo span{color:var(--header-logo-text-light)}.header-clear.is-scrolled.is-over-dark,.header-clear.is-scrolled.is-over-dark .header-actions .btn-header{border:4px solid var(--border-secondary)}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:80px;height:80px;object-fit:contain;object-position:left}.header-logo span{display:flex;min-width:10rem}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:1rem}.lang{text-transform:uppercase}\n"]
 		}]
 	}],
 	ctorParameters: () => [{ type: i1.ThemeService }],

package/fesm2022/lluc_llull-ui-lib-headers-header-clear.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lluc_llull-ui-lib-headers-header-clear.mjs","names":[],"sources":["../../../projects/ui-lib/headers/header-clear/header-clear.component.ts","../../../projects/ui-lib/headers/header-clear/header-clear.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Output,\n} from '@angular/core';\nimport { HeaderScrollDirective, LinkTypeDirective } from '@lluc_llull/ui-lib/directives';\nimport {\n    UiLibButtonI,\n    UiLibImageI,\n    UiLibNavItemsI,\n    UiLibSocialItemsI,\n} from '@lluc_llull/ui-lib/interfaces';\nimport { Theme, ThemeService } from '@lluc_llull/ui-lib/theme';\nimport { Subscription } from 'rxjs';\nimport { mapNavModal } from '@lluc_llull/ui-lib/mapper';\nimport { NavModalComponent } from '@lluc_llull/ui-lib/modals';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-header-clear',\n    standalone: true,\n    imports: [CommonModule, NavModalComponent, LinkTypeDirective, UiIconComponent, HeaderScrollDirective],\n    templateUrl: './header-clear.component.html',\n    styleUrl: './header-clear.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeaderClearComponent implements OnInit, OnDestroy, OnChanges {\n    isMenuOpen = false;\n    isMenuClosing = false;\n    currentTheme: Theme = 'light';\n    private themeSubscription?: Subscription;\n\n    @Input() logo?: UiLibImageI;\n    @Input() logoDark?: UiLibImageI;\n    @Input() navItems?: UiLibNavItemsI[];\n    @Input() socialItems?: UiLibSocialItemsI[];\n    @Input() homeLink?: UiLibButtonI;\n    @Input() navigation: any;\n    @Input() lang: string = 'es';\n\n    @Output() langModal = new EventEmitter<void>();\n    @Output() theme = new EventEmitter<void>();\n\n    constructor(private themeService: ThemeService) {}\n\n    ngOnInit(): void {\n        this.themeSubscription = this.themeService.currentTheme$.subscribe((theme) => {\n            this.currentTheme = theme;\n        });\n    }\n\n    ngOnChanges() {\n        this.navItems = mapNavModal(this.navigation, this.lang);\n    }\n\n    ngOnDestroy(): void {\n        this.themeSubscription?.unsubscribe();\n    }\n\n    openLanguagesModal(): void {\n        this.langModal.emit();\n    }\n\n    toggleTheme(): void {\n        this.themeService.toggleTheme();\n        this.theme.emit();\n    }\n\n    toggleMenu(): void {\n        if (this.isMenuOpen) {\n            this.closeMenu();\n            return;\n        }\n\n        this.isMenuClosing = false;\n        this.isMenuOpen = true;\n    }\n\n    closeMenu(): void {\n        if (!this.isMenuOpen && !this.isMenuClosing) return;\n\n        this.isMenuClosing = true;\n        this.isMenuOpen = false;\n    }\n\n    finishMenuClose(event: TransitionEvent): void {\n        if (!this.isMenuClosing || event.propertyName !== 'visibility') return;\n        if (!(event.target instanceof HTMLElement) || !event.target.classList.contains('modal-content')) return;\n\n        this.isMenuClosing = false;\n    }\n}\n","<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</header>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n"],"mappings":";;;;;;;;AAgCA,IAAa,uBAAb,MAAa,qBAAoB;CAiBT;CAhBpB,aAAa;CACb,gBAAgB;CAChB,eAAsB;CACd;CAEC;CACA;CACA;CACA;CACA;CACA;CACA,OAAe;CAEd,YAAY,IAAI,aAAY;CAC5B,QAAQ,IAAI,aAAY;CAElC,YAAoB,cAA0B;EAA1B,KAAA,eAAA;CAA6B;CAEjD,WAAQ;EACJ,KAAK,oBAAoB,KAAK,aAAa,cAAc,WAAW,UAAS;GACzE,KAAK,eAAe;EACxB,CAAC;CACL;CAEA,cAAW;EACP,KAAK,WAAW,YAAY,KAAK,YAAY,KAAK,IAAI;CAC1D;CAEA,cAAW;EACP,KAAK,mBAAmB,YAAW;CACvC;CAEA,qBAAkB;EACd,KAAK,UAAU,KAAI;CACvB;CAEA,cAAW;EACP,KAAK,aAAa,YAAW;EAC7B,KAAK,MAAM,KAAI;CACnB;CAEA,aAAU;EACN,IAAI,KAAK,YAAY;GACjB,KAAK,UAAS;GACd;EACJ;EAEA,KAAK,gBAAgB;EACrB,KAAK,aAAa;CACtB;CAEA,YAAS;EACL,IAAI,CAAC,KAAK,cAAc,CAAC,KAAK,eAAe;EAE7C,KAAK,gBAAgB;EACrB,KAAK,aAAa;CACtB;CAEA,gBAAgB,OAAsB;EAClC,IAAI,CAAC,KAAK,iBAAiB,MAAM,iBAAiB,cAAc;EAChE,IAAI,EAAE,MAAM,kBAAkB,gBAAgB,CAAC,MAAM,OAAO,UAAU,SAAS,eAAe,GAAG;EAEjG,KAAK,gBAAgB;CACzB;CAhES,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA,EAAA,OAAA,GAAA,aAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAApB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;GAAA,UAAA;GAAA,UAAA;GAAA,aAAA;GAAA,UAAA;GAAA,YAAA;GAAA,MAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,OAAA;EAAA;EAAA,eAAA;EAAA,UAAA;EAAA,UChCjC;EA2CA,QAAA,CAAA,q4BAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDhBc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,OAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA,CAAA,iBAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAK3F,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EARhC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAkB,YAChB;GAAI,SACP;IAAC;IAAc;IAAmB;IAAmB;IAAiB;GAAqB;GAAC,iBAGpF,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,q4BAAA;EAAA,CAAA;;;;E,SAQ9C,MAAA,M;E,aACA,MAAA,M;E,aACA,MAAA,M;E,gBACA,MAAA,M;E,aACA,MAAA,M;E,eACA,MAAA,M;E,SACA,MAAA,M;E,cAEA,MAAA,O;E,UACA,MAAA,O"}
+{"version":3,"file":"lluc_llull-ui-lib-headers-header-clear.mjs","names":[],"sources":["../../../projects/ui-lib/headers/header-clear/header-clear.component.ts","../../../projects/ui-lib/headers/header-clear/header-clear.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Output,\n} from '@angular/core';\nimport { HeaderScrollDirective, LinkTypeDirective } from '@lluc_llull/ui-lib/directives';\nimport {\n    UiLibButtonI,\n    UiLibImageI,\n    UiLibNavItemsI,\n    UiLibSocialItemsI,\n} from '@lluc_llull/ui-lib/interfaces';\nimport { Theme, ThemeService } from '@lluc_llull/ui-lib/theme';\nimport { Subscription } from 'rxjs';\nimport { mapNavModal } from '@lluc_llull/ui-lib/mapper';\nimport { NavModalComponent } from '@lluc_llull/ui-lib/modals';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-header-clear',\n    standalone: true,\n    imports: [CommonModule, NavModalComponent, LinkTypeDirective, UiIconComponent, HeaderScrollDirective],\n    templateUrl: './header-clear.component.html',\n    styleUrl: './header-clear.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeaderClearComponent implements OnInit, OnDestroy, OnChanges {\n    isMenuOpen = false;\n    isMenuClosing = false;\n    currentTheme: Theme = 'light';\n    private themeSubscription?: Subscription;\n\n    @Input() logo?: UiLibImageI;\n    @Input() logoDark?: UiLibImageI;\n    @Input() navItems?: UiLibNavItemsI[];\n    @Input() socialItems?: UiLibSocialItemsI[];\n    @Input() homeLink?: UiLibButtonI;\n    @Input() navigation: any;\n    @Input() lang: string = 'es';\n\n    @Output() langModal = new EventEmitter<void>();\n    @Output() theme = new EventEmitter<void>();\n\n    constructor(private themeService: ThemeService) {}\n\n    ngOnInit(): void {\n        this.themeSubscription = this.themeService.currentTheme$.subscribe((theme) => {\n            this.currentTheme = theme;\n        });\n    }\n\n    ngOnChanges() {\n        this.navItems = mapNavModal(this.navigation, this.lang);\n    }\n\n    ngOnDestroy(): void {\n        this.themeSubscription?.unsubscribe();\n    }\n\n    openLanguagesModal(): void {\n        this.langModal.emit();\n    }\n\n    toggleTheme(): void {\n        this.themeService.toggleTheme();\n        this.theme.emit();\n    }\n\n    toggleMenu(): void {\n        if (this.isMenuOpen) {\n            this.closeMenu();\n            return;\n        }\n\n        this.isMenuClosing = false;\n        this.isMenuOpen = true;\n    }\n\n    closeMenu(): void {\n        if (!this.isMenuOpen && !this.isMenuClosing) return;\n\n        this.isMenuClosing = true;\n        this.isMenuOpen = false;\n    }\n\n    finishMenuClose(event: TransitionEvent): void {\n        if (!this.isMenuClosing || event.propertyName !== 'visibility') return;\n        if (!(event.target instanceof HTMLElement) || !event.target.classList.contains('modal-content')) return;\n\n        this.isMenuClosing = false;\n    }\n}\n","<header class=\"header-clear main-grid col-span-full sm:col-span-12 sm:col-start-1\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo col-span-full sm:col-span-4 sm:col-start-1\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n      <span>LLUC LLULL</span>\n    </div>\n  </a>\n\n  <div class=\"header-actions col-span-full sm:col-span-6 sm:col-start-7\">\n    <!-- Idioma -->\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n\n    <!-- Icono de tema -->\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'sun' : 'moon'\"\n        [size]=\"17\"\n        [color]=\"'currentColor'\"\n      ></ui-icon>\n    </button>\n\n    <!-- Icono de menú -->\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</header>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n"],"mappings":";;;;;;;;AAgCA,IAAa,uBAAb,MAAa,qBAAoB;CAiBT;CAhBpB,aAAa;CACb,gBAAgB;CAChB,eAAsB;CACd;CAEC;CACA;CACA;CACA;CACA;CACA;CACA,OAAe;CAEd,YAAY,IAAI,aAAY;CAC5B,QAAQ,IAAI,aAAY;CAElC,YAAoB,cAA0B;EAA1B,KAAA,eAAA;CAA6B;CAEjD,WAAQ;EACJ,KAAK,oBAAoB,KAAK,aAAa,cAAc,WAAW,UAAS;GACzE,KAAK,eAAe;EACxB,CAAC;CACL;CAEA,cAAW;EACP,KAAK,WAAW,YAAY,KAAK,YAAY,KAAK,IAAI;CAC1D;CAEA,cAAW;EACP,KAAK,mBAAmB,YAAW;CACvC;CAEA,qBAAkB;EACd,KAAK,UAAU,KAAI;CACvB;CAEA,cAAW;EACP,KAAK,aAAa,YAAW;EAC7B,KAAK,MAAM,KAAI;CACnB;CAEA,aAAU;EACN,IAAI,KAAK,YAAY;GACjB,KAAK,UAAS;GACd;EACJ;EAEA,KAAK,gBAAgB;EACrB,KAAK,aAAa;CACtB;CAEA,YAAS;EACL,IAAI,CAAC,KAAK,cAAc,CAAC,KAAK,eAAe;EAE7C,KAAK,gBAAgB;EACrB,KAAK,aAAa;CACtB;CAEA,gBAAgB,OAAsB;EAClC,IAAI,CAAC,KAAK,iBAAiB,MAAM,iBAAiB,cAAc;EAChE,IAAI,EAAE,MAAM,kBAAkB,gBAAgB,CAAC,MAAM,OAAO,UAAU,SAAS,eAAe,GAAG;EAEjG,KAAK,gBAAgB;CACzB;CAhES,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA,EAAA,OAAA,GAAA,aAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAApB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;GAAA,UAAA;GAAA,UAAA;GAAA,aAAA;GAAA,UAAA;GAAA,YAAA;GAAA,MAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,OAAA;EAAA;EAAA,eAAA;EAAA,UAAA;EAAA,UChCjC;EA2CA,QAAA,CAAA,u4CAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDhBc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,OAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA,CAAA,iBAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAK3F,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EARhC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAkB,YAChB;GAAI,SACP;IAAC;IAAc;IAAmB;IAAmB;IAAiB;GAAqB;GAAC,iBAGpF,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,u4CAAA;EAAA,CAAA;;;;E,SAQ9C,MAAA,M;E,aACA,MAAA,M;E,aACA,MAAA,M;E,gBACA,MAAA,M;E,aACA,MAAA,M;E,eACA,MAAA,M;E,SACA,MAAA,M;E,cAEA,MAAA,O;E,UACA,MAAA,O"}

package/fesm2022/lluc_llull-ui-lib-headers-header-mobile.mjs

@@ -90,7 +90,7 @@ var HeaderMobileComponent = class HeaderMobileComponent {
 		usesOnChanges: true,
 		ngImport: i0,
 		template: "<header class=\"header-mobile\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n    </div>\n  </a>\n</header>\n\n<div class=\"header-actions\">\n  <!-- Idioma -->\n  <div class=\"left\">\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n  </div>\n\n  <!-- Icono de tema -->\n  <div class=\"center\">\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'moon' : 'sun'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n  </div>\n\n  <!-- Icono de menú -->\n  <div class=\"right\">\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</div>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n",
-		styles: [".header-mobile{display:flex;justify-content:center;align-items:center;padding:1rem 0;border-radius:0;position:fixed;top:0;z-index:100;width:100vw;background:var(--header-bg);transition:background .3s ease,box-shadow .3s ease}.header-mobile.is-scrolled{background:var(--header-bg-fixed-dark);box-shadow:0 2px 12px #00000014}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:80px;height:80px;object-fit:contain;object-position:center}.header-actions{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background-color:var(--header-mobile-bg);z-index:100;box-sizing:border-box}.header-actions .center{margin:0 auto}.lang{text-transform:uppercase}\n"],
+		styles: [".header-mobile{display:flex;justify-content:center;align-items:center;padding:1rem 0;border-radius:0;position:fixed;top:0;left:0;right:0;z-index:100;box-sizing:border-box;background:var(--header-bg);transition:background .3s ease,box-shadow .3s ease}.header-mobile.is-scrolled{background:var(--header-bg-fixed-dark);box-shadow:0 2px 12px #00000014;border:4px solid black}.header-mobile.is-scrolled.is-over-light{background:var(--header-bg-fixed-light)}.header-mobile.is-scrolled.is-over-dark{border:4px solid var(--border-secondary)}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:80px;height:80px;object-fit:contain;object-position:center}.header-actions{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background-color:var(--header-mobile-bg);z-index:100;box-sizing:border-box;border:4px solid black}.header-actions .center{margin:0 auto}.lang{text-transform:uppercase}\n"],
 		dependencies: [
 			{
 				kind: "ngmodule",
@@ -153,7 +153,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<header class=\"header-mobile\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n    </div>\n  </a>\n</header>\n\n<div class=\"header-actions\">\n  <!-- Idioma -->\n  <div class=\"left\">\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n  </div>\n\n  <!-- Icono de tema -->\n  <div class=\"center\">\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'moon' : 'sun'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n  </div>\n\n  <!-- Icono de menú -->\n  <div class=\"right\">\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</div>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n",
-			styles: [".header-mobile{display:flex;justify-content:center;align-items:center;padding:1rem 0;border-radius:0;position:fixed;top:0;z-index:100;width:100vw;background:var(--header-bg);transition:background .3s ease,box-shadow .3s ease}.header-mobile.is-scrolled{background:var(--header-bg-fixed-dark);box-shadow:0 2px 12px #00000014}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:80px;height:80px;object-fit:contain;object-position:center}.header-actions{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background-color:var(--header-mobile-bg);z-index:100;box-sizing:border-box}.header-actions .center{margin:0 auto}.lang{text-transform:uppercase}\n"]
+			styles: [".header-mobile{display:flex;justify-content:center;align-items:center;padding:1rem 0;border-radius:0;position:fixed;top:0;left:0;right:0;z-index:100;box-sizing:border-box;background:var(--header-bg);transition:background .3s ease,box-shadow .3s ease}.header-mobile.is-scrolled{background:var(--header-bg-fixed-dark);box-shadow:0 2px 12px #00000014;border:4px solid black}.header-mobile.is-scrolled.is-over-light{background:var(--header-bg-fixed-light)}.header-mobile.is-scrolled.is-over-dark{border:4px solid var(--border-secondary)}.header-logo{display:flex;align-items:center;gap:.5rem;color:var(--header-logo-text)}.header-logo img{width:80px;height:80px;object-fit:contain;object-position:center}.header-actions{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background-color:var(--header-mobile-bg);z-index:100;box-sizing:border-box;border:4px solid black}.header-actions .center{margin:0 auto}.lang{text-transform:uppercase}\n"]
 		}]
 	}],
 	ctorParameters: () => [{ type: i1.ThemeService }],

package/fesm2022/lluc_llull-ui-lib-headers-header-mobile.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lluc_llull-ui-lib-headers-header-mobile.mjs","names":[],"sources":["../../../projects/ui-lib/headers/header-mobile/header-mobile.component.ts","../../../projects/ui-lib/headers/header-mobile/header-mobile.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Output,\n} from '@angular/core';\nimport { HeaderScrollDirective, LinkTypeDirective } from '@lluc_llull/ui-lib/directives';\nimport {\n    UiLibButtonI,\n    UiLibImageI,\n    UiLibNavItemsI,\n    UiLibSocialItemsI,\n} from '@lluc_llull/ui-lib/interfaces';\nimport { Theme, ThemeService } from '@lluc_llull/ui-lib/theme';\nimport { Subscription } from 'rxjs';\nimport { mapNavModal } from '@lluc_llull/ui-lib/mapper';\nimport { NavModalComponent } from '@lluc_llull/ui-lib/modals';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-header-mobile',\n    standalone: true,\n    imports: [CommonModule, NavModalComponent, HeaderScrollDirective, LinkTypeDirective, UiIconComponent],\n    templateUrl: './header-mobile.component.html',\n    styleUrl: './header-mobile.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeaderMobileComponent implements OnInit, OnChanges, OnDestroy {\n    isMenuOpen = false;\n    isMenuClosing = false;\n    currentTheme: Theme = 'light';\n    private themeSubscription?: Subscription;\n\n    @Input() logo?: UiLibImageI;\n    @Input() logoDark?: UiLibImageI;\n    @Input() navItems?: UiLibNavItemsI[];\n    @Input() socialItems?: UiLibSocialItemsI[];\n    @Input() homeLink?: UiLibButtonI;\n    @Input() navigation: any;\n    @Input() lang: string = 'es';\n\n    @Output() langModal = new EventEmitter<void>();\n    @Output() theme = new EventEmitter<void>();\n\n    constructor(private themeService: ThemeService) {}\n\n    ngOnInit(): void {\n        this.themeSubscription = this.themeService.currentTheme$.subscribe((theme) => {\n            this.currentTheme = theme;\n        });\n    }\n\n    ngOnChanges() {\n        this.navItems = mapNavModal(this.navigation, this.lang);\n    }\n\n    ngOnDestroy(): void {\n        this.themeSubscription?.unsubscribe();\n    }\n\n    openLanguagesModal(): void {\n        this.langModal.emit();\n    }\n\n    toggleTheme(): void {\n        this.themeService.toggleTheme();\n        this.theme.emit();\n    }\n\n    toggleMenu(): void {\n        if (this.isMenuOpen) {\n            this.closeMenu();\n            return;\n        }\n\n        this.isMenuClosing = false;\n        this.isMenuOpen = true;\n    }\n\n    closeMenu(): void {\n        if (!this.isMenuOpen && !this.isMenuClosing) return;\n\n        this.isMenuClosing = true;\n        this.isMenuOpen = false;\n    }\n\n    finishMenuClose(event: TransitionEvent): void {\n        if (!this.isMenuClosing || event.propertyName !== 'visibility') return;\n        if (!(event.target instanceof HTMLElement) || !event.target.classList.contains('modal-content')) return;\n\n        this.isMenuClosing = false;\n    }\n}\n","<header class=\"header-mobile\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n    </div>\n  </a>\n</header>\n\n<div class=\"header-actions\">\n  <!-- Idioma -->\n  <div class=\"left\">\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n  </div>\n\n  <!-- Icono de tema -->\n  <div class=\"center\">\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'moon' : 'sun'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n  </div>\n\n  <!-- Icono de menú -->\n  <div class=\"right\">\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</div>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n"],"mappings":";;;;;;;;AAgCA,IAAa,wBAAb,MAAa,sBAAqB;CAiBV;CAhBpB,aAAa;CACb,gBAAgB;CAChB,eAAsB;CACd;CAEC;CACA;CACA;CACA;CACA;CACA;CACA,OAAe;CAEd,YAAY,IAAI,aAAY;CAC5B,QAAQ,IAAI,aAAY;CAElC,YAAoB,cAA0B;EAA1B,KAAA,eAAA;CAA6B;CAEjD,WAAQ;EACJ,KAAK,oBAAoB,KAAK,aAAa,cAAc,WAAW,UAAS;GACzE,KAAK,eAAe;EACxB,CAAC;CACL;CAEA,cAAW;EACP,KAAK,WAAW,YAAY,KAAK,YAAY,KAAK,IAAI;CAC1D;CAEA,cAAW;EACP,KAAK,mBAAmB,YAAW;CACvC;CAEA,qBAAkB;EACd,KAAK,UAAU,KAAI;CACvB;CAEA,cAAW;EACP,KAAK,aAAa,YAAW;EAC7B,KAAK,MAAM,KAAI;CACnB;CAEA,aAAU;EACN,IAAI,KAAK,YAAY;GACjB,KAAK,UAAS;GACd;EACJ;EAEA,KAAK,gBAAgB;EACrB,KAAK,aAAa;CACtB;CAEA,YAAS;EACL,IAAI,CAAC,KAAK,cAAc,CAAC,KAAK,eAAe;EAE7C,KAAK,gBAAgB;EACrB,KAAK,aAAa;CACtB;CAEA,gBAAgB,OAAsB;EAClC,IAAI,CAAC,KAAK,iBAAiB,MAAM,iBAAiB,cAAc;EAChE,IAAI,EAAE,MAAM,kBAAkB,gBAAgB,CAAC,MAAM,OAAO,UAAU,SAAS,eAAe,GAAG;EAEjG,KAAK,gBAAgB;CACzB;CAhES,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAqB,MAAA,CAAA,EAAA,OAAA,GAAA,aAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAArB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAqB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;GAAA,UAAA;GAAA,UAAA;GAAA,aAAA;GAAA,UAAA;GAAA,YAAA;GAAA,MAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,OAAA;EAAA;EAAA,eAAA;EAAA,UAAA;EAAA,UChClC;EAgDA,QAAA,CAAA,swBAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDrBc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,OAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA,CAAA,iBAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAK3F,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EARjC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAmB,YACjB;GAAI,SACP;IAAC;IAAc;IAAmB;IAAuB;IAAmB;GAAe;GAAC,iBAGpF,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,swBAAA;EAAA,CAAA;;;;E,SAQ9C,MAAA,M;E,aACA,MAAA,M;E,aACA,MAAA,M;E,gBACA,MAAA,M;E,aACA,MAAA,M;E,eACA,MAAA,M;E,SACA,MAAA,M;E,cAEA,MAAA,O;E,UACA,MAAA,O"}
+{"version":3,"file":"lluc_llull-ui-lib-headers-header-mobile.mjs","names":[],"sources":["../../../projects/ui-lib/headers/header-mobile/header-mobile.component.ts","../../../projects/ui-lib/headers/header-mobile/header-mobile.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Output,\n} from '@angular/core';\nimport { HeaderScrollDirective, LinkTypeDirective } from '@lluc_llull/ui-lib/directives';\nimport {\n    UiLibButtonI,\n    UiLibImageI,\n    UiLibNavItemsI,\n    UiLibSocialItemsI,\n} from '@lluc_llull/ui-lib/interfaces';\nimport { Theme, ThemeService } from '@lluc_llull/ui-lib/theme';\nimport { Subscription } from 'rxjs';\nimport { mapNavModal } from '@lluc_llull/ui-lib/mapper';\nimport { NavModalComponent } from '@lluc_llull/ui-lib/modals';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n    selector: 'lib-header-mobile',\n    standalone: true,\n    imports: [CommonModule, NavModalComponent, HeaderScrollDirective, LinkTypeDirective, UiIconComponent],\n    templateUrl: './header-mobile.component.html',\n    styleUrl: './header-mobile.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeaderMobileComponent implements OnInit, OnChanges, OnDestroy {\n    isMenuOpen = false;\n    isMenuClosing = false;\n    currentTheme: Theme = 'light';\n    private themeSubscription?: Subscription;\n\n    @Input() logo?: UiLibImageI;\n    @Input() logoDark?: UiLibImageI;\n    @Input() navItems?: UiLibNavItemsI[];\n    @Input() socialItems?: UiLibSocialItemsI[];\n    @Input() homeLink?: UiLibButtonI;\n    @Input() navigation: any;\n    @Input() lang: string = 'es';\n\n    @Output() langModal = new EventEmitter<void>();\n    @Output() theme = new EventEmitter<void>();\n\n    constructor(private themeService: ThemeService) {}\n\n    ngOnInit(): void {\n        this.themeSubscription = this.themeService.currentTheme$.subscribe((theme) => {\n            this.currentTheme = theme;\n        });\n    }\n\n    ngOnChanges() {\n        this.navItems = mapNavModal(this.navigation, this.lang);\n    }\n\n    ngOnDestroy(): void {\n        this.themeSubscription?.unsubscribe();\n    }\n\n    openLanguagesModal(): void {\n        this.langModal.emit();\n    }\n\n    toggleTheme(): void {\n        this.themeService.toggleTheme();\n        this.theme.emit();\n    }\n\n    toggleMenu(): void {\n        if (this.isMenuOpen) {\n            this.closeMenu();\n            return;\n        }\n\n        this.isMenuClosing = false;\n        this.isMenuOpen = true;\n    }\n\n    closeMenu(): void {\n        if (!this.isMenuOpen && !this.isMenuClosing) return;\n\n        this.isMenuClosing = true;\n        this.isMenuOpen = false;\n    }\n\n    finishMenuClose(event: TransitionEvent): void {\n        if (!this.isMenuClosing || event.propertyName !== 'visibility') return;\n        if (!(event.target instanceof HTMLElement) || !event.target.classList.contains('modal-content')) return;\n\n        this.isMenuClosing = false;\n    }\n}\n","<header class=\"header-mobile\" headerScroll [scrollThreshold]=\"60\">\n  <a [href]=\"homeLink?.url\" [linkType]=\"homeLink?.linkType\">\n    <div class=\"header-logo\">\n      <!-- Logo -->\n      <img\n        [src]=\"currentTheme === 'dark' ? logoDark?.url : logo?.url\"\n        [alt]=\"currentTheme === 'dark' ? logoDark?.alt : logo?.alt\"\n      />\n    </div>\n  </a>\n</header>\n\n<div class=\"header-actions\">\n  <!-- Idioma -->\n  <div class=\"left\">\n    <button class=\"btn btn-header\" (click)=\"openLanguagesModal()\">\n      <span class=\"lang\">{{ lang }}</span>\n    </button>\n  </div>\n\n  <!-- Icono de tema -->\n  <div class=\"center\">\n    <button class=\"btn btn-header\" aria-label=\"Toggle theme\" (click)=\"toggleTheme()\">\n      <ui-icon\n        [name]=\"currentTheme === 'dark' ? 'moon' : 'sun'\"\n        [size]=\"17\"\n        [color]=\"'var(--color-primary)'\"\n      ></ui-icon>\n    </button>\n  </div>\n\n  <!-- Icono de menú -->\n  <div class=\"right\">\n    <button class=\"btn btn-header\" aria-label=\"Open nav\" (click)=\"toggleMenu()\">\n      <span>☰</span>\n    </button>\n  </div>\n</div>\n\n@if ((isMenuOpen || isMenuClosing) && navItems && navItems.length > 0) {\n  <lib-nav-modal\n    [navItems]=\"navItems\"\n    [socialItems]=\"socialItems\"\n    [closing]=\"isMenuClosing\"\n    (close)=\"closeMenu()\"\n    (transitionend)=\"finishMenuClose($event)\"\n  ></lib-nav-modal>\n}\n"],"mappings":";;;;;;;;AAgCA,IAAa,wBAAb,MAAa,sBAAqB;CAiBV;CAhBpB,aAAa;CACb,gBAAgB;CAChB,eAAsB;CACd;CAEC;CACA;CACA;CACA;CACA;CACA;CACA,OAAe;CAEd,YAAY,IAAI,aAAY;CAC5B,QAAQ,IAAI,aAAY;CAElC,YAAoB,cAA0B;EAA1B,KAAA,eAAA;CAA6B;CAEjD,WAAQ;EACJ,KAAK,oBAAoB,KAAK,aAAa,cAAc,WAAW,UAAS;GACzE,KAAK,eAAe;EACxB,CAAC;CACL;CAEA,cAAW;EACP,KAAK,WAAW,YAAY,KAAK,YAAY,KAAK,IAAI;CAC1D;CAEA,cAAW;EACP,KAAK,mBAAmB,YAAW;CACvC;CAEA,qBAAkB;EACd,KAAK,UAAU,KAAI;CACvB;CAEA,cAAW;EACP,KAAK,aAAa,YAAW;EAC7B,KAAK,MAAM,KAAI;CACnB;CAEA,aAAU;EACN,IAAI,KAAK,YAAY;GACjB,KAAK,UAAS;GACd;EACJ;EAEA,KAAK,gBAAgB;EACrB,KAAK,aAAa;CACtB;CAEA,YAAS;EACL,IAAI,CAAC,KAAK,cAAc,CAAC,KAAK,eAAe;EAE7C,KAAK,gBAAgB;EACrB,KAAK,aAAa;CACtB;CAEA,gBAAgB,OAAsB;EAClC,IAAI,CAAC,KAAK,iBAAiB,MAAM,iBAAiB,cAAc;EAChE,IAAI,EAAE,MAAM,kBAAkB,gBAAgB,CAAC,MAAM,OAAO,UAAU,SAAS,eAAe,GAAG;EAEjG,KAAK,gBAAgB;CACzB;CAhES,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAqB,MAAA,CAAA,EAAA,OAAA,GAAA,aAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAArB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAqB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;GAAA,UAAA;GAAA,UAAA;GAAA,aAAA;GAAA,UAAA;GAAA,YAAA;GAAA,MAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,OAAA;EAAA;EAAA,eAAA;EAAA,UAAA;EAAA,UChClC;EAgDA,QAAA,CAAA,++BAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDrBc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,OAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA,CAAA,iBAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAK3F,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EARjC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAmB,YACjB;GAAI,SACP;IAAC;IAAc;IAAmB;IAAuB;IAAmB;GAAe;GAAC,iBAGpF,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,++BAAA;EAAA,CAAA;;;;E,SAQ9C,MAAA,M;E,aACA,MAAA,M;E,aACA,MAAA,M;E,gBACA,MAAA,M;E,aACA,MAAA,M;E,eACA,MAAA,M;E,SACA,MAAA,M;E,cAEA,MAAA,O;E,UACA,MAAA,O"}