@ukic/web-components 2.8.0 → 2.10.0

package/dist/types/components/ic-side-navigation/ic-side-navigation.d.ts

@@ -1,4 +1,6 @@
+import { EventEmitter } from "../../stencil-public-runtime";
 import { IcThemeForeground } from "../../utils/types";
+import { IcExpandedDetail } from "./ic-side-navigation.types";
 /**
  * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.
  * @slot app-title - Handle routing by nesting a route in the app title.
@@ -6,101 +8,105 @@ import { IcThemeForeground } from "../../utils/types";
  * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.
  */
 export declare class SideNavigation {
-  private ANIMATION_DURATION;
-  private IC_NAVIGATION_ITEM;
-  private resizeObserver;
-  private COLLAPSED_ICON_LABELS_END;
-  private COLLAPSED_ICON_LABELS_START;
-  private menuButton;
-  el: HTMLIcSideNavigationElement;
-  deviceSize: number;
-  deviceSizeAppTitle: number;
-  foregroundColor: IcThemeForeground;
-  hasSecondaryNavigation: boolean;
-  menuExpanded: boolean;
-  menuOpen: boolean;
-  /**
-   * The app title to be displayed. This is required, unless a slotted app title link is used.
-   */
-  appTitle: string;
-  /**
-   * If `true`, the icon and label will appear when side navigation is collapsed.
-   */
-  collapsedIconLabels: boolean;
-  /**
-   * If `true`, automatic parent wrapper styling will be disabled.
-   */
-  disableAutoParentStyling: boolean;
-  /**
-   * If `true`, the side navigation will not display as a top bar on small devices.
-   */
-  disableTopBarBehaviour: boolean;
-  /**
-   * If `true`, the side navigation will load in an expanded state.
-   */
-  expanded: boolean;
-  /**
-   * The URL that the app title link points to.
-   */
-  href: string;
-  /**
-   * @internal If `true`, side navigation will be contained by its parent element.
-   */
-  inline: boolean;
-  /**
-   * The short title of the app to be displayed at small screen sizes in place of the app title.
-   */
-  shortAppTitle: string;
-  /**
-   * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).
-   */
-  static: boolean;
-  /**
-   * The status of the app to be displayed.
-   */
-  status: string;
-  /**
-   * The version of the app to be displayed.
-   */
-  version: string;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
-  themeChangeHandler(ev: CustomEvent): void;
-  private emitSideNavigationExpanded;
-  private toggleMenu;
-  private setToggleMenuFlyoutMenuVisibility;
-  private setMobileMenuAriaAttributes;
-  private setAndRemoveNoWrapAfterMenuExpanded;
-  private toggleMenuExpanded;
-  /**
-   * In order to style nested slotted elements (e.g. using React Router components), this method
-   * rearranges the a tag and labels and adds inline styling expand/collaped animations as external CSS classes are not
-   * do not take affect.
-   * @param menuExpanded boolean - true or false depending on side navigation state
-   */
-  private arrangeSlottedNavigationItem;
-  private styleSlottedCollapsedIconLabels;
-  private setExpandedButtonHeight;
-  private styleSlottedIconLabels;
-  private transitionHandler;
-  private transitionEndHandler;
-  private animateCollapsedIconLabels;
-  private paddingIconWidth;
-  private displayTooltipWithExpandedLongLabel;
-  private setMenuExpanded;
-  /**
-   * As the mobile top bar is fixed, a padding top is required
-   * to push main content down the height of the mobile top bar
-   * @param value - padding-top css value
-   */
-  private setParentPaddingTop;
-  private setParentPaddingLeft;
-  private renderAppTitle;
-  private resizeObserverCallback;
-  private runResizeObserver;
-  private setCollapsedIconLabels;
-  private styleSlottedCollapsedIconLabel;
-  private renderTopBar;
-  render(): any;
+    private ANIMATION_DURATION;
+    private IC_NAVIGATION_ITEM;
+    private resizeObserver;
+    private COLLAPSED_ICON_LABELS_END;
+    private COLLAPSED_ICON_LABELS_START;
+    private menuButton;
+    el: HTMLIcSideNavigationElement;
+    deviceSize: number;
+    deviceSizeAppTitle: number;
+    foregroundColor: IcThemeForeground;
+    hasSecondaryNavigation: boolean;
+    menuExpanded: boolean;
+    menuOpen: boolean;
+    /**
+     * The app title to be displayed. This is required, unless a slotted app title link is used.
+     */
+    appTitle: string;
+    /**
+     * If `true`, the icon and label will appear when side navigation is collapsed.
+     */
+    collapsedIconLabels: boolean;
+    /**
+     * If `true`, automatic parent wrapper styling will be disabled.
+     */
+    disableAutoParentStyling: boolean;
+    /**
+     * If `true`, the side navigation will not display as a top bar on small devices.
+     */
+    disableTopBarBehaviour: boolean;
+    /**
+     * If `true`, the side navigation will load in an expanded state.
+     */
+    expanded: boolean;
+    /**
+     * The URL that the app title link points to.
+     */
+    href: string;
+    /**
+     * @internal If `true`, side navigation will be contained by its parent element.
+     */
+    inline: boolean;
+    /**
+     * The short title of the app to be displayed at small screen sizes in place of the app title.
+     */
+    shortAppTitle: string;
+    /**
+     * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).
+     */
+    static: boolean;
+    /**
+     * The status of the app to be displayed.
+     */
+    status: string;
+    /**
+     * The version of the app to be displayed.
+     */
+    version: string;
+    /**
+     * Emitted when the side navigation is collapsed and expanded.
+     */
+    sideNavExpanded: EventEmitter<IcExpandedDetail>;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    themeChangeHandler(ev: CustomEvent): void;
+    private emitSideNavigationExpanded;
+    private toggleMenu;
+    private setToggleMenuFlyoutMenuVisibility;
+    private setMobileMenuAriaAttributes;
+    private setAndRemoveNoWrapAfterMenuExpanded;
+    private toggleMenuExpanded;
+    /**
+     * In order to style nested slotted elements (e.g. using React Router components), this method
+     * rearranges the a tag and labels and adds inline styling expand/collaped animations as external CSS classes are not
+     * do not take affect.
+     * @param menuExpanded boolean - true or false depending on side navigation state
+     */
+    private arrangeSlottedNavigationItem;
+    private styleSlottedCollapsedIconLabels;
+    private setExpandedButtonHeight;
+    private styleSlottedIconLabels;
+    private transitionHandler;
+    private transitionEndHandler;
+    private animateCollapsedIconLabels;
+    private paddingIconWidth;
+    private displayTooltipWithExpandedLongLabel;
+    private setMenuExpanded;
+    /**
+     * As the mobile top bar is fixed, a padding top is required
+     * to push main content down the height of the mobile top bar
+     * @param value - padding-top css value
+     */
+    private setParentPaddingTop;
+    private setParentPaddingLeft;
+    private renderAppTitle;
+    private resizeObserverCallback;
+    private runResizeObserver;
+    private setCollapsedIconLabels;
+    private styleSlottedCollapsedIconLabel;
+    private renderTopBar;
+    render(): any;
 }

