@ukho/admiralty-core 0.0.0

package/dist/types/components/checkbox/checkbox.d.ts

@@ -0,0 +1,52 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class CheckboxComponent {
+  private inputId;
+  /**
+   * Whether the checkbox should be positioned to the right of the label.
+   */
+  checkboxRight: boolean;
+  /**
+   * This dictates whether the form field is disabled.
+   */
+  disabled: boolean;
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: string;
+  /**
+   * If `true`, the checkbox is selected.
+   */
+  checked: boolean;
+  /**
+   * The value of the checkbox does not mean if it's checked or not, use the `checked`
+   * property for that.
+   *
+   * The value of a checkbox is analogous to the value of an `<input type="checkbox">`,
+   * it's only used when the checkbox participates in a native `<form>`.
+   */
+  value: any | null;
+  /**
+   * The text that's displayed alongside the checkbox
+   */
+  labelText: string;
+  /**
+   * Event is fired when the form control changes state
+   * @event radioChanges
+   */
+  checkboxChange: EventEmitter<any>;
+  /**
+   * Event is fired when the form control gains focus
+   * @event checkboxFocus
+   */
+  checkboxFocus: EventEmitter<any>;
+  /**
+   * Event is fired when the form control loses focus
+   * @event checkboxBlur
+   */
+  checkboxBlur: EventEmitter<any>;
+  checkedChanged(isChecked: boolean): void;
+  private onBlur;
+  private onClick;
+  private onFocus;
+  render(): any;
+}

package/dist/types/components/colour-block/colour-block.d.ts

@@ -0,0 +1,27 @@
+export declare class ColourBlockComponent {
+  /**
+   * The width in pixels of the component.
+   */
+  width: number;
+  /**
+   * The height in pixels of the component.
+   */
+  height: number;
+  /**
+   * The heading text to display.
+   */
+  heading: string;
+  /**
+   * The background colour of the component.
+   */
+  colour: 'admiralty-blue' | 'teal' | 'bright-blue';
+  /**
+   * The function to call when the action button is pressed.
+   */
+  clickAction: () => any;
+  /**
+   * The text to display on the action button
+   */
+  actionText: string;
+  render(): any;
+}

package/dist/types/components/dialogue/dialogue.d.ts

@@ -0,0 +1,13 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+export declare class DialogueComponent {
+  /**
+   * The type of dialogue box to render.
+   */
+  type: 'info' | 'warning' | 'success' | 'error';
+  /**
+   * The heading to display.
+   */
+  heading: string;
+  getIconNameForType(): IconDefinition;
+  render(): any;
+}

package/dist/types/components/expansion/expansion.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+export declare class ExpansionComponent {
+  /**
+   * The text to display in the heading of the expansion component.
+   */
+  heading: string;
+  /**
+   * Whether the component is expanded.
+   */
+  expanded: boolean;
+  /**
+   * CWhether the heading should be right aligned.
+   */
+  alignHeadingRight: boolean;
+  /**
+   * Whether the border on the bottom of the component should be hidden.
+   */
+  hideBorder: boolean;
+  /**
+   * The event that is dispatched when the expanded status is toggled.
+   */
+  toggled: EventEmitter<boolean>;
+  id: string;
+  headerId: string;
+  contentId: string;
+  onToggle(): void;
+  getExpansionIcon(): IconDefinition;
+  render(): any;
+}

package/dist/types/components/file-input/file-input.d.ts

