@aotearoan/neon 9.2.8 → 9.3.0

package/dist/src/components/presentation/dropdown/NeonDropdown.d.ts

@@ -0,0 +1,260 @@
+import { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';
+import { NeonSize } from '@/common/enums/NeonSize';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+import { NeonDropdownStyle } from '@/common/enums/NeonDropdownStyle';
+/**
+ * <p>A general purpose dropdown component. This component consists of a button, to trigger the dropdown to open, and
+ * the dropdown content which is displayed above the page when the user clicks the button.</p>
+ * <p>This can be useful for secondary (perhaps more complex) actions for which there is not enough space on the page or
+ * the action is asynchronous allowing the user to perform the action and continue what they were doing. Examples are
+ * providing links to copy and letting the user send feedback.</p>
+ * <p><strong>NeonDropdown</strong> is the basis for the <strong>NeonDropdownMenu</strong> component and the
+ * <strong>NeonSelect</strong> form component.</p>
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * Id for the dropdown button.
+     */
+    id: {
+        type: StringConstructor;
+    };
+    /**
+     * Whether the dropdown is currently open.
+     */
+    modelValue: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    /**
+     * The label for the dropdown button.
+     */
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * URL of image to display if the button style is a square or circular badge.
+     */
+    image: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Badge image ALT text.
+     */
+    imageAlt: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * An icon to display on the dropdown button. This will be to the left of any label, but can also be used on its own.
+     */
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Show the dropdown button's indicator (chevron).
+     */
+    indicator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Disable the dropdown button
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The size of the dropdown button - Small, Medium or Large.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The color of the dropdown button
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The alternate color of the dropdown button (for gradient buttons).
+     */
+    alternateColor: {
+        type: () => NeonFunctionalColor;
+        default: null;
+    };
+    /**
+     * The style of the dropdown button
+     */
+    dropdownStyle: {
+        type: () => NeonDropdownStyle;
+        default: NeonDropdownStyle;
+    };
+    /**
+     * Placement of the dropdown contents.
+     */
+    placement: {
+        type: () => NeonDropdownPlacement;
+        default: NeonDropdownPlacement;
+    };
+    /**
+     * Restrict placement to within this container.
+     */
+    placementContainer: {
+        type: () => HTMLElement;
+        default: null;
+    };
+    /**
+     * Instead of opening on click (default), open on hover.
+     */
+    openOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    dropdownButton: import("vue").Ref<HTMLElement | null>;
+    dropdownContent: import("vue").Ref<HTMLDivElement | null>;
+    dropdownPlacement: import("vue").Ref<NeonDropdownPlacement>;
+    closableUtils: import("vue").Ref<{
+        open: () => void;
+        destroy: () => void;
+        escapeKeyListener: (event: KeyboardEvent) => void;
+        close: () => void;
+    } | null>;
+    onClose: () => void;
+    close: () => void;
+    toggleOpen: () => void;
+    onBlur: () => void;
+    onFocus: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "dropdown-placement" | "button-ref")[], "update:modelValue" | "focus" | "blur" | "dropdown-placement" | "button-ref", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Id for the dropdown button.
+     */
+    id: {
+        type: StringConstructor;
+    };
+    /**
+     * Whether the dropdown is currently open.
+     */
+    modelValue: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    /**
+     * The label for the dropdown button.
+     */
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * URL of image to display if the button style is a square or circular badge.
+     */
+    image: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Badge image ALT text.
+     */
+    imageAlt: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * An icon to display on the dropdown button. This will be to the left of any label, but can also be used on its own.
+     */
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Show the dropdown button's indicator (chevron).
+     */
+    indicator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Disable the dropdown button
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The size of the dropdown button - Small, Medium or Large.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The color of the dropdown button
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The alternate color of the dropdown button (for gradient buttons).
+     */
+    alternateColor: {
+        type: () => NeonFunctionalColor;
+        default: null;
+    };
+    /**
+     * The style of the dropdown button
+     */
+    dropdownStyle: {
+        type: () => NeonDropdownStyle;
+        default: NeonDropdownStyle;
+    };
+    /**
+     * Placement of the dropdown contents.
+     */
+    placement: {
+        type: () => NeonDropdownPlacement;
+        default: NeonDropdownPlacement;
+    };
+    /**
+     * Restrict placement to within this container.
+     */
+    placementContainer: {
+        type: () => HTMLElement;
+        default: null;
+    };
+    /**
+     * Instead of opening on click (default), open on hover.
+     */
+    openOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    "onDropdown-placement"?: ((...args: any[]) => any) | undefined;
+    "onButton-ref"?: ((...args: any[]) => any) | undefined;
+}, {
+    label: string;
+    image: string;
+    color: NeonFunctionalColor;
+    icon: string;
+    disabled: boolean;
+    placement: NeonDropdownPlacement;
+    size: NeonSize;
+    alternateColor: NeonFunctionalColor;
+    imageAlt: string;
+    indicator: boolean;
+    dropdownStyle: NeonDropdownStyle;
+    placementContainer: HTMLElement;
+    openOnHover: boolean;
+}>;
+export default _default;