package/dist/types/components/ic-side-navigation/ic-side-navigation.types.d.ts

@@ -1,9 +1,13 @@
 import { IcThemeForeground } from "../../utils/types";
 export interface IcTopBar {
-  isSDevice: boolean;
-  foregroundColor: IcThemeForeground;
-  menuOpen: boolean;
-  href: string;
-  isAppNameSubtitleVariant: boolean;
-  appTitle: string;
+    isSDevice: boolean;
+    foregroundColor: IcThemeForeground;
+    menuOpen: boolean;
+    href: string;
+    isAppNameSubtitleVariant: boolean;
+    appTitle: string;
+}
+export interface IcExpandedDetail {
+    sideNavExpanded: boolean;
+    sideNavMobile: boolean;
 }

package/dist/types/components/ic-skeleton/ic-skeleton.d.ts

@@ -1,22 +1,22 @@
 import { IcSkeletonVariants } from "./ic-skeleton.types";
 export declare class Skeleton {
-  el: HTMLIcSkeletonElement;
-  default: boolean;
-  hasChild: boolean;
-  heightOnly: boolean;
-  widthOnly: boolean;
-  /**
-   * The appearance of the skeleton.
-   */
-  appearance?: "light" | "default";
-  /**
-   * @deprecated This prop should not be used anymore. Set prop `appearance` to "light" instead.
-   */
-  light?: boolean;
-  /**
-   * The variant of the skeleton that will be displayed.
-   */
-  variant?: IcSkeletonVariants;
-  componentWillLoad(): void;
-  render(): any;
+    el: HTMLIcSkeletonElement;
+    default: boolean;
+    hasChild: boolean;
+    heightOnly: boolean;
+    widthOnly: boolean;
+    /**
+     * The appearance of the skeleton.
+     */
+    appearance?: "light" | "default";
+    /**
+     * @deprecated This prop should not be used anymore. Set prop `appearance` to "light" instead.
+     */
+    light?: boolean;
+    /**
+     * The variant of the skeleton that will be displayed.
+     */
+    variant?: IcSkeletonVariants;
+    componentWillLoad(): void;
+    render(): any;
 }

