@aotearoan/neon 9.2.9 → 9.3.0

package/dist/src/components/feedback/dialog/NeonDialog.d.ts

@@ -0,0 +1,135 @@
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+/**
+ * A dialog component for confirming simple actions. This will be rendered above the content of the main window and
+ * present just two options to the user, one to proceed with the action and the other to cancel it.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The color of the button for the confirm (positive) action.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Alternate confirm button color for creating a gradient button. NOTE: can also be the same color as 'color'.
+     */
+    alternateColor: {
+        type: () => NeonFunctionalColor;
+        default: null;
+    };
+    /**
+     * The label of the button for the cancel (negative) action.
+     */
+    cancelLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The label of the button for the confirm (positive) action.
+     */
+    confirmLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The dialog title
+     */
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The dialog question. Can be html (rendered using v-html).
+     */
+    question: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Whether the dialog is open.
+     */
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Increase the opacity so that the page behind the modal is no longer visible
+     */
+    opaque: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    actions: import("vue").Ref<HTMLDivElement | null>;
+    cancel: () => void;
+    confirm: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "confirm")[], "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The color of the button for the confirm (positive) action.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Alternate confirm button color for creating a gradient button. NOTE: can also be the same color as 'color'.
+     */
+    alternateColor: {
+        type: () => NeonFunctionalColor;
+        default: null;
+    };
+    /**
+     * The label of the button for the cancel (negative) action.
+     */
+    cancelLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The label of the button for the confirm (positive) action.
+     */
+    confirmLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The dialog title
+     */
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The dialog question. Can be html (rendered using v-html).
+     */
+    question: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Whether the dialog is open.
+     */
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Increase the opacity so that the page behind the modal is no longer visible
+     */
+    opaque: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}, {
+    color: NeonFunctionalColor;
+    alternateColor: NeonFunctionalColor;
+    open: boolean;
+    opaque: boolean;
+    cancelLabel: string;
+    confirmLabel: string;
+}>;
+export default _default;

package/dist/src/components/feedback/dialog/NeonDialog.vue.d.ts

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

package/dist/src/components/feedback/linear-progress/NeonLinearProgress.d.ts

@@ -0,0 +1,183 @@
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+import { NeonSize } from '@/common/enums/NeonSize';
+/**
+ * A component for displaying linear progress. The progress can be displayed as a percentage (default) or
+ * as a counter (x / y).
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * If no total is provided (default) the current % completion is expressed as a %, e.g. 0.15 = 15%,
+     * In the case of a total being provided this is the count of items from the total, i.e. the 'x' in 'x / y '.
+     */
+    value: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /**
+     * When the total is provided the display is 'x / y' where total is the 'y' in 'x / y'.
+     */
+    total: {
+        type: NumberConstructor;
+        default: null;
+    };
+    /**
+     * A label to display above the progress bar
+     */
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The progress bar color
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The alternate color for displaying the progress as a gradient
+     */
+    alternateColor: {
+        type: () => NeonFunctionalColor;
+        default: null;
+    };
+    /**
+     * The component size, NeonSize.Small or NeonSize.Medium
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The locale used for display purposes. This defaults to the browser's locale if none is provided.
+     */
+    locale: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Display the text output indicating the current state of progress
+     */
+    output: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Display an icon on completion
+     */
+    completedIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Specify the icon color (default = alternate-color || color)
+     */
+    completedIconColor: {
+        type: () => NeonFunctionalColor;
+        default: null;
+    };
+    /**
+     * The decimals to use for rounding
+     */
+    decimals: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    calculatedValue: import("vue").Ref<number>;
+    computedTotal: import("vue").ComputedRef<number>;
+    completed: import("vue").ComputedRef<boolean>;
+    computedOutput: import("vue").ComputedRef<string>;
+    computedPercentage: import("vue").ComputedRef<number>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * If no total is provided (default) the current % completion is expressed as a %, e.g. 0.15 = 15%,
+     * In the case of a total being provided this is the count of items from the total, i.e. the 'x' in 'x / y '.
+     */
+    value: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /**
+     * When the total is provided the display is 'x / y' where total is the 'y' in 'x / y'.
+     */
+    total: {
+        type: NumberConstructor;
+        default: null;
+    };
+    /**
+     * A label to display above the progress bar
+     */
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The progress bar color
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The alternate color for displaying the progress as a gradient
+     */
+    alternateColor: {
+        type: () => NeonFunctionalColor;
+        default: null;
+    };
+    /**
+     * The component size, NeonSize.Small or NeonSize.Medium
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The locale used for display purposes. This defaults to the browser's locale if none is provided.
+     */
+    locale: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Display the text output indicating the current state of progress
+     */
+    output: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Display an icon on completion
+     */
+    completedIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Specify the icon color (default = alternate-color || color)
+     */
+    completedIconColor: {
+        type: () => NeonFunctionalColor;
+        default: null;
+    };
+    /**
+     * The decimals to use for rounding
+     */
+    decimals: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    label: string;
+    output: boolean;
+    color: NeonFunctionalColor;
+    size: NeonSize;
+    alternateColor: NeonFunctionalColor;
+    locale: string;
+    decimals: number;
+    total: number;
+    completedIcon: string;
+    completedIconColor: NeonFunctionalColor;
+}>;
+export default _default;

