@limetech/lime-elements 37.1.0-next.44 → 37.1.0-next.45

package/dist/types/components.d.ts

@@ -5,11 +5,15 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { Action as Action1, ActionBarItem, ActionPosition, ActionScrollBehavior, BreadcrumbsItem, Button, CalloutType, Chip, CircularProgressSize, ClosingActions, ColorScheme, Column, ColumnAggregate, ColumnSorter, DateType, DialogHeading, DockItem, FileInfo, FlexContainerAlign, FlexContainerDirection, FlexContainerJustify, FlowItem, FormError, IconSize, InfoTileProgress, InputType, Language, Languages, Link, ListItem, ListSeparator, ListType, MenuItem, MenuListType, OpenDirection, Option, Searcher, SpinnerSize, Tab, TableParams, ValidationError, ValidationStatus } from "./interface";
+import { Action as Action1, ActionBarItem, ActionPosition, ActionScrollBehavior, BreadcrumbsItem, Button, CalloutType, Chip, CircularProgressSize, ClosingActions, ColorScheme, Column, ColumnAggregate, ColumnSorter, DateType, DialogHeading, DockItem, FileInfo, FlexContainerAlign, FlexContainerDirection, FlexContainerJustify, FlowItem, FormError, IconSize, InfoTileProgress, InputType, Language, Languages, Link, ListItem as ListItem1, ListSeparator, ListType, MenuItem, MenuListType, OpenDirection, Option, Searcher, SpinnerSize, Tab, TableParams, ValidationError, ValidationStatus } from "./interface";
 import { Action } from "./components/collapsible-section/action";
+import { Languages as Languages1, ListItem } from "@limetech/lime-elements";
+import { OfficeViewer } from "./components/file-viewer/file-viewer.types";
 import { Layout } from "./components/table/layout";
-export { Action as Action1, ActionBarItem, ActionPosition, ActionScrollBehavior, BreadcrumbsItem, Button, CalloutType, Chip, CircularProgressSize, ClosingActions, ColorScheme, Column, ColumnAggregate, ColumnSorter, DateType, DialogHeading, DockItem, FileInfo, FlexContainerAlign, FlexContainerDirection, FlexContainerJustify, FlowItem, FormError, IconSize, InfoTileProgress, InputType, Language, Languages, Link, ListItem, ListSeparator, ListType, MenuItem, MenuListType, OpenDirection, Option, Searcher, SpinnerSize, Tab, TableParams, ValidationError, ValidationStatus } from "./interface";
+export { Action as Action1, ActionBarItem, ActionPosition, ActionScrollBehavior, BreadcrumbsItem, Button, CalloutType, Chip, CircularProgressSize, ClosingActions, ColorScheme, Column, ColumnAggregate, ColumnSorter, DateType, DialogHeading, DockItem, FileInfo, FlexContainerAlign, FlexContainerDirection, FlexContainerJustify, FlowItem, FormError, IconSize, InfoTileProgress, InputType, Language, Languages, Link, ListItem as ListItem1, ListSeparator, ListType, MenuItem, MenuListType, OpenDirection, Option, Searcher, SpinnerSize, Tab, TableParams, ValidationError, ValidationStatus } from "./interface";
 export { Action } from "./components/collapsible-section/action";
+export { Languages as Languages1, ListItem } from "@limetech/lime-elements";
+export { OfficeViewer } from "./components/file-viewer/file-viewer.types";
 export { Layout } from "./components/table/layout";
 export namespace Components {
     /**
@@ -450,8 +454,6 @@ export namespace Components {
         "value": number;
     }
     /**
-     * Currently this component support syntax highlighting for `javascript`,
-     * `json` and `typescript` formats.
      * @exampleComponent limel-example-code-editor
      * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
      * @exampleComponent limel-example-code-editor-fold-lint
@@ -787,6 +789,69 @@ export namespace Components {
          */
         "value": FileInfo;
     }
