@gov-design-system-ce/components 0.0.25 → 0.0.27

package/dist/types/components/gov-button/gov-button.d.ts

@@ -0,0 +1,168 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { ButtonSizesType, NativeTypesType, TypesType, ButtonVariantType, ButtonTargetType } from "./constants";
+import { ButtonEvent } from "./gov-button.types";
+export declare class GovButton {
+  private h;
+  private buttonRef?;
+  constructor();
+  host: HTMLGovButtonElement;
+  /**
+   * Style variation of the button
+   */
+  readonly variant?: ButtonVariantType;
+  /**
+   * Button’s size
+   */
+  readonly size?: ButtonSizesType;
+  /**
+   * Button's type
+   */
+  readonly type?: TypesType;
+  /**
+   * Expands the button to fill 100% of the container width
+   */
+  readonly expanded: boolean;
+  /**
+   * Determine if component should have inversed colors to be used on dark background
+   */
+  readonly inverse: boolean;
+  /**
+   * The name of the button, which gets paired with the button's value when submitted as part of a form. Corresponds with the native HTML name attribute
+   */
+  readonly name: string;
+  /**
+   * Makes the button component disabled.
+   * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies
+   */
+  readonly disabled: boolean;
+  /**
+   * Same as original parameter
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type
+   */
+  readonly nativeType?: NativeTypesType;
+  /**
+   * Same as original parameter
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href
+   */
+  readonly href: string;
+  /**
+   * Same as original parameter
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target
+   */
+  readonly target?: ButtonTargetType;
+  /**
+   * Same as original parameter
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
+   */
+  readonly download: boolean;
+  /**
+   * Same as original parameter
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-hreflang
+   */
+  readonly hreflang: string;
+  /**
+   * Same as original parameter
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-referrerpolicy
+   */
+  readonly referrerpolicy: string;
+  /**
+   * Same as original parameter
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel
+   */
+  readonly rel: string;
+  /**
+   * Indicates whether an asynchronous process is running
+   */
+  readonly loading: string;
+  /**
+   * Same as original parametr
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/focusable
+   */
+  readonly focusable: boolean;
+  /**
+   * Custom button identifier
+   */
+  readonly identifier: string;
+  /**
+   * Indicates the id of a related component’s visually focused element
+   */
+  readonly wcagActiveDescendant: string;
+  /**
+   * Use this property to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages
+   */
+  readonly wcagControls: string;
+  /**
+   * Indicates the id of a component that describes the button
+   */
+  readonly wcagDescribedBy: string;
+  /**
+   * Aria description the button
+   */
+  readonly wcagDescription: string;
+  /**
+   * Details of the component
+   */
+  readonly wcagDetails: string;
+  /**
+   * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button
+   * Set the value to convey the current expanded (true) or collapsed (false) state of the content
+   */
+  readonly wcagExpanded: boolean;
+  /**
+   * Adds accessible label for the button that is only shown for screen readers
+   * Typically, this label text replaces the visible text on the button for users who use assistive technology
+   */
+  readonly wcagLabel: string;
+  /**
+   * String of id's that indicate alternative labels elements
+   */
+  readonly wcagLabelledBy: string;
+  /**
+   * Indicates the id of a component owned by the button
+   */
+  readonly wcagOwns: string;
+  /**
+   * 	Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button
+   */
+  readonly wcagHasPopup: string;
+  /**
+   * Tells screen reader the element is pressed
+   */
+  readonly wcagPressed: string;
+  /**
+   * Indicates the current item within a container or set of related elements
+   */
+  readonly wcagCurrent: string;
+  /**
+   * Emitted when the button click
+   */
+  govClick: EventEmitter<ButtonEvent>;
+  /**
+   * Emitted when the button has focus
+   */
+  govFocus: EventEmitter<ButtonEvent>;
+  /**
+   * Emitted when the button loses focus
+   */
+  govBlur: EventEmitter<ButtonEvent>;
+  validateVariant(newValue: string): void;
+  validateType(newValue: string): void;
+  validateSize(newValue: string): void;
+  validateNativeType(newValue: string): void;
+  isPressed: boolean;
+  componentWillLoad(): void;
+  componentDidRender(): Promise<void>;
+  get classNames(): string;
+  render(): any;
+  private onClickHandler;
+  private onFocusHandler;
+  private onBlurHandler;
+  /**
+   * Focus button element
+   */
+  setFocus(): Promise<void>;
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  validateWcag(): Promise<void>;
+}

package/dist/types/components/gov-button/gov-button.types.d.ts

@@ -0,0 +1,4 @@
+import { GovBaseEvent } from "../../types/event.types";
+export interface ButtonEvent extends GovBaseEvent {
+  ref: HTMLGovButtonElement;
+}

