@aotearoan/neon 9.2.8 → 9.3.0

package/dist/src/components/presentation/tabs/NeonTabs.d.ts

@@ -0,0 +1,88 @@
+import type { NeonTabModel } from '@/common/models/NeonTabModel';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+import { NeonSize } from '@/common/enums/NeonSize';
+/**
+ * A component for displaying tabbed content.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The list of tabs to display.
+     * */
+    tabs: {
+        type: () => Array<NeonTabModel>;
+        required: true;
+    };
+    /**
+     * The key of the selected tab.
+     */
+    modelValue: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The tab highlight color (excludes low-contrast).
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The tab size.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * Display a border underlining all tabs. When tabs are in an element with a border-bottom it is preferable to omit the tabs border-bottom
+     */
+    underline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    onClick: (key: string, changeFocus?: boolean) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The list of tabs to display.
+     * */
+    tabs: {
+        type: () => Array<NeonTabModel>;
+        required: true;
+    };
+    /**
+     * The key of the selected tab.
+     */
+    modelValue: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The tab highlight color (excludes low-contrast).
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The tab size.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * Display a border underlining all tabs. When tabs are in an element with a border-bottom it is preferable to omit the tabs border-bottom
+     */
+    underline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: NeonFunctionalColor;
+    size: NeonSize;
+    underline: boolean;
+}>;
+export default _default;

package/dist/src/components/presentation/tabs/NeonTabs.vue.d.ts

@@ -0,0 +1,2 @@
+export * from './NeonTabs.js';
+export { default } from './NeonTabs.js';

package/dist/src/components/presentation/tabs/tab/NeonTab.d.ts

@@ -0,0 +1,54 @@
+/**
+ * The NeonTab component that defines individual tabs for use with the NeonTabs component.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * True if the current tab is the visible tab.
+     */
+    selected: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    /**
+     * Id of the tab (matches the key in NeonTabModel).
+     */
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * By default, use CSS display property to show/hide tab contents. This flag will enable using v-if instead.
+     * */
+    toggleOnIf: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    responsiveView: import("vue").Ref<boolean>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * True if the current tab is the visible tab.
+     */
+    selected: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    /**
+     * Id of the tab (matches the key in NeonTabModel).
+     */
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * By default, use CSS display property to show/hide tab contents. This flag will enable using v-if instead.
+     * */
+    toggleOnIf: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    id: string;
+    toggleOnIf: boolean;
+}>;
+export default _default;

package/dist/src/components/presentation/tabs/tab/NeonTab.vue.d.ts

@@ -0,0 +1,2 @@
+export * from './NeonTab.js';
+export { default } from './NeonTab.js';

package/dist/src/components/user-input/button/NeonButton.d.ts