+    /**
+     * 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 
+     */
+    interface LimelFileViewer {
+        /**
+          * An array of custom actions that can be displayed as an action menu on the file which is being displayed.
+         */
+        "actions": ListItem[];
+        /**
+          * 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;
+        /**
+          * 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;
+        /**
+          * 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;
+        /**
+          * 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;
+        /**
+          * Defines the localization for translations.
+         */
+        "language": Languages1;
+        /**
+          * 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;
+        /**
+          * Link to the file
+         */
+        "url": string;
+    }
     /**
      * This component is internal and only supposed to be used by
      * the limel-date-picker. This component is needed in order for us
@@ -1289,7 +1354,7 @@ export namespace Components {
         /**
           * List of items to display
          */
-        "items": Array<ListItem | ListSeparator>;
+        "items": Array<ListItem1 | ListSeparator>;
         /**
           * By default, lists will display 3 lines of text, and then truncate the rest. Consumers can increase or decrease this number by specifying `maxLinesSecondaryText`. If consumer enters zero or negative numbers we default to 1; and if they type decimals we round up.
          */
@@ -1418,7 +1483,7 @@ export namespace Components {
         /**
           * Static actions that can be clicked by the user.
          */
-        "actions": Array<ListItem<Action1>>;
+        "actions": Array<ListItem1<Action1>>;
         /**
           * Whether badge icons should be used in the result list or not
          */
@@ -1470,7 +1535,7 @@ export namespace Components {
         /**
           * Currently selected value or values
          */
-        "value": ListItem<number | string> | Array<ListItem<number | string>>;
+        "value": ListItem1<number | string> | Array<ListItem1<number | string>>;
     }
     /**
      * A popover is an impermanent layer that is displayed on top of other content
@@ -2159,6 +2224,10 @@ export interface LimelFileCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelFileElement;
 }
+export interface LimelFileViewerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLimelFileViewerElement;
+}
 export interface LimelFlatpickrAdapterCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelFlatpickrAdapterElement;
@@ -2482,8 +2551,6 @@ declare global {
         new (): HTMLLimelCircularProgressElement;
     };
     /**
-     * Currently this component support syntax highlighting for `javascript`,
-     * `json` and `typescript` formats.
      * @exampleComponent limel-example-code-editor
      * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
      * @exampleComponent limel-example-code-editor-fold-lint
@@ -2647,6 +2714,37 @@ declare global {
         prototype: HTMLLimelFileElement;
         new (): HTMLLimelFileElement;
     };
+    /**
+     * 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 
+     */
+    interface HTMLLimelFileViewerElement extends Components.LimelFileViewer, HTMLStencilElement {
+    }
+    var HTMLLimelFileViewerElement: {
+        prototype: HTMLLimelFileViewerElement;
+        new (): HTMLLimelFileViewerElement;
+    };
     /**
      * This component is internal and only supposed to be used by
      * the limel-date-picker. This component is needed in order for us
@@ -3361,6 +3459,7 @@ declare global {
         "limel-dock": HTMLLimelDockElement;
         "limel-dock-button": HTMLLimelDockButtonElement;
         "limel-file": HTMLLimelFileElement;
+        "limel-file-viewer": HTMLLimelFileViewerElement;
         "limel-flatpickr-adapter": HTMLLimelFlatpickrAdapterElement;
         "limel-flex-container": HTMLLimelFlexContainerElement;
         "limel-form": HTMLLimelFormElement;
@@ -3853,8 +3952,6 @@ declare namespace LocalJSX {
         "value"?: number;
     }
     /**
-     * Currently this component support syntax highlighting for `javascript`,
-     * `json` and `typescript` formats.
      * @exampleComponent limel-example-code-editor
      * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
      * @exampleComponent limel-example-code-editor-fold-lint
@@ -4262,6 +4359,73 @@ declare namespace LocalJSX {
          */
         "value"?: FileInfo;
     }
