@limetech/lime-elements 37.55.1 → 37.55.3

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [37.55.3](https://github.com/Lundalogik/lime-elements/compare/v37.55.2...v37.55.3) (2024-07-30)
+
+
+### Bug Fixes
+
+
+* **button:**  make loading feedback visible ([952d1c7](https://github.com/Lundalogik/lime-elements/commit/952d1c7c93e7f63c9eb256b22494b0cf93fc0982))
+
+## [37.55.2](https://github.com/Lundalogik/lime-elements/compare/v37.55.1...v37.55.2) (2024-07-29)
+
+
+### Bug Fixes
+
+
+* **table:** make sorting work again ([2834ccd](https://github.com/Lundalogik/lime-elements/commit/2834ccd04df027cb440f2bb5f60df8dd535013fe))
+
 ## [37.55.1](https://github.com/Lundalogik/lime-elements/compare/v37.55.0...v37.55.1) (2024-07-29)
 
 

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d1052409.js');
 const makeEnterClickable = require('./make-enter-clickable-c116ac4f.js');
 
-const buttonCss = "@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(--color-white));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 buttonCss = "@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 Button = class {
   constructor(hostRef) {

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

@@ -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(--color-white));\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}
+{"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}

package/dist/cjs/limel-table.cjs.entry.js

@@ -24260,18 +24260,18 @@ const Table = class {
     this.formatRows();
   }
   updateData(newData = [], oldData = []) {
-    const newIds = new Set(newData.map((item) => { var _a; return (_a = item.id) !== null && _a !== void 0 ? _a : item; }));
-    if (oldData.every((item) => { var _a; return newIds.has((_a = item.id) !== null && _a !== void 0 ? _a : item); })) {
-      this.tabulator.updateOrAddData(newData);
-      return;
-    }
     this.pool.releaseAll();
+    const shouldReplace = this.shouldReplaceData(newData, oldData);
     setTimeout(() => {
       if (!this.tabulator) {
         return;
       }
-      this.tabulator.replaceData(this.data);
-      this.setSelection();
+      if (shouldReplace) {
+        this.tabulator.replaceData(newData);
+        this.setSelection();
+        return;
+      }
+      this.tabulator.updateOrAddData(newData);
     });
   }
   updateColumns(newColumns, oldColumns) {
@@ -24327,6 +24327,21 @@ const Table = class {
     }
     this.tabulator.setSort(newSorting);
   }
+  shouldReplaceData(newData, oldData) {
+    const newIds = newData.map((item) => { var _a; return (_a = item.id) !== null && _a !== void 0 ? _a : item; });
+    const oldIds = oldData.map((item) => { var _a; return (_a = item.id) !== null && _a !== void 0 ? _a : item; });
+    return (!this.areEqualIds(newIds, oldIds) ||
+      !this.isSameOrder(newIds, oldIds));
+  }
+  areEqualIds(newIds, oldIds) {
+    const newIdSet = new Set(newIds);
+    const oldIdSet = new Set(oldIds);
+    return (newIdSet.size === oldIdSet.size &&
+      newIds.every((id) => oldIdSet.has(id)));
+  }
+  isSameOrder(newIds, oldIds) {
+    return newIds.every((id, index) => id === oldIds[index]);
+  }
   areSameColumns(newColumns, oldColumns) {
     return (newColumns.length === oldColumns.length &&
       newColumns.every((column) => oldColumns.includes(column)));