@ukic/canary-web-components 3.0.0-canary.16 → 3.0.0-canary.17

package/dist/types/utils/helpers.d.ts

@@ -4,7 +4,7 @@
  * from @ukic/web-components in the same file. Why?
  */
 import { EventEmitter } from "../stencil-public-runtime";
-import { IcBrandForeground, IcCallbackFunctionNoReturn, IcColorRGBA, IcInformationStatusOrEmpty, IcMenuOption, IcNavParentDetails, IcPropObject, IcSearchMatchPositions } from "@ukic/web-components";
+import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA, IcDeviceSizes, IcColor, IcBrandForegroundNoDefault, IcBrandForeground, IcMenuOption } from "@ukic/web-components";
 import { IcDataTableDataType } from "../interface";
 /**
  * converts an enum of strings into an array of strings
@@ -35,8 +35,27 @@ export declare const dynamicDebounce: (func: (...args: unknown[]) => void, getDe
  * @param value The value of the input
  * @param disabled If true, the input is disabled
  */
-export declare const renderHiddenInput: (always: boolean, container: HTMLElement, name: string, value: string | Date | undefined | null, disabled: boolean) => void;
+export declare const renderHiddenInput: (always: boolean, container: HTMLElement, name: string, value: string | Date | undefined | null, disabled: boolean | undefined) => void;
+/**
+ * This method is used to add a hidden file input to a host element that contains
+ * a Shadow DOM. It does not add the input inside of the Shadow root which
+ * allows it to be picked up inside of forms. It should contain the same
+ * values as the host element.
+ *
+ * @param event: The event that is emitted once a file is selected.
+ * @param container The element where the input will be added
+ * @param multiple If true, multiple files can be selected
+ * @param name The name of the input
+ * @param value The value of the input
+ * @param disabled If true, the input is disabled
+ * @param accept A string of the accepted files
+ */
+export declare const renderFileHiddenInput: (event: EventEmitter, container: HTMLElement, multiple: boolean, name: string, value: FileList | undefined | null, disabled: boolean, accept: string | undefined | null) => void;
 export declare const removeHiddenInput: (container: HTMLElement) => void;
+export declare const hasShadowDom: (el: HTMLElement | null | undefined) => boolean;
+export declare const getInputHelperTextID: (id: string) => string;
+export declare const getInputValidationTextID: (id: string) => string;
+export declare const getInputDescribedByText: (inputId: string, helperText: boolean, validationText: boolean) => string;
 /**
  * This method helps to understand the context in which a component exists,
  * to assist with choosing appropriate foreground colours to use. For example,
@@ -50,6 +69,11 @@ export declare const removeHiddenInput: (container: HTMLElement) => void;
  * @returns IcBrandForeground depending on the context
  */
 export declare const getBrandFromContext: (el: Element, brandFromEvent?: IcBrandForeground | null) => IcBrandForeground;
+/**
+ * Checks if the current device is a mobile or tablet device.
+ * @returns {boolean} Returns true if the device is a mobile or tablet device, otherwise returns false.
+ */
+export declare const isMobileOrTablet: () => boolean;
 /**
  * Will create a button within the lightDOM which interacts with the parent form.
  * This is required as buttons within the shadowDOM will not invoke a submit or reset
@@ -60,6 +84,29 @@ export declare const getBrandFromContext: (el: Element, brandFromEvent?: IcBrand
 export declare const handleHiddenFormButtonClick: (form: HTMLFormElement, button: HTMLIcButtonElement | HTMLButtonElement) => void;
 export declare const isEmptyString: (value: string | null) => boolean;
 export declare const isPropDefined: (prop: string) => string | null;
+/**
+ * Extracts the label using the value from an object. Requires the object to have a label and value property.
+ * @param value - value from object
+ * @param options - list of menu items
+ * @returns - label corresponding to value
+ */
+export declare const getLabelFromValue: (value: string, options: IcMenuOption[], valueField?: string, labelField?: string) => string | undefined;
+/**
+ * Filters the options based on the search string.
+ * @param options - array of options
+ * @param includeDescriptions - determines whether option descriptions are included when filtering options
+ * @param searchString - string used to filter the options
+ * @param position - whether the search string matches the start of or anywhere in the options
+ * @returns filtered array of options
+ */
+export declare const getFilteredMenuOptions: (options: IcMenuOption[], includeDescriptions: boolean, searchString: string, position?: IcSearchMatchPositions, labelField?: string) => IcMenuOption[];
+/**
+ * Gets count of options where only group title "parent" options have been removed.
+ * Disabled options are included in the count.
+ * @param options - array of options
+ * @returns number of options not including group titles
+ */
+export declare const getOptionsWithoutGroupTitlesCount: (options: IcMenuOption[]) => number;
 export declare const deviceSizeMatches: (size: number) => boolean;
 export declare const getCurrentDeviceSize: () => number;
 export declare const getCssProperty: (cssVar: string) => string;