package/dist/src/components/presentation/dropdown/NeonDropdown.vue.d.ts

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

package/dist/src/components/presentation/expansion-indicator/NeonExpansionIndicator.d.ts

@@ -0,0 +1,70 @@
+import type { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+/**
+ * Custom animated chevron component which is used in dropdowns and expansion panels. This may be useful in creating
+ * higher level components but is unlikely to be used on its own.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * Whether the chevron is <em>open</em>.
+     */
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Display the expansion indicator in the inverse text color
+     */
+    inverse: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Display the expansion indicator in the disabled color
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The color of the chevron.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        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 chevron is <em>open</em>.
+     */
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Display the expansion indicator in the inverse text color
+     */
+    inverse: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Display the expansion indicator in the disabled color
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The color of the chevron.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: null;
+    };
+}>>, {
+    color: NeonFunctionalColor;
+    inverse: boolean;
+    disabled: boolean;
+    expanded: boolean;
+}>;
+export default _default;

package/dist/src/components/presentation/expansion-indicator/NeonExpansionIndicator.vue.d.ts

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

package/dist/src/components/presentation/expansion-panel/NeonExpansionPanel.d.ts

@@ -0,0 +1,153 @@
+import { NeonVerticalPosition } from '@/common/enums/NeonVerticalPosition';
+import { NeonSize } from '@/common/enums/NeonSize';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+/**
+ * <p>Expansion panels are used to show and hide content that may be less important or too large to display on screen
+ * all the time. They can also be used to expand lists of items, e.g. <em>Show more</em>. The expansion panel consists
+ * of a button which, when clicked, toggles the open/closed state of the expansion panel and a slot for the content to
+ * display on expansion.</p>
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * A boolean indicating whether the expansion panel is expanded.
+     */
+    modelValue: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    /**
+     * The label of the expansion button
+     */
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Provide an id to support aria-controls. The id will be placed on the expansion panel content wrapper and the
+     * aria-controls on the header (triggering the expansion).
+     */
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * An icon to display to the left of the label
+     */
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The position of the expansion button. This can be located above the content to expand or below it.
+     */
+    position: {
+        type: () => NeonVerticalPosition;
+        default: NeonVerticalPosition;
+    };
+    /**
+     * The size of the expansion panel button.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The color of the expansion panel button.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Whether the label and expansion indicator should be flush with the width of the container.
+     */
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The disabled state of the expansion panel
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    toggleExpanded: () => 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<{
+    /**
+     * A boolean indicating whether the expansion panel is expanded.
+     */
+    modelValue: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    /**
+     * The label of the expansion button
+     */
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Provide an id to support aria-controls. The id will be placed on the expansion panel content wrapper and the
+     * aria-controls on the header (triggering the expansion).
+     */
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * An icon to display to the left of the label
+     */
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The position of the expansion button. This can be located above the content to expand or below it.
+     */
+    position: {
+        type: () => NeonVerticalPosition;
+        default: NeonVerticalPosition;
+    };
+    /**
+     * The size of the expansion panel button.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The color of the expansion panel button.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Whether the label and expansion indicator should be flush with the width of the container.
+     */
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The disabled state of the expansion panel
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: NeonFunctionalColor;
+    icon: string;
+    disabled: boolean;
+    id: string;
+    size: NeonSize;
+    fullWidth: boolean;
+    position: NeonVerticalPosition;
+}>;
+export default _default;