@@ -0,0 +1,293 @@
+import { NeonButtonSize } from '@/common/enums/NeonButtonSize';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+import { NeonButtonStyle } from '@/common/enums/NeonButtonStyle';
+import { NeonHorizontalPosition } from '@/common/enums/NeonHorizontalPosition';
+import { NeonState } from '@/common/enums/NeonState';
+/**
+ * A button component. Renders an HTML button or, if an href is provided, renders using NeonLink in the style of a button. NeonButton supports all events and attributes of HTML buttons, e.g, @click.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * Optional href for rendering a button as a link
+     */
+    href: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The text to display on a button
+     */
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The button size
+     */
+    size: {
+        type: () => NeonButtonSize;
+        default: NeonButtonSize;
+    };
+    /**
+     * The button color
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Display the button as high-contrast with inverted colors. This is useful for placing a button on a colored background.
+     * NOTE: Supports Solid & Outline button styles only (gradient & text buttons are not supported)
+     */
+    inverse: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Solid buttons ONLY. Alternate color for creating a gradient buttons. NOTE: can also be the same color as 'color'.
+     */
+    alternateColor: {
+        type: () => NeonFunctionalColor;
+        default: null;
+    };
+    /**
+     * Optional icon to display
+     */
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Position of the icon if combined with text
+     */
+    iconPosition: {
+        type: () => NeonHorizontalPosition;
+        default: NeonHorizontalPosition;
+    };
+    /**
+     * The style of button
+     */
+    buttonStyle: {
+        type: () => NeonButtonStyle;
+        default: NeonButtonStyle;
+    };
+    /**
+     * Provide button states of <em>ready, loading, success or error</em> which change the display of the button (with icons) to reflect the state.
+     */
+    state: {
+        type: () => NeonState;
+        default: NeonState;
+    };
+    /**
+     * Whether the button is disabled
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * For text buttons, do not display the background. This is useful for icon buttons in headers.
+     */
+    transparent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether to display a button outline when the button has focus
+     */
+    outline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Make the button circular. NOTE: This is only for icon only buttons.
+     */
+    circular: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    /**
+     * Make a button extend to the full width of the parent container.
+     */
+    fullWidth: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    /**
+     * INTERNAL USE ONLY: display a NeonExpansionIndicator on the button (used for dropdown buttons)
+     * @ignore
+     */
+    indicator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * INTERNAL USE ONLY: display the NeonExpansionIndicator on the button as <em>open</em> or <em>closed</em>.
+     * @ignore
+     */
+    indicatorExpanded: {
+        type: BooleanConstructor;
+        default: null;
+    };
+}, {
+    iconName: import("vue").ComputedRef<string>;
+    classes: import("vue").ComputedRef<(string | false | {
+        [x: string]: boolean | "" | NeonFunctionalColor;
+        'neon-button--text-transparent': boolean;
+        'neon-button--disabled': boolean;
+        'neon-button--inverse': boolean;
+        'neon-button--circular': boolean;
+        'neon-button--no-outline': boolean;
+        'neon-button--full-width': boolean;
+        'neon-button--with-icon neon-button--icon-only': boolean | "";
+        'neon-button--with-icon neon-button--icon-left': boolean | "";
+        'neon-button--with-icon neon-button--icon-right': boolean | "";
+    })[]>;
+    button: import("vue").Ref<HTMLElement | null>;
+    attrs: {
+        [x: string]: unknown;
+    };
+    click: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Optional href for rendering a button as a link
+     */
+    href: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The text to display on a button
+     */
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The button size
+     */
+    size: {
+        type: () => NeonButtonSize;
+        default: NeonButtonSize;
+    };
+    /**
+     * The button color
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Display the button as high-contrast with inverted colors. This is useful for placing a button on a colored background.
+     * NOTE: Supports Solid & Outline button styles only (gradient & text buttons are not supported)
+     */
+    inverse: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Solid buttons ONLY. Alternate color for creating a gradient buttons. NOTE: can also be the same color as 'color'.
+     */
+    alternateColor: {
+        type: () => NeonFunctionalColor;
+        default: null;
+    };
+    /**
+     * Optional icon to display
+     */
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Position of the icon if combined with text
+     */
+    iconPosition: {
+        type: () => NeonHorizontalPosition;
+        default: NeonHorizontalPosition;
+    };
+    /**
+     * The style of button
+     */
+    buttonStyle: {
+        type: () => NeonButtonStyle;
+        default: NeonButtonStyle;
+    };
+    /**
+     * Provide button states of <em>ready, loading, success or error</em> which change the display of the button (with icons) to reflect the state.
+     */
+    state: {
+        type: () => NeonState;
+        default: NeonState;
+    };
+    /**
+     * Whether the button is disabled
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * For text buttons, do not display the background. This is useful for icon buttons in headers.
+     */
+    transparent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether to display a button outline when the button has focus
+     */
+    outline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Make the button circular. NOTE: This is only for icon only buttons.
+     */
+    circular: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    /**
+     * Make a button extend to the full width of the parent container.
+     */
+    fullWidth: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    /**
+     * INTERNAL USE ONLY: display a NeonExpansionIndicator on the button (used for dropdown buttons)
+     * @ignore
+     */
+    indicator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * INTERNAL USE ONLY: display the NeonExpansionIndicator on the button as <em>open</em> or <em>closed</em>.
+     * @ignore
+     */
+    indicatorExpanded: {
+        type: BooleanConstructor;
+        default: null;
+    };
+}>>, {
+    label: string;
+    color: NeonFunctionalColor;
+    icon: string;
+    inverse: boolean;
+    disabled: boolean;
+    href: string;
+    circular: boolean;
+    size: NeonButtonSize;
+    alternateColor: NeonFunctionalColor;
+    iconPosition: NeonHorizontalPosition;
+    buttonStyle: NeonButtonStyle;
+    state: NeonState;
+    transparent: boolean;
+    outline: boolean;
+    fullWidth: boolean;
+    indicator: boolean;
+    indicatorExpanded: boolean;
+}>;
+export default _default;

