npm - @limetech/lime-elements - Versions diffs - 37.61.5 → 37.61.7 - Mend

@limetech/lime-elements 37.61.5 → 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.

Files changed (23) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,19 @@
+## [37.61.7](https://github.com/Lundalogik/lime-elements/compare/v37.61.6...v37.61.7) (2024-09-23)
+### Bug Fixes
+* **button:** increase accessibility for loading button ([0a389b3](https://github.com/Lundalogik/lime-elements/commit/0a389b3e2d3ebc211bf052bf7c88b0cf92606306))
+## [37.61.6](https://github.com/Lundalogik/lime-elements/compare/v37.61.5...v37.61.6) (2024-09-23)
+### Bug Fixes
+* **progress-flow:** increase lock icon visibility ([7d4d08b](https://github.com/Lundalogik/lime-elements/commit/7d4d08bdaefb12f9373b4d88143798147eacb5f6))
 ## [37.61.5](https://github.com/Lundalogik/lime-elements/compare/v37.61.4...v37.61.5) (2024-09-20)

package/dist/cjs/limel-button.cjs.entry.js CHANGED Viewed

@@ -36,7 +36,7 @@ const Button = class {
         '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(), index.h("svg", { viewBox: "0 0 30 30" }, this.renderLoadingIcons()))));
+      }, 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()))));
   }
   loadingWatcher(newValue, oldValue) {
     if (oldValue && !newValue) {

package/dist/cjs/limel-button.cjs.entry.js.map CHANGED Viewed

	@@ -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":";;;;;;;AAAA,MAAM,SAAS,GAAG,20JAA20J;;MCwBh1J,MAAM;;;IAwIP,4BAAuB,GAAG,CAAC,CAAC;MAChC,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,CAAC,CAAC,cAAc,EAAE,CAAC;OACtB;KACJ,CAAC;;mBAjIe,KAAK;oBAMJ,KAAK;;oBAYL,KAAK;mBAON,KAAK;yBAOC,KAAK;sBAGP,KAAK;;EAOnB,iBAAiB;IACpBA,qCAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjC;EAEM,oBAAoB;IACvBC,uCAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACnC;EAEM,MAAM;IACT,QACIC,QAACC,UAAI,IAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,IACvCD,oBACI,KAAK,EAAE;QACH,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,aAAa,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,aAAa;QACrD,aAAa,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,aAAa;QACpD,QAAQ,EAAE,IAAI,CAAC,QAAQ;OAC1B,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,eAC5B,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,eAChC,QAAQ,IAEjB,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,aAAa,EAAE,EACrBA,iBAAK,OAAO,EAAC,WAAW,IAAE,IAAI,CAAC,kBAAkB,EAAE,CAAO,CACrD,CACN,EACT;GACL;EAGS,cAAc,CAAC,QAAiB,EAAE,QAAiB;IACzD,IAAI,QAAQ,IAAI,CAAC,QAAQ,EAAE;MACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;MACvB,MAAM,OAAO,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAC,UAAU,CAAC;QACvC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;OAC3B,EAAE,OAAO,CAAC,CAAC;KACf;SAAM,IAAI,QAAQ,EAAE;MACjB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;MACxB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAC/C;GACJ;EAEO,kBAAkB;IACtB,IAAI,IAAI,CAAC,aAAa,EAAE;MACpB,OAAO;QACHA,kBAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG;QACtCA,kBAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAG;OACzC,CAAC;KACL;IAED,OAAO;MACHA,kBAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG;MACvCA,kBAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG;KAC1C,CAAC;GACL;EAEO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,OAAOA,wBAAY,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;GACvD;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAOA,kBAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAAC;GAClD;EAEO,aAAa;IACjB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACf,OAAO;KACV;IAED,OAAOA,2BAAe,WAAW,EAAE,KAAK,GAAI,CAAC;GAChD;;;;;;;;;;;","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}

package/dist/cjs/limel-progress-flow-item.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d1052409.js');
 const getIconProps = require('./get-icon-props-50be7440.js');
-const progressFlowItemCss = "@charset \"UTF-8\";.flow-item{--step-background:var(\n      --progress-flow-step-background-color,\n      rgb(var(--contrast-600))\n  );--step-background--selected:var(\n      --progress-flow-step-background-color--selected,\n      var(--mdc-theme-primary)\n  );--step-background--passed:var(\n      --progress-flow-step-background-color--passed,\n      var(--step-background--selected)\n  );--step-text:var(\n      --progress-flow-step-text-color,\n      rgb(var(--contrast-1200))\n  );--step-text--selected:var(\n      --progress-flow-step-text-color--selected,\n      var(--mdc-theme-on-primary)\n  );--step-text--passed:var(\n      --progress-flow-step-text-color--passed,\n      var(--step-text--selected)\n  );--step-divider-color:var(\n      --progress-flow-step-divider-color,\n      rgb(var(--contrast-100))\n  );position:relative;width:100%;display:flex;flex-direction:column;align-items:stretch}.flow-item:not(.off-progress-item,.last) .divider:after{content:\"\"}.flow-item.off-progress-item{padding-left:0.5rem}.flow-item.first-off-progress-item{padding-left:1rem}.step{transition:background-color 0.2s ease, box-shadow 0.2s ease;display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:var(--step-height);border:none;font-size:0.875rem}.step.disabled{cursor:not-allowed}.step.disabled.readonly{opacity:1;cursor:default}.step:focus{outline:none}.step:focus-visible{box-shadow:var(--shadow-depth-8-focused)}.flow-item:not(.off-progress-item,.first) .step{padding-left:calc(var(--step-height) / 2)}.flow-item:not(.selected) .step:not(.disabled){cursor:pointer}.flow-item:not(.selected) .step:not(.disabled):hover{box-shadow:var(--button-shadow-normal)}.flow-item:not(.selected) .step:not(.disabled):active{box-shadow:var(--button-shadow-pressed)}.off-progress-item .step{border-radius:0.25rem;padding:0 0.75rem}.off-progress-item .step .icon{margin-left:0}.flow-item.first .step{border-top-left-radius:var(--step-height);border-bottom-left-radius:var(--step-height);padding-left:1.25rem}.flow-item.last .step{border-top-right-radius:var(--step-height);border-bottom-right-radius:var(--step-height);padding-right:1.25rem}.divider{display:flex;align-items:center;justify-content:center;width:var(--step-height);height:var(--step-height);position:absolute;z-index:1;right:calc(var(--step-height) / 2 * -1);overflow:hidden}.divider:after{position:absolute;display:block;box-sizing:border-box;transition:background-color 0.2s ease;width:100%;height:100%;right:calc(var(--step-height) / 5);transform:rotate(45deg);border-style:solid;border-width:0.125rem 0.125rem 0 0;border-radius:0 0.5rem 0 0;border-color:var(--step-divider-color)}.flow-item.last .divider{width:0}.text,.secondary-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:var(--max-text-width);z-index:2}.secondary-text{font-size:0.75rem;margin:auto;padding-left:calc(var(--step-height) / 2)}.icon{margin:0 0.5rem 0 0.25rem;z-index:2}.step:before,.step:after{pointer-events:none;box-sizing:border-box;z-index:2;position:absolute;right:var(--selected-indicator-right);border-radius:50%}.last .step:before,.last .step:after{right:0.5rem}.flow-item:not(.off-progress-item) .step.selected:before,.flow-item:not(.off-progress-item) .step.selected:after{content:\"\";width:0.375rem;height:0.375rem}.flow-item:not(.off-progress-item) .step.selected:before{background-color:var(--step-divider-color);opacity:0.7}.flow-item:not(.off-progress-item) .step.disabled:before,.flow-item:not(.off-progress-item) .step.disabled:after{width:0.75rem;height:0.75rem}.flow-item:not(.off-progress-item) .step.disabled:after{content:\"\";background-image:url(\"data:image/svg+xml;charset=utf-8, <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'><path fill='rgb(127,127,127)' d='M32.18 13.711c0-2.207-1.793-4-4.002-4H11.821c-2.208 0-4 1.793-4 4V28.29a4 4 0 0 0 4 4h16.357a4.002 4.002 0 0 0 4.001-4V13.711Z'/><path fill='rgb(127,127,127)' d='M11.211 9.758V7.673A7.489 7.489 0 0 1 18.696.188h2.608a7.489 7.489 0 0 1 7.485 7.485v2.085h-3V7.673a4.488 4.488 0 0 0-4.485-4.485h-2.608a4.488 4.488 0 0 0-4.485 4.485v2.085h-3Z'/></svg>\");background-size:90%;background-repeat:no-repeat;background-position:center;mix-blend-mode:multiply}.step{color:var(--step-text);background-color:var(--step-background)}.step .icon{color:var(--progress-flow-icon-color--inactive, var(--step-text))}.flow-item.selected .step{color:var(--step-text--selected);background-color:var(--step-background--selected)}.flow-item.selected .step .divider:after{background-color:var(--step-background--selected)}.flow-item.selected .step .icon{color:var(--step-text--selected)}.flow-item.passed .step{color:var(--step-text--passed);background-color:var(--step-background--passed)}.flow-item.passed .step .divider:after{background-color:var(--step-background--passed)}.flow-item.passed .step .icon{color:var(--step-text--passed)}.divider:after{border-color:var(--step-divider-color);background-color:var(--step-background)}";
+const progressFlowItemCss = "@charset \"UTF-8\";.flow-item{--step-background:var(\n      --progress-flow-step-background-color,\n      rgb(var(--contrast-600))\n  );--step-background--selected:var(\n      --progress-flow-step-background-color--selected,\n      var(--mdc-theme-primary)\n  );--step-background--passed:var(\n      --progress-flow-step-background-color--passed,\n      var(--step-background--selected)\n  );--step-text:var(\n      --progress-flow-step-text-color,\n      rgb(var(--contrast-1200))\n  );--step-text--selected:var(\n      --progress-flow-step-text-color--selected,\n      var(--mdc-theme-on-primary)\n  );--step-text--passed:var(\n      --progress-flow-step-text-color--passed,\n      var(--step-text--selected)\n  );--step-divider-color:var(\n      --progress-flow-step-divider-color,\n      rgb(var(--contrast-100))\n  );position:relative;width:100%;display:flex;flex-direction:column;align-items:stretch}.flow-item:not(.off-progress-item,.last) .divider:after{content:\"\"}.flow-item.off-progress-item{padding-left:0.5rem}.flow-item.first-off-progress-item{padding-left:1rem}.step{transition:background-color 0.2s ease, box-shadow 0.2s ease;display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:var(--step-height);border:none;font-size:0.875rem}.step.disabled{cursor:not-allowed}.step.disabled.readonly{opacity:1;cursor:default}.step:focus{outline:none}.step:focus-visible{box-shadow:var(--shadow-depth-8-focused)}.flow-item:not(.off-progress-item,.first) .step{padding-left:calc(var(--step-height) / 2)}.flow-item:not(.selected) .step:not(.disabled){cursor:pointer}.flow-item:not(.selected) .step:not(.disabled):hover{box-shadow:var(--button-shadow-normal)}.flow-item:not(.selected) .step:not(.disabled):active{box-shadow:var(--button-shadow-pressed)}.off-progress-item .step{border-radius:0.25rem;padding:0 0.75rem}.off-progress-item .step .icon{margin-left:0}.flow-item.first .step{border-top-left-radius:var(--step-height);border-bottom-left-radius:var(--step-height);padding-left:1.25rem}.flow-item.last .step{border-top-right-radius:var(--step-height);border-bottom-right-radius:var(--step-height);padding-right:1.25rem}.divider{display:flex;align-items:center;justify-content:center;width:var(--step-height);height:var(--step-height);position:absolute;z-index:1;right:calc(var(--step-height) / 2 * -1);overflow:hidden}.divider:after{position:absolute;display:block;box-sizing:border-box;transition:background-color 0.2s ease;width:100%;height:100%;right:calc(var(--step-height) / 5);transform:rotate(45deg);border-style:solid;border-width:0.125rem 0.125rem 0 0;border-radius:0 0.5rem 0 0;border-color:var(--step-divider-color)}.flow-item.last .divider{width:0}.text,.secondary-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:var(--max-text-width);z-index:2}.secondary-text{font-size:0.75rem;margin:auto;padding-left:calc(var(--step-height) / 2)}.icon{margin:0 0.5rem 0 0.25rem;z-index:2}.step:before,.step .lock-icon{pointer-events:none;box-sizing:border-box;z-index:2}.step::before{position:absolute;right:var(--selected-indicator-right);border-radius:50%}.last .step:before,.last .step .lock-icon{right:0.5rem}.flow-item:not(.off-progress-item) .step.selected:before{content:\"\";width:0.375rem;height:0.375rem;background-color:rgb(var(--contrast-700));opacity:0.7}.lock-icon{margin-left:0.25rem;margin-right:-0.5rem;width:0.75rem;color:currentColor;scale:0.8}.step{color:var(--step-text);background-color:var(--step-background)}.step .icon{color:var(--progress-flow-icon-color--inactive, var(--step-text))}.flow-item.selected .step{color:var(--step-text--selected);background-color:var(--step-background--selected)}.flow-item.selected .step .divider:after{background-color:var(--step-background--selected)}.flow-item.selected .step .icon{color:var(--step-text--selected)}.flow-item.passed .step{color:var(--step-text--passed);background-color:var(--step-background--passed)}.flow-item.passed .step .divider:after{background-color:var(--step-background--passed)}.flow-item.passed .step .icon{color:var(--step-text--passed)}.divider:after{border-color:var(--step-divider-color);background-color:var(--step-background)}";
 const ProgressFlowItem = class {
   constructor(hostRef) {
@@ -30,7 +30,7 @@ const ProgressFlowItem = class {
           selected: (_a = this.item) === null || _a === void 0 ? void 0 : _a.selected,
           disabled: this.isDisabled(),
           readonly: this.readonly,
-        }, onClick: this.handleClick, disabled: this.isDisabled(), "aria-current": this.currentStep ? 'step' : null }, this.renderIcon(), index.h("span", { class: "text" }, this.item.text), this.renderDivider()),
+        }, onClick: this.handleClick, disabled: this.isDisabled(), "aria-current": this.currentStep ? 'step' : null }, this.renderIcon(), index.h("span", { class: "text" }, this.item.text), this.renderDivider(), this.renderLockIcon()),
       this.renderSecondaryText(),
     ];
   }
