@limetech/lime-elements 36.0.0-next.1 → 36.0.0-next.12

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.
Files changed (74) hide show
  1. package/dist/cjs/lime-elements.cjs.js +1 -1
  2. package/dist/cjs/limel-button.cjs.entry.js +32 -16
  3. package/dist/cjs/limel-chip-set.cjs.entry.js +1 -3
  4. package/dist/cjs/{limel-color-picker-palette_2.cjs.entry.js → limel-color-picker-palette.cjs.entry.js} +0 -112
  5. package/dist/cjs/limel-dock-button.cjs.entry.js +84 -0
  6. package/dist/cjs/limel-dock.cjs.entry.js +103 -0
  7. package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js +3 -9
  8. package/dist/cjs/limel-icon-button.cjs.entry.js +2 -35
  9. package/dist/cjs/{limel-list_3.cjs.entry.js → limel-list_2.cjs.entry.js} +1 -2019
  10. package/dist/cjs/limel-menu-list.cjs.entry.js +1 -1
  11. package/dist/cjs/limel-popover_4.cjs.entry.js +239 -0
  12. package/dist/cjs/limel-portal.cjs.entry.js +2024 -0
  13. package/dist/cjs/limel-select.cjs.entry.js +2 -2
  14. package/dist/cjs/loader.cjs.js +1 -1
  15. package/dist/collection/collection-manifest.json +2 -0
  16. package/dist/collection/components/button/button.css +40 -4
  17. package/dist/collection/components/button/button.js +56 -20
  18. package/dist/collection/components/chip-set/chip-set.js +1 -3
  19. package/dist/collection/components/date-picker/pickers/MonthPicker.js +1 -3
  20. package/dist/collection/components/date-picker/pickers/QuarterPicker.js +1 -3
  21. package/dist/collection/components/date-picker/pickers/YearPicker.js +1 -3
  22. package/dist/collection/components/dock/dock-button/dock-button.css +72 -0
  23. package/dist/collection/components/dock/dock-button/dock-button.js +183 -0
  24. package/dist/collection/components/dock/dock.css +107 -0
  25. package/dist/collection/components/dock/dock.js +280 -0
  26. package/dist/collection/components/dock/dock.types.js +1 -0
  27. package/dist/collection/components/icon-button/icon-button.css +21 -20
  28. package/dist/collection/components/icon-button/icon-button.js +2 -52
  29. package/dist/collection/components/list/list.css +0 -4
  30. package/dist/collection/components/menu-list/menu-list.css +0 -4
  31. package/dist/collection/components/select/select.template.js +2 -2
  32. package/dist/esm/lime-elements.js +1 -1
  33. package/dist/esm/limel-button.entry.js +33 -17
  34. package/dist/esm/limel-chip-set.entry.js +1 -3
  35. package/dist/esm/{limel-color-picker-palette_2.entry.js → limel-color-picker-palette.entry.js} +2 -113
  36. package/dist/esm/limel-dock-button.entry.js +80 -0
  37. package/dist/esm/limel-dock.entry.js +99 -0
  38. package/dist/esm/limel-flatpickr-adapter.entry.js +3 -9
  39. package/dist/esm/limel-icon-button.entry.js +2 -35
  40. package/dist/esm/{limel-list_3.entry.js → limel-list_2.entry.js} +2 -2019
  41. package/dist/esm/limel-menu-list.entry.js +1 -1
  42. package/dist/esm/limel-popover_4.entry.js +232 -0
  43. package/dist/esm/limel-portal.entry.js +2020 -0
  44. package/dist/esm/limel-select.entry.js +2 -2
  45. package/dist/esm/loader.js +1 -1
  46. package/dist/lime-elements/lime-elements.esm.js +1 -1
  47. package/dist/lime-elements/p-009de50e.entry.js +1 -0
  48. package/dist/lime-elements/{p-b8750057.entry.js → p-19f72dab.entry.js} +1 -1
  49. package/dist/lime-elements/{p-64d7587e.entry.js → p-1a2ffe75.entry.js} +1 -1
  50. package/dist/lime-elements/p-1dfccbc5.entry.js +1 -0
  51. package/dist/lime-elements/p-55706501.entry.js +1 -0
  52. package/dist/lime-elements/p-6b1bc80f.entry.js +1 -0
  53. package/dist/lime-elements/p-93cd2268.entry.js +1 -0
  54. package/dist/lime-elements/p-a43e4844.entry.js +1 -0
  55. package/dist/lime-elements/p-b0b4e46f.entry.js +37 -0
  56. package/dist/lime-elements/p-bd098a11.entry.js +1 -0
  57. package/dist/types/components/button/button.d.ts +10 -3
  58. package/dist/types/components/dock/dock-button/dock-button.d.ts +44 -0
  59. package/dist/types/components/dock/dock.d.ts +79 -0
  60. package/dist/types/components/dock/dock.types.d.ts +53 -0
  61. package/dist/types/components/icon-button/icon-button.d.ts +0 -11
  62. package/dist/types/components.d.ts +127 -4
  63. package/dist/types/interface.d.ts +1 -0
  64. package/package.json +2 -3
  65. package/dist/cjs/limel-popover-surface.cjs.entry.js +0 -32
  66. package/dist/cjs/limel-tooltip_2.cjs.entry.js +0 -102
  67. package/dist/esm/limel-popover-surface.entry.js +0 -28
  68. package/dist/esm/limel-tooltip_2.entry.js +0 -97
  69. package/dist/lime-elements/p-22569fb6.entry.js +0 -1
  70. package/dist/lime-elements/p-404e1465.entry.js +0 -1
  71. package/dist/lime-elements/p-705334c1.entry.js +0 -1
  72. package/dist/lime-elements/p-87453b45.entry.js +0 -1
  73. package/dist/lime-elements/p-bd8c9384.entry.js +0 -1
  74. package/dist/lime-elements/p-d1ee4501.entry.js +0 -37
