@limetech/lime-elements 37.45.1 → 37.46.0

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

@@ -0,0 +1,126 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Languages } from '../date-picker/date.types';
+import { ListItem } from '../list/list-item.types';
+import { OfficeViewer } from './file-viewer.types';
+/**
+ * This is a smart component that automatically detects
+ * the most common file types such as image, audio, video, and text,
+ * and properly displays them in the browser.
+ * The component is also capable to render the most common office files.
+ *
+ * :::note
+ * Image files will always be contained in their containers, which means
+ * they automatically increase or decrease in size to fill their containing box
+ * whilst preserving their aspect-ratio.
+ *
+ * Text and PDF files will also always respect the width and height of the
+ * container in which the `limel-file-viewer` is loaded.
+ * :::
+ *
+ * For some file types such as text and images, the component will display a
+ * download button and a button to open the file in a new browser tab.
+ * This will allow users to preview the file in a fullscreen mode with the
+ * browser and take advantage of for example native zooming and panning
+ * functionalities.
+ *
+ * @exampleComponent limel-example-file-viewer
+ * @exampleComponent limel-example-file-viewer-office
+ * @exampleComponent limel-example-file-viewer-filename
+ * @exampleComponent limel-example-file-viewer-inbuilt-actions
+ * @exampleComponent limel-example-file-viewer-custom-actions
+ * @exampleComponent limel-example-file-viewer-with-picker
+ * @private
+ */
+export declare class FileViewer {
+  /**
+   * Link to the file
+   */
+  url: string;
+  /**
+   * The name of the file that must also contains its extension.
+   * This overrides the filename that the `url` ends with.
+   * Useful when the `url` does not contain the filename.
+   * When specified, the `filename` will be used as filename of
+   * the downloaded file.
+   */
+  filename?: string;
+  /**
+   * An optional alternative text, mainly for assistive technologies and screen readers.
+   * It is used for only image files, as an `alt` attribute.
+   * Should optimally hold a description of the image,
+   * which is also displayed on the page if the image can't be loaded for some reason.
+   */
+  alt?: string;
+  /**
+   * Displays a button that allows the user to view the file
+   * in fullscreen mode.
+   * Not displayed for office files!
+   */
+  allowFullscreen?: boolean;
+  /**
+   * Displays a button that allows the user to open the file
+   * in a new browser tab.
+   * Not displayed for office files!
+   */
+  allowOpenInNewTab?: boolean;
+  /**
+   * Displays a button that allows the user to download the file.
+   * Note that due to the browser's security policies,
+   * the file should be hosted on the same domain
+   * for the download button to work properly.
+   * Not displayed for office files!
+   */
+  allowDownload?: boolean;
+  /**
+   * Defines the localization for translations.
+   */
+  language: Languages;
+  /**
+   * Defines the third-party viewer that should be used to render
+   * the content of office files, such as word processing documents,
+   * presentations, or spreadsheets.
+   */
+  officeViewer: OfficeViewer;
+  /**
+   * An array of custom actions that can be displayed
+   * as an action menu on the file which is being displayed.
+   */
+  actions: ListItem[];
+  /**
+   * Emitted when a custom action is selected from the action menu.
+   */
+  action: EventEmitter<ListItem>;
+  HostElement: HTMLLimelFileViewerElement;
+  private fullscreen;
+  private isFullscreen;
+  private fileType;
+  /**
+   * True while the file is being loaded.
+   */
+  private loading;
+  private fileUrl;
+  constructor();
+  componentWillLoad(): Promise<void>;
+  render(): any;
+  protected watchUrl(newUrl: string, oldUrl: string): Promise<void>;
+  private renderFileViewer;
+  private renderPdf;
+  private renderImage;
+  private renderVideo;
+  private renderAudio;
+  private renderText;
+  private renderOffice;
+  private isOfficeFileAccessibleViaURL;
+  private getOfficeViewerUrl;
+  private renderNoFileSupportMessage;
+  private renderButtons;
+  private renderToggleFullscreenButton;
+  private renderDownloadButton;
+  private renderOpenInNewTabButton;
+  private renderActionMenu;
+  private createURL;
+  private handleToggleFullscreen;
+  private emitOnAction;
+  private getTranslation;
+}
+//# sourceMappingURL=file-viewer.d.ts.map

