@postnord/pn-marketweb-components 2.0.3-beta3 → 2.0.4

package/umd/modules/@postnord/web-components/types/assets/icons.d.ts

@@ -0,0 +1,228 @@
+declare const _default: {
+  "alert-exclamation-circle": string;
+  "alert-exclamation-triangle": string;
+  "alert-info-circle": string;
+  "alert-question-circle": string;
+  "align-center": string;
+  "align-left": string;
+  "align-right": string;
+  "angle-down": string;
+  "angle-left": string;
+  "angle-right": string;
+  "angle-small-down": string;
+  "angle-small-left": string;
+  "angle-small-right": string;
+  "angle-small-up": string;
+  "angle-up": string;
+  apartment: string;
+  "archive-off": string;
+  archive: string;
+  "arrow-down-left": string;
+  "arrow-down-right": string;
+  "arrow-down": string;
+  "arrow-left": string;
+  "arrow-right": string;
+  "arrow-up-left": string;
+  "arrow-up-right": string;
+  "arrow-up": string;
+  attachment: string;
+  "augmented reality": string;
+  award: string;
+  bankid: string;
+  "barcode-off": string;
+  barcode: string;
+  bars: string;
+  bauble: string;
+  "bell-alarm": string;
+  "bell-off": string;
+  bell: string;
+  bluetooth: string;
+  bold: string;
+  "bolt-off": string;
+  bolt: string;
+  book: string;
+  bookmark: string;
+  "box-check-off": string;
+  "box-check": string;
+  "box-double": string;
+  "box-info": string;
+  "box-label": string;
+  "box-left-notification": string;
+  "box-left-off": string;
+  "box-left": string;
+  "box-notification-off": string;
+  "box-notification": string;
+  "box-off": string;
+  "box-pin": string;
+  "box-plus": string;
+  "box-right": string;
+  "box-stack": string;
+  box: string;
+  boxes: string;
+  bug: string;
+  "bullhorn-off": string;
+  bullhorn: string;
+  calendar: string;
+  "camera-off": string;
+  camera: string;
+  car: string;
+  "check-circle-off": string;
+  "check-circle": string;
+  "check-small": string;
+  check: string;
+  circle: string;
+  claim: string;
+  clock: string;
+  "close-circle": string;
+  "close-small": string;
+  close: string;
+  cloud: string;
+  code: string;
+  collapse: string;
+  company: string;
+  comparison: string;
+  "compass-off": string;
+  compass: string;
+  component: string;
+  connection: string;
+  contacts: string;
+  "credit-card": string;
+  customs: string;
+  dashboard: string;
+  "device-laptop": string;
+  "device-mobile": string;
+  disabled: string;
+  "document-check": string;
+  "document-return": string;
+  document: string;
+  download: string;
+  drag: string;
+  edit: string;
+  "ellipsis-h": string;
+  "ellipsis-v": string;
+  emoji: string;
+  "envelope-add": string;
+  "envelope-open": string;
+  envelope: string;
+  expand: string;
+  facebook: string;
+  faq: string;
+  "flashlight-off": string;
+  flashlight: string;
+  folder: string;
+  frame: string;
+  funnel: string;
+  globe: string;
+  "grid-2": string;
+  grid: string;
+  "hand-point": string;
+  hand: string;
+  "happy-off": string;
+  happy: string;
+  "heart-filled": string;
+  heart: string;
+  home: string;
+  hourglass: string;
+  "image-off": string;
+  image: string;
+  "inbox-in": string;
+  "inbox-out": string;
+  inbox: string;
+  instagram: string;
+  invert: string;
+  italic: string;
+  layers: string;
+  "lightbulb-off": string;
+  lightbulb: string;
+  linkedin: string;
+  list: string;
+  location: string;
+  magazine: string;
+  "mailbox-denmark": string;
+  "mailbox-postnord": string;
+  mailbox: string;
+  "map-marker-off": string;
+  "map-marker": string;
+  messenger: string;
+  "minus-circle": string;
+  "minus-small": string;
+  minus: string;
+  modtagerflex: string;
+  "money-off": string;
+  money: string;
+  move: string;
+  mybox: string;
+  okay: string;
+  "open-in-new": string;
+  "padlock-unlocked": string;
+  padlock: string;
+  pakkeboks: string;
+  parcelbox: string;
+  "phone-add": string;
+  "phone-filled": string;
+  phone: string;
+  "pin-code": string;
+  "plus-circle": string;
+  "plus-small": string;
+  plus: string;
+  "pn-mark": string;
+  "po-box": string;
+  position: string;
+  postcard: string;
+  poster: string;
+  "preview-off": string;
+  "preview-on": string;
+  "print-off": string;
+  print: string;
+  "qr-code": string;
+  receipt: string;
+  return: string;
+  roll: string;
+  "rotate-2": string;
+  rotate: string;
+  route: string;
+  ruler: string;
+  save: string;
+  scales: string;
+  scanner: string;
+  search: string;
+  "secure-transfer": string;
+  settings: string;
+  "share-android": string;
+  share: string;
+  "shield-pin": string;
+  shop: string;
+  sliders: string;
+  slip: string;
+  "small-business": string;
+  snowflake: string;
+  "spinner-blue": string;
+  "spinner-white": string;
+  stack: string;
+  stamp: string;
+  star: string;
+  statistics: string;
+  submit: string;
+  suitcase: string;
+  "talk-bubble": string;
+  "text-size": string;
+  text: string;
+  thermometer: string;
+  transfer: string;
+  "trash-can": string;
+  trolley: string;
+  truck: string;
+  twitter: string;
+  undo: string;
+  unfold: string;
+  upload: string;
+  upset: string;
+  "user-add": string;
+  user: string;
+  "users-add": string;
+  users: string;
+  walking: string;
+  wifi: string;
+  wrench: string;
+};
+export default _default;