package/dist/types/components/ic-status-tag/ic-status-tag.d.ts

@@ -1,35 +1,35 @@
 import { IcStatusTagStatuses, IcStatusTagAppearance } from "./ic-status-tag.types";
 import { IcEmphasisType, IcSizesNoLarge } from "../../utils/types";
 export declare class StatusTag {
-  /**
-   * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.
-   */
-  announced?: boolean;
-  /**
-   * @deprecated This prop should not be used anymore. Use variant prop instead.
-   */
-  appearance?: IcStatusTagAppearance;
-  /**
-   * The content rendered within the status tag.
-   */
-  label: string;
-  /**
-   * The size of the status tag component.
-   */
-  size?: IcSizesNoLarge;
-  /**
-   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-   */
-  small?: boolean;
-  /**
-   * The colour of the status tag.
-   */
-  status?: IcStatusTagStatuses;
-  /**
-   * The emphasis of the status tag.
-   */
-  variant?: IcEmphasisType;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  render(): any;
+    /**
+     * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.
+     */
+    announced?: boolean;
+    /**
+     * @deprecated This prop should not be used anymore. Use variant prop instead.
+     */
+    appearance?: IcStatusTagAppearance;
+    /**
+     * The content rendered within the status tag.
+     */
+    label: string;
+    /**
+     * The size of the status tag component.
+     */
+    size?: IcSizesNoLarge;
+    /**
+     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+     */
+    small?: boolean;
+    /**
+     * The colour of the status tag.
+     */
+    status?: IcStatusTagStatuses;
+    /**
+     * The emphasis of the status tag.
+     */
+    variant?: IcEmphasisType;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    render(): any;
 }

package/dist/types/components/ic-step/ic-step.d.ts