@@ -64,6 +64,12 @@ const ProgressFlowItem = class {
     }
     return index.h("div", { class: "divider" });
   }
+  renderLockIcon() {
+    if (!this.isDisabled()) {
+      return;
+    }
+    return index.h("limel-icon", { name: "lock", class: "lock-icon" });
+  }
   get element() { return index.getElement(this); }
 };
 ProgressFlowItem.style = progressFlowItemCss;

package/dist/cjs/limel-progress-flow-item.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-progress-flow-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,i/~~JAAi/J;;MCmBhgK~~,gBAAgB;;;;~~IA0EjB~~,gBAAW,GAAG;MAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACxB,CAAC;~~gBApEsB~~,IAAI;oBAMV,KAAK;oBAML,KAAK;uBAMO,KAAK;;EAQ5B,MAAM;;IACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,OAAO;MACHA,oBACI,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;UACH,IAAI,EAAE,IAAI;UACV,QAAQ,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ;UAC7B,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE;UAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE,kBACb,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,IAAI,IAE7C,IAAI,CAAC,UAAU,EAAE,EAClBA,kBAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAQ,EACzC,IAAI,CAAC,aAAa,EAAE,~~CAChB~~;MACT,IAAI,CAAC,mBAAmB,EAAE;KAC7B,CAAC;GACL;EAEO,UAAU;;IACd,OAAO,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,KAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;GAChE;EAEO,cAAc;IAClB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;KACzB;IAED,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAChE;EAMO,mBAAmB;;IACvB,IAAI,EAAC,MAAA,IAAI,CAAC,IAAI,0CAAE,aAAa,CAAA,EAAE;MAC3B,OAAO;KACV;IAED,OAAOA,iBAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAO,CAAC;GACtE;EAEO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACjB,OAAO;KACV;IAED,MAAM,IAAI,GAAGC,wBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEzC,OAAOD,wBAAY,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,GAAG,CAAC;GAC/D;EAEO,aAAa;IACjB,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MACzB,OAAO;KACV;IAED,OAAOA,iBAAK,KAAK,EAAC,SAAS,GAAG,CAAC;GAClC;;;;;;;","names":["h","getIconName"],"sources":["./src/components/progress-flow/progress-flow-item/progress-flow-item.scss?tag=limel-progress-flow-item","./src/components/progress-flow/progress-flow-item/progress-flow-item.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n$limel-progress-flow-step-content: 2;\n$limel-progress-flow-divider: 1;\n\n.flow-item {\n --step-background: var(\n --progress-flow-step-background-color,\n rgb(var(--contrast-600))\n );\n --step-background--selected: var(\n --progress-flow-step-background-color--selected,\n var(--mdc-theme-primary)\n );\n --step-background--passed: var(\n --progress-flow-step-background-color--passed,\n var(--step-background--selected)\n );\n\n --step-text: var(\n --progress-flow-step-text-color,\n rgb(var(--contrast-1200))\n );\n --step-text--selected: var(\n --progress-flow-step-text-color--selected,\n var(--mdc-theme-on-primary)\n );\n --step-text--passed: var(\n --progress-flow-step-text-color--passed,\n var(--step-text--selected)\n );\n\n --step-divider-color: var(\n --progress-flow-step-divider-color,\n rgb(var(--contrast-100))\n );\n\n position: relative;\n width: 100%;\n\n display: flex;\n flex-direction: column;\n align-items: stretch;\n\n &:not(.off-progress-item, .last) {\n .divider {\n &:after {\n content: '';\n }\n }\n }\n\n &.off-progress-item {\n padding-left: functions.pxToRem(8);\n }\n\n &.first-off-progress-item {\n padding-left: functions.pxToRem(16);\n }\n}\n\n.step {\n transition:\n background-color 0.2s ease,\n box-shadow 0.2s ease;\n\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 100%;\n height: var(--step-height);\n border: none;\n font-size: functions.pxToRem(14);\n\n &.disabled {\n cursor: not-allowed;\n\n &.readonly {\n opacity: 1;\n cursor: default;\n }\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n box-shadow: var(--shadow-depth-8-focused);\n }\n\n .flow-item:not(.off-progress-item, .first) & {\n padding-left: calc(var(--step-height) / 2);\n }\n\n .flow-item:not(.selected) & {\n &:not(.disabled) {\n cursor: pointer;\n &:hover {\n box-shadow: var(--button-shadow-normal);\n }\n &:active {\n box-shadow: var(--button-shadow-pressed);\n }\n }\n }\n\n .off-progress-item & {\n border-radius: functions.pxToRem(4);\n padding: 0 functions.pxToRem(12);\n\n .icon {\n margin-left: 0;\n }\n }\n .flow-item.first & {\n border-top-left-radius: var(--step-height);\n border-bottom-left-radius: var(--step-height);\n padding-left: functions.pxToRem(20);\n }\n .flow-item.last & {\n border-top-right-radius: var(--step-height);\n border-bottom-right-radius: var(--step-height);\n padding-right: functions.pxToRem(20);\n }\n}\n\n.divider {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--step-height);\n height: var(--step-height);\n\n position: absolute;\n z-index: $limel-progress-flow-divider;\n right: calc(var(--step-height) / 2 * -1);\n overflow: hidden;\n\n &:after {\n position: absolute;\n display: block;\n\n box-sizing: border-box;\n transition: background-color 0.2s ease;\n\n width: 100%;\n height: 100%;\n right: calc(var(--step-height) / 5);\n transform: rotate(45deg);\n border: {\n style: solid;\n width: functions.pxToRem(2) functions.pxToRem(2) 0 0;\n radius: 0 functions.pxToRem(8) 0 0;\n color: var(--step-divider-color);\n }\n }\n .flow-item.last & {\n width: 0;\n }\n}\n\n.text,\n.secondary-text {\n @include mixins.truncate-text();\n max-width: var(--max-text-width);\n z-index: $limel-progress-flow-step-content;\n}\n\n.secondary-text {\n font-size: functions.pxToRem(12);\n margin: auto;\n padding-left: calc(var(--step-height) / 2);\n}\n\n.icon {\n margin: 0 functions.pxToRem(8) 0 functions.pxToRem(4);\n z-index: $limel-progress-flow-step-content;\n}\n\n@import './partial-styles/_selected-indicator';\n@import './partial-styles/_colors';\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { FlowItem } from '../progress-flow.types';\nimport { getIconName } from '../../icon/get-icon-props';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-progress-flow-item',\n shadow: false,\n styleUrl: 'progress-flow-item.scss',\n})\nexport class ProgressFlowItem {\n @Element()\n public element: HTMLLimelProgressFlowItemElement;\n\n /\n The flow item that should be rendered\n /\n @Prop()\n public item: FlowItem = null;\n\n /\n True if the flow item should be disabled\n /\n @Prop()\n public disabled = false;\n\n /\n True if the flow item should be readonly\n /\n @Prop()\n public readonly = false;\n\n /\n True for current step\n /\n @Prop()\n public currentStep: boolean = false;\n\n /\n Fired when clicking on the flow item\n */\n @Event()\n public interact: EventEmitter<void>;\n\n public render() {\n if (!this.item) {\n return;\n }\n\n return [\n <button\n tabindex=\"0\"\n title={this.getToolTipText()}\n type=\"button\"\n class={{\n step: true,\n selected: this.item?.selected,\n disabled: this.isDisabled(),\n readonly: this.readonly,\n }}\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n aria-current={this.currentStep ? 'step' : null}\n >\n {this.renderIcon()}\n <span class=\"text\">{this.item.text}</span>\n {this.renderDivider()}\n </button>,\n this.renderSecondaryText(),\n ];\n }\n\n private isDisabled() {\n return this.item?.disabled \|\| this.readonly \|\| this.disabled;\n }\n\n private getToolTipText() {\n if (!this.item.secondaryText) {\n return this.item.text;\n }\n\n return [this.item.text, this.item.secondaryText].join(' · ');\n }\n\n private handleClick = () => {\n this.interact.emit();\n };\n\n private renderSecondaryText() {\n if (!this.item?.secondaryText) {\n return;\n }\n\n return <div class=\"secondary-text\">{this.item.secondaryText}</div>;\n }\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n const name = getIconName(this.item.icon);\n\n return <limel-icon name={name} size=\"small\" class=\"icon\" />;\n }\n\n private renderDivider() {\n if (this.item.isOffProgress) {\n return;\n }\n\n return <div class=\"divider\" />;\n }\n}\n"],"version":3}
1	+ {"file":"limel-progress-flow-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,gmIAAgmI;;MCmB/mI,gBAAgB;;;;IA2EjB,gBAAW,GAAG;MAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACxB,CAAC;gBArEsB,IAAI;oBAMV,KAAK;oBAML,KAAK;uBAMO,KAAK;;EAQ5B,MAAM;;IACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,OAAO;MACHA,oBACI,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;UACH,IAAI,EAAE,IAAI;UACV,QAAQ,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ;UAC7B,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE;UAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE,kBACb,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,IAAI,IAE7C,IAAI,CAAC,UAAU,EAAE,EAClBA,kBAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAQ,EACzC,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,cAAc,EAAE,CACjB;MACT,IAAI,CAAC,mBAAmB,EAAE;KAC7B,CAAC;GACL;EAEO,UAAU;;IACd,OAAO,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,KAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;GAChE;EAEO,cAAc;IAClB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;KACzB;IAED,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAChE;EAMO,mBAAmB;;IACvB,IAAI,EAAC,MAAA,IAAI,CAAC,IAAI,0CAAE,aAAa,CAAA,EAAE;MAC3B,OAAO;KACV;IAED,OAAOA,iBAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAO,CAAC;GACtE;EAEO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACjB,OAAO;KACV;IAED,MAAM,IAAI,GAAGC,wBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEzC,OAAOD,wBAAY,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,GAAG,CAAC;GAC/D;EAEO,aAAa;IACjB,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MACzB,OAAO;KACV;IAED,OAAOA,iBAAK,KAAK,EAAC,SAAS,GAAG,CAAC;GAClC;EAEO,cAAc;IAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE;MACpB,OAAO;KACV;IAED,OAAOA,wBAAY,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,WAAW,GAAG,CAAC;GACvD;;;;;;;","names":["h","getIconName"],"sources":["./src/components/progress-flow/progress-flow-item/progress-flow-item.scss?tag=limel-progress-flow-item","./src/components/progress-flow/progress-flow-item/progress-flow-item.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n$limel-progress-flow-step-content: 2;\n$limel-progress-flow-divider: 1;\n\n.flow-item {\n --step-background: var(\n --progress-flow-step-background-color,\n rgb(var(--contrast-600))\n );\n --step-background--selected: var(\n --progress-flow-step-background-color--selected,\n var(--mdc-theme-primary)\n );\n --step-background--passed: var(\n --progress-flow-step-background-color--passed,\n var(--step-background--selected)\n );\n\n --step-text: var(\n --progress-flow-step-text-color,\n rgb(var(--contrast-1200))\n );\n --step-text--selected: var(\n --progress-flow-step-text-color--selected,\n var(--mdc-theme-on-primary)\n );\n --step-text--passed: var(\n --progress-flow-step-text-color--passed,\n var(--step-text--selected)\n );\n\n --step-divider-color: var(\n --progress-flow-step-divider-color,\n rgb(var(--contrast-100))\n );\n\n position: relative;\n width: 100%;\n\n display: flex;\n flex-direction: column;\n align-items: stretch;\n\n &:not(.off-progress-item, .last) {\n .divider {\n &:after {\n content: '';\n }\n }\n }\n\n &.off-progress-item {\n padding-left: functions.pxToRem(8);\n }\n\n &.first-off-progress-item {\n padding-left: functions.pxToRem(16);\n }\n}\n\n.step {\n transition:\n background-color 0.2s ease,\n box-shadow 0.2s ease;\n\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 100%;\n height: var(--step-height);\n border: none;\n font-size: functions.pxToRem(14);\n\n &.disabled {\n cursor: not-allowed;\n\n &.readonly {\n opacity: 1;\n cursor: default;\n }\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n box-shadow: var(--shadow-depth-8-focused);\n }\n\n .flow-item:not(.off-progress-item, .first) & {\n padding-left: calc(var(--step-height) / 2);\n }\n\n .flow-item:not(.selected) & {\n &:not(.disabled) {\n cursor: pointer;\n &:hover {\n box-shadow: var(--button-shadow-normal);\n }\n &:active {\n box-shadow: var(--button-shadow-pressed);\n }\n }\n }\n\n .off-progress-item & {\n border-radius: functions.pxToRem(4);\n padding: 0 functions.pxToRem(12);\n\n .icon {\n margin-left: 0;\n }\n }\n .flow-item.first & {\n border-top-left-radius: var(--step-height);\n border-bottom-left-radius: var(--step-height);\n padding-left: functions.pxToRem(20);\n }\n .flow-item.last & {\n border-top-right-radius: var(--step-height);\n border-bottom-right-radius: var(--step-height);\n padding-right: functions.pxToRem(20);\n }\n}\n\n.divider {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--step-height);\n height: var(--step-height);\n\n position: absolute;\n z-index: $limel-progress-flow-divider;\n right: calc(var(--step-height) / 2 * -1);\n overflow: hidden;\n\n &:after {\n position: absolute;\n display: block;\n\n box-sizing: border-box;\n transition: background-color 0.2s ease;\n\n width: 100%;\n height: 100%;\n right: calc(var(--step-height) / 5);\n transform: rotate(45deg);\n border: {\n style: solid;\n width: functions.pxToRem(2) functions.pxToRem(2) 0 0;\n radius: 0 functions.pxToRem(8) 0 0;\n color: var(--step-divider-color);\n }\n }\n .flow-item.last & {\n width: 0;\n }\n}\n\n.text,\n.secondary-text {\n @include mixins.truncate-text();\n max-width: var(--max-text-width);\n z-index: $limel-progress-flow-step-content;\n}\n\n.secondary-text {\n font-size: functions.pxToRem(12);\n margin: auto;\n padding-left: calc(var(--step-height) / 2);\n}\n\n.icon {\n margin: 0 functions.pxToRem(8) 0 functions.pxToRem(4);\n z-index: $limel-progress-flow-step-content;\n}\n\n@import './partial-styles/_selected-indicator';\n@import './partial-styles/_colors';\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { FlowItem } from '../progress-flow.types';\nimport { getIconName } from '../../icon/get-icon-props';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-progress-flow-item',\n shadow: false,\n styleUrl: 'progress-flow-item.scss',\n})\nexport class ProgressFlowItem {\n @Element()\n public element: HTMLLimelProgressFlowItemElement;\n\n /\n The flow item that should be rendered\n /\n @Prop()\n public item: FlowItem = null;\n\n /\n True if the flow item should be disabled\n /\n @Prop()\n public disabled = false;\n\n /\n True if the flow item should be readonly\n /\n @Prop()\n public readonly = false;\n\n /\n True for current step\n /\n @Prop()\n public currentStep: boolean = false;\n\n /\n Fired when clicking on the flow item\n */\n @Event()\n public interact: EventEmitter<void>;\n\n public render() {\n if (!this.item) {\n return;\n }\n\n return [\n <button\n tabindex=\"0\"\n title={this.getToolTipText()}\n type=\"button\"\n class={{\n step: true,\n selected: this.item?.selected,\n disabled: this.isDisabled(),\n readonly: this.readonly,\n }}\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n aria-current={this.currentStep ? 'step' : null}\n >\n {this.renderIcon()}\n <span class=\"text\">{this.item.text}</span>\n {this.renderDivider()}\n {this.renderLockIcon()}\n </button>,\n this.renderSecondaryText(),\n ];\n }\n\n private isDisabled() {\n return this.item?.disabled \|\| this.readonly \|\| this.disabled;\n }\n\n private getToolTipText() {\n if (!this.item.secondaryText) {\n return this.item.text;\n }\n\n return [this.item.text, this.item.secondaryText].join(' · ');\n }\n\n private handleClick = () => {\n this.interact.emit();\n };\n\n private renderSecondaryText() {\n if (!this.item?.secondaryText) {\n return;\n }\n\n return <div class=\"secondary-text\">{this.item.secondaryText}</div>;\n }\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n const name = getIconName(this.item.icon);\n\n return <limel-icon name={name} size=\"small\" class=\"icon\" />;\n }\n\n private renderDivider() {\n if (this.item.isOffProgress) {\n return;\n }\n\n return <div class=\"divider\" />;\n }\n\n private renderLockIcon() {\n if (!this.isDisabled()) {\n return;\n }\n\n return <limel-icon name=\"lock\" class=\"lock-icon\" />;\n }\n}\n"],"version":3}

