@limetech/lime-elements 36.3.1-next.2 → 36.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{dom-20826de0.js → dom-eb080f70.js} +0 -1
- package/dist/cjs/{format-c0047dfb.js → format-5b928cf3.js} +0 -1
- package/dist/cjs/limel-badge.cjs.entry.js +1 -1
- package/dist/cjs/limel-chip-set.cjs.entry.js +0 -6
- package/dist/cjs/limel-circular-progress_2.cjs.entry.js +1 -1
- package/dist/cjs/limel-form.cjs.entry.js +1 -20
- package/dist/cjs/limel-icon.cjs.entry.js +0 -2
- package/dist/cjs/limel-input-field.cjs.entry.js +0 -1
- package/dist/cjs/limel-list_2.cjs.entry.js +1 -5
- package/dist/cjs/limel-menu-list.cjs.entry.js +0 -4
- package/dist/cjs/limel-picker.cjs.entry.js +1 -10
- package/dist/cjs/limel-popover_4.cjs.entry.js +0 -1
- package/dist/cjs/limel-select.cjs.entry.js +1 -1
- package/dist/cjs/limel-snackbar.cjs.entry.js +1 -1
- package/dist/cjs/limel-tab-bar.cjs.entry.js +0 -1
- package/dist/cjs/limel-table.cjs.entry.js +0 -19
- package/dist/cjs/{multiple-8fab83eb.js → multiple-2af83b6d.js} +0 -1
- package/dist/collection/components/badge/badge.js +0 -1
- package/dist/collection/components/badge/format.js +0 -1
- package/dist/collection/components/button-group/button-group.js +0 -1
- package/dist/collection/components/callout/callout.js +0 -1
- package/dist/collection/components/chip-set/chip-set-input-helpers.js +0 -1
- package/dist/collection/components/chip-set/chip-set.js +0 -5
- package/dist/collection/components/circular-progress/circular-progress.js +0 -1
- package/dist/collection/components/code-editor/code-editor.js +1 -2
- package/dist/collection/components/color-picker/color-picker.js +0 -1
- package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.js +0 -1
- package/dist/collection/components/dialog/dialog.js +0 -1
- package/dist/collection/components/file/file.js +2 -3
- package/dist/collection/components/flex-container/flex-container.js +0 -1
- package/dist/collection/components/form/adapters/base-adapter.js +0 -12
- package/dist/collection/components/form/fields/field-helpers.js +0 -3
- package/dist/collection/components/form/fields/schema-field.js +0 -3
- package/dist/collection/components/form/templates/common.js +0 -1
- package/dist/collection/components/grid/grid.js +0 -1
- package/dist/collection/components/header/header.js +0 -1
- package/dist/collection/components/helper-line/helper-line.js +0 -1
- package/dist/collection/components/icon/icon.js +0 -2
- package/dist/collection/components/info-tile/info-tile.js +0 -1
- package/dist/collection/components/input-field/input-field.js +0 -1
- package/dist/collection/components/list/list-renderer.js +0 -4
- package/dist/collection/components/menu-list/menu-list-renderer.js +0 -4
- package/dist/collection/components/picker/picker.js +0 -9
- package/dist/collection/components/popover/popover.js +0 -2
- package/dist/collection/components/portal/contains.js +0 -1
- package/dist/collection/components/portal/portal.js +10 -11
- package/dist/collection/components/shortcut/shortcut.js +0 -1
- package/dist/collection/components/snackbar/snackbar.js +26 -3
- package/dist/collection/components/split-button/split-button.js +0 -1
- package/dist/collection/components/tab-bar/tab-bar.js +1 -2
- package/dist/collection/components/tab-bar/tabs.js +0 -1
- package/dist/collection/components/tab-panel/tab-panel.js +0 -1
- package/dist/collection/components/table/columns.js +0 -9
- package/dist/collection/components/table/element-pool.js +0 -2
- package/dist/collection/components/table/selection.js +0 -4
- package/dist/collection/components/table/table-selection.js +0 -4
- package/dist/collection/components/tooltip/tooltip-content.js +0 -1
- package/dist/collection/components/tooltip/tooltip.js +0 -1
- package/dist/collection/global/icon-cache.js +0 -1
- package/dist/collection/util/dom.js +0 -1
- package/dist/collection/util/multiple.js +0 -1
- package/dist/esm/{dom-0f79cbe7.js → dom-2fe617e7.js} +0 -1
- package/dist/esm/{format-a0e2d949.js → format-c76733cb.js} +0 -1
- package/dist/esm/limel-badge.entry.js +1 -1
- package/dist/esm/limel-chip-set.entry.js +0 -6
- package/dist/esm/limel-circular-progress_2.entry.js +1 -1
- package/dist/esm/limel-form.entry.js +1 -20
- package/dist/esm/limel-icon.entry.js +0 -2
- package/dist/esm/limel-input-field.entry.js +0 -1
- package/dist/esm/limel-list_2.entry.js +1 -5
- package/dist/esm/limel-menu-list.entry.js +0 -4
- package/dist/esm/limel-picker.entry.js +1 -10
- package/dist/esm/limel-popover_4.entry.js +0 -1
- package/dist/esm/limel-select.entry.js +1 -1
- package/dist/esm/limel-snackbar.entry.js +1 -1
- package/dist/esm/limel-tab-bar.entry.js +0 -1
- package/dist/esm/limel-table.entry.js +0 -19
- package/dist/esm/{multiple-254f4b61.js → multiple-0bd62427.js} +0 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-4c9ce3d7.entry.js → p-5ab179b4.entry.js} +1 -1
- package/dist/lime-elements/{p-05d88196.entry.js → p-727fd4ea.entry.js} +2 -2
- package/dist/lime-elements/{p-8178b348.entry.js → p-8a2d1761.entry.js} +1 -1
- package/dist/lime-elements/{p-a88f2922.entry.js → p-8d3a9e2c.entry.js} +1 -1
- package/dist/lime-elements/{p-2600928f.entry.js → p-d034bbcf.entry.js} +1 -1
- package/dist/lime-elements/{p-2fd478df.entry.js → p-ef93fd3e.entry.js} +1 -1
- package/dist/lime-elements/{p-58e9df30.entry.js → p-f4cbcdcf.entry.js} +1 -1
- package/dist/types/components/badge/badge.d.ts +0 -1
- package/dist/types/components/badge/format.d.ts +0 -1
- package/dist/types/components/button-group/button-group.d.ts +0 -1
- package/dist/types/components/callout/callout.d.ts +0 -1
- package/dist/types/components/chip-set/chip-set-input-helpers.d.ts +0 -1
- package/dist/types/components/chip-set/chip-set.d.ts +0 -5
- package/dist/types/components/circular-progress/circular-progress.d.ts +0 -1
- package/dist/types/components/code-editor/code-editor.d.ts +1 -2
- package/dist/types/components/color-picker/color-picker.d.ts +0 -1
- package/dist/types/components/date-picker/flatpickr-adapter/flatpickr-adapter.d.ts +0 -1
- package/dist/types/components/dialog/dialog.d.ts +0 -1
- package/dist/types/components/file/file.d.ts +2 -3
- package/dist/types/components/flex-container/flex-container.d.ts +0 -1
- package/dist/types/components/form/adapters/base-adapter.d.ts +0 -11
- package/dist/types/components/form/fields/field-helpers.d.ts +0 -2
- package/dist/types/components/form/fields/schema-field.d.ts +0 -2
- package/dist/types/components/form/templates/common.d.ts +0 -1
- package/dist/types/components/grid/grid.d.ts +0 -1
- package/dist/types/components/header/header.d.ts +0 -1
- package/dist/types/components/helper-line/helper-line.d.ts +0 -1
- package/dist/types/components/icon/icon.d.ts +0 -2
- package/dist/types/components/info-tile/info-tile.d.ts +0 -1
- package/dist/types/components/input-field/input-field.d.ts +0 -1
- package/dist/types/components/list/list-renderer.d.ts +0 -4
- package/dist/types/components/menu-list/menu-list-renderer.d.ts +0 -4
- package/dist/types/components/picker/picker.d.ts +0 -9
- package/dist/types/components/picker/searcher.types.d.ts +0 -1
- package/dist/types/components/popover/popover.d.ts +0 -2
- package/dist/types/components/portal/contains.d.ts +0 -1
- package/dist/types/components/portal/portal.d.ts +10 -11
- package/dist/types/components/shortcut/shortcut.d.ts +0 -1
- package/dist/types/components/snackbar/snackbar.d.ts +23 -1
- package/dist/types/components/split-button/split-button.d.ts +0 -1
- package/dist/types/components/tab-bar/tab-bar.d.ts +1 -2
- package/dist/types/components/tab-bar/tabs.d.ts +0 -1
- package/dist/types/components/tab-panel/tab-panel.d.ts +0 -1
- package/dist/types/components/table/columns.d.ts +0 -7
- package/dist/types/components/table/element-pool.d.ts +0 -2
- package/dist/types/components/table/selection.d.ts +0 -4
- package/dist/types/components/table/table-selection.d.ts +0 -4
- package/dist/types/components/table/table.types.d.ts +0 -3
- package/dist/types/components/tooltip/tooltip-content.d.ts +0 -1
- package/dist/types/components/tooltip/tooltip.d.ts +0 -1
- package/dist/types/components.d.ts +1 -1
- package/dist/types/global/icon-cache.d.ts +0 -1
- package/dist/types/util/dom.d.ts +0 -1
- package/dist/types/util/multiple.d.ts +0 -1
- package/package.json +4 -4
- /package/dist/lime-elements/{p-f08f504b.js → p-0eabb204.js} +0 -0
- /package/dist/lime-elements/{p-0534b23b.js → p-5f020b3c.js} +0 -0
- /package/dist/lime-elements/{p-af8d4fe7.js → p-acf307d9.js} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r,h as e,H as a}from"./p-d4e788e1.js";import{a as o}from"./p-
|
|
1
|
+
import{r,h as e,H as a}from"./p-d4e788e1.js";import{a as o}from"./p-0eabb204.js";import"./p-eab67c09.js";const n=class{constructor(e){r(this,e),this.label=void 0}render(){return e(a,{title:this.labelIsLarge()?this.label:"",class:{"has-large-label":this.labelIsLarge()}},e("span",null,this.renderLabel()))}renderLabel(){return"number"==typeof this.label?o(this.label):this.label}labelIsLarge(){if("number"==typeof this.label&&this.label>999||"string"==typeof this.label&&this.label.length>6)return!0}};n.style=":host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}:host([hidden]){display:none}:host(limel-badge){--limel-min-badge-size:1rem;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;min-height:var(--limel-min-badge-size);min-width:var(--limel-min-badge-size)}span{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-font-family, Roboto, sans-serif);cursor:default;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:0.6875rem;line-height:var(--limel-min-badge-size);color:var(--badge-text-color, rgb(var(--contrast-1200)));border-radius:var(--limel-min-badge-size);max-height:var(--limel-min-badge-size);min-width:0.5rem;min-height:0.5rem;background-color:var(--badge-background-color, rgb(var(--contrast-500)))}span:not(:empty){min-width:var(--limel-min-badge-size);max-width:2.75rem;padding:0 0.28125rem}:host(.has-large-label) span{cursor:help}";export{n as limel_badge}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{r as t,c as i,h as s,g as e}from"./p-d4e788e1.js";import{i as n}from"./p-
|
|
1
|
+
import{r as t,c as i,h as s,g as e}from"./p-d4e788e1.js";import{i as n}from"./p-5f020b3c.js";import{T as h,E as r,a as o,b as l,c as a,d as c,A as u,e as d,f as p,g as m}from"./p-d7801e00.js";import{c as f}from"./p-6c094f3f.js";function v(t){return"function"==typeof t?t():t}function y(){var t={};return t.promise=new Promise((function(i,s){t.resolve=i,t.reject=s})),t}function g(t){var i=null,s=null,e=new Promise((function(t,e){i=t,s=e}));return t&&t.then((function(t){i&&i(t)}),(function(t){s&&s(t)})),{promise:e,resolve:function(t){i&&i(t)},reject:function(t){s&&s(t)},cancel:function(){i=null,s=null}}}
|
|
2
2
|
/*! *****************************************************************************
|
|
3
3
|
Copyright (c) Microsoft Corporation. All rights reserved.
|
|
4
4
|
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
|
@@ -28,7 +28,6 @@ import { Button } from '../button/button.types';
|
|
|
28
28
|
*
|
|
29
29
|
* Within the group, icon buttons will all have the same width, while each text button
|
|
30
30
|
* inherits its width from its content.
|
|
31
|
-
*
|
|
32
31
|
* @exampleComponent limel-example-button-group-icons
|
|
33
32
|
* @exampleComponent limel-example-button-group
|
|
34
33
|
* @exampleComponent limel-example-button-group-mix
|
|
@@ -15,7 +15,6 @@ import { Languages } from '@limetech/lime-elements';
|
|
|
15
15
|
* presented. In such cases, a callout should not be used as a static and
|
|
16
16
|
* constantly present element of the UI. Rather, it should be displayed when
|
|
17
17
|
* something unusual or remarkable demands the user's attention.
|
|
18
|
-
*
|
|
19
18
|
* @exampleComponent limel-example-callout-note
|
|
20
19
|
* @exampleComponent limel-example-callout-important
|
|
21
20
|
* @exampleComponent limel-example-callout-tip
|
|
@@ -120,13 +120,11 @@ export declare class ChipSet {
|
|
|
120
120
|
constructor();
|
|
121
121
|
/**
|
|
122
122
|
* Used to find out whether the chip-set is in edit mode.
|
|
123
|
-
*
|
|
124
123
|
* @returns {Promise<boolean>} `true` if the chip-set is in edit mode, `false` otherwise.
|
|
125
124
|
*/
|
|
126
125
|
getEditMode(): Promise<boolean>;
|
|
127
126
|
/**
|
|
128
127
|
* Used to set focus to the chip-set input field.
|
|
129
|
-
*
|
|
130
128
|
* @param {boolean} emptyInput if `true`, any text in the input is discarded
|
|
131
129
|
* @returns {Promise<void>} does not return anything, but methods have to be async
|
|
132
130
|
*/
|
|
@@ -134,7 +132,6 @@ export declare class ChipSet {
|
|
|
134
132
|
/**
|
|
135
133
|
* Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the
|
|
136
134
|
* consumer control when the input is emptied.
|
|
137
|
-
*
|
|
138
135
|
* @returns {Promise<void>} does not return anything, but methods have to be async
|
|
139
136
|
*/
|
|
140
137
|
emptyInput(): Promise<void>;
|
|
@@ -157,14 +154,12 @@ export declare class ChipSet {
|
|
|
157
154
|
private inputFieldOnChange;
|
|
158
155
|
/**
|
|
159
156
|
* Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible
|
|
160
|
-
*
|
|
161
157
|
* @returns {void}
|
|
162
158
|
*/
|
|
163
159
|
private handleTextFieldFocus;
|
|
164
160
|
/**
|
|
165
161
|
* Exit edit mode when the input element loses focus. This makes sure the input element does not take up any
|
|
166
162
|
* additional space when the user it not typing anything
|
|
167
|
-
*
|
|
168
163
|
* @returns {void}
|
|
169
164
|
*/
|
|
170
165
|
private handleInputBlur;
|
|
@@ -16,7 +16,6 @@ import { CircularProgressSize } from './circular-progress.types';
|
|
|
16
16
|
* Of course such numbers, if bigger than `maxValue` will be visualized as a
|
|
17
17
|
* full progress.
|
|
18
18
|
* :::
|
|
19
|
-
*
|
|
20
19
|
* @exampleComponent limel-example-circular-progress
|
|
21
20
|
* @exampleComponent limel-example-circular-progress-sizes
|
|
22
21
|
* @exampleComponent limel-example-circular-progress-props
|
|
@@ -9,8 +9,7 @@ import 'codemirror/addon/fold/foldgutter';
|
|
|
9
9
|
import 'codemirror/addon/fold/brace-fold';
|
|
10
10
|
/**
|
|
11
11
|
* Currently this component support syntax highlighting for `javascript`,
|
|
12
|
-
`json` and `typescript` formats.
|
|
13
|
-
*
|
|
12
|
+
* `json` and `typescript` formats.
|
|
14
13
|
* @exampleComponent limel-example-code-editor
|
|
15
14
|
* @exampleComponent limel-example-code-editor-readonly-with-line-numbers
|
|
16
15
|
* @exampleComponent limel-example-code-editor-fold-lint
|
|
@@ -10,7 +10,6 @@ import { FormComponent } from '../form/form.types';
|
|
|
10
10
|
* :::note
|
|
11
11
|
* Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
|
|
12
12
|
* :::
|
|
13
|
-
*
|
|
14
13
|
* @exampleComponent limel-example-color-picker
|
|
15
14
|
* @exampleComponent limel-example-color-picker-readonly
|
|
16
15
|
*/
|
|
@@ -4,7 +4,6 @@ import { DateType, Languages } from '@limetech/lime-elements';
|
|
|
4
4
|
* This component is internal and only supposed to be used by
|
|
5
5
|
* the limel-date-picker. This component is needed in order for us
|
|
6
6
|
* to render the flatpickr calendar in a portal.
|
|
7
|
-
*
|
|
8
7
|
* @private
|
|
9
8
|
*/
|
|
10
9
|
export declare class DatePickerCalendar {
|
|
@@ -15,7 +15,6 @@ import { DialogHeading, ClosingActions } from '@limetech/lime-elements';
|
|
|
15
15
|
* you should use the [DialogService](https://lundalogik.github.io/lime-web-components/versions/latest/#/api/dialog-service)
|
|
16
16
|
* from Lime Web Components to open dialogs in Lime CRM.
|
|
17
17
|
* :::
|
|
18
|
-
*
|
|
19
18
|
* @exampleComponent limel-example-dialog
|
|
20
19
|
* @exampleComponent limel-example-dialog-nested-close-events
|
|
21
20
|
* @exampleComponent limel-example-dialog-heading
|
|
@@ -10,7 +10,7 @@ import { FileInfo, Languages } from '@limetech/lime-elements';
|
|
|
10
10
|
* visual design including the upload icon hints end-users that this is not a
|
|
11
11
|
* normal input field like other fields in the form for example.
|
|
12
12
|
*
|
|
13
|
-
|
|
13
|
+
* :::important
|
|
14
14
|
* you need to use a descriptive `label` that clarifies the
|
|
15
15
|
* functionality of the file picker, and/or provides users with clear
|
|
16
16
|
* instructions.
|
|
@@ -26,8 +26,7 @@ import { FileInfo, Languages } from '@limetech/lime-elements';
|
|
|
26
26
|
* - Choose a file
|
|
27
27
|
*
|
|
28
28
|
* and similar phrases...
|
|
29
|
-
|
|
30
|
-
*
|
|
29
|
+
* :::
|
|
31
30
|
* @exampleComponent limel-example-file
|
|
32
31
|
* @exampleComponent limel-example-file-custom-icon
|
|
33
32
|
* @exampleComponent limel-example-file-accepted-types
|
|
@@ -3,7 +3,6 @@ import { FlexContainerAlign, FlexContainerDirection, FlexContainerJustify } from
|
|
|
3
3
|
* This component is deprecated and will be removed in a future version of
|
|
4
4
|
* Lime Elements. Please use CSS for your flexible container needs 🙂
|
|
5
5
|
* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
|
|
6
|
-
*
|
|
7
6
|
* @deprecated
|
|
8
7
|
* @private
|
|
9
8
|
* @slot - Container content
|
|
@@ -34,7 +34,6 @@ export declare class LimeElementsAdapter extends React.Component<any, any> {
|
|
|
34
34
|
/**
|
|
35
35
|
* Given a key a value set the value of property named `key` to
|
|
36
36
|
* the value of `value`
|
|
37
|
-
*
|
|
38
37
|
* @param {string} key The name of the property
|
|
39
38
|
* @param {any} value The value of the property
|
|
40
39
|
* @returns {void}
|
|
@@ -45,28 +44,24 @@ export declare class LimeElementsAdapter extends React.Component<any, any> {
|
|
|
45
44
|
*
|
|
46
45
|
* Events must be bound using this function otherwise events will bubble up too far
|
|
47
46
|
* since react events are different that native dom events
|
|
48
|
-
*
|
|
49
47
|
* @param {string} eventName the name of the event to get the handler for
|
|
50
48
|
* @returns {any} the handler to bind to the component for the event name
|
|
51
49
|
*/
|
|
52
50
|
getHandler(eventName: string): (event: any) => void;
|
|
53
51
|
/**
|
|
54
52
|
* Set events on the web component
|
|
55
|
-
*
|
|
56
53
|
* @param {object} events Event names to handlers
|
|
57
54
|
* @returns {void}
|
|
58
55
|
*/
|
|
59
56
|
setEvents(events: object): void;
|
|
60
57
|
/**
|
|
61
58
|
* Remove events on the web component
|
|
62
|
-
*
|
|
63
59
|
* @param {object} events Event names to handlers
|
|
64
60
|
* @returns {void}
|
|
65
61
|
*/
|
|
66
62
|
removeEvents(events: object): void;
|
|
67
63
|
/**
|
|
68
64
|
* Get the events to remove from the component
|
|
69
|
-
*
|
|
70
65
|
* @param {object} prevEvents previous events
|
|
71
66
|
* @param {object} nextEvents new events
|
|
72
67
|
* @returns {object} the events to remove
|
|
@@ -74,7 +69,6 @@ export declare class LimeElementsAdapter extends React.Component<any, any> {
|
|
|
74
69
|
getEventsToRemove(prevEvents: object, nextEvents: object): object;
|
|
75
70
|
/**
|
|
76
71
|
* Get the events to add to the component
|
|
77
|
-
*
|
|
78
72
|
* @param {object} prevEvents previous events
|
|
79
73
|
* @param {object} nextEvents new events
|
|
80
74
|
* @returns {object} the events to add
|
|
@@ -84,20 +78,17 @@ export declare class LimeElementsAdapter extends React.Component<any, any> {
|
|
|
84
78
|
* Detect if event handlers have changed. If they
|
|
85
79
|
* have changed, store them in the state, and remove and
|
|
86
80
|
* re-add the changed event handlers
|
|
87
|
-
*
|
|
88
81
|
* @returns {void}
|
|
89
82
|
*/
|
|
90
83
|
updateEvents(): void;
|
|
91
84
|
/**
|
|
92
85
|
* Get non primitive props. i.e. object, function, array, etc
|
|
93
|
-
*
|
|
94
86
|
* @param {object} elementProps the props to pass the webcomponet
|
|
95
87
|
* @returns {object} non primitive props
|
|
96
88
|
*/
|
|
97
89
|
getNonPrimitiveProps(elementProps: object): object;
|
|
98
90
|
/**
|
|
99
91
|
* Get primitive props. i.e. integer, boolean, etc
|
|
100
|
-
*
|
|
101
92
|
* @param {object} elementProps the props to pass the webcomponet
|
|
102
93
|
* @returns {object} primitive props
|
|
103
94
|
*/
|
|
@@ -106,7 +97,6 @@ export declare class LimeElementsAdapter extends React.Component<any, any> {
|
|
|
106
97
|
* Given the previous renders props and the next renders props,
|
|
107
98
|
* check if any of the property values have changed and return an
|
|
108
99
|
* object with only those values
|
|
109
|
-
*
|
|
110
100
|
* @param {object} prevNonPrimitiveProps the previous renders non primitive props
|
|
111
101
|
* @param {object} nextNonPrimitiveProps the current renders non primitive props
|
|
112
102
|
* @returns {object} the changed primitive props
|
|
@@ -119,7 +109,6 @@ export declare class LimeElementsAdapter extends React.Component<any, any> {
|
|
|
119
109
|
* instead of passing them as props the the React.createElement
|
|
120
110
|
* function because non primitive props are not passed properly to the web
|
|
121
111
|
* component via React.createElement
|
|
122
|
-
*
|
|
123
112
|
* @param {object} elementProps element props to set
|
|
124
113
|
* @returns {void}
|
|
125
114
|
*/
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* has any other fields that are dependent on it, and if so reset those dependent fields
|
|
4
4
|
* (by deleting them from the data so that their defaults are populated on the next rerender).
|
|
5
5
|
* Call onChange with the updated data
|
|
6
|
-
*
|
|
7
6
|
* @param {any} oldData The previous data before a data change event
|
|
8
7
|
* @param {any} newData The form data from a change event
|
|
9
8
|
* @param {object} schema The schema associated with the data
|
|
@@ -13,7 +12,6 @@
|
|
|
13
12
|
export declare const resetDependentFields: (oldData: any, newData: any, schema: any, rootSchema: any) => any;
|
|
14
13
|
/**
|
|
15
14
|
* Check if the schema is of type object and have no declared properties
|
|
16
|
-
*
|
|
17
15
|
* @param {any} schema the schema
|
|
18
16
|
* @returns {boolean} true if the schema is for a custom object
|
|
19
17
|
*/
|
|
@@ -4,7 +4,6 @@ import React from 'react';
|
|
|
4
4
|
import { FieldProps } from './types';
|
|
5
5
|
/**
|
|
6
6
|
* Create properties from the factory that is set on `limel-form`
|
|
7
|
-
*
|
|
8
7
|
* @param {*} formContext the form context
|
|
9
8
|
* @param {*} schema the schema for the current field
|
|
10
9
|
* @returns {object} the properties created by the factory
|
|
@@ -29,7 +28,6 @@ export declare class SchemaField extends React.Component<FieldProps> {
|
|
|
29
28
|
render(): React.FunctionComponentElement<any> | React.CElement<import("@rjsf/core/lib/components/fields/SchemaField").SchemaFieldProps<any>, JSONSchemaField>;
|
|
30
29
|
/**
|
|
31
30
|
* Gets the path to the current property within the schema
|
|
32
|
-
*
|
|
33
31
|
* @param {string} schemaId the id of the schema
|
|
34
32
|
* @returns {string[]} an array with the schema path for the current property
|
|
35
33
|
* @example
|
|
@@ -11,7 +11,6 @@ export declare function renderDescription(description: string): React.DetailedRe
|
|
|
11
11
|
* If an object has the key 'title' it will have priority, followed by the key 'name'.
|
|
12
12
|
* If 'title' nor 'name' is found, a required item will be considered.
|
|
13
13
|
* Otherwise the first occurrence of a nonempty string is chosen.
|
|
14
|
-
*
|
|
15
14
|
* @param {*} data the data to find the title for
|
|
16
15
|
* @param {*} fieldSchema schema for the item
|
|
17
16
|
* @param {*} formSchema schema for the form
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
* The `limel-grid` component creates a grid which can be used to control the
|
|
3
3
|
* layout of other components. It uses CSS [grid-template-areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
|
|
4
4
|
* to enable easy configuration of its child-elements.
|
|
5
|
-
*
|
|
6
5
|
* @exampleComponent limel-example-grid
|
|
7
6
|
* @slot - Grid content
|
|
8
7
|
*/
|
|
@@ -37,7 +37,6 @@
|
|
|
37
37
|
* Background colors behind icons make them look like "call to action" buttons
|
|
38
38
|
* and take a lot of attention from users.
|
|
39
39
|
* :::
|
|
40
|
-
*
|
|
41
40
|
* @exampleComponent limel-example-header
|
|
42
41
|
* @exampleComponent limel-example-header-colors
|
|
43
42
|
* @exampleComponent limel-example-header-responsive
|
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
* However, to be more resourceful, the parent component can choose not
|
|
19
19
|
* to render the helper-line as well.
|
|
20
20
|
* :::
|
|
21
|
-
*
|
|
22
21
|
* @exampleComponent limel-example-helper-line
|
|
23
22
|
* @exampleComponent limel-example-helper-line-invalid
|
|
24
23
|
* @exampleComponent limel-example-helper-line-long-text
|
|
@@ -49,7 +49,6 @@ import { IconSize } from './icon.types';
|
|
|
49
49
|
* Search for an icon and **click on it to copy its name to clipboard**.
|
|
50
50
|
*
|
|
51
51
|
* <limel-example-icon-finder />
|
|
52
|
-
*
|
|
53
52
|
* @exampleComponent limel-example-icon
|
|
54
53
|
* @exampleComponent limel-example-icon-background
|
|
55
54
|
*/
|
|
@@ -73,7 +72,6 @@ export declare class Icon {
|
|
|
73
72
|
protected loadIcon(name: string): Promise<void>;
|
|
74
73
|
/**
|
|
75
74
|
* Load the SVG data for the icon from the icon cache
|
|
76
|
-
*
|
|
77
75
|
* @param {string} name name of the icon
|
|
78
76
|
* @returns {string} the icon SVG data
|
|
79
77
|
*/
|
|
@@ -8,7 +8,6 @@ import { Link } from '@limetech/lime-elements';
|
|
|
8
8
|
* If clicking on the component should navigate the user to
|
|
9
9
|
* a new screen or web page, you need to provide a URL,
|
|
10
10
|
* using the `link` property.
|
|
11
|
-
*
|
|
12
11
|
* @exampleComponent limel-example-info-tile
|
|
13
12
|
* @exampleComponent limel-example-info-tile-badge
|
|
14
13
|
* @exampleComponent limel-example-info-tile-progress
|
|
@@ -185,7 +185,6 @@ export declare class InputField {
|
|
|
185
185
|
/**
|
|
186
186
|
* Key handler for the input field
|
|
187
187
|
* Will change focus to the first/last item in the dropdown list to enable selection with the keyboard
|
|
188
|
-
*
|
|
189
188
|
* @param {KeyboardEvent} event event
|
|
190
189
|
* @returns {void}
|
|
191
190
|
*/
|
|
@@ -14,14 +14,12 @@ export declare class ListRenderer {
|
|
|
14
14
|
* and return the index at which that ListItem is located in `items`.
|
|
15
15
|
* Returns `undefined` if no item should have the attribute set.
|
|
16
16
|
* See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
|
|
17
|
-
*
|
|
18
17
|
* @param {Array<ListItem | ListSeparator>} items the items of the list, including any `ListSeparator`:s
|
|
19
18
|
* @returns {number} the index as per the description
|
|
20
19
|
*/
|
|
21
20
|
private getIndexForWhichToApplyTabIndex;
|
|
22
21
|
/**
|
|
23
22
|
* Render a single list item
|
|
24
|
-
*
|
|
25
23
|
* @param {ListItem | ListSeparator} item the item to render
|
|
26
24
|
* @param {number} index the index the item had in the `items` array
|
|
27
25
|
* @returns {HTMLElement} the list item
|
|
@@ -31,7 +29,6 @@ export declare class ListRenderer {
|
|
|
31
29
|
private hasPrimaryComponent;
|
|
32
30
|
/**
|
|
33
31
|
* Render the text of the list item
|
|
34
|
-
*
|
|
35
32
|
* @param {ListItem} item the list item
|
|
36
33
|
* @returns {HTMLElement | string} the text for the list item
|
|
37
34
|
*/
|
|
@@ -39,7 +36,6 @@ export declare class ListRenderer {
|
|
|
39
36
|
private isSimpleItem;
|
|
40
37
|
/**
|
|
41
38
|
* Render an icon for a list item
|
|
42
|
-
*
|
|
43
39
|
* @param {ListRendererConfig} config the config object, passed on from the `renderListItem` function
|
|
44
40
|
* @param {ListItem} item the list item
|
|
45
41
|
* @returns {HTMLElement} the icon element
|
|
@@ -14,14 +14,12 @@ export declare class MenuListRenderer {
|
|
|
14
14
|
* and return the index at which that MenuItem is located in `items`.
|
|
15
15
|
* Returns `undefined` if no item should have the attribute set.
|
|
16
16
|
* See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
|
|
17
|
-
*
|
|
18
17
|
* @param {Array<MenuItem | ListSeparator>} items the items of the list, including any `ListSeparator`:s
|
|
19
18
|
* @returns {number} the index as per the description
|
|
20
19
|
*/
|
|
21
20
|
private getIndexForWhichToApplyTabIndex;
|
|
22
21
|
/**
|
|
23
22
|
* Render a single list item
|
|
24
|
-
*
|
|
25
23
|
* @param {MenuItem | ListSeparator} item the item to render
|
|
26
24
|
* @param {number} index the index the item had in the `items` array
|
|
27
25
|
* @returns {HTMLElement} the list item
|
|
@@ -29,7 +27,6 @@ export declare class MenuListRenderer {
|
|
|
29
27
|
private renderMenuItem;
|
|
30
28
|
/**
|
|
31
29
|
* Render the text of the list item
|
|
32
|
-
*
|
|
33
30
|
* @param {MenuItem} item the list item
|
|
34
31
|
* @returns {HTMLElement | string} the text for the list item
|
|
35
32
|
*/
|
|
@@ -38,7 +35,6 @@ export declare class MenuListRenderer {
|
|
|
38
35
|
private isSimpleItem;
|
|
39
36
|
/**
|
|
40
37
|
* Render an icon for a list item
|
|
41
|
-
*
|
|
42
38
|
* @param {MenuListRendererConfig} config the config object, passed on from the `renderMenuItem` function
|
|
43
39
|
* @param {MenuItem} item the list item
|
|
44
40
|
* @returns {HTMLElement} the icon element
|
|
@@ -119,7 +119,6 @@ export declare class Picker {
|
|
|
119
119
|
/**
|
|
120
120
|
* Renders the dropdown with the items to pick from, or a spinner if the picker
|
|
121
121
|
* is waiting for items to be received
|
|
122
|
-
*
|
|
123
122
|
* @returns {HTMLElement} picker dropdown
|
|
124
123
|
*/
|
|
125
124
|
private renderDropdown;
|
|
@@ -130,7 +129,6 @@ export declare class Picker {
|
|
|
130
129
|
/**
|
|
131
130
|
* Returns true if the picker is "full"
|
|
132
131
|
* The picker is considered to be full if it has a value and only one is allowed
|
|
133
|
-
*
|
|
134
132
|
* @returns {boolean} true if the picker is full
|
|
135
133
|
*/
|
|
136
134
|
private isFull;
|
|
@@ -141,27 +139,23 @@ export declare class Picker {
|
|
|
141
139
|
private renderPortal;
|
|
142
140
|
/**
|
|
143
141
|
* Check if a descendant still has focus. If not, reset text value and search result.
|
|
144
|
-
*
|
|
145
142
|
* @returns {void}
|
|
146
143
|
*/
|
|
147
144
|
private handleStopEditAndBlur;
|
|
148
145
|
/**
|
|
149
146
|
* Input handler for the input field
|
|
150
|
-
*
|
|
151
147
|
* @param {InputEvent} event event
|
|
152
148
|
* @returns {void}
|
|
153
149
|
*/
|
|
154
150
|
private handleTextInput;
|
|
155
151
|
/**
|
|
156
152
|
* Change handler for the list
|
|
157
|
-
*
|
|
158
153
|
* @param {LimelListCustomEvent<ListItem>} event event
|
|
159
154
|
* @returns {void}
|
|
160
155
|
*/
|
|
161
156
|
private handleListChange;
|
|
162
157
|
/**
|
|
163
158
|
* Change handler for the list
|
|
164
|
-
*
|
|
165
159
|
* @param {LimelChipSetCustomEvent} event event
|
|
166
160
|
* @returns {void}
|
|
167
161
|
*/
|
|
@@ -169,7 +163,6 @@ export declare class Picker {
|
|
|
169
163
|
/**
|
|
170
164
|
* Focus handler for the chip set
|
|
171
165
|
* Prevent focus if the picker has a value and does not support multiple values
|
|
172
|
-
*
|
|
173
166
|
* @returns {void}
|
|
174
167
|
*/
|
|
175
168
|
private handleInputFieldFocus;
|
|
@@ -178,14 +171,12 @@ export declare class Picker {
|
|
|
178
171
|
/**
|
|
179
172
|
* Key handler for the input field
|
|
180
173
|
* Will change focus to the first/last item in the dropdown list to enable selection with the keyboard
|
|
181
|
-
*
|
|
182
174
|
* @param {KeyboardEvent} event event
|
|
183
175
|
* @returns {void}
|
|
184
176
|
*/
|
|
185
177
|
private handleInputKeyDown;
|
|
186
178
|
/**
|
|
187
179
|
* Key handler for the dropdown
|
|
188
|
-
*
|
|
189
180
|
* @param {KeyboardEvent} event event
|
|
190
181
|
* @returns {void}
|
|
191
182
|
*/
|
|
@@ -2,7 +2,6 @@ import { ListItem } from '../list/list-item.types';
|
|
|
2
2
|
/**
|
|
3
3
|
* A search function that takes a search-string as an argument, and returns
|
|
4
4
|
* a promise that will eventually be resolved with an array of `ListItem`:s.
|
|
5
|
-
*
|
|
6
5
|
* @param {string} query A search query. Typically what the user has written
|
|
7
6
|
* in the input field of a limel-picker.
|
|
8
7
|
* @returns {Promise<ListItem[]>} The search result.
|
|
@@ -45,8 +45,6 @@ import { OpenDirection } from '../menu/menu.types';
|
|
|
45
45
|
* Do not make a popover too big. They should never take over the entire screen.
|
|
46
46
|
* If your content is that big, you should probably be using a Modal instead.
|
|
47
47
|
* :::
|
|
48
|
-
*
|
|
49
|
-
*
|
|
50
48
|
* @slot - Content to put inside the surface
|
|
51
49
|
* @exampleComponent limel-example-popover
|
|
52
50
|
*/
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
*
|
|
4
4
|
* If the child element is a descendant of a limel-portal, this function will
|
|
5
5
|
* go back through the portal and check the original tree recursively
|
|
6
|
-
*
|
|
7
6
|
* @param {HTMLElement} element the parent element
|
|
8
7
|
* @param {HTMLElement} child the child element to check
|
|
9
8
|
* @returns {boolean} `true` if child is a descendant of element, taking
|
|
@@ -6,20 +6,19 @@ import { OpenDirection } from '../menu/menu.types';
|
|
|
6
6
|
* There are some caveats when using this component
|
|
7
7
|
*
|
|
8
8
|
* Events might not bubble up as expected since the content is moved out to
|
|
9
|
-
*
|
|
9
|
+
* another DOM node.
|
|
10
10
|
* Any styling that is applied to content from the parent will be lost, if the
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
11
|
+
* content is just another web compoent it will work without any issues.
|
|
12
|
+
* Alternatively, use the
|
|
13
|
+
* `style=""` html attribute.
|
|
14
14
|
* Any component that is placed inside the container must have a style of
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
15
|
+
* `max-height: inherit`. This ensures that its placement is calculated
|
|
16
|
+
* correctly in relation to the trigger, and that it never covers its own
|
|
17
|
+
* trigger.
|
|
18
18
|
* When the node is moved in the DOM, `disconnectedCallback` and
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
19
|
+
* `connectedCallback` will be invoked, so if `disconnectedCallback` is used
|
|
20
|
+
* to do any tear-down, the appropriate setup will have to be done again on
|
|
21
|
+
* `connectedCallback`.
|
|
23
22
|
* @slot - Content to put inside the portal
|
|
24
23
|
* @private
|
|
25
24
|
* @exampleComponent limel-example-portal
|
|
@@ -7,7 +7,6 @@ import { Link } from '@limetech/lime-elements';
|
|
|
7
7
|
* By default, this navigation will happen within the same browser tab.
|
|
8
8
|
* However, it is possible to override that behavior, by specifying a `target`
|
|
9
9
|
* for the `link` property
|
|
10
|
-
*
|
|
11
10
|
* @exampleComponent limel-example-shortcut
|
|
12
11
|
* @exampleComponent limel-example-shortcut-notification
|
|
13
12
|
* @exampleComponent limel-example-shortcut-styling
|
|
@@ -1,6 +1,28 @@
|
|
|
1
1
|
import { Languages } from '@limetech/lime-elements';
|
|
2
2
|
/**
|
|
3
|
+
* A Snackbar –also known as "Toast"– is used to inform the end user
|
|
4
|
+
* about an action or a process in the system.
|
|
5
|
+
* The information could vary from announcing that a process has just started,
|
|
6
|
+
* is taking place now, has ended, or has been interrupted or canceled.
|
|
7
|
+
*
|
|
8
|
+
* The information that you provide using a snackbar should be:
|
|
9
|
+
* - temporary
|
|
10
|
+
* - contextual
|
|
11
|
+
* - short
|
|
12
|
+
* - and most importantly, ignorable.
|
|
13
|
+
*
|
|
14
|
+
* It means if the user misses the information, it shouldn't be a big deal.
|
|
15
|
+
*
|
|
16
|
+
* :::note
|
|
17
|
+
* If the information you want to display has a higher importance or priority,
|
|
18
|
+
* and you need to make sure that the user takes an action to dismiss it,
|
|
19
|
+
* consider using the [Banner](/#/component/limel-banner/) component instead.
|
|
20
|
+
* For more complex interactions and for delivering more detailed information,
|
|
21
|
+
* [Dialog](/#/component/limel-dialog/) is a better choice.
|
|
22
|
+
* :::
|
|
3
23
|
* @exampleComponent limel-example-snackbar
|
|
24
|
+
* @exampleComponent limel-example-snackbar-with-action
|
|
25
|
+
* @exampleComponent limel-example-snackbar-with-changing-messages
|
|
4
26
|
*/
|
|
5
27
|
export declare class Snackbar {
|
|
6
28
|
/**
|
|
@@ -10,7 +32,7 @@ export declare class Snackbar {
|
|
|
10
32
|
/**
|
|
11
33
|
* The amount of time in milliseconds to show the snackbar.
|
|
12
34
|
*/
|
|
13
|
-
timeout
|
|
35
|
+
timeout?: number;
|
|
14
36
|
/**
|
|
15
37
|
* The text to display for the action button.
|
|
16
38
|
*/
|
|
@@ -12,7 +12,6 @@ import { ListSeparator, MenuItem } from '@limetech/lime-elements';
|
|
|
12
12
|
* The button should only be used for performing commands!
|
|
13
13
|
* - Never use this component instead of a Select or Menu component!
|
|
14
14
|
* :::
|
|
15
|
-
*
|
|
16
15
|
* @exampleComponent limel-example-split-button-basic
|
|
17
16
|
* @exampleComponent limel-example-split-button-repeat-default-command
|
|
18
17
|
*/
|
|
@@ -7,14 +7,13 @@ import { Tab } from './tab.types';
|
|
|
7
7
|
* :::
|
|
8
8
|
* An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
|
|
9
9
|
* A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.
|
|
10
|
-
|
|
10
|
+
* :::tip Other things to consider
|
|
11
11
|
* Never divide the content of a tab using a nested tab bar.
|
|
12
12
|
* Never place two tab bars within the same screen.
|
|
13
13
|
* Never use background color for icons in tabs.
|
|
14
14
|
* Avoid having long labels for tabs.
|
|
15
15
|
* A tab will never be removed or get disabled, even if there is no content under it.
|
|
16
16
|
* :::
|
|
17
|
-
*
|
|
18
17
|
* @exampleComponent limel-example-tab-bar
|
|
19
18
|
* @exampleComponent limel-example-tab-bar-with-dynamic-tab-width
|
|
20
19
|
* @exampleComponent limel-example-tab-bar-with-equal-tab-width
|
|
@@ -2,7 +2,6 @@ import { Tab } from './tab.types';
|
|
|
2
2
|
/**
|
|
3
3
|
* Set a tabs `active` state to true in a list of tabs. The previous tab with
|
|
4
4
|
* `active` set to true will have it set to `false` instead.
|
|
5
|
-
*
|
|
6
5
|
* @param {Tab[]} tabs list of tabs
|
|
7
6
|
* @param {number} index the index of the tab to set to active
|
|
8
7
|
* @returns {Tab[]} a copy of the list of tabs with the changed tabs replaced
|