package/dist/types/components/progress-flow/progress-flow-item/progress-flow-item.d.ts

@@ -0,0 +1,36 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { FlowItem } from '../progress-flow.types';
+/**
+ * @private
+ */
+export declare class ProgressFlowItem {
+  element: HTMLLimelProgressFlowItemElement;
+  /**
+   * The flow item that should be rendered
+   */
+  item: FlowItem;
+  /**
+   * True if the flow item should be disabled
+   */
+  disabled: boolean;
+  /**
+   * True if the flow item should be readonly
+   */
+  readonly: boolean;
+  /**
+   * True for current step
+   */
+  currentStep: boolean;
+  /**
+   * Fired when clicking on the flow item
+   */
+  interact: EventEmitter<void>;
+  render(): any[];
+  private isDisabled;
+  private getToolTipText;
+  private handleClick;
+  private renderSecondaryText;
+  private renderIcon;
+  private renderDivider;
+}
+//# sourceMappingURL=progress-flow-item.d.ts.map

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

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { FlowItem } from './progress-flow.types';
+/**
+ * @exampleComponent limel-example-progress-flow-basic
+ * @exampleComponent limel-example-progress-flow-secondary-text
+ * @exampleComponent limel-example-progress-flow-disabled-step
+ * @exampleComponent limel-example-progress-flow-colors
+ * @exampleComponent limel-example-progress-flow-colors-css
+ * @exampleComponent limel-example-progress-flow-off-progress-steps
+ * @exampleComponent limel-example-progress-flow-narrow
+ */
+export declare class ProgressFlow {
+  element: HTMLLimelProgressFlowElement;
+  /**
+   * What flow items to render
+   */
+  flowItems: FlowItem[];
+  /**
+   * Set to `true` to disable the progress flow.
+   * Use `disabled` to indicate that the component can normally be interacted
+   * with, but is currently disabled. This tells the user that if certain
+   * requirements are met, the field may become enabled again.
+   */
+  disabled: boolean;
+  /**
+   * Disables the progress flow when `true`.
+   * This does not visualize the component that much differently.
+   * But since the component does not provide any feedback that users can
+   * interact with the component, it makes it perfect for illustrative and
+   * informative porpuses.
+   */
+  readonly: boolean;
+  /**
+   * Fired when a new value has been selected from the progress flow
+   */
+  change: EventEmitter<FlowItem>;
+  private selectedItemIndex;
+  componentDidRender(): void;
+  componentDidLoad(): void;
+  render(): any[][];
+  private renderRegularFlowItem;
+  private renderEndPhaseItem;
+  private handleFlowItemClick;
+  private getItemStyle;
+  private scrollToSelectedItem;
+  private getElementForSelectedItem;
+  private triggerIconColorWarning;
+}
+//# sourceMappingURL=progress-flow.d.ts.map

package/dist/types/components/text-editor/link-menu/editor-link-menu.d.ts

@@ -0,0 +1,47 @@
+import { EditorTextLink } from '../prosemirror-adapter/menu/types';
+import { Languages } from '../../date-picker/date.types';
+/**
+ * This component is a menu for editing a link in the text editor.
+ * It allows the user to input the text and url for the link.
+ * @beta
+ * @private
+ */
+export declare class TextEditorLinkMenu {
+  /**
+   * The link
+   */
+  link: EditorTextLink;
+  /**
+   * Defines the language for translations.
+   * Will translate the translatable strings on the components.
+   */
+  language: Languages;
+  /**
+   * Open state of the dialog
+   */
+  isOpen: boolean;
+  /**
+   * Emitted when the menu is closed from inside the component.
+   * (*Not* emitted when the consumer sets the `open`-property to `false`.)
+   */
+  private cancel;
+  /**
+   * Emitted when the menu is saved from inside the component.
+   */
+  private save;
+  /**
+   * Emitted when the user inputs new values for the link
+   */
+  private linkChange;
+  private invalidLink;
+  render(): any[];
+  private getTranslation;
+  private validateLink;
+  private handleCancel;
+  private handleSave;
+  private handleLinkInputAction;
+  private handleLinkTitleChange;
+  private handleLinkValueChange;
+  private emitLinkChange;
+}
+//# sourceMappingURL=editor-link-menu.d.ts.map