package/umd/modules/@postnord/web-components/types/assets/illustrations.d.ts

@@ -0,0 +1,131 @@
+declare const _default: {
+  "PEX-truck": string;
+  "airplane-city": string;
+  "arms-packages-plant": string;
+  baptism: string;
+  birthday: string;
+  "box-letters": string;
+  "cargoship-mountains": string;
+  "character-box-letters-globe": string;
+  "character-box-letters-house": string;
+  "character-box-letters": string;
+  "character-computer-graphics": string;
+  "character-computer-headset": string;
+  "character-letter-locker": string;
+  "character-package-arrow": string;
+  "character-package-locker": string;
+  "character-package-phone-city": string;
+  "character-package-sweather": string;
+  "characters-dog": string;
+  christmas: string;
+  "circle-scale-package-32-abroad": string;
+  "circle-scale-package-32": string;
+  circle_mailpickup: string;
+  claims: string;
+  "company-settings": string;
+  "computer-letter-flowers": string;
+  "computer-letter-plant": string;
+  "computer-option-1": string;
+  "computer-option": string;
+  "computer-postcard": string;
+  condolence: string;
+  confirmation: string;
+  "create-mailouts": string;
+  "customer-service": string;
+  dashboard: string;
+  "data-graphics": string;
+  discover: string;
+  easter: string;
+  elin: string;
+  "file-paper-arrow": string;
+  "folder-lock": string;
+  "globe-hand": string;
+  graduation: string;
+  "green-letters": string;
+  "green-parcels": string;
+  greeting: string;
+  "group-of-people": string;
+  "hand-app-map": string;
+  "hand-app-packages": string;
+  "hand-invoice-credit-card": string;
+  "hand-letter-stamp-2": string;
+  "hand-letter-stamp": string;
+  "hand-lock-money-package": string;
+  "hand-mobile-stamp": string;
+  "hand-paper-money": string;
+  "hand-phone-city": string;
+  "hand-reply-letter-inernational": string;
+  invitation: string;
+  invoices: string;
+  "letter-abroad": string;
+  "letter-graphics-2": string;
+  "letter-graphics": string;
+  "letterbox-reply-letter-plants": string;
+  letterboxes: string;
+  "letters-stamps": string;
+  love: string;
+  "mailbox-plant-letters": string;
+  "mailbox-plant-package": string;
+  "mobile-in-store": string;
+  "mobile-notification": string;
+  "mobile-package": string;
+  "mobile-parcel-italy": string;
+  modtagerflex: string;
+  "new-baby": string;
+  "newsletter-map-calendar": string;
+  notifications: string;
+  "ost-orders": string;
+  outgoing: string;
+  "package-calendar-1": string;
+  "package-calendar": string;
+  "package-letter-calendar": string;
+  "packages-in-a-pile": string;
+  "pallet-package": string;
+  payments: string;
+  "person-computer": string;
+  "person-letter-city 3": string;
+  "person-letter-city-1": string;
+  "person-letter": string;
+  "person-mobile": string;
+  "person-mobile2": string;
+  "person-package-1": string;
+  "person-package-2": string;
+  "person-package-city": string;
+  "person-package-house-2": string;
+  "person-package-house": string;
+  "person-package-lighthouse": string;
+  pex: string;
+  "phone-ribbon-lock": string;
+  "postagemeter-character-plant": string;
+  "postagemeter-letters-plant": string;
+  postboxes: string;
+  "postnord-customer-service": string;
+  "power-of-attourney": string;
+  quality: string;
+  reports: string;
+  returns: string;
+  "scale-package-16-abroad": string;
+  "scale-package-16": string;
+  "secure-file-transfer": string;
+  "send-direct-business": string;
+  "send-direct": string;
+  "sprockets-id-card": string;
+  thankyou: string;
+  "track-and-trace": string;
+  tracking: string;
+  "truck-EU-landmarks": string;
+  "truck-and-plane-EU-landmarks": string;
+  "truck-big-mountains": string;
+  "truck-computer-warehouse": string;
+  "truck-cross-city": string;
+  "truck-house-arrow": string;
+  "truck-mountains": string;
+  "truck-packages-plant": string;
+  "truck-thermometer-city": string;
+  "truck-transporting-house": string;
+  truck: string;
+  truck_packages: string;
+  vat: string;
+  wedding: string;
+};
+export default _default;

