@nuralyui/button 0.0.15 → 0.0.17
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/bundle.js +6 -900
- package/button.component.d.ts +0 -1
- package/button.component.js +0 -2
- package/button.component.js.map +1 -1
- package/package.json +1 -1
package/button.component.d.ts
CHANGED
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { LitElement } from 'lit';
|
|
7
7
|
import { ButtonType, ButtonSize, ButtonShape, IconPosition, ButtonIcons, ButtonIcon, ButtonIconsConfig } from './button.types.js';
|
|
8
|
-
import '../icon/icon.component.js';
|
|
9
8
|
import { ButtonHost } from './interfaces/index.js';
|
|
10
9
|
declare const NrButtonElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
|
|
11
10
|
/**
|
package/button.component.js
CHANGED
|
@@ -15,8 +15,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
15
15
|
import { EMPTY_STRING } from './button.types.js';
|
|
16
16
|
import { styles } from './button.style.js';
|
|
17
17
|
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
18
|
-
// Import icon component
|
|
19
|
-
import '../icon/icon.component.js';
|
|
20
18
|
// Import controllers
|
|
21
19
|
import { ButtonRippleController, ButtonKeyboardController, ButtonLinkController } from './controllers/index.js';
|
|
22
20
|
/**
|
package/button.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.component.js","sourceRoot":"","sources":["../../../src/components/button/button.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ButtonType, ButtonSize, ButtonShape, EMPTY_STRING, IconPosition, ButtonIcons, ButtonIcon, ButtonIconsConfig } from './button.types.js';\nimport { styles } from './button.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\n\n// Import icon component\nimport '../icon/icon.component.js';\n\n// Import controllers\nimport {\n ButtonRippleController,\n ButtonKeyboardController,\n ButtonLinkController\n} from './controllers/index.js';\n\n// Import interfaces\nimport { ButtonHost } from './interfaces/index.js';\n\n/**\n * Versatile button component with multiple variants, loading states, and enhanced icon support.\n * \n * @example\n * ```html\n * <!-- Simple usage -->\n * <nr-button type=\"primary\">Click me</nr-button>\n * \n * <!-- Array-based icons (original API) -->\n * <nr-button type=\"primary\" .icon=${['add']}>Add Item</nr-button>\n * <nr-button type=\"primary\" .icon=${['home', 'arrow-right']}>Home</nr-button>\n * \n * <!-- Separate icon properties (new API) -->\n * <nr-button type=\"primary\" iconLeft=\"home\" iconRight=\"arrow-right\">Navigate</nr-button>\n * <nr-button type=\"primary\" .iconLeft=${{name: 'home', color: 'blue'}}>Enhanced</nr-button>\n * \n * <!-- Object-based icons (new API) -->\n * <nr-button type=\"primary\" .icons=${{left: 'home', right: 'arrow-right'}}>Navigate</nr-button>\n * \n * <!-- Loading state -->\n * <nr-button loading>Processing...</nr-button>\n * ```\n * \n * @fires button-clicked - Button clicked\n * @fires link-navigation - Link navigation\n * \n * @slot default - Button text content\n */\n@customElement('nr-button')\nexport class NrButtonElement extends NuralyUIBaseMixin(LitElement) implements ButtonHost {\n static override styles = styles;\n /** Disables the button */\n @property({ type: Boolean })\n disabled = false;\n\n /** Shows loading spinner */\n @property({ type: Boolean })\n loading = false;\n\n /** Button size (small, medium, large) */\n @property({ type: String })\n size: ButtonSize | '' = EMPTY_STRING;\n\n /** Button type (default, primary, secondary, danger, ghost, link) */\n @property({ type: String })\n type: ButtonType = ButtonType.Default;\n\n /** Button shape (default, circle, round) */\n @property({ type: String })\n shape: ButtonShape = ButtonShape.Default;\n\n /** Makes button full width */\n @property({ type: Boolean })\n block = false;\n\n /** Applies dashed border */\n @property({ type: Boolean })\n dashed = false;\n\n /** Icon configuration (supports strings or enhanced config objects) */\n @property({ type: Array })\n icon: ButtonIcons = [];\n\n /** Left icon (alternative to icon array) */\n @property({ type: Object })\n iconLeft?: ButtonIcon;\n\n /** Right icon (alternative to icon array) */\n @property({ type: Object })\n iconRight?: ButtonIcon;\n\n /** Icon configuration object (alternative to icon array) */\n @property({ type: Object })\n icons?: ButtonIconsConfig;\n\n /** Icon position relative to text */\n @property({ reflect: true })\n iconPosition: IconPosition = IconPosition.Left;\n\n /** URL for link-type buttons */\n @property({ type: String })\n href = EMPTY_STRING;\n\n /** Target attribute for links */\n @property({ type: String })\n target = EMPTY_STRING;\n\n /** Enables ripple effect */\n @property({ type: Boolean })\n ripple = true;\n\n /** Custom aria-label */\n @property({ type: String })\n buttonAriaLabel = EMPTY_STRING;\n\n /** References to descriptive elements */\n @property({ type: String })\n ariaDescribedBy = EMPTY_STRING;\n\n /** HTML button type */\n @property({ type: String })\n htmlType = EMPTY_STRING;\n\n override requiredComponents = ['nr-icon'];\n\n // Controllers\n private rippleController = new ButtonRippleController(this);\n private keyboardController = new ButtonKeyboardController(this);\n private linkController = new ButtonLinkController(this);\n\n override connectedCallback() {\n super.connectedCallback();\n this.validateDependencies();\n }\n\n private getCommonAttributes() {\n return {\n 'data-type': this.type,\n 'data-shape': this.shape,\n 'data-size': this.size || nothing,\n 'data-state': this.loading ? 'loading' : nothing,\n 'data-theme': this.currentTheme,\n 'data-block': this.block ? 'true' : nothing,\n 'class': this.dashed ? 'button-dashed' : '',\n 'aria-disabled': this.disabled ? 'true' : 'false',\n 'aria-label': this.buttonAriaLabel || nothing,\n 'aria-describedby': this.ariaDescribedBy || nothing,\n 'tabindex': this.disabled ? '-1' : '0'\n };\n }\n\n private renderIcon(iconConfig: ButtonIcon) {\n if (!this.isComponentAvailable('nr-icon')) {\n const iconName = typeof iconConfig === 'string' ? iconConfig : iconConfig.name;\n console.warn(\n `[nr-button] Icon component 'nr-icon' not available. Icon \"${iconName}\" will not render. ` +\n `Ensure the icon component is imported and registered.`\n );\n return nothing;\n }\n\n // Get appropriate icon size based on button size\n const getIconSizeForButtonSize = (): 'small' | 'medium' | 'large' | undefined => {\n switch (this.size) {\n case ButtonSize.Small:\n return 'small';\n case ButtonSize.Medium:\n return 'medium';\n case ButtonSize.Large:\n return 'large';\n default:\n return 'medium'; // Default to medium if no size specified\n }\n };\n\n // Handle simple string input (backward compatibility)\n if (typeof iconConfig === 'string') {\n const iconSize = getIconSizeForButtonSize();\n return html`<nr-icon name=${iconConfig} size=${ifDefined(iconSize)}></nr-icon>`;\n }\n\n // Handle enhanced icon configuration\n const {\n name,\n type = 'solid',\n size,\n color,\n alt\n } = iconConfig;\n\n // Use explicit size if provided, otherwise use size based on button size\n const resolvedSize = size || getIconSizeForButtonSize();\n const iconSize = resolvedSize as 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | undefined;\n\n return html`<nr-icon \n name=${name}\n type=${type}\n alt=${alt || ''}\n size=${ifDefined(iconSize)}\n color=${color || ''}\n ></nr-icon>`;\n }\n\n private handleClick(event: MouseEvent) {\n if (this.disabled) {\n event.preventDefault();\n return;\n }\n\n this.rippleController.handleRippleClick(event);\n \n if (this.linkController.isLinkType()) {\n this.linkController.handleLinkNavigation(event);\n }\n \n this.dispatchEventWithMetadata('button-clicked', {\n type: this.type,\n disabled: this.disabled,\n loading: this.loading,\n href: this.href || null\n });\n }\n\n private handleKeydown(event: KeyboardEvent) {\n this.keyboardController.handleKeydown(event);\n }\n\n /**\n * Get the resolved left icon from various sources\n */\n private getResolvedLeftIcon(): ButtonIcon | undefined {\n // Priority: iconLeft > icons.left > icon[0]\n if (this.iconLeft) return this.iconLeft;\n if (this.icons?.left) return this.icons.left;\n if (this.icon?.length > 0) return this.icon[0];\n return undefined;\n }\n\n /**\n * Get the resolved right icon from various sources\n */\n private getResolvedRightIcon(): ButtonIcon | undefined {\n // Priority: iconRight > icons.right > icon[1]\n if (this.iconRight) return this.iconRight;\n if (this.icons?.right) return this.icons.right;\n if (this.icon?.length === 2) return this.icon[1];\n return undefined;\n }\n\n override render() {\n const elementTag = this.linkController.getElementTag();\n const commonAttributes = this.getCommonAttributes();\n const linkAttributes = this.linkController.getLinkAttributes();\n \n const leftIcon = this.getResolvedLeftIcon();\n const rightIcon = this.getResolvedRightIcon();\n \n const content = html`\n <span id=\"container\" part=\"container\">\n ${leftIcon ? this.renderIcon(leftIcon) : nothing}\n <slot id=\"slot\"></slot>\n ${rightIcon ? this.renderIcon(rightIcon) : nothing}\n </span>\n `;\n if (elementTag === 'a') {\n return html`\n <a\n href=\"${linkAttributes.href}\"\n target=\"${linkAttributes.target || nothing}\"\n rel=\"${linkAttributes.rel || nothing}\"\n role=\"${linkAttributes.role}\"\n data-type=\"${commonAttributes['data-type']}\"\n data-shape=\"${commonAttributes['data-shape']}\"\n data-size=\"${commonAttributes['data-size']}\"\n data-state=\"${commonAttributes['data-state']}\"\n data-theme=\"${commonAttributes['data-theme']}\"\n data-block=\"${commonAttributes['data-block']}\"\n class=\"${commonAttributes.class}\"\n aria-disabled=\"${this.disabled}\"\n aria-label=\"${this.buttonAriaLabel || nothing}\"\n aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n tabindex=\"${this.disabled ? -1 : 0}\"\n @click=\"${this.handleClick}\"\n @keydown=\"${this.handleKeydown}\"\n >\n ${content}\n </a>\n `;\n }\n \n return html`\n <button\n ?disabled=\"${this.disabled}\"\n type=\"${(this.htmlType || 'button') as 'button' | 'submit' | 'reset'}\"\n role=\"${linkAttributes.role}\"\n data-type=\"${commonAttributes['data-type']}\"\n data-shape=\"${commonAttributes['data-shape']}\"\n data-size=\"${commonAttributes['data-size']}\" \n data-state=\"${commonAttributes['data-state']}\"\n data-theme=\"${commonAttributes['data-theme']}\"\n data-block=\"${commonAttributes['data-block']}\"\n class=\"${commonAttributes.class}\"\n aria-disabled=\"${this.disabled}\"\n aria-label=\"${this.buttonAriaLabel || nothing}\"\n aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n tabindex=\"${this.disabled ? -1 : 0}\"\n @click=\"${this.handleClick}\"\n @keydown=\"${this.handleKeydown}\"\n >\n ${content}\n </button>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"button.component.js","sourceRoot":"","sources":["../../../src/components/button/button.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ButtonType, ButtonSize, ButtonShape, EMPTY_STRING, IconPosition, ButtonIcons, ButtonIcon, ButtonIconsConfig } from './button.types.js';\nimport { styles } from './button.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\n\n// Import controllers\nimport {\n ButtonRippleController,\n ButtonKeyboardController,\n ButtonLinkController\n} from './controllers/index.js';\n\n// Import interfaces\nimport { ButtonHost } from './interfaces/index.js';\n\n/**\n * Versatile button component with multiple variants, loading states, and enhanced icon support.\n * \n * @example\n * ```html\n * <!-- Simple usage -->\n * <nr-button type=\"primary\">Click me</nr-button>\n * \n * <!-- Array-based icons (original API) -->\n * <nr-button type=\"primary\" .icon=${['add']}>Add Item</nr-button>\n * <nr-button type=\"primary\" .icon=${['home', 'arrow-right']}>Home</nr-button>\n * \n * <!-- Separate icon properties (new API) -->\n * <nr-button type=\"primary\" iconLeft=\"home\" iconRight=\"arrow-right\">Navigate</nr-button>\n * <nr-button type=\"primary\" .iconLeft=${{name: 'home', color: 'blue'}}>Enhanced</nr-button>\n * \n * <!-- Object-based icons (new API) -->\n * <nr-button type=\"primary\" .icons=${{left: 'home', right: 'arrow-right'}}>Navigate</nr-button>\n * \n * <!-- Loading state -->\n * <nr-button loading>Processing...</nr-button>\n * ```\n * \n * @fires button-clicked - Button clicked\n * @fires link-navigation - Link navigation\n * \n * @slot default - Button text content\n */\n@customElement('nr-button')\nexport class NrButtonElement extends NuralyUIBaseMixin(LitElement) implements ButtonHost {\n static override styles = styles;\n /** Disables the button */\n @property({ type: Boolean })\n disabled = false;\n\n /** Shows loading spinner */\n @property({ type: Boolean })\n loading = false;\n\n /** Button size (small, medium, large) */\n @property({ type: String })\n size: ButtonSize | '' = EMPTY_STRING;\n\n /** Button type (default, primary, secondary, danger, ghost, link) */\n @property({ type: String })\n type: ButtonType = ButtonType.Default;\n\n /** Button shape (default, circle, round) */\n @property({ type: String })\n shape: ButtonShape = ButtonShape.Default;\n\n /** Makes button full width */\n @property({ type: Boolean })\n block = false;\n\n /** Applies dashed border */\n @property({ type: Boolean })\n dashed = false;\n\n /** Icon configuration (supports strings or enhanced config objects) */\n @property({ type: Array })\n icon: ButtonIcons = [];\n\n /** Left icon (alternative to icon array) */\n @property({ type: Object })\n iconLeft?: ButtonIcon;\n\n /** Right icon (alternative to icon array) */\n @property({ type: Object })\n iconRight?: ButtonIcon;\n\n /** Icon configuration object (alternative to icon array) */\n @property({ type: Object })\n icons?: ButtonIconsConfig;\n\n /** Icon position relative to text */\n @property({ reflect: true })\n iconPosition: IconPosition = IconPosition.Left;\n\n /** URL for link-type buttons */\n @property({ type: String })\n href = EMPTY_STRING;\n\n /** Target attribute for links */\n @property({ type: String })\n target = EMPTY_STRING;\n\n /** Enables ripple effect */\n @property({ type: Boolean })\n ripple = true;\n\n /** Custom aria-label */\n @property({ type: String })\n buttonAriaLabel = EMPTY_STRING;\n\n /** References to descriptive elements */\n @property({ type: String })\n ariaDescribedBy = EMPTY_STRING;\n\n /** HTML button type */\n @property({ type: String })\n htmlType = EMPTY_STRING;\n\n override requiredComponents = ['nr-icon'];\n\n // Controllers\n private rippleController = new ButtonRippleController(this);\n private keyboardController = new ButtonKeyboardController(this);\n private linkController = new ButtonLinkController(this);\n\n override connectedCallback() {\n super.connectedCallback();\n this.validateDependencies();\n }\n\n private getCommonAttributes() {\n return {\n 'data-type': this.type,\n 'data-shape': this.shape,\n 'data-size': this.size || nothing,\n 'data-state': this.loading ? 'loading' : nothing,\n 'data-theme': this.currentTheme,\n 'data-block': this.block ? 'true' : nothing,\n 'class': this.dashed ? 'button-dashed' : '',\n 'aria-disabled': this.disabled ? 'true' : 'false',\n 'aria-label': this.buttonAriaLabel || nothing,\n 'aria-describedby': this.ariaDescribedBy || nothing,\n 'tabindex': this.disabled ? '-1' : '0'\n };\n }\n\n private renderIcon(iconConfig: ButtonIcon) {\n if (!this.isComponentAvailable('nr-icon')) {\n const iconName = typeof iconConfig === 'string' ? iconConfig : iconConfig.name;\n console.warn(\n `[nr-button] Icon component 'nr-icon' not available. Icon \"${iconName}\" will not render. ` +\n `Ensure the icon component is imported and registered.`\n );\n return nothing;\n }\n\n // Get appropriate icon size based on button size\n const getIconSizeForButtonSize = (): 'small' | 'medium' | 'large' | undefined => {\n switch (this.size) {\n case ButtonSize.Small:\n return 'small';\n case ButtonSize.Medium:\n return 'medium';\n case ButtonSize.Large:\n return 'large';\n default:\n return 'medium'; // Default to medium if no size specified\n }\n };\n\n // Handle simple string input (backward compatibility)\n if (typeof iconConfig === 'string') {\n const iconSize = getIconSizeForButtonSize();\n return html`<nr-icon name=${iconConfig} size=${ifDefined(iconSize)}></nr-icon>`;\n }\n\n // Handle enhanced icon configuration\n const {\n name,\n type = 'solid',\n size,\n color,\n alt\n } = iconConfig;\n\n // Use explicit size if provided, otherwise use size based on button size\n const resolvedSize = size || getIconSizeForButtonSize();\n const iconSize = resolvedSize as 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | undefined;\n\n return html`<nr-icon \n name=${name}\n type=${type}\n alt=${alt || ''}\n size=${ifDefined(iconSize)}\n color=${color || ''}\n ></nr-icon>`;\n }\n\n private handleClick(event: MouseEvent) {\n if (this.disabled) {\n event.preventDefault();\n return;\n }\n\n this.rippleController.handleRippleClick(event);\n \n if (this.linkController.isLinkType()) {\n this.linkController.handleLinkNavigation(event);\n }\n \n this.dispatchEventWithMetadata('button-clicked', {\n type: this.type,\n disabled: this.disabled,\n loading: this.loading,\n href: this.href || null\n });\n }\n\n private handleKeydown(event: KeyboardEvent) {\n this.keyboardController.handleKeydown(event);\n }\n\n /**\n * Get the resolved left icon from various sources\n */\n private getResolvedLeftIcon(): ButtonIcon | undefined {\n // Priority: iconLeft > icons.left > icon[0]\n if (this.iconLeft) return this.iconLeft;\n if (this.icons?.left) return this.icons.left;\n if (this.icon?.length > 0) return this.icon[0];\n return undefined;\n }\n\n /**\n * Get the resolved right icon from various sources\n */\n private getResolvedRightIcon(): ButtonIcon | undefined {\n // Priority: iconRight > icons.right > icon[1]\n if (this.iconRight) return this.iconRight;\n if (this.icons?.right) return this.icons.right;\n if (this.icon?.length === 2) return this.icon[1];\n return undefined;\n }\n\n override render() {\n const elementTag = this.linkController.getElementTag();\n const commonAttributes = this.getCommonAttributes();\n const linkAttributes = this.linkController.getLinkAttributes();\n \n const leftIcon = this.getResolvedLeftIcon();\n const rightIcon = this.getResolvedRightIcon();\n \n const content = html`\n <span id=\"container\" part=\"container\">\n ${leftIcon ? this.renderIcon(leftIcon) : nothing}\n <slot id=\"slot\"></slot>\n ${rightIcon ? this.renderIcon(rightIcon) : nothing}\n </span>\n `;\n if (elementTag === 'a') {\n return html`\n <a\n href=\"${linkAttributes.href}\"\n target=\"${linkAttributes.target || nothing}\"\n rel=\"${linkAttributes.rel || nothing}\"\n role=\"${linkAttributes.role}\"\n data-type=\"${commonAttributes['data-type']}\"\n data-shape=\"${commonAttributes['data-shape']}\"\n data-size=\"${commonAttributes['data-size']}\"\n data-state=\"${commonAttributes['data-state']}\"\n data-theme=\"${commonAttributes['data-theme']}\"\n data-block=\"${commonAttributes['data-block']}\"\n class=\"${commonAttributes.class}\"\n aria-disabled=\"${this.disabled}\"\n aria-label=\"${this.buttonAriaLabel || nothing}\"\n aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n tabindex=\"${this.disabled ? -1 : 0}\"\n @click=\"${this.handleClick}\"\n @keydown=\"${this.handleKeydown}\"\n >\n ${content}\n </a>\n `;\n }\n \n return html`\n <button\n ?disabled=\"${this.disabled}\"\n type=\"${(this.htmlType || 'button') as 'button' | 'submit' | 'reset'}\"\n role=\"${linkAttributes.role}\"\n data-type=\"${commonAttributes['data-type']}\"\n data-shape=\"${commonAttributes['data-shape']}\"\n data-size=\"${commonAttributes['data-size']}\" \n data-state=\"${commonAttributes['data-state']}\"\n data-theme=\"${commonAttributes['data-theme']}\"\n data-block=\"${commonAttributes['data-block']}\"\n class=\"${commonAttributes.class}\"\n aria-disabled=\"${this.disabled}\"\n aria-label=\"${this.buttonAriaLabel || nothing}\"\n aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n tabindex=\"${this.disabled ? -1 : 0}\"\n @click=\"${this.handleClick}\"\n @keydown=\"${this.handleKeydown}\"\n >\n ${content}\n </button>\n `;\n }\n}\n"]}
|