@@ -0,0 +1,107 @@
1
+ /*
2
+ * This file is imported into every component!
3
+ *
4
+ * Nothing in this file may output any CSS
5
+ * without being explicitly called by outside code.
6
+ */
7
+ /*
8
+ * This file is imported into every component!
9
+ *
10
+ * Nothing in this file may output any CSS
11
+ * without being explicitly used by outside code.
12
+ */
13
+ /**
14
+ * @prop --dock-expanded-max-width: The maximum width of the Dock when it is expanded. Defaults to `max-content` which means the Dock will adjust its width to the widest dock item.
15
+ * @prop --dock-background-color: Background color of the whole component, defaults to `--contrast-100`.
16
+ * @prop --dock-item-background-color--selected: Background color of selected dock item, defaults to `--contrast-200`.
17
+ * @prop --dock-item-text-color: Text of dock items, defaults to `--contrast-1100`.
18
+ * @prop --dock-item-text-color--selected: Text color of selected dock item, defaults to `--contrast-1300`.
19
+ * @prop --dock-item-icon-color: Color of the optional icons used in each dock item. Only affects inactive dock items, defaults to text colors for default or selected states.
20
+ * @prop --popover-surface-width: Defines the width of the popover that is opened for dock items with custom components. Defaults to `auto`.
21
+ */
22
+ :host(limel-dock) {
23
+ --dock-item-height: 2.75rem;
24
+ --dock-padding: 0.25rem;
25
+ --dock-expand-shrink-button-height: 1rem;
26
+ --limel-dock-item-text-color: var(
27
+ --dock-item-text-color,
28
+ rgb(var(--contrast-1100))
29
+ );
30
+ --limel-dock-item-text-color--selected: var(
31
+ --dock-item-text-color--selected,
32
+ rgb(var(--contrast-1300))
33
+ );
34
+ isolation: isolate;
35
+ position: relative;
36
+ display: inline-flex;
37
+ flex-direction: column;
38
+ background-color: var(--dock-background-color, rgb(var(--contrast-100)));
39
+ box-shadow: 0.1875rem 0 0.375rem -0.125rem rgba(var(--color-black), 0.15), 0.1875rem 0 0.625rem -0.125rem rgba(var(--color-black), 0.05);
40
+ }
41
+
42
+ :host(limel-dock:not(.has-mobile-layout)) {
43
+ height: 100%;
44
+ width: calc(var(--dock-padding) * 2 + var(--dock-item-height));
45
+ }
46
+
47
+ :host(limel-dock.expanded) {
48
+ width: var(--dock-expanded-max-width, max-content);
49
+ }
50
+
51
+ .footer-separator {
52
+ margin-top: auto;
53
+ justify-self: flex-end;
54
+ }
55
+
56
+ nav {
57
+ box-sizing: border-box;
58
+ display: inline-flex;
59
+ flex-direction: column;
60
+ gap: 0.375rem;
61
+ flex-grow: 1;
62
+ padding: var(--dock-padding);
63
+ overflow-y: auto;
64
+ scrollbar-width: none;
65
+ -ms-overflow-style: none;
66
+ }
67
+ nav::-webkit-scrollbar {
68
+ display: none;
69
+ }
70
+ :host(limel-dock.has-mobile-layout) nav {
71
+ justify-content: space-between;
72
+ flex-direction: row;
73
+ }
74
+
75
+ .expand-shrink {
76
+ all: unset;
77
+ box-sizing: border-box;
78
+ transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
79
+ cursor: pointer;
80
+ display: flex;
81
+ justify-content: center;
82
+ align-items: center;
83
+ height: var(--dock-expand-shrink-button-height);
84
+ padding: 0 0.5rem;
85
+ margin: var(--dock-padding);
86
+ border-radius: 0.375rem;
87
+ }
88
+ .expand-shrink:hover {
89
+ box-shadow: var(--button-shadow-hovered);
90
+ }
91
+ .expand-shrink:active {
92
+ box-shadow: var(--button-shadow-pressed);
93
+ transform: translate3d(0, 0.08rem, 0);
94
+ }
95
+ .expand-shrink.expanded {
96
+ justify-content: flex-end;
97
+ }
98
+ .expand-shrink.expanded limel-icon {
99
+ transform: rotateY(180deg);
100
+ }
101
+ .expand-shrink:focus-visible {
102
+ box-shadow: var(--shadow-depth-8-focused);
103
+ }
104
+ .expand-shrink limel-icon {
105
+ width: calc(var(--dock-expand-shrink-button-height) - 0.25rem);
106
+ color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));
107
+ }
@@ -0,0 +1,280 @@
1
+ import { Component, Event, h, Host, Prop, State, } from '@stencil/core';
2
+ const DEFAULT_MOBILE_BREAKPOINT = 700;
3
+ /**
4
+ * @exampleComponent limel-example-dock-basic
5
+ * @exampleComponent limel-example-dock-custom-component
6
+ * @exampleComponent limel-example-dock-mobile
7
+ * @exampleComponent limel-example-dock-expanded
8
+ * @exampleComponent limel-example-dock-colors-css
9
+ * @private
10
+ */
11
+ export class Dock {
12
+ constructor() {
13
+ /**
14
+ * Items that are placed in the dock.
15
+ */
16
+ this.dockItems = [];
17
+ /**
18
+ * Items that are placed at the bottom of the dock. (Or at the end in mobile
19
+ * layout.)
20
+ */
21
+ this.dockFooterItems = [];
22
+ /**
23
+ * Defines the width of the component, when it loads.
24
+ * - `true`: shows both icons and labels of the Dock items.
25
+ * - `false`: only shows icons of the doc items, and displays
26
+ * their labels as tooltip.
27
+ *
28
+ * Note: when `useMobileLayout` is `true`, labels will always
29
+ * be shown as tooltips. Read more below…
30
+ */
31
+ this.expanded = false;
32
+ /**
33
+ * Set to `false` if you do not want to allow end-users
34
+ * to exapnd or shrink the Dock. This will hide the
35
+ * expand/shrink button, and the only things that defines
36
+ * the layout will be the `expanded` property, and
37
+ * the `mobileBreakPoint`.
38
+ */
39
+ this.allowResize = true;
40
+ /**
41
+ * Defines the breakpoint in pixles, at which the component will be rendered
42
+ * in a hoizontal layout. Default breakpoint is `700` pixels, which means
43
+ * when the screen size is smaller than `700px`, the component will automatically
44
+ * switch to a horizontal layout.
45
+ */
46
+ this.mobileBreakPoint = DEFAULT_MOBILE_BREAKPOINT;
47
+ /**
48
+ * Is used to render the component horizontally, and place
49
+ * the Dock items in a row.
50
+ */
51
+ this.useMobileLayout = false;
52
+ this.renderSeparator = () => {
53
+ return this.useMobileLayout ? null : h("span", { class: "footer-separator" });
54
+ };
55
+ this.renderDockItem = (item) => {
56
+ return (h("limel-dock-button", { class: {
57
+ 'dock-item': true,
58
+ selected: item.selected,
59
+ }, item: item, expanded: this.expanded && !this.useMobileLayout, useMobileLayout: this.useMobileLayout }));
60
+ };
61
+ this.handleResize = () => {
62
+ if (window.innerWidth <= this.mobileBreakPoint) {
63
+ this.useMobileLayout = true;
64
+ }
65
+ else {
66
+ this.useMobileLayout = false;
67
+ }
68
+ };
69
+ this.toggleDockWidth = () => {
70
+ this.expanded = !this.expanded;
71
+ this.dockExpanded.emit(this.expanded);
72
+ };
73
+ }
74
+ componentDidLoad() {
75
+ this.resizeObserver = new ResizeObserver(this.handleResize);
76
+ this.resizeObserver.observe(document.body);
77
+ }
78
+ disconnectedCallback() {
79
+ this.resizeObserver.disconnect();
80
+ }
81
+ render() {
82
+ return (h(Host, { class: {
83
+ dock: true,
84
+ expanded: this.expanded,
85
+ 'has-mobile-layout': this.useMobileLayout,
86
+ } },
87
+ h("nav", { "aria-label": this.accessibleLabel },
88
+ this.dockItems.map(this.renderDockItem),
89
+ this.renderSeparator(),
90
+ this.dockFooterItems.map(this.renderDockItem)),
91
+ this.renderExpandShrinkToggle()));
92
+ }
93
+ renderExpandShrinkToggle() {
94
+ if (this.useMobileLayout || !this.allowResize) {
95
+ return;
96
+ }
97
+ return (h("button", { class: {
98
+ 'expand-shrink': true,
99
+ expanded: this.expanded,
100
+ }, onClick: this.toggleDockWidth },
101
+ h("limel-icon", { name: "angle_right" })));
102
+ }
103
+ static get is() { return "limel-dock"; }
104
+ static get encapsulation() { return "shadow"; }
105
+ static get originalStyleUrls() { return {
106
+ "$": ["dock.scss"]
107
+ }; }
108
+ static get styleUrls() { return {
109
+ "$": ["dock.css"]
110
+ }; }
111
+ static get properties() { return {
112
+ "dockItems": {
113
+ "type": "unknown",
114
+ "mutable": false,
115
+ "complexType": {
116
+ "original": "DockItem[]",
117
+ "resolved": "DockItem[]",
118
+ "references": {
119
+ "DockItem": {
120
+ "location": "import",
121
+ "path": "./dock.types"
122
+ }
123
+ }
124
+ },
125
+ "required": false,
126
+ "optional": false,
127
+ "docs": {
128
+ "tags": [],
129
+ "text": "Items that are placed in the dock."
130
+ },
131
+ "defaultValue": "[]"
132
+ },
133
+ "dockFooterItems": {
134
+ "type": "unknown",
135
+ "mutable": false,
136
+ "complexType": {
137
+ "original": "DockItem[]",
138
+ "resolved": "DockItem[]",
139
+ "references": {
140
+ "DockItem": {
141
+ "location": "import",
142
+ "path": "./dock.types"
143
+ }
144
+ }
145
+ },
146
+ "required": false,
147
+ "optional": true,
148
+ "docs": {
149
+ "tags": [],
150
+ "text": "Items that are placed at the bottom of the dock. (Or at the end in mobile\nlayout.)"
151
+ },
152
+ "defaultValue": "[]"
153
+ },
154
+ "accessibleLabel": {
155
+ "type": "string",
156
+ "mutable": false,
157
+ "complexType": {
158
+ "original": "string",
159
+ "resolved": "string",
160
+ "references": {}
161
+ },
162
+ "required": false,
163
+ "optional": true,
164
+ "docs": {
165
+ "tags": [],
166
+ "text": "A label used to describe the purpose of the navigation element to users\nof assistive technologies, like screen readers. Especially useful when\nthere are multiple navigation elements in the user interface.\nExample value: \"Primary navigation\""
167
+ },
168
+ "attribute": "accessible-label",
169
+ "reflect": true
170
+ },
171
+ "expanded": {
172
+ "type": "boolean",
173
+ "mutable": false,
174
+ "complexType": {
175
+ "original": "boolean",
176
+ "resolved": "boolean",
177
+ "references": {}
178
+ },
179
+ "required": false,
180
+ "optional": true,
181
+ "docs": {
182
+ "tags": [],
183
+ "text": "Defines the width of the component, when it loads.\n- `true`: shows both icons and labels of the Dock items.\n- `false`: only shows icons of the doc items, and displays\ntheir labels as tooltip.\n\nNote: when `useMobileLayout` is `true`, labels will always\nbe shown as tooltips. Read more below\u2026"
184
+ },
185
+ "attribute": "expanded",
186
+ "reflect": true,
187
+ "defaultValue": "false"
188
+ },
189
+ "allowResize": {
190
+ "type": "boolean",
191
+ "mutable": false,
192
+ "complexType": {
193
+ "original": "boolean",
194
+ "resolved": "boolean",
195
+ "references": {}
196
+ },
197
+ "required": false,
198
+ "optional": true,
199
+ "docs": {
200
+ "tags": [],
201
+ "text": "Set to `false` if you do not want to allow end-users\nto exapnd or shrink the Dock. This will hide the\nexpand/shrink button, and the only things that defines\nthe layout will be the `expanded` property, and\nthe `mobileBreakPoint`."
202
+ },
203
+ "attribute": "allow-resize",
204
+ "reflect": true,
205
+ "defaultValue": "true"
206
+ },
207
+ "mobileBreakPoint": {
208
+ "type": "number",
209
+ "mutable": false,
210
+ "complexType": {
211
+ "original": "number",
212
+ "resolved": "number",
213
+ "references": {}
214
+ },
215
+ "required": false,
216
+ "optional": true,
217
+ "docs": {
218
+ "tags": [],
219
+ "text": "Defines the breakpoint in pixles, at which the component will be rendered\nin a hoizontal layout. Default breakpoint is `700` pixels, which means\nwhen the screen size is smaller than `700px`, the component will automatically\nswitch to a horizontal layout."
220
+ },
221
+ "attribute": "mobile-break-point",
222
+ "reflect": true,
223
+ "defaultValue": "DEFAULT_MOBILE_BREAKPOINT"
224
+ }
225
+ }; }
226
+ static get states() { return {
227
+ "useMobileLayout": {}
228
+ }; }
229
+ static get events() { return [{
230
+ "method": "itemSelected",
231
+ "name": "itemSelected",
232
+ "bubbles": true,
233
+ "cancelable": true,
234
+ "composed": true,
235
+ "docs": {
236
+ "tags": [],
237
+ "text": "Fired when a dock item has been selected from the dock."
238
+ },
239
+ "complexType": {
240
+ "original": "DockItem",
241
+ "resolved": "DockItem",
242
+ "references": {
243
+ "DockItem": {
244
+ "location": "import",
245
+ "path": "./dock.types"
246
+ }
247
+ }
248
+ }
249
+ }, {
250
+ "method": "close",
251
+ "name": "close",
252
+ "bubbles": true,
253
+ "cancelable": true,
254
+ "composed": true,
255
+ "docs": {
256
+ "tags": [],
257
+ "text": "Fired when the popover is closed."
258
+ },
259
+ "complexType": {
260
+ "original": "void",
261
+ "resolved": "void",
262
+ "references": {}
263
+ }
264
+ }, {
265
+ "method": "dockExpanded",
266
+ "name": "dockExpanded",
267
+ "bubbles": true,
268
+ "cancelable": true,
269
+ "composed": true,
270
+ "docs": {
271
+ "tags": [],
272
+ "text": "Fired when a Dock is expanded or collapsed."
273
+ },
274
+ "complexType": {
275
+ "original": "boolean",
276
+ "resolved": "boolean",
277
+ "references": {}
278
+ }
279
+ }]; }
280
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -231,20 +231,9 @@
231
231
  z-index: 1;
232
232
  }