package/dist/collection/components/button/button.js CHANGED Viewed

@@ -41,7 +41,7 @@ export class Button {
         '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(), h("svg", { viewBox: "0 0 30 30" }, this.renderLoadingIcons()))));
+      }, 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()))));
   }
   loadingWatcher(newValue, oldValue) {
     if (oldValue && !newValue) {

package/dist/collection/components/button/button.js.map CHANGED Viewed

	@@ -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;;~~IAsIP~~,4BAAuB,GAAG,CAAC,CAAC,EAAE,EAAE;MACpC,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,CAAC,CAAC,cAAc,EAAE,CAAC;OACtB;IACL,CAAC,CAAC;;~~mBA/He~~,KAAK;oBAMJ,KAAK;;oBAYL,KAAK;mBAON,KAAK;yBAOC,KAAK;sBAGP,KAAK;;EAOnB,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAClC,CAAC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpC,CAAC;EAEM,MAAM;IACT,OAAO,CACH,EAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB;MACvC,cACI,KAAK,EAAE;UACH,OAAO,EAAE,IAAI,CAAC,OAAO;UACrB,aAAa,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,aAAa;UACrD,aAAa,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,aAAa;UACpD,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;~~QAEtC~~,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,WAAW,EAAE;QAClB,IAAI,CAAC,aAAa,EAAE;QACrB,WAAK,OAAO,EAAC,WAAW,IAAE,IAAI,CAAC,kBAAkB,EAAE,CAAO,CACrD,CACN,CACV,CAAC;EACN,CAAC;EAGS,cAAc,CAAC,QAAiB,EAAE,QAAiB;IACzD,IAAI,QAAQ,IAAI,CAAC,QAAQ,EAAE;MACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;MACvB,MAAM,OAAO,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;QAC5C,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;MAC5B,CAAC,EAAE,OAAO,CAAC,CAAC;KACf;SAAM,IAAI,QAAQ,EAAE;MACjB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;MACxB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAC/C;EACL,CAAC;EAEO,kBAAkB;IACtB,IAAI,IAAI,CAAC,aAAa,EAAE;MACpB,OAAO;QACH,YAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG;QACtC,YAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAG;OACzC,CAAC;KACL;IAED,OAAO;MACH,YAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG;MACvC,YAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG;KAC1C,CAAC;EACN,CAAC;EAEO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,OAAO,kBAAY,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;EACxD,CAAC;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAAC;EACnD,CAAC;EAEO,aAAa;IACjB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACf,OAAO;KACV;IAED,OAAO,qBAAe,WAAW,EAAE,KAAK,GAAI,CAAC;EACjD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOJ","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 >\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	+ {"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"]}

package/dist/collection/components/progress-flow/progress-flow-item/progress-flow-item.css CHANGED Viewed

@@ -212,38 +212,36 @@
   z-index: 2;
 }
-.step:before, .step:after {
+.step:before,
+.step .lock-icon {
   pointer-events: none;
   box-sizing: border-box;
   z-index: 2;
+}
+.step::before {
   position: absolute;
   right: var(--selected-indicator-right);
   border-radius: 50%;
 }
-.last .step:before, .last .step:after {
+.last .step:before,
+.last .step .lock-icon {
   right: 0.5rem;
 }
-.flow-item:not(.off-progress-item) .step.selected:before, .flow-item:not(.off-progress-item) .step.selected:after {
+.flow-item:not(.off-progress-item) .step.selected:before {
   content: "";
   width: 0.375rem;
   height: 0.375rem;
-}
-.flow-item:not(.off-progress-item) .step.selected:before {
-  background-color: var(--step-divider-color);
+  background-color: rgb(var(--contrast-700));
   opacity: 0.7;
 }
-.flow-item:not(.off-progress-item) .step.disabled:before, .flow-item:not(.off-progress-item) .step.disabled:after {
+.lock-icon {
+  margin-left: 0.25rem;
+  margin-right: -0.5rem;
   width: 0.75rem;
-  height: 0.75rem;
-}
-.flow-item:not(.off-progress-item) .step.disabled:after {
-  content: "";
-  background-image: url("data:image/svg+xml;charset=utf-8, <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'><path fill='rgb(127,127,127)' d='M32.18 13.711c0-2.207-1.793-4-4.002-4H11.821c-2.208 0-4 1.793-4 4V28.29a4 4 0 0 0 4 4h16.357a4.002 4.002 0 0 0 4.001-4V13.711Z'/><path fill='rgb(127,127,127)' d='M11.211 9.758V7.673A7.489 7.489 0 0 1 18.696.188h2.608a7.489 7.489 0 0 1 7.485 7.485v2.085h-3V7.673a4.488 4.488 0 0 0-4.485-4.485h-2.608a4.488 4.488 0 0 0-4.485 4.485v2.085h-3Z'/></svg>");
-  background-size: 90%;
-  background-repeat: no-repeat;
-  background-position: center;
-  mix-blend-mode: multiply;
+  color: currentColor;
+  scale: 0.8;
 }
 .step {

package/dist/collection/components/progress-flow/progress-flow-item/progress-flow-item.js CHANGED Viewed

@@ -24,7 +24,7 @@ export class ProgressFlowItem {
           selected: (_a = this.item) === null || _a === void 0 ? void 0 : _a.selected,
           disabled: this.isDisabled(),
           readonly: this.readonly,
-        }, onClick: this.handleClick, disabled: this.isDisabled(), "aria-current": this.currentStep ? 'step' : null }, this.renderIcon(), h("span", { class: "text" }, this.item.text), this.renderDivider()),
+        }, onClick: this.handleClick, disabled: this.isDisabled(), "aria-current": this.currentStep ? 'step' : null }, this.renderIcon(), h("span", { class: "text" }, this.item.text), this.renderDivider(), this.renderLockIcon()),
       this.renderSecondaryText(),
     ];
   }
@@ -58,6 +58,12 @@ export class ProgressFlowItem {
     }
     return h("div", { class: "divider" });
   }
