@dnncommunity/dnn-elements 0.14.1 → 0.15.0-beta.3

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

@@ -1,55 +1,56 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * @slot Content of the button
- */
-export declare class DnnButton {
-  /**
-   * Optional button style,
-   * can be either primary, secondary or tertiary and defaults to primary if not specified
-   */
-  type: 'primary' | 'secondary' | 'tertiary';
-  /**
-   * Optionally reverses the button style.
-   */
-  reversed: boolean;
-  /**
-   * Optionally sets the button size, small normal or large, defaults to normal
-   */
-  size?: 'small' | 'normal' | 'large';
-  /**
-   * Optionally add a confirmation dialog before firing the action.
-   */
-  confirm?: boolean;
-  /**
-   * The text of the yes button for confirmation.
-   */
-  confirmYesText?: string;
-  /**
-   * The text of the no button for confirmation.
-   */
-  confirmNoText?: string;
-  /**
-   * The text of the confirmation message;
-   */
-  confirmMessage?: string;
-  /**
-   * Disables the button
-   */
-  disabled: boolean;
-  modalVisible: boolean;
-  el: HTMLDnnButtonElement;
-  private modal;
-  /**
-   * Fires when confirm is true and the user confirms the action.
-  */
-  confirmed: EventEmitter;
-  /**
-   * Fires when confirm is true and the user cancels the action.
-   */
-  canceled: EventEmitter;
-  componentDidLoad(): void;
-  private handleConfirm;
-  private handleCancel;
-  private handleClick;
-  render(): any;
-}
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot Content of the button
+ */
+export declare class DnnButton {
+  /**
+   * Optional button style,
+   * can be either primary, secondary or tertiary and defaults to primary if not specified
+   */
+  type: 'primary' | 'secondary' | 'tertiary';
+  /**
+   * Optionally reverses the button style.
+   */
+  reversed: boolean;
+  /**
+   * Optionally sets the button size, small normal or large, defaults to normal
+   */
+  size?: 'small' | 'normal' | 'large';
+  /**
+   * Optionally add a confirmation dialog before firing the action.
+   */
+  confirm?: boolean;
+  /**
+   * The text of the yes button for confirmation.
+   */
+  confirmYesText?: string;
+  /**
+   * The text of the no button for confirmation.
+   */
+  confirmNoText?: string;
+  /**
+   * The text of the confirmation message;
+   */
+  confirmMessage?: string;
+  /**
+   * Disables the button
+   */
+  disabled: boolean;
+  modalVisible: boolean;
+  el: HTMLDnnButtonElement;
+  private modal;
+  /**
+   * Fires when confirm is true and the user confirms the action.
+  */
+  confirmed: EventEmitter;
+  /**
+   * Fires when confirm is true and the user cancels the action.
+   */
+  canceled: EventEmitter;
+  componentDidLoad(): void;
+  private handleConfirm;
+  private handleCancel;
+  private handleClick;
+  private getElementClasses;
+  render(): any;
+}

package/dist/types/components/dnn-button/dnn-button.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/web-components";
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;
+export declare const Button: any;

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

@@ -1,16 +1,20 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export declare class DnnCheckbox {
-  el: HTMLDnnCheckboxElement;
-  /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */
-  checked: boolean | undefined;
-  /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */
-  useIntermediate: boolean;
-  /** The value for this checkbox (not to be confused with its checked state). */
-  value: string;
-  /** Fires up when the checkbox checked property changes. */
-  checkedchange: EventEmitter<boolean | undefined>;
-  private button;
-  private changeState;
-  private emitEvents;
-  render(): any;
-}
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot - The label for the checkbox.
+ * @slot checkedicon - Allows overriding the default checked icon.
+ * @slot uncheckedicon - Allows overriding the unchecked icon.
+ * @slot intermediateicon - If intermadiate state is used, allows overriding its icon.
+ */
+export declare class DnnCheckbox {
+  el: HTMLDnnCheckboxElement;
+  /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */
+  checked: "checked" | "unchecked" | "intermediate";
+  /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */
+  useIntermediate: boolean;
+  /** The value for this checkbox (not to be confused with its checked state). */
+  value: string;
+  /** Fires up when the checkbox checked property changes. */
+  checkedchange: EventEmitter<"checked" | "unchecked" | "intermediate">;
+  private changeState;
+  render(): any;
+}