package/umd/modules/@postnord/web-components/types/components/buttons/pn-button/pn-button.d.ts

@@ -0,0 +1,49 @@
+export declare class Pnbutton {
+  /** small, bool */
+  small?: boolean;
+  /** Button type, dark(blue background), light(white background), warning(destructive actions) */
+  appearance?: string;
+  /** Altering the button style, options are: 'outlined' (bordered button with no background) or 'borderless' (borderless button with no background, mostly used for links) */
+  variant?: string;
+  /** Loading indicator */
+  loading?: boolean;
+  /** Icon on the left side instead of on the right */
+  leftIcon?: boolean;
+  icon?: string;
+  type?: string;
+  /** If you're using a button with only an icon, button text is still REQUIRED for the tooltip */
+  iconOnly: boolean;
+  ariaLabel?: string;
+  ariaLabelledby?: string;
+  ariaControls?: string;
+  ariaPressed?: string;
+  /** Pass an href to make the button into link (a-tag) */
+  href?: string;
+  rel?: string;
+  target?: string;
+  download?: boolean;
+  hostElement: HTMLElement;
+  linkEl: HTMLElement;
+  componentDidLoad(): void;
+  tooltipOpen: boolean;
+  tooltipDownwards: boolean;
+  tooltipEl: HTMLDivElement;
+  tooltipDx: string;
+  openHandler(): void;
+  initTooltip(): void;
+  setTooltipOffset(): void;
+  checkTooltipPosition(): void;
+  checkIfLink(): void;
+  ripple: (e: any, el: any) => void;
+  getClassNames(): string;
+  getAttributes(): {
+    type: string;
+  } | {
+    href: string;
+    rel: string;
+    target: string;
+    download: boolean;
+  };
+  getTagName(): "button" | "a";
+  render(): any;
+}

package/umd/modules/@postnord/web-components/types/components/content/pn-accordion/pn-accordion.d.ts