@@ -0,0 +1,53 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class FileInputComponent {
+  el: HTMLElement;
+  /**
+   * Used to display instructions to the user and is replaced with the filename the user inputs
+   */
+  label: string;
+  /**
+   * If true, enables multiple files to be selected or dragged
+   */
+  multiple: boolean;
+  /**
+   * Emitted when the added file(s) changes
+   */
+  fileInputChange: EventEmitter<File[]>;
+  id: string;
+  /**
+   * INTERNAL - The list of files currently in the field
+   */
+  files: File[];
+  /**
+   * The event that is fired when the user clicks on the file input box and uses the default dialog
+   * @param event
+   */
+  changeHandler(event: Event): void;
+  private storeFileInfo;
+  /**
+   * Prevents default dragOver behaviour which, stops the file being downloaded to the browser
+   * in a new tab
+   * @param event
+   */
+  dragOverHandler(event: DragEvent): void;
+  /**
+   * When this event is fired the 'drop_zone' class is removed from the wrapper 'admiralty-file-input' div
+   * which, turns the background back to off white
+   * @param event
+   */
+  dragLeaveHander(event: DragEvent): void;
+  /**
+   * Handles the 'file' the user drops into the input field
+   * Does a check if it's a file and update the interface with the filename and the size of the file
+   * @param event
+   */
+  dropHandler(event: DragEvent): void;
+  get filesDisplay(): string;
+  /**
+   * Takes the bytes of a file and returns it as human readable figure
+   * @param bytes pass bytes throughs as a number
+   * @returns convers the bytes to the appropiate largest figure followed by the  format ie. 'kb', 'mb' etc
+   */
+  sizeOf: (bytes: number) => string;
+  render(): any;
+}

package/dist/types/components/filter/filter.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot - 'admiralty-filter-group' components can be placed inside of this element to render groups of filter controls. You can also place any elements you wish
+ */
+export declare class FilterComponent {
+  /**
+   * The title of the filter
+   */
+  filterTitle: string;
+  /**
+   * Event that is emitted when the filters are cleared
+   */
+  filterCleared: EventEmitter<void>;
+  /**
+   * Event that is emitted when the filters are applied
+   */
+  filterApplied: EventEmitter<void>;
+  private onFilterCleared;
+  private onFilterApplied;
+  render(): any;
+}

package/dist/types/components/filter-group/filter-group.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @slot - You can place any content inside this element that you wish to use inside your filter component.
+ */
+export declare class FilterGroupComponent {
+  /**
+   * The title of the filter group
+   */
+  groupTitle: string;
+  render(): any;
+}

package/dist/types/components/footer/footer.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @slot - Footer links should be placed in the slot e.g.
+ * `<admiralty-link href="http://www.example.com">Privacy Policy</admiralty-link>`
+ */
+export declare class FooterComponent {
+  /**
+   * The URL that the image links to.
+   */
+  imageLink: string;
+  /**
+   * The source of the image displayed in the footer.
+   */
+  imageSrc: string;
+  /**
+   * A description for the image displayed in the footer. This might be shown if the image
+   * fails to load or get read out by screen readers.
+   */
+  imageAlt: string;
+  /**
+   * The text to display in the footer. The default value displays crown copyright, the
+   * current year and `UK Hydrographic Office`.
+   */
+  text: string;
+  render(): any;
+}

package/dist/types/components/header/header.d.ts

@@ -0,0 +1,33 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot items - 'admiralty-header-menu-item menu-title' components are placed here for appropiate styling and behaviour
+ * @slot profile - 'admiralty-header-profile' components are placed here (the login/logout) options
+ */
+export declare class HeaderComponent {
+  /**
+   * The header title that is displayed to the right of the logo
+   */
+  headerTitle: string;
+  /**
+   * The url that clicking on the nav link will take you too
+   */
+  headerTitleUrl: string;
+  /**
+   * The destination url when the logo is clicked
+   */
+  logoLinkUrl: string;
+  /**
+   * The uri of the logo image
+   */
+  logoImgUrl: string;
+  /**
+   * The alternate image text for the logo image
+   */
+  logoAltText: string;
+  /**
+   * Emits an event that can be listened to when the title in the header is clicked
+   */
+  titledClicked: EventEmitter<string>;
+  private handleClick;
+  render(): any;
+}

