@limetech/lime-elements 37.1.0-next.4 → 37.1.0-next.6

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 (46) hide show
  1. package/dist/cjs/limel-button.cjs.entry.js +3 -52
  2. package/dist/cjs/limel-button.cjs.entry.js.map +1 -1
  3. package/dist/cjs/limel-checkbox.cjs.entry.js.map +1 -1
  4. package/dist/cjs/limel-collapsible-section.cjs.entry.js +10 -0
  5. package/dist/cjs/limel-collapsible-section.cjs.entry.js.map +1 -1
  6. package/dist/cjs/limel-switch.cjs.entry.js +5 -0
  7. package/dist/cjs/limel-switch.cjs.entry.js.map +1 -1
  8. package/dist/cjs/makeEnterClickable-aa2ed75b.js +68 -0
  9. package/dist/cjs/makeEnterClickable-aa2ed75b.js.map +1 -0
  10. package/dist/collection/components/checkbox/checkbox.js +16 -0
  11. package/dist/collection/components/checkbox/checkbox.js.map +1 -1
  12. package/dist/collection/components/collapsible-section/collapsible-section.js +11 -1
  13. package/dist/collection/components/collapsible-section/collapsible-section.js.map +1 -1
  14. package/dist/collection/components/switch/switch.js +14 -0
  15. package/dist/collection/components/switch/switch.js.map +1 -1
  16. package/dist/collection/util/makeEnterClickable.js +12 -2
  17. package/dist/collection/util/makeEnterClickable.js.map +1 -1
  18. package/dist/esm/limel-button.entry.js +2 -51
  19. package/dist/esm/limel-button.entry.js.map +1 -1
  20. package/dist/esm/limel-checkbox.entry.js.map +1 -1
  21. package/dist/esm/limel-collapsible-section.entry.js +11 -1
  22. package/dist/esm/limel-collapsible-section.entry.js.map +1 -1
  23. package/dist/esm/limel-switch.entry.js +5 -0
  24. package/dist/esm/limel-switch.entry.js.map +1 -1
  25. package/dist/esm/makeEnterClickable-b5ad939a.js +65 -0
  26. package/dist/esm/makeEnterClickable-b5ad939a.js.map +1 -0
  27. package/dist/lime-elements/lime-elements.esm.js +1 -1
  28. package/dist/lime-elements/p-5235c79f.entry.js +2 -0
  29. package/dist/lime-elements/p-5235c79f.entry.js.map +1 -0
  30. package/dist/lime-elements/{p-bb1b12bb.entry.js → p-97d9a355.entry.js} +8 -8
  31. package/dist/lime-elements/{p-bb1b12bb.entry.js.map → p-97d9a355.entry.js.map} +1 -1
  32. package/dist/lime-elements/p-c6f8ea40.entry.js.map +1 -1
  33. package/dist/lime-elements/p-c9bdda85.js +2 -0
  34. package/dist/lime-elements/p-c9bdda85.js.map +1 -0
  35. package/dist/lime-elements/p-ee887c40.entry.js +2 -0
  36. package/dist/lime-elements/p-ee887c40.entry.js.map +1 -0
  37. package/dist/types/components/checkbox/checkbox.d.ts +16 -0
  38. package/dist/types/components/collapsible-section/collapsible-section.d.ts +3 -0
  39. package/dist/types/components/switch/switch.d.ts +10 -0
  40. package/dist/types/components.d.ts +76 -0
  41. package/dist/types/util/makeEnterClickable.d.ts +5 -0
  42. package/package.json +4 -4
  43. package/dist/lime-elements/p-149f2418.entry.js +0 -2
  44. package/dist/lime-elements/p-149f2418.entry.js.map +0 -1
  45. package/dist/lime-elements/p-c018e82f.entry.js +0 -2
  46. package/dist/lime-elements/p-c018e82f.entry.js.map +0 -1
@@ -272,6 +272,18 @@ export namespace Components {
272
272
  "type"?: CalloutType;
273
273
  }
274
274
  /**
275
+ * The Checkbox component is a classic and essential element in UI design that allows
276
+ * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
277
+ * select one or more items from a list of choices.
278
+ * ## States of a Checkbox
279
+ * When a user clicks or taps on the box, it toggles between two states:
280
+ * Checked and Unchecked.
281
+ * However, a Checkbox can visualize a third state called the "Indeterminate" state.
282
+ * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
283
+ * The Indeterminate state is typically used when dealing with checkbox groups
284
+ * that have hierarchical relationships or when the group contains sub-items.
285
+ * This state is used to indicate that that some, but not all, of the items in a group are selected.
286
+ * <limel-example-switch-vs-checkbox />
275
287
  * @exampleComponent limel-example-checkbox
276
288
  * @exampleComponent limel-example-checkbox-helper-text
277
289
  */
@@ -1818,6 +1830,13 @@ export namespace Components {
1818
1830
  "primary": boolean;
1819
1831
  }
1820
1832
  /**
1833
+ * The Switch component is a fundamental element in UI design that serves as a toggle switch
1834
+ * to control the state of a specific setting or option in an application or website.
1835
+ * The two distinct positions of the Switch are visually indicative of the two states:
1836
+ * ON and OFF; making it easy for users to understand the current state of the controlled feature.
1837
+ * The Switch component is widely used in user interfaces to enable users to
1838
+ * quickly and intuitively change binary settings.
1839
+ * <limel-example-switch-vs-checkbox />
1821
1840
  * @exampleComponent limel-example-switch
1822
1841
  */