+    /**
+     * 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 
+     */
+    interface LimelFileViewer {
+        /**
+          * An array of custom actions that can be displayed as an action menu on the file which is being displayed.
+         */
+        "actions"?: ListItem[];
+        /**
+          * 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;
+        /**
+          * 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;
+        /**
+          * 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;
+        /**
+          * 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;
+        /**
+          * Defines the localization for translations.
+         */
+        "language"?: Languages1;
+        /**
+          * 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;
+        /**
+          * Emitted when a custom action is selected from the action menu.
+         */
+        "onAction"?: (event: LimelFileViewerCustomEvent<ListItem>) => void;
+        /**
+          * Link to the file
+         */
+        "url"?: string;
+    }
     /**
      * This component is internal and only supposed to be used by
      * the limel-date-picker. This component is needed in order for us
@@ -4784,7 +4948,7 @@ declare namespace LocalJSX {
         /**
           * List of items to display
          */
-        "items"?: Array<ListItem | ListSeparator>;
+        "items"?: Array<ListItem1 | ListSeparator>;
         /**
           * By default, lists will display 3 lines of text, and then truncate the rest. Consumers can increase or decrease this number by specifying `maxLinesSecondaryText`. If consumer enters zero or negative numbers we default to 1; and if they type decimals we round up.
          */