+  renderLockIcon() {
+    if (!this.isDisabled()) {
+      return;
+    }
+    return h("limel-icon", { name: "lock", class: "lock-icon" });
+  }
   static get is() { return "limel-progress-flow-item"; }
   static get originalStyleUrls() {
     return {

package/dist/collection/components/progress-flow/progress-flow-item/progress-flow-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-flow-item.js","sourceRoot":"","sources":["../../../../src/components/progress-flow/progress-flow-item/progress-flow-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD;;GAEG;AAMH,MAAM,OAAO,gBAAgB;;~~IA0EjB~~,gBAAW,GAAG,GAAG,EAAE;MACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC,CAAC;~~gBApEsB~~,IAAI;oBAMV,KAAK;oBAML,KAAK;uBAMO,KAAK;;EAQ5B,MAAM;;IACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,OAAO;MACH,cACI,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;UACH,IAAI,EAAE,IAAI;UACV,QAAQ,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ;UAC7B,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE;UAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE,kBACb,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;QAE7C,IAAI,CAAC,UAAU,EAAE;QAClB,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAQ;QACzC,IAAI,CAAC,aAAa,EAAE,~~CAChB~~;MACT,IAAI,CAAC,mBAAmB,EAAE;KAC7B,CAAC;EACN,CAAC;EAEO,UAAU;;IACd,OAAO,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,KAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;EACjE,CAAC;EAEO,cAAc;IAClB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;KACzB;IAED,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACjE,CAAC;EAMO,mBAAmB;;IACvB,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,aAAa,CAAA,EAAE;MAC3B,OAAO;KACV;IAED,OAAO,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAO,CAAC;EACvE,CAAC;EAEO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACjB,OAAO;KACV;IAED,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEzC,OAAO,kBAAY,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,GAAG,CAAC;EAChE,CAAC;EAEO,aAAa;IACjB,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MACzB,OAAO;KACV;IAED,OAAO,WAAK,KAAK,EAAC,SAAS,GAAG,CAAC;EACnC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { FlowItem } from '../progress-flow.types';\nimport { getIconName } from '../../icon/get-icon-props';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-progress-flow-item',\n shadow: false,\n styleUrl: 'progress-flow-item.scss',\n})\nexport class ProgressFlowItem {\n @Element()\n public element: HTMLLimelProgressFlowItemElement;\n\n /\n The flow item that should be rendered\n /\n @Prop()\n public item: FlowItem = null;\n\n /\n True if the flow item should be disabled\n /\n @Prop()\n public disabled = false;\n\n /\n True if the flow item should be readonly\n /\n @Prop()\n public readonly = false;\n\n /\n True for current step\n /\n @Prop()\n public currentStep: boolean = false;\n\n /\n Fired when clicking on the flow item\n */\n @Event()\n public interact: EventEmitter<void>;\n\n public render() {\n if (!this.item) {\n return;\n }\n\n return [\n <button\n tabindex=\"0\"\n title={this.getToolTipText()}\n type=\"button\"\n class={{\n step: true,\n selected: this.item?.selected,\n disabled: this.isDisabled(),\n readonly: this.readonly,\n }}\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n aria-current={this.currentStep ? 'step' : null}\n >\n {this.renderIcon()}\n <span class=\"text\">{this.item.text}</span>\n {this.renderDivider()}\n </button>,\n this.renderSecondaryText(),\n ];\n }\n\n private isDisabled() {\n return this.item?.disabled \|\| this.readonly \|\| this.disabled;\n }\n\n private getToolTipText() {\n if (!this.item.secondaryText) {\n return this.item.text;\n }\n\n return [this.item.text, this.item.secondaryText].join(' · ');\n }\n\n private handleClick = () => {\n this.interact.emit();\n };\n\n private renderSecondaryText() {\n if (!this.item?.secondaryText) {\n return;\n }\n\n return <div class=\"secondary-text\">{this.item.secondaryText}</div>;\n }\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n const name = getIconName(this.item.icon);\n\n return <limel-icon name={name} size=\"small\" class=\"icon\" />;\n }\n\n private renderDivider() {\n if (this.item.isOffProgress) {\n return;\n }\n\n return <div class=\"divider\" />;\n }\n}\n"]}
1	+ {"version":3,"file":"progress-flow-item.js","sourceRoot":"","sources":["../../../../src/components/progress-flow/progress-flow-item/progress-flow-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { FlowItem } from '../progress-flow.types';\nimport { getIconName } from '../../icon/get-icon-props';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-progress-flow-item',\n shadow: false,\n styleUrl: 'progress-flow-item.scss',\n})\nexport class ProgressFlowItem {\n @Element()\n public element: HTMLLimelProgressFlowItemElement;\n\n /\n The flow item that should be rendered\n /\n @Prop()\n public item: FlowItem = null;\n\n /\n True if the flow item should be disabled\n /\n @Prop()\n public disabled = false;\n\n /\n True if the flow item should be readonly\n /\n @Prop()\n public readonly = false;\n\n /\n True for current step\n /\n @Prop()\n public currentStep: boolean = false;\n\n /\n Fired when clicking on the flow item\n */\n @Event()\n public interact: EventEmitter<void>;\n\n public render() {\n if (!this.item) {\n return;\n }\n\n return [\n <button\n tabindex=\"0\"\n title={this.getToolTipText()}\n type=\"button\"\n class={{\n step: true,\n selected: this.item?.selected,\n disabled: this.isDisabled(),\n readonly: this.readonly,\n }}\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n aria-current={this.currentStep ? 'step' : null}\n >\n {this.renderIcon()}\n <span class=\"text\">{this.item.text}</span>\n {this.renderDivider()}\n {this.renderLockIcon()}\n </button>,\n this.renderSecondaryText(),\n ];\n }\n\n private isDisabled() {\n return this.item?.disabled \|\| this.readonly \|\| this.disabled;\n }\n\n private getToolTipText() {\n if (!this.item.secondaryText) {\n return this.item.text;\n }\n\n return [this.item.text, this.item.secondaryText].join(' · ');\n }\n\n private handleClick = () => {\n this.interact.emit();\n };\n\n private renderSecondaryText() {\n if (!this.item?.secondaryText) {\n return;\n }\n\n return <div class=\"secondary-text\">{this.item.secondaryText}</div>;\n }\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n const name = getIconName(this.item.icon);\n\n return <limel-icon name={name} size=\"small\" class=\"icon\" />;\n }\n\n private renderDivider() {\n if (this.item.isOffProgress) {\n return;\n }\n\n return <div class=\"divider\" />;\n }\n\n private renderLockIcon() {\n if (!this.isDisabled()) {\n return;\n }\n\n return <limel-icon name=\"lock\" class=\"lock-icon\" />;\n }\n}\n"]}

package/dist/collection/test-assets/icons/lock.svg ADDED Viewed

@@ -0,0 +1,6 @@
+<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" version="1.0">
+ <metadata>image/svg+xmlOpenclipart</metadata>
+ <g class="layer">
+  <title>lock</title>
+ </g>
+</svg>

package/dist/esm/limel-button.entry.js CHANGED Viewed

@@ -32,7 +32,7 @@ const Button = class {
         '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(), h("svg", { viewBox: "0 0 30 30" }, this.renderLoadingIcons()))));
+      }, 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()))));
   }
   loadingWatcher(newValue, oldValue) {
     if (oldValue && !newValue) {

package/dist/esm/limel-button.entry.js.map CHANGED Viewed

	@@ -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}

package/dist/esm/limel-progress-flow-item.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6156b4fd.js';
 import { g as getIconName } from './get-icon-props-0b65f85e.js';
-const progressFlowItemCss = "@charset \"UTF-8\";.flow-item{--step-background:var(\n      --progress-flow-step-background-color,\n      rgb(var(--contrast-600))\n  );--step-background--selected:var(\n      --progress-flow-step-background-color--selected,\n      var(--mdc-theme-primary)\n  );--step-background--passed:var(\n      --progress-flow-step-background-color--passed,\n      var(--step-background--selected)\n  );--step-text:var(\n      --progress-flow-step-text-color,\n      rgb(var(--contrast-1200))\n  );--step-text--selected:var(\n      --progress-flow-step-text-color--selected,\n      var(--mdc-theme-on-primary)\n  );--step-text--passed:var(\n      --progress-flow-step-text-color--passed,\n      var(--step-text--selected)\n  );--step-divider-color:var(\n      --progress-flow-step-divider-color,\n      rgb(var(--contrast-100))\n  );position:relative;width:100%;display:flex;flex-direction:column;align-items:stretch}.flow-item:not(.off-progress-item,.last) .divider:after{content:\"\"}.flow-item.off-progress-item{padding-left:0.5rem}.flow-item.first-off-progress-item{padding-left:1rem}.step{transition:background-color 0.2s ease, box-shadow 0.2s ease;display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:var(--step-height);border:none;font-size:0.875rem}.step.disabled{cursor:not-allowed}.step.disabled.readonly{opacity:1;cursor:default}.step:focus{outline:none}.step:focus-visible{box-shadow:var(--shadow-depth-8-focused)}.flow-item:not(.off-progress-item,.first) .step{padding-left:calc(var(--step-height) / 2)}.flow-item:not(.selected) .step:not(.disabled){cursor:pointer}.flow-item:not(.selected) .step:not(.disabled):hover{box-shadow:var(--button-shadow-normal)}.flow-item:not(.selected) .step:not(.disabled):active{box-shadow:var(--button-shadow-pressed)}.off-progress-item .step{border-radius:0.25rem;padding:0 0.75rem}.off-progress-item .step .icon{margin-left:0}.flow-item.first .step{border-top-left-radius:var(--step-height);border-bottom-left-radius:var(--step-height);padding-left:1.25rem}.flow-item.last .step{border-top-right-radius:var(--step-height);border-bottom-right-radius:var(--step-height);padding-right:1.25rem}.divider{display:flex;align-items:center;justify-content:center;width:var(--step-height);height:var(--step-height);position:absolute;z-index:1;right:calc(var(--step-height) / 2 * -1);overflow:hidden}.divider:after{position:absolute;display:block;box-sizing:border-box;transition:background-color 0.2s ease;width:100%;height:100%;right:calc(var(--step-height) / 5);transform:rotate(45deg);border-style:solid;border-width:0.125rem 0.125rem 0 0;border-radius:0 0.5rem 0 0;border-color:var(--step-divider-color)}.flow-item.last .divider{width:0}.text,.secondary-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:var(--max-text-width);z-index:2}.secondary-text{font-size:0.75rem;margin:auto;padding-left:calc(var(--step-height) / 2)}.icon{margin:0 0.5rem 0 0.25rem;z-index:2}.step:before,.step:after{pointer-events:none;box-sizing:border-box;z-index:2;position:absolute;right:var(--selected-indicator-right);border-radius:50%}.last .step:before,.last .step:after{right:0.5rem}.flow-item:not(.off-progress-item) .step.selected:before,.flow-item:not(.off-progress-item) .step.selected:after{content:\"\";width:0.375rem;height:0.375rem}.flow-item:not(.off-progress-item) .step.selected:before{background-color:var(--step-divider-color);opacity:0.7}.flow-item:not(.off-progress-item) .step.disabled:before,.flow-item:not(.off-progress-item) .step.disabled:after{width:0.75rem;height:0.75rem}.flow-item:not(.off-progress-item) .step.disabled:after{content:\"\";background-image:url(\"data:image/svg+xml;charset=utf-8, <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'><path fill='rgb(127,127,127)' d='M32.18 13.711c0-2.207-1.793-4-4.002-4H11.821c-2.208 0-4 1.793-4 4V28.29a4 4 0 0 0 4 4h16.357a4.002 4.002 0 0 0 4.001-4V13.711Z'/><path fill='rgb(127,127,127)' d='M11.211 9.758V7.673A7.489 7.489 0 0 1 18.696.188h2.608a7.489 7.489 0 0 1 7.485 7.485v2.085h-3V7.673a4.488 4.488 0 0 0-4.485-4.485h-2.608a4.488 4.488 0 0 0-4.485 4.485v2.085h-3Z'/></svg>\");background-size:90%;background-repeat:no-repeat;background-position:center;mix-blend-mode:multiply}.step{color:var(--step-text);background-color:var(--step-background)}.step .icon{color:var(--progress-flow-icon-color--inactive, var(--step-text))}.flow-item.selected .step{color:var(--step-text--selected);background-color:var(--step-background--selected)}.flow-item.selected .step .divider:after{background-color:var(--step-background--selected)}.flow-item.selected .step .icon{color:var(--step-text--selected)}.flow-item.passed .step{color:var(--step-text--passed);background-color:var(--step-background--passed)}.flow-item.passed .step .divider:after{background-color:var(--step-background--passed)}.flow-item.passed .step .icon{color:var(--step-text--passed)}.divider:after{border-color:var(--step-divider-color);background-color:var(--step-background)}";
+const progressFlowItemCss = "@charset \"UTF-8\";.flow-item{--step-background:var(\n      --progress-flow-step-background-color,\n      rgb(var(--contrast-600))\n  );--step-background--selected:var(\n      --progress-flow-step-background-color--selected,\n      var(--mdc-theme-primary)\n  );--step-background--passed:var(\n      --progress-flow-step-background-color--passed,\n      var(--step-background--selected)\n  );--step-text:var(\n      --progress-flow-step-text-color,\n      rgb(var(--contrast-1200))\n  );--step-text--selected:var(\n      --progress-flow-step-text-color--selected,\n      var(--mdc-theme-on-primary)\n  );--step-text--passed:var(\n      --progress-flow-step-text-color--passed,\n      var(--step-text--selected)\n  );--step-divider-color:var(\n      --progress-flow-step-divider-color,\n      rgb(var(--contrast-100))\n  );position:relative;width:100%;display:flex;flex-direction:column;align-items:stretch}.flow-item:not(.off-progress-item,.last) .divider:after{content:\"\"}.flow-item.off-progress-item{padding-left:0.5rem}.flow-item.first-off-progress-item{padding-left:1rem}.step{transition:background-color 0.2s ease, box-shadow 0.2s ease;display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:var(--step-height);border:none;font-size:0.875rem}.step.disabled{cursor:not-allowed}.step.disabled.readonly{opacity:1;cursor:default}.step:focus{outline:none}.step:focus-visible{box-shadow:var(--shadow-depth-8-focused)}.flow-item:not(.off-progress-item,.first) .step{padding-left:calc(var(--step-height) / 2)}.flow-item:not(.selected) .step:not(.disabled){cursor:pointer}.flow-item:not(.selected) .step:not(.disabled):hover{box-shadow:var(--button-shadow-normal)}.flow-item:not(.selected) .step:not(.disabled):active{box-shadow:var(--button-shadow-pressed)}.off-progress-item .step{border-radius:0.25rem;padding:0 0.75rem}.off-progress-item .step .icon{margin-left:0}.flow-item.first .step{border-top-left-radius:var(--step-height);border-bottom-left-radius:var(--step-height);padding-left:1.25rem}.flow-item.last .step{border-top-right-radius:var(--step-height);border-bottom-right-radius:var(--step-height);padding-right:1.25rem}.divider{display:flex;align-items:center;justify-content:center;width:var(--step-height);height:var(--step-height);position:absolute;z-index:1;right:calc(var(--step-height) / 2 * -1);overflow:hidden}.divider:after{position:absolute;display:block;box-sizing:border-box;transition:background-color 0.2s ease;width:100%;height:100%;right:calc(var(--step-height) / 5);transform:rotate(45deg);border-style:solid;border-width:0.125rem 0.125rem 0 0;border-radius:0 0.5rem 0 0;border-color:var(--step-divider-color)}.flow-item.last .divider{width:0}.text,.secondary-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:var(--max-text-width);z-index:2}.secondary-text{font-size:0.75rem;margin:auto;padding-left:calc(var(--step-height) / 2)}.icon{margin:0 0.5rem 0 0.25rem;z-index:2}.step:before,.step .lock-icon{pointer-events:none;box-sizing:border-box;z-index:2}.step::before{position:absolute;right:var(--selected-indicator-right);border-radius:50%}.last .step:before,.last .step .lock-icon{right:0.5rem}.flow-item:not(.off-progress-item) .step.selected:before{content:\"\";width:0.375rem;height:0.375rem;background-color:rgb(var(--contrast-700));opacity:0.7}.lock-icon{margin-left:0.25rem;margin-right:-0.5rem;width:0.75rem;color:currentColor;scale:0.8}.step{color:var(--step-text);background-color:var(--step-background)}.step .icon{color:var(--progress-flow-icon-color--inactive, var(--step-text))}.flow-item.selected .step{color:var(--step-text--selected);background-color:var(--step-background--selected)}.flow-item.selected .step .divider:after{background-color:var(--step-background--selected)}.flow-item.selected .step .icon{color:var(--step-text--selected)}.flow-item.passed .step{color:var(--step-text--passed);background-color:var(--step-background--passed)}.flow-item.passed .step .divider:after{background-color:var(--step-background--passed)}.flow-item.passed .step .icon{color:var(--step-text--passed)}.divider:after{border-color:var(--step-divider-color);background-color:var(--step-background)}";
 const ProgressFlowItem = class {
   constructor(hostRef) {
@@ -26,7 +26,7 @@ const ProgressFlowItem = class {
           selected: (_a = this.item) === null || _a === void 0 ? void 0 : _a.selected,
           disabled: this.isDisabled(),
           readonly: this.readonly,
-        }, onClick: this.handleClick, disabled: this.isDisabled(), "aria-current": this.currentStep ? 'step' : null }, this.renderIcon(), h("span", { class: "text" }, this.item.text), this.renderDivider()),
+        }, onClick: this.handleClick, disabled: this.isDisabled(), "aria-current": this.currentStep ? 'step' : null }, this.renderIcon(), h("span", { class: "text" }, this.item.text), this.renderDivider(), this.renderLockIcon()),
       this.renderSecondaryText(),
     ];
   }