package/dist/types/components/header/header.stories.data.d.ts

@@ -0,0 +1,6 @@
+import { HeaderItem } from './header.types';
+export declare const mockMenuItemsWithSubItems: HeaderItem[];
+export declare const mockMenuItemsWithSubItemsAndNavActive: HeaderItem[];
+export declare const mockMenuItemsWithSomeSubItems: HeaderItem[];
+export declare const mockMenuItemsWithNoSubItems: HeaderItem[];
+export declare const mockMenuItemsWithNoSubItemsAndNavActive: HeaderItem[];

package/dist/types/components/header/header.types.d.ts

@@ -0,0 +1,10 @@
+export interface HeaderItem {
+  title: string;
+  clickAction?: () => any;
+  navActive?: boolean;
+  subitems?: HeaderSubItem[];
+}
+export interface HeaderSubItem {
+  title: string;
+  clickAction: () => any;
+}

package/dist/types/components/header-menu-item/header-menu-item.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot - 'admiralty-sub-header-menu-item' a number of components can be placed here to add sub items
+ */
+export declare class HeaderMenuItemComponent {
+  el: HTMLElement;
+  /**
+   * The text that will be displayed in the menu
+   */
+  menuTitle: string;
+  /**
+   * The text that will be displayed in the menu
+   */
+  active?: boolean;
+  /**
+   * The event that is fired when a user clicks on the menu
+   */
+  menuItemClick: EventEmitter<void>;
+  subMenuExists: boolean;
+  subMenuSelector: HTMLElement;
+  connectedCallback(): void;
+  handleClick: (ev: MouseEvent) => CustomEvent<void>;
+  /**
+   * Handles mouseover events, used to set the aria hidden attribute when submenu
+   * is visible
+   */
+  handleMouseOver: () => void;
+  /**
+   * Handles mouseover events, used to set the aria hidden attribute when submenu
+   * is no longer visible
+   */
+  handleMouseOut: () => void;
+  render(): any;
+}

package/dist/types/components/header-profile/header-profile.d.ts

@@ -0,0 +1,38 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class HeaderProfileComponent {
+  displaySubmenu: boolean;
+  /**
+   * A boolean to indicate if the user is signed in or not
+   */
+  isSignedIn: boolean;
+  /**
+   * The text that is displayed after the user signs in
+   */
+  signedInText: string;
+  /**
+   * The event that is fired when the user clicks on
+   * the sign in button
+   */
+  signInClicked: EventEmitter<void>;
+  /**
+   * The event that is fired when the user clicks on the
+   * 'Your account' button
+   */
+  yourAccountClicked: EventEmitter<void>;
+  /**
+   * The event that is fired when the user clicks on the
+   * 'sign out' button
+   */
+  signOutClicked: EventEmitter<void>;
+  /**
+   * TThe event that is fired when the user clicks 'user profile'
+   *  on the profile sub menu
+   */
+  userProfileClicked: EventEmitter<void>;
+  handleSignIn: () => void;
+  handleSignOut: () => void;
+  handleYouAccount: () => void;
+  openDropdown: () => void;
+  closeDropdown: () => void;
+  render(): any;
+}

package/dist/types/components/header-sub-menu-item/header-sub-menu-item.d.ts

@@ -0,0 +1,13 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class HeaderMenuItemComponent {
+  /**
+   * The text that will be displayed in the menu
+   */
+  menuTitle: string;
+  /**
+   * The event that is fired when a user clicks on the menu
+   */
+  subMenuItemClick: EventEmitter<void>;
+  handleClick: (ev: MouseEvent) => CustomEvent<void>;
+  render(): any;
+}

package/dist/types/components/hint/hint.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @slot - The hint content should be placed in the slot e.g.
+ * `<admiralty-hint>Enter your full name</admiralty-hint>`
+ */
+export declare class HintComponent {
+  /**
+   * The disabled option can be used to disable the component.
+   */
+  disabled: boolean;
+  render(): any;
+}