@@ -0,0 +1,13 @@
+export declare class Pnaccordion {
+  hostElement: HTMLElement;
+  accordionRows: Array<HTMLElement>;
+  private mo?;
+  componentDidLoad(): void;
+  toggleHandler({ detail }: {
+    detail: any;
+  }): void;
+  toggleState(el: any): void;
+  getRect(el: any): any;
+  animate(layoutChange: any, firstEls: any, getLastEls?: () => any): void;
+  render(): any;
+}

package/umd/modules/@postnord/web-components/types/components/content/pn-accordion-row/pn-accordion-row.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+export declare class PnaccordionItem {
+  /** The label/title of the accordion row, you can also pass a slot with the name "label" if you want to put custom content in there */
+  label: string;
+  rippleContainer: HTMLElement;
+  hostElement: HTMLElement;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  /** Ignore this event, it is only to be handled by the accordion parent component */
+  togglerow: EventEmitter;
+  toggleHandler(): void;
+  clickHandler(e: any): void;
+  render(): any;
+}

package/umd/modules/@postnord/web-components/types/components/content/pn-table/pn-table.d.ts

@@ -0,0 +1,11 @@
+export declare class PnTable {
+  hostElement: HTMLElement;
+  /** Disable table if set to true */
+  disabled: boolean;
+  /** Add border to table if set to true */
+  bordered: boolean;
+  /** Make table striped if set to true */
+  striped: boolean;
+  componentWillLoad(): void;
+  render(): any;
+}

package/umd/modules/@postnord/web-components/types/components/design-tokens/pn-colors/pn-color.d.ts

@@ -0,0 +1,6 @@
+export declare class PnColor {
+  name: string;
+  defaultColor: string;
+  palette: Array<object>;
+  render(): string;
+}

package/umd/modules/@postnord/web-components/types/components/design-tokens/pn-colors/pn-colors.d.ts

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

package/umd/modules/@postnord/web-components/types/components/design-tokens/pn-icon/pn-icon.d.ts

@@ -0,0 +1,10 @@
+export declare class PnIcon {
+  /** The name of the icon you want to use */
+  symbol: string;
+  /** Medium is default but you can pass "small" for a 16x16 icon */
+  small: boolean;
+  /** Check for the available colors in the knobs panel in the story */
+  color: string;
+  getIcon(): any;
+  render(): any;
+}

package/umd/modules/@postnord/web-components/types/components/design-tokens/pn-icon-grid/pn-icon-grid.d.ts

@@ -0,0 +1,7 @@
+export declare class PnIconGrid {
+  small: boolean;
+  color: string;
+  activeSymbol: string;
+  copySymbolName(symbolName: any): Promise<void>;
+  render(): any;
+}

package/umd/modules/@postnord/web-components/types/components/design-tokens/pn-illustration/pn-illustration.d.ts

@@ -0,0 +1,4 @@
+export declare class PnIllustration {
+  illustration: string;
+  render(): any;
+}

package/umd/modules/@postnord/web-components/types/components/design-tokens/pn-illustration-grid/pn-illustration-grid.d.ts

@@ -0,0 +1,7 @@
+export declare class PnIllustrationGrid {
+  size: string;
+  color: string;
+  activeIllustration: string;
+  copyIllustrationName(illustrationName: any): Promise<void>;
+  render(): any;
+}

package/umd/modules/@postnord/web-components/types/components/feedback/pn-modal/pn-modal.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+export declare class PnModal {
+  /** Bind to this property if you want to control the visibility of the modal from your own data. */
+  open: boolean;
+  /** Event fired when the modal is closed, either by clicking outside or by triggering close button. */
+  close: EventEmitter;
+  focusableEls: Array<any>;
+  hostElement: HTMLElement;
+  mo: MutationObserver;
+  untabbable: Array<any>;
+  elToFocus: HTMLElement;
+  componentDidLoad(): void;
+  openHandler(): void;
+  setFocusableElements(): void;
+  addEventListeners(): void;
+  removeEventListeners(): void;
+  handleFocus: any;
+  handleBlur: any;
+  handleEsc: any;
+  handleGlobalClick: any;
+  focusHandler(e: any): void;
+  blurHandler(e: any): void;
+  escHandler({ code }: {
+    code: any;
+  }): void;
+  globalClickHandler(e: any): void;
+  render(): any;
+}