@@ -60,6 +60,12 @@ const ProgressFlowItem = class {
     }
     return h("div", { class: "divider" });
   }
+  renderLockIcon() {
+    if (!this.isDisabled()) {
+      return;
+    }
+    return h("limel-icon", { name: "lock", class: "lock-icon" });
+  }
   get element() { return getElement(this); }
 };
 ProgressFlowItem.style = progressFlowItemCss;

package/dist/esm/limel-progress-flow-item.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-progress-flow-item.entry.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,i/~~JAAi/J;;MCmBhgK~~,gBAAgB;;;;~~IA0EjB~~,gBAAW,GAAG;MAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACxB,CAAC;~~gBApEsB~~,IAAI;oBAMV,KAAK;oBAML,KAAK;uBAMO,KAAK;;EAQ5B,MAAM;;IACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,OAAO;MACH,cACI,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;UACH,IAAI,EAAE,IAAI;UACV,QAAQ,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ;UAC7B,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE;UAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE,kBACb,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,IAAI,IAE7C,IAAI,CAAC,UAAU,EAAE,EAClB,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAQ,EACzC,IAAI,CAAC,aAAa,EAAE,~~CAChB~~;MACT,IAAI,CAAC,mBAAmB,EAAE;KAC7B,CAAC;GACL;EAEO,UAAU;;IACd,OAAO,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,KAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;GAChE;EAEO,cAAc;IAClB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;KACzB;IAED,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAChE;EAMO,mBAAmB;;IACvB,IAAI,EAAC,MAAA,IAAI,CAAC,IAAI,0CAAE,aAAa,CAAA,EAAE;MAC3B,OAAO;KACV;IAED,OAAO,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAO,CAAC;GACtE;EAEO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACjB,OAAO;KACV;IAED,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEzC,OAAO,kBAAY,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,GAAG,CAAC;GAC/D;EAEO,aAAa;IACjB,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MACzB,OAAO;KACV;IAED,OAAO,WAAK,KAAK,EAAC,SAAS,GAAG,CAAC;GAClC;;;;;;;","names":[],"sources":["./src/components/progress-flow/progress-flow-item/progress-flow-item.scss?tag=limel-progress-flow-item","./src/components/progress-flow/progress-flow-item/progress-flow-item.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n$limel-progress-flow-step-content: 2;\n$limel-progress-flow-divider: 1;\n\n.flow-item {\n --step-background: var(\n --progress-flow-step-background-color,\n rgb(var(--contrast-600))\n );\n --step-background--selected: var(\n --progress-flow-step-background-color--selected,\n var(--mdc-theme-primary)\n );\n --step-background--passed: var(\n --progress-flow-step-background-color--passed,\n var(--step-background--selected)\n );\n\n --step-text: var(\n --progress-flow-step-text-color,\n rgb(var(--contrast-1200))\n );\n --step-text--selected: var(\n --progress-flow-step-text-color--selected,\n var(--mdc-theme-on-primary)\n );\n --step-text--passed: var(\n --progress-flow-step-text-color--passed,\n var(--step-text--selected)\n );\n\n --step-divider-color: var(\n --progress-flow-step-divider-color,\n rgb(var(--contrast-100))\n );\n\n position: relative;\n width: 100%;\n\n display: flex;\n flex-direction: column;\n align-items: stretch;\n\n &:not(.off-progress-item, .last) {\n .divider {\n &:after {\n content: '';\n }\n }\n }\n\n &.off-progress-item {\n padding-left: functions.pxToRem(8);\n }\n\n &.first-off-progress-item {\n padding-left: functions.pxToRem(16);\n }\n}\n\n.step {\n transition:\n background-color 0.2s ease,\n box-shadow 0.2s ease;\n\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 100%;\n height: var(--step-height);\n border: none;\n font-size: functions.pxToRem(14);\n\n &.disabled {\n cursor: not-allowed;\n\n &.readonly {\n opacity: 1;\n cursor: default;\n }\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n box-shadow: var(--shadow-depth-8-focused);\n }\n\n .flow-item:not(.off-progress-item, .first) & {\n padding-left: calc(var(--step-height) / 2);\n }\n\n .flow-item:not(.selected) & {\n &:not(.disabled) {\n cursor: pointer;\n &:hover {\n box-shadow: var(--button-shadow-normal);\n }\n &:active {\n box-shadow: var(--button-shadow-pressed);\n }\n }\n }\n\n .off-progress-item & {\n border-radius: functions.pxToRem(4);\n padding: 0 functions.pxToRem(12);\n\n .icon {\n margin-left: 0;\n }\n }\n .flow-item.first & {\n border-top-left-radius: var(--step-height);\n border-bottom-left-radius: var(--step-height);\n padding-left: functions.pxToRem(20);\n }\n .flow-item.last & {\n border-top-right-radius: var(--step-height);\n border-bottom-right-radius: var(--step-height);\n padding-right: functions.pxToRem(20);\n }\n}\n\n.divider {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--step-height);\n height: var(--step-height);\n\n position: absolute;\n z-index: $limel-progress-flow-divider;\n right: calc(var(--step-height) / 2 * -1);\n overflow: hidden;\n\n &:after {\n position: absolute;\n display: block;\n\n box-sizing: border-box;\n transition: background-color 0.2s ease;\n\n width: 100%;\n height: 100%;\n right: calc(var(--step-height) / 5);\n transform: rotate(45deg);\n border: {\n style: solid;\n width: functions.pxToRem(2) functions.pxToRem(2) 0 0;\n radius: 0 functions.pxToRem(8) 0 0;\n color: var(--step-divider-color);\n }\n }\n .flow-item.last & {\n width: 0;\n }\n}\n\n.text,\n.secondary-text {\n @include mixins.truncate-text();\n max-width: var(--max-text-width);\n z-index: $limel-progress-flow-step-content;\n}\n\n.secondary-text {\n font-size: functions.pxToRem(12);\n margin: auto;\n padding-left: calc(var(--step-height) / 2);\n}\n\n.icon {\n margin: 0 functions.pxToRem(8) 0 functions.pxToRem(4);\n z-index: $limel-progress-flow-step-content;\n}\n\n@import './partial-styles/_selected-indicator';\n@import './partial-styles/_colors';\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { FlowItem } from '../progress-flow.types';\nimport { getIconName } from '../../icon/get-icon-props';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-progress-flow-item',\n shadow: false,\n styleUrl: 'progress-flow-item.scss',\n})\nexport class ProgressFlowItem {\n @Element()\n public element: HTMLLimelProgressFlowItemElement;\n\n /\n The flow item that should be rendered\n /\n @Prop()\n public item: FlowItem = null;\n\n /\n True if the flow item should be disabled\n /\n @Prop()\n public disabled = false;\n\n /\n True if the flow item should be readonly\n /\n @Prop()\n public readonly = false;\n\n /\n True for current step\n /\n @Prop()\n public currentStep: boolean = false;\n\n /\n Fired when clicking on the flow item\n */\n @Event()\n public interact: EventEmitter<void>;\n\n public render() {\n if (!this.item) {\n return;\n }\n\n return [\n <button\n tabindex=\"0\"\n title={this.getToolTipText()}\n type=\"button\"\n class={{\n step: true,\n selected: this.item?.selected,\n disabled: this.isDisabled(),\n readonly: this.readonly,\n }}\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n aria-current={this.currentStep ? 'step' : null}\n >\n {this.renderIcon()}\n <span class=\"text\">{this.item.text}</span>\n {this.renderDivider()}\n </button>,\n this.renderSecondaryText(),\n ];\n }\n\n private isDisabled() {\n return this.item?.disabled \|\| this.readonly \|\| this.disabled;\n }\n\n private getToolTipText() {\n if (!this.item.secondaryText) {\n return this.item.text;\n }\n\n return [this.item.text, this.item.secondaryText].join(' · ');\n }\n\n private handleClick = () => {\n this.interact.emit();\n };\n\n private renderSecondaryText() {\n if (!this.item?.secondaryText) {\n return;\n }\n\n return <div class=\"secondary-text\">{this.item.secondaryText}</div>;\n }\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n const name = getIconName(this.item.icon);\n\n return <limel-icon name={name} size=\"small\" class=\"icon\" />;\n }\n\n private renderDivider() {\n if (this.item.isOffProgress) {\n return;\n }\n\n return <div class=\"divider\" />;\n }\n}\n"],"version":3}
1	+ {"file":"limel-progress-flow-item.entry.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,gmIAAgmI;;MCmB/mI,gBAAgB;;;;IA2EjB,gBAAW,GAAG;MAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACxB,CAAC;gBArEsB,IAAI;oBAMV,KAAK;oBAML,KAAK;uBAMO,KAAK;;EAQ5B,MAAM;;IACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,OAAO;MACH,cACI,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;UACH,IAAI,EAAE,IAAI;UACV,QAAQ,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ;UAC7B,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE;UAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE,kBACb,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,IAAI,IAE7C,IAAI,CAAC,UAAU,EAAE,EAClB,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAQ,EACzC,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,cAAc,EAAE,CACjB;MACT,IAAI,CAAC,mBAAmB,EAAE;KAC7B,CAAC;GACL;EAEO,UAAU;;IACd,OAAO,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,KAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;GAChE;EAEO,cAAc;IAClB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;KACzB;IAED,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAChE;EAMO,mBAAmB;;IACvB,IAAI,EAAC,MAAA,IAAI,CAAC,IAAI,0CAAE,aAAa,CAAA,EAAE;MAC3B,OAAO;KACV;IAED,OAAO,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAO,CAAC;GACtE;EAEO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACjB,OAAO;KACV;IAED,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEzC,OAAO,kBAAY,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,GAAG,CAAC;GAC/D;EAEO,aAAa;IACjB,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MACzB,OAAO;KACV;IAED,OAAO,WAAK,KAAK,EAAC,SAAS,GAAG,CAAC;GAClC;EAEO,cAAc;IAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE;MACpB,OAAO;KACV;IAED,OAAO,kBAAY,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,WAAW,GAAG,CAAC;GACvD;;;;;;;","names":[],"sources":["./src/components/progress-flow/progress-flow-item/progress-flow-item.scss?tag=limel-progress-flow-item","./src/components/progress-flow/progress-flow-item/progress-flow-item.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n$limel-progress-flow-step-content: 2;\n$limel-progress-flow-divider: 1;\n\n.flow-item {\n --step-background: var(\n --progress-flow-step-background-color,\n rgb(var(--contrast-600))\n );\n --step-background--selected: var(\n --progress-flow-step-background-color--selected,\n var(--mdc-theme-primary)\n );\n --step-background--passed: var(\n --progress-flow-step-background-color--passed,\n var(--step-background--selected)\n );\n\n --step-text: var(\n --progress-flow-step-text-color,\n rgb(var(--contrast-1200))\n );\n --step-text--selected: var(\n --progress-flow-step-text-color--selected,\n var(--mdc-theme-on-primary)\n );\n --step-text--passed: var(\n --progress-flow-step-text-color--passed,\n var(--step-text--selected)\n );\n\n --step-divider-color: var(\n --progress-flow-step-divider-color,\n rgb(var(--contrast-100))\n );\n\n position: relative;\n width: 100%;\n\n display: flex;\n flex-direction: column;\n align-items: stretch;\n\n &:not(.off-progress-item, .last) {\n .divider {\n &:after {\n content: '';\n }\n }\n }\n\n &.off-progress-item {\n padding-left: functions.pxToRem(8);\n }\n\n &.first-off-progress-item {\n padding-left: functions.pxToRem(16);\n }\n}\n\n.step {\n transition:\n background-color 0.2s ease,\n box-shadow 0.2s ease;\n\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 100%;\n height: var(--step-height);\n border: none;\n font-size: functions.pxToRem(14);\n\n &.disabled {\n cursor: not-allowed;\n\n &.readonly {\n opacity: 1;\n cursor: default;\n }\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n box-shadow: var(--shadow-depth-8-focused);\n }\n\n .flow-item:not(.off-progress-item, .first) & {\n padding-left: calc(var(--step-height) / 2);\n }\n\n .flow-item:not(.selected) & {\n &:not(.disabled) {\n cursor: pointer;\n &:hover {\n box-shadow: var(--button-shadow-normal);\n }\n &:active {\n box-shadow: var(--button-shadow-pressed);\n }\n }\n }\n\n .off-progress-item & {\n border-radius: functions.pxToRem(4);\n padding: 0 functions.pxToRem(12);\n\n .icon {\n margin-left: 0;\n }\n }\n .flow-item.first & {\n border-top-left-radius: var(--step-height);\n border-bottom-left-radius: var(--step-height);\n padding-left: functions.pxToRem(20);\n }\n .flow-item.last & {\n border-top-right-radius: var(--step-height);\n border-bottom-right-radius: var(--step-height);\n padding-right: functions.pxToRem(20);\n }\n}\n\n.divider {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--step-height);\n height: var(--step-height);\n\n position: absolute;\n z-index: $limel-progress-flow-divider;\n right: calc(var(--step-height) / 2 * -1);\n overflow: hidden;\n\n &:after {\n position: absolute;\n display: block;\n\n box-sizing: border-box;\n transition: background-color 0.2s ease;\n\n width: 100%;\n height: 100%;\n right: calc(var(--step-height) / 5);\n transform: rotate(45deg);\n border: {\n style: solid;\n width: functions.pxToRem(2) functions.pxToRem(2) 0 0;\n radius: 0 functions.pxToRem(8) 0 0;\n color: var(--step-divider-color);\n }\n }\n .flow-item.last & {\n width: 0;\n }\n}\n\n.text,\n.secondary-text {\n @include mixins.truncate-text();\n max-width: var(--max-text-width);\n z-index: $limel-progress-flow-step-content;\n}\n\n.secondary-text {\n font-size: functions.pxToRem(12);\n margin: auto;\n padding-left: calc(var(--step-height) / 2);\n}\n\n.icon {\n margin: 0 functions.pxToRem(8) 0 functions.pxToRem(4);\n z-index: $limel-progress-flow-step-content;\n}\n\n@import './partial-styles/_selected-indicator';\n@import './partial-styles/_colors';\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { FlowItem } from '../progress-flow.types';\nimport { getIconName } from '../../icon/get-icon-props';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-progress-flow-item',\n shadow: false,\n styleUrl: 'progress-flow-item.scss',\n})\nexport class ProgressFlowItem {\n @Element()\n public element: HTMLLimelProgressFlowItemElement;\n\n /\n The flow item that should be rendered\n /\n @Prop()\n public item: FlowItem = null;\n\n /\n True if the flow item should be disabled\n /\n @Prop()\n public disabled = false;\n\n /\n True if the flow item should be readonly\n /\n @Prop()\n public readonly = false;\n\n /\n True for current step\n /\n @Prop()\n public currentStep: boolean = false;\n\n /\n Fired when clicking on the flow item\n */\n @Event()\n public interact: EventEmitter<void>;\n\n public render() {\n if (!this.item) {\n return;\n }\n\n return [\n <button\n tabindex=\"0\"\n title={this.getToolTipText()}\n type=\"button\"\n class={{\n step: true,\n selected: this.item?.selected,\n disabled: this.isDisabled(),\n readonly: this.readonly,\n }}\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n aria-current={this.currentStep ? 'step' : null}\n >\n {this.renderIcon()}\n <span class=\"text\">{this.item.text}</span>\n {this.renderDivider()}\n {this.renderLockIcon()}\n </button>,\n this.renderSecondaryText(),\n ];\n }\n\n private isDisabled() {\n return this.item?.disabled \|\| this.readonly \|\| this.disabled;\n }\n\n private getToolTipText() {\n if (!this.item.secondaryText) {\n return this.item.text;\n }\n\n return [this.item.text, this.item.secondaryText].join(' · ');\n }\n\n private handleClick = () => {\n this.interact.emit();\n };\n\n private renderSecondaryText() {\n if (!this.item?.secondaryText) {\n return;\n }\n\n return <div class=\"secondary-text\">{this.item.secondaryText}</div>;\n }\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n const name = getIconName(this.item.icon);\n\n return <limel-icon name={name} size=\"small\" class=\"icon\" />;\n }\n\n private renderDivider() {\n if (this.item.isOffProgress) {\n return;\n }\n\n return <div class=\"divider\" />;\n }\n\n private renderLockIcon() {\n if (!this.isDisabled()) {\n return;\n }\n\n return <limel-icon name=\"lock\" class=\"lock-icon\" />;\n }\n}\n"],"version":3}

