@limetech/lime-elements 37.61.6 → 37.61.7
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 +8 -0
- package/dist/cjs/limel-button.cjs.entry.js +1 -1
- package/dist/cjs/limel-button.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/esm/limel-button.entry.js +1 -1
- package/dist/esm/limel-button.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- 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/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
## [37.61.7](https://github.com/Lundalogik/lime-elements/compare/v37.61.6...v37.61.7) (2024-09-23)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
* **button:** increase accessibility for loading button ([0a389b3](https://github.com/Lundalogik/lime-elements/commit/0a389b3e2d3ebc211bf052bf7c88b0cf92606306))
|
|
8
|
+
|
|
1
9
|
## [37.61.6](https://github.com/Lundalogik/lime-elements/compare/v37.61.5...v37.61.6) (2024-09-23)
|
|
2
10
|
|
|
3
11
|
|
|
@@ -36,7 +36,7 @@ const Button = class {
|
|
|
36
36
|
'just-loaded': this.justLoaded && !this.loadingFailed,
|
|
37
37
|
'just-failed': this.justLoaded && this.loadingFailed,
|
|
38
38
|
outlined: this.outlined,
|
|
39
|
-
}, disabled: this.disabled || this.loading }, this.renderIcon(), this.renderLabel(), this.renderSpinner(), index.h("svg", { viewBox: "0 0 30 30" }, this.renderLoadingIcons()))));
|
|
39
|
+
}, disabled: this.disabled || this.loading, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite" }, this.renderIcon(), this.renderLabel(), this.renderSpinner(), index.h("svg", { viewBox: "0 0 30 30" }, this.renderLoadingIcons()))));
|
|
40
40
|
}
|
|
41
41
|
loadingWatcher(newValue, oldValue) {
|
|
42
42
|
if (oldValue && !newValue) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-button.entry.cjs.js","mappings":"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","names":["makeEnterClickable","removeEnterClickable","h","Host"],"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.cjs.js","mappings":"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","names":["makeEnterClickable","removeEnterClickable","h","Host"],"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}
|
|
@@ -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"]}
|
|
@@ -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}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-443111b3.js";export{s as setNonce}from"./p-443111b3.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-595fdf97",[[1,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-c544c575",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-b8bfe44d",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-ab6eab16",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-dd85a0b2",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-48652dbe",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-c85589d6",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"internalFormat":[32],"showPortal":[32]}]]],["p-eb5ff7ca",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-715d4a78",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-3d6dc7de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-3e1e3fe6",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-3cd95c9f",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-768dc020",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["p-5d01dc2a",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-6c74fcaa",[[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-2512011c",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-dab818a1",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["p-b852d3f5",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["p-20440a35",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-02e9b8ce",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-eb58b4b7",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-6b2bc81b",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-1bcdc70b",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-a80507e5",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-6b0ef5ee",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-11d775ca",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-16e4ca3e",[[1,"limel-config",{"config":[16]}]]],["p-ea98795d",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-c864b34b",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-b5f723e2",[[1,"limel-grid"]]],["p-9452ff1b",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}],[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"],"invalidLink":[32]}],[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-ccc605fe",[[1,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-7a202104",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-53fc6f0e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["p-1367c295",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-30ca30ec",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-0fef416f",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-d6660d2a",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-97571329",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-f340d860",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-216eb1cf",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-347c1107",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-ee74cfff",[[1,"limel-markdown",{"value":[1],"whitelist":[16]}]]],["p-5862b851",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}],[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-968c49d9",[[17,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-afefcd43",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-d1838cf6",[[1,"limel-badge",{"label":[520]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["p-c4760e4a",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["p-78889be5",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"menuItems":[16]}]]],["p-89764bae",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]]]'),e)));
|
|
1
|
+
import{p as e,b as l}from"./p-443111b3.js";export{s as setNonce}from"./p-443111b3.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-595fdf97",[[1,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-c544c575",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-b8bfe44d",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-ab6eab16",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-dd85a0b2",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-48652dbe",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-c85589d6",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"internalFormat":[32],"showPortal":[32]}]]],["p-eb5ff7ca",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-715d4a78",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-3d6dc7de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-3e1e3fe6",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-3cd95c9f",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-768dc020",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["p-5d01dc2a",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-6c74fcaa",[[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-2512011c",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-dab818a1",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["p-b852d3f5",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["p-20440a35",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-02e9b8ce",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-eb58b4b7",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-6b2bc81b",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-1bcdc70b",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-a80507e5",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-6b0ef5ee",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-11d775ca",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-16e4ca3e",[[1,"limel-config",{"config":[16]}]]],["p-ea98795d",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-c864b34b",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-b5f723e2",[[1,"limel-grid"]]],["p-9452ff1b",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}],[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"],"invalidLink":[32]}],[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-ccc605fe",[[1,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-7a202104",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-53fc6f0e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["p-1367c295",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-30ca30ec",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-0fef416f",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-d6660d2a",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-97571329",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-f340d860",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-216eb1cf",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-347c1107",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-ee74cfff",[[1,"limel-markdown",{"value":[1],"whitelist":[16]}]]],["p-5862b851",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}],[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-968c49d9",[[17,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-afefcd43",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-d1838cf6",[[1,"limel-badge",{"label":[520]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["p-c4760e4a",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["p-78889be5",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"menuItems":[16]}]]],["p-c1cbba2c",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]]]'),e)));
|
|
2
2
|
//# sourceMappingURL=lime-elements.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as t,H as o,g as r}from"./p-443111b3.js";import{m as a,r as n}from"./p-869d6d77.js";const s='@charset "UTF-8";: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{display:inline-block}:host([hidden]){display:none}:host([aria-expanded=true]) button,:host([aria-expanded]:not([aria-expanded=false])) button{box-shadow:var(--button-shadow-inset-pressed) !important}button.mdc-button{font-family:inherit}button{display:flex;align-items:center;justify-content:center;gap:0.125rem;border:none;border-radius:0.4rem;padding-top:0;padding-right:var(--button-padding-right, 0.5rem);padding-bottom:0;padding-left:var(--button-padding-left, 0.5rem);min-height:2.25rem;width:100%}button:disabled{cursor:not-allowed}button:disabled.outlined{border-color:rgba(var(--contrast-1700), 0.2)}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:not(:disabled):focus{outline:none}button:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}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:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}:host(limel-button[primary]) 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:disabled{background-color:rgba(var(--contrast-1700), 0.15)}:host(limel-button:not([primary])) button:not(:disabled){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}:host(limel-button:not([primary])) button:disabled{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1)}.icon{width:1.25rem;flex-shrink:0}.label{font-size:0.875rem;font-weight:600;letter-spacing:0.03125rem;padding:0 0.25rem}limel-spinner{position:absolute}limel-icon{vertical-align:top}svg{height:1.875rem;opacity:0;pointer-events:none;position:absolute;width:1.875rem}svg line{stroke:rgb(var(--contrast-600));stroke-width:2}limel-icon,.label,limel-spinner,svg{transition:opacity 300ms ease-in-out}.loading limel-icon,.loading .label{opacity:0}.loading limel-spinner{opacity:1}.just-loaded limel-icon,.just-loaded .label,.just-failed limel-icon,.just-failed .label{opacity:0}.just-loaded svg,.just-failed svg{opacity:1}.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}.outlined{border:1px solid;border-color:var(--mdc-theme-primary)}@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) .icon{transition:all 0.3s ease;transition-delay:0.3s;opacity:0;width:0;height:0}';const i=class{constructor(t){e(this,t);this.filterClickWhenDisabled=e=>{if(this.disabled){e.preventDefault()}};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(){n(this.host)}render(){return t(o,{onClick:this.filterClickWhenDisabled},t("button",{class:{loading:this.loading,"just-loaded":this.justLoaded&&!this.loadingFailed,"just-failed":this.justLoaded&&this.loadingFailed,outlined:this.outlined},disabled:this.disabled||this.loading},this.renderIcon(),this.renderLabel(),this.renderSpinner(),t("svg",{viewBox:"0 0 30 30"},this.renderLoadingIcons())))}loadingWatcher(e,t){if(t&&!e){this.justLoaded=true;const e=2e3;this.justLoadedTimeout=window.setTimeout((()=>{this.justLoaded=false}),e)}else if(e){this.justLoaded=false;window.clearTimeout(this.justLoadedTimeout)}}renderLoadingIcons(){if(this.loadingFailed){return[t("line",{x1:"9",y1:"9",x2:"21",y2:"21"}),t("line",{x1:"21",y1:"9",x2:"9",y2:"21"})]}return[t("line",{x1:"8",y1:"14",x2:"15",y2:"20"}),t("line",{x1:"23",y1:"9",x2:"14",y2:"20"})]}renderIcon(){if(!this.icon){return}return t("limel-icon",{class:"icon",name:this.icon})}renderLabel(){if(!this.label){return}return t("span",{class:"label"},this.label)}renderSpinner(){if(!this.loading){return}return t("limel-spinner",{limeBranded:false})}static get delegatesFocus(){return true}get host(){return r(this)}static get watchers(){return{loading:["loadingWatcher"]}}};i.style=s;export{i as limel_button};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,h as t,H as o,g as r}from"./p-443111b3.js";import{m as a,r as n}from"./p-869d6d77.js";const s='@charset "UTF-8";: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{display:inline-block}:host([hidden]){display:none}:host([aria-expanded=true]) button,:host([aria-expanded]:not([aria-expanded=false])) button{box-shadow:var(--button-shadow-inset-pressed) !important}button.mdc-button{font-family:inherit}button{display:flex;align-items:center;justify-content:center;gap:0.125rem;border:none;border-radius:0.4rem;padding-top:0;padding-right:var(--button-padding-right, 0.5rem);padding-bottom:0;padding-left:var(--button-padding-left, 0.5rem);min-height:2.25rem;width:100%}button:disabled{cursor:not-allowed}button:disabled.outlined{border-color:rgba(var(--contrast-1700), 0.2)}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:not(:disabled):focus{outline:none}button:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}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:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}:host(limel-button[primary]) 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:disabled{background-color:rgba(var(--contrast-1700), 0.15)}:host(limel-button:not([primary])) button:not(:disabled){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}:host(limel-button:not([primary])) button:disabled{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1)}.icon{width:1.25rem;flex-shrink:0}.label{font-size:0.875rem;font-weight:600;letter-spacing:0.03125rem;padding:0 0.25rem}limel-spinner{position:absolute}limel-icon{vertical-align:top}svg{height:1.875rem;opacity:0;pointer-events:none;position:absolute;width:1.875rem}svg line{stroke:rgb(var(--contrast-600));stroke-width:2}limel-icon,.label,limel-spinner,svg{transition:opacity 300ms ease-in-out}.loading limel-icon,.loading .label{opacity:0}.loading limel-spinner{opacity:1}.just-loaded limel-icon,.just-loaded .label,.just-failed limel-icon,.just-failed .label{opacity:0}.just-loaded svg,.just-failed svg{opacity:1}.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}.outlined{border:1px solid;border-color:var(--mdc-theme-primary)}@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) .icon{transition:all 0.3s ease;transition-delay:0.3s;opacity:0;width:0;height:0}';const i=class{constructor(t){e(this,t);this.filterClickWhenDisabled=e=>{if(this.disabled){e.preventDefault()}};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(){n(this.host)}render(){return t(o,{onClick:this.filterClickWhenDisabled},t("button",{class:{loading:this.loading,"just-loaded":this.justLoaded&&!this.loadingFailed,"just-failed":this.justLoaded&&this.loadingFailed,outlined:this.outlined},disabled:this.disabled||this.loading,"aria-busy":this.loading?"true":"false","aria-live":"polite"},this.renderIcon(),this.renderLabel(),this.renderSpinner(),t("svg",{viewBox:"0 0 30 30"},this.renderLoadingIcons())))}loadingWatcher(e,t){if(t&&!e){this.justLoaded=true;const e=2e3;this.justLoadedTimeout=window.setTimeout((()=>{this.justLoaded=false}),e)}else if(e){this.justLoaded=false;window.clearTimeout(this.justLoadedTimeout)}}renderLoadingIcons(){if(this.loadingFailed){return[t("line",{x1:"9",y1:"9",x2:"21",y2:"21"}),t("line",{x1:"21",y1:"9",x2:"9",y2:"21"})]}return[t("line",{x1:"8",y1:"14",x2:"15",y2:"20"}),t("line",{x1:"23",y1:"9",x2:"14",y2:"20"})]}renderIcon(){if(!this.icon){return}return t("limel-icon",{class:"icon",name:this.icon})}renderLabel(){if(!this.label){return}return t("span",{class:"label"},this.label)}renderSpinner(){if(!this.loading){return}return t("limel-spinner",{limeBranded:false})}static get delegatesFocus(){return true}get host(){return r(this)}static get watchers(){return{loading:["loadingWatcher"]}}};i.style=s;export{i as limel_button};
|
|
2
|
+
//# sourceMappingURL=p-c1cbba2c.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["buttonCss","Button","this","filterClickWhenDisabled","e","disabled","preventDefault","componentWillLoad","makeEnterClickable","host","disconnectedCallback","removeEnterClickable","render","h","Host","onClick","class","loading","justLoaded","loadingFailed","outlined","renderIcon","renderLabel","renderSpinner","viewBox","renderLoadingIcons","loadingWatcher","newValue","oldValue","TIMEOUT","justLoadedTimeout","window","setTimeout","clearTimeout","x1","y1","x2","y2","icon","name","label","limeBranded"],"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"],"mappings":"oGAAA,MAAMA,EAAY,00J,MCwBLC,EAAM,M,yBAsIPC,KAAAC,wBAA2BC,IAC/B,GAAIF,KAAKG,SAAU,CACfD,EAAEE,gB,qCA7HO,M,cAMC,M,kCAYA,M,aAOD,M,mBAOM,M,gBAGF,K,CAOdC,oBACHC,EAAmBN,KAAKO,K,CAGrBC,uBACHC,EAAqBT,KAAKO,K,CAGvBG,SACH,OACIC,EAACC,EAAI,CAACC,QAASb,KAAKC,yBAChBU,EAAA,UACIG,MAAO,CACHC,QAASf,KAAKe,QACd,cAAef,KAAKgB,aAAehB,KAAKiB,cACxC,cAAejB,KAAKgB,YAAchB,KAAKiB,cACvCC,SAAUlB,KAAKkB,UAEnBf,SAAUH,KAAKG,UAAYH,KAAKe,SAE/Bf,KAAKmB,aACLnB,KAAKoB,cACLpB,KAAKqB,gBACNV,EAAA,OAAKW,QAAQ,aAAatB,KAAKuB,uB,CAOrCC,eAAeC,EAAmBC,GACxC,GAAIA,IAAaD,EAAU,CACvBzB,KAAKgB,WAAa,KAClB,MAAMW,EAAU,IAChB3B,KAAK4B,kBAAoBC,OAAOC,YAAW,KACvC9B,KAAKgB,WAAa,KAAK,GACxBW,E,MACA,GAAIF,EAAU,CACjBzB,KAAKgB,WAAa,MAClBa,OAAOE,aAAa/B,KAAK4B,kB,EAIzBL,qBACJ,GAAIvB,KAAKiB,cAAe,CACpB,MAAO,CACHN,EAAA,QAAMqB,GAAG,IAAIC,GAAG,IAAIC,GAAG,KAAKC,GAAG,OAC/BxB,EAAA,QAAMqB,GAAG,KAAKC,GAAG,IAAIC,GAAG,IAAIC,GAAG,O,CAIvC,MAAO,CACHxB,EAAA,QAAMqB,GAAG,IAAIC,GAAG,KAAKC,GAAG,KAAKC,GAAG,OAChCxB,EAAA,QAAMqB,GAAG,KAAKC,GAAG,IAAIC,GAAG,KAAKC,GAAG,O,CAIhChB,aACJ,IAAKnB,KAAKoC,KAAM,CACZ,M,CAGJ,OAAOzB,EAAA,cAAYG,MAAM,OAAOuB,KAAMrC,KAAKoC,M,CAGvChB,cACJ,IAAKpB,KAAKsC,MAAO,CACb,M,CAGJ,OAAO3B,EAAA,QAAMG,MAAM,SAASd,KAAKsC,M,CAG7BjB,gBACJ,IAAKrB,KAAKe,QAAS,CACf,M,CAGJ,OAAOJ,EAAA,iBAAe4B,YAAa,O"}
|
|
1
|
+
{"version":3,"names":["buttonCss","Button","this","filterClickWhenDisabled","e","disabled","preventDefault","componentWillLoad","makeEnterClickable","host","disconnectedCallback","removeEnterClickable","render","h","Host","onClick","class","loading","justLoaded","loadingFailed","outlined","renderIcon","renderLabel","renderSpinner","viewBox","renderLoadingIcons","loadingWatcher","newValue","oldValue","TIMEOUT","justLoadedTimeout","window","setTimeout","clearTimeout","x1","y1","x2","y2","icon","name","label","limeBranded"],"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"],"mappings":"oGAAA,MAAMA,EAAY,00J,MCwBLC,EAAM,M,yBAwIPC,KAAAC,wBAA2BC,IAC/B,GAAIF,KAAKG,SAAU,CACfD,EAAEE,gB,qCA/HO,M,cAMC,M,kCAYA,M,aAOD,M,mBAOM,M,gBAGF,K,CAOdC,oBACHC,EAAmBN,KAAKO,K,CAGrBC,uBACHC,EAAqBT,KAAKO,K,CAGvBG,SACH,OACIC,EAACC,EAAI,CAACC,QAASb,KAAKC,yBAChBU,EAAA,UACIG,MAAO,CACHC,QAASf,KAAKe,QACd,cAAef,KAAKgB,aAAehB,KAAKiB,cACxC,cAAejB,KAAKgB,YAAchB,KAAKiB,cACvCC,SAAUlB,KAAKkB,UAEnBf,SAAUH,KAAKG,UAAYH,KAAKe,QAAO,YAC5Bf,KAAKe,QAAU,OAAS,QAAO,YAChC,UAETf,KAAKmB,aACLnB,KAAKoB,cACLpB,KAAKqB,gBACNV,EAAA,OAAKW,QAAQ,aAAatB,KAAKuB,uB,CAOrCC,eAAeC,EAAmBC,GACxC,GAAIA,IAAaD,EAAU,CACvBzB,KAAKgB,WAAa,KAClB,MAAMW,EAAU,IAChB3B,KAAK4B,kBAAoBC,OAAOC,YAAW,KACvC9B,KAAKgB,WAAa,KAAK,GACxBW,E,MACA,GAAIF,EAAU,CACjBzB,KAAKgB,WAAa,MAClBa,OAAOE,aAAa/B,KAAK4B,kB,EAIzBL,qBACJ,GAAIvB,KAAKiB,cAAe,CACpB,MAAO,CACHN,EAAA,QAAMqB,GAAG,IAAIC,GAAG,IAAIC,GAAG,KAAKC,GAAG,OAC/BxB,EAAA,QAAMqB,GAAG,KAAKC,GAAG,IAAIC,GAAG,IAAIC,GAAG,O,CAIvC,MAAO,CACHxB,EAAA,QAAMqB,GAAG,IAAIC,GAAG,KAAKC,GAAG,KAAKC,GAAG,OAChCxB,EAAA,QAAMqB,GAAG,KAAKC,GAAG,IAAIC,GAAG,KAAKC,GAAG,O,CAIhChB,aACJ,IAAKnB,KAAKoC,KAAM,CACZ,M,CAGJ,OAAOzB,EAAA,cAAYG,MAAM,OAAOuB,KAAMrC,KAAKoC,M,CAGvChB,cACJ,IAAKpB,KAAKsC,MAAO,CACb,M,CAGJ,OAAO3B,EAAA,QAAMG,MAAM,SAASd,KAAKsC,M,CAG7BjB,gBACJ,IAAKrB,KAAKe,QAAS,CACf,M,CAGJ,OAAOJ,EAAA,iBAAe4B,YAAa,O"}
|