package/dist/types/components/gov-card/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const CardClass: {
+  root: string;
+  header: string;
+  title: string;
+  inner: string;
+  img: string;
+  main: string;
+  content: string;
+  icon: string;
+  btns: string;
+  footer: string;
+  arrow: string;
+};

package/dist/types/components/gov-card/gov-card.d.ts

@@ -0,0 +1,60 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { GovCardChangeEvent } from './interfaces';
+export declare class GovCard {
+  private h;
+  private readonly headlineId;
+  private readonly contentId;
+  constructor();
+  host: HTMLGovCardElement;
+  /**
+   * Style variation of the card.
+   */
+  readonly promotion: boolean;
+  /**
+   * Item label of the card
+   */
+  readonly label: string;
+  /**
+   * Defines wether the card can be collapsible
+   */
+  readonly collapsible: boolean;
+  /**
+   * Defines whether the card is open or closed by default
+   */
+  readonly expanded: boolean;
+  /**
+   * Used to change the HMTL tag in the card headline for correct semantic structure
+   */
+  readonly headlineTag: string;
+  /**
+   * Adds accessible label for the collapsible button that is only shown for screen readers.
+   */
+  wcagTriggerLabel: string;
+  /**
+   * A string of identifiers that indicate alternative label elements for collapsible card
+   */
+  wcagTriggerLabelledBy: string;
+  /**
+   * Called when the card toggle state changes
+   */
+  govToggle: EventEmitter<GovCardChangeEvent>;
+  isExpanded: boolean;
+  validateHeadlineTag(newValue: string): void;
+  componentWillLoad(): void;
+  componentDidRender(): Promise<void>;
+  private emmitChange;
+  render(): any;
+  private onClickHandler;
+  /**
+   * Open the card if it is collapsible
+   */
+  open(): Promise<void>;
+  /**
+   * Close the card if it is collapsible
+   */
+  close(): Promise<void>;
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  validateWcag(): Promise<void>;
+}

package/dist/types/components/gov-card/interfaces.d.ts

@@ -0,0 +1,4 @@
+export interface GovCardChangeEvent {
+  open: boolean;
+  element: HTMLGovCardElement;
+}

package/dist/types/components/gov-container/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const ContainerClass: {
+  root: string;
+};

package/dist/types/components/gov-container/gov-container.d.ts

@@ -0,0 +1,12 @@
+export declare class GovContainer {
+  private h;
+  constructor();
+  host: HTMLGovContainerElement;
+  render(): any;
+  /**
+   * Returns slotted children
+   *
+   * @return {Promise<Node[]>}
+   */
+  slottedChildren(): Promise<Node[]>;
+}

package/dist/types/components/gov-cookiebar/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const CookiebarClass: {
+  root: string;
+  holder: string;
+  content: string;
+  actions: string;
+  actionsPrimary: string;
+  actionsSecondary: string;
+};

package/dist/types/components/gov-cookiebar/gov-cookiebar.d.ts

@@ -0,0 +1,7 @@
+import { GovHost } from '../../helpers/Dom/template.types';
+export declare class GovCookiebar {
+  h: GovHost;
+  constructor();
+  host: HTMLGovCookiebarElement;
+  render(): any;
+}

package/dist/types/components/gov-empty/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const EmptyClass: {
+  root: string;
+  icon: string;
+  container: string;
+  content: string;
+};

package/dist/types/components/gov-empty/gov-empty.d.ts

@@ -0,0 +1,6 @@
+export declare class GovEmpty {
+  private h;
+  constructor();
+  host: HTMLGovEmptyElement;
+  render(): any;
+}

package/dist/types/components/gov-error-code/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const ErrorCodeClass: {
+  root: string;
+  icon: string;
+  holder: string;
+  content: string;
+};

package/dist/types/components/gov-error-code/gov-error-code.d.ts

@@ -0,0 +1,6 @@
+export declare class GovErrorCode {
+  private h;
+  constructor();
+  host: HTMLGovErrorCodeElement;
+  render(): any;
+}

package/dist/types/components/gov-form/autocomplete/constants.d.ts

@@ -0,0 +1,12 @@
+import { Sizes } from '../../../core/constants/sizes';
+import { Variants } from '../../../core/constants/variants';
+import { ValueOf } from '../../../types/interfaces';
+export declare const FormAutocompleteSizes: Pick<typeof Sizes, "_M" | "_L" | "_XL">;
+export declare type SizesType = `${ValueOf<typeof FormAutocompleteSizes>}`;
+export declare const FormAutocompleteVariants: Pick<typeof Variants, "PRIMARY" | "SECONDARY">;
+export declare type VariantType = `${ValueOf<typeof FormAutocompleteVariants>}`;
+export declare const FormAutocompleteClass: {
+  root: string;
+  list: string;
+  item: string;
+};