233
233
 
234
- @media (pointer: coarse) {
235
- .mdc-icon-button:hover::before {
236
- opacity: 0;
237
- }
238
- }
239
234
  /**
240
- * @prop --icon-background-color: Background color when attribute `elevated` is set to `true`.
235
+ * @prop --icon-background-color: Background color of the button.
241
236
  */
242
- :host {
243
- display: inline-flex;
244
- align-items: center;
245
- justify-content: center;
246
- }
247
-
248
237
  :host([hidden]) {
249
238
  display: none;
250
239
  }
@@ -253,25 +242,37 @@
253
242
  pointer-events: none;
254
243
  }
255
244
 
256
- :host([elevated]) .mdc-icon-button {
257
- padding: 0.5625rem;
258
- }
259
- :host([elevated]) limel-icon {
245
+ .mdc-icon-button {
260
246
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
261
- box-shadow: var(--button-shadow-normal);
247
+ display: inline-flex;
248
+ align-items: center;
249
+ justify-content: center;
250
+ box-sizing: border-box;
251
+ height: 2.25rem;
252
+ width: 2.25rem;
253
+ padding: 0.125rem;
254
+ border-radius: 50%;
255
+ background-color: var(--icon-background-color, transparent);
262
256
  }
263
- :host([elevated]) limel-icon:hover {
257
+ .mdc-icon-button:hover {
264
258
  box-shadow: var(--button-shadow-hovered);
265
259
  }
266
- :host([elevated]) limel-icon:active {
260
+ .mdc-icon-button:active {
267
261
  box-shadow: var(--button-shadow-pressed);
268
262
  transform: translate3d(0, 0.08rem, 0);
269
263
  }
270
-
264
+ :host([elevated]) .mdc-icon-button:not(:hover):not(:active):not(:focus-visible) {
265
+ box-shadow: var(--button-shadow-normal);
266
+ }
271
267
  .mdc-icon-button:disabled {
272
268
  color: var(--mdc-theme-text-disabled-on-background);
273
269
  }
274
270
  .mdc-icon-button:focus-visible {
275
271
  box-shadow: var(--shadow-depth-8-focused);
276
272
  border-radius: 50%;
273
+ }
274
+
275
+ limel-icon {
276
+ width: 1.25rem;
277
+ height: 1.25rem;
277
278
  }
@@ -1,5 +1,4 @@
1
- import { MDCRipple } from '@material/ripple';
2
- import { Component, Element, h, Method, Prop } from '@stencil/core';
1
+ import { Component, Element, h, Prop } from '@stencil/core';
3
2
  /**
4
3
  * @exampleComponent limel-example-icon-button-basic
5
4
  * @exampleComponent limel-example-icon-button-disabled
@@ -18,23 +17,6 @@ export class IconButton {
18
17
  * Set to `true` to disable the button.
19
18
  */
20
19
  this.disabled = false;
21
- this.removeFocusedStyleOnClick =
22
- this.removeFocusedStyleOnClick.bind(this);
23
- }
24
- /**
25
- * If the button is hidden or inside another element that is animating
26
- * while the button is instantiated, the hover-highlight may become
27
- * misaligned. If so, calling this method will make the button re-layout
28
- * the highlight.
29
- */
30
- async relayout() {
31
- if (this.mdcIconButtonRipple) {
32
- this.mdcIconButtonRipple.layout();
33
- }
34
- }
35
- removeFocusedStyleOnClick() {
36
- const mdcButton = this.host.shadowRoot.querySelector('.mdc-icon-button');
37
- mdcButton.classList.remove('mdc-ripple-upgraded--background-focused');
38
20
  }
39
21
  connectedCallback() {
40
22
  this.initialize();
@@ -47,28 +29,14 @@ export class IconButton {
47
29
  if (!element) {
48
30
  return;
49
31
  }
50
- this.mdcIconButtonRipple = new MDCRipple(element);
51
- this.mdcIconButtonRipple.unbounded = true;
52
- this.host.addEventListener('click', this.removeFocusedStyleOnClick);
53
- }
54
- disconnectedCallback() {
55
- var _a;
56
- (_a = this.mdcIconButtonRipple) === null || _a === void 0 ? void 0 : _a.destroy();
57
- this.host.removeEventListener('click', this.removeFocusedStyleOnClick);
58
32
  }
59
33
  render() {
60
34
  const buttonAttributes = {};
61
35
  if (this.host.hasAttribute('tabindex')) {
62
36
  buttonAttributes.tabindex = this.host.getAttribute('tabindex');
63
37
  }
64
- const iconAttributes = {};
65
- if (this.elevated) {
66
- iconAttributes.badge = true;
67
- iconAttributes.size = 'small';
68
- }
69
38
  return (h("button", Object.assign({ class: "mdc-icon-button", disabled: this.disabled, "aria-label": this.label, title: this.label }, buttonAttributes),
70
- h("div", { class: "mdc-icon-button__ripple" }),
71
- h("limel-icon", Object.assign({ name: this.icon }, iconAttributes))));
39
+ h("limel-icon", { name: this.icon, badge: true })));
72
40
  }
73
41
  static get is() { return "limel-icon-button"; }
74
42
  static get encapsulation() { return "shadow"; }
@@ -150,23 +118,5 @@ export class IconButton {
150
118
  "defaultValue": "false"
151
119
  }
152
120
  }; }