package/dist/types/components/horizontal-rule/horizontal-rule.d.ts

@@ -0,0 +1,3 @@
+export declare class HorizontalRuleComponent {
+  render(): any;
+}

package/dist/types/components/icon/icon.d.ts

@@ -0,0 +1,17 @@
+import { IconName } from '@fortawesome/free-solid-svg-icons';
+import { IconPrefix } from '@fortawesome/fontawesome-svg-core';
+export declare class IconComponent {
+  /**
+   * Name of the icon to be rendered
+   *
+   * Check out <a href="https://fontawesome.com/search?m=free}">FontAwesome</a>  for a list of icons
+   */
+  iconName: IconName;
+  /**
+   * The style prefix to apply to the icon
+   *
+   * By default, icons use Font Awesome's solid style
+   */
+  iconPrefix: IconPrefix;
+  render(): any;
+}

package/dist/types/components/input/input.d.ts

@@ -0,0 +1,71 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { InputChangeEventDetail } from './input.interface';
+/**
+ * Once this component works, review whether a form field component should be created so
+ * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.
+ * Examples of similar components that can extend that base component are area, select
+ * and checkbox.
+ */
+export declare class InputComponent implements ComponentInterface {
+  inputId: string;
+  private nativeInput?;
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: string;
+  /**
+   * The label which will be used above the input to describe the input.
+   */
+  label: string;
+  /**
+   * The hint which will be used under the label to describe the input.
+   */
+  hint: string;
+  /**
+   * This dictates whether the form field is disabled.
+   */
+  disabled: boolean;
+  /**
+   * The input type, options are: `text | date | time | email | password | tel | url`
+   */
+  type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url';
+  /**
+   * The placeholder text to show in the input
+   */
+  placeholder: string;
+  /**
+   * The maximum width for the input field.
+   */
+  width: number;
+  /**
+   * This dictates whether the input is required or not
+   */
+  required: boolean;
+  /**
+   * Whether to show the input in an invalid state
+   */
+  invalid: boolean;
+  /**
+   * The message to show when the input is invalid
+   */
+  invalidMessage: string;
+  /**
+   * Indicates whether the value of the control can be automatically completed by the browser.
+   */
+  autocomplete: string;
+  /**
+   * The value of the input.
+   */
+  value?: string | number | null;
+  /**
+   * Emitted when the value has changed.
+   */
+  admiraltyChange: EventEmitter<InputChangeEventDetail>;
+  /**
+   * Update the native input element when the value changes
+   */
+  protected valueChanged(): void;
+  private onInput;
+  private getValue;
+  render(): any;
+}

package/dist/types/components/input/input.interface.d.ts

@@ -0,0 +1,3 @@
+export interface InputChangeEventDetail {
+  value: string | undefined | null;
+}

package/dist/types/components/input-error/input-error.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @slot - The error content should be placed in the slot e.g.
+ * `<admiralty-input-error>This field is required</admiralty-input-error>`
+ */
+export declare class InputError {
+  render(): any;
+}

package/dist/types/components/label/label.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @slot - The label content should be placed in the slot e.g.
+ * `<admiralty-label>First Name</admiralty-label>`
+ */
+export declare class LabelComponent {
+  /**
+   * The disabled option can be used to disable the component.
+   */
+  disabled: boolean;
+  /**
+   * The id of the input the label is attached to
+   */
+  for: string;
+  render(): any;
+}

package/dist/types/components/link/link.d.ts

@@ -0,0 +1,11 @@
+export declare class LinkComponent {
+  /**
+   * The URL that the link will navigate to.
+   */
+  href: string;
+  /**
+   * Whether to open the URL in a new tab.
+   */
+  newTab: boolean;
+  render(): any;
+}