package/dist/src/components/feedback/linear-progress/NeonLinearProgress.vue.d.ts

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

package/dist/src/components/feedback/note/NeonNote.d.ts

@@ -0,0 +1,74 @@
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+/**
+ * NeonNote is a component for displaying important information to the user, such as - notes, hints or quotes.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The color of the note. In the case of the colors info, success, warn and error an icon will also be displayed to further enhance user comprehension.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Whether the note has a close button
+     */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Display the associated icon for info, success, warn and error colors.
+     */
+    icon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Note close button aria label.
+     */
+    ariaLabelCloseNote: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    iconName: import("vue").ComputedRef<"info-circle" | "check-circle" | "exclamation-circle" | "times-circle" | undefined>;
+    closeNote: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close-note"[], "close-note", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The color of the note. In the case of the colors info, success, warn and error an icon will also be displayed to further enhance user comprehension.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Whether the note has a close button
+     */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Display the associated icon for info, success, warn and error colors.
+     */
+    icon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Note close button aria label.
+     */
+    ariaLabelCloseNote: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    "onClose-note"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: NeonFunctionalColor;
+    icon: boolean;
+    closable: boolean;
+    ariaLabelCloseNote: string;
+}>;
+export default _default;

package/dist/src/components/feedback/note/NeonNote.vue.d.ts

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

package/dist/src/components/feedback/notification-counter/NeonNotificationCounter.d.ts

@@ -0,0 +1,54 @@
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+/**
+ * A component for displaying notification counts to the user.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * Whether the notification is active
+     */
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The notification color
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The count of notifications to display, if greater than 9 <em>9+</em> is displayed
+     */
+    count: {
+        type: NumberConstructor;
+        default: null;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Whether the notification is active
+     */
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The notification color
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The count of notifications to display, if greater than 9 <em>9+</em> is displayed
+     */
+    count: {
+        type: NumberConstructor;
+        default: null;
+    };
+}>>, {
+    color: NeonFunctionalColor;
+    active: boolean;
+    count: number;
+}>;
+export default _default;

package/dist/src/components/feedback/notification-counter/NeonNotificationCounter.vue.d.ts

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

package/dist/src/components/feedback/skeleton-loader/NeonSkeletonLoader.d.ts

@@ -0,0 +1,26 @@
+/**
+ * A component for indicating initial data is loading. Compose multiple skeleton loaders to generate a loader matching
+ * the shape of the content to be loaded.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The count of skeleton loaders to render. The size of the skeleton loaders depends on the parent container. The
+     * skeleton loaders will split the container evenly vertically.
+     */
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The count of skeleton loaders to render. The size of the skeleton loaders depends on the parent container. The
+     * skeleton loaders will split the container evenly vertically.
+     */
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    count: number;
+}>;
+export default _default;

package/dist/src/components/feedback/skeleton-loader/NeonSkeletonLoader.vue.d.ts

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

package/dist/src/components/feedback/splash-loader/NeonSplashLoader.d.ts

