@limetech/lime-elements 37.61.6 → 37.61.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/dist/cjs/limel-button.cjs.entry.js +1 -1
- package/dist/cjs/limel-button.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-icon_2.cjs.entry.js +1 -1
- package/dist/cjs/limel-icon_2.cjs.entry.js.map +1 -1
- package/dist/collection/components/button/button.js +1 -1
- package/dist/collection/components/button/button.js.map +1 -1
- package/dist/collection/components/icon/icon.css +13 -19
- package/dist/esm/limel-button.entry.js +1 -1
- package/dist/esm/limel-button.entry.js.map +1 -1
- package/dist/esm/limel-icon_2.entry.js +1 -1
- package/dist/esm/limel-icon_2.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-441c0259.entry.js +2 -0
- package/dist/lime-elements/p-441c0259.entry.js.map +1 -0
- package/dist/lime-elements/{p-89764bae.entry.js → p-c1cbba2c.entry.js} +2 -2
- package/dist/lime-elements/{p-89764bae.entry.js.map → p-c1cbba2c.entry.js.map} +1 -1
- package/package.json +1 -1
- package/dist/lime-elements/p-5862b851.entry.js +0 -2
- package/dist/lime-elements/p-5862b851.entry.js.map +0 -1
|
@@ -41,7 +41,7 @@ export class Button {
|
|
|
41
41
|
'just-loaded': this.justLoaded && !this.loadingFailed,
|
|
42
42
|
'just-failed': this.justLoaded && this.loadingFailed,
|
|
43
43
|
outlined: this.outlined,
|
|
44
|
-
}, disabled: this.disabled || this.loading }, this.renderIcon(), this.renderLabel(), this.renderSpinner(), h("svg", { viewBox: "0 0 30 30" }, this.renderLoadingIcons()))));
|
|
44
|
+
}, disabled: this.disabled || this.loading, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite" }, this.renderIcon(), this.renderLabel(), this.renderSpinner(), h("svg", { viewBox: "0 0 30 30" }, this.renderLoadingIcons()))));
|
|
45
45
|
}
|
|
46
46
|
loadingWatcher(newValue, oldValue) {
|
|
47
47
|
if (oldValue && !newValue) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,iCAAiC,CAAC;AAEzC;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,MAAM;;
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Watch, Element, Host } from '@stencil/core';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\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: { delegatesFocus: 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 <Host onClick={this.filterClickWhenDisabled}>\n <button\n class={{\n loading: this.loading,\n 'just-loaded': this.justLoaded && !this.loadingFailed,\n 'just-failed': this.justLoaded && this.loadingFailed,\n outlined: this.outlined,\n }}\n disabled={this.disabled || this.loading}\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderSpinner()}\n <svg viewBox=\"0 0 30 30\">{this.renderLoadingIcons()}</svg>\n </button>\n </Host>\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\" />,\n <line x1=\"21\" y1=\"9\" x2=\"9\" y2=\"21\" />,\n ];\n }\n\n return [\n <line x1=\"8\" y1=\"14\" x2=\"15\" y2=\"20\" />,\n <line x1=\"23\" y1=\"9\" x2=\"14\" y2=\"20\" />,\n ];\n }\n\n private renderIcon() {\n if (!this.icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" name={this.icon} />;\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return <span class=\"label\">{this.label}</span>;\n }\n\n private renderSpinner() {\n if (!this.loading) {\n return;\n }\n\n return <limel-spinner limeBranded={false} />;\n }\n\n private filterClickWhenDisabled = (e) => {\n if (this.disabled) {\n e.preventDefault();\n }\n };\n}\n"]}
|
|
@@ -1,9 +1,3 @@
|
|
|
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
1
|
/**
|
|
8
2
|
* @prop --icon-background-color: Background color when attribute `badge` is set to `true`. Defaults to `transparent`.
|
|
9
3
|
*/
|
|
@@ -29,8 +23,8 @@
|
|
|
29
23
|
}
|
|
30
24
|
|
|
31
25
|
:host([size=x-small]) {
|
|
32
|
-
height:
|
|
33
|
-
width:
|
|
26
|
+
height: 1rem !important;
|
|
27
|
+
width: 1rem !important;
|
|
34
28
|
}
|
|
35
29
|
|
|
36
30
|
:host([size=small]) {
|
|
@@ -39,25 +33,25 @@
|
|
|
39
33
|
}
|
|
40
34
|
|
|
41
35
|
:host([size=medium]) {
|
|
42
|
-
height: 1.
|
|
43
|
-
width: 1.
|
|
36
|
+
height: 1.5rem !important;
|
|
37
|
+
width: 1.5rem !important;
|
|
44
38
|
}
|
|
45
39
|
|
|
46
40
|
:host([size=large]) {
|
|
47
|
-
height: 1.
|
|
48
|
-
width: 1.
|
|
41
|
+
height: 1.75rem !important;
|
|
42
|
+
width: 1.75rem !important;
|
|
49
43
|
}
|
|
50
44
|
|
|
51
45
|
:host([badge][size=x-small]) {
|
|
52
|
-
height: 1.
|
|
53
|
-
width: 1.
|
|
46
|
+
height: 1.5rem !important;
|
|
47
|
+
width: 1.5rem !important;
|
|
54
48
|
--limel-icon-svg-margin: 0.25rem;
|
|
55
49
|
}
|
|
56
50
|
|
|
57
51
|
:host([badge][size=small]) {
|
|
58
|
-
height: 1.
|
|
59
|
-
width: 1.
|
|
60
|
-
--limel-icon-svg-margin: 0.
|
|
52
|
+
height: 1.75rem !important;
|
|
53
|
+
width: 1.75rem !important;
|
|
54
|
+
--limel-icon-svg-margin: 0.25rem;
|
|
61
55
|
}
|
|
62
56
|
|
|
63
57
|
:host([badge][size=medium]) {
|
|
@@ -67,7 +61,7 @@
|
|
|
67
61
|
}
|
|
68
62
|
|
|
69
63
|
:host([badge][size=large]) {
|
|
70
|
-
height: 2.
|
|
71
|
-
width: 2.
|
|
64
|
+
height: 2.75rem !important;
|
|
65
|
+
width: 2.75rem !important;
|
|
72
66
|
--limel-icon-svg-margin: 0.5rem;
|
|
73
67
|
}
|
|
@@ -32,7 +32,7 @@ const Button = class {
|
|
|
32
32
|
'just-loaded': this.justLoaded && !this.loadingFailed,
|
|
33
33
|
'just-failed': this.justLoaded && this.loadingFailed,
|
|
34
34
|
outlined: this.outlined,
|
|
35
|
-
}, disabled: this.disabled || this.loading }, this.renderIcon(), this.renderLabel(), this.renderSpinner(), h("svg", { viewBox: "0 0 30 30" }, this.renderLoadingIcons()))));
|
|
35
|
+
}, disabled: this.disabled || this.loading, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite" }, this.renderIcon(), this.renderLabel(), this.renderSpinner(), h("svg", { viewBox: "0 0 30 30" }, this.renderLoadingIcons()))));
|
|
36
36
|
}
|
|
37
37
|
loadingWatcher(newValue, oldValue) {
|
|
38
38
|
if (oldValue && !newValue) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-button.entry.js","mappings":"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","names":[],"sources":["./src/components/button/button.scss?tag=limel-button&encapsulation=shadow","./src/components/button/button.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/mixins';\n\n@use '../../style/internal/lime-theme';\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n@include mixins.visualize-aria-expanded('button');\n\nbutton.mdc-button {\n // As long as this component is depended on MDC,\n // we need to force it to be font-agnostic.\n // When MDC-dependency is removed, this block can also be removed.\n // However, on removal of MDC-dependency, we should also make sure to check\n // other font-related styles that might be set by MDC,\n // such as `letter-spacing` or `font-size`.\n font-family: inherit;\n}\n\nbutton {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.125rem;\n\n border: none;\n border-radius: 0.4rem;\n padding: {\n top: 0;\n right: var(--button-padding-right, 0.5rem);\n bottom: 0;\n left: var(--button-padding-left, 0.5rem);\n }\n\n min-height: 2.25rem;\n width: 100%;\n\n &:disabled {\n cursor: not-allowed;\n\n &.outlined {\n border-color: rgba(var(--contrast-1700), 0.2);\n }\n }\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\n.icon {\n width: 1.25rem;\n flex-shrink: 0;\n}\n\n.label {\n font-size: 0.875rem;\n font-weight: 600;\n letter-spacing: functions.pxToRem(0.5);\n padding: 0 0.25rem;\n}\n\nlimel-spinner {\n position: absolute;\n}\n\nlimel-icon {\n vertical-align: top;\n}\n\nsvg {\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(--contrast-600));\n stroke-width: 2;\n }\n}\n\nlimel-icon,\n.label,\nlimel-spinner,\nsvg {\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 }\n}\n\n.just-loaded,\n.just-failed {\n limel-icon,\n .label {\n opacity: 0;\n }\n svg {\n opacity: 1;\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.outlined {\n border: 1px solid;\n border-color: var(--mdc-theme-primary);\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, Host } from '@stencil/core';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\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: { delegatesFocus: 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 <Host onClick={this.filterClickWhenDisabled}>\n <button\n class={{\n loading: this.loading,\n 'just-loaded': this.justLoaded && !this.loadingFailed,\n 'just-failed': this.justLoaded && this.loadingFailed,\n outlined: this.outlined,\n }}\n disabled={this.disabled || this.loading}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderSpinner()}\n <svg viewBox=\"0 0 30 30\">{this.renderLoadingIcons()}</svg>\n </button>\n </Host>\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\" />,\n <line x1=\"21\" y1=\"9\" x2=\"9\" y2=\"21\" />,\n ];\n }\n\n return [\n <line x1=\"8\" y1=\"14\" x2=\"15\" y2=\"20\" />,\n <line x1=\"23\" y1=\"9\" x2=\"14\" y2=\"20\" />,\n ];\n }\n\n private renderIcon() {\n if (!this.icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" name={this.icon} />;\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return <span class=\"label\">{this.label}</span>;\n }\n\n private renderSpinner() {\n if (!this.loading) {\n return;\n }\n\n return <limel-spinner limeBranded={false} />;\n }\n\n private filterClickWhenDisabled = (e) => {\n if (this.disabled) {\n e.preventDefault();\n }\n };\n}\n"],"version":3}
|
|
1
|
+
{"file":"limel-button.entry.js","mappings":"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","names":[],"sources":["./src/components/button/button.scss?tag=limel-button&encapsulation=shadow","./src/components/button/button.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/mixins';\n\n@use '../../style/internal/lime-theme';\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n@include mixins.visualize-aria-expanded('button');\n\nbutton.mdc-button {\n // As long as this component is depended on MDC,\n // we need to force it to be font-agnostic.\n // When MDC-dependency is removed, this block can also be removed.\n // However, on removal of MDC-dependency, we should also make sure to check\n // other font-related styles that might be set by MDC,\n // such as `letter-spacing` or `font-size`.\n font-family: inherit;\n}\n\nbutton {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.125rem;\n\n border: none;\n border-radius: 0.4rem;\n padding: {\n top: 0;\n right: var(--button-padding-right, 0.5rem);\n bottom: 0;\n left: var(--button-padding-left, 0.5rem);\n }\n\n min-height: 2.25rem;\n width: 100%;\n\n &:disabled {\n cursor: not-allowed;\n\n &.outlined {\n border-color: rgba(var(--contrast-1700), 0.2);\n }\n }\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\n.icon {\n width: 1.25rem;\n flex-shrink: 0;\n}\n\n.label {\n font-size: 0.875rem;\n font-weight: 600;\n letter-spacing: functions.pxToRem(0.5);\n padding: 0 0.25rem;\n}\n\nlimel-spinner {\n position: absolute;\n}\n\nlimel-icon {\n vertical-align: top;\n}\n\nsvg {\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(--contrast-600));\n stroke-width: 2;\n }\n}\n\nlimel-icon,\n.label,\nlimel-spinner,\nsvg {\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 }\n}\n\n.just-loaded,\n.just-failed {\n limel-icon,\n .label {\n opacity: 0;\n }\n svg {\n opacity: 1;\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.outlined {\n border: 1px solid;\n border-color: var(--mdc-theme-primary);\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, Host } from '@stencil/core';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\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: { delegatesFocus: 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 <Host onClick={this.filterClickWhenDisabled}>\n <button\n class={{\n loading: this.loading,\n 'just-loaded': this.justLoaded && !this.loadingFailed,\n 'just-failed': this.justLoaded && this.loadingFailed,\n outlined: this.outlined,\n }}\n disabled={this.disabled || this.loading}\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderSpinner()}\n <svg viewBox=\"0 0 30 30\">{this.renderLoadingIcons()}</svg>\n </button>\n </Host>\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\" />,\n <line x1=\"21\" y1=\"9\" x2=\"9\" y2=\"21\" />,\n ];\n }\n\n return [\n <line x1=\"8\" y1=\"14\" x2=\"15\" y2=\"20\" />,\n <line x1=\"23\" y1=\"9\" x2=\"14\" y2=\"20\" />,\n ];\n }\n\n private renderIcon() {\n if (!this.icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" name={this.icon} />;\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return <span class=\"label\">{this.label}</span>;\n }\n\n private renderSpinner() {\n if (!this.loading) {\n return;\n }\n\n return <limel-spinner limeBranded={false} />;\n }\n\n private filterClickWhenDisabled = (e) => {\n if (this.disabled) {\n e.preventDefault();\n }\n };\n}\n"],"version":3}
|
|
@@ -149,7 +149,7 @@ const iconCache = (() => {
|
|
|
149
149
|
return createIconCache();
|
|
150
150
|
})();
|
|
151
151
|
|
|
152
|
-
const iconCss = ":host{background-color:var(--icon-background-color, transparent);border-radius:50%;display:inline-block;line-height:0;box-sizing:border-box}:host svg{fill:currentColor;height:100%;pointer-events:none;width:100%}:host div{margin:var(--limel-icon-svg-margin, 0)}:host([hidden]){display:none}:host([size=x-small]){height:
|
|
152
|
+
const iconCss = ":host{background-color:var(--icon-background-color, transparent);border-radius:50%;display:inline-block;line-height:0;box-sizing:border-box}:host svg{fill:currentColor;height:100%;pointer-events:none;width:100%}:host div{margin:var(--limel-icon-svg-margin, 0)}:host([hidden]){display:none}:host([size=x-small]){height:1rem !important;width:1rem !important}:host([size=small]){height:1.25rem !important;width:1.25rem !important}:host([size=medium]){height:1.5rem !important;width:1.5rem !important}:host([size=large]){height:1.75rem !important;width:1.75rem !important}:host([badge][size=x-small]){height:1.5rem !important;width:1.5rem !important;--limel-icon-svg-margin:0.25rem}:host([badge][size=small]){height:1.75rem !important;width:1.75rem !important;--limel-icon-svg-margin:0.25rem}:host([badge][size=medium]){height:2.5rem !important;width:2.5rem !important;--limel-icon-svg-margin:0.5rem}:host([badge][size=large]){height:2.75rem !important;width:2.75rem !important;--limel-icon-svg-margin:0.5rem}";
|
|
153
153
|
|
|
154
154
|
const Icon = class {
|
|
155
155
|
constructor(hostRef) {
|