@@ -74,68 +121,47 @@ export declare const getBrandColorBrightness: () => number;
 /**
  * Returns if dark or light foreground colors should be used for color contrast reasons
  * @returns "dark" or "light"
+ * @param brightness - Optional custom brightness value. Defaults to `getBrandColorBrightness`
  */
-export declare const getBrandForegroundAppearance: () => IcBrandForeground;
-export declare const getSlot: (element: HTMLElement, name: string) => Element | null;
+export declare const getBrandForegroundAppearance: (brightness?: number) => IcBrandForegroundNoDefault;
+export declare const getSlot: (element: HTMLElement | undefined, name: string) => Element | null;
 export declare const slotHasContent: (element: HTMLElement, name: string) => boolean;
 export declare const getSlotContent: (element: HTMLElement, name: string) => Element[] | NodeListOf<ChildNode> | null;
 export declare const getSlotElements: (slot: Element) => NodeListOf<ChildNode> | Element[] | null;
 export declare const getNavItemParentDetails: ({ parentElement, }: HTMLElement) => IcNavParentDetails;
 export declare const DEVICE_SIZES: {
-    XS: number;
-    S: number;
-    M: number;
-    L: number;
-    XL: number;
+    XS: IcDeviceSizes;
+    S: IcDeviceSizes;
+    M: IcDeviceSizes;
+    L: IcDeviceSizes;
+    XL: IcDeviceSizes;
     UNDEFINED: number;
 };
-export declare const isSlotUsed: (element: HTMLElement, slotName: string) => boolean;
+export declare const hasValidationStatus: (status?: IcInformationStatusOrEmpty, disabled?: boolean) => boolean;
+export declare const isSlotUsed: ({ children }: HTMLElement, slotName: string) => boolean;
 export declare const onComponentPropUndefinedChange: (oldValue: string | undefined, newValue: string | undefined, callback: IcCallbackFunctionNoReturn) => void;
-export declare const hasShadowDom: (el: HTMLElement) => boolean;
-export declare const getInputHelperTextID: (id: string) => string;
-export declare const getInputValidationTextID: (id: string) => string;
-export declare const getInputDescribedByText: (inputId: string, helperText: boolean, validationText: boolean) => string;
-export declare const isMobileOrTablet: () => boolean;
-/**
- * Extracts the label using the value from an object. Requires the object to have a label and value property.
- * @param value - value from object
- * @param options - list of menu items
- * @returns - label corresponding to value
- */
-export declare const getLabelFromValue: (value: string, options: IcMenuOption[], valueField?: string, labelField?: string) => string | undefined;
-/**
- * Filters the options based on the search string.
- * @param options - array of options
- * @param includeDescriptions - determines whether option descriptions are included when filtering options
- * @param searchString - string used to filter the options
- * @param position - whether the search string matches the start of or anywhere in the options
- * @returns filtered array of options
- */
-export declare const getFilteredMenuOptions: (options: IcMenuOption[], includeDescriptions: boolean, searchString: string, position: IcSearchMatchPositions, labelField?: string) => IcMenuOption[];
-/**
- * Gets count of options where only group title "parent" options have been removed.
- * Disabled options are included in the count.
- * @param options - array of options
- * @returns number of options not including group titles
- */
-export declare const getOptionsWithoutGroupTitlesCount: (options: IcMenuOption[]) => number;
-export declare const hexToRgba: (hex: string) => IcColorRGBA;
-export declare const rgbaStrToObj: (rgbaStr: string) => IcColorRGBA;
-export declare const elementOverflowsX: (element: HTMLElement) => boolean;
-export declare const hasClassificationBanner: () => boolean;
-export declare const pxToRem: (px: string, base?: number) => string;
-export declare const isNumeric: (value: string) => boolean;
-export declare const hasValidationStatus: (status: IcInformationStatusOrEmpty, disabled: boolean) => boolean;
 export declare const onComponentRequiredPropUndefined: (props: IcPropObject[], component: string) => void;
 export declare const kebabToCamelCase: (kebabCase: string) => string;
 export declare const checkResizeObserver: (callbackFn: IcCallbackFunctionNoReturn) => void;
+export declare const hexToRgba: (hex: string) => IcColorRGBA;
+export declare const rgbaStrToObj: (rgbaStr: string) => IcColorRGBA;
+export declare const elementOverflowsX: ({ scrollWidth, clientWidth, }: HTMLElement) => boolean;
+export declare const hasClassificationBanner: () => boolean;
 export declare const addFormResetListener: (el: HTMLElement, callbackFn: IcCallbackFunctionNoReturn) => void;
 export declare const removeFormResetListener: (el: HTMLElement, callbackFn: IcCallbackFunctionNoReturn) => void;
