@nova-design-system/nova-webcomponents 3.16.0 → 3.18.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index-93d3b2f8.js +4 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/native.cjs.js +1 -1
- package/dist/cjs/nv-button.cjs.entry.js +1 -7
- package/dist/cjs/nv-button.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-datagrid.cjs.entry.js +1 -1
- package/dist/cjs/nv-datagrid.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-icon.cjs.entry.js +1 -1
- package/dist/cjs/nv-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-split.cjs.entry.js +339 -0
- package/dist/cjs/nv-split.cjs.entry.js.map +1 -0
- package/dist/cjs/nv-stack.cjs.entry.js +1 -1
- package/dist/cjs/nv-table.cjs.entry.js +1 -1
- package/dist/cjs/nv-toggle.cjs.entry.js +2 -2
- package/dist/cjs/nv-togglebutton.cjs.entry.js +1 -1
- package/dist/cjs/nv-togglebuttongroup.cjs.entry.js +1 -1
- package/dist/cjs/nv-tooltip.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/nv-button/nv-button.js +1 -13
- package/dist/collection/components/nv-button/nv-button.js.map +1 -1
- package/dist/collection/components/nv-datagrid/nv-datagrid.css +4 -4
- package/dist/collection/components/nv-icon/nv-icons.js +1 -1
- package/dist/collection/components/nv-icon/nv-icons.js.map +1 -1
- package/dist/collection/components/nv-menuitem/nv-menuitem.js +1 -1
- package/dist/collection/components/nv-split/nv-split.docs.js +41 -0
- package/dist/collection/components/nv-split/nv-split.docs.js.map +1 -0
- package/dist/collection/components/nv-split/nv-split.js +549 -0
- package/dist/collection/components/nv-split/nv-split.js.map +1 -0
- package/dist/collection/components/nv-split/styles/nv-split.css +96 -0
- package/dist/collection/components/nv-stack/nv-stack.js +1 -1
- package/dist/collection/components/nv-table/nv-table.js +1 -1
- package/dist/collection/components/nv-toggle/nv-toggle.js +2 -2
- package/dist/collection/components/nv-togglebutton/nv-togglebutton.js +1 -1
- package/dist/collection/components/nv-togglebuttongroup/nv-togglebuttongroup.js +1 -1
- package/dist/collection/components/nv-tooltip/nv-tooltip.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/nv-accordion-item.js +1 -1
- package/dist/components/nv-accordion.js +3 -3
- package/dist/components/nv-alert.js +1 -1
- package/dist/components/nv-avatar.js +1 -1
- package/dist/components/nv-badge.js +1 -1
- package/dist/components/nv-breadcrumb.js +1 -1
- package/dist/components/nv-button.js +1 -1
- package/dist/components/nv-datagrid.js +3 -3
- package/dist/components/nv-datagrid.js.map +1 -1
- package/dist/components/nv-dialog.js +3 -3
- package/dist/components/nv-dialogfooter.js +1 -1
- package/dist/components/nv-fielddate.js +2 -2
- package/dist/components/nv-fielddaterange.js +2 -2
- package/dist/components/nv-fielddropdown.js +3 -3
- package/dist/components/nv-fielddropdownitem.js +1 -1
- package/dist/components/nv-fieldmultiselect.js +3 -3
- package/dist/components/nv-fieldnumber.js +1 -1
- package/dist/components/nv-fieldpassword.js +2 -2
- package/dist/components/nv-fieldselect.js +2 -2
- package/dist/components/nv-fieldslider.js +3 -3
- package/dist/components/nv-fieldtext.js +1 -1
- package/dist/components/nv-fieldtime.js +2 -2
- package/dist/components/nv-icon.js +1 -1
- package/dist/components/nv-iconbutton.js +1 -1
- package/dist/components/nv-menu.js +2 -2
- package/dist/components/nv-menuitem.js +1 -1
- package/dist/components/nv-notification.js +1 -1
- package/dist/components/nv-split.d.ts +11 -0
- package/dist/components/nv-split.js +366 -0
- package/dist/components/nv-split.js.map +1 -0
- package/dist/components/nv-stack.js +1 -1
- package/dist/components/nv-table.js +1 -1
- package/dist/components/nv-toggle.js +2 -2
- package/dist/components/nv-togglebutton.js +1 -1
- package/dist/components/nv-togglebuttongroup.js +1 -1
- package/dist/components/nv-tooltip.js +1 -1
- package/dist/components/{p-0fd23531.js → p-147cefeb.js} +3 -3
- package/dist/components/{p-0fd23531.js.map → p-147cefeb.js.map} +1 -1
- package/dist/components/{p-378e3127.js → p-47a33f6b.js} +3 -3
- package/dist/components/{p-378e3127.js.map → p-47a33f6b.js.map} +1 -1
- package/dist/components/{p-f2bac2aa.js → p-6e67bfc0.js} +2 -2
- package/dist/components/{p-f2bac2aa.js.map → p-6e67bfc0.js.map} +1 -1
- package/dist/components/{p-9707528d.js → p-6f2b257e.js} +2 -2
- package/dist/components/{p-9707528d.js.map → p-6f2b257e.js.map} +1 -1
- package/dist/components/{p-2cc83e0c.js → p-766a3f49.js} +2 -2
- package/dist/components/{p-2cc83e0c.js.map → p-766a3f49.js.map} +1 -1
- package/dist/components/{p-7112612c.js → p-7684ad27.js} +2 -2
- package/dist/components/{p-7112612c.js.map → p-7684ad27.js.map} +1 -1
- package/dist/components/{p-31478080.js → p-811c9225.js} +2 -2
- package/dist/components/{p-31478080.js.map → p-811c9225.js.map} +1 -1
- package/dist/components/{p-2d64749f.js → p-9e7468e3.js} +3 -9
- package/dist/components/p-9e7468e3.js.map +1 -0
- package/dist/components/{p-47d499b4.js → p-be6e2884.js} +2 -2
- package/dist/components/{p-47d499b4.js.map → p-be6e2884.js.map} +1 -1
- package/dist/components/{p-a1ef5e37.js → p-e43a36c4.js} +3 -3
- package/dist/components/{p-a1ef5e37.js.map → p-e43a36c4.js.map} +1 -1
- package/dist/components/{p-df5d76a5.js → p-ec31af69.js} +2 -2
- package/dist/components/{p-df5d76a5.js.map → p-ec31af69.js.map} +1 -1
- package/dist/esm/index-dc2723f3.js +4 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/native.js +1 -1
- package/dist/esm/nv-button.entry.js +1 -7
- package/dist/esm/nv-button.entry.js.map +1 -1
- package/dist/esm/nv-datagrid.entry.js +1 -1
- package/dist/esm/nv-datagrid.entry.js.map +1 -1
- package/dist/esm/nv-icon.entry.js +1 -1
- package/dist/esm/nv-icon.entry.js.map +1 -1
- package/dist/esm/nv-split.entry.js +335 -0
- package/dist/esm/nv-split.entry.js.map +1 -0
- package/dist/esm/nv-stack.entry.js +1 -1
- package/dist/esm/nv-table.entry.js +1 -1
- package/dist/esm/nv-toggle.entry.js +2 -2
- package/dist/esm/nv-togglebutton.entry.js +1 -1
- package/dist/esm/nv-togglebuttongroup.entry.js +1 -1
- package/dist/esm/nv-tooltip.entry.js +1 -1
- package/dist/native/index.esm.js +1 -1
- package/dist/native/index.esm.js.map +1 -1
- package/dist/native/native.css +1 -1
- package/dist/native/native.esm.js +1 -1
- package/dist/native/native.esm.js.map +1 -1
- package/dist/native/{p-4eaf417d.entry.js → p-122c78c3.entry.js} +2 -2
- package/dist/native/{p-4eaf417d.entry.js.map → p-122c78c3.entry.js.map} +1 -1
- package/dist/native/{p-445221dc.entry.js → p-14e622e1.entry.js} +2 -2
- package/dist/native/p-2364aefa.entry.js +2 -0
- package/dist/native/p-2364aefa.entry.js.map +1 -0
- package/dist/native/{p-44a78545.entry.js → p-52d2c0ae.entry.js} +2 -2
- package/dist/native/{p-a2f58133.entry.js → p-638967bf.entry.js} +2 -2
- package/dist/native/{p-26513cbd.entry.js → p-74572fce.entry.js} +2 -2
- package/dist/native/{p-26513cbd.entry.js.map → p-74572fce.entry.js.map} +1 -1
- package/dist/native/{p-075d231e.entry.js → p-91fab6c2.entry.js} +2 -2
- package/dist/native/{p-d45ee8e5.entry.js → p-a6fc987a.entry.js} +2 -2
- package/dist/native/p-a6fc987a.entry.js.map +1 -0
- package/dist/native/{p-dfb6b65e.entry.js → p-cb0293ec.entry.js} +2 -2
- package/dist/native/{p-b02c896a.entry.js → p-d94bf052.entry.js} +2 -2
- package/dist/types/components/nv-button/nv-button.d.ts +0 -1
- package/dist/types/components/nv-icon/nv-icons.d.ts +1 -1
- package/dist/types/components/nv-split/nv-split.d.ts +128 -0
- package/dist/types/components/nv-split/nv-split.docs.d.ts +4 -0
- package/dist/types/components.d.ts +107 -0
- package/dist/vscode-data.json +26 -1
- package/hydrate/index.js +365 -17
- package/hydrate/index.mjs +365 -17
- package/package.json +5 -1
- package/dist/components/p-2d64749f.js.map +0 -1
- package/dist/native/p-d45ee8e5.entry.js.map +0 -1
- /package/dist/native/{p-445221dc.entry.js.map → p-14e622e1.entry.js.map} +0 -0
- /package/dist/native/{p-44a78545.entry.js.map → p-52d2c0ae.entry.js.map} +0 -0
- /package/dist/native/{p-a2f58133.entry.js.map → p-638967bf.entry.js.map} +0 -0
- /package/dist/native/{p-075d231e.entry.js.map → p-91fab6c2.entry.js.map} +0 -0
- /package/dist/native/{p-dfb6b65e.entry.js.map → p-cb0293ec.entry.js.map} +0 -0
- /package/dist/native/{p-b02c896a.entry.js.map → p-d94bf052.entry.js.map} +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nova-design-system/nova-webcomponents",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.18.0-beta.0",
|
|
4
4
|
"description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/",
|
|
@@ -70,6 +70,10 @@
|
|
|
70
70
|
"extract-comments": "1.1.0"
|
|
71
71
|
},
|
|
72
72
|
"exports": {
|
|
73
|
+
"./nv-split": {
|
|
74
|
+
"import": "./dist/components/nv-split.js",
|
|
75
|
+
"types": "./dist/components/nv-split.d.ts"
|
|
76
|
+
},
|
|
73
77
|
"./nv-table": {
|
|
74
78
|
"import": "./dist/components/nv-table.js",
|
|
75
79
|
"types": "./dist/components/nv-table.d.ts"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"p-2d64749f.js","mappings":"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","names":[],"sources":["src/components/nv-button/styles/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\n// Make sure to update nv-button class in the tailwind-components.scss file when\n// you add new styles or change the structure here.\nnv-button {\n @include root-styles();\n\n @each $size in $sizes {\n &[size=\"#{$size}\"] {\n @include size-styles($size);\n }\n }\n\n @each $emphasis in $emphases {\n &[emphasis=\"#{$emphasis}\"] {\n @include emphasis-styles($emphasis);\n\n &[active]:not([active=\"false\"]) {\n @include active-styles($emphasis);\n }\n\n &[danger]:not([danger=\"false\"]) {\n @include danger-styles($emphasis);\n }\n }\n }\n\n &[fluid]:not([fluid=\"false\"]) {\n @include fluid-styles();\n }\n\n &[loading]:not([loading=\"false\"]) {\n [slot=\"leading-icon\"] {\n display: none;\n }\n }\n}\n","import {\n Component,\n Listen,\n Host,\n h,\n Prop,\n AttachInternals,\n Element,\n Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n tag: 'nv-button',\n shadow: false,\n formAssociated: true,\n styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n @AttachInternals() internals: ElementInternals;\n @Element() el: HTMLNvButtonElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Determines how large or small the button appears, allowing for\n * customization of the button's dimensions to fit different design\n * specifications and user needs.\n */\n @Prop({ reflect: true })\n readonly size: `${ButtonSize}` = 'md';\n\n /**\n * Adjusts the button's emphasis to make it more or less visually prominent\n * to users. Use this to draw attention to important actions or reduce focus\n * on less critical ones\n */\n @Prop({ reflect: true })\n readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n /**\n * Use this prop to highlight the button when it represents the current page\n * or active selection. This helps users understand their navigation context.\n */\n @Prop({ reflect: true })\n readonly active: boolean = false;\n\n /**\n * Applies styling that visually indicates the button represents a dangerous\n * action.\n */\n @Prop({ reflect: true })\n readonly danger: boolean = false;\n\n /**\n * Set this to true to show a spinner on the button, letting users know that\n * their action is being processed. It helps improve user experience by\n * indicating ongoing activities.\n */\n @Prop({ reflect: true, mutable: true })\n loading: boolean = false;\n\n /**\n * Disables the button, preventing user interaction.\n */\n @Prop({ reflect: true, mutable: true })\n disabled: boolean = false;\n\n /**\n * Allows the button to stretch and fill the entire width of its container.\n */\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n /**\n * Sets the button type to control its function in forms. Use 'submit' to send\n * form data, 'reset' to clear the form, or 'button' for a standard button\n * that doesn't interact with form submission by default.\n */\n @Prop({ reflect: true })\n readonly type: `${ButtonType}` = 'button';\n\n /**\n * Sets the form associated with the button in case the (submit) button is not a child of a form.\n * Matches the native HTML button 'form' attribute behavior.\n */\n @Prop({ reflect: true })\n readonly form: string;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles button click events, managing form actions and disabled states.\n * Prevents default behavior when button is disabled or loading, and\n * processes form submissions/resets when appropriate.\n * @param {Event} event - The click event.\n */\n private handleButtonClick = (event: Event): void => {\n if (this.loading || this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (\n this.type !== ButtonType.Button &&\n (this.form || this.internals?.form)\n ) {\n this.processFormAction();\n } else if (this.form && this.type === ButtonType.Button) {\n console.warn(\n 'Button has a form id but is not of type submit or reset so no form action will be processed.',\n `Button:`,\n this.el,\n );\n }\n };\n\n /**\n * Processes form-related actions by finding the associated form element\n * and triggering the appropriate action (submit/reset) based on button type.\n * Falls back to ElementInternals form if no explicit form ID is provided.\n */\n private processFormAction = (): void => {\n const formElement = this.form\n ? (document.getElementById(this.form) as HTMLFormElement)\n : this.internals?.form;\n\n if (!formElement) {\n console.warn(\n 'No form element found.',\n `Form ID: ${this.form || 'Not provided'}`,\n `Internals form:`,\n this.internals?.form,\n );\n return;\n }\n\n switch (this.type) {\n case ButtonType.Submit:\n formElement.requestSubmit();\n break;\n case ButtonType.Reset:\n formElement.reset();\n break;\n }\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region EVENTS\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.el.click();\n }\n }\n\n @Listen('touchstart', { passive: false })\n handleTouchStart(event: TouchEvent) {\n if (event.touches.length > 1) return;\n event.preventDefault();\n this.el.click();\n }\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('loading')\n handleLoadingChange(loading: boolean) {\n this.loading = loading;\n this.disabled = loading;\n }\n\n @Watch('disabled')\n handleDisabledChange(disabled: boolean) {\n if (this.loading) {\n this.disabled = this.loading;\n } else {\n this.disabled = disabled;\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.loading) {\n this.disabled = this.loading;\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"button\" tabindex=\"0\" onClick={this.handleButtonClick}>\n {this.loading && (\n <nv-loader\n size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n ></nv-loader>\n )}\n\n <slot name=\"leading-icon\"></slot>\n <slot></slot>\n <slot name=\"trailing-icon\"></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["nvButtonCss","NvButtonStyle0","NvButton","constructor","hostRef","this","size","emphasis","active","danger","loading","disabled","fluid","type","handleButtonClick","event","preventDefault","ButtonType","Button","form","_a","internals","processFormAction","console","warn","el","formElement","document","getElementById","_b","Submit","requestSubmit","Reset","reset","handleKeyDown","key","click","handleTouchStart","touches","length","handleLoadingChange","handleDisabledChange","componentWillLoad","render","h","Host","role","tabindex","onClick","ButtonSize","Large","name"],"sources":["src/components/nv-button/styles/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\n// Make sure to update nv-button class in the tailwind-components.scss file when\n// you add new styles or change the structure here.\nnv-button {\n @include root-styles();\n\n @each $size in $sizes {\n &[size=\"#{$size}\"] {\n @include size-styles($size);\n }\n }\n\n @each $emphasis in $emphases {\n &[emphasis=\"#{$emphasis}\"] {\n @include emphasis-styles($emphasis);\n\n &[active]:not([active=\"false\"]) {\n @include active-styles($emphasis);\n }\n\n &[danger]:not([danger=\"false\"]) {\n @include danger-styles($emphasis);\n }\n }\n }\n\n &[fluid]:not([fluid=\"false\"]) {\n @include fluid-styles();\n }\n\n &[loading]:not([loading=\"false\"]) {\n [slot=\"leading-icon\"] {\n display: none;\n }\n }\n}\n","import {\n Component,\n Listen,\n Host,\n h,\n Prop,\n AttachInternals,\n Element,\n Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n tag: 'nv-button',\n shadow: false,\n formAssociated: true,\n styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n @AttachInternals() internals: ElementInternals;\n @Element() el: HTMLNvButtonElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Determines how large or small the button appears, allowing for\n * customization of the button's dimensions to fit different design\n * specifications and user needs.\n */\n @Prop({ reflect: true })\n readonly size: `${ButtonSize}` = 'md';\n\n /**\n * Adjusts the button's emphasis to make it more or less visually prominent\n * to users. Use this to draw attention to important actions or reduce focus\n * on less critical ones\n */\n @Prop({ reflect: true })\n readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n /**\n * Use this prop to highlight the button when it represents the current page\n * or active selection. This helps users understand their navigation context.\n */\n @Prop({ reflect: true })\n readonly active: boolean = false;\n\n /**\n * Applies styling that visually indicates the button represents a dangerous\n * action.\n */\n @Prop({ reflect: true })\n readonly danger: boolean = false;\n\n /**\n * Set this to true to show a spinner on the button, letting users know that\n * their action is being processed. It helps improve user experience by\n * indicating ongoing activities.\n */\n @Prop({ reflect: true, mutable: true })\n loading: boolean = false;\n\n /**\n * Disables the button, preventing user interaction.\n */\n @Prop({ reflect: true, mutable: true })\n disabled: boolean = false;\n\n /**\n * Allows the button to stretch and fill the entire width of its container.\n */\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n /**\n * Sets the button type to control its function in forms. Use 'submit' to send\n * form data, 'reset' to clear the form, or 'button' for a standard button\n * that doesn't interact with form submission by default.\n */\n @Prop({ reflect: true })\n readonly type: `${ButtonType}` = 'button';\n\n /**\n * Sets the form associated with the button in case the (submit) button is not a child of a form.\n * Matches the native HTML button 'form' attribute behavior.\n */\n @Prop({ reflect: true })\n readonly form: string;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles button click events, managing form actions and disabled states.\n * Prevents default behavior when button is disabled or loading, and\n * processes form submissions/resets when appropriate.\n * @param {Event} event - The click event.\n */\n private handleButtonClick = (event: Event): void => {\n if (this.loading || this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (\n this.type !== ButtonType.Button &&\n (this.form || this.internals?.form)\n ) {\n this.processFormAction();\n } else if (this.form && this.type === ButtonType.Button) {\n console.warn(\n 'Button has a form id but is not of type submit or reset so no form action will be processed.',\n `Button:`,\n this.el,\n );\n }\n };\n\n /**\n * Processes form-related actions by finding the associated form element\n * and triggering the appropriate action (submit/reset) based on button type.\n * Falls back to ElementInternals form if no explicit form ID is provided.\n */\n private processFormAction = (): void => {\n const formElement = this.form\n ? (document.getElementById(this.form) as HTMLFormElement)\n : this.internals?.form;\n\n if (!formElement) {\n console.warn(\n 'No form element found.',\n `Form ID: ${this.form || 'Not provided'}`,\n `Internals form:`,\n this.internals?.form,\n );\n return;\n }\n\n switch (this.type) {\n case ButtonType.Submit:\n formElement.requestSubmit();\n break;\n case ButtonType.Reset:\n formElement.reset();\n break;\n }\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region EVENTS\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.el.click();\n }\n }\n\n @Listen('touchstart', { passive: false })\n handleTouchStart(event: TouchEvent) {\n if (event.touches.length > 1) return;\n event.preventDefault();\n this.el.click();\n }\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('loading')\n handleLoadingChange(loading: boolean) {\n this.loading = loading;\n this.disabled = loading;\n }\n\n @Watch('disabled')\n handleDisabledChange(disabled: boolean) {\n if (this.loading) {\n this.disabled = this.loading;\n } else {\n this.disabled = disabled;\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.loading) {\n this.disabled = this.loading;\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"button\" tabindex=\"0\" onClick={this.handleButtonClick}>\n {this.loading && (\n <nv-loader\n size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n ></nv-loader>\n )}\n\n <slot name=\"leading-icon\"></slot>\n <slot></slot>\n <slot name=\"trailing-icon\"></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"mappings":"oGAAA,MAAMA,EAAc,i4TACpB,MAAAC,EAAeD,E,MCuBFE,EAAQ,MANrB,WAAAC,CAAAC,G,0KAmBWC,KAAAC,KAAwB,KAQxBD,KAAAE,SAAgC,OAOhCF,KAAAG,OAAkB,MAOlBH,KAAAI,OAAkB,MAQ3BJ,KAAAK,QAAmB,MAMnBL,KAAAM,SAAoB,MAMXN,KAAAO,MAAiB,MAQjBP,KAAAQ,KAAwB,SAmBzBR,KAAAS,kBAAqBC,I,MAC3B,GAAIV,KAAKK,SAAWL,KAAKM,SAAU,CACjCI,EAAMC,iBACN,M,CAGF,GACEX,KAAKQ,OAASI,EAAWC,SACxBb,KAAKc,QAAQC,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAED,OAC9B,CACAd,KAAKiB,mB,MACA,GAAIjB,KAAKc,MAAQd,KAAKQ,OAASI,EAAWC,OAAQ,CACvDK,QAAQC,KACN,+FACA,UACAnB,KAAKoB,G,GAUHpB,KAAAiB,kBAAoB,K,QAC1B,MAAMI,EAAcrB,KAAKc,KACpBQ,SAASC,eAAevB,KAAKc,OAC9BC,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAED,KAEpB,IAAKO,EAAa,CAChBH,QAAQC,KACN,yBACA,YAAYnB,KAAKc,MAAQ,iBACzB,mBACAU,EAAAxB,KAAKgB,aAAS,MAAAQ,SAAA,SAAAA,EAAEV,MAElB,M,CAGF,OAAQd,KAAKQ,MACX,KAAKI,EAAWa,OACdJ,EAAYK,gBACZ,MACF,KAAKd,EAAWe,MACdN,EAAYO,QACZ,M,EASN,aAAAC,CAAcnB,GACZ,GAAIA,EAAMoB,MAAQ,SAAWpB,EAAMoB,MAAQ,IAAK,CAC9CpB,EAAMC,iBACNX,KAAKoB,GAAGW,O,EAKZ,gBAAAC,CAAiBtB,GACf,GAAIA,EAAMuB,QAAQC,OAAS,EAAG,OAC9BxB,EAAMC,iBACNX,KAAKoB,GAAGW,O,CAQV,mBAAAI,CAAoB9B,GAClBL,KAAKK,QAAUA,EACfL,KAAKM,SAAWD,C,CAIlB,oBAAA+B,CAAqB9B,GACnB,GAAIN,KAAKK,QAAS,CAChBL,KAAKM,SAAWN,KAAKK,O,KAChB,CACLL,KAAKM,SAAWA,C,EAQpB,iBAAA+B,GACE,GAAIrC,KAAKK,QAAS,CAChBL,KAAKM,SAAWN,KAAKK,O,EAQzB,MAAAiC,GACE,OACEC,EAACC,EAAI,CAAAV,IAAA,2CAACW,KAAK,SAASC,SAAS,IAAIC,QAAS3C,KAAKS,mBAC5CT,KAAKK,SACJkC,EAAA,aAAAT,IAAA,2CACE7B,KAAMD,KAAKC,OAAS2C,EAAWC,MAAQ,KAAO,OAIlDN,EAAA,QAAAT,IAAA,2CAAMgB,KAAK,iBACXP,EAAA,QAAAT,IAAA,6CACAS,EAAA,QAAAT,IAAA,2CAAMgB,KAAK,kB","ignoreList":[]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|