package/dist/types/components/dnn-checkbox/dnn-checkbox.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/web-components";
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;
+export declare const Checkbox: any;

package/dist/types/components/dnn-chevron/dnn-chevron.d.ts

@@ -1,13 +1,13 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export declare class DnnChevron {
-  /** Expand text for screen readers */
-  expandText?: string;
-  /** Collapse text for screen readers */
-  collapseText?: string;
-  /** Is the chevron expanded */
-  expanded?: boolean;
-  /** Fires up when the expanded status changes */
-  changed: EventEmitter;
-  handleExpandedChanged(newValue: boolean): void;
-  render(): any;
-}
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class DnnChevron {
+  /** Expand text for screen readers */
+  expandText?: string;
+  /** Collapse text for screen readers */
+  collapseText?: string;
+  /** Is the chevron expanded */
+  expanded?: boolean;
+  /** Fires up when the expanded status changes */
+  changed: EventEmitter;
+  handleExpandedChanged(newValue: boolean): void;
+  render(): any;
+}

package/dist/types/components/dnn-chevron/dnn-chevron.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/web-components";
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;
+export declare const Chevron: any;

package/dist/types/components/dnn-collapsible/dnn-collapsible.d.ts

@@ -1,18 +1,19 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export declare class DnnCollapsible {
-  el: HTMLDnnCollapsibleElement;
-  /** Defines if the panel is expanded or not. */
-  expanded: boolean;
-  /** Defines the transition time in ms, defaults to 100ms */
-  transitionDuration?: number;
-  /** Fires whenever the collapsible height has changed */
-  dnnCollapsibleHeightChanged: EventEmitter<void>;
-  handleHeightChanged(): void;
-  /**
-   * Updates the component height, use to update after a slot content changes.
-   */
-  updateSize(): Promise<void>;
-  handledExpandedChanged(expanded: boolean): void;
-  private container;
-  render(): any;
-}
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class DnnCollapsible {
+  el: HTMLDnnCollapsibleElement;
+  /** Defines if the panel is expanded or not. */
+  expanded: boolean;
+  /** Defines the transition time in ms, defaults to 150ms */
+  transitionDuration?: number;
+  /** Fires whenever the collapsible height has changed */
+  dnnCollapsibleHeightChanged: EventEmitter<void>;
+  handleHeightChanged(): void;
+  /**
+   * Updates the component height, use to update after a slot content changes.
+   */
+  updateSize(): Promise<void>;
+  handledExpandedChanged(expanded: boolean): void;
+  private container;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/dnn-collapsible/dnn-collapsible.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/web-components";
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;
+export declare const Collapsible: any;

package/dist/types/components/dnn-color-picker/dnn-color-picker.d.ts

@@ -1,46 +1,46 @@
-/** Reusable DNN UI component to pick a color
- * @copyright Copyright (c) .NET Foundation. All rights reserved.
- * @license MIT
- */
-import { EventEmitter } from "../../stencil-public-runtime";
-import { ColorInfo } from '../../utilities/colorInfo';
-/** Color Picker for Dnn */
-export declare class DnnColorPicker {
-  el: HTMLDnnColorPickerElement;
-  /** Sets the initial color, must be a valid 8 character hexadecimal string without the # sign. */
-  color: string;
-  /** Sets the width-height ratio of the color picker saturation-lightness box.
-   * @example 100% renders a perfect square
-   */
-  colorBoxHeight: string;
-  currentColor: ColorInfo;
-  rgbDisplay: string;
-  hslDisplay: string;
-  hexDisplay: string;
-  /** Fires up when the color is changed and emits a ColorInfo object
-   * @see ../../utilities/colorInfo.ts
-  */
-  colorChanged: EventEmitter<ColorInfo>;
-  private colorChangedHandler;
-  handeCurrentColorChanged(newValue: ColorInfo): void;
-  private saturationLightnessBox?;
-  private hueRange?;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  private getHex;
-  private getContrast;
-  private getDoublet;
-  private handleSaturationLightnessMouseDown;
-  private handleDragLightnessSaturation;
-  private handleSaturationLightnessMouseUp;
-  private handleHueMouseDown;
-  private handleHueMouseUp;
-  private handleDragHue;
-  private handleComponentValueChange;
-  private handleHSLChange;
-  private handleHexChange;
-  private switchColorMode;
-  private handleSaturationLightnessKeyDown;
-  private handleHueKeyDown;
-  render(): any;
-}
+/** Reusable DNN UI component to pick a color
+ * @copyright Copyright (c) .NET Foundation. All rights reserved.
+ * @license MIT
+ */
+import { EventEmitter } from "../../stencil-public-runtime";
+import { ColorInfo } from '../../utilities/colorInfo';
+/** Color Picker for Dnn */
+export declare class DnnColorPicker {
+  el: HTMLDnnColorPickerElement;
+  /** Sets the initial color, must be a valid 8 character hexadecimal string without the # sign. */
+  color: string;
+  /** Sets the width-height ratio of the color picker saturation-lightness box.
+   * @example 100% renders a perfect square
+   */
+  colorBoxHeight: string;
+  currentColor: ColorInfo;
+  rgbDisplay: string;
+  hslDisplay: string;
+  hexDisplay: string;
+  /** Fires up when the color is changed and emits a ColorInfo object
+   * @see ../../utilities/colorInfo.ts
+  */
+  colorChanged: EventEmitter<ColorInfo>;
+  private colorChangedHandler;
+  handeCurrentColorChanged(newValue: ColorInfo): void;
+  private saturationLightnessBox?;
+  private hueRange?;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  private getHex;
+  private getContrast;
+  private getDoublet;
+  private handleSaturationLightnessMouseDown;
+  private handleDragLightnessSaturation;
+  private handleSaturationLightnessMouseUp;
+  private handleHueMouseDown;
+  private handleHueMouseUp;
+  private handleDragHue;
+  private handleComponentValueChange;
+  private handleHSLChange;
+  private handleHexChange;
+  private switchColorMode;
+  private handleSaturationLightnessKeyDown;
+  private handleHueKeyDown;
+  render(): any;
+}

package/dist/types/components/dnn-color-picker/dnn-color-picker.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/web-components";
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;
+export declare const ColorPicker: any;

package/dist/types/components/dnn-dropzone/dnn-dropzone.d.ts

@@ -1,45 +1,45 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export declare class DnnDropzone {
-  /** Localization strings */
-  resx: {
-    dragAndDropFile: string;
-    capture: string;
-    or: string;
-    takePicture: string;
-    uploadFile: string;
-  };
-  /** A list of allowed file extensions.
-   * If not specified, any file is allowed.
-   * Ex: ["jpg", "jped", "gif", "png"]
-   */
-  allowedExtensions: string[];
-  /**
-   * If true, will allow the user to take a snapshot
-   * using the device camera. (only works over https).
-   */
-  allowCameraMode: boolean;
-  /**
-   * Specifies the jpeg quality for when the device
-   * camera is used to generate a picture.
-   * Needs to be a number between 0 and 1 and defaults to 0.8
-   */
-  captureQuality: number;
-  /** Fires when file were selected. */
-  filesSelected: EventEmitter<File[]>;
-  canTakeSnapshots: boolean;
-  takingPicture: boolean;
-  private dropzone;
-  private fileInput;
-  private videoPreview;
-  private videoSettings;
-  componentDidLoad(): void;
-  private checkIfBrowserCanTakeSnapshots;
-  private getFilesFromFileList;
-  private handleUploadButton;
-  private handleDragOver;
-  private hasInvalidExtensions;
-  private handleDrop;
-  private takeSnapshot;
-  private applySnapshot;
-  render(): any;
-}
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class DnnDropzone {
+  /** Localization strings */
+  resx: {
+    dragAndDropFile: string;
+    capture: string;
+    or: string;
+    takePicture: string;
+    uploadFile: string;
+  };
+  /** A list of allowed file extensions.
+   * If not specified, any file is allowed.
+   * Ex: ["jpg", "jped", "gif", "png"]
+   */
+  allowedExtensions: string[];
+  /**
+   * If true, will allow the user to take a snapshot
+   * using the device camera. (only works over https).
+   */
+  allowCameraMode: boolean;
+  /**
+   * Specifies the jpeg quality for when the device
+   * camera is used to generate a picture.
+   * Needs to be a number between 0 and 1 and defaults to 0.8
+   */
+  captureQuality: number;
+  /** Fires when file were selected. */
+  filesSelected: EventEmitter<File[]>;
+  canTakeSnapshots: boolean;
+  takingPicture: boolean;
+  private dropzone;
+  private fileInput;
+  private videoPreview;
+  private videoSettings;
+  componentDidLoad(): void;
+  private checkIfBrowserCanTakeSnapshots;
+  private getFilesFromFileList;
+  private handleUploadButton;
+  private handleDragOver;
+  private hasInvalidExtensions;
+  private handleDrop;
+  private takeSnapshot;
+  private applySnapshot;
+  render(): any;
+}

package/dist/types/components/dnn-dropzone/dnn-dropzone.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/web-components";
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;
+export declare const Dropzone: any;

package/dist/types/components/dnn-image-cropper/CornerType.d.ts

@@ -1,6 +1,6 @@
-export declare enum CornerType {
-  "nw" = 0,
-  "ne" = 1,
-  "se" = 2,
-  "sw" = 3
-}
+export declare enum CornerType {
+  "nw" = 0,
+  "ne" = 1,
+  "se" = 2,
+  "sw" = 3
+}

package/dist/types/components/dnn-image-cropper/dnn-image-cropper.d.ts

@@ -1,61 +1,61 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * Allows cropping an image in-browser with the option to enforce a specific final size.
- * All computation happens in the browser and the final image is emmited
- * in an event that has a data-url of the image.
- */
-export declare class DnnImageCropper {
-  /** Sets the desired final image width. */
-  width: number;
-  /** Sets the desired final image height. */
-  height: number;
-  /** Can be used to customize controls text.
-   * Some values support tokens, see default values for examples.
-  */
-  resx: {
-    capture: string;
-    dragAndDropFile: string;
-    or: string;
-    takePicture: string;
-    uploadFile: string;
-    imageTooSmall: string;
-    modalCloseText: string;
-  };
-  /** Sets the output quality of the corpped image (number between 0 and 1). */
-  quality: number;
-  /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */
-  preventUndersized: boolean;
-  /** When the image crop changes, emits the dataurl for the new cropped image. */
-  imageCropChanged: EventEmitter<string>;
-  view: IComponentInterfaces["View"];
-  private host;
-  private hasPictureView;
-  private noPictureView;
-  private canvas;
-  private image;
-  private crop;
-  private previousTouch;
-  private imageTooSmallModal;
-  componentDidLoad(): void;
-  private setView;
-  private initCrop;
-  private setImage;
-  private handleNewFile;
-  private handleCropMouseDown;
-  private handleImageCropFinished;
-  private emitImage;
-  private generateCroppedImage;
-  private handleNwMouseMove;
-  private handleNeMouseMove;
-  private handleSeMouseMove;
-  private handleSwMouseMove;
-  private handleCornerDrag;
-  private getCornerLeftTop;
-  private handleCropDrag;
-  private isMouseStillInTarget;
-  render(): any;
-}
-interface IComponentInterfaces {
-  View: "noPictureView" | "takingPictureView" | "hasPictureView" | "hasCroppedPictureView";
-}
-export {};
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Allows cropping an image in-browser with the option to enforce a specific final size.
+ * All computation happens in the browser and the final image is emmited
+ * in an event that has a data-url of the image.
+ */
+export declare class DnnImageCropper {
+  /** Sets the desired final image width. */
+  width: number;
+  /** Sets the desired final image height. */
+  height: number;
+  /** Can be used to customize controls text.
+   * Some values support tokens, see default values for examples.
+  */
+  resx: {
+    capture: string;
+    dragAndDropFile: string;
+    or: string;
+    takePicture: string;
+    uploadFile: string;
+    imageTooSmall: string;
+    modalCloseText: string;
+  };
+  /** Sets the output quality of the corpped image (number between 0 and 1). */
+  quality: number;
+  /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */
+  preventUndersized: boolean;
+  /** When the image crop changes, emits the dataurl for the new cropped image. */
+  imageCropChanged: EventEmitter<string>;
+  view: IComponentInterfaces["View"];
+  private host;
+  private hasPictureView;
+  private noPictureView;
+  private canvas;
+  private image;
+  private crop;
+  private previousTouch;
+  private imageTooSmallModal;
+  componentDidLoad(): void;
+  private setView;
+  private initCrop;
+  private setImage;
+  private handleNewFile;
+  private handleCropMouseDown;
+  private handleImageCropFinished;
+  private emitImage;
+  private generateCroppedImage;
+  private handleNwMouseMove;
+  private handleNeMouseMove;
+  private handleSeMouseMove;
+  private handleSwMouseMove;
+  private handleCornerDrag;
+  private getCornerLeftTop;
+  private handleCropDrag;
+  private isMouseStillInTarget;
+  render(): any;
+}
+interface IComponentInterfaces {
+  View: "noPictureView" | "takingPictureView" | "hasPictureView" | "hasCroppedPictureView";
+}
+export {};

package/dist/types/components/dnn-image-cropper/dnn-image-cropper.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/web-components";
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;
+export declare const ImageCropper: any;

package/dist/types/components/dnn-modal/dnn-modal.d.ts

@@ -1,35 +1,38 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export declare class DnnModal {
-  el: HTMLDnnModalElement;
-  /**
-   * Pass false to remove the backdrop click auto-dismiss feature.
-   */
-  backdropDismiss: boolean;
-  /**
-   * Optionally pass the aria-label text for the close button.
-   * Defaults to "Close modal" if not provided.
-   */
-  closeText?: string;
-  /**
-   * Optionally you can pass false to not show the close button.
-   * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop
-   * or provide your own dismissal logic in the modal content.
-   */
-  showCloseButton?: boolean;
-  visible: boolean;
-  /**
-   * Shows the modal
-   */
-  show(): Promise<void>;
-  /**
-   * Hides the modal
-   */
-  hide(): Promise<void>;
-  /**
-   * Fires when the modal is dismissed.
-   */
-  dismissed: EventEmitter;
-  private handleDismiss;
-  private handleBackdropClick;
-  render(): any;
-}
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class DnnModal {
+  el: HTMLDnnModalElement;
+  /**
+   * Pass false to remove the backdrop click auto-dismiss feature.
+   */
+  backdropDismiss: boolean;
+  /**
+   * Optionally pass the aria-label text for the close button.
+   * Defaults to "Close modal" if not provided.
+   */
+  closeText?: string;
+  /**
+   * Optionally you can pass false to not show the close button.
+   * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop
+   * or provide your own dismissal logic in the modal content.
+   */
+  showCloseButton?: boolean;
+  /**
+   * Reflects the visible state of the modal.
+   */
+  visible: boolean;
+  /**
+   * Shows the modal
+   */
+  show(): Promise<void>;
+  /**
+   * Hides the modal
+   */
+  hide(): Promise<void>;
+  /**
+   * Fires when the modal is dismissed.
+   */
+  dismissed: EventEmitter;
+  private handleDismiss;
+  private handleBackdropClick;
+  render(): any;
+}