153
- static get methods() { return {
154
- "relayout": {
155
- "complexType": {
156
- "signature": "() => Promise<void>",
157
- "parameters": [],
158
- "references": {
159
- "Promise": {
160
- "location": "global"
161
- }
162
- },
163
- "return": "Promise<void>"
164
- },
165
- "docs": {
166
- "text": "If the button is hidden or inside another element that is animating\nwhile the button is instantiated, the hover-highlight may become\nmisaligned. If so, calling this method will make the button re-layout\nthe highlight.",
167
- "tags": []
168
- }
169
- }
170
- }; }
171
121
  static get elementRef() { return "host"; }
172
122
  }
@@ -4052,10 +4052,6 @@ a.mdc-list-item {
4052
4052
  transition-timing-function: ease;
4053
4053
  }
4054
4054
 
4055
- .action-menu-trigger {
4056
- transform: scale(0.9);
4057
- }
4058
-
4059
4055
  /*
4060
4056
  * This file is imported into every component!
4061
4057
  *
@@ -4058,10 +4058,6 @@ a.mdc-list-item {
4058
4058
  transition-timing-function: ease;
4059
4059
  }
4060
4060
 
4061
- .action-menu-trigger {
4062
- transform: scale(0.9);
4063
- }
4064
-
4065
4061
  /*
4066
4062
  * This file is imported into every component!
4067
4063
  *
@@ -39,7 +39,7 @@ const SelectValue = (props) => {
39
39
  'mdc-floating-label--float-above': props.hasValue || props.isOpen || props.readonly,
40
40
  'mdc-floating-label--active': props.isOpen,
41
41
  };
42
- return (h("div", { class: anchorClassList, tabindex: "0", onClick: props.open, onKeyPress: props.onTriggerPress, role: "button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-labelledby": "s-label s-selected-text" },
42
+ return (h("div", { class: anchorClassList, tabindex: "0", onClick: props.open, onKeyPress: props.onTriggerPress, role: "button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-labelledby": "s-label s-selected-text", "aria-required": props.required, "aria-disabled": props.disabled },
43
43
  h("span", { id: "s-label", class: labelClassList }, props.label),
44
44
  h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" },
45
45
  getSelectedIcon(props.value),
@@ -80,7 +80,7 @@ const MenuDropdown = (props) => {
80
80
  h("limel-list", { items: items, type: props.multiple ? 'checkbox' : 'selectable', onChange: props.onMenuChange }))));
81
81
  };
82
82
  const NativeDropdown = (props) => {
83
- return (h("select", { required: props.required, "aria-required": props.required, onChange: props.onNativeChange, onFocus: props.open, onBlur: props.close, class: "limel-select__native-control", disabled: props.disabled, multiple: props.multiple }, props.options.map((option) => {
83
+ return (h("select", { required: props.required, "aria-disabled": props.disabled, "aria-required": props.required, onChange: props.onNativeChange, onFocus: props.open, onBlur: props.close, class: "limel-select__native-control", disabled: props.disabled, multiple: props.multiple }, props.options.map((option) => {
84
84
  return (h("option", { key: option.value, value: option.value, selected: isSelected(option, props.value), disabled: option.disabled }, option.text));
85
85
  })));
86
86
  };
@@ -13,5 +13,5 @@ const patchBrowser = () => {
13
13
  };
14
14
 
15
15
  patchBrowser().then(options => {
16
- return bootstrapLazy([["limel-color-picker",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}]]],["limel-button",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-checkbox",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-table",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-banner",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-circular-progress",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid",[[1,"limel-grid"]]],["limel-linear-progress",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-slider",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-snackbar",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-tab-bar",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-menu-list",[[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover-surface",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-icon",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-input-field",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-color-picker-palette_2",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}],[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}]]],["limel-badge",[[1,"limel-badge",{"label":[514]}]]],["limel-chip-set",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-icon-button",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516],"relayout":[64]}]]],["limel-spinner",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-list_3",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-tooltip_2",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], options);
16
+ return bootstrapLazy([["limel-color-picker",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-dock",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}]]],["limel-button",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-table",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-banner",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-circular-progress",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid",[[1,"limel-grid"]]],["limel-linear-progress",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-slider",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-snackbar",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-dock-button",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-input-field",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-color-picker-palette",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-tab-bar",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-checkbox",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-flatpickr-adapter",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-menu-list",[[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-badge",[[1,"limel-badge",{"label":[514]}]]],["limel-icon",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-chip-set",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-icon-button",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-spinner",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-portal",[[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-list_2",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["limel-popover_4",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-popover-surface",{"contentCollection":[16]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], options);
17
17
  });