@@ -4792,11 +4956,11 @@ declare namespace LocalJSX {
         /**
           * Fired when a new value has been selected from the list. Only fired if `type` is set to `selectable`, `radio` or `checkbox`.
          */
-        "onChange"?: (event: LimelListCustomEvent<ListItem | ListItem[]>) => void;
+        "onChange"?: (event: LimelListCustomEvent<ListItem1 | ListItem1[]>) => void;
         /**
           * Fired when an action has been selected from the action menu of a list item
          */
-        "onSelect"?: (event: LimelListCustomEvent<ListItem | ListItem[]>) => void;
+        "onSelect"?: (event: LimelListCustomEvent<ListItem1 | ListItem1[]>) => void;
         /**
           * The type of the list, omit to get a regular list. Available types are: `selectable`: regular list with single selection. `radio`: radio button list with single selection. `checkbox`: checkbox list with multiple selection.
          */
@@ -4937,7 +5101,7 @@ declare namespace LocalJSX {
         /**
           * Static actions that can be clicked by the user.
          */
-        "actions"?: Array<ListItem<Action1>>;
+        "actions"?: Array<ListItem1<Action1>>;
         /**
           * Whether badge icons should be used in the result list or not
          */
@@ -4977,11 +5141,11 @@ declare namespace LocalJSX {
         /**
           * Fired when a new value has been selected from the picker
          */
-        "onChange"?: (event: LimelPickerCustomEvent<ListItem<number | string> | Array<ListItem<number | string>>>) => void;
+        "onChange"?: (event: LimelPickerCustomEvent<ListItem1<number | string> | Array<ListItem1<number | string>>>) => void;
         /**
           * Fired when clicking on a selected value
          */
-        "onInteract"?: (event: LimelPickerCustomEvent<ListItem<number | string>>) => void;
+        "onInteract"?: (event: LimelPickerCustomEvent<ListItem1<number | string>>) => void;
         /**
           * Set to `true` to disable adding and removing items, but allow interaction with existing items.
          */
@@ -5001,7 +5165,7 @@ declare namespace LocalJSX {
         /**
           * Currently selected value or values
          */
-        "value"?: ListItem<number | string> | Array<ListItem<number | string>>;
+        "value"?: ListItem1<number | string> | Array<ListItem1<number | string>>;
     }
     /**
      * A popover is an impermanent layer that is displayed on top of other content
@@ -5716,6 +5880,7 @@ declare namespace LocalJSX {
         "limel-dock": LimelDock;
         "limel-dock-button": LimelDockButton;
         "limel-file": LimelFile;
+        "limel-file-viewer": LimelFileViewer;
         "limel-flatpickr-adapter": LimelFlatpickrAdapter;
         "limel-flex-container": LimelFlexContainer;
         "limel-form": LimelForm;
@@ -5942,8 +6107,6 @@ declare module "@stencil/core" {
              */
             "limel-circular-progress": LocalJSX.LimelCircularProgress & JSXBase.HTMLAttributes<HTMLLimelCircularProgressElement>;
             /**
-             * Currently this component support syntax highlighting for `javascript`,
-             * `json` and `typescript` formats.
              * @exampleComponent limel-example-code-editor
              * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
              * @exampleComponent limel-example-code-editor-fold-lint
@@ -6057,6 +6220,32 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-file-composite
              */
             "limel-file": LocalJSX.LimelFile & JSXBase.HTMLAttributes<HTMLLimelFileElement>;
+            /**
+             * 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 
+             */
+            "limel-file-viewer": LocalJSX.LimelFileViewer & JSXBase.HTMLAttributes<HTMLLimelFileViewerElement>;
             /**
              * This component is internal and only supposed to be used by
              * the limel-date-picker. This component is needed in order for us

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

@@ -10,5 +10,11 @@ declare const _default: {
   'date-picker.year.heading': string;
   'chip-set.clear-all': string;
   'file.drag-and-drop-tips': string;
+  'file-viewer.message.unsupported-filetype': string;
+  'file-viewer.download': string;
+  'file-viewer.exit-fullscreen': string;
+  'file-viewer.open-in-fullscreen': string;
+  'file-viewer.open-in-new-tab': string;
+  'file-viewer.more-actions': string;
 };
 export default _default;

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

@@ -12,5 +12,11 @@ declare const _default: {
   'chip-set.remove-chip': string;
   'snackbar.dismiss': string;
   'file.drag-and-drop-tips': string;
+  'file-viewer.message.unsupported-filetype': string;
+  'file-viewer.download': string;
+  'file-viewer.exit-fullscreen': string;
+  'file-viewer.open-in-fullscreen': string;
+  'file-viewer.open-in-new-tab': string;
+  'file-viewer.more-actions': string;
 };
 export default _default;

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

@@ -10,5 +10,11 @@ declare const _default: {
   'date-picker.year.heading': string;
   'chip-set.clear-all': string;
   'file.drag-and-drop-tips': string;
+  'file-viewer.message.unsupported-filetype': string;
+  'file-viewer.download': string;
+  'file-viewer.exit-fullscreen': string;
+  'file-viewer.open-in-fullscreen': string;
+  'file-viewer.open-in-new-tab': string;
+  'file-viewer.more-actions': string;
 };
 export default _default;

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

@@ -10,5 +10,11 @@ declare const _default: {
   'date-picker.year.heading': string;
   'chip-set.clear-all': string;
   'file.drag-and-drop-tips': string;
+  'file-viewer.message.unsupported-filetype': string;
+  'file-viewer.download': string;
+  'file-viewer.exit-fullscreen': string;
+  'file-viewer.open-in-fullscreen': string;
+  'file-viewer.open-in-new-tab': string;
+  'file-viewer.more-actions': string;
 };
 export default _default;

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

@@ -10,5 +10,11 @@ declare const _default: {
   'date-picker.year.heading': string;
   'chip-set.clear-all': string;
   'file.drag-and-drop-tips': string;
+  'file-viewer.message.unsupported-filetype': string;
+  'file-viewer.download': string;
+  'file-viewer.exit-fullscreen': string;
+  'file-viewer.open-in-fullscreen': string;
+  'file-viewer.open-in-new-tab': string;
+  'file-viewer.more-actions': string;
 };
 export default _default;

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

@@ -12,5 +12,11 @@ declare const _default: {
   'chip-set.remove-chip': string;
   'snackbar.dismiss': string;
   'file.drag-and-drop-tips': string;
+  'file-viewer.message.unsupported-filetype': string;
+  'file-viewer.download': string;
+  'file-viewer.exit-fullscreen': string;
+  'file-viewer.open-in-fullscreen': string;
+  'file-viewer.open-in-new-tab': string;
+  'file-viewer.more-actions': string;
 };
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.1.0-next.44",
+  "version": "37.1.0-next.45",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.10",
     "@types/react": "^18.2.31",
-    "@types/react-dom": "^18.2.13",
+    "@types/react-dom": "^18.2.14",
     "@types/tabulator-tables": "^4.9.4",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.62.0",