1823
1842
  interface LimelSwitch {
@@ -2329,6 +2348,18 @@ declare global {
2329
2348
  new (): HTMLLimelCalloutElement;
2330
2349
  };
2331
2350
  /**
2351
+ * The Checkbox component is a classic and essential element in UI design that allows
2352
+ * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
2353
+ * select one or more items from a list of choices.
2354
+ * ## States of a Checkbox
2355
+ * When a user clicks or taps on the box, it toggles between two states:
2356
+ * Checked and Unchecked.
2357
+ * However, a Checkbox can visualize a third state called the "Indeterminate" state.
2358
+ * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
2359
+ * The Indeterminate state is typically used when dealing with checkbox groups
2360
+ * that have hierarchical relationships or when the group contains sub-items.
2361
+ * This state is used to indicate that that some, but not all, of the items in a group are selected.
2362
+ * <limel-example-switch-vs-checkbox />
2332
2363
  * @exampleComponent limel-example-checkbox
2333
2364
  * @exampleComponent limel-example-checkbox-helper-text
2334
2365
  */
@@ -3075,6 +3106,13 @@ declare global {
3075
3106
  new (): HTMLLimelSplitButtonElement;
3076
3107
  };
3077
3108
  /**
3109
+ * The Switch component is a fundamental element in UI design that serves as a toggle switch
3110
+ * to control the state of a specific setting or option in an application or website.
3111
+ * The two distinct positions of the Switch are visually indicative of the two states:
3112
+ * ON and OFF; making it easy for users to understand the current state of the controlled feature.
3113
+ * The Switch component is widely used in user interfaces to enable users to
3114
+ * quickly and intuitively change binary settings.
3115
+ * <limel-example-switch-vs-checkbox />
3078
3116
  * @exampleComponent limel-example-switch
3079
3117
  */
3080
3118
  interface HTMLLimelSwitchElement extends Components.LimelSwitch, HTMLStencilElement {
@@ -3495,6 +3533,18 @@ declare namespace LocalJSX {
3495
3533
  "type"?: CalloutType;
3496
3534
  }
3497
3535
  /**
3536
+ * The Checkbox component is a classic and essential element in UI design that allows
3537
+ * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
3538
+ * select one or more items from a list of choices.
3539
+ * ## States of a Checkbox
3540
+ * When a user clicks or taps on the box, it toggles between two states:
3541
+ * Checked and Unchecked.
3542
+ * However, a Checkbox can visualize a third state called the "Indeterminate" state.
3543
+ * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
3544
+ * The Indeterminate state is typically used when dealing with checkbox groups
3545
+ * that have hierarchical relationships or when the group contains sub-items.
3546
+ * This state is used to indicate that that some, but not all, of the items in a group are selected.
3547
+ * <limel-example-switch-vs-checkbox />
3498
3548
  * @exampleComponent limel-example-checkbox
3499
3549
  * @exampleComponent limel-example-checkbox-helper-text
3500
3550
  */
@@ -5205,6 +5255,13 @@ declare namespace LocalJSX {
5205
5255
  "primary"?: boolean;
5206
5256
  }
5207
5257
  /**
5258
+ * The Switch component is a fundamental element in UI design that serves as a toggle switch
5259
+ * to control the state of a specific setting or option in an application or website.
5260
+ * The two distinct positions of the Switch are visually indicative of the two states:
5261
+ * ON and OFF; making it easy for users to understand the current state of the controlled feature.
5262
+ * The Switch component is widely used in user interfaces to enable users to
5263
+ * quickly and intuitively change binary settings.
5264
+ * <limel-example-switch-vs-checkbox />
5208
5265
  * @exampleComponent limel-example-switch
5209
5266
  */
5210
5267
  interface LimelSwitch {
@@ -5639,6 +5696,18 @@ declare module "@stencil/core" {
5639
5696
  */
5640
5697
  "limel-callout": LocalJSX.LimelCallout & JSXBase.HTMLAttributes<HTMLLimelCalloutElement>;
5641
5698
  /**
5699
+ * The Checkbox component is a classic and essential element in UI design that allows
5700
+ * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
5701
+ * select one or more items from a list of choices.
5702
+ * ## States of a Checkbox
5703
+ * When a user clicks or taps on the box, it toggles between two states:
5704
+ * Checked and Unchecked.
5705
+ * However, a Checkbox can visualize a third state called the "Indeterminate" state.
5706
+ * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
5707
+ * The Indeterminate state is typically used when dealing with checkbox groups
5708
+ * that have hierarchical relationships or when the group contains sub-items.
5709
+ * This state is used to indicate that that some, but not all, of the items in a group are selected.
5710
+ * <limel-example-switch-vs-checkbox />
5642
5711
  * @exampleComponent limel-example-checkbox
5643
5712
  * @exampleComponent limel-example-checkbox-helper-text
5644
5713
  */
@@ -6185,6 +6254,13 @@ declare module "@stencil/core" {
6185
6254
  */
6186
6255
  "limel-split-button": LocalJSX.LimelSplitButton & JSXBase.HTMLAttributes<HTMLLimelSplitButtonElement>;
6187
6256
  /**
6257
+ * The Switch component is a fundamental element in UI design that serves as a toggle switch
6258
+ * to control the state of a specific setting or option in an application or website.
6259
+ * The two distinct positions of the Switch are visually indicative of the two states:
6260
+ * ON and OFF; making it easy for users to understand the current state of the controlled feature.
6261
+ * The Switch component is widely used in user interfaces to enable users to
6262
+ * quickly and intuitively change binary settings.
6263
+ * <limel-example-switch-vs-checkbox />
6188
6264
  * @exampleComponent limel-example-switch
6189
6265
  */
6190
6266
  "limel-switch": LocalJSX.LimelSwitch & JSXBase.HTMLAttributes<HTMLLimelSwitchElement>;
@@ -1,2 +1,7 @@
1
+ /**
2
+ * Overrides the default browser behavior for clickable elements
3
+ * When focused and pressing down enter, avoids calling onClick repeatedly
4
+ * @param {HTMLElement} element the clickable element
5
+ */
1
6
  export declare function makeEnterClickable(element: HTMLElement): void;
2
7
  export declare function removeEnterClickable(element: HTMLElement): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@limetech/lime-elements",
3
- "version": "37.1.0-next.4",
3
+ "version": "37.1.0-next.6",
4
4
  "description": "Lime Elements",
5
5
  "author": "Lime Technologies",
6
6
  "license": "Apache-2.0",
@@ -40,7 +40,7 @@
40
40
  "generate": "stencil generate"
41
41
  },
42
42
  "devDependencies": {
43
- "@commitlint/config-conventional": "^17.6.6",
43
+ "@commitlint/config-conventional": "^17.6.7",
44
44
  "@popperjs/core": "^2.11.8",
45
45
  "@rjsf/core": "^2.4.2",
46
46
  "@stencil/core": "^3.4.1",
@@ -61,10 +61,10 @@
61
61
  "eslint": "^8.45.0",
62
62
  "eslint-config-prettier": "^8.8.0",
63
63
  "eslint-plugin-ban": "^1.6.0",
64
- "eslint-plugin-jsdoc": "^46.4.3",
64
+ "eslint-plugin-jsdoc": "^46.4.4",
65
65
  "eslint-plugin-prefer-arrow": "^1.2.3",
66
66
  "eslint-plugin-prettier": "^4.2.1",
67
- "eslint-plugin-react": "^7.32.2",
67
+ "eslint-plugin-react": "^7.33.0",
68
68
  "eslint-plugin-sonarjs": "^0.19.0",
69
69
  "flatpickr": "^4.6.13",
70
70
  "html-escaper": "^3.0.3",
@@ -1,2 +0,0 @@
1
- import{r as e,c as o,h as t}from"./p-3075aa67.js";import{d as r}from"./p-c70b1ea3.js";const n=':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(limel-collapsible-section){--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}:host([disabled]){pointer-events:none}.open-close-toggle{all:unset;position:absolute;inset:0;width:100%;transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;z-index:-1;background-color:var(--closed-header-background-color, rgb(var(--contrast-200)));border-radius:var(--border-radius-of-header)}.open-close-toggle:focus{outline:none}.open-close-toggle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}section.open .open-close-toggle{background-color:var(--open-header-background-color, rgb(var(--contrast-100)));border-radius:var(--border-radius-of-header) var(--border-radius-of-header) 0 0}section.open .open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.title,.divider-line,.expand-icon{pointer-events:none}header{isolation:isolate;position:relative;align-items:center;display:flex;justify-content:space-between;padding-left:0.625rem;padding-right:0.625rem;height:3rem}.title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-headline2-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline2-line-height, 0.875rem);font-weight:300;font-weight:var(--mdc-typography-headline2-font-weight, 300);letter-spacing:-0.0083333333em;letter-spacing:var(--mdc-typography-headline2-letter-spacing, -0.0083333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline2-text-transform, inherit);color:var(--mdc-theme-on-surface);justify-self:flex-start;padding-right:0.75rem;user-select:none;padding-right:0.5rem;height:auto;max-height:3rem;line-height:1.2rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:0.0625rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));margin-right:0.5rem;opacity:0}section.open .divider-line{opacity:0.16}.actions{justify-self:flex-end;flex-shrink:0}@keyframes fade-in-body{0%{opacity:0}100%{opacity:1}}.body{animation:fade-in-body 0.3s ease-in forwards;background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);margin-bottom:1.5rem;border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header);display:none;opacity:0}section.open .body{display:block}.body:before,.body:after{content:" ";display:table}.body:after{clear:both}.expand-icon{position:relative;height:1.875rem;margin:0 1rem 0 0.5rem;width:0.75rem;flex-shrink:0}.line{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;border-radius:1rem;height:0.125rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:first-of-type,.line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}.line:first-of-type{transform:rotate3d(0, 0, 1, 90deg)}.line:last-of-type{transform:rotate3d(0, 0, 1, -90deg)}.line:nth-of-type(2),.line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}section.open .line:first-of-type,section.open .line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}section.open .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:nth-of-type(2),section.open .line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}.open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -0.5rem, 0);opacity:0.4}.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 0.5rem, 0);opacity:0.4}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}';const a=class{constructor(n){e(this,n);this.open=o(this,"open",7);this.close=o(this,"close",7);this.action=o(this,"action",7);this.onClick=()=>{this.handleInteraction()};this.handleInteraction=()=>{this.isOpen=!this.isOpen;if(this.isOpen){this.open.emit();const e=100;setTimeout(r,e)}else{this.close.emit()}};this.renderActions=()=>{if(!this.actions){return}return t("div",{class:"actions"},this.actions.map(this.renderActionButton))};this.renderActionButton=e=>t("limel-icon-button",{icon:e.icon,label:e.label,disabled:e.disabled,onClick:this.handleActionClick(e)});this.handleActionClick=e=>o=>{o.stopPropagation();this.action.emit(e)};this.isOpen=false;this.header=undefined;this.actions=undefined}render(){return t("section",{class:`${this.isOpen?"open":""}`},t("header",null,t("button",{class:"open-close-toggle",onClick:this.onClick}),t("div",{class:"expand-icon"},t("div",{class:"line"}),t("div",{class:"line"}),t("div",{class:"line"}),t("div",{class:"line"})),t("h2",{class:"title mdc-typography mdc-typography--headline2"},this.header),t("div",{class:"divider-line"}),this.renderActions()),t("div",{class:"body"},t("slot",null)))}};a.style=n;export{a as limel_collapsible_section};
2
- //# sourceMappingURL=p-149f2418.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["collapsibleSectionCss","CollapsibleSection","this","onClick","handleInteraction","isOpen","open","emit","waitForUiToRender","setTimeout","dispatchResizeEvent","close","renderActions","actions","h","class","map","renderActionButton","action","icon","label","disabled","handleActionClick","event","stopPropagation","render","header"],"sources":["./src/components/collapsible-section/collapsible-section.scss?tag=limel-collapsible-section&encapsulation=shadow","./src/components/collapsible-section/collapsible-section.tsx"],"sourcesContent":["@use '../../style/internal/lime-theme';\n@use '../../style/internal/lime-typography';\n@use '../../style/functions';\n@use '../../style/mixins';\n\n/**\n * @prop --closed-header-background-color: background color for header when closed\n * @prop --open-header-background-color: background color for header when open\n * @prop --header-stroke-color: color of the animated icons that visualize collapsed or normal states of the headers, as well as the divider line on headers\n * @prop --body-background-color: background color for body\n * @prop --body-padding: space around content of the body\n */\n\n:host(limel-collapsible-section) {\n --border-radius-of-header: 0.75rem;\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n\n.open-close-toggle {\n all: unset;\n position: absolute;\n inset: 0;\n width: 100%; // for Firefox\n @include mixins.visualize-keyboard-focus;\n transition: background-color 0.4s ease, border-radius 0.1s ease;\n cursor: pointer;\n z-index: -1;\n\n background-color: var(\n --closed-header-background-color,\n rgb(var(--contrast-200))\n );\n border-radius: var(--border-radius-of-header);\n\n &:hover {\n background-color: var(\n --open-header-background-color,\n rgb(var(--contrast-300))\n );\n }\n\n section.open & {\n background-color: var(\n --open-header-background-color,\n rgb(var(--contrast-100))\n );\n border-radius: var(--border-radius-of-header)\n var(--border-radius-of-header) 0 0;\n &:hover {\n background-color: var(\n --open-header-background-color,\n rgb(var(--contrast-300))\n );\n }\n }\n}\n\n.title,\n.divider-line,\n.expand-icon {\n pointer-events: none;\n}\n\nheader {\n isolation: isolate;\n position: relative;\n\n align-items: center;\n display: flex;\n justify-content: space-between;\n\n padding-left: functions.pxToRem(10);\n padding-right: functions.pxToRem(10);\n height: functions.pxToRem(48);\n}\n\n.title {\n @include lime-typography.typography(headline2);\n color: var(--mdc-theme-on-surface);\n\n justify-self: flex-start;\n padding-right: functions.pxToRem(12);\n\n user-select: none; // mostly to improve experience on Android, where tapping on sections selects the text too\n\n padding-right: functions.pxToRem(8);\n\n // Below tries to render text in two lines,\n // and then truncate if there is no more space\n height: auto;\n max-height: 3rem;\n line-height: 1.2rem;\n white-space: normal;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.divider-line {\n transition: opacity 0.3s ease 0.3s;\n flex-grow: 1;\n height: functions.pxToRem(2);\n border-radius: functions.pxToRem(1);\n background-color: var(--header-stroke-color, rgb(var(--contrast-900)));\n margin-right: functions.pxToRem(8);\n\n opacity: 0;\n\n section.open & {\n opacity: 0.16;\n }\n}\n\n.actions {\n justify-self: flex-end;\n flex-shrink: 0;\n}\n\n@keyframes fade-in-body {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.body {\n animation: fade-in-body 0.3s ease-in forwards;\n background-color: var(--body-background-color, var(--contrast-100));\n padding-left: var(--body-padding, functions.pxToRem(20));\n padding-right: var(--body-padding, functions.pxToRem(20));\n margin-bottom: functions.pxToRem(24);\n border-radius: 0 0 var(--border-radius-of-header)\n var(--border-radius-of-header);\n\n display: none;\n opacity: 0;\n section.open & {\n display: block;\n }\n\n &:before,\n &:after {\n content: ' ';\n display: table;\n }\n\n &:after {\n clear: both;\n }\n}\n\n@import './partial-styles/expand-icon.scss';\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\n\n/**\n * @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n */\n@Component({\n tag: 'limel-collapsible-section',\n shadow: true,\n styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n /**\n * `true` if the section is expanded, `false` if collapsed.\n */\n @Prop({ mutable: true, reflect: true })\n public isOpen: boolean = false;\n\n /**\n * Text to display in the header of the section\n */\n @Prop({ reflect: true })\n public header: string;\n\n /**\n * Actions to place to the far right inside the header\n */\n @Prop()\n public actions: Action[];\n\n /**\n * Emitted when the section is expanded\n */\n @Event()\n private open: EventEmitter<void>;\n\n /**\n * Emitted when the section is collapsed\n */\n @Event()\n private close: EventEmitter<void>;\n\n /**\n * Emitted when an action is clicked inside the header\n */\n @Event()\n private action: EventEmitter<Action>;\n\n public render() {\n return (\n <section class={`${this.isOpen ? 'open' : ''}`}>\n <header>\n <button class=\"open-close-toggle\" onClick={this.onClick} />\n <div class=\"expand-icon\">\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n </div>\n <h2 class=\"title mdc-typography mdc-typography--headline2\">\n {this.header}\n </h2>\n <div class=\"divider-line\" />\n {this.renderActions()}\n </header>\n <div class=\"body\">\n <slot />\n </div>\n </section>\n );\n }\n\n private onClick = () => {\n this.handleInteraction();\n };\n\n private handleInteraction = () => {\n this.isOpen = !this.isOpen;\n\n if (this.isOpen) {\n this.open.emit();\n const waitForUiToRender = 100;\n setTimeout(dispatchResizeEvent, waitForUiToRender);\n } else {\n this.close.emit();\n }\n };\n\n private renderActions = () => {\n if (!this.actions) {\n return;\n }\n\n return (\n <div class=\"actions\">\n {this.actions.map(this.renderActionButton)}\n </div>\n );\n };\n\n private renderActionButton = (action: Action) => {\n return (\n <limel-icon-button\n icon={action.icon}\n label={action.label}\n disabled={action.disabled}\n onClick={this.handleActionClick(action)}\n />\n );\n };\n\n private handleActionClick = (action: Action) => (event: MouseEvent) => {\n event.stopPropagation();\n this.action.emit(action);\n };\n}\n"],"mappings":"sFAAA,MAAMA,EAAwB,o5M,MCiBjBC,EAAkB,M,gHA6DnBC,KAAAC,QAAU,KACdD,KAAKE,mBAAmB,EAGpBF,KAAAE,kBAAoB,KACxBF,KAAKG,QAAUH,KAAKG,OAEpB,GAAIH,KAAKG,OAAQ,CACbH,KAAKI,KAAKC,OACV,MAAMC,EAAoB,IAC1BC,WAAWC,EAAqBF,E,KAC7B,CACHN,KAAKS,MAAMJ,M,GAIXL,KAAAU,cAAgB,KACpB,IAAKV,KAAKW,QAAS,CACf,M,CAGJ,OACIC,EAAA,OAAKC,MAAM,WACNb,KAAKW,QAAQG,IAAId,KAAKe,oBACrB,EAINf,KAAAe,mBAAsBC,GAEtBJ,EAAA,qBACIK,KAAMD,EAAOC,KACbC,MAAOF,EAAOE,MACdC,SAAUH,EAAOG,SACjBlB,QAASD,KAAKoB,kBAAkBJ,KAKpChB,KAAAoB,kBAAqBJ,GAAoBK,IAC7CA,EAAMC,kBACNtB,KAAKgB,OAAOX,KAAKW,EAAO,E,YAjGH,M,6CAgClBO,SACH,OACIX,EAAA,WAASC,MAAO,GAAGb,KAAKG,OAAS,OAAS,MACtCS,EAAA,cACIA,EAAA,UAAQC,MAAM,oBAAoBZ,QAASD,KAAKC,UAChDW,EAAA,OAAKC,MAAM,eACPD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,UAEfD,EAAA,MAAIC,MAAM,kDACLb,KAAKwB,QAEVZ,EAAA,OAAKC,MAAM,iBACVb,KAAKU,iBAEVE,EAAA,OAAKC,MAAM,QACPD,EAAA,c"}
@@ -1,2 +0,0 @@
1
- import{f as t,r as o,h as e,g as r}from"./p-3075aa67.js";const n=new WeakMap;function a(o){if(n.has(o)){return}let e=false;let r=true;const a=r=>{if(r.key==="Enter"&&!e){e=true;t(o)}};const d=n=>{if(n.key==="Enter"&&e){e=false;r=true;t(o)}};const i=t=>{if(!e){return}if(r){r=false;return}t.stopImmediatePropagation()};n.set(o,{keydownHandler:a,keyupHandler:d,clickHandler:i});o.addEventListener("keydown",a);o.addEventListener("keyup",d);o.addEventListener("click",i,true)}function d(t){const o=n.get(t);if(!o||!n.has(t)){return}t.removeEventListener("keydown",o.keydownHandler);t.removeEventListener("keyup",o.keyupHandler);t.removeEventListener("click",o.clickHandler,true);n.delete(t)}const i=':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 )}.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color, #fff)}.mdc-button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:64px;border:none;outline:none;line-height:inherit;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle;background:transparent}.mdc-button .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-button::-moz-focus-inner{padding:0;border:0}.mdc-button:active{outline:none}.mdc-button:hover{cursor:pointer}.mdc-button:disabled{cursor:default;pointer-events:none}.mdc-button .mdc-button__icon{margin-left:0;margin-right:8px;display:inline-block;position:relative;vertical-align:top}[dir=rtl] .mdc-button .mdc-button__icon,.mdc-button .mdc-button__icon[dir=rtl]{margin-left:8px;margin-right:0;}.mdc-button .mdc-button__label{position:relative}.mdc-button .mdc-button__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-button__label+.mdc-button__icon{margin-left:8px;margin-right:0}[dir=rtl] .mdc-button__label+.mdc-button__icon,.mdc-button__label+.mdc-button__icon[dir=rtl]{margin-left:0;margin-right:8px;}svg.mdc-button__icon{fill:currentColor}.mdc-button--touch{margin-top:6px;margin-bottom:6px}.mdc-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none)}.mdc-button{padding:0 8px 0 8px}.mdc-button--unelevated{transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);padding:0 16px 0 16px}.mdc-button--unelevated.mdc-button--icon-trailing{padding:0 12px 0 16px}.mdc-button--unelevated.mdc-button--icon-leading{padding:0 16px 0 12px}.mdc-button--raised{transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);padding:0 16px 0 16px}.mdc-button--raised.mdc-button--icon-trailing{padding:0 12px 0 16px}.mdc-button--raised.mdc-button--icon-leading{padding:0 16px 0 12px}.mdc-button--outlined{border-style:solid;transition:border 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-button--outlined .mdc-button__ripple{border-style:solid;border-color:transparent}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity}.mdc-button .mdc-button__ripple::before,.mdc-button .mdc-button__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-button .mdc-button__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-button .mdc-button__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-button .mdc-button__ripple::before,.mdc-button .mdc-button__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-button .mdc-button__ripple{position:absolute;box-sizing:content-box;width:100%;height:100%;overflow:hidden;z-index:0}.mdc-button:not(.mdc-button--outlined) .mdc-button__ripple{top:0;left:0}.mdc-button{font-family:Roboto, sans-serif;font-family:var(--mdc-text-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));font-size:0.875rem;font-size:var(--mdc-text-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));letter-spacing:0.0892857143em;letter-spacing:var(--mdc-text-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));font-weight:500;font-weight:var(--mdc-text-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));text-transform:none;text-transform:var(--mdc-text-button-label-text-transform, var(--mdc-typography-button-text-transform, none));height:36px;height:var(--mdc-text-button-container-height, 36px);border-radius:4px;border-radius:var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px))}.mdc-button:not(:disabled){color:#26a69a;color:var(--mdc-text-button-label-text-color, var(--mdc-theme-primary, #26a69a))}.mdc-button:disabled{color:rgba(0, 0, 0, 0.38);color:var(--mdc-text-button-disabled-label-text-color, rgba(0, 0, 0, 0.38))}.mdc-button .mdc-button__icon{font-size:1.125rem;font-size:var(--mdc-text-button-with-icon-icon-size, 1.125rem);width:1.125rem;width:var(--mdc-text-button-with-icon-icon-size, 1.125rem);height:1.125rem;height:var(--mdc-text-button-with-icon-icon-size, 1.125rem)}.mdc-button .mdc-button__ripple::before,.mdc-button .mdc-button__ripple::after{background-color:#26a69a;background-color:var(--mdc-text-button-hover-state-layer-color, var(--mdc-theme-primary, #26a69a))}.mdc-button:hover .mdc-button__ripple::before,.mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before{opacity:0.04;opacity:var(--mdc-text-button-hover-state-layer-opacity, 0.04)}.mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-text-button-focus-state-layer-opacity, 0.12)}.mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after{transition:opacity 150ms linear}.mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-text-button-pressed-state-layer-opacity, 0.12)}.mdc-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-text-button-pressed-state-layer-opacity, 0.12)}.mdc-button .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px))}.mdc-button--unelevated{font-family:Roboto, sans-serif;font-family:var(--mdc-filled-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));font-size:0.875rem;font-size:var(--mdc-filled-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));letter-spacing:0.0892857143em;letter-spacing:var(--mdc-filled-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));font-weight:500;font-weight:var(--mdc-filled-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));text-transform:none;text-transform:var(--mdc-filled-button-label-text-transform, var(--mdc-typography-button-text-transform, none));height:36px;height:var(--mdc-filled-button-container-height, 36px);border-radius:4px;border-radius:var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px))}.mdc-button--unelevated:not(:disabled){background-color:#26a69a;background-color:var(--mdc-filled-button-container-color, var(--mdc-theme-primary, #26a69a))}.mdc-button--unelevated:disabled{background-color:rgba(0, 0, 0, 0.12);background-color:var(--mdc-filled-button-disabled-container-color, rgba(0, 0, 0, 0.12))}.mdc-button--unelevated:not(:disabled){color:#fff;color:var(--mdc-filled-button-label-text-color, var(--mdc-theme-on-primary, #fff))}.mdc-button--unelevated:disabled{color:rgba(0, 0, 0, 0.38);color:var(--mdc-filled-button-disabled-label-text-color, rgba(0, 0, 0, 0.38))}.mdc-button--unelevated .mdc-button__icon{font-size:1.125rem;font-size:var(--mdc-filled-button-with-icon-icon-size, 1.125rem);width:1.125rem;width:var(--mdc-filled-button-with-icon-icon-size, 1.125rem);height:1.125rem;height:var(--mdc-filled-button-with-icon-icon-size, 1.125rem)}.mdc-button--unelevated .mdc-button__ripple::before,.mdc-button--unelevated .mdc-button__ripple::after{background-color:#fff;background-color:var(--mdc-filled-button-hover-state-layer-color, var(--mdc-theme-on-primary, #fff))}.mdc-button--unelevated:hover .mdc-button__ripple::before,.mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before{opacity:0.08;opacity:var(--mdc-filled-button-hover-state-layer-opacity, 0.08)}.mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-filled-button-focus-state-layer-opacity, 0.24)}.mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after{transition:opacity 150ms linear}.mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-filled-button-pressed-state-layer-opacity, 0.24)}.mdc-button--unelevated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-filled-button-pressed-state-layer-opacity, 0.24)}.mdc-button--unelevated .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px))}.mdc-button--raised{font-family:Roboto, sans-serif;font-family:var(--mdc-protected-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));font-size:0.875rem;font-size:var(--mdc-protected-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));letter-spacing:0.0892857143em;letter-spacing:var(--mdc-protected-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));font-weight:500;font-weight:var(--mdc-protected-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));text-transform:none;text-transform:var(--mdc-protected-button-label-text-transform, var(--mdc-typography-button-text-transform, none));height:36px;height:var(--mdc-protected-button-container-height, 36px);border-radius:4px;border-radius:var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px));box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);box-shadow:var(--mdc-protected-button-container-elevation, var(--mdc-elevation-box-shadow-for-gss));--mdc-elevation-box-shadow-for-gss:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)}.mdc-button--raised:not(:disabled){background-color:#26a69a;background-color:var(--mdc-protected-button-container-color, var(--mdc-theme-primary, #26a69a))}.mdc-button--raised:disabled{background-color:rgba(0, 0, 0, 0.12);background-color:var(--mdc-protected-button-disabled-container-color, rgba(0, 0, 0, 0.12))}.mdc-button--raised:not(:disabled){color:#fff;color:var(--mdc-protected-button-label-text-color, var(--mdc-theme-on-primary, #fff))}.mdc-button--raised:disabled{color:rgba(0, 0, 0, 0.38);color:var(--mdc-protected-button-disabled-label-text-color, rgba(0, 0, 0, 0.38))}.mdc-button--raised .mdc-button__icon{font-size:1.125rem;font-size:var(--mdc-protected-button-with-icon-icon-size, 1.125rem);width:1.125rem;width:var(--mdc-protected-button-with-icon-icon-size, 1.125rem);height:1.125rem;height:var(--mdc-protected-button-with-icon-icon-size, 1.125rem)}.mdc-button--raised .mdc-button__ripple::before,.mdc-button--raised .mdc-button__ripple::after{background-color:#fff;background-color:var(--mdc-protected-button-hover-state-layer-color, var(--mdc-theme-on-primary, #fff))}.mdc-button--raised:hover .mdc-button__ripple::before,.mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before{opacity:0.08;opacity:var(--mdc-protected-button-hover-state-layer-opacity, 0.08)}.mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-protected-button-focus-state-layer-opacity, 0.24)}.mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after{transition:opacity 150ms linear}.mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-protected-button-pressed-state-layer-opacity, 0.24)}.mdc-button--raised.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-protected-button-pressed-state-layer-opacity, 0.24)}.mdc-button--raised .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px))}.mdc-button--raised.mdc-ripple-upgraded--background-focused,.mdc-button--raised:not(.mdc-ripple-upgraded):focus{box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);box-shadow:var(--mdc-protected-button-focus-container-elevation, var(--mdc-elevation-box-shadow-for-gss));--mdc-elevation-box-shadow-for-gss:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)}.mdc-button--raised:hover{box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);box-shadow:var(--mdc-protected-button-hover-container-elevation, var(--mdc-elevation-box-shadow-for-gss));--mdc-elevation-box-shadow-for-gss:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)}.mdc-button--raised:not(:disabled):active{box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);box-shadow:var(--mdc-protected-button-pressed-container-elevation, var(--mdc-elevation-box-shadow-for-gss));--mdc-elevation-box-shadow-for-gss:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}.mdc-button--raised:disabled{box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);box-shadow:var(--mdc-protected-button-disabled-container-elevation, var(--mdc-elevation-box-shadow-for-gss));--mdc-elevation-box-shadow-for-gss:0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)}.mdc-button--outlined{font-family:Roboto, sans-serif;font-family:var(--mdc-outlined-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));font-size:0.875rem;font-size:var(--mdc-outlined-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));letter-spacing:0.0892857143em;letter-spacing:var(--mdc-outlined-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));font-weight:500;font-weight:var(--mdc-outlined-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));text-transform:none;text-transform:var(--mdc-outlined-button-label-text-transform, var(--mdc-typography-button-text-transform, none));height:36px;height:var(--mdc-outlined-button-container-height, 36px);border-radius:4px;border-radius:var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px));padding:0 15px 0 15px;border-width:1px;border-width:var(--mdc-outlined-button-outline-width, 1px)}.mdc-button--outlined:not(:disabled){color:#26a69a;color:var(--mdc-outlined-button-label-text-color, var(--mdc-theme-primary, #26a69a))}.mdc-button--outlined:disabled{color:rgba(0, 0, 0, 0.38);color:var(--mdc-outlined-button-disabled-label-text-color, rgba(0, 0, 0, 0.38))}.mdc-button--outlined .mdc-button__icon{font-size:1.125rem;font-size:var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);width:1.125rem;width:var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);height:1.125rem;height:var(--mdc-outlined-button-with-icon-icon-size, 1.125rem)}.mdc-button--outlined .mdc-button__ripple::before,.mdc-button--outlined .mdc-button__ripple::after{background-color:#26a69a;background-color:var(--mdc-outlined-button-hover-state-layer-color, var(--mdc-theme-primary, #26a69a))}.mdc-button--outlined:hover .mdc-button__ripple::before,.mdc-button--outlined.mdc-ripple-surface--hover .mdc-button__ripple::before{opacity:0.04;opacity:var(--mdc-outlined-button-hover-state-layer-opacity, 0.04)}.mdc-button--outlined.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.mdc-button--outlined:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-outlined-button-focus-state-layer-opacity, 0.12)}.mdc-button--outlined:not(.mdc-ripple-upgraded) .mdc-button__ripple::after{transition:opacity 150ms linear}.mdc-button--outlined:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12)}.mdc-button--outlined.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12)}.mdc-button--outlined .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px))}.mdc-button--outlined:not(:disabled){border-color:rgba(0, 0, 0, 0.12);border-color:var(--mdc-outlined-button-outline-color, rgba(0, 0, 0, 0.12))}.mdc-button--outlined:disabled{border-color:rgba(0, 0, 0, 0.12);border-color:var(--mdc-outlined-button-disabled-outline-color, rgba(0, 0, 0, 0.12))}.mdc-button--outlined.mdc-button--icon-trailing{padding:0 11px 0 15px}.mdc-button--outlined.mdc-button--icon-leading{padding:0 15px 0 11px}.mdc-button--outlined .mdc-button__ripple{top:calc(-1 * 1px);top:calc(-1 * var(--mdc-outlined-button-outline-width, 1px));left:calc(-1 * 1px);left:calc(-1 * var(--mdc-outlined-button-outline-width, 1px));border-width:1px;border-width:var(--mdc-outlined-button-outline-width, 1px)}.mdc-button--outlined .mdc-button__touch{left:calc(-1 * 1px);left:calc(-1 * var(--mdc-outlined-button-outline-width, 1px));width:calc(100% + 2 * 1px);width:calc(100% + 2 * var(--mdc-outlined-button-outline-width, 1px))}.mdc-button--raised .mdc-button__icon,.mdc-button--unelevated .mdc-button__icon,.mdc-button--outlined .mdc-button__icon{margin-left:-4px;margin-right:8px}[dir=rtl] .mdc-button--raised .mdc-button__icon,[dir=rtl] .mdc-button--unelevated .mdc-button__icon,[dir=rtl] .mdc-button--outlined .mdc-button__icon,.mdc-button--raised .mdc-button__icon[dir=rtl],.mdc-button--unelevated .mdc-button__icon[dir=rtl],.mdc-button--outlined .mdc-button__icon[dir=rtl]{margin-left:8px;margin-right:-4px;}.mdc-button--raised .mdc-button__label+.mdc-button__icon,.mdc-button--unelevated .mdc-button__label+.mdc-button__icon,.mdc-button--outlined .mdc-button__label+.mdc-button__icon{margin-left:8px;margin-right:-4px}[dir=rtl] .mdc-button--raised .mdc-button__label+.mdc-button__icon,[dir=rtl] .mdc-button--unelevated .mdc-button__label+.mdc-button__icon,[dir=rtl] .mdc-button--outlined .mdc-button__label+.mdc-button__icon,.mdc-button--raised .mdc-button__label+.mdc-button__icon[dir=rtl],.mdc-button--unelevated .mdc-button__label+.mdc-button__icon[dir=rtl],.mdc-button--outlined .mdc-button__label+.mdc-button__icon[dir=rtl]{margin-left:-4px;margin-right:8px;}:host{display:inline-block}:host([hidden]){display:none}:host([disabled]){pointer-events:none}button.mdc-button{min-width:2.25rem;padding-top:0;padding-right:var(--button-padding-right, 0.75rem);padding-bottom:0;padding-left:var(--button-padding-left, 0.75rem);height:100%;min-height:2.25rem;width:100%}button.mdc-button:not(:disabled){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}button.mdc-button:not(:disabled):focus{outline:none}button.mdc-button:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.mdc-button:not(:disabled):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button.mdc-button:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}:host(limel-button[primary]) button.mdc-button:not(:disabled){color:var(--mdc-theme-on-primary, rgb(var(--color-white)));background-color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}:host(limel-button[primary]) button.mdc-button:disabled{background-color:rgba(var(--contrast-1700), 0.15)}:host(limel-button:not([primary])) button.mdc-button:not(:disabled){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}:host(limel-button:not([primary])) button.mdc-button:disabled{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1)}button.mdc-button:disabled.mdc-button--outlined{border-color:rgba(var(--contrast-1700), 0.2)}button.mdc-button .mdc-button__icon{flex-shrink:0;margin-left:-0.25rem}button.mdc-button .mdc-button__icon.no-label{margin-right:-0.25rem}button .label{opacity:1}button limel-spinner{opacity:0;display:none;position:absolute}button limel-icon{vertical-align:top}button svg{height:1.875rem;opacity:0;pointer-events:none;position:absolute;width:1.875rem}button svg line{stroke:rgb(var(--color-white));stroke-width:2}button limel-icon,button .label,button limel-spinner,button svg{transition:opacity 300ms ease-in-out}button.loading limel-icon,button.loading .label{opacity:0}button.loading limel-spinner{opacity:1;display:block}button.just-loaded limel-icon,button.just-loaded .label,button.just-failed limel-icon,button.just-failed .label{opacity:0}button.just-loaded svg,button.just-failed svg{opacity:1}button.just-loaded limel-spinner,button.just-failed limel-spinner{display:block;animation:fade-out-spinner 0.3s ease}button.just-failed{background-color:var(--lime-error-text-color) !important;animation:shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}.mdc-button--outlined:not(:disabled){border-color:#26a69a;border-color:var(--mdc-theme-primary, #26a69a)}@keyframes fade-out-spinner{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}@keyframes shake{10%,90%{transform:translate3d(-0.0625rem, 0, 0)}20%,80%{transform:translate3d(0.125rem, 0, 0)}30%,50%,70%{transform:translate3d(-0.1875rem, 0, 0)}40%,60%{transform:translate3d(0.1875rem, 0, 0)}}@keyframes reduced-presence{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.7)}}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded){animation:reduced-presence 0.3s ease forwards;transition:padding 0.3s ease, min-width 0.3s ease;transition-delay:0.3s;padding:0;min-width:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .label{transition:font-size 0.8s ease;transition-delay:0.3s;font-size:0;opacity:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-icon,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-spinner,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) svg,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .mdc-button__icon{transition:all 0.3s ease;transition-delay:0.3s;opacity:0;width:0;height:0}';const c=class{constructor(t){o(this,t);this.label=undefined;this.primary=false;this.outlined=false;this.icon=undefined;this.disabled=false;this.loading=false;this.loadingFailed=false;this.justLoaded=false}componentWillLoad(){a(this.host)}disconnectedCallback(){d(this.host)}render(){return e("button",{class:{"mdc-button":true,loading:this.loading,"just-loaded":this.justLoaded&&!this.loadingFailed,"just-failed":this.justLoaded&&this.loadingFailed,"mdc-button--outlined":this.outlined},disabled:this.disabled||this.loading},this.renderIcon(),e("span",{class:"label mdc-button__label"},this.label),e("limel-spinner",{limeBranded:false}),e("svg",{viewBox:"0 0 30 30"},this.renderLoadingIcons()))}loadingWatcher(t,o){if(o&&!t){this.justLoaded=true;const t=2e3;this.justLoadedTimeout=window.setTimeout((()=>{this.justLoaded=false}),t)}else if(t){this.justLoaded=false;window.clearTimeout(this.justLoadedTimeout)}}renderLoadingIcons(){if(this.loadingFailed){return[e("line",{x1:"9",y1:"9",x2:"21",y2:"21"}),e("line",{x1:"21",y1:"9",x2:"9",y2:"21"})]}return[e("line",{x1:"8",y1:"14",x2:"15",y2:"20"}),e("line",{x1:"23",y1:"9",x2:"14",y2:"20"})]}renderIcon(){if(!this.icon){return}let t="";if(!this.label){t="no-label"}return e("i",{class:`mdc-button__icon ${t}`},e("limel-icon",{name:this.icon}))}get host(){return r(this)}static get watchers(){return{loading:["loadingWatcher"]}}};c.style=i;export{c as limel_button};
2
- //# sourceMappingURL=p-c018e82f.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["eventHandlers","WeakMap","makeEnterClickable","element","has","isActive","hasJustReleasedEnter","keydownHandler","event","key","forceUpdate","keyupHandler","clickHandler","stopImmediatePropagation","set","addEventListener","removeEnterClickable","callBacks","get","removeEventListener","delete","buttonCss","Button","componentWillLoad","this","host","disconnectedCallback","render","h","class","loading","justLoaded","loadingFailed","outlined","disabled","renderIcon","label","limeBranded","viewBox","renderLoadingIcons","loadingWatcher","newValue","oldValue","TIMEOUT","justLoadedTimeout","window","setTimeout","clearTimeout","x1","y1","x2","y2","icon","withoutLabelClass","name"],"sources":["./src/util/makeEnterClickable.ts","./src/components/button/button.scss?tag=limel-button&encapsulation=shadow","./src/components/button/button.tsx"],"sourcesContent":["import { forceUpdate } from '@stencil/core';\n\nconst eventHandlers: WeakMap<HTMLElement, CallBacks> = new WeakMap();\n\nexport function makeEnterClickable(element: HTMLElement) {\n if (eventHandlers.has(element)) {\n return;\n }\n\n let isActive = false;\n let hasJustReleasedEnter = true;\n\n const keydownHandler = (event: KeyboardEvent) => {\n if (event.key === 'Enter' && !isActive) {\n isActive = true;\n\n forceUpdate(element);\n }\n };\n\n const keyupHandler = (event: KeyboardEvent) => {\n if (event.key === 'Enter' && isActive) {\n isActive = false;\n hasJustReleasedEnter = true;\n\n forceUpdate(element);\n }\n };\n\n const clickHandler = (event: MouseEvent) => {\n if (!isActive) {\n return;\n }\n\n if (hasJustReleasedEnter) {\n hasJustReleasedEnter = false;\n\n return;\n }\n\n event.stopImmediatePropagation();\n };\n\n eventHandlers.set(element, {\n keydownHandler: keydownHandler,\n keyupHandler: keyupHandler,\n clickHandler: clickHandler,\n });\n\n element.addEventListener('keydown', keydownHandler);\n element.addEventListener('keyup', keyupHandler);\n element.addEventListener('click', clickHandler, true);\n}\n\nexport function removeEnterClickable(element: HTMLElement) {\n const callBacks: CallBacks = eventHandlers.get(element);\n\n if (!callBacks || !eventHandlers.has(element)) {\n return;\n }\n\n element.removeEventListener('keydown', callBacks.keydownHandler);\n element.removeEventListener('keyup', callBacks.keyupHandler);\n element.removeEventListener('click', callBacks.clickHandler, true);\n\n eventHandlers.delete(element);\n}\n\ninterface CallBacks {\n keydownHandler: (arg: KeyboardEvent) => void;\n keyupHandler: (arg: KeyboardEvent) => void;\n clickHandler: (arg: MouseEvent) => void;\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n@use '../../style/internal/lime-theme';\n\n@use '@material/button/styles';\n@use '@material/button';\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n\nbutton {\n &.mdc-button {\n min-width: functions.pxToRem(36);\n padding: {\n top: 0;\n right: var(--button-padding-right, #{functions.pxToRem(12)});\n bottom: 0;\n left: var(--button-padding-left, #{functions.pxToRem(12)});\n }\n height: 100%;\n min-height: functions.pxToRem(36);\n width: 100%;\n\n &:not(:disabled) {\n @include mixins.visualize-keyboard-focus;\n @include mixins.is-elevated-clickable();\n }\n\n :host(limel-button[primary]) & {\n &:not(:disabled) {\n color: var(--mdc-theme-on-primary, rgb(var(--color-white)));\n background-color: var(\n --mdc-theme-primary,\n rgb(var(--color-teal-default))\n );\n }\n &:disabled {\n background-color: rgba(var(--contrast-1700), 0.15);\n }\n }\n\n :host(limel-button:not([primary])) & {\n &:not(:disabled) {\n color: var(--mdc-theme-primary, rgb(var(--color-teal-default)));\n }\n &:disabled {\n color: rgba(var(--contrast-1600), 0.37);\n background-color: rgba(var(--contrast-1600), 0.1);\n }\n }\n\n &:disabled {\n &.mdc-button--outlined {\n border-color: rgba(var(--contrast-1700), 0.2);\n }\n }\n\n .mdc-button__icon {\n flex-shrink: 0;\n margin-left: functions.pxToRem(-4);\n\n &.no-label {\n margin-right: functions.pxToRem(-4);\n }\n }\n }\n\n .label {\n opacity: 1;\n }\n\n limel-spinner {\n opacity: 0;\n display: none;\n position: absolute;\n }\n\n limel-icon {\n vertical-align: top;\n }\n\n svg {\n height: functions.pxToRem(30);\n opacity: 0;\n pointer-events: none;\n position: absolute;\n width: functions.pxToRem(30);\n\n line {\n stroke: rgb(var(--color-white));\n stroke-width: 2;\n }\n }\n\n limel-icon,\n .label,\n limel-spinner,\n svg {\n transition: opacity 300ms ease-in-out;\n }\n\n &.loading {\n limel-icon,\n .label {\n opacity: 0;\n }\n limel-spinner {\n opacity: 1;\n display: block;\n }\n }\n\n &.just-loaded,\n &.just-failed {\n limel-icon,\n .label {\n opacity: 0;\n }\n svg {\n opacity: 1;\n }\n limel-spinner {\n display: block;\n animation: fade-out-spinner 0.3s ease;\n }\n }\n\n &.just-failed {\n background-color: var(--lime-error-text-color) !important;\n animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n }\n}\n\n.mdc-button--outlined {\n @include button.outline-color(primary);\n}\n\n@keyframes fade-out-spinner {\n 0% {\n opacity: 1;\n transform: scale(1);\n }\n 100% {\n opacity: 0;\n transform: scale(1.5);\n }\n}\n\n@keyframes shake {\n 10%,\n 90% {\n transform: translate3d(#{functions.pxToRem(-1)}, 0, 0);\n }\n\n 20%,\n 80% {\n transform: translate3d(#{functions.pxToRem(2)}, 0, 0);\n }\n\n 30%,\n 50%,\n 70% {\n transform: translate3d(#{functions.pxToRem(-3)}, 0, 0);\n }\n\n 40%,\n 60% {\n transform: translate3d(#{functions.pxToRem(3)}, 0, 0);\n }\n}\n\n@import './partial-styles/_has-reduced-presence';\n","import { Component, h, Prop, State, Watch, Element } from '@stencil/core';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/makeEnterClickable';\n\n/**\n * @exampleComponent limel-example-button-basic\n * @exampleComponent limel-example-button-primary\n * @exampleComponent limel-example-button-outlined\n * @exampleComponent limel-example-button-disabled\n * @exampleComponent limel-example-button-icon\n * @exampleComponent limel-example-button-loading\n * @exampleComponent limel-example-button-click-success\n * @exampleComponent limel-example-button-click-fail\n * @exampleComponent limel-example-button-reduce-presence\n * @exampleComponent limel-example-button-colors\n * @exampleComponent limel-example-button-composite\n */\n@Component({\n tag: 'limel-button',\n shadow: true,\n styleUrl: 'button.scss',\n})\nexport class Button {\n /**\n * The text to show on the button.\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * Set to `true` to make the button primary.\n */\n @Prop({ reflect: true })\n public primary = false;\n\n /**\n * Set to `true` to make the button outlined.\n */\n @Prop({ reflect: true })\n public outlined = false;\n\n /**\n * Set icon for the button\n */\n @Prop({ reflect: true })\n public icon: string;\n\n /**\n * Set to `true` to disable the button.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to put the button in the `loading` state.\n * This also disables the button.\n */\n @Prop({ reflect: true })\n public loading = false;\n\n /**\n * Set to `true` to indicate failure instead of success when the button is\n * no longer in the `loading` state.\n */\n @Prop({ reflect: true })\n public loadingFailed = false;\n\n @State()\n private justLoaded = false;\n\n @Element()\n private host: HTMLElement;\n\n private justLoadedTimeout?: number;\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n return (\n <button\n class={{\n 'mdc-button': true,\n loading: this.loading,\n 'just-loaded': this.justLoaded && !this.loadingFailed,\n 'just-failed': this.justLoaded && this.loadingFailed,\n 'mdc-button--outlined': this.outlined,\n }}\n disabled={this.disabled || this.loading}\n >\n {this.renderIcon()}\n <span class=\"label mdc-button__label\">{this.label}</span>\n <limel-spinner limeBranded={false} />\n <svg viewBox=\"0 0 30 30\">{this.renderLoadingIcons()}</svg>\n </button>\n );\n }\n\n @Watch('loading')\n protected loadingWatcher(newValue: boolean, oldValue: boolean) {\n if (oldValue && !newValue) {\n this.justLoaded = true;\n const TIMEOUT = 2000;\n this.justLoadedTimeout = window.setTimeout(() => {\n this.justLoaded = false;\n }, TIMEOUT);\n } else if (newValue) {\n this.justLoaded = false;\n window.clearTimeout(this.justLoadedTimeout);\n }\n }\n\n private renderLoadingIcons() {\n if (this.loadingFailed) {\n return [\n <line x1=\"9\" y1=\"9\" x2=\"21\" y2=\"21\"></line>,\n <line x1=\"21\" y1=\"9\" x2=\"9\" y2=\"21\"></line>,\n ];\n }\n\n return [\n <line x1=\"8\" y1=\"14\" x2=\"15\" y2=\"20\"></line>,\n <line x1=\"23\" y1=\"9\" x2=\"14\" y2=\"20\"></line>,\n ];\n }\n\n private renderIcon(): HTMLElement {\n if (!this.icon) {\n return;\n }\n\n let withoutLabelClass = '';\n if (!this.label) {\n withoutLabelClass = 'no-label';\n }\n\n return (\n <i class={`mdc-button__icon ${withoutLabelClass}`}>\n <limel-icon name={this.icon} />\n </i>\n );\n }\n}\n"],"mappings":"yDAEA,MAAMA,EAAiD,IAAIC,Q,SAE3CC,EAAmBC,GAC/B,GAAIH,EAAcI,IAAID,GAAU,CAC5B,M,CAGJ,IAAIE,EAAW,MACf,IAAIC,EAAuB,KAE3B,MAAMC,EAAkBC,IACpB,GAAIA,EAAMC,MAAQ,UAAYJ,EAAU,CACpCA,EAAW,KAEXK,EAAYP,E,GAIpB,MAAMQ,EAAgBH,IAClB,GAAIA,EAAMC,MAAQ,SAAWJ,EAAU,CACnCA,EAAW,MACXC,EAAuB,KAEvBI,EAAYP,E,GAIpB,MAAMS,EAAgBJ,IAClB,IAAKH,EAAU,CACX,M,CAGJ,GAAIC,EAAsB,CACtBA,EAAuB,MAEvB,M,CAGJE,EAAMK,0BAA0B,EAGpCb,EAAcc,IAAIX,EAAS,CACvBI,eAAgBA,EAChBI,aAAcA,EACdC,aAAcA,IAGlBT,EAAQY,iBAAiB,UAAWR,GACpCJ,EAAQY,iBAAiB,QAASJ,GAClCR,EAAQY,iBAAiB,QAASH,EAAc,KACpD,C,SAEgBI,EAAqBb,GACjC,MAAMc,EAAuBjB,EAAckB,IAAIf,GAE/C,IAAKc,IAAcjB,EAAcI,IAAID,GAAU,CAC3C,M,CAGJA,EAAQgB,oBAAoB,UAAWF,EAAUV,gBACjDJ,EAAQgB,oBAAoB,QAASF,EAAUN,cAC/CR,EAAQgB,oBAAoB,QAASF,EAAUL,aAAc,MAE7DZ,EAAcoB,OAAOjB,EACzB,CClEA,MAAMkB,EAAY,gryB,MCwBLC,EAAM,M,2DAWE,M,cAMC,M,kCAYA,M,aAOD,M,mBAOM,M,gBAGF,K,CAOdC,oBACHrB,EAAmBsB,KAAKC,K,CAGrBC,uBACHV,EAAqBQ,KAAKC,K,CAGvBE,SACH,OACIC,EAAA,UACIC,MAAO,CACH,aAAc,KACdC,QAASN,KAAKM,QACd,cAAeN,KAAKO,aAAeP,KAAKQ,cACxC,cAAeR,KAAKO,YAAcP,KAAKQ,cACvC,uBAAwBR,KAAKS,UAEjCC,SAAUV,KAAKU,UAAYV,KAAKM,SAE/BN,KAAKW,aACNP,EAAA,QAAMC,MAAM,2BAA2BL,KAAKY,OAC5CR,EAAA,iBAAeS,YAAa,QAC5BT,EAAA,OAAKU,QAAQ,aAAad,KAAKe,sB,CAMjCC,eAAeC,EAAmBC,GACxC,GAAIA,IAAaD,EAAU,CACvBjB,KAAKO,WAAa,KAClB,MAAMY,EAAU,IAChBnB,KAAKoB,kBAAoBC,OAAOC,YAAW,KACvCtB,KAAKO,WAAa,KAAK,GACxBY,E,MACA,GAAIF,EAAU,CACjBjB,KAAKO,WAAa,MAClBc,OAAOE,aAAavB,KAAKoB,kB,EAIzBL,qBACJ,GAAIf,KAAKQ,cAAe,CACpB,MAAO,CACHJ,EAAA,QAAMoB,GAAG,IAAIC,GAAG,IAAIC,GAAG,KAAKC,GAAG,OAC/BvB,EAAA,QAAMoB,GAAG,KAAKC,GAAG,IAAIC,GAAG,IAAIC,GAAG,O,CAIvC,MAAO,CACHvB,EAAA,QAAMoB,GAAG,IAAIC,GAAG,KAAKC,GAAG,KAAKC,GAAG,OAChCvB,EAAA,QAAMoB,GAAG,KAAKC,GAAG,IAAIC,GAAG,KAAKC,GAAG,O,CAIhChB,aACJ,IAAKX,KAAK4B,KAAM,CACZ,M,CAGJ,IAAIC,EAAoB,GACxB,IAAK7B,KAAKY,MAAO,CACbiB,EAAoB,U,CAGxB,OACIzB,EAAA,KAAGC,MAAO,oBAAoBwB,KAC1BzB,EAAA,cAAY0B,KAAM9B,KAAK4B,O"}