-export declare const removeDisabledFalse: (disabled: boolean, element: HTMLElement) => void;
+export declare const pxToRem: (px: string, base?: number) => string;
+/**
+ * Removes the disabled attribute from the provided element when its value is set to false.
+ * This effectively makes it null, to not confuse screen readers that cannot interpret the false value
+ */
+export declare const removeDisabledFalse: (disabled: boolean | undefined, element: HTMLElement) => void;
 export declare const isMacDevice: () => boolean;
+export declare const isNumeric: (value: string) => boolean;
 export declare function waitForHydration(): Promise<boolean>;
+export declare const convertToRGBA: (color: IcColor) => IcColorRGBA | null;
 export declare const capitalize: (text: string) => string;
 export declare const checkSlotInChildMutations: (addedNodes: NodeList, removedNodes: NodeList, slotName: string | string[]) => boolean;
+export declare const isElInAGGrid: (el: HTMLElement) => boolean;
 export declare const addDataToPosition: (dataObject: IcDataTableDataType, newKeys: {
     key: string;
     index: number;

package/dist/types/utils/types.d.ts

@@ -17,13 +17,13 @@ export declare enum IcBrandForegroundEnum {
     Dark = "dark",
     Light = "light"
 }
+export type IcThemeMode = "dark" | "light" | "inherit";
 export type IcBrandForeground = "default" | "dark" | "light";
 export type IcBrandForegroundNoDefault = "dark" | "light";
 export type IcBrand = {
     mode: IcBrandForeground;
     color: IcColorRGB;
 };
-export type IcThemeMode = "dark" | "light" | "inherit";
 export type IcAdditionalFieldTypes = "static" | "dynamic";
 export type IcColorRGB = {
     r: number;
@@ -37,7 +37,7 @@ export type IcActivationTypes = "automatic" | "manual";
 export type IcAutocorrectStates = "on" | "off";
 export type IcNavParentDetails = {
     navType: IcNavType | "";
-    parent: HTMLElement;
+    parent: HTMLElement | null;
 };
 export type IcTypographyVariants = "h1" | "h2" | "h3" | "h4" | "subtitle-large" | "subtitle-small" | "body" | "label" | "label-uppercase" | "caption" | "caption-uppercase" | "code-large" | "code-small" | "code-extra-small" | "badge" | "badge-small";
 /**
@@ -60,6 +60,35 @@ export interface IcMenuOption {
     icon?: any;
 }
 export type IcSearchMatchPositions = "start" | "anywhere";
+export type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;
+export type IcRequiredPropsTypes = string | boolean | number | HTMLElement | IcMenuOption[] | undefined;
+export type IcPropObject = {
+    prop: IcRequiredPropsTypes;
+    propName: string;
+};
+export type IcRelatedTarget = EventTarget | undefined;
+export type IcOrientation = "horizontal" | "vertical";
+export type IcEmphasisType = "filled" | "outlined";
+export interface IcValueEventDetail {
+    value: string;
+    keyPressed?: string;
+}
+export interface IcMultiValueEventDetail {
+    value: string | string[] | null;
+    keyPressed?: string;
+}
+export interface IcBlurEventDetail {
+    relatedTarget: IcRelatedTarget | null;
+}
+export type IcSelectTypes = "single" | "multi";
+export type IcSelectMethodTypes = "auto" | "manual";
+export type IcDeviceSizes = 0 | 576 | 768 | 992 | 1200;
+type RGB = `rgb(${string})`;
+type RGBA = `rgba(${string})`;
+type HEX = `#${string}`;
+export type IcColor = RGB | RGBA | HEX;
+export type IcIconPlacementOptions = "left" | "right" | "top";
+export type IcButtonTooltipPlacement = "top" | "right" | "bottom" | "left";
 export interface IcPaginationBarOptions {
     alignment?: IcPaginationAlignmentOptions;
     hideAllFromItemsPerPage?: boolean;
@@ -79,7 +108,6 @@ export interface IcPaginationBarOptions {
     theme?: IcThemeMode;
     type?: IcPaginationTypes;
 }
-export type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;
 export type IcDateFormat = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD";
 export declare enum IcDateInputMonths {
     "January" = 0,
@@ -122,7 +150,4 @@ export declare enum IcWeekDays {
     Friday = 5,
     Saturday = 6
 }
-export interface IcValueEventDetail {
-    value: string | string[];
-    keyPressed?: string;
-}
+export {};