package/dist/lime-elements/lime-elements.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-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-bc63c12e",[[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)));
+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)));
 //# sourceMappingURL=lime-elements.esm.js.map

package/dist/lime-elements/p-97571329.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as t,h as r,g as s}from"./p-443111b3.js";import{g as o}from"./p-2f777fdb.js";const i='@charset "UTF-8";.flow-item{--step-background:var(\n --progress-flow-step-background-color,\n rgb(var(--contrast-600))\n );--step-background--selected:var(\n --progress-flow-step-background-color--selected,\n var(--mdc-theme-primary)\n );--step-background--passed:var(\n --progress-flow-step-background-color--passed,\n var(--step-background--selected)\n );--step-text:var(\n --progress-flow-step-text-color,\n rgb(var(--contrast-1200))\n );--step-text--selected:var(\n --progress-flow-step-text-color--selected,\n var(--mdc-theme-on-primary)\n );--step-text--passed:var(\n --progress-flow-step-text-color--passed,\n var(--step-text--selected)\n );--step-divider-color:var(\n --progress-flow-step-divider-color,\n rgb(var(--contrast-100))\n );position:relative;width:100%;display:flex;flex-direction:column;align-items:stretch}.flow-item:not(.off-progress-item,.last) .divider:after{content:""}.flow-item.off-progress-item{padding-left:0.5rem}.flow-item.first-off-progress-item{padding-left:1rem}.step{transition:background-color 0.2s ease, box-shadow 0.2s ease;display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:var(--step-height);border:none;font-size:0.875rem}.step.disabled{cursor:not-allowed}.step.disabled.readonly{opacity:1;cursor:default}.step:focus{outline:none}.step:focus-visible{box-shadow:var(--shadow-depth-8-focused)}.flow-item:not(.off-progress-item,.first) .step{padding-left:calc(var(--step-height) / 2)}.flow-item:not(.selected) .step:not(.disabled){cursor:pointer}.flow-item:not(.selected) .step:not(.disabled):hover{box-shadow:var(--button-shadow-normal)}.flow-item:not(.selected) .step:not(.disabled):active{box-shadow:var(--button-shadow-pressed)}.off-progress-item .step{border-radius:0.25rem;padding:0 0.75rem}.off-progress-item .step .icon{margin-left:0}.flow-item.first .step{border-top-left-radius:var(--step-height);border-bottom-left-radius:var(--step-height);padding-left:1.25rem}.flow-item.last .step{border-top-right-radius:var(--step-height);border-bottom-right-radius:var(--step-height);padding-right:1.25rem}.divider{display:flex;align-items:center;justify-content:center;width:var(--step-height);height:var(--step-height);position:absolute;z-index:1;right:calc(var(--step-height) / 2 * -1);overflow:hidden}.divider:after{position:absolute;display:block;box-sizing:border-box;transition:background-color 0.2s ease;width:100%;height:100%;right:calc(var(--step-height) / 5);transform:rotate(45deg);border-style:solid;border-width:0.125rem 0.125rem 0 0;border-radius:0 0.5rem 0 0;border-color:var(--step-divider-color)}.flow-item.last .divider{width:0}.text,.secondary-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:var(--max-text-width);z-index:2}.secondary-text{font-size:0.75rem;margin:auto;padding-left:calc(var(--step-height) / 2)}.icon{margin:0 0.5rem 0 0.25rem;z-index:2}.step:before,.step .lock-icon{pointer-events:none;box-sizing:border-box;z-index:2}.step::before{position:absolute;right:var(--selected-indicator-right);border-radius:50%}.last .step:before,.last .step .lock-icon{right:0.5rem}.flow-item:not(.off-progress-item) .step.selected:before{content:"";width:0.375rem;height:0.375rem;background-color:rgb(var(--contrast-700));opacity:0.7}.lock-icon{margin-left:0.25rem;margin-right:-0.5rem;width:0.75rem;color:currentColor;scale:0.8}.step{color:var(--step-text);background-color:var(--step-background)}.step .icon{color:var(--progress-flow-icon-color--inactive, var(--step-text))}.flow-item.selected .step{color:var(--step-text--selected);background-color:var(--step-background--selected)}.flow-item.selected .step .divider:after{background-color:var(--step-background--selected)}.flow-item.selected .step .icon{color:var(--step-text--selected)}.flow-item.passed .step{color:var(--step-text--passed);background-color:var(--step-background--passed)}.flow-item.passed .step .divider:after{background-color:var(--step-background--passed)}.flow-item.passed .step .icon{color:var(--step-text--passed)}.divider:after{border-color:var(--step-divider-color);background-color:var(--step-background)}';const a=class{constructor(r){e(this,r);this.interact=t(this,"interact",7);this.handleClick=()=>{this.interact.emit()};this.item=null;this.disabled=false;this.readonly=false;this.currentStep=false}render(){var e;if(!this.item){return}return[r("button",{tabindex:"0",title:this.getToolTipText(),type:"button",class:{step:true,selected:(e=this.item)===null\|\|e===void 0?void 0:e.selected,disabled:this.isDisabled(),readonly:this.readonly},onClick:this.handleClick,disabled:this.isDisabled(),"aria-current":this.currentStep?"step":null},this.renderIcon(),r("span",{class:"text"},this.item.text),this.renderDivider(),this.renderLockIcon()),this.renderSecondaryText()]}isDisabled(){var e;return((e=this.item)===null\|\|e===void 0?void 0:e.disabled)\|\|this.readonly\|\|this.disabled}getToolTipText(){if(!this.item.secondaryText){return this.item.text}return[this.item.text,this.item.secondaryText].join(" · ")}renderSecondaryText(){var e;if(!((e=this.item)===null\|\|e===void 0?void 0:e.secondaryText)){return}return r("div",{class:"secondary-text"},this.item.secondaryText)}renderIcon(){if(!this.item.icon){return}const e=o(this.item.icon);return r("limel-icon",{name:e,size:"small",class:"icon"})}renderDivider(){if(this.item.isOffProgress){return}return r("div",{class:"divider"})}renderLockIcon(){if(!this.isDisabled()){return}return r("limel-icon",{name:"lock",class:"lock-icon"})}get element(){return s(this)}};a.style=i;export{a as limel_progress_flow_item};
2	+ //# sourceMappingURL=p-97571329.entry.js.map