package/umd/modules/@postnord/web-components/types/components/feedback/pn-progress-bar/pn-progress-bar.d.ts

@@ -0,0 +1,12 @@
+export declare class PnSpinner {
+  hostElement: HTMLElement;
+  progress: number;
+  size: string;
+  color: string;
+  width: string;
+  label: string;
+  showSpinner: boolean;
+  showPercentage: boolean;
+  render(): any;
+  private _hasLabel;
+}

package/umd/modules/@postnord/web-components/types/components/feedback/pn-progress-indicator/pn-progress-indicator-step/pn-progress-indicator-step.d.ts

@@ -0,0 +1,17 @@
+import { EventEmitter } from "../../../../stencil-public-runtime";
+export declare class PnProgressIndicatorStep {
+  activeStep: number;
+  index: number;
+  name: string;
+  checked: boolean;
+  active: "yes" | "no";
+  activated: boolean;
+  done: boolean;
+  setactivestep: EventEmitter;
+  setActiveStepHandler(): void;
+  componentWillLoad(): void;
+  componentDidUpdate(): void;
+  checkStatus(): void;
+  getClassNames(): string;
+  render(): any;
+}

package/umd/modules/@postnord/web-components/types/components/feedback/pn-progress-indicator/pn-progress-indicator.d.ts

@@ -0,0 +1,15 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+export declare class PnProgressIndicator {
+  /** Takes the index of the active step */
+  activeStep: number;
+  hostElement: HTMLElement;
+  /** This will emit when progress is changed and is the value you want to bind to your VM state */
+  progresschange: EventEmitter;
+  setActiveStepHandler({ detail }: {
+    detail: any;
+  }): void;
+  componentWillLoad(): void;
+  componentDidUpdate(): void;
+  passPropsToChildren(): void;
+  render(): any;
+}

package/umd/modules/@postnord/web-components/types/components/feedback/pn-spinner/pn-spinner.d.ts

@@ -0,0 +1,8 @@
+export declare class PnSpinner {
+  hostElement: HTMLElement;
+  /** Light version of the spinner */
+  light: boolean;
+  /** Size in em */
+  size: string;
+  render(): any;
+}

package/umd/modules/@postnord/web-components/types/components/feedback/pn-toast/pn-toast.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+export declare class Pntoast {
+  /**  success or warning, defaults to blue */
+  appearance?: string;
+  /**  set left icon */
+  icon?: string;
+  /** Show close button? */
+  closable?: boolean;
+  /** Temporarily visible toast, the time of which is determined by the length of your message. Close button will be shown automatically if the time shown exceeds 6s. */
+  temporary?: boolean;
+  /** If you want to set the duration of the visibility manually, time in milliseconds */
+  manualDuration?: number;
+  /** If you want to control visibility with your own data you can bind to this attribute */
+  hidden: boolean;
+  hostElement: HTMLElement;
+  /** Event fired when close button is pressed and when the temporary toast closes itself */
+  close: EventEmitter;
+  timer: number;
+  timeout: any;
+  componentDidLoad(): void;
+  visibilityHandler(): void;
+  closeToast(): void;
+  getClassNames(): string;
+  render(): any;
+}

package/umd/modules/@postnord/web-components/types/components/feedback/pn-tooltip/pn-tooltip.d.ts

@@ -0,0 +1,21 @@
+export declare class PnTooltip {
+  warning: boolean;
+  color: string;
+  downwards: boolean;
+  open: boolean;
+  deltaX: string;
+  hostElement: HTMLElement;
+  pnTooltipContent: HTMLDivElement;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  initialize(): void;
+  openHandler(): void;
+  timeout: any;
+  eventHandler(): void;
+  setTransform(): void;
+  checkPosition(): void;
+  getSymbol(): "alert-info-circle" | "alert-question-circle";
+  toggle(): void;
+  getClassNames(): string;
+  render(): any;
+}