package/dist/types/components/gov-form/autocomplete/gov-form-autocomplete.d.ts

@@ -0,0 +1,134 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { SizesType, VariantType } from "./constants";
+import { FormAutocompleteEvent, GovFormAutocompleteItem } from "./gov-form-autocomplete.types";
+export declare class GovFormAutocomplete {
+  private inputRef?;
+  private listRef?;
+  private readonly listBoxId;
+  private searchCallback;
+  private templateResolver;
+  constructor();
+  host: HTMLGovFormInputElement;
+  /**
+   * Value of input
+   */
+  value: string;
+  /**
+   * Custom input identifier.
+   */
+  readonly identifier: string;
+  /**
+   * Style variation of the form input.
+   */
+  readonly variant?: VariantType;
+  /**
+   * Indicates the entered value of child form element does conform to the format expected by the application.
+   */
+  readonly success: boolean;
+  /**
+   * Input’s size.
+   */
+  readonly size?: SizesType;
+  /**
+   * Main key name in the object
+   */
+  readonly nameKey: string;
+  /**
+   * Name of the input.
+   */
+  readonly name: string;
+  /**
+   * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.
+   * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
+   */
+  readonly required: boolean;
+  /**
+   * Makes the input component disabled.
+   * This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies.
+   */
+  readonly disabled: boolean;
+  /**
+   * Text that appears in the form control when it has no value set
+   */
+  readonly placeholder: string;
+  /**
+   * The value is not editable
+   */
+  readonly readonly: boolean;
+  /**
+   * Indicates the entered value does not conform to the format expected by the application.
+   */
+  readonly invalid: boolean;
+  /**
+   * Minimum length (number of characters) of value
+   */
+  readonly minlength: number;
+  /**
+   * Maximum length (number of characters) of value
+   */
+  readonly maxlength: number;
+  /**
+   * Indicates the id of a component that describes the input.
+   */
+  readonly wcagDescribedBy: string;
+  /**
+   * Indicates the id of a component that labels the input.
+   */
+  readonly wcagLabelledBy: string;
+  /**
+   * Same as original parameter
+   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-owns
+   */
+  readonly wcagOwns: string;
+  /**
+   * Emitted when the input has focus.
+   */
+  govFocus: EventEmitter<FormAutocompleteEvent>;
+  /**
+   * Emitted when the input loses focus.
+   */
+  govBlur: EventEmitter<FormAutocompleteEvent>;
+  /**
+   * Emitted when the input change value.
+   */
+  govInput: EventEmitter<FormAutocompleteEvent>;
+  /**
+   * Emitted when the input change value.
+   */
+  govSelect: EventEmitter<FormAutocompleteEvent>;
+  focused: boolean;
+  processing: boolean;
+  arrowCounter: number;
+  list: GovFormAutocompleteItem[];
+  validateVariant(newValue: string): void;
+  validateSize(newValue: string): void;
+  private onArrowUp;
+  private onArrowDown;
+  private moveToView;
+  private doSearch;
+  componentWillLoad(): void;
+  render(): any;
+  private onFocusHandler;
+  private onBlurHandler;
+  private onInputHandler;
+  private onSelectHandler;
+  private onKeyUpHandler;
+  private onKeyDownHandler;
+  /**
+   * Returns the current state of the component
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /**
+   * Clears whisperer value
+   */
+  clearValue(): Promise<void>;
+  /**
+   * Set a custom asynchronous function for the whisperer
+   */
+  setSearchCallback(callback: (value: string) => Promise<any>): Promise<void>;
+  /**
+   * Setting a custom whisper result template
+   * @param callback
+   */
+  setTemplateResolver(callback: (item: GovFormAutocompleteItem) => string): Promise<void>;
+}

package/dist/types/components/gov-form/autocomplete/gov-form-autocomplete.types.d.ts

@@ -0,0 +1,9 @@
+import { GovBaseEvent } from "../../../types/event.types";
+import { Nullable } from "../../../types/interfaces";
+export interface FormAutocompleteEvent extends GovBaseEvent {
+  value: string;
+  selected: Nullable<GovFormAutocompleteItem>;
+}
+export interface GovFormAutocompleteItem {
+  [key: string]: any;
+}

package/dist/types/components/gov-form/checkbox/constants.d.ts

@@ -0,0 +1,8 @@
+import { Sizes } from '../../../core/constants/sizes';
+import { ValueOf } from '../../../types/interfaces';
+export declare const FormCheckboxSizes: Pick<typeof Sizes, "_XS" | "_S" | "_M" | "_L">;
+export declare type FormCheckboxSizesType = `${ValueOf<typeof FormCheckboxSizes>}`;
+export declare const FormCheckboxClass: {
+  root: string;
+  check: string;
+};

package/dist/types/components/gov-form/checkbox/gov-form-checkbox.d.ts