package/dist/lime-elements/p-97571329.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["progressFlowItemCss","ProgressFlowItem","this","handleClick","interact","emit","render","item","h","tabindex","title","getToolTipText","type","class","step","selected","_a","disabled","isDisabled","readonly","onClick","currentStep","renderIcon","text","renderDivider","renderLockIcon","renderSecondaryText","secondaryText","join","icon","name","getIconName","size","isOffProgress"],"sources":["./src/components/progress-flow/progress-flow-item/progress-flow-item.scss?tag=limel-progress-flow-item","./src/components/progress-flow/progress-flow-item/progress-flow-item.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n$limel-progress-flow-step-content: 2;\n$limel-progress-flow-divider: 1;\n\n.flow-item {\n --step-background: var(\n --progress-flow-step-background-color,\n rgb(var(--contrast-600))\n );\n --step-background--selected: var(\n --progress-flow-step-background-color--selected,\n var(--mdc-theme-primary)\n );\n --step-background--passed: var(\n --progress-flow-step-background-color--passed,\n var(--step-background--selected)\n );\n\n --step-text: var(\n --progress-flow-step-text-color,\n rgb(var(--contrast-1200))\n );\n --step-text--selected: var(\n --progress-flow-step-text-color--selected,\n var(--mdc-theme-on-primary)\n );\n --step-text--passed: var(\n --progress-flow-step-text-color--passed,\n var(--step-text--selected)\n );\n\n --step-divider-color: var(\n --progress-flow-step-divider-color,\n rgb(var(--contrast-100))\n );\n\n position: relative;\n width: 100%;\n\n display: flex;\n flex-direction: column;\n align-items: stretch;\n\n &:not(.off-progress-item, .last) {\n .divider {\n &:after {\n content: '';\n }\n }\n }\n\n &.off-progress-item {\n padding-left: functions.pxToRem(8);\n }\n\n &.first-off-progress-item {\n padding-left: functions.pxToRem(16);\n }\n}\n\n.step {\n transition:\n background-color 0.2s ease,\n box-shadow 0.2s ease;\n\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 100%;\n height: var(--step-height);\n border: none;\n font-size: functions.pxToRem(14);\n\n &.disabled {\n cursor: not-allowed;\n\n &.readonly {\n opacity: 1;\n cursor: default;\n }\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n box-shadow: var(--shadow-depth-8-focused);\n }\n\n .flow-item:not(.off-progress-item, .first) & {\n padding-left: calc(var(--step-height) / 2);\n }\n\n .flow-item:not(.selected) & {\n &:not(.disabled) {\n cursor: pointer;\n &:hover {\n box-shadow: var(--button-shadow-normal);\n }\n &:active {\n box-shadow: var(--button-shadow-pressed);\n }\n }\n }\n\n .off-progress-item & {\n border-radius: functions.pxToRem(4);\n padding: 0 functions.pxToRem(12);\n\n .icon {\n margin-left: 0;\n }\n }\n .flow-item.first & {\n border-top-left-radius: var(--step-height);\n border-bottom-left-radius: var(--step-height);\n padding-left: functions.pxToRem(20);\n }\n .flow-item.last & {\n border-top-right-radius: var(--step-height);\n border-bottom-right-radius: var(--step-height);\n padding-right: functions.pxToRem(20);\n }\n}\n\n.divider {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--step-height);\n height: var(--step-height);\n\n position: absolute;\n z-index: $limel-progress-flow-divider;\n right: calc(var(--step-height) / 2 * -1);\n overflow: hidden;\n\n &:after {\n position: absolute;\n display: block;\n\n box-sizing: border-box;\n transition: background-color 0.2s ease;\n\n width: 100%;\n height: 100%;\n right: calc(var(--step-height) / 5);\n transform: rotate(45deg);\n border: {\n style: solid;\n width: functions.pxToRem(2) functions.pxToRem(2) 0 0;\n radius: 0 functions.pxToRem(8) 0 0;\n color: var(--step-divider-color);\n }\n }\n .flow-item.last & {\n width: 0;\n }\n}\n\n.text,\n.secondary-text {\n @include mixins.truncate-text();\n max-width: var(--max-text-width);\n z-index: $limel-progress-flow-step-content;\n}\n\n.secondary-text {\n font-size: functions.pxToRem(12);\n margin: auto;\n padding-left: calc(var(--step-height) / 2);\n}\n\n.icon {\n margin: 0 functions.pxToRem(8) 0 functions.pxToRem(4);\n z-index: $limel-progress-flow-step-content;\n}\n\n@import './partial-styles/_selected-indicator';\n@import './partial-styles/_colors';\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { FlowItem } from '../progress-flow.types';\nimport { getIconName } from '../../icon/get-icon-props';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-progress-flow-item',\n shadow: false,\n styleUrl: 'progress-flow-item.scss',\n})\nexport class ProgressFlowItem {\n @Element()\n public element: HTMLLimelProgressFlowItemElement;\n\n /**\n * The flow item that should be rendered\n */\n @Prop()\n public item: FlowItem = null;\n\n /**\n * True if the flow item should be disabled\n */\n @Prop()\n public disabled = false;\n\n /**\n * True if the flow item should be readonly\n */\n @Prop()\n public readonly = false;\n\n /**\n * True for current step\n */\n @Prop()\n public currentStep: boolean = false;\n\n /**\n * Fired when clicking on the flow item\n */\n @Event()\n public interact: EventEmitter<void>;\n\n public render() {\n if (!this.item) {\n return;\n }\n\n return [\n <button\n tabindex=\"0\"\n title={this.getToolTipText()}\n type=\"button\"\n class={{\n step: true,\n selected: this.item?.selected,\n disabled: this.isDisabled(),\n readonly: this.readonly,\n }}\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n aria-current={this.currentStep ? 'step' : null}\n >\n {this.renderIcon()}\n <span class=\"text\">{this.item.text}</span>\n {this.renderDivider()}\n {this.renderLockIcon()}\n </button>,\n this.renderSecondaryText(),\n ];\n }\n\n private isDisabled() {\n return this.item?.disabled || this.readonly || this.disabled;\n }\n\n private getToolTipText() {\n if (!this.item.secondaryText) {\n return this.item.text;\n }\n\n return [this.item.text, this.item.secondaryText].join(' · ');\n }\n\n private handleClick = () => {\n this.interact.emit();\n };\n\n private renderSecondaryText() {\n if (!this.item?.secondaryText) {\n return;\n }\n\n return <div class=\"secondary-text\">{this.item.secondaryText}</div>;\n }\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n const name = getIconName(this.item.icon);\n\n return <limel-icon name={name} size=\"small\" class=\"icon\" />;\n }\n\n private renderDivider() {\n if (this.item.isOffProgress) {\n return;\n }\n\n return <div class=\"divider\" />;\n }\n\n private renderLockIcon() {\n if (!this.isDisabled()) {\n return;\n }\n\n return <limel-icon name=\"lock\" class=\"lock-icon\" />;\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAsB,2lI,MCmBfC,EAAgB,M,4DA2EjBC,KAAAC,YAAc,KAClBD,KAAKE,SAASC,MAAM,E,UApEA,K,cAMN,M,cAMA,M,iBAMY,K,CAQvBC,S,MACH,IAAKJ,KAAKK,KAAM,CACZ,M,CAGJ,MAAO,CACHC,EAAA,UACIC,SAAS,IACTC,MAAOR,KAAKS,iBACZC,KAAK,SACLC,MAAO,CACHC,KAAM,KACNC,UAAUC,EAAAd,KAAKK,QAAI,MAAAS,SAAA,SAAAA,EAAED,SACrBE,SAAUf,KAAKgB,aACfC,SAAUjB,KAAKiB,UAEnBC,QAASlB,KAAKC,YACdc,SAAUf,KAAKgB,aAAY,eACbhB,KAAKmB,YAAc,OAAS,MAEzCnB,KAAKoB,aACNd,EAAA,QAAMK,MAAM,QAAQX,KAAKK,KAAKgB,MAC7BrB,KAAKsB,gBACLtB,KAAKuB,kBAEVvB,KAAKwB,sB,CAILR,a,MACJ,QAAOF,EAAAd,KAAKK,QAAI,MAAAS,SAAA,SAAAA,EAAEC,WAAYf,KAAKiB,UAAYjB,KAAKe,Q,CAGhDN,iBACJ,IAAKT,KAAKK,KAAKoB,cAAe,CAC1B,OAAOzB,KAAKK,KAAKgB,I,CAGrB,MAAO,CAACrB,KAAKK,KAAKgB,KAAMrB,KAAKK,KAAKoB,eAAeC,KAAK,M,CAOlDF,sB,MACJ,MAAKV,EAAAd,KAAKK,QAAI,MAAAS,SAAA,SAAAA,EAAEW,eAAe,CAC3B,M,CAGJ,OAAOnB,EAAA,OAAKK,MAAM,kBAAkBX,KAAKK,KAAKoB,c,CAG1CL,aACJ,IAAKpB,KAAKK,KAAKsB,KAAM,CACjB,M,CAGJ,MAAMC,EAAOC,EAAY7B,KAAKK,KAAKsB,MAEnC,OAAOrB,EAAA,cAAYsB,KAAMA,EAAME,KAAK,QAAQnB,MAAM,Q,CAG9CW,gBACJ,GAAItB,KAAKK,KAAK0B,cAAe,CACzB,M,CAGJ,OAAOzB,EAAA,OAAKK,MAAM,W,CAGdY,iBACJ,IAAKvB,KAAKgB,aAAc,CACpB,M,CAGJ,OAAOV,EAAA,cAAYsB,KAAK,OAAOjB,MAAM,a"}

package/dist/lime-elements/{p-89764bae.entry.js → p-c1cbba2c.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-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};
-//# sourceMappingURL=p-89764bae.entry.js.map
+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};
+//# sourceMappingURL=p-c1cbba2c.entry.js.map

package/dist/lime-elements/{p-89764bae.entry.js.map → p-c1cbba2c.entry.js.map} RENAMED Viewed

	@@ -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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.61.5",
+  "version": "37.61.7",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@commitlint/config-conventional": "^19.5.0",
     "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.10.0",
+    "@eslint/js": "^9.11.0",
     "@microsoft/api-extractor": "^7.47.9",
     "@popperjs/core": "^2.11.8",
     "@rjsf/core": "^2.4.2",

