aeico-components 0.1.4 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/aeico-field.cjs.map +1 -1
- package/dist/chunks/aeico-field.js.map +1 -1
- package/dist/chunks/button.cjs +11 -14
- package/dist/chunks/button.cjs.map +1 -1
- package/dist/chunks/button.js +11 -14
- package/dist/chunks/button.js.map +1 -1
- package/dist/chunks/checkbox.cjs.map +1 -1
- package/dist/chunks/checkbox.js.map +1 -1
- package/dist/chunks/dropdown-button.js +3 -3
- package/dist/chunks/navbar.cjs +1 -2
- package/dist/chunks/navbar.cjs.map +1 -1
- package/dist/chunks/navbar.js +1 -2
- package/dist/chunks/navbar.js.map +1 -1
- package/dist/chunks/radio.cjs.map +1 -1
- package/dist/chunks/radio.js.map +1 -1
- package/dist/chunks/select.cjs.map +1 -1
- package/dist/chunks/select.js.map +1 -1
- package/dist/chunks/switch.cjs.map +1 -1
- package/dist/chunks/switch.js.map +1 -1
- package/dist/chunks/tab-panel.cjs +3 -4
- package/dist/chunks/tab-panel.cjs.map +1 -1
- package/dist/chunks/tab-panel.js +3 -4
- package/dist/chunks/tab-panel.js.map +1 -1
- package/dist/dropdown.js +4 -4
- package/dist/index.cjs +99 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +103 -4
- package/dist/index.js.map +1 -1
- package/dist/types/aeico-field.d.ts +5 -5
- package/dist/types/button/button.d.ts +2 -1
- package/dist/types/checkbox/checkbox.d.ts +5 -5
- package/dist/types/index.d.ts +2 -0
- package/dist/types/progress-bar/defines.d.ts +1 -0
- package/dist/types/progress-bar/index.d.ts +3 -0
- package/dist/types/progress-bar/progress-bar.d.ts +37 -0
- package/dist/types/radio-group/radio-group.d.ts +1 -1
- package/dist/types/select/select.d.ts +1 -1
- package/dist/types/switch/switch.d.ts +5 -5
- package/package.json +3 -3
- package/src/aeico-field.ts +12 -8
- package/src/button/button.ts +11 -13
- package/src/checkbox/checkbox.ts +4 -4
- package/src/index.ts +2 -0
- package/src/navbar/navbar.ts +1 -3
- package/src/progress-bar/defines.ts +8 -0
- package/src/progress-bar/index.ts +3 -0
- package/src/progress-bar/progress-bar.ts +80 -0
- package/src/radio-group/radio-group.ts +1 -1
- package/src/select/select.ts +1 -1
- package/src/styles/components/progress-bar.css +44 -0
- package/src/switch/switch.ts +4 -4
- package/src/tabs/tab.ts +1 -1
- package/src/tabs/tabs.ts +1 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"aeico-field.cjs","sources":["../../src/aeico-field.ts"],"sourcesContent":["import type { InferProps, Props, Watchers } from 'aeico';\nimport { tags } from 'aeico';\nimport AeicoComponent from './aeico-component';\nimport { t } from 'aeico-localize';\n\nexport type FieldAction = 'clear' | 'reset' | 'change';\nexport type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n\n/**\n * Base class for form field components\n *\n * Provides common functionality for field components including:\n * - Theme support\n * - i18n integration (via Localizable mixin)\n * - Reset button management\n * - Value management\n * - Common configuration handling\n */\nclass AeicoField<TValue = string> extends AeicoComponent {\n /**\n * Define base field properties (extends AeicoElement properties)\n */\n static props: Props = {\n value: { type: String },\n defaultValue: { type: String },\n resettable: { type: Boolean },\n resetText: { type: String },\n clearable: { type: Boolean },\n clearText: { type: String },\n size: { type: String },\n disabled: { type: Boolean },\n };\n\n /**\n * Property watchers\n */\n static watchers: Watchers = {\n disabled: 'onDisabledChanged',\n };\n\n /**\n * The underlying form control element (input, select, etc.)\n * Subclasses should set this to their specific element\n */\n protected fieldElement: FieldElement | null = null;\n\n protected resetBtn: HTMLButtonElement | null = null;\n protected clearBtn: HTMLButtonElement | null = null;\n\n protected readonly boundOnChange = () =>\n this.setValue(this.getValue(), { silent: false, action: 'change' });\n\n protected readonly boundOnReset = () => this.onReset();\n protected readonly boundOnClear = () => this.onClear();\n\n // Declare reactive properties for TypeScript\n declare value?: TValue;\n declare defaultValue?: TValue | string;\n declare resettable?: boolean;\n declare resetText?: string;\n declare clearable?: boolean;\n declare clearText?: string;\n declare size?: string;\n declare disabled?: boolean;\n\n /**\n * Lifecycle: Component connected to DOM\n */\n connectedCallback() {\n super.connectedCallback();\n }\n\n /**\n * Lifecycle: Component disconnected from DOM\n */\n disconnectedCallback() {\n super.disconnectedCallback();\n }\n\n /**\n * Render action buttons (clear/reset) using this.builder.\n * Must be called from within a build() callback.\n */\n protected renderActionButtons(force: boolean = false) {\n this.renderClearButton(force);\n this.renderResetButton(force);\n }\n\n protected renderResetButton(force: boolean = false) {\n const { button } = tags;\n\n if (force || this.resettable) {\n this.resetBtn = button({\n className: 'reset-btn',\n textContent: this.resetText || '↺',\n title: t('buttons.reset', '↺'),\n '@click': this.boundOnReset,\n });\n }\n }\n\n protected renderClearButton(force: boolean = false) {\n const { button } = tags;\n\n if (force || this.clearable) {\n this.clearBtn = button({\n className: 'clear-btn',\n textContent: this.clearText || '✕',\n title: t('buttons.clear', '✕'),\n '@click': this.boundOnClear,\n });\n }\n }\n\n /**\n * Watcher for disabled property\n */\n protected onDisabledChanged(newValue: boolean) {\n if (this.fieldElement) {\n (this.fieldElement as HTMLInputElement | HTMLSelectElement).disabled = Boolean(newValue);\n }\n }\n\n /**\n * Render the field component\n * Override in subclass to provide custom rendering\n */\n render(): void {\n // Default implementation - subclasses can override\n }\n\n /**\n * Get current value from the field element\n * Default implementation returns the value property of fieldElement\n * Override in subclasses if needed (e.g., checkbox uses checked instead of value)\n *\n * @returns Current field value\n */\n protected getValue():
|
|
1
|
+
{"version":3,"file":"aeico-field.cjs","sources":["../../src/aeico-field.ts"],"sourcesContent":["import type { InferProps, Props, Watchers } from 'aeico';\nimport { tags } from 'aeico';\nimport AeicoComponent from './aeico-component';\nimport { t } from 'aeico-localize';\n\nexport type FieldAction = 'clear' | 'reset' | 'change';\nexport type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n\n/**\n * Base class for form field components\n *\n * Provides common functionality for field components including:\n * - Theme support\n * - i18n integration (via Localizable mixin)\n * - Reset button management\n * - Value management\n * - Common configuration handling\n */\nclass AeicoField<TValue = string> extends AeicoComponent {\n /**\n * Define base field properties (extends AeicoElement properties)\n */\n static props: Props = {\n value: { type: String },\n defaultValue: { type: String },\n resettable: { type: Boolean },\n resetText: { type: String },\n clearable: { type: Boolean },\n clearText: { type: String },\n size: { type: String },\n disabled: { type: Boolean },\n };\n\n /**\n * Property watchers\n */\n static watchers: Watchers = {\n disabled: 'onDisabledChanged',\n };\n\n /**\n * The underlying form control element (input, select, etc.)\n * Subclasses should set this to their specific element\n */\n protected fieldElement: FieldElement | null = null;\n\n protected resetBtn: HTMLButtonElement | null = null;\n protected clearBtn: HTMLButtonElement | null = null;\n\n protected readonly boundOnChange = () =>\n this.setValue(this.getValue(), { silent: false, action: 'change' });\n\n protected readonly boundOnReset = () => this.onReset();\n protected readonly boundOnClear = () => this.onClear();\n\n // Declare reactive properties for TypeScript\n declare value?: TValue;\n declare defaultValue?: TValue | string;\n declare resettable?: boolean;\n declare resetText?: string;\n declare clearable?: boolean;\n declare clearText?: string;\n declare size?: string;\n declare disabled?: boolean;\n\n /**\n * Lifecycle: Component connected to DOM\n */\n connectedCallback() {\n super.connectedCallback();\n }\n\n /**\n * Lifecycle: Component disconnected from DOM\n */\n disconnectedCallback() {\n super.disconnectedCallback();\n }\n\n /**\n * Render action buttons (clear/reset) using this.builder.\n * Must be called from within a build() callback.\n */\n protected renderActionButtons(force: boolean = false) {\n this.renderClearButton(force);\n this.renderResetButton(force);\n }\n\n protected renderResetButton(force: boolean = false) {\n const { button } = tags;\n\n if (force || this.resettable) {\n this.resetBtn = button({\n className: 'reset-btn',\n textContent: this.resetText || '↺',\n title: t('buttons.reset', '↺'),\n '@click': this.boundOnReset,\n });\n }\n }\n\n protected renderClearButton(force: boolean = false) {\n const { button } = tags;\n\n if (force || this.clearable) {\n this.clearBtn = button({\n className: 'clear-btn',\n textContent: this.clearText || '✕',\n title: t('buttons.clear', '✕'),\n '@click': this.boundOnClear,\n });\n }\n }\n\n /**\n * Watcher for disabled property\n */\n protected onDisabledChanged(newValue: boolean) {\n if (this.fieldElement) {\n (this.fieldElement as HTMLInputElement | HTMLSelectElement).disabled = Boolean(newValue);\n }\n }\n\n /**\n * Render the field component\n * Override in subclass to provide custom rendering\n */\n render(): void {\n // Default implementation - subclasses can override\n }\n\n /**\n * Get current value from the field element\n * Default implementation returns the value property of fieldElement\n * Override in subclasses if needed (e.g., checkbox uses checked instead of value)\n *\n * @returns Current field value\n */\n protected getValue(): TValue {\n return (this.fieldElement?.value || '') as TValue;\n }\n\n /**\n * Write value to the underlying UI element and sync props\n * Subclasses must override this to update their specific UI element\n *\n * @param _value New value to write to the element\n */\n protected writeValue(_value: TValue): void {\n // Base implementation - subclasses override\n }\n\n /**\n * Get event payload for change events\n * Override in subclasses to customize event data (e.g., { checked, oldChecked } for checkbox)\n *\n * @param value New value\n * @param oldValue Previous value\n * @param action Action type\n * @returns Event payload object\n */\n protected getEventPayload(\n value: TValue,\n oldValue: TValue,\n action: FieldAction,\n ): Record<string, unknown> {\n return { value, oldValue, action };\n }\n\n /**\n * Update field value programmatically (internal method)\n * Subclasses should provide type-safe public wrappers (e.g., change() method)\n *\n * @param value New value\n * @param options.silent If true, won't emit change event (default: true)\n * @param options.action Action type for the event (default: 'change')\n */\n protected setValue(value: TValue, options?: { silent?: boolean; action?: FieldAction }): void {\n const oldValue = this.getValue();\n\n // Update property value\n this.value = value;\n\n // Write to UI element (DOM only)\n this.writeValue(value);\n\n // Emit event if not silent\n if (options?.silent === false) {\n const payload = this.getEventPayload(value, oldValue, options.action || 'change');\n this.emit('change', { detail: payload });\n }\n }\n\n /**\n * Reset field to specified value or default value\n *\n * @param value Value to reset to, defaults to defaultValue prop\n * @param options.silent If false, will emit reset event (default: true)\n */\n public reset(value?: TValue, options?: { silent?: boolean }): void {\n const resetValue = value !== undefined ? value : this.defaultValue;\n this.setValue(resetValue as TValue, { ...options, action: 'reset' });\n }\n\n /**\n * Clear the field value\n *\n * @param options.silent If false, will emit clear event (default: true)\n */\n public clear(options?: { silent?: boolean }): void {\n this.setValue('' as TValue, { ...options, action: 'clear' });\n }\n\n /**\n * Handle clear button click\n * Clears the field and dispatches event\n */\n protected onClear(): void {\n this.clear({ silent: false });\n }\n\n /**\n * Handle reset button click\n * Resets to default value and dispatches event\n */\n protected onReset(): void {\n this.reset(undefined, { silent: false });\n }\n}\n\nexport default AeicoField;\nexport type AeicoFieldProps = InferProps<typeof AeicoField>;\n"],"names":["AeicoComponent","tags","t"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"aeico-field.js","sources":["../../src/aeico-field.ts"],"sourcesContent":["import type { InferProps, Props, Watchers } from 'aeico';\nimport { tags } from 'aeico';\nimport AeicoComponent from './aeico-component';\nimport { t } from 'aeico-localize';\n\nexport type FieldAction = 'clear' | 'reset' | 'change';\nexport type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n\n/**\n * Base class for form field components\n *\n * Provides common functionality for field components including:\n * - Theme support\n * - i18n integration (via Localizable mixin)\n * - Reset button management\n * - Value management\n * - Common configuration handling\n */\nclass AeicoField<TValue = string> extends AeicoComponent {\n /**\n * Define base field properties (extends AeicoElement properties)\n */\n static props: Props = {\n value: { type: String },\n defaultValue: { type: String },\n resettable: { type: Boolean },\n resetText: { type: String },\n clearable: { type: Boolean },\n clearText: { type: String },\n size: { type: String },\n disabled: { type: Boolean },\n };\n\n /**\n * Property watchers\n */\n static watchers: Watchers = {\n disabled: 'onDisabledChanged',\n };\n\n /**\n * The underlying form control element (input, select, etc.)\n * Subclasses should set this to their specific element\n */\n protected fieldElement: FieldElement | null = null;\n\n protected resetBtn: HTMLButtonElement | null = null;\n protected clearBtn: HTMLButtonElement | null = null;\n\n protected readonly boundOnChange = () =>\n this.setValue(this.getValue(), { silent: false, action: 'change' });\n\n protected readonly boundOnReset = () => this.onReset();\n protected readonly boundOnClear = () => this.onClear();\n\n // Declare reactive properties for TypeScript\n declare value?: TValue;\n declare defaultValue?: TValue | string;\n declare resettable?: boolean;\n declare resetText?: string;\n declare clearable?: boolean;\n declare clearText?: string;\n declare size?: string;\n declare disabled?: boolean;\n\n /**\n * Lifecycle: Component connected to DOM\n */\n connectedCallback() {\n super.connectedCallback();\n }\n\n /**\n * Lifecycle: Component disconnected from DOM\n */\n disconnectedCallback() {\n super.disconnectedCallback();\n }\n\n /**\n * Render action buttons (clear/reset) using this.builder.\n * Must be called from within a build() callback.\n */\n protected renderActionButtons(force: boolean = false) {\n this.renderClearButton(force);\n this.renderResetButton(force);\n }\n\n protected renderResetButton(force: boolean = false) {\n const { button } = tags;\n\n if (force || this.resettable) {\n this.resetBtn = button({\n className: 'reset-btn',\n textContent: this.resetText || '↺',\n title: t('buttons.reset', '↺'),\n '@click': this.boundOnReset,\n });\n }\n }\n\n protected renderClearButton(force: boolean = false) {\n const { button } = tags;\n\n if (force || this.clearable) {\n this.clearBtn = button({\n className: 'clear-btn',\n textContent: this.clearText || '✕',\n title: t('buttons.clear', '✕'),\n '@click': this.boundOnClear,\n });\n }\n }\n\n /**\n * Watcher for disabled property\n */\n protected onDisabledChanged(newValue: boolean) {\n if (this.fieldElement) {\n (this.fieldElement as HTMLInputElement | HTMLSelectElement).disabled = Boolean(newValue);\n }\n }\n\n /**\n * Render the field component\n * Override in subclass to provide custom rendering\n */\n render(): void {\n // Default implementation - subclasses can override\n }\n\n /**\n * Get current value from the field element\n * Default implementation returns the value property of fieldElement\n * Override in subclasses if needed (e.g., checkbox uses checked instead of value)\n *\n * @returns Current field value\n */\n protected getValue():
|
|
1
|
+
{"version":3,"file":"aeico-field.js","sources":["../../src/aeico-field.ts"],"sourcesContent":["import type { InferProps, Props, Watchers } from 'aeico';\nimport { tags } from 'aeico';\nimport AeicoComponent from './aeico-component';\nimport { t } from 'aeico-localize';\n\nexport type FieldAction = 'clear' | 'reset' | 'change';\nexport type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n\n/**\n * Base class for form field components\n *\n * Provides common functionality for field components including:\n * - Theme support\n * - i18n integration (via Localizable mixin)\n * - Reset button management\n * - Value management\n * - Common configuration handling\n */\nclass AeicoField<TValue = string> extends AeicoComponent {\n /**\n * Define base field properties (extends AeicoElement properties)\n */\n static props: Props = {\n value: { type: String },\n defaultValue: { type: String },\n resettable: { type: Boolean },\n resetText: { type: String },\n clearable: { type: Boolean },\n clearText: { type: String },\n size: { type: String },\n disabled: { type: Boolean },\n };\n\n /**\n * Property watchers\n */\n static watchers: Watchers = {\n disabled: 'onDisabledChanged',\n };\n\n /**\n * The underlying form control element (input, select, etc.)\n * Subclasses should set this to their specific element\n */\n protected fieldElement: FieldElement | null = null;\n\n protected resetBtn: HTMLButtonElement | null = null;\n protected clearBtn: HTMLButtonElement | null = null;\n\n protected readonly boundOnChange = () =>\n this.setValue(this.getValue(), { silent: false, action: 'change' });\n\n protected readonly boundOnReset = () => this.onReset();\n protected readonly boundOnClear = () => this.onClear();\n\n // Declare reactive properties for TypeScript\n declare value?: TValue;\n declare defaultValue?: TValue | string;\n declare resettable?: boolean;\n declare resetText?: string;\n declare clearable?: boolean;\n declare clearText?: string;\n declare size?: string;\n declare disabled?: boolean;\n\n /**\n * Lifecycle: Component connected to DOM\n */\n connectedCallback() {\n super.connectedCallback();\n }\n\n /**\n * Lifecycle: Component disconnected from DOM\n */\n disconnectedCallback() {\n super.disconnectedCallback();\n }\n\n /**\n * Render action buttons (clear/reset) using this.builder.\n * Must be called from within a build() callback.\n */\n protected renderActionButtons(force: boolean = false) {\n this.renderClearButton(force);\n this.renderResetButton(force);\n }\n\n protected renderResetButton(force: boolean = false) {\n const { button } = tags;\n\n if (force || this.resettable) {\n this.resetBtn = button({\n className: 'reset-btn',\n textContent: this.resetText || '↺',\n title: t('buttons.reset', '↺'),\n '@click': this.boundOnReset,\n });\n }\n }\n\n protected renderClearButton(force: boolean = false) {\n const { button } = tags;\n\n if (force || this.clearable) {\n this.clearBtn = button({\n className: 'clear-btn',\n textContent: this.clearText || '✕',\n title: t('buttons.clear', '✕'),\n '@click': this.boundOnClear,\n });\n }\n }\n\n /**\n * Watcher for disabled property\n */\n protected onDisabledChanged(newValue: boolean) {\n if (this.fieldElement) {\n (this.fieldElement as HTMLInputElement | HTMLSelectElement).disabled = Boolean(newValue);\n }\n }\n\n /**\n * Render the field component\n * Override in subclass to provide custom rendering\n */\n render(): void {\n // Default implementation - subclasses can override\n }\n\n /**\n * Get current value from the field element\n * Default implementation returns the value property of fieldElement\n * Override in subclasses if needed (e.g., checkbox uses checked instead of value)\n *\n * @returns Current field value\n */\n protected getValue(): TValue {\n return (this.fieldElement?.value || '') as TValue;\n }\n\n /**\n * Write value to the underlying UI element and sync props\n * Subclasses must override this to update their specific UI element\n *\n * @param _value New value to write to the element\n */\n protected writeValue(_value: TValue): void {\n // Base implementation - subclasses override\n }\n\n /**\n * Get event payload for change events\n * Override in subclasses to customize event data (e.g., { checked, oldChecked } for checkbox)\n *\n * @param value New value\n * @param oldValue Previous value\n * @param action Action type\n * @returns Event payload object\n */\n protected getEventPayload(\n value: TValue,\n oldValue: TValue,\n action: FieldAction,\n ): Record<string, unknown> {\n return { value, oldValue, action };\n }\n\n /**\n * Update field value programmatically (internal method)\n * Subclasses should provide type-safe public wrappers (e.g., change() method)\n *\n * @param value New value\n * @param options.silent If true, won't emit change event (default: true)\n * @param options.action Action type for the event (default: 'change')\n */\n protected setValue(value: TValue, options?: { silent?: boolean; action?: FieldAction }): void {\n const oldValue = this.getValue();\n\n // Update property value\n this.value = value;\n\n // Write to UI element (DOM only)\n this.writeValue(value);\n\n // Emit event if not silent\n if (options?.silent === false) {\n const payload = this.getEventPayload(value, oldValue, options.action || 'change');\n this.emit('change', { detail: payload });\n }\n }\n\n /**\n * Reset field to specified value or default value\n *\n * @param value Value to reset to, defaults to defaultValue prop\n * @param options.silent If false, will emit reset event (default: true)\n */\n public reset(value?: TValue, options?: { silent?: boolean }): void {\n const resetValue = value !== undefined ? value : this.defaultValue;\n this.setValue(resetValue as TValue, { ...options, action: 'reset' });\n }\n\n /**\n * Clear the field value\n *\n * @param options.silent If false, will emit clear event (default: true)\n */\n public clear(options?: { silent?: boolean }): void {\n this.setValue('' as TValue, { ...options, action: 'clear' });\n }\n\n /**\n * Handle clear button click\n * Clears the field and dispatches event\n */\n protected onClear(): void {\n this.clear({ silent: false });\n }\n\n /**\n * Handle reset button click\n * Resets to default value and dispatches event\n */\n protected onReset(): void {\n this.reset(undefined, { silent: false });\n }\n}\n\nexport default AeicoField;\nexport type AeicoFieldProps = InferProps<typeof AeicoField>;\n"],"names":[],"mappings":"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"}
|
package/dist/chunks/button.cjs
CHANGED
|
@@ -263,12 +263,12 @@ class Button extends (_a = aeicoComponent.AeicoComponent, _color_dec = [aeico.pr
|
|
|
263
263
|
__publicField(this, "type", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
|
|
264
264
|
__publicField(this, "active", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
|
|
265
265
|
__publicField(this, "block", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
|
|
266
|
-
__publicField(this, "
|
|
266
|
+
__publicField(this, "_buttonElement", null);
|
|
267
|
+
__publicField(this, "_slotElement", null);
|
|
267
268
|
__publicField(this, "_autoAriaLabel", false);
|
|
268
269
|
__publicField(this, "_handleSlotChange", () => {
|
|
269
270
|
var _a2;
|
|
270
|
-
const
|
|
271
|
-
const nodes = (slot == null ? void 0 : slot.assignedNodes()) ?? [];
|
|
271
|
+
const nodes = ((_a2 = this._slotElement) == null ? void 0 : _a2.assignedNodes()) ?? [];
|
|
272
272
|
const elements = nodes.filter((n) => n.nodeType === Node.ELEMENT_NODE);
|
|
273
273
|
const hasText = nodes.some(
|
|
274
274
|
(n) => n.nodeType === Node.TEXT_NODE && n.textContent.trim() !== ""
|
|
@@ -290,14 +290,11 @@ class Button extends (_a = aeicoComponent.AeicoComponent, _color_dec = [aeico.pr
|
|
|
290
290
|
});
|
|
291
291
|
}
|
|
292
292
|
onMounted() {
|
|
293
|
-
var _a2;
|
|
294
|
-
const slot = (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("slot:not([name])");
|
|
295
|
-
if (slot) this.listen(slot, "slotchange", this._handleSlotChange);
|
|
296
293
|
this._handleSlotChange();
|
|
297
294
|
}
|
|
298
295
|
render() {
|
|
299
296
|
return aeico.html(({ button, slot }) => {
|
|
300
|
-
this.
|
|
297
|
+
this._buttonElement = button(
|
|
301
298
|
{
|
|
302
299
|
type: this.type || "button",
|
|
303
300
|
disabled: this.disabled,
|
|
@@ -306,7 +303,7 @@ class Button extends (_a = aeicoComponent.AeicoComponent, _color_dec = [aeico.pr
|
|
|
306
303
|
"aria-disabled": this.disabled
|
|
307
304
|
},
|
|
308
305
|
() => {
|
|
309
|
-
slot();
|
|
306
|
+
this._slotElement = slot({ "@slotchange": this._handleSlotChange });
|
|
310
307
|
}
|
|
311
308
|
);
|
|
312
309
|
});
|
|
@@ -315,24 +312,24 @@ class Button extends (_a = aeicoComponent.AeicoComponent, _color_dec = [aeico.pr
|
|
|
315
312
|
* Programmatically click the button
|
|
316
313
|
*/
|
|
317
314
|
click() {
|
|
318
|
-
if (!this.disabled && this.
|
|
319
|
-
this.
|
|
315
|
+
if (!this.disabled && this._buttonElement) {
|
|
316
|
+
this._buttonElement.click();
|
|
320
317
|
}
|
|
321
318
|
}
|
|
322
319
|
/**
|
|
323
320
|
* Focus the button
|
|
324
321
|
*/
|
|
325
322
|
focus() {
|
|
326
|
-
if (this.
|
|
327
|
-
this.
|
|
323
|
+
if (this._buttonElement) {
|
|
324
|
+
this._buttonElement.focus();
|
|
328
325
|
}
|
|
329
326
|
}
|
|
330
327
|
/**
|
|
331
328
|
* Blur the button
|
|
332
329
|
*/
|
|
333
330
|
blur() {
|
|
334
|
-
if (this.
|
|
335
|
-
this.
|
|
331
|
+
if (this._buttonElement) {
|
|
332
|
+
this._buttonElement.blur();
|
|
336
333
|
}
|
|
337
334
|
}
|
|
338
335
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.cjs","sources":["../../src/button/button.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport buttonStyle from '../styles/components/button.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { ButtonColor, ButtonSize, ButtonVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Button Component\n *\n * A customizable button component with multiple variants and sizes.\n * Supports theme and internationalization through mixins.\n *\n * @example\n * ```typescript\n * // Using the static create method\n * const button = Button.create({\n * variant: 'primary',\n * size: 'md'\n * })\n * ```\n *\n * @example\n * ```html\n * <!-- Using as Web Component -->\n * <ae-button variant=\"primary\" size=\"md\">Save</ae-button>\n * <ae-button variant=\"danger\" size=\"sm\">Delete</ae-button>\n * <ae-button variant=\"subtle\">Cancel</ae-button>\n * ```\n */\nclass Button extends AeicoComponent {\n protected static styles = [styleVariables, sizeCSS, colorCSS, buttonStyle];\n\n @prop({ type: String })\n color?: ButtonColor;\n\n @prop({ type: String })\n variant?: ButtonVariant;\n\n @prop({ type: String })\n size?: ButtonSize;\n\n @prop({ type: Boolean })\n disabled?: boolean;\n\n @prop({ type: String })\n type?: 'button' | 'submit' | 'reset';\n\n @prop({ type: Boolean })\n active?: boolean;\n\n @prop({ type: Boolean })\n block?: boolean;\n\n private
|
|
1
|
+
{"version":3,"file":"button.cjs","sources":["../../src/button/button.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport buttonStyle from '../styles/components/button.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { ButtonColor, ButtonSize, ButtonVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Button Component\n *\n * A customizable button component with multiple variants and sizes.\n * Supports theme and internationalization through mixins.\n *\n * @example\n * ```typescript\n * // Using the static create method\n * const button = Button.create({\n * variant: 'primary',\n * size: 'md'\n * })\n * ```\n *\n * @example\n * ```html\n * <!-- Using as Web Component -->\n * <ae-button variant=\"primary\" size=\"md\">Save</ae-button>\n * <ae-button variant=\"danger\" size=\"sm\">Delete</ae-button>\n * <ae-button variant=\"subtle\">Cancel</ae-button>\n * ```\n */\nclass Button extends AeicoComponent {\n protected static styles = [styleVariables, sizeCSS, colorCSS, buttonStyle];\n\n @prop({ type: String })\n color?: ButtonColor;\n\n @prop({ type: String })\n variant?: ButtonVariant;\n\n @prop({ type: String })\n size?: ButtonSize;\n\n @prop({ type: Boolean })\n disabled?: boolean;\n\n @prop({ type: String })\n type?: 'button' | 'submit' | 'reset';\n\n @prop({ type: Boolean })\n active?: boolean;\n\n @prop({ type: Boolean })\n block?: boolean;\n\n private _buttonElement: HTMLButtonElement | null = null;\n private _slotElement: HTMLSlotElement | null = null;\n private _autoAriaLabel = false;\n\n protected onMounted() {\n this._handleSlotChange();\n }\n\n private _handleSlotChange = () => {\n const nodes = this._slotElement?.assignedNodes() ?? [];\n // Icon-only: exactly one element (ae-icon) and no meaningful text nodes\n const elements = nodes.filter((n): n is Element => n.nodeType === Node.ELEMENT_NODE);\n const hasText = nodes.some(\n (n) => n.nodeType === Node.TEXT_NODE && n.textContent!.trim() !== '',\n );\n const isIconOnly =\n !hasText && elements.length === 1 && elements[0].tagName.toLowerCase() === 'ae-icon';\n\n if (isIconOnly) {\n this.setAttribute('icon-only', '');\n if (!this.hasAttribute('aria-label') || this._autoAriaLabel) {\n this.setAttribute('aria-label', elements[0].getAttribute('name') ?? '');\n this._autoAriaLabel = true;\n }\n } else {\n this.removeAttribute('icon-only');\n if (this._autoAriaLabel) {\n this.removeAttribute('aria-label');\n this._autoAriaLabel = false;\n }\n }\n };\n\n protected render() {\n return html(({ button, slot }) => {\n this._buttonElement = button(\n {\n type: this.type || 'button',\n disabled: this.disabled,\n part: 'button',\n 'aria-pressed': this.active,\n 'aria-disabled': this.disabled,\n },\n () => {\n this._slotElement = slot({ '@slotchange': this._handleSlotChange });\n },\n );\n });\n }\n\n /**\n * Programmatically click the button\n */\n click() {\n if (!this.disabled && this._buttonElement) {\n this._buttonElement.click();\n }\n }\n\n /**\n * Focus the button\n */\n focus() {\n if (this._buttonElement) {\n this._buttonElement.focus();\n }\n }\n\n /**\n * Blur the button\n */\n blur() {\n if (this._buttonElement) {\n this._buttonElement.blur();\n }\n }\n}\n\nButton.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-button': Button;\n }\n}\n\nexport default Button;\nexport type ButtonProps = InferProps<typeof Button>;\n"],"names":["prop","_a","html","styleVariables","sizeCSS","colorCSS"],"mappings":"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"}
|
package/dist/chunks/button.js
CHANGED
|
@@ -262,12 +262,12 @@ class Button extends (_a = AeicoComponent, _color_dec = [prop({ type: String })]
|
|
|
262
262
|
__publicField(this, "type", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
|
|
263
263
|
__publicField(this, "active", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
|
|
264
264
|
__publicField(this, "block", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
|
|
265
|
-
__publicField(this, "
|
|
265
|
+
__publicField(this, "_buttonElement", null);
|
|
266
|
+
__publicField(this, "_slotElement", null);
|
|
266
267
|
__publicField(this, "_autoAriaLabel", false);
|
|
267
268
|
__publicField(this, "_handleSlotChange", () => {
|
|
268
269
|
var _a2;
|
|
269
|
-
const
|
|
270
|
-
const nodes = (slot == null ? void 0 : slot.assignedNodes()) ?? [];
|
|
270
|
+
const nodes = ((_a2 = this._slotElement) == null ? void 0 : _a2.assignedNodes()) ?? [];
|
|
271
271
|
const elements = nodes.filter((n) => n.nodeType === Node.ELEMENT_NODE);
|
|
272
272
|
const hasText = nodes.some(
|
|
273
273
|
(n) => n.nodeType === Node.TEXT_NODE && n.textContent.trim() !== ""
|
|
@@ -289,14 +289,11 @@ class Button extends (_a = AeicoComponent, _color_dec = [prop({ type: String })]
|
|
|
289
289
|
});
|
|
290
290
|
}
|
|
291
291
|
onMounted() {
|
|
292
|
-
var _a2;
|
|
293
|
-
const slot = (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("slot:not([name])");
|
|
294
|
-
if (slot) this.listen(slot, "slotchange", this._handleSlotChange);
|
|
295
292
|
this._handleSlotChange();
|
|
296
293
|
}
|
|
297
294
|
render() {
|
|
298
295
|
return html(({ button, slot }) => {
|
|
299
|
-
this.
|
|
296
|
+
this._buttonElement = button(
|
|
300
297
|
{
|
|
301
298
|
type: this.type || "button",
|
|
302
299
|
disabled: this.disabled,
|
|
@@ -305,7 +302,7 @@ class Button extends (_a = AeicoComponent, _color_dec = [prop({ type: String })]
|
|
|
305
302
|
"aria-disabled": this.disabled
|
|
306
303
|
},
|
|
307
304
|
() => {
|
|
308
|
-
slot();
|
|
305
|
+
this._slotElement = slot({ "@slotchange": this._handleSlotChange });
|
|
309
306
|
}
|
|
310
307
|
);
|
|
311
308
|
});
|
|
@@ -314,24 +311,24 @@ class Button extends (_a = AeicoComponent, _color_dec = [prop({ type: String })]
|
|
|
314
311
|
* Programmatically click the button
|
|
315
312
|
*/
|
|
316
313
|
click() {
|
|
317
|
-
if (!this.disabled && this.
|
|
318
|
-
this.
|
|
314
|
+
if (!this.disabled && this._buttonElement) {
|
|
315
|
+
this._buttonElement.click();
|
|
319
316
|
}
|
|
320
317
|
}
|
|
321
318
|
/**
|
|
322
319
|
* Focus the button
|
|
323
320
|
*/
|
|
324
321
|
focus() {
|
|
325
|
-
if (this.
|
|
326
|
-
this.
|
|
322
|
+
if (this._buttonElement) {
|
|
323
|
+
this._buttonElement.focus();
|
|
327
324
|
}
|
|
328
325
|
}
|
|
329
326
|
/**
|
|
330
327
|
* Blur the button
|
|
331
328
|
*/
|
|
332
329
|
blur() {
|
|
333
|
-
if (this.
|
|
334
|
-
this.
|
|
330
|
+
if (this._buttonElement) {
|
|
331
|
+
this._buttonElement.blur();
|
|
335
332
|
}
|
|
336
333
|
}
|
|
337
334
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../src/button/button.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport buttonStyle from '../styles/components/button.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { ButtonColor, ButtonSize, ButtonVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Button Component\n *\n * A customizable button component with multiple variants and sizes.\n * Supports theme and internationalization through mixins.\n *\n * @example\n * ```typescript\n * // Using the static create method\n * const button = Button.create({\n * variant: 'primary',\n * size: 'md'\n * })\n * ```\n *\n * @example\n * ```html\n * <!-- Using as Web Component -->\n * <ae-button variant=\"primary\" size=\"md\">Save</ae-button>\n * <ae-button variant=\"danger\" size=\"sm\">Delete</ae-button>\n * <ae-button variant=\"subtle\">Cancel</ae-button>\n * ```\n */\nclass Button extends AeicoComponent {\n protected static styles = [styleVariables, sizeCSS, colorCSS, buttonStyle];\n\n @prop({ type: String })\n color?: ButtonColor;\n\n @prop({ type: String })\n variant?: ButtonVariant;\n\n @prop({ type: String })\n size?: ButtonSize;\n\n @prop({ type: Boolean })\n disabled?: boolean;\n\n @prop({ type: String })\n type?: 'button' | 'submit' | 'reset';\n\n @prop({ type: Boolean })\n active?: boolean;\n\n @prop({ type: Boolean })\n block?: boolean;\n\n private
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../src/button/button.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport buttonStyle from '../styles/components/button.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { ButtonColor, ButtonSize, ButtonVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Button Component\n *\n * A customizable button component with multiple variants and sizes.\n * Supports theme and internationalization through mixins.\n *\n * @example\n * ```typescript\n * // Using the static create method\n * const button = Button.create({\n * variant: 'primary',\n * size: 'md'\n * })\n * ```\n *\n * @example\n * ```html\n * <!-- Using as Web Component -->\n * <ae-button variant=\"primary\" size=\"md\">Save</ae-button>\n * <ae-button variant=\"danger\" size=\"sm\">Delete</ae-button>\n * <ae-button variant=\"subtle\">Cancel</ae-button>\n * ```\n */\nclass Button extends AeicoComponent {\n protected static styles = [styleVariables, sizeCSS, colorCSS, buttonStyle];\n\n @prop({ type: String })\n color?: ButtonColor;\n\n @prop({ type: String })\n variant?: ButtonVariant;\n\n @prop({ type: String })\n size?: ButtonSize;\n\n @prop({ type: Boolean })\n disabled?: boolean;\n\n @prop({ type: String })\n type?: 'button' | 'submit' | 'reset';\n\n @prop({ type: Boolean })\n active?: boolean;\n\n @prop({ type: Boolean })\n block?: boolean;\n\n private _buttonElement: HTMLButtonElement | null = null;\n private _slotElement: HTMLSlotElement | null = null;\n private _autoAriaLabel = false;\n\n protected onMounted() {\n this._handleSlotChange();\n }\n\n private _handleSlotChange = () => {\n const nodes = this._slotElement?.assignedNodes() ?? [];\n // Icon-only: exactly one element (ae-icon) and no meaningful text nodes\n const elements = nodes.filter((n): n is Element => n.nodeType === Node.ELEMENT_NODE);\n const hasText = nodes.some(\n (n) => n.nodeType === Node.TEXT_NODE && n.textContent!.trim() !== '',\n );\n const isIconOnly =\n !hasText && elements.length === 1 && elements[0].tagName.toLowerCase() === 'ae-icon';\n\n if (isIconOnly) {\n this.setAttribute('icon-only', '');\n if (!this.hasAttribute('aria-label') || this._autoAriaLabel) {\n this.setAttribute('aria-label', elements[0].getAttribute('name') ?? '');\n this._autoAriaLabel = true;\n }\n } else {\n this.removeAttribute('icon-only');\n if (this._autoAriaLabel) {\n this.removeAttribute('aria-label');\n this._autoAriaLabel = false;\n }\n }\n };\n\n protected render() {\n return html(({ button, slot }) => {\n this._buttonElement = button(\n {\n type: this.type || 'button',\n disabled: this.disabled,\n part: 'button',\n 'aria-pressed': this.active,\n 'aria-disabled': this.disabled,\n },\n () => {\n this._slotElement = slot({ '@slotchange': this._handleSlotChange });\n },\n );\n });\n }\n\n /**\n * Programmatically click the button\n */\n click() {\n if (!this.disabled && this._buttonElement) {\n this._buttonElement.click();\n }\n }\n\n /**\n * Focus the button\n */\n focus() {\n if (this._buttonElement) {\n this._buttonElement.focus();\n }\n }\n\n /**\n * Blur the button\n */\n blur() {\n if (this._buttonElement) {\n this._buttonElement.blur();\n }\n }\n}\n\nButton.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-button': Button;\n }\n}\n\nexport default Button;\nexport type ButtonProps = InferProps<typeof Button>;\n"],"names":["_a"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.cjs","sources":["../../src/checkbox/checkbox.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport styles from '../styles/components/checkbox.css?inline';\nimport { CheckboxVariant } from './defines';\n\nclass Checkbox extends AeicoField {\n protected fieldElement: HTMLInputElement | null = null;\n\n static tagName = 'checkbox';\n\n static props: Props = {\n checked: { type: Boolean },\n defaultChecked: { type: Boolean },\n variant: { type: String },\n };\n\n declare checked?: boolean;\n declare defaultChecked?: boolean;\n declare variant?: CheckboxVariant;\n\n protected static styles = [styleVariables, sizeCSS, colorCSS, styles];\n\n protected getValue(): boolean {\n return this.fieldElement?.checked ?? false;\n }\n\n protected writeValue(checked: boolean): void {\n if (this.fieldElement) {\n this.fieldElement.checked = Boolean(checked);\n }\n }\n\n protected getEventPayload(checked: boolean, oldChecked: boolean, action:
|
|
1
|
+
{"version":3,"file":"checkbox.cjs","sources":["../../src/checkbox/checkbox.ts"],"sourcesContent":["import AeicoField, { type FieldAction } from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport styles from '../styles/components/checkbox.css?inline';\nimport { CheckboxVariant } from './defines';\n\nclass Checkbox extends AeicoField<boolean> {\n protected fieldElement: HTMLInputElement | null = null;\n\n static tagName = 'checkbox';\n\n static props: Props = {\n checked: { type: Boolean },\n defaultChecked: { type: Boolean },\n variant: { type: String },\n };\n\n declare checked?: boolean;\n declare defaultChecked?: boolean;\n declare variant?: CheckboxVariant;\n\n protected static styles = [styleVariables, sizeCSS, colorCSS, styles];\n\n protected getValue(): boolean {\n return this.fieldElement?.checked ?? false;\n }\n\n protected writeValue(checked: boolean): void {\n if (this.fieldElement) {\n this.fieldElement.checked = Boolean(checked);\n }\n }\n\n protected getEventPayload(checked: boolean, oldChecked: boolean, action: FieldAction) {\n return { checked, oldChecked, action };\n }\n\n protected setValue(checked: boolean, options?: { silent?: boolean; action?: FieldAction }): void {\n const oldChecked = this.getValue();\n this.checked = checked;\n this.writeValue(checked);\n if (options?.silent === false) {\n this.emit('change', {\n detail: this.getEventPayload(checked, oldChecked, options.action || 'change'),\n });\n }\n }\n\n public reset(checked?: boolean, options?: { silent?: boolean }): void {\n this.setValue(checked !== undefined ? checked : (this.defaultChecked ?? false), {\n ...options,\n action: 'reset',\n });\n }\n\n public clear(options?: { silent?: boolean }): void {\n this.setValue(false, { ...options, action: 'clear' });\n }\n\n render() {\n return html(({ div, input }) => {\n div({ className: 'checkbox-container', variant: this.variant }, () => {\n div({ className: 'checkbox-wrapper' }, () => {\n this.fieldElement = input({\n type: 'checkbox',\n className: 'field-input',\n checked: Boolean(this.checked),\n disabled: Boolean(this.disabled),\n '@change': this.boundOnChange,\n });\n });\n this.renderActionButtons();\n });\n });\n }\n}\n\nCheckbox.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-checkbox': Checkbox;\n }\n}\n\nexport default Checkbox;\nexport type CheckboxProps = InferProps<typeof Checkbox>;\n"],"names":["AeicoField","html","styleVariables","sizeCSS","colorCSS"],"mappings":";;;;;;;;;;AASA,MAAM,iBAAiBA,WAAAA,WAAoB;AAAA,EAA3C;AAAA;AACY,wCAAwC;AAAA;AAAA,EAgBxC,WAAoB;;AAC5B,aAAO,UAAK,iBAAL,mBAAmB,YAAW;AAAA,EACvC;AAAA,EAEU,WAAW,SAAwB;AAC3C,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,UAAU,QAAQ,OAAO;AAAA,IAC7C;AAAA,EACF;AAAA,EAEU,gBAAgB,SAAkB,YAAqB,QAAqB;AACpF,WAAO,EAAE,SAAS,YAAY,OAAA;AAAA,EAChC;AAAA,EAEU,SAAS,SAAkB,SAA4D;AAC/F,UAAM,aAAa,KAAK,SAAA;AACxB,SAAK,UAAU;AACf,SAAK,WAAW,OAAO;AACvB,SAAI,mCAAS,YAAW,OAAO;AAC7B,WAAK,KAAK,UAAU;AAAA,QAClB,QAAQ,KAAK,gBAAgB,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,MAAA,CAC7E;AAAA,IACH;AAAA,EACF;AAAA,EAEO,MAAM,SAAmB,SAAsC;AACpE,SAAK,SAAS,YAAY,SAAY,UAAW,KAAK,kBAAkB,OAAQ;AAAA,MAC9E,GAAG;AAAA,MACH,QAAQ;AAAA,IAAA,CACT;AAAA,EACH;AAAA,EAEO,MAAM,SAAsC;AACjD,SAAK,SAAS,OAAO,EAAE,GAAG,SAAS,QAAQ,SAAS;AAAA,EACtD;AAAA,EAEA,SAAS;AACP,WAAOC,WAAK,CAAC,EAAE,KAAK,YAAY;AAC9B,UAAI,EAAE,WAAW,sBAAsB,SAAS,KAAK,QAAA,GAAW,MAAM;AACpE,YAAI,EAAE,WAAW,mBAAA,GAAsB,MAAM;AAC3C,eAAK,eAAe,MAAM;AAAA,YACxB,MAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS,QAAQ,KAAK,OAAO;AAAA,YAC7B,UAAU,QAAQ,KAAK,QAAQ;AAAA,YAC/B,WAAW,KAAK;AAAA,UAAA,CACjB;AAAA,QACH,CAAC;AACD,aAAK,oBAAA;AAAA,MACP,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAlEE,cAHI,UAGG,WAAU;AAEjB,cALI,UAKG,SAAe;AAAA,EACpB,SAAS,EAAE,MAAM,QAAA;AAAA,EACjB,gBAAgB,EAAE,MAAM,QAAA;AAAA,EACxB,SAAS,EAAE,MAAM,OAAA;AAAO;AAO1B,cAfI,UAea,UAAS,CAACC,UAAAA,gBAAgBC,KAAAA,SAASC,MAAAA,UAAU,MAAM;AAwDtE,SAAS,SAAA;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sources":["../../src/checkbox/checkbox.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport styles from '../styles/components/checkbox.css?inline';\nimport { CheckboxVariant } from './defines';\n\nclass Checkbox extends AeicoField {\n protected fieldElement: HTMLInputElement | null = null;\n\n static tagName = 'checkbox';\n\n static props: Props = {\n checked: { type: Boolean },\n defaultChecked: { type: Boolean },\n variant: { type: String },\n };\n\n declare checked?: boolean;\n declare defaultChecked?: boolean;\n declare variant?: CheckboxVariant;\n\n protected static styles = [styleVariables, sizeCSS, colorCSS, styles];\n\n protected getValue(): boolean {\n return this.fieldElement?.checked ?? false;\n }\n\n protected writeValue(checked: boolean): void {\n if (this.fieldElement) {\n this.fieldElement.checked = Boolean(checked);\n }\n }\n\n protected getEventPayload(checked: boolean, oldChecked: boolean, action:
|
|
1
|
+
{"version":3,"file":"checkbox.js","sources":["../../src/checkbox/checkbox.ts"],"sourcesContent":["import AeicoField, { type FieldAction } from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport styles from '../styles/components/checkbox.css?inline';\nimport { CheckboxVariant } from './defines';\n\nclass Checkbox extends AeicoField<boolean> {\n protected fieldElement: HTMLInputElement | null = null;\n\n static tagName = 'checkbox';\n\n static props: Props = {\n checked: { type: Boolean },\n defaultChecked: { type: Boolean },\n variant: { type: String },\n };\n\n declare checked?: boolean;\n declare defaultChecked?: boolean;\n declare variant?: CheckboxVariant;\n\n protected static styles = [styleVariables, sizeCSS, colorCSS, styles];\n\n protected getValue(): boolean {\n return this.fieldElement?.checked ?? false;\n }\n\n protected writeValue(checked: boolean): void {\n if (this.fieldElement) {\n this.fieldElement.checked = Boolean(checked);\n }\n }\n\n protected getEventPayload(checked: boolean, oldChecked: boolean, action: FieldAction) {\n return { checked, oldChecked, action };\n }\n\n protected setValue(checked: boolean, options?: { silent?: boolean; action?: FieldAction }): void {\n const oldChecked = this.getValue();\n this.checked = checked;\n this.writeValue(checked);\n if (options?.silent === false) {\n this.emit('change', {\n detail: this.getEventPayload(checked, oldChecked, options.action || 'change'),\n });\n }\n }\n\n public reset(checked?: boolean, options?: { silent?: boolean }): void {\n this.setValue(checked !== undefined ? checked : (this.defaultChecked ?? false), {\n ...options,\n action: 'reset',\n });\n }\n\n public clear(options?: { silent?: boolean }): void {\n this.setValue(false, { ...options, action: 'clear' });\n }\n\n render() {\n return html(({ div, input }) => {\n div({ className: 'checkbox-container', variant: this.variant }, () => {\n div({ className: 'checkbox-wrapper' }, () => {\n this.fieldElement = input({\n type: 'checkbox',\n className: 'field-input',\n checked: Boolean(this.checked),\n disabled: Boolean(this.disabled),\n '@change': this.boundOnChange,\n });\n });\n this.renderActionButtons();\n });\n });\n }\n}\n\nCheckbox.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-checkbox': Checkbox;\n }\n}\n\nexport default Checkbox;\nexport type CheckboxProps = InferProps<typeof Checkbox>;\n"],"names":[],"mappings":";;;;;;;;;AASA,MAAM,iBAAiB,WAAoB;AAAA,EAA3C;AAAA;AACY,wCAAwC;AAAA;AAAA,EAgBxC,WAAoB;;AAC5B,aAAO,UAAK,iBAAL,mBAAmB,YAAW;AAAA,EACvC;AAAA,EAEU,WAAW,SAAwB;AAC3C,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,UAAU,QAAQ,OAAO;AAAA,IAC7C;AAAA,EACF;AAAA,EAEU,gBAAgB,SAAkB,YAAqB,QAAqB;AACpF,WAAO,EAAE,SAAS,YAAY,OAAA;AAAA,EAChC;AAAA,EAEU,SAAS,SAAkB,SAA4D;AAC/F,UAAM,aAAa,KAAK,SAAA;AACxB,SAAK,UAAU;AACf,SAAK,WAAW,OAAO;AACvB,SAAI,mCAAS,YAAW,OAAO;AAC7B,WAAK,KAAK,UAAU;AAAA,QAClB,QAAQ,KAAK,gBAAgB,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,MAAA,CAC7E;AAAA,IACH;AAAA,EACF;AAAA,EAEO,MAAM,SAAmB,SAAsC;AACpE,SAAK,SAAS,YAAY,SAAY,UAAW,KAAK,kBAAkB,OAAQ;AAAA,MAC9E,GAAG;AAAA,MACH,QAAQ;AAAA,IAAA,CACT;AAAA,EACH;AAAA,EAEO,MAAM,SAAsC;AACjD,SAAK,SAAS,OAAO,EAAE,GAAG,SAAS,QAAQ,SAAS;AAAA,EACtD;AAAA,EAEA,SAAS;AACP,WAAO,KAAK,CAAC,EAAE,KAAK,YAAY;AAC9B,UAAI,EAAE,WAAW,sBAAsB,SAAS,KAAK,QAAA,GAAW,MAAM;AACpE,YAAI,EAAE,WAAW,mBAAA,GAAsB,MAAM;AAC3C,eAAK,eAAe,MAAM;AAAA,YACxB,MAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS,QAAQ,KAAK,OAAO;AAAA,YAC7B,UAAU,QAAQ,KAAK,QAAQ;AAAA,YAC/B,WAAW,KAAK;AAAA,UAAA,CACjB;AAAA,QACH,CAAC;AACD,aAAK,oBAAA;AAAA,MACP,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAlEE,cAHI,UAGG,WAAU;AAEjB,cALI,UAKG,SAAe;AAAA,EACpB,SAAS,EAAE,MAAM,QAAA;AAAA,EACjB,gBAAgB,EAAE,MAAM,QAAA;AAAA,EACxB,SAAS,EAAE,MAAM,OAAA;AAAO;AAO1B,cAfI,UAea,UAAS,CAAC,gBAAgB,SAAS,UAAU,MAAM;AAwDtE,SAAS,SAAA;"}
|
|
@@ -528,8 +528,8 @@ __publicField(DropdownButton, "styles", [
|
|
|
528
528
|
]);
|
|
529
529
|
DropdownButton.register();
|
|
530
530
|
export {
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
531
|
+
DropdownButton as D,
|
|
532
|
+
DropdownItem as a,
|
|
533
|
+
Dropdown as b
|
|
534
534
|
};
|
|
535
535
|
//# sourceMappingURL=dropdown-button.js.map
|
package/dist/chunks/navbar.cjs
CHANGED
|
@@ -74,7 +74,6 @@ class Navbar extends (_a = aeicoComponent.AeicoComponent, _color_dec = [aeico.pr
|
|
|
74
74
|
}
|
|
75
75
|
connectedCallback() {
|
|
76
76
|
super.connectedCallback();
|
|
77
|
-
this.listen("click", this._handleInnerClick);
|
|
78
77
|
this._outsideClickHandler = (e) => {
|
|
79
78
|
var _a2;
|
|
80
79
|
if (!this.contains(e.target) && !((_a2 = this.shadowRoot) == null ? void 0 : _a2.contains(e.target))) {
|
|
@@ -96,7 +95,7 @@ class Navbar extends (_a = aeicoComponent.AeicoComponent, _color_dec = [aeico.pr
|
|
|
96
95
|
}
|
|
97
96
|
render() {
|
|
98
97
|
return aeico.html(({ div, nav, button, span, slot }) => {
|
|
99
|
-
div({ class: "inner" }, () => {
|
|
98
|
+
div({ class: "inner", "@click": this._handleInnerClick }, () => {
|
|
100
99
|
div({ part: "brand" }, () => {
|
|
101
100
|
slot({ name: "brand" });
|
|
102
101
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navbar.cjs","sources":["../../src/navbar/navbar.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport navbarStyle from '../styles/components/navbar.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport type { NavbarColor, NavbarAppearance } from './defines';\n\n/**\n * Navbar Component\n *\n * A sticky top navigation bar with three slot regions and built-in\n * mobile hamburger collapse.\n *\n * Slots:\n * - `brand` — leftmost area, typically a logo or site name link\n * - `start` — main navigation links / dropdowns\n * - `end` — right-side actions (login button, avatar, etc.)\n *\n * Slotted `<a>` elements receive default link styling controlled via\n * CSS custom properties. Mark the active link with `aria-current=\"page\"`.\n *\n * @example\n * ```html\n * <ae-navbar color=\"primary\" appearance=\"block\">\n * <a slot=\"brand\" href=\"/\">MyApp</a>\n * <a slot=\"start\" href=\"/\" aria-current=\"page\">Home</a>\n * <a slot=\"start\" href=\"/docs\">Docs</a>\n * <ae-button slot=\"end\" size=\"sm\" variant=\"outlined\">Sign in</ae-button>\n * </ae-navbar>\n * ```\n *\n * @example\n * ```css\n * /* Custom height and transparent background *\\/\n * ae-navbar {\n * --ae-navbar-height: 4rem;\n * --ae-navbar-bg: transparent;\n * --ae-navbar-border-width: 0;\n * --ae-navbar-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);\n * }\n * ```\n */\nclass Navbar extends AeicoComponent {\n static tagName = 'navbar';\n\n protected static styles = [styleVariables, colorCSS, navbarStyle];\n\n /** Background color using the design-system color token set. */\n @prop({ type: String })\n accessor color: NavbarColor | undefined;\n\n /** When true (default), the navbar sticks to the top of the viewport while scrolling. Set to false to let it scroll with the page. */\n @prop({ type: Boolean })\n accessor sticky: boolean = false;\n\n /**\n * Hover style preset for slotted `<a>` links.\n * - `text` — only the font color changes on hover (default)\n * - `block` — a subtle filled background block appears on hover\n *\n * Fine-tune further with `--ae-navbar-link-hover-color` /\n * `--ae-navbar-link-hover-bg` CSS variables.\n */\n @prop({ type: String })\n accessor appearance: NavbarAppearance = 'text';\n\n /** Whether the mobile menu is expanded. Reflects as the `open` attribute. */\n @prop({ type: Boolean })\n accessor open: boolean = false;\n\n private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;\n\n connectedCallback() {\n super.connectedCallback();\n // Close menu when
|
|
1
|
+
{"version":3,"file":"navbar.cjs","sources":["../../src/navbar/navbar.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport navbarStyle from '../styles/components/navbar.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport type { NavbarColor, NavbarAppearance } from './defines';\n\n/**\n * Navbar Component\n *\n * A sticky top navigation bar with three slot regions and built-in\n * mobile hamburger collapse.\n *\n * Slots:\n * - `brand` — leftmost area, typically a logo or site name link\n * - `start` — main navigation links / dropdowns\n * - `end` — right-side actions (login button, avatar, etc.)\n *\n * Slotted `<a>` elements receive default link styling controlled via\n * CSS custom properties. Mark the active link with `aria-current=\"page\"`.\n *\n * @example\n * ```html\n * <ae-navbar color=\"primary\" appearance=\"block\">\n * <a slot=\"brand\" href=\"/\">MyApp</a>\n * <a slot=\"start\" href=\"/\" aria-current=\"page\">Home</a>\n * <a slot=\"start\" href=\"/docs\">Docs</a>\n * <ae-button slot=\"end\" size=\"sm\" variant=\"outlined\">Sign in</ae-button>\n * </ae-navbar>\n * ```\n *\n * @example\n * ```css\n * /* Custom height and transparent background *\\/\n * ae-navbar {\n * --ae-navbar-height: 4rem;\n * --ae-navbar-bg: transparent;\n * --ae-navbar-border-width: 0;\n * --ae-navbar-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);\n * }\n * ```\n */\nclass Navbar extends AeicoComponent {\n static tagName = 'navbar';\n\n protected static styles = [styleVariables, colorCSS, navbarStyle];\n\n /** Background color using the design-system color token set. */\n @prop({ type: String })\n accessor color: NavbarColor | undefined;\n\n /** When true (default), the navbar sticks to the top of the viewport while scrolling. Set to false to let it scroll with the page. */\n @prop({ type: Boolean })\n accessor sticky: boolean = false;\n\n /**\n * Hover style preset for slotted `<a>` links.\n * - `text` — only the font color changes on hover (default)\n * - `block` — a subtle filled background block appears on hover\n *\n * Fine-tune further with `--ae-navbar-link-hover-color` /\n * `--ae-navbar-link-hover-bg` CSS variables.\n */\n @prop({ type: String })\n accessor appearance: NavbarAppearance = 'text';\n\n /** Whether the mobile menu is expanded. Reflects as the `open` attribute. */\n @prop({ type: Boolean })\n accessor open: boolean = false;\n\n private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;\n\n connectedCallback() {\n super.connectedCallback();\n // Close menu when clicking outside the navbar\n this._outsideClickHandler = (e: MouseEvent) => {\n // Event retargeting in shadow DOM means e.target is the host element\n // when the click originates inside the shadow root, so this check is safe.\n if (!this.contains(e.target as Node) && !this.shadowRoot?.contains(e.target as Node)) {\n this._closeMenu();\n }\n };\n document.addEventListener('click', this._outsideClickHandler);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n if (this._outsideClickHandler) {\n document.removeEventListener('click', this._outsideClickHandler);\n this._outsideClickHandler = null;\n }\n }\n\n /** Toggle the mobile menu open/closed. */\n toggleMenu(): void {\n this.open = !this.open;\n }\n\n private _handleInnerClick = (e: Event) => {\n if (!this.open) return;\n // Close mobile menu when a slotted <a> link is clicked\n const path = e.composedPath() as Element[];\n if (path.some((el) => (el as HTMLElement).tagName === 'A')) {\n this._closeMenu();\n }\n };\n\n private _toggleMenu = () => {\n this.open = !this.open;\n };\n\n private _closeMenu = () => {\n if (this.open) this.open = false;\n };\n\n protected render() {\n return html(({ div, nav, button, span, slot }) => {\n div({ class: 'inner', '@click': this._handleInnerClick }, () => {\n div({ part: 'brand' }, () => {\n slot({ name: 'brand' });\n });\n nav({ part: 'nav', 'aria-label': 'Main navigation' }, () => {\n div({ part: 'start' }, () => {\n slot({ name: 'start' });\n });\n div({ part: 'end' }, () => {\n slot({ name: 'end' });\n });\n });\n button(\n {\n part: 'hamburger',\n type: 'button',\n 'aria-expanded': String(this.open),\n 'aria-label': 'Toggle navigation',\n '@click': this._toggleMenu,\n },\n () => {\n span({ 'aria-hidden': 'true' });\n span({ 'aria-hidden': 'true' });\n span({ 'aria-hidden': 'true' });\n },\n );\n });\n });\n }\n}\n\nNavbar.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-navbar': Navbar;\n }\n}\n\nexport default Navbar;\nexport type NavbarProps = InferProps<typeof Navbar>;\n"],"names":["AeicoComponent","prop","_a","html","styleVariables","colorCSS"],"mappings":"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"}
|
package/dist/chunks/navbar.js
CHANGED
|
@@ -73,7 +73,6 @@ class Navbar extends (_a = AeicoComponent, _color_dec = [prop({ type: String })]
|
|
|
73
73
|
}
|
|
74
74
|
connectedCallback() {
|
|
75
75
|
super.connectedCallback();
|
|
76
|
-
this.listen("click", this._handleInnerClick);
|
|
77
76
|
this._outsideClickHandler = (e) => {
|
|
78
77
|
var _a2;
|
|
79
78
|
if (!this.contains(e.target) && !((_a2 = this.shadowRoot) == null ? void 0 : _a2.contains(e.target))) {
|
|
@@ -95,7 +94,7 @@ class Navbar extends (_a = AeicoComponent, _color_dec = [prop({ type: String })]
|
|
|
95
94
|
}
|
|
96
95
|
render() {
|
|
97
96
|
return html(({ div, nav, button, span, slot }) => {
|
|
98
|
-
div({ class: "inner" }, () => {
|
|
97
|
+
div({ class: "inner", "@click": this._handleInnerClick }, () => {
|
|
99
98
|
div({ part: "brand" }, () => {
|
|
100
99
|
slot({ name: "brand" });
|
|
101
100
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navbar.js","sources":["../../src/navbar/navbar.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport navbarStyle from '../styles/components/navbar.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport type { NavbarColor, NavbarAppearance } from './defines';\n\n/**\n * Navbar Component\n *\n * A sticky top navigation bar with three slot regions and built-in\n * mobile hamburger collapse.\n *\n * Slots:\n * - `brand` — leftmost area, typically a logo or site name link\n * - `start` — main navigation links / dropdowns\n * - `end` — right-side actions (login button, avatar, etc.)\n *\n * Slotted `<a>` elements receive default link styling controlled via\n * CSS custom properties. Mark the active link with `aria-current=\"page\"`.\n *\n * @example\n * ```html\n * <ae-navbar color=\"primary\" appearance=\"block\">\n * <a slot=\"brand\" href=\"/\">MyApp</a>\n * <a slot=\"start\" href=\"/\" aria-current=\"page\">Home</a>\n * <a slot=\"start\" href=\"/docs\">Docs</a>\n * <ae-button slot=\"end\" size=\"sm\" variant=\"outlined\">Sign in</ae-button>\n * </ae-navbar>\n * ```\n *\n * @example\n * ```css\n * /* Custom height and transparent background *\\/\n * ae-navbar {\n * --ae-navbar-height: 4rem;\n * --ae-navbar-bg: transparent;\n * --ae-navbar-border-width: 0;\n * --ae-navbar-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);\n * }\n * ```\n */\nclass Navbar extends AeicoComponent {\n static tagName = 'navbar';\n\n protected static styles = [styleVariables, colorCSS, navbarStyle];\n\n /** Background color using the design-system color token set. */\n @prop({ type: String })\n accessor color: NavbarColor | undefined;\n\n /** When true (default), the navbar sticks to the top of the viewport while scrolling. Set to false to let it scroll with the page. */\n @prop({ type: Boolean })\n accessor sticky: boolean = false;\n\n /**\n * Hover style preset for slotted `<a>` links.\n * - `text` — only the font color changes on hover (default)\n * - `block` — a subtle filled background block appears on hover\n *\n * Fine-tune further with `--ae-navbar-link-hover-color` /\n * `--ae-navbar-link-hover-bg` CSS variables.\n */\n @prop({ type: String })\n accessor appearance: NavbarAppearance = 'text';\n\n /** Whether the mobile menu is expanded. Reflects as the `open` attribute. */\n @prop({ type: Boolean })\n accessor open: boolean = false;\n\n private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;\n\n connectedCallback() {\n super.connectedCallback();\n // Close menu when
|
|
1
|
+
{"version":3,"file":"navbar.js","sources":["../../src/navbar/navbar.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport navbarStyle from '../styles/components/navbar.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport type { NavbarColor, NavbarAppearance } from './defines';\n\n/**\n * Navbar Component\n *\n * A sticky top navigation bar with three slot regions and built-in\n * mobile hamburger collapse.\n *\n * Slots:\n * - `brand` — leftmost area, typically a logo or site name link\n * - `start` — main navigation links / dropdowns\n * - `end` — right-side actions (login button, avatar, etc.)\n *\n * Slotted `<a>` elements receive default link styling controlled via\n * CSS custom properties. Mark the active link with `aria-current=\"page\"`.\n *\n * @example\n * ```html\n * <ae-navbar color=\"primary\" appearance=\"block\">\n * <a slot=\"brand\" href=\"/\">MyApp</a>\n * <a slot=\"start\" href=\"/\" aria-current=\"page\">Home</a>\n * <a slot=\"start\" href=\"/docs\">Docs</a>\n * <ae-button slot=\"end\" size=\"sm\" variant=\"outlined\">Sign in</ae-button>\n * </ae-navbar>\n * ```\n *\n * @example\n * ```css\n * /* Custom height and transparent background *\\/\n * ae-navbar {\n * --ae-navbar-height: 4rem;\n * --ae-navbar-bg: transparent;\n * --ae-navbar-border-width: 0;\n * --ae-navbar-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);\n * }\n * ```\n */\nclass Navbar extends AeicoComponent {\n static tagName = 'navbar';\n\n protected static styles = [styleVariables, colorCSS, navbarStyle];\n\n /** Background color using the design-system color token set. */\n @prop({ type: String })\n accessor color: NavbarColor | undefined;\n\n /** When true (default), the navbar sticks to the top of the viewport while scrolling. Set to false to let it scroll with the page. */\n @prop({ type: Boolean })\n accessor sticky: boolean = false;\n\n /**\n * Hover style preset for slotted `<a>` links.\n * - `text` — only the font color changes on hover (default)\n * - `block` — a subtle filled background block appears on hover\n *\n * Fine-tune further with `--ae-navbar-link-hover-color` /\n * `--ae-navbar-link-hover-bg` CSS variables.\n */\n @prop({ type: String })\n accessor appearance: NavbarAppearance = 'text';\n\n /** Whether the mobile menu is expanded. Reflects as the `open` attribute. */\n @prop({ type: Boolean })\n accessor open: boolean = false;\n\n private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;\n\n connectedCallback() {\n super.connectedCallback();\n // Close menu when clicking outside the navbar\n this._outsideClickHandler = (e: MouseEvent) => {\n // Event retargeting in shadow DOM means e.target is the host element\n // when the click originates inside the shadow root, so this check is safe.\n if (!this.contains(e.target as Node) && !this.shadowRoot?.contains(e.target as Node)) {\n this._closeMenu();\n }\n };\n document.addEventListener('click', this._outsideClickHandler);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n if (this._outsideClickHandler) {\n document.removeEventListener('click', this._outsideClickHandler);\n this._outsideClickHandler = null;\n }\n }\n\n /** Toggle the mobile menu open/closed. */\n toggleMenu(): void {\n this.open = !this.open;\n }\n\n private _handleInnerClick = (e: Event) => {\n if (!this.open) return;\n // Close mobile menu when a slotted <a> link is clicked\n const path = e.composedPath() as Element[];\n if (path.some((el) => (el as HTMLElement).tagName === 'A')) {\n this._closeMenu();\n }\n };\n\n private _toggleMenu = () => {\n this.open = !this.open;\n };\n\n private _closeMenu = () => {\n if (this.open) this.open = false;\n };\n\n protected render() {\n return html(({ div, nav, button, span, slot }) => {\n div({ class: 'inner', '@click': this._handleInnerClick }, () => {\n div({ part: 'brand' }, () => {\n slot({ name: 'brand' });\n });\n nav({ part: 'nav', 'aria-label': 'Main navigation' }, () => {\n div({ part: 'start' }, () => {\n slot({ name: 'start' });\n });\n div({ part: 'end' }, () => {\n slot({ name: 'end' });\n });\n });\n button(\n {\n part: 'hamburger',\n type: 'button',\n 'aria-expanded': String(this.open),\n 'aria-label': 'Toggle navigation',\n '@click': this._toggleMenu,\n },\n () => {\n span({ 'aria-hidden': 'true' });\n span({ 'aria-hidden': 'true' });\n span({ 'aria-hidden': 'true' });\n },\n );\n });\n });\n }\n}\n\nNavbar.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-navbar': Navbar;\n }\n}\n\nexport default Navbar;\nexport type NavbarProps = InferProps<typeof Navbar>;\n"],"names":["_a"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.cjs","sources":["../../src/radio-group/radio-group.ts","../../src/radio-group/radio.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html, tags } from 'aeico';\nimport type { ButtonColor, ButtonVariant, ButtonSize } from '../button';\nimport { t } from 'aeico-localize';\nimport type { RadioGroupMode, RadioGroupOption, RadioGroupOptions } from './defines';\nimport Radio from './radio';\nimport style from '../styles/components/radio-group.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\n\nclass RadioGroup extends AeicoField {\n protected fieldElement: HTMLInputElement | null = null;\n\n private _slotEl: HTMLSlotElement | null = null;\n private _slotOptions: Radio[] = [];\n\n private static _instanceCount = 0;\n private readonly _groupName: string;\n\n static tagName = 'radio-group';\n\n static props: Props = {\n options: { type: Array },\n mode: { type: String },\n color: { type: String },\n variant: { type: String },\n size: { type: String },\n allowEmpty: { type: Boolean },\n };\n\n declare options?: RadioGroupOptions;\n declare mode?: RadioGroupMode;\n declare color?: ButtonColor;\n declare variant?: ButtonVariant;\n declare size?: ButtonSize;\n declare allowEmpty?: boolean;\n\n protected static styles = [variables, sizeCSS, colorCSS, style];\n\n constructor() {\n super();\n this._groupName = `rg-${++RadioGroup._instanceCount}`;\n }\n\n private _optLabel(opt: RadioGroupOption): string {\n if (opt !== null && typeof opt === 'object') {\n return t(String(opt.label), String(opt.label));\n }\n return String(opt);\n }\n\n private _optValue(opt: RadioGroupOption): string {\n if (opt !== null && typeof opt === 'object') return String(opt.value);\n return String(opt);\n }\n\n private _allOptions(): Array<{ label: string; value: string; disabled?: boolean }> {\n const from_props = (Array.isArray(this.options) ? this.options : []).map((o) => ({\n label: this._optLabel(o),\n value: this._optValue(o),\n }));\n\n const from_slot = this._slotOptions.map((el) => ({\n label: el.textContent?.trim() || el.value,\n value: el.value,\n disabled: el.disabled,\n }));\n\n return [...from_props, ...from_slot];\n }\n\n private _onSlotChange(): void {\n if (!this._slotEl) return;\n\n this._slotOptions = (this._slotEl.assignedElements({ flatten: true }) as HTMLElement[]).filter(\n (el) => el.tagName.toLowerCase() === 'ae-radio',\n ) as Radio[];\n this.update();\n }\n\n // Single handler for radio inputs — handles both select and deselect.\n // Only uses `click` (not `change`) because `change` fires before `click`;\n // if we set value in `change`, the `click` handler would see the updated\n // value and immediately deselect.\n private _boundOnRadioClick = (e: Event) => {\n const input = e.target as HTMLInputElement;\n const current = this.value ?? '';\n if (input.value === current) {\n if (this.allowEmpty) {\n input.checked = false;\n this.setValue('', { silent: false, action: 'change' });\n }\n // !allowEmpty: do nothing\n } else {\n this.setValue(input.value, { silent: false, action: 'change' });\n }\n };\n\n private _boundOnButtonClick = (e: Event) => {\n const btn = e.currentTarget as HTMLElement;\n const val = btn.dataset.value ?? '';\n const current = this.value ?? '';\n // Toggle off if clicking already-selected option\n if (val === current) {\n if (this.allowEmpty) {\n this.setValue('', { silent: false, action: 'change' });\n }\n // !allowEmpty: already selected, do nothing\n } else {\n this.setValue(val, { silent: false, action: 'change' });\n }\n };\n\n protected getValue(): string {\n return this.value ?? '';\n }\n\n protected writeValue(_value: any): void {\n // All visual state is driven by builder diff on next render;\n // for native radio inputs we need to sync checked immediately.\n // The render() reads this.value, so update handles the rest.\n }\n\n protected onReset(): void {\n this.setValue(this.defaultValue ?? '', { silent: false, action: 'reset' });\n }\n\n protected onClear(): void {\n this.setValue('', { silent: false, action: 'clear' });\n }\n\n render() {\n const mode = (this.mode as RadioGroupMode) || 'default';\n const opts = this._allOptions();\n const current = this.value ?? '';\n\n return html(({ div, slot }) => {\n div({ className: 'rg-container' }, () => {\n if (mode === 'default') {\n this._renderRadio(opts, current);\n } else {\n this._renderButtons(opts, current, mode);\n }\n });\n\n if (this.allowEmpty) this.renderClearButton();\n this.renderResetButton();\n\n // Hidden slot — captures <option> light DOM children\n this._slotEl = slot({\n style: { display: 'none' },\n '@slotchange': () => this._onSlotChange(),\n });\n });\n }\n\n private _renderRadio(\n opts: Array<{ label: string; value: string; disabled?: boolean }>,\n current: string,\n ): void {\n const { label, input, span } = tags;\n for (const opt of opts) {\n const isChecked = opt.value === current;\n\n label({ key: `opt-${opt.value}`, className: 'rg-radio-option' }, () => {\n const el = input({\n type: 'radio',\n className: 'rg-radio-input',\n name: this._groupName,\n value: opt.value,\n disabled: Boolean(this.disabled) || Boolean(opt.disabled),\n '@click': this._boundOnRadioClick,\n });\n // Sync DOM property directly — setAttribute('checked') doesn't work\n // after user interaction; only the .checked property controls state.\n el.checked = isChecked;\n // Keep fieldElement pointing to first radio for base-class compat\n if (!this.fieldElement) this.fieldElement = el;\n span({ className: 'rg-radio-label', textContent: opt.label });\n });\n }\n }\n\n private _renderButtons(\n opts: Array<{ label: string; value: string; disabled?: boolean }>,\n current: string,\n mode: RadioGroupMode,\n ): void {\n const { button } = tags;\n const count = opts.length;\n for (let i = 0; i < count; i++) {\n const opt = opts[i];\n const isSelected = opt.value === current;\n\n // Position class for button-group border-radius (CSS handles all styling)\n let posClass = '';\n if (mode === 'button-group') {\n if (count === 1) posClass = ' only';\n else if (i === 0) posClass = ' first';\n else if (i === count - 1) posClass = ' last';\n else posClass = ' inner';\n }\n\n button({\n key: `opt-${opt.value}`,\n className: `rg-btn${isSelected ? ' selected' : ''}${posClass}`,\n textContent: opt.label,\n disabled: Boolean(this.disabled) || Boolean(opt.disabled),\n 'data-value': opt.value,\n '@click': this._boundOnButtonClick,\n });\n }\n }\n}\n\nRadioGroup.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-radio-group': RadioGroup;\n }\n}\n\nexport default RadioGroup;\nexport type RadioGroupProps = InferProps<typeof RadioGroup>;\n","import AeicoComponent from '../aeico-component';\nimport type { InferProps, Props } from 'aeico';\n\n/**\n * AeRadio — structured option element for ae-radio-group.\n *\n * Replaces the native `<option>` approach with a custom element that is\n * fully extensible. Current surface:\n * - `value` — option value submitted / matched against radio-group value\n * - `disabled` — disables this individual option (independent of the group)\n * - Light DOM — label content; can be plain text or rich HTML (icons, etc.)\n *\n * This element has **no shadow DOM** — it is a pure data / content carrier.\n * ae-radio-group reads its properties and light-DOM content, then renders\n * the appropriate UI (radio input, button, segmented pill, …).\n *\n * @example Plain text options\n * ```html\n * <ae-radio-group mode=\"button\" color=\"primary\" value=\"a\">\n * <ae-radio value=\"a\">Option A</ae-radio>\n * <ae-radio value=\"b\">Option B</ae-radio>\n * <ae-radio value=\"c\" disabled>Option C</ae-radio>\n * </ae-radio-group>\n * ```\n *\n * @example Rich content options (icons)\n * ```html\n * <ae-radio-group mode=\"button\" color=\"primary\" value=\"list\">\n * <ae-radio value=\"list\"><ae-icon name=\"list\"></ae-icon> List</ae-radio>\n * <ae-radio value=\"grid\"><ae-icon name=\"grid\"></ae-icon> Grid</ae-radio>\n * </ae-radio-group>\n * ```\n */\nclass Radio extends AeicoComponent {\n static tagName = 'radio';\n\n /** No shadow DOM — this element is a transparent data/content carrier. */\n static override useShadowDOM = false;\n\n static override props: Props = {\n value: { type: String },\n disabled: { type: Boolean },\n };\n\n declare value: string;\n declare disabled?: boolean;\n}\n\nRadio.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-radio': Radio;\n }\n}\n\nexport default Radio;\nexport type RadioProps = InferProps<typeof Radio>;\n"],"names":["AeicoField","t","html","tags","variables","sizeCSS","colorCSS","AeicoComponent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"radio.cjs","sources":["../../src/radio-group/radio-group.ts","../../src/radio-group/radio.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html, tags } from 'aeico';\nimport type { ButtonColor, ButtonVariant, ButtonSize } from '../button';\nimport { t } from 'aeico-localize';\nimport type { RadioGroupMode, RadioGroupOption, RadioGroupOptions } from './defines';\nimport Radio from './radio';\nimport style from '../styles/components/radio-group.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\n\nclass RadioGroup extends AeicoField {\n protected fieldElement: HTMLInputElement | null = null;\n\n private _slotEl: HTMLSlotElement | null = null;\n private _slotOptions: Radio[] = [];\n\n private static _instanceCount = 0;\n private readonly _groupName: string;\n\n static tagName = 'radio-group';\n\n static props: Props = {\n options: { type: Array },\n mode: { type: String },\n color: { type: String },\n variant: { type: String },\n size: { type: String },\n allowEmpty: { type: Boolean },\n };\n\n declare options?: RadioGroupOptions;\n declare mode?: RadioGroupMode;\n declare color?: ButtonColor;\n declare variant?: ButtonVariant;\n declare size?: ButtonSize;\n declare allowEmpty?: boolean;\n\n protected static styles = [variables, sizeCSS, colorCSS, style];\n\n constructor() {\n super();\n this._groupName = `rg-${++RadioGroup._instanceCount}`;\n }\n\n private _optLabel(opt: RadioGroupOption): string {\n if (opt !== null && typeof opt === 'object') {\n return t(String(opt.label), String(opt.label));\n }\n return String(opt);\n }\n\n private _optValue(opt: RadioGroupOption): string {\n if (opt !== null && typeof opt === 'object') return String(opt.value);\n return String(opt);\n }\n\n private _allOptions(): Array<{ label: string; value: string; disabled?: boolean }> {\n const from_props = (Array.isArray(this.options) ? this.options : []).map((o) => ({\n label: this._optLabel(o),\n value: this._optValue(o),\n }));\n\n const from_slot = this._slotOptions.map((el) => ({\n label: el.textContent?.trim() || el.value,\n value: el.value,\n disabled: el.disabled,\n }));\n\n return [...from_props, ...from_slot];\n }\n\n private _onSlotChange(): void {\n if (!this._slotEl) return;\n\n this._slotOptions = (this._slotEl.assignedElements({ flatten: true }) as HTMLElement[]).filter(\n (el) => el.tagName.toLowerCase() === 'ae-radio',\n ) as Radio[];\n this.update();\n }\n\n // Single handler for radio inputs — handles both select and deselect.\n // Only uses `click` (not `change`) because `change` fires before `click`;\n // if we set value in `change`, the `click` handler would see the updated\n // value and immediately deselect.\n private _boundOnRadioClick = (e: Event) => {\n const input = e.target as HTMLInputElement;\n const current = this.value ?? '';\n if (input.value === current) {\n if (this.allowEmpty) {\n input.checked = false;\n this.setValue('', { silent: false, action: 'change' });\n }\n // !allowEmpty: do nothing\n } else {\n this.setValue(input.value, { silent: false, action: 'change' });\n }\n };\n\n private _boundOnButtonClick = (e: Event) => {\n const btn = e.currentTarget as HTMLElement;\n const val = btn.dataset.value ?? '';\n const current = this.value ?? '';\n // Toggle off if clicking already-selected option\n if (val === current) {\n if (this.allowEmpty) {\n this.setValue('', { silent: false, action: 'change' });\n }\n // !allowEmpty: already selected, do nothing\n } else {\n this.setValue(val, { silent: false, action: 'change' });\n }\n };\n\n protected getValue(): string {\n return this.value ?? '';\n }\n\n protected writeValue(_value: string): void {\n // All visual state is driven by builder diff on next render;\n // for native radio inputs we need to sync checked immediately.\n // The render() reads this.value, so update handles the rest.\n }\n\n protected onReset(): void {\n this.setValue(this.defaultValue ?? '', { silent: false, action: 'reset' });\n }\n\n protected onClear(): void {\n this.setValue('', { silent: false, action: 'clear' });\n }\n\n render() {\n const mode = (this.mode as RadioGroupMode) || 'default';\n const opts = this._allOptions();\n const current = this.value ?? '';\n\n return html(({ div, slot }) => {\n div({ className: 'rg-container' }, () => {\n if (mode === 'default') {\n this._renderRadio(opts, current);\n } else {\n this._renderButtons(opts, current, mode);\n }\n });\n\n if (this.allowEmpty) this.renderClearButton();\n this.renderResetButton();\n\n // Hidden slot — captures <option> light DOM children\n this._slotEl = slot({\n style: { display: 'none' },\n '@slotchange': () => this._onSlotChange(),\n });\n });\n }\n\n private _renderRadio(\n opts: Array<{ label: string; value: string; disabled?: boolean }>,\n current: string,\n ): void {\n const { label, input, span } = tags;\n for (const opt of opts) {\n const isChecked = opt.value === current;\n\n label({ key: `opt-${opt.value}`, className: 'rg-radio-option' }, () => {\n const el = input({\n type: 'radio',\n className: 'rg-radio-input',\n name: this._groupName,\n value: opt.value,\n disabled: Boolean(this.disabled) || Boolean(opt.disabled),\n '@click': this._boundOnRadioClick,\n });\n // Sync DOM property directly — setAttribute('checked') doesn't work\n // after user interaction; only the .checked property controls state.\n el.checked = isChecked;\n // Keep fieldElement pointing to first radio for base-class compat\n if (!this.fieldElement) this.fieldElement = el;\n span({ className: 'rg-radio-label', textContent: opt.label });\n });\n }\n }\n\n private _renderButtons(\n opts: Array<{ label: string; value: string; disabled?: boolean }>,\n current: string,\n mode: RadioGroupMode,\n ): void {\n const { button } = tags;\n const count = opts.length;\n for (let i = 0; i < count; i++) {\n const opt = opts[i];\n const isSelected = opt.value === current;\n\n // Position class for button-group border-radius (CSS handles all styling)\n let posClass = '';\n if (mode === 'button-group') {\n if (count === 1) posClass = ' only';\n else if (i === 0) posClass = ' first';\n else if (i === count - 1) posClass = ' last';\n else posClass = ' inner';\n }\n\n button({\n key: `opt-${opt.value}`,\n className: `rg-btn${isSelected ? ' selected' : ''}${posClass}`,\n textContent: opt.label,\n disabled: Boolean(this.disabled) || Boolean(opt.disabled),\n 'data-value': opt.value,\n '@click': this._boundOnButtonClick,\n });\n }\n }\n}\n\nRadioGroup.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-radio-group': RadioGroup;\n }\n}\n\nexport default RadioGroup;\nexport type RadioGroupProps = InferProps<typeof RadioGroup>;\n","import AeicoComponent from '../aeico-component';\nimport type { InferProps, Props } from 'aeico';\n\n/**\n * AeRadio — structured option element for ae-radio-group.\n *\n * Replaces the native `<option>` approach with a custom element that is\n * fully extensible. Current surface:\n * - `value` — option value submitted / matched against radio-group value\n * - `disabled` — disables this individual option (independent of the group)\n * - Light DOM — label content; can be plain text or rich HTML (icons, etc.)\n *\n * This element has **no shadow DOM** — it is a pure data / content carrier.\n * ae-radio-group reads its properties and light-DOM content, then renders\n * the appropriate UI (radio input, button, segmented pill, …).\n *\n * @example Plain text options\n * ```html\n * <ae-radio-group mode=\"button\" color=\"primary\" value=\"a\">\n * <ae-radio value=\"a\">Option A</ae-radio>\n * <ae-radio value=\"b\">Option B</ae-radio>\n * <ae-radio value=\"c\" disabled>Option C</ae-radio>\n * </ae-radio-group>\n * ```\n *\n * @example Rich content options (icons)\n * ```html\n * <ae-radio-group mode=\"button\" color=\"primary\" value=\"list\">\n * <ae-radio value=\"list\"><ae-icon name=\"list\"></ae-icon> List</ae-radio>\n * <ae-radio value=\"grid\"><ae-icon name=\"grid\"></ae-icon> Grid</ae-radio>\n * </ae-radio-group>\n * ```\n */\nclass Radio extends AeicoComponent {\n static tagName = 'radio';\n\n /** No shadow DOM — this element is a transparent data/content carrier. */\n static override useShadowDOM = false;\n\n static override props: Props = {\n value: { type: String },\n disabled: { type: Boolean },\n };\n\n declare value: string;\n declare disabled?: boolean;\n}\n\nRadio.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-radio': Radio;\n }\n}\n\nexport default Radio;\nexport type RadioProps = InferProps<typeof Radio>;\n"],"names":["AeicoField","t","html","tags","variables","sizeCSS","colorCSS","AeicoComponent"],"mappings":"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"}
|