package/dist/src/components/user-input/button/NeonButton.vue.d.ts

@@ -0,0 +1,2 @@
+export * from './NeonButton.js';
+export { default } from './NeonButton.js';

package/dist/src/components/user-input/chip/NeonChip.d.ts

@@ -0,0 +1,123 @@
+import { NeonSize } from '@/common/enums/NeonSize';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+import { NeonChipAction } from '@/common/enums/NeonChipAction';
+/**
+ * <p>
+ * <strong>NeonChip</strong> is a clickable or removable chip which can be used as a tag or to indicate selected values
+ * in filters and other more complex inputs (e.g. search / multiselect). Clicking the chip results in a callback and in
+ * the case it is removable, also removal of the chip. Chips are designed to fit inside inputs for creating more complex
+ * input components.
+ * </p>
+ * <p>
+ *   Chips are navigable via tab (tabindex). When focussed, use space, return or enter to click on clickable tabs and, in
+ *   the case of removable tabs, use backspace and delete to remove a tab. Escape will blur a focussed tab.
+ * </p>
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The chip label
+     */
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The size of the chip.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The chip color.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The action when clicking on a chip. Can be click or remove.
+     */
+    action: {
+        type: () => NeonChipAction;
+        default: NeonChipAction;
+    };
+    /**
+     * The chip disabled state.
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * This is the name of an icon which can optionally be added to the chip.
+     */
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+}, {
+    chip: import("vue").Ref<null>;
+    open: import("vue").Ref<boolean>;
+    active: import("vue").Ref<boolean>;
+    role: import("vue").ComputedRef<"link" | "button" | undefined>;
+    attrs: {
+        [x: string]: unknown;
+    };
+    keyUp: () => void;
+    keyDown: () => void;
+    clicked: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "close")[], "click" | "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The chip label
+     */
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The size of the chip.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The chip color.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The action when clicking on a chip. Can be click or remove.
+     */
+    action: {
+        type: () => NeonChipAction;
+        default: NeonChipAction;
+    };
+    /**
+     * The chip disabled state.
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * This is the name of an icon which can optionally be added to the chip.
+     */
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {
+    color: NeonFunctionalColor;
+    icon: string;
+    disabled: boolean;
+    size: NeonSize;
+    action: NeonChipAction;
+}>;
+export default _default;

package/dist/src/components/user-input/chip/NeonChip.vue.d.ts

@@ -0,0 +1,2 @@
+export * from './NeonChip.js';
+export { default } from './NeonChip.js';

package/dist/src/components/user-input/color/NeonColor.d.ts

@@ -0,0 +1,112 @@
+import { NeonSize } from '@/common/enums/NeonSize';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * Id of the input, will be attached to the native color input control.
+     */
+    id: {
+        type: StringConstructor;
+    };
+    /**
+     * The Hexadecimal color code.
+     */
+    modelValue: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Disable color picker
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Only display the color picker
+     */
+    pickerOnly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The size of the color picker, one of NeonSize.Small | NeonSize.Medium | NeonSize.Large.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * Color of the input
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * This is the placeholder for the text input when no value is provided.
+     */
+    placeholder: {
+        type: StringConstructor;
+        required: false;
+    };
+}, {
+    attrs: {
+        [x: string]: unknown;
+    };
+    localValue: import("vue").WritableComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Id of the input, will be attached to the native color input control.
+     */
+    id: {
+        type: StringConstructor;
+    };
+    /**
+     * The Hexadecimal color code.
+     */
+    modelValue: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Disable color picker
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Only display the color picker
+     */
+    pickerOnly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The size of the color picker, one of NeonSize.Small | NeonSize.Medium | NeonSize.Large.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * Color of the input
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * This is the placeholder for the text input when no value is provided.
+     */
+    placeholder: {
+        type: StringConstructor;
+        required: false;
+    };
+}>>, {
+    color: NeonFunctionalColor;
+    disabled: boolean;
+    size: NeonSize;
+    pickerOnly: boolean;
+}>;
+export default _default;

package/dist/src/components/user-input/color/NeonColor.vue.d.ts

@@ -0,0 +1,2 @@
+export * from './NeonColor.js';
+export { default } from './NeonColor.js';