@@ -0,0 +1,85 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { FormCheckboxSizesType } from "./constants";
+import { FormCheckboxEvent } from "./gov-form-checkbox.types";
+export declare class GovFormCheckbox {
+  private readonly h;
+  private f;
+  private inputRef?;
+  private readonly checkboxId;
+  constructor();
+  host: HTMLGovFormCheckboxElement;
+  /**
+   * Value of checkbox
+   */
+  readonly value: string;
+  /**
+   * Checkbox default state
+   */
+  checked: boolean;
+  /**
+   * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.
+   * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
+   */
+  readonly required: boolean;
+  /**
+   * Makes the checkbox component disabled.
+   * This prevents users from being able to interact with the checkbox, and conveys its inactive state to assistive technologies.
+   */
+  readonly disabled: boolean;
+  /**
+   * Name of the checkbox.
+   */
+  readonly name: string;
+  /**
+   * Checkboxes size.
+   */
+  readonly size?: FormCheckboxSizesType;
+  /**
+   * Custom checkbox identifier.
+   */
+  readonly identifier: string;
+  /**
+   * When you can't use the form label.
+   */
+  readonly noLabel: boolean;
+  /**
+   * Indicates the entered value does not conform to the format expected by the application.
+   */
+  readonly invalid: boolean;
+  /**
+   * Indicates the id of a component that describes the input.
+   */
+  readonly wcagDescribedBy: string;
+  /**
+   * Indicates the id of a component that labels the input.
+   */
+  readonly wcagLabelledBy: string;
+  /**
+   * Emitted when the checkbox has focus.
+   */
+  govFocus: EventEmitter<FormCheckboxEvent>;
+  /**
+   * Emitted when the checkbox loses focus.
+   */
+  govBlur: EventEmitter<FormCheckboxEvent>;
+  /**
+   * Emitted when the checkbox change value.
+   */
+  govChange: EventEmitter<FormCheckboxEvent>;
+  validateSize(newValue: string): void;
+  componentWillLoad(): void;
+  componentDidRender(): Promise<void>;
+  render(): any;
+  private onFocusHandler;
+  private onBlurHandler;
+  private onClickHandler;
+  private onChangeHandler;
+  /**
+   * Returns the reference of the native element
+   */
+  getRef(): Promise<HTMLInputElement>;
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  validateWcag(): Promise<void>;
+}

package/dist/types/components/gov-form/checkbox/gov-form-checkbox.types.d.ts

@@ -0,0 +1,5 @@
+import { GovBaseEvent } from "../../../types/event.types";
+export interface FormCheckboxEvent extends GovBaseEvent {
+  checked: boolean;
+  value: string;
+}

package/dist/types/components/gov-form/control/constants.d.ts

@@ -0,0 +1,9 @@
+import { Sizes } from '../../../core/constants/sizes';
+import { ValueOf } from '../../../types/interfaces';
+export declare const FormControlSizes: Pick<typeof Sizes, "_M" | "_L" | "_XL">;
+export declare type FormControlSizesType = `${ValueOf<typeof FormControlSizes>}`;
+export declare const FormControlClass: {
+  root: string;
+  holder: string;
+  bottom: string;
+};

package/dist/types/components/gov-form/control/gov-form-control.d.ts

@@ -0,0 +1,47 @@
+import { FormControlSizesType } from './constants';
+export declare class GovFormControl {
+  private readonly h;
+  private f;
+  private readonly controlId;
+  private observer;
+  constructor();
+  /**
+   * Defines the space between nested components.
+   */
+  readonly gap?: FormControlSizesType;
+  /**
+   * Form element identifier
+   */
+  readonly identifier: string;
+  /**
+   * Indicates the entered value of child form element does not conform to the format expected by the application.
+   */
+  readonly invalid: boolean;
+  /**
+  /**
+   * Indicates the form element is disabled
+   */
+  readonly disabled: boolean;
+  /**
+  /**
+   * Indicates the entered value of child form element does conform to the format expected by the application.
+   */
+  readonly success: boolean;
+  /**
+   * Use control as a fieldset for better accessibility.
+   * Note: Don't forget to set the legend attribute of the gov-form-label component
+   */
+  readonly fieldset: boolean;
+  /**
+   * Form element size.
+   */
+  readonly size?: FormControlSizesType;
+  host: HTMLGovFormControlElement;
+  watchInvalid(): void;
+  componentDidRender(): void;
+  disconnectedCallback(): void;
+  private passChildAttrs;
+  private formElementDescriptionControl;
+  private syncControlMessages;
+  render(): any;
+}

package/dist/types/components/gov-form/file/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const FormFileClass: {
+  root: string;
+  area: string;
+  label: string;
+  input: string;
+  list: string;
+  item: string;
+  attachments: string;
+};