package/dist/src/components/presentation/expansion-panel/NeonExpansionPanel.vue.d.ts

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

package/dist/src/components/presentation/icon/NeonIcon.d.ts

@@ -0,0 +1,86 @@
+import type { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+/**
+ * <p>A component for rendering SVG images. These images are generally, but not limited to, <em>icons</em>. This
+ * component can render any SVG of any size. Size is not restricted in the NeonIcon component but rather in the
+ * components using the icons. Generally, when talking about icons, this component is only used to build other
+ * components. But you may also find it useful for rendering SVG images, e.g. illustrations.</p>
+ *
+ * <p>There is an icon registry where strings containing SVGs can be registered with a name and that name can be used
+ * with the NeonIcon component to render the image. Use the classes <em>neon-svg-fill</em> and <em>neon-svg--stroke</em>
+ * in the SVG elements to automatically apply the functional colors.</p>
+ *
+ * <p>This provides the advantage of only registering the icons you actually need, dynamically switching colors in
+ * Typescript/CSS without using a large icon font and not having to duplicate icon images to support multiple
+ * color variations (including light and dark modes).</p>
+ *
+ * For more detailed information please see <a href="/presentation/icon">Icons</a>.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The name of an icon registered in the icon registry.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The color to render the icon. By default, it will be the current text color (light text in dark mode or dark text in light mode).
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: null;
+    };
+    /**
+     * Set the icon color to the inverse text color
+     */
+    inverse: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Apply a disabled style to the icon
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    attrs: {
+        [x: string]: unknown;
+    };
+    icon: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The name of an icon registered in the icon registry.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The color to render the icon. By default, it will be the current text color (light text in dark mode or dark text in light mode).
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: null;
+    };
+    /**
+     * Set the icon color to the inverse text color
+     */
+    inverse: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Apply a disabled style to the icon
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    color: NeonFunctionalColor;
+    inverse: boolean;
+    disabled: boolean;
+}>;
+export default _default;

package/dist/src/components/presentation/icon/NeonIcon.vue.d.ts

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

package/dist/src/components/presentation/label/NeonLabel.d.ts

@@ -0,0 +1,100 @@
+import { NeonLabelSize } from '@/common/enums/NeonLabelSize';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+import { NeonHorizontalPosition } from '@/common/enums/NeonHorizontalPosition';
+/**
+ * Labels are used to tag or emphasize properties of an item in the UI. Labels can be text only, icon only or contain both text and icons.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The label text
+     */
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The name of the optional label icon
+     */
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The icon position if there is also text in the label. This is either left or right.
+     */
+    iconPosition: {
+        type: () => NeonHorizontalPosition;
+        default: NeonHorizontalPosition;
+    };
+    /**
+     * The label size
+     */
+    size: {
+        type: () => NeonLabelSize;
+        default: NeonLabelSize;
+    };
+    /**
+     * The label color
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Alternate color for creating gradient labels. NOTE: can also be the same color as 'color'.
+     */
+    alternateColor: {
+        type: () => NeonFunctionalColor;
+        default: null;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The label text
+     */
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The name of the optional label icon
+     */
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The icon position if there is also text in the label. This is either left or right.
+     */
+    iconPosition: {
+        type: () => NeonHorizontalPosition;
+        default: NeonHorizontalPosition;
+    };
+    /**
+     * The label size
+     */
+    size: {
+        type: () => NeonLabelSize;
+        default: NeonLabelSize;
+    };
+    /**
+     * The label color
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Alternate color for creating gradient labels. NOTE: can also be the same color as 'color'.
+     */
+    alternateColor: {
+        type: () => NeonFunctionalColor;
+        default: null;
+    };
+}>>, {
+    color: NeonFunctionalColor;
+    icon: string;
+    size: NeonLabelSize;
+    alternateColor: NeonFunctionalColor;
+    iconPosition: NeonHorizontalPosition;
+}>;
+export default _default;

package/dist/src/components/presentation/label/NeonLabel.vue.d.ts

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