package/dist/lime-elements/p-bc63c12e.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as t,h as r,g as s}from"./p-443111b3.js";import{g as o}from"./p-2f777fdb.js";const i="@charset \"UTF-8\";.flow-item{--step-background:var(\n --progress-flow-step-background-color,\n rgb(var(--contrast-600))\n );--step-background--selected:var(\n --progress-flow-step-background-color--selected,\n var(--mdc-theme-primary)\n );--step-background--passed:var(\n --progress-flow-step-background-color--passed,\n var(--step-background--selected)\n );--step-text:var(\n --progress-flow-step-text-color,\n rgb(var(--contrast-1200))\n );--step-text--selected:var(\n --progress-flow-step-text-color--selected,\n var(--mdc-theme-on-primary)\n );--step-text--passed:var(\n --progress-flow-step-text-color--passed,\n var(--step-text--selected)\n );--step-divider-color:var(\n --progress-flow-step-divider-color,\n rgb(var(--contrast-100))\n );position:relative;width:100%;display:flex;flex-direction:column;align-items:stretch}.flow-item:not(.off-progress-item,.last) .divider:after{content:\"\"}.flow-item.off-progress-item{padding-left:0.5rem}.flow-item.first-off-progress-item{padding-left:1rem}.step{transition:background-color 0.2s ease, box-shadow 0.2s ease;display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:var(--step-height);border:none;font-size:0.875rem}.step.disabled{cursor:not-allowed}.step.disabled.readonly{opacity:1;cursor:default}.step:focus{outline:none}.step:focus-visible{box-shadow:var(--shadow-depth-8-focused)}.flow-item:not(.off-progress-item,.first) .step{padding-left:calc(var(--step-height) / 2)}.flow-item:not(.selected) .step:not(.disabled){cursor:pointer}.flow-item:not(.selected) .step:not(.disabled):hover{box-shadow:var(--button-shadow-normal)}.flow-item:not(.selected) .step:not(.disabled):active{box-shadow:var(--button-shadow-pressed)}.off-progress-item .step{border-radius:0.25rem;padding:0 0.75rem}.off-progress-item .step .icon{margin-left:0}.flow-item.first .step{border-top-left-radius:var(--step-height);border-bottom-left-radius:var(--step-height);padding-left:1.25rem}.flow-item.last .step{border-top-right-radius:var(--step-height);border-bottom-right-radius:var(--step-height);padding-right:1.25rem}.divider{display:flex;align-items:center;justify-content:center;width:var(--step-height);height:var(--step-height);position:absolute;z-index:1;right:calc(var(--step-height) / 2 * -1);overflow:hidden}.divider:after{position:absolute;display:block;box-sizing:border-box;transition:background-color 0.2s ease;width:100%;height:100%;right:calc(var(--step-height) / 5);transform:rotate(45deg);border-style:solid;border-width:0.125rem 0.125rem 0 0;border-radius:0 0.5rem 0 0;border-color:var(--step-divider-color)}.flow-item.last .divider{width:0}.text,.secondary-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:var(--max-text-width);z-index:2}.secondary-text{font-size:0.75rem;margin:auto;padding-left:calc(var(--step-height) / 2)}.icon{margin:0 0.5rem 0 0.25rem;z-index:2}.step:before,.step:after{pointer-events:none;box-sizing:border-box;z-index:2;position:absolute;right:var(--selected-indicator-right);border-radius:50%}.last .step:before,.last .step:after{right:0.5rem}.flow-item:not(.off-progress-item) .step.selected:before,.flow-item:not(.off-progress-item) .step.selected:after{content:\"\";width:0.375rem;height:0.375rem}.flow-item:not(.off-progress-item) .step.selected:before{background-color:var(--step-divider-color);opacity:0.7}.flow-item:not(.off-progress-item) .step.disabled:before,.flow-item:not(.off-progress-item) .step.disabled:after{width:0.75rem;height:0.75rem}.flow-item:not(.off-progress-item) .step.disabled:after{content:\"\";background-image:url(\"data:image/svg+xml;charset=utf-8, <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'><path fill='rgb(127,127,127)' d='M32.18 13.711c0-2.207-1.793-4-4.002-4H11.821c-2.208 0-4 1.793-4 4V28.29a4 4 0 0 0 4 4h16.357a4.002 4.002 0 0 0 4.001-4V13.711Z'/><path fill='rgb(127,127,127)' d='M11.211 9.758V7.673A7.489 7.489 0 0 1 18.696.188h2.608a7.489 7.489 0 0 1 7.485 7.485v2.085h-3V7.673a4.488 4.488 0 0 0-4.485-4.485h-2.608a4.488 4.488 0 0 0-4.485 4.485v2.085h-3Z'/></svg>\");background-size:90%;background-repeat:no-repeat;background-position:center;mix-blend-mode:multiply}.step{color:var(--step-text);background-color:var(--step-background)}.step .icon{color:var(--progress-flow-icon-color--inactive, var(--step-text))}.flow-item.selected .step{color:var(--step-text--selected);background-color:var(--step-background--selected)}.flow-item.selected .step .divider:after{background-color:var(--step-background--selected)}.flow-item.selected .step .icon{color:var(--step-text--selected)}.flow-item.passed .step{color:var(--step-text--passed);background-color:var(--step-background--passed)}.flow-item.passed .step .divider:after{background-color:var(--step-background--passed)}.flow-item.passed .step .icon{color:var(--step-text--passed)}.divider:after{border-color:var(--step-divider-color);background-color:var(--step-background)}";const a=class{constructor(r){e(this,r);this.interact=t(this,"interact",7);this.handleClick=()=>{this.interact.emit()};this.item=null;this.disabled=false;this.readonly=false;this.currentStep=false}render(){var e;if(!this.item){return}return[r("button",{tabindex:"0",title:this.getToolTipText(),type:"button",class:{step:true,selected:(e=this.item)===null\|\|e===void 0?void 0:e.selected,disabled:this.isDisabled(),readonly:this.readonly},onClick:this.handleClick,disabled:this.isDisabled(),"aria-current":this.currentStep?"step":null},this.renderIcon(),r("span",{class:"text"},this.item.text),this.renderDivider()),this.renderSecondaryText()]}isDisabled(){var e;return((e=this.item)===null\|\|e===void 0?void 0:e.disabled)\|\|this.readonly\|\|this.disabled}getToolTipText(){if(!this.item.secondaryText){return this.item.text}return[this.item.text,this.item.secondaryText].join(" · ")}renderSecondaryText(){var e;if(!((e=this.item)===null\|\|e===void 0?void 0:e.secondaryText)){return}return r("div",{class:"secondary-text"},this.item.secondaryText)}renderIcon(){if(!this.item.icon){return}const e=o(this.item.icon);return r("limel-icon",{name:e,size:"small",class:"icon"})}renderDivider(){if(this.item.isOffProgress){return}return r("div",{class:"divider"})}get element(){return s(this)}};a.style=i;export{a as limel_progress_flow_item};
2	- //# sourceMappingURL=p-bc63c12e.entry.js.map

package/dist/lime-elements/p-bc63c12e.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["progressFlowItemCss","ProgressFlowItem","this","handleClick","interact","emit","render","item","h","tabindex","title","getToolTipText","type","class","step","selected","_a","disabled","isDisabled","readonly","onClick","currentStep","renderIcon","text","renderDivider","renderSecondaryText","secondaryText","join","icon","name","getIconName","size","isOffProgress"],"sources":["./src/components/progress-flow/progress-flow-item/progress-flow-item.scss?tag=limel-progress-flow-item","./src/components/progress-flow/progress-flow-item/progress-flow-item.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n$limel-progress-flow-step-content: 2;\n$limel-progress-flow-divider: 1;\n\n.flow-item {\n --step-background: var(\n --progress-flow-step-background-color,\n rgb(var(--contrast-600))\n );\n --step-background--selected: var(\n --progress-flow-step-background-color--selected,\n var(--mdc-theme-primary)\n );\n --step-background--passed: var(\n --progress-flow-step-background-color--passed,\n var(--step-background--selected)\n );\n\n --step-text: var(\n --progress-flow-step-text-color,\n rgb(var(--contrast-1200))\n );\n --step-text--selected: var(\n --progress-flow-step-text-color--selected,\n var(--mdc-theme-on-primary)\n );\n --step-text--passed: var(\n --progress-flow-step-text-color--passed,\n var(--step-text--selected)\n );\n\n --step-divider-color: var(\n --progress-flow-step-divider-color,\n rgb(var(--contrast-100))\n );\n\n position: relative;\n width: 100%;\n\n display: flex;\n flex-direction: column;\n align-items: stretch;\n\n &:not(.off-progress-item, .last) {\n .divider {\n &:after {\n content: '';\n }\n }\n }\n\n &.off-progress-item {\n padding-left: functions.pxToRem(8);\n }\n\n &.first-off-progress-item {\n padding-left: functions.pxToRem(16);\n }\n}\n\n.step {\n transition:\n background-color 0.2s ease,\n box-shadow 0.2s ease;\n\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 100%;\n height: var(--step-height);\n border: none;\n font-size: functions.pxToRem(14);\n\n &.disabled {\n cursor: not-allowed;\n\n &.readonly {\n opacity: 1;\n cursor: default;\n }\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n box-shadow: var(--shadow-depth-8-focused);\n }\n\n .flow-item:not(.off-progress-item, .first) & {\n padding-left: calc(var(--step-height) / 2);\n }\n\n .flow-item:not(.selected) & {\n &:not(.disabled) {\n cursor: pointer;\n &:hover {\n box-shadow: var(--button-shadow-normal);\n }\n &:active {\n box-shadow: var(--button-shadow-pressed);\n }\n }\n }\n\n .off-progress-item & {\n border-radius: functions.pxToRem(4);\n padding: 0 functions.pxToRem(12);\n\n .icon {\n margin-left: 0;\n }\n }\n .flow-item.first & {\n border-top-left-radius: var(--step-height);\n border-bottom-left-radius: var(--step-height);\n padding-left: functions.pxToRem(20);\n }\n .flow-item.last & {\n border-top-right-radius: var(--step-height);\n border-bottom-right-radius: var(--step-height);\n padding-right: functions.pxToRem(20);\n }\n}\n\n.divider {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--step-height);\n height: var(--step-height);\n\n position: absolute;\n z-index: $limel-progress-flow-divider;\n right: calc(var(--step-height) / 2 * -1);\n overflow: hidden;\n\n &:after {\n position: absolute;\n display: block;\n\n box-sizing: border-box;\n transition: background-color 0.2s ease;\n\n width: 100%;\n height: 100%;\n right: calc(var(--step-height) / 5);\n transform: rotate(45deg);\n border: {\n style: solid;\n width: functions.pxToRem(2) functions.pxToRem(2) 0 0;\n radius: 0 functions.pxToRem(8) 0 0;\n color: var(--step-divider-color);\n }\n }\n .flow-item.last & {\n width: 0;\n }\n}\n\n.text,\n.secondary-text {\n @include mixins.truncate-text();\n max-width: var(--max-text-width);\n z-index: $limel-progress-flow-step-content;\n}\n\n.secondary-text {\n font-size: functions.pxToRem(12);\n margin: auto;\n padding-left: calc(var(--step-height) / 2);\n}\n\n.icon {\n margin: 0 functions.pxToRem(8) 0 functions.pxToRem(4);\n z-index: $limel-progress-flow-step-content;\n}\n\n@import './partial-styles/_selected-indicator';\n@import './partial-styles/_colors';\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { FlowItem } from '../progress-flow.types';\nimport { getIconName } from '../../icon/get-icon-props';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-progress-flow-item',\n shadow: false,\n styleUrl: 'progress-flow-item.scss',\n})\nexport class ProgressFlowItem {\n @Element()\n public element: HTMLLimelProgressFlowItemElement;\n\n /**\n * The flow item that should be rendered\n */\n @Prop()\n public item: FlowItem = null;\n\n /**\n * True if the flow item should be disabled\n */\n @Prop()\n public disabled = false;\n\n /**\n * True if the flow item should be readonly\n */\n @Prop()\n public readonly = false;\n\n /**\n * True for current step\n */\n @Prop()\n public currentStep: boolean = false;\n\n /**\n * Fired when clicking on the flow item\n */\n @Event()\n public interact: EventEmitter<void>;\n\n public render() {\n if (!this.item) {\n return;\n }\n\n return [\n <button\n tabindex=\"0\"\n title={this.getToolTipText()}\n type=\"button\"\n class={{\n step: true,\n selected: this.item?.selected,\n disabled: this.isDisabled(),\n readonly: this.readonly,\n }}\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n aria-current={this.currentStep ? 'step' : null}\n >\n {this.renderIcon()}\n <span class=\"text\">{this.item.text}</span>\n {this.renderDivider()}\n </button>,\n this.renderSecondaryText(),\n ];\n }\n\n private isDisabled() {\n return this.item?.disabled || this.readonly || this.disabled;\n }\n\n private getToolTipText() {\n if (!this.item.secondaryText) {\n return this.item.text;\n }\n\n return [this.item.text, this.item.secondaryText].join(' · ');\n }\n\n private handleClick = () => {\n this.interact.emit();\n };\n\n private renderSecondaryText() {\n if (!this.item?.secondaryText) {\n return;\n }\n\n return <div class=\"secondary-text\">{this.item.secondaryText}</div>;\n }\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n const name = getIconName(this.item.icon);\n\n return <limel-icon name={name} size=\"small\" class=\"icon\" />;\n }\n\n private renderDivider() {\n if (this.item.isOffProgress) {\n return;\n }\n\n return <div class=\"divider\" />;\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAsB,k/J,MCmBfC,EAAgB,M,4DA0EjBC,KAAAC,YAAc,KAClBD,KAAKE,SAASC,MAAM,E,UAnEA,K,cAMN,M,cAMA,M,iBAMY,K,CAQvBC,S,MACH,IAAKJ,KAAKK,KAAM,CACZ,M,CAGJ,MAAO,CACHC,EAAA,UACIC,SAAS,IACTC,MAAOR,KAAKS,iBACZC,KAAK,SACLC,MAAO,CACHC,KAAM,KACNC,UAAUC,EAAAd,KAAKK,QAAI,MAAAS,SAAA,SAAAA,EAAED,SACrBE,SAAUf,KAAKgB,aACfC,SAAUjB,KAAKiB,UAEnBC,QAASlB,KAAKC,YACdc,SAAUf,KAAKgB,aAAY,eACbhB,KAAKmB,YAAc,OAAS,MAEzCnB,KAAKoB,aACNd,EAAA,QAAMK,MAAM,QAAQX,KAAKK,KAAKgB,MAC7BrB,KAAKsB,iBAEVtB,KAAKuB,sB,CAILP,a,MACJ,QAAOF,EAAAd,KAAKK,QAAI,MAAAS,SAAA,SAAAA,EAAEC,WAAYf,KAAKiB,UAAYjB,KAAKe,Q,CAGhDN,iBACJ,IAAKT,KAAKK,KAAKmB,cAAe,CAC1B,OAAOxB,KAAKK,KAAKgB,I,CAGrB,MAAO,CAACrB,KAAKK,KAAKgB,KAAMrB,KAAKK,KAAKmB,eAAeC,KAAK,M,CAOlDF,sB,MACJ,MAAKT,EAAAd,KAAKK,QAAI,MAAAS,SAAA,SAAAA,EAAEU,eAAe,CAC3B,M,CAGJ,OAAOlB,EAAA,OAAKK,MAAM,kBAAkBX,KAAKK,KAAKmB,c,CAG1CJ,aACJ,IAAKpB,KAAKK,KAAKqB,KAAM,CACjB,M,CAGJ,MAAMC,EAAOC,EAAY5B,KAAKK,KAAKqB,MAEnC,OAAOpB,EAAA,cAAYqB,KAAMA,EAAME,KAAK,QAAQlB,MAAM,Q,CAG9CW,gBACJ,GAAItB,KAAKK,KAAKyB,cAAe,CACzB,M,CAGJ,OAAOxB,EAAA,OAAKK,MAAM,W"}