@@ -1,54 +1,54 @@
 import { IcStepVariants, IcStepStatuses, IcStepTypes } from "./ic-step.types";
 export declare class Step {
-  el: HTMLIcStepElement;
-  /**
-   * @internal If a compact stepper is being used, this sets the styling of the step.
-   */
-  compactStepStyling?: IcStepTypes;
-  /**
-   * @internal If `true`, and a compact stepper  is being used, the current step will be the only step in view.
-   */
-  current?: boolean;
-  /**
-   * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.
-   */
-  lastStep: boolean;
-  /**
-   * @internal The step number of the final step. This is managed by ic-stepper.
-   */
-  lastStepNum?: number;
-  /**
-   * @internal The name of the next step. This is managed by ic-stepper.
-   */
-  nextStepTitle?: string;
-  /**
-   * @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.
-   */
-  progress?: number;
-  /**
-   * @internal The step number, managed by ic-stepper.
-   */
-  stepNum?: number;
-  /**
-   * The status of the step. Use this prop to display a status message on the step if it is required or optional.
-   */
-  stepStatus?: IcStepStatuses;
-  /**
-   * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.
-   */
-  stepSubtitle?: string;
-  /**
-   * The title of the step within the stepper.
-   */
-  stepTitle?: string;
-  /**
-   * @internal The variant of the step. This is managed by ic-stepper.
-   */
-  variant: IcStepVariants;
-  /**
-   * The state of the step within the stepper.
-   */
-  stepType?: IcStepTypes;
-  stepTypeChangeHandler(): void;
-  render(): any;
+    el: HTMLIcStepElement;
+    /**
+     * @internal If a compact stepper is being used, this sets the styling of the step.
+     */
+    compactStepStyling?: IcStepTypes;
+    /**
+     * @internal If `true`, and a compact stepper  is being used, the current step will be the only step in view.
+     */
+    current?: boolean;
+    /**
+     * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.
+     */
+    lastStep: boolean;
+    /**
+     * @internal The step number of the final step. This is managed by ic-stepper.
+     */
+    lastStepNum?: number;
+    /**
+     * @internal The name of the next step. This is managed by ic-stepper.
+     */
+    nextStepTitle?: string;
+    /**
+     * @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.
+     */
+    progress?: number;
+    /**
+     * @internal The step number, managed by ic-stepper.
+     */
+    stepNum?: number;
+    /**
+     * The status of the step. Use this prop to display a status message on the step if it is required or optional.
+     */
+    stepStatus?: IcStepStatuses;
+    /**
+     * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.
+     */
+    stepSubtitle?: string;
+    /**
+     * The title of the step within the stepper.
+     */
+    stepTitle?: string;
+    /**
+     * @internal The variant of the step. This is managed by ic-stepper.
+     */
+    variant: IcStepVariants;
+    /**
+     * The state of the step within the stepper.
+     */
+    stepType?: IcStepTypes;
+    stepTypeChangeHandler(): void;
+    render(): any;
 }

package/dist/types/components/ic-stepper/ic-stepper.d.ts

@@ -1,44 +1,44 @@
 import { IcStepperAlignment } from "./ic-stepper.types";
 import { IcStepTypes, IcStepVariants } from "../ic-step/ic-step.types";
 export declare class Stepper {
-  private resizeObserver;
-  private steps;
-  private stepsWithStepTitles;
-  el: HTMLIcStepperElement;
-  alignedFullWidth: boolean;
-  autoSetStepTitles: boolean;
-  lastStepWidth: number;
-  noOfResizes?: number;
-  stepperWidth: number;
-  stepTypes: IcStepTypes[];
-  variantOverride?: boolean;
-  /**
-   * The alignment of the default stepper within its container.
-   */
-  aligned?: IcStepperAlignment;
-  /**
-   * The length of the connnector between each step in pixels. Minimum length is 100px.
-   */
-  connectorWidth?: number;
-  /**
-   * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.
-   */
-  hideStepInfo?: boolean;
-  /**
-   * The variant of the stepper.
-   */
-  variant?: IcStepVariants;
-  disconnectedCallback(): void;
-  componentWillLoad(): void;
-  componentWillRender(): void;
-  componentDidLoad(): void;
-  private getChildren;
-  private checkStepTitles;
-  private setStepTypes;
-  private setStepperWidth;
-  private initialiseStepStates;
-  private overrideVariant;
-  private resizeObserverCallback;
-  private runResizeObserver;
-  render(): any;
+    private resizeObserver;
+    private steps;
+    private stepsWithStepTitles;
+    el: HTMLIcStepperElement;
+    alignedFullWidth: boolean;
+    autoSetStepTitles: boolean;
+    lastStepWidth: number;
+    noOfResizes?: number;
+    stepperWidth: number;
+    stepTypes: IcStepTypes[];
+    variantOverride?: boolean;
+    /**
+     * The alignment of the default stepper within its container.
+     */
+    aligned?: IcStepperAlignment;
+    /**
+     * The length of the connnector between each step in pixels. Minimum length is 100px.
+     */
+    connectorWidth?: number;
+    /**
+     * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.
+     */
+    hideStepInfo?: boolean;
+    /**
+     * The variant of the stepper.
+     */
+    variant?: IcStepVariants;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentWillRender(): void;
+    componentDidLoad(): void;
+    private getChildren;
+    private checkStepTitles;
+    private setStepTypes;
+    private setStepperWidth;
+    private initialiseStepStates;
+    private overrideVariant;
+    private resizeObserverCallback;
+    private runResizeObserver;
+    render(): any;
 }