package/dist/types/components/paginator/paginator.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PaginatorComponent {
+  /**
+   * The total number of pages. Defaults to 1.
+   */
+  pages: number;
+  /**
+   * The current page. Defaults to 1.
+   */
+  currentPage: number;
+  /**
+   * The label to display.
+   */
+  label: string;
+  /**
+   * Dispatched when the previous or next button is pressed. The event detail contains
+   * the requested page number.
+   */
+  pageChange: EventEmitter<number>;
+  readonly maxLength = 7;
+  pageChanged(page: number): void;
+  onKeydown(event: KeyboardEvent, navFn: Function): void;
+  prev(): void;
+  next(): void;
+  render(): any;
+}

package/dist/types/components/paginator/paginator.stories.data.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ * Wrapper for the Paginator to demonstrate how the label and current page properties
+ * can be updated.
+ */
+export declare class PaginatorWrapperComponent {
+  el: HTMLElement;
+  pageChangedHandler(event: CustomEvent<any>): void;
+  render(): any;
+}

package/dist/types/components/phase-banner/phase-banner.d.ts

@@ -0,0 +1,11 @@
+export declare class PhaseBannerComponent {
+  /**
+   * The phase for the phase banner
+   */
+  phase: 'alpha' | 'beta';
+  /**
+   * A link to where the end user can provide feedback
+   */
+  link: string;
+  render(): any;
+}

package/dist/types/components/progress-bar/progress-bar.d.ts

@@ -0,0 +1,19 @@
+export declare class ProgressBarComponent {
+  private id;
+  /**
+   * If set, adds a label above the progress bar
+   */
+  label?: string;
+  /**   * A value from 0 - 100 that visually represents the current progression
+   */
+  progression: number;
+  /**
+   * Set to true to indicate an error (turns the progress bar red)
+   */
+  error: boolean;
+  /**
+   * Progress value, min:0, max: 100
+   */
+  progressionValue: number;
+  render(): any;
+}

package/dist/types/components/radio/radio.d.ts

@@ -0,0 +1,44 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class RadioComponent {
+  private inputId;
+  private nativeInput;
+  private radioGroup;
+  el: HTMLElement;
+  /**
+   * The tabindex of the radio button.
+   * @internal
+   */
+  buttonTabindex: number;
+  /**
+   * The name of the radio button for use on selection within a radio group
+   */
+  name: string;
+  /**
+   * The value of the radio button for use on selection within a radio group
+   */
+  value: string | null;
+  /**
+   * Determines whether the radio button is disabled. A button in disabled state will not fire click output events.
+   */
+  disabled?: boolean;
+  /**
+   * Determines whether the radio button is selected (or checked)
+   */
+  checked?: boolean;
+  /**
+   * Emitted when the radio button gains focus.
+   */
+  admiraltyFocus: EventEmitter<void>;
+  /**
+   * Emitted when the radio button loses focus.
+   */
+  admiraltyBlur: EventEmitter<void>;
+  connectedCallback(): void;
+  /** @internal */
+  setButtonTabindex(value: number): Promise<void>;
+  private updateState;
+  private onClick;
+  private onFocus;
+  private onBlur;
+  render(): any;
+}

package/dist/types/components/radio-group/radio-group.d.ts

@@ -0,0 +1,27 @@
+import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
+export declare class RadioGroupComponent implements ComponentInterface {
+  private inputId;
+  el: HTMLElement;
+  /**
+   * The name of the control, which is submitted with the form data
+   */
+  name: string;
+  /**
+   * The value of the radio group
+   */
+  value: any | null;
+  /**
+   * Setting this true displays the radio options vertically (defaults to false)
+   */
+  displayVertical: boolean;
+  valueChanged(value: any): void;
+  /**
+   * Event fired when the checked radio button changes
+   */
+  radioChange: EventEmitter<any>;
+  componentDidLoad(): void;
+  private setRadioTabindex;
+  private getRadios;
+  private onClick;
+  render(): any;
+}