@@ -0,0 +1,74 @@
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+import { NeonSplashLoaderSize } from '@/common/enums/NeonSplashLoaderSize';
+/**
+ * Use <strong>NeonSplashLoader</strong> to indicate loading progress to the user. This can be used fullscreen for the
+ * initial site loading as well as when UPDATING data, e.g. refreshing table data. For initial data loading please see
+ * <a href="/feedback/skeleton-loader">NeonSkeletonLoader</a>.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * Color of the loading icon
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Loading icon size
+     */
+    size: {
+        type: () => NeonSplashLoaderSize;
+        default: NeonSplashLoaderSize;
+    };
+    /**
+     * Display the overlay over the page
+     */
+    overlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Display fullscreen (position: fixed)
+     */
+    fullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    ready: 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<{
+    /**
+     * Color of the loading icon
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Loading icon size
+     */
+    size: {
+        type: () => NeonSplashLoaderSize;
+        default: NeonSplashLoaderSize;
+    };
+    /**
+     * Display the overlay over the page
+     */
+    overlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Display fullscreen (position: fixed)
+     */
+    fullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    color: NeonFunctionalColor;
+    size: NeonSplashLoaderSize;
+    overlay: boolean;
+    fullscreen: boolean;
+}>;
+export default _default;

package/dist/src/components/feedback/splash-loader/NeonSplashLoader.vue.d.ts

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

package/dist/src/components/feedback/tooltip/NeonTooltip.d.ts

@@ -0,0 +1,118 @@
+import { NeonPlacement } from '@/common/enums/NeonPlacement';
+import { NeonTooltipStyle } from '@/common/enums/NeonTooltipStyle';
+import { NeonOutlineStyle } from '@/common/enums/NeonOutlineStyle';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+/**
+ * <p>
+ *   Use <strong>NeonTooltip</strong> to display tooltips or popovers. It is recommended that tooltip content should be
+ *   kept to a single line. Use the popover style for larger content.
+ * </p>
+ * <p>To use <strong>NeonTooltip</strong> provide the <em>target</em> and <em>content slots</em>.</p>
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * Id of the tooltip.
+     */
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Placement of the tooltip contents.
+     */
+    placement: {
+        type: () => NeonPlacement;
+        default: NeonPlacement;
+    };
+    /**
+     * Style of the tooltip, use <em>Tooltip</em> for a simple tooltip, use <em>Popover</em> for larger more complex
+     * content.
+     */
+    tooltipStyle: {
+        type: () => NeonTooltipStyle;
+        default: NeonTooltipStyle;
+    };
+    /**
+     * Style of the outline to use when the tooltip target has focus, use <em>text</em> for tooltips wrapping text and
+     * <em>border</em> for tooltips wrapping "block" elements, e.g. buttons.
+     */
+    outlineStyle: {
+        type: () => NeonOutlineStyle;
+        default: NeonOutlineStyle;
+    };
+    /**
+     * Color of the tooltip target when it is focussed.
+     */
+    outlineColor: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Restrict placement to within this container.
+     */
+    placementContainer: {
+        type: () => HTMLElement;
+        default: null;
+    };
+}, {
+    tooltip: import("vue").Ref<HTMLElement | null>;
+    tooltipPlacement: import("vue").Ref<NeonPlacement | null>;
+    content: import("vue").Ref<HTMLElement | null>;
+    open: import("vue").Ref<boolean>;
+    toggleTooltip: () => void;
+    closeTooltip: () => void;
+    openTooltip: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Id of the tooltip.
+     */
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Placement of the tooltip contents.
+     */
+    placement: {
+        type: () => NeonPlacement;
+        default: NeonPlacement;
+    };
+    /**
+     * Style of the tooltip, use <em>Tooltip</em> for a simple tooltip, use <em>Popover</em> for larger more complex
+     * content.
+     */
+    tooltipStyle: {
+        type: () => NeonTooltipStyle;
+        default: NeonTooltipStyle;
+    };
+    /**
+     * Style of the outline to use when the tooltip target has focus, use <em>text</em> for tooltips wrapping text and
+     * <em>border</em> for tooltips wrapping "block" elements, e.g. buttons.
+     */
+    outlineStyle: {
+        type: () => NeonOutlineStyle;
+        default: NeonOutlineStyle;
+    };
+    /**
+     * Color of the tooltip target when it is focussed.
+     */
+    outlineColor: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Restrict placement to within this container.
+     */
+    placementContainer: {
+        type: () => HTMLElement;
+        default: null;
+    };
+}>>, {
+    outlineStyle: NeonOutlineStyle;
+    id: string;
+    placement: NeonPlacement;
+    placementContainer: HTMLElement;
+    tooltipStyle: NeonTooltipStyle;
+    outlineColor: NeonFunctionalColor;
+}>;
+export default _default;

package/dist/src/components/feedback/tooltip/NeonTooltip.vue.d.ts

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