package/dist/types/components/text-editor/prosemirror-adapter/menu/menu-commands.d.ts

@@ -1,13 +1,15 @@
 import { Schema } from 'prosemirror-model';
 import { Command, EditorState } from 'prosemirror-state';
-import { EditorMenuTypes } from './types';
+import { EditorMenuTypes, EditorTextLink } from './types';
 export interface CommandWithActive extends Command {
   active?: (state: EditorState) => boolean;
 }
+export declare const isExternalLink: (url: string) => boolean;
+export declare const isValidUrl: (text: string) => boolean;
 export declare class MenuCommandFactory {
   private schema;
   constructor(schema: Schema);
-  getCommand(mark: EditorMenuTypes, url?: string): CommandWithActive;
+  getCommand(mark: EditorMenuTypes, link?: EditorTextLink): CommandWithActive;
   buildKeymap(): {
     'Mod-B': CommandWithActive;
     'Mod-I': CommandWithActive;
@@ -17,6 +19,7 @@ export declare class MenuCommandFactory {
     'Mod-Shift-X': CommandWithActive;
     'Mod-`': CommandWithActive;
     'Mod-Shift-C': CommandWithActive;
+    'Mod-v': Command;
   };
 }
 //# sourceMappingURL=menu-commands.d.ts.map

package/dist/types/components/text-editor/prosemirror-adapter/menu/types.d.ts

@@ -0,0 +1,49 @@
+/**
+ * The `EditorMenuType` type is used to specify the type of menu items that can be added to the editor toolbar.
+ * Each one represents a different type to be used for creating the prosemirror commands relevant to the button.
+ * The values correspond to the types that can be used with the `prosemirror-commands` library.
+ * @beta
+ */
+export declare const EditorMenuTypes: {
+  Bold: string;
+  Italic: string;
+  Blockquote: string;
+  HeaderLevel1: string;
+  HeaderLevel2: string;
+  HeaderLevel3: string;
+  Link: string;
+  OrderedList: string;
+  BulletList: string;
+  Strikethrough: string;
+  Code: string;
+  CodeBlock: string;
+};
+export type EditorMenuTypes = (typeof EditorMenuTypes)[keyof typeof EditorMenuTypes];
+/**
+ * `LevelMapping` is used to map string identifiers to numerical header levels.
+ * It provides a way to represent different levels of headings in ProseMirror commands.
+ *
+ * The `Heading` identifier is not a valid level and is used to identify the node type.
+ * The numerical values are used for creating ProseMirror commands to set the level of a heading node in the editor.
+ * @beta
+ */
+export declare const LevelMapping: {
+  Heading: string;
+  one: number;
+  two: number;
+  three: number;
+};
+export type LevelMapping = (typeof LevelMapping)[keyof typeof LevelMapping];
+export type ProseMirrorAdapterElementWithFocus = HTMLLimelProsemirrorAdapterElement & {
+  setFocus: () => void;
+};
+/**
+ * The `EditorTextLink` type is used to represent a link in the editor.
+ * @beta
+ * @private
+ */
+export type EditorTextLink = {
+  text?: string;
+  href: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types/components/text-editor/prosemirror-adapter/plugins/link-plugin.d.ts

@@ -0,0 +1,9 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+export declare const linkPluginKey: PluginKey<any>;
+export type UpdateLinkCallback = (text: string, href: string) => void;
+export interface EditorLinkMenuEventDetail {
+  href: string;
+  text: string;
+}
+export declare const createLinkPlugin: (updateLinkCallback?: UpdateLinkCallback) => Plugin<any>;
+//# sourceMappingURL=link-plugin.d.ts.map

package/dist/types/components/text-editor/prosemirror-adapter/prosemirror-adapter.d.ts

@@ -1,4 +1,3 @@
-import { PluginKey } from 'prosemirror-state';
 import { Languages } from '../../date-picker/date.types';
 /**
  * The ProseMirror adapter offers a rich text editing experience with markdown support.
@@ -25,20 +24,29 @@ export declare class ProsemirrorAdapter {
    */
   language: Languages;
   private host;
+  private portalId;
   private view;
   private actionBarItems;
+  private link;
+  /**
+   * Open state of the dialog
+   */
+  isLinkMenuOpen: boolean;
   private menuCommandFactory;
   private schema;
   private contentConverter;
+  private suppressChangeEvent;
   /**
    * Dispatched when a change is made to the editor
    */
   private change;
+  constructor();
+  private actionBarPluginKey;
   protected watchValue(newValue: string): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
-  render(): any[];
   disconnectedCallback(): void;
+  render(): any[];
   private setupContentConverter;
   private getActionBarItems;
   private getTranslatedItem;
@@ -49,10 +57,14 @@ export declare class ProsemirrorAdapter {
   private updateView;
   private handleTransaction;
   private handleActionBarItem;
+  private handleCancelLinkMenu;
+  private handleSaveLinkMenu;
+  private handleLinkChange;
   private dispatchMenuCommand;
   setFocus(): void;
-  actionBarPluginKey: PluginKey<any>;
   private updateActionBarItems;
   private createMenuStateTrackingPlugin;
+  private handleNewLinkSelection;
+  private handleOpenLinkMenu;
 }
 //# sourceMappingURL=prosemirror-adapter.d.ts.map

package/dist/types/components.d.ts

@@ -42,6 +42,7 @@ import { SpinnerSize } from "./components/spinner/spinner.types";
 import { Tab } from "./components/tab-bar/tab.types";
 import { Column, ColumnAggregate, ColumnSorter, TableParams } from "./components/table/table.types";
 import { Layout } from "./components/table/layout";
+import { EditorTextLink } from "./components/text-editor/prosemirror-adapter/menu/types";
 export { ActionBarItem } from "./components/action-bar/action-bar.types";
 export { ListItem, ListSeparator } from "./components/list/list-item.types";
 export { MenuItem, MenuSearcher, OpenDirection, SurfaceWidth } from "./components/menu/menu.types";
@@ -79,6 +80,7 @@ export { SpinnerSize } from "./components/spinner/spinner.types";
 export { Tab } from "./components/tab-bar/tab.types";
 export { Column, ColumnAggregate, ColumnSorter, TableParams } from "./components/table/table.types";
 export { Layout } from "./components/table/layout";
+export { EditorTextLink } from "./components/text-editor/prosemirror-adapter/menu/types";
 export namespace Components {
     /**
      * An action bar is a user interface element commonly found in software applications and websites.
@@ -2565,6 +2567,26 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * This component is a menu for editing a link in the text editor.
+     * It allows the user to input the text and url for the link.
+     * @beta 
+     * @private 
+     */
+    interface LimelTextEditorLinkMenu {
+        /**
+          * Open state of the dialog
+         */
+        "isOpen": boolean;
+        /**
+          * Defines the language for translations. Will translate the translatable strings on the components.
+         */
+        "language": Languages;
+        /**
+          * The link
+         */
+        "link": EditorTextLink;
+    }
     /**
      * A tooltip can be used to display a descriptive text for any element.
      * The displayed content must be a brief and supplemental string of text,
@@ -2809,6 +2831,10 @@ export interface LimelTextEditorCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelTextEditorElement;
 }
+export interface LimelTextEditorLinkMenuCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLimelTextEditorLinkMenuElement;
+}
 declare global {
     /**
      * An action bar is a user interface element commonly found in software applications and websites.
@@ -4095,6 +4121,18 @@ declare global {
         prototype: HTMLLimelTextEditorElement;
         new (): HTMLLimelTextEditorElement;
     };
+    /**
+     * This component is a menu for editing a link in the text editor.
+     * It allows the user to input the text and url for the link.
+     * @beta 
+     * @private 
+     */
+    interface HTMLLimelTextEditorLinkMenuElement extends Components.LimelTextEditorLinkMenu, HTMLStencilElement {
+    }
+    var HTMLLimelTextEditorLinkMenuElement: {
+        prototype: HTMLLimelTextEditorLinkMenuElement;
+        new (): HTMLLimelTextEditorLinkMenuElement;
+    };
     /**
      * A tooltip can be used to display a descriptive text for any element.
      * The displayed content must be a brief and supplemental string of text,
@@ -4214,6 +4252,7 @@ declare global {
         "limel-tab-panel": HTMLLimelTabPanelElement;
         "limel-table": HTMLLimelTableElement;
         "limel-text-editor": HTMLLimelTextEditorElement;
+        "limel-text-editor-link-menu": HTMLLimelTextEditorLinkMenuElement;
         "limel-tooltip": HTMLLimelTooltipElement;
         "limel-tooltip-content": HTMLLimelTooltipContentElement;
     }
@@ -6952,6 +6991,38 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * This component is a menu for editing a link in the text editor.
+     * It allows the user to input the text and url for the link.
+     * @beta 
+     * @private 
+     */
+    interface LimelTextEditorLinkMenu {
+        /**
+          * Open state of the dialog
+         */
+        "isOpen"?: boolean;
+        /**
+          * Defines the language for translations. Will translate the translatable strings on the components.
+         */
+        "language"?: Languages;
+        /**
+          * The link
+         */
+        "link"?: EditorTextLink;
+        /**
+          * Emitted when the menu is closed from inside the component. (*Not* emitted when the consumer sets the `open`-property to `false`.)
+         */
+        "onCancel"?: (event: LimelTextEditorLinkMenuCustomEvent<void>) => void;
+        /**
+          * Emitted when the user inputs new values for the link
+         */
+        "onLinkChange"?: (event: LimelTextEditorLinkMenuCustomEvent<EditorTextLink>) => void;
+        /**
+          * Emitted when the menu is saved from inside the component.
+         */
+        "onSave"?: (event: LimelTextEditorLinkMenuCustomEvent<void>) => void;
+    }
     /**
      * A tooltip can be used to display a descriptive text for any element.
      * The displayed content must be a brief and supplemental string of text,
@@ -7095,6 +7166,7 @@ declare namespace LocalJSX {
         "limel-tab-panel": LimelTabPanel;
         "limel-table": LimelTable;
         "limel-text-editor": LimelTextEditor;
+        "limel-text-editor-link-menu": LimelTextEditorLinkMenu;
         "limel-tooltip": LimelTooltip;
         "limel-tooltip-content": LimelTooltipContent;
     }
@@ -8073,6 +8145,13 @@ declare module "@stencil/core" {
              * @private 
              */
             "limel-text-editor": LocalJSX.LimelTextEditor & JSXBase.HTMLAttributes<HTMLLimelTextEditorElement>;
+            /**
+             * This component is a menu for editing a link in the text editor.
+             * It allows the user to input the text and url for the link.
+             * @beta 
+             * @private 
+             */
+            "limel-text-editor-link-menu": LocalJSX.LimelTextEditorLinkMenu & JSXBase.HTMLAttributes<HTMLLimelTextEditorLinkMenuElement>;
             /**
              * A tooltip can be used to display a descriptive text for any element.
              * The displayed content must be a brief and supplemental string of text,

package/dist/types/translations/da.d.ts

@@ -1,5 +1,7 @@
 declare const _default: {
   remove: string;
+  save: string;
+  cancel: string;
   'callout.note': string;
   'callout.important': string;
   'callout.tip': string;
@@ -26,6 +28,8 @@ declare const _default: {
   'editor-menu.numbered-list': string;
   'editor-menu.blockquote': string;
   'editor-menu.link': string;
+  'editor-link-menu.text': string;
+  'editor-link-menu.link': string;
 };
 export default _default;
 //# sourceMappingURL=da.d.ts.map

package/dist/types/translations/en.d.ts

@@ -1,5 +1,7 @@
 declare const _default: {
   remove: string;
+  save: string;
+  cancel: string;
   'callout.note': string;
   'callout.important': string;
   'callout.tip': string;
@@ -27,6 +29,8 @@ declare const _default: {
   'editor-menu.numbered-list': string;
   'editor-menu.blockquote': string;
   'editor-menu.link': string;
+  'editor-link-menu.text': string;
+  'editor-link-menu.link': string;
 };
 export default _default;
 //# sourceMappingURL=en.d.ts.map

package/dist/types/translations/fi.d.ts

@@ -1,5 +1,7 @@
 declare const _default: {
   remove: string;
+  save: string;
+  canceL: string;
   'callout.note': string;
   'callout.important': string;
   'callout.tip': string;
@@ -26,6 +28,8 @@ declare const _default: {
   'editor-menu.numbered-list': string;
   'editor-menu.blockquote': string;
   'editor-menu.link': string;
+  'editor-link-menu.text': string;
+  'editor-link-menu.link': string;
 };
 export default _default;
 //# sourceMappingURL=fi.d.ts.map

package/dist/types/translations/nl.d.ts

@@ -1,5 +1,7 @@
 declare const _default: {
   remove: string;
+  save: string;
+  cancel: string;
   'callout.note': string;
   'callout.important': string;
   'callout.tip': string;
@@ -26,6 +28,8 @@ declare const _default: {
   'editor-menu.numbered-list': string;
   'editor-menu.blockquote': string;
   'editor-menu.link': string;
+  'editor-link-menu.text': string;
+  'editor-link-menu.link': string;
 };
 export default _default;
 //# sourceMappingURL=nl.d.ts.map

package/dist/types/translations/no.d.ts

@@ -1,5 +1,7 @@
 declare const _default: {
   remove: string;
+  save: string;
+  cancel: string;
   'callout.note': string;
   'callout.important': string;
   'callout.tip': string;
@@ -26,6 +28,8 @@ declare const _default: {
   'editor-menu.numbered-list': string;
   'editor-menu.blockquote': string;
   'editor-menu.link': string;
+  'editor-link-menu.text': string;
+  'editor-link-menu.link': string;
 };
 export default _default;
 //# sourceMappingURL=no.d.ts.map

package/dist/types/translations/sv.d.ts

@@ -1,5 +1,7 @@
 declare const _default: {
   remove: string;
+  save: string;
+  cancel: string;
   'callout.note': string;
   'callout.important': string;
   'callout.tip': string;
@@ -27,6 +29,8 @@ declare const _default: {
   'editor-menu.numbered-list': string;
   'editor-menu.blockquote': string;
   'editor-menu.link': string;
+  'editor-link-menu.text': string;
+  'editor-link-menu.link': string;
 };
 export default _default;
 //# sourceMappingURL=sv.d.ts.map

package/dist/types/util/link-helper.d.ts

@@ -1,4 +1,5 @@
 export declare function getHref(value: string): string;
 export declare function getTarget(value: string): "_self" | "_blank";
 export declare function prependProtocol(input: string): string;
+export declare function hasKnownProtocol(input: string): boolean;
 //# sourceMappingURL=link-helper.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.45.1",
+  "version": "37.46.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^19.2.2",
-    "@microsoft/api-extractor": "^7.43.1",
+    "@microsoft/api-extractor": "^7.46.2",
     "@popperjs/core": "^2.11.8",
     "@rjsf/core": "^2.4.2",
     "@rollup/plugin-node-resolve": "^13.3.0",