@limetech/lime-elements 37.1.0-next.82 → 37.1.0-next.83
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/limel-split-button.cjs.entry.js +1 -1
- package/dist/cjs/limel-split-button.cjs.entry.js.map +1 -1
- package/dist/collection/components/split-button/split-button.css +2 -2
- package/dist/esm/limel-split-button.entry.js +1 -1
- package/dist/esm/limel-split-button.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-3480e5ff.entry.js +2 -0
- package/dist/lime-elements/p-3480e5ff.entry.js.map +1 -0
- package/package.json +2 -2
- package/dist/lime-elements/p-b2057def.entry.js +0 -2
- package/dist/lime-elements/p-b2057def.entry.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
## [37.1.0-next.83](https://github.com/Lundalogik/lime-elements/compare/v37.1.0-next.82...v37.1.0-next.83) (2024-01-05)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
* **split-button:** use the same color for the menu trigger ([05e4ee6](https://github.com/Lundalogik/lime-elements/commit/05e4ee6f332eaf85f2101b9a827e7307742afeee))
|
|
8
|
+
|
|
1
9
|
## [37.1.0-next.82](https://github.com/Lundalogik/lime-elements/compare/v37.1.0-next.81...v37.1.0-next.82) (2024-01-04)
|
|
2
10
|
|
|
3
11
|
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-38eb64b5.js');
|
|
6
6
|
|
|
7
|
-
const splitButtonCss = "@charset \"UTF-8\";:host(limel-split-button.has-menu){--button-padding-right:2rem}:host(limel-split-button){display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}:host([disabled]){pointer-events:none}limel-button{width:100%}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:\"\";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}limel-menu:not([disabled]).primary{color:var(--mdc-theme-on-primary, rgb(var(--color-white)))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}.menu-trigger{all:unset;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}.menu-trigger: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
|
|
7
|
+
const splitButtonCss = "@charset \"UTF-8\";:host(limel-split-button.has-menu){--button-padding-right:2rem}:host(limel-split-button){display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}:host([disabled]){pointer-events:none}limel-button{width:100%}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:\"\";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}limel-menu:not([disabled]).primary{color:var(--mdc-theme-on-primary, rgb(var(--color-white)))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}.menu-trigger{all:unset;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}.menu-trigger: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:\"inherit\";background-color:transparent;cursor:pointer}.menu-trigger:not(:disabled):hover{color:\"inherit\";background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.menu-trigger:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.menu-trigger:not(:disabled):focus{outline:none}.menu-trigger:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.menu-trigger:not(:disabled):focus-visible,.menu-trigger:not(:disabled):hover{background-color:rgb(var(--color-white), 0.1)}.menu-trigger:before{content:\"\";position:absolute;inset:-0.25rem;z-index:-1}";
|
|
8
8
|
|
|
9
9
|
const SplitButton = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-split-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,
|
|
1
|
+
{"file":"limel-split-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,k1DAAk1D;;MCuB51D,WAAW;;;;IAuDZ,eAAU,GAAG;MACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;QACpB,OAAO;OACV;MAED,QACIA,wBACI,KAAK,EAAE;UACH,OAAO,EAAE,IAAI,CAAC,OAAO;SACxB,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAC,QAAQ,IAEtBA,oBACI,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,aAGlB,CACA,EACf;KACL,CAAC;;mBAnEe,KAAK;;oBAYJ,KAAK;iBAMyB,EAAE;;EAQlD,MAAM;IACF,QACIA,QAACC,UAAI,IACD,KAAK,EAAE;QACH,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;OAClC,IAEDD,0BACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,EACD,IAAI,CAAC,UAAU,EAAE,CACf,EACT;GACL;;;;;;","names":["h","Host"],"sources":["./src/components/split-button/split-button.scss?tag=limel-split-button&encapsulation=shadow","./src/components/split-button/split-button.tsx"],"sourcesContent":["@import '../../style/mixins';\n\n:host(limel-split-button.has-menu) {\n --button-padding-right: 2rem;\n}\n\n:host(limel-split-button) {\n display: inline-flex;\n isolation: isolate;\n\n * {\n box-sizing: border-box;\n }\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n\nlimel-button {\n width: 100%;\n}\n\n$distance-around-trigger: 0.125rem;\n\nlimel-menu {\n display: flex;\n justify-content: flex-end;\n position: relative;\n z-index: 1;\n\n padding: $distance-around-trigger;\n margin-left: calc(var(--button-padding-right) * -1);\n width: var(--button-padding-right);\n\n &:before {\n transition: background-color 0.5s ease;\n content: '';\n position: absolute;\n inset: 0.375rem auto 0.375rem 0.6875rem;\n width: 1px;\n background-color: currentColor;\n\n opacity: 0.2;\n }\n\n &:not([disabled]) {\n color: var(\n --mdc-theme-primary,\n rgb(var(--color-teal-default))\n ); // similar to limel-button text\n\n &.primary {\n color: var(\n --mdc-theme-on-primary,\n rgb(var(--color-white))\n ); // similar to limel-button text\n }\n }\n\n &[disabled] {\n color: rgba(var(--contrast-1600), 0.37); // similar to limel-button text\n }\n\n &:hover,\n &:focus-within {\n &:before {\n background-color: transparent;\n }\n }\n}\n\n.menu-trigger {\n all: unset;\n\n text-align: center;\n font-weight: bold;\n\n border-radius: 0.125rem;\n height: 100%;\n width: 1rem;\n\n &:not(:disabled) {\n @include is-flat-clickable(\n $color: 'inherit',\n $color--hovered: 'inherit'\n );\n @include visualize-keyboard-focus();\n cursor: pointer;\n\n &:focus-visible,\n &:hover {\n background-color: rgb(var(--color-white), 0.1);\n }\n }\n\n &:before {\n // prevents unintentionally activating the default action,\n // by clicking on the edge of menu trigger,\n // which would be activating the default onClick action\n // on `limel-button`.\n content: '';\n position: absolute;\n inset: -$distance-around-trigger * 2;\n z-index: -1;\n }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { ListSeparator, MenuItem } from '../../interface';\n\n/**\n * A split button is a button with two components:\n * a button and a side-menu attached to it.\n *\n * Clicking on the button runs a default action,\n * and clicking on the arrow opens up a list of other possible actions.\n *\n * :::warning\n * - Never use a split button for navigation purposes, such as going to next page.\n * The button should only be used for performing commands!\n * - Never use this component instead of a Select or Menu component!\n * :::\n * @exampleComponent limel-example-split-button-basic\n * @exampleComponent limel-example-split-button-repeat-default-command\n */\n@Component({\n tag: 'limel-split-button',\n styleUrl: 'split-button.scss',\n shadow: true,\n})\nexport class SplitButton {\n /**\n * The text to show on the default action part of 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 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 * A list of items and separators to show in the menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator> = [];\n\n /**\n * Is emitted when a menu item is selected.\n */\n @Event()\n public select: EventEmitter<MenuItem>;\n\n render() {\n return (\n <Host\n class={{\n 'has-menu': !!this.items.length,\n }}\n >\n <limel-button\n label={this.label}\n primary={this.primary}\n icon={this.icon}\n disabled={this.disabled}\n />\n {this.renderMenu()}\n </Host>\n );\n }\n\n private renderMenu = () => {\n if (!this.items.length) {\n return;\n }\n\n return (\n <limel-menu\n class={{\n primary: this.primary,\n }}\n disabled={this.disabled}\n items={this.items}\n openDirection=\"bottom\"\n >\n <button\n class=\"menu-trigger\"\n slot=\"trigger\"\n disabled={this.disabled}\n >\n ⋮\n </button>\n </limel-menu>\n );\n };\n}\n"],"version":3}
|
|
@@ -104,12 +104,12 @@ limel-menu:hover:before, limel-menu:focus-within:before {
|
|
|
104
104
|
.menu-trigger:not(:disabled) {
|
|
105
105
|
transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
|
|
106
106
|
cursor: pointer;
|
|
107
|
-
color:
|
|
107
|
+
color: "inherit";
|
|
108
108
|
background-color: transparent;
|
|
109
109
|
cursor: pointer;
|
|
110
110
|
}
|
|
111
111
|
.menu-trigger:not(:disabled):hover {
|
|
112
|
-
color:
|
|
112
|
+
color: "inherit";
|
|
113
113
|
background-color: var(--lime-elevated-surface-background-color);
|
|
114
114
|
box-shadow: var(--button-shadow-hovered);
|
|
115
115
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host } from './index-232e9616.js';
|
|
2
2
|
|
|
3
|
-
const splitButtonCss = "@charset \"UTF-8\";:host(limel-split-button.has-menu){--button-padding-right:2rem}:host(limel-split-button){display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}:host([disabled]){pointer-events:none}limel-button{width:100%}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:\"\";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}limel-menu:not([disabled]).primary{color:var(--mdc-theme-on-primary, rgb(var(--color-white)))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}.menu-trigger{all:unset;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}.menu-trigger: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
|
|
3
|
+
const splitButtonCss = "@charset \"UTF-8\";:host(limel-split-button.has-menu){--button-padding-right:2rem}:host(limel-split-button){display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}:host([disabled]){pointer-events:none}limel-button{width:100%}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:\"\";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}limel-menu:not([disabled]).primary{color:var(--mdc-theme-on-primary, rgb(var(--color-white)))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}.menu-trigger{all:unset;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}.menu-trigger: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:\"inherit\";background-color:transparent;cursor:pointer}.menu-trigger:not(:disabled):hover{color:\"inherit\";background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.menu-trigger:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.menu-trigger:not(:disabled):focus{outline:none}.menu-trigger:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.menu-trigger:not(:disabled):focus-visible,.menu-trigger:not(:disabled):hover{background-color:rgb(var(--color-white), 0.1)}.menu-trigger:before{content:\"\";position:absolute;inset:-0.25rem;z-index:-1}";
|
|
4
4
|
|
|
5
5
|
const SplitButton = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-split-button.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,
|
|
1
|
+
{"file":"limel-split-button.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,k1DAAk1D;;MCuB51D,WAAW;;;;IAuDZ,eAAU,GAAG;MACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;QACpB,OAAO;OACV;MAED,QACI,kBACI,KAAK,EAAE;UACH,OAAO,EAAE,IAAI,CAAC,OAAO;SACxB,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAC,QAAQ,IAEtB,cACI,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,aAGlB,CACA,EACf;KACL,CAAC;;mBAnEe,KAAK;;oBAYJ,KAAK;iBAMyB,EAAE;;EAQlD,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE;QACH,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;OAClC,IAED,oBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,EACD,IAAI,CAAC,UAAU,EAAE,CACf,EACT;GACL;;;;;;","names":[],"sources":["./src/components/split-button/split-button.scss?tag=limel-split-button&encapsulation=shadow","./src/components/split-button/split-button.tsx"],"sourcesContent":["@import '../../style/mixins';\n\n:host(limel-split-button.has-menu) {\n --button-padding-right: 2rem;\n}\n\n:host(limel-split-button) {\n display: inline-flex;\n isolation: isolate;\n\n * {\n box-sizing: border-box;\n }\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n\nlimel-button {\n width: 100%;\n}\n\n$distance-around-trigger: 0.125rem;\n\nlimel-menu {\n display: flex;\n justify-content: flex-end;\n position: relative;\n z-index: 1;\n\n padding: $distance-around-trigger;\n margin-left: calc(var(--button-padding-right) * -1);\n width: var(--button-padding-right);\n\n &:before {\n transition: background-color 0.5s ease;\n content: '';\n position: absolute;\n inset: 0.375rem auto 0.375rem 0.6875rem;\n width: 1px;\n background-color: currentColor;\n\n opacity: 0.2;\n }\n\n &:not([disabled]) {\n color: var(\n --mdc-theme-primary,\n rgb(var(--color-teal-default))\n ); // similar to limel-button text\n\n &.primary {\n color: var(\n --mdc-theme-on-primary,\n rgb(var(--color-white))\n ); // similar to limel-button text\n }\n }\n\n &[disabled] {\n color: rgba(var(--contrast-1600), 0.37); // similar to limel-button text\n }\n\n &:hover,\n &:focus-within {\n &:before {\n background-color: transparent;\n }\n }\n}\n\n.menu-trigger {\n all: unset;\n\n text-align: center;\n font-weight: bold;\n\n border-radius: 0.125rem;\n height: 100%;\n width: 1rem;\n\n &:not(:disabled) {\n @include is-flat-clickable(\n $color: 'inherit',\n $color--hovered: 'inherit'\n );\n @include visualize-keyboard-focus();\n cursor: pointer;\n\n &:focus-visible,\n &:hover {\n background-color: rgb(var(--color-white), 0.1);\n }\n }\n\n &:before {\n // prevents unintentionally activating the default action,\n // by clicking on the edge of menu trigger,\n // which would be activating the default onClick action\n // on `limel-button`.\n content: '';\n position: absolute;\n inset: -$distance-around-trigger * 2;\n z-index: -1;\n }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { ListSeparator, MenuItem } from '../../interface';\n\n/**\n * A split button is a button with two components:\n * a button and a side-menu attached to it.\n *\n * Clicking on the button runs a default action,\n * and clicking on the arrow opens up a list of other possible actions.\n *\n * :::warning\n * - Never use a split button for navigation purposes, such as going to next page.\n * The button should only be used for performing commands!\n * - Never use this component instead of a Select or Menu component!\n * :::\n * @exampleComponent limel-example-split-button-basic\n * @exampleComponent limel-example-split-button-repeat-default-command\n */\n@Component({\n tag: 'limel-split-button',\n styleUrl: 'split-button.scss',\n shadow: true,\n})\nexport class SplitButton {\n /**\n * The text to show on the default action part of 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 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 * A list of items and separators to show in the menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator> = [];\n\n /**\n * Is emitted when a menu item is selected.\n */\n @Event()\n public select: EventEmitter<MenuItem>;\n\n render() {\n return (\n <Host\n class={{\n 'has-menu': !!this.items.length,\n }}\n >\n <limel-button\n label={this.label}\n primary={this.primary}\n icon={this.icon}\n disabled={this.disabled}\n />\n {this.renderMenu()}\n </Host>\n );\n }\n\n private renderMenu = () => {\n if (!this.items.length) {\n return;\n }\n\n return (\n <limel-menu\n class={{\n primary: this.primary,\n }}\n disabled={this.disabled}\n items={this.items}\n openDirection=\"bottom\"\n >\n <button\n class=\"menu-trigger\"\n slot=\"trigger\"\n disabled={this.disabled}\n >\n ⋮\n </button>\n </limel-menu>\n );\n };\n}\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-3075aa67.js";export{s as setNonce}from"./p-3075aa67.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([["p-b714596f",[[1,"limel-action-bar",{actions:[16],accessibleLabel:[513,"accessible-label"],layout:[513],openDirection:[513,"open-direction"],overflowCutoff:[32]}]]],["p-
|
|
1
|
+
import{p as e,b as l}from"./p-3075aa67.js";export{s as setNonce}from"./p-3075aa67.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([["p-b714596f",[[1,"limel-action-bar",{actions:[16],accessibleLabel:[513,"accessible-label"],layout:[513],openDirection:[513,"open-direction"],overflowCutoff:[32]}]]],["p-3480e5ff",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["p-c0543a74",[[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:[8],officeViewer:[513,"office-viewer"],actions:[16],isFullscreen:[32],fileType:[32],loading:[32],fileUrl:[32]}]]],["p-e0f37631",[[1,"limel-color-picker",{value:[513],label:[513],helperText:[513,"helper-text"],tooltipLabel:[513,"tooltip-label"],required:[516],readonly:[516],isOpen:[32]}]]],["p-5d140ffb",[[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-17a1c6fe",[[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-8b79a71e",[[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],formattedValue:[32],internalFormat:[32],showPortal:[32]}]]],["p-66be5ef9",[[1,"limel-snackbar",{message:[1],timeout:[2],actionText:[1,"action-text"],dismissible:[4],multiline:[4],language:[1],show:[64]}]]],["p-095e03af",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-00b9d5ab",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-5e46f6fb",[[1,"limel-collapsible-section",{isOpen:[1540,"is-open"],header:[513],actions:[16]}]]],["p-1ca94bcf",[[1,"limel-help",{value:[1],trigger:[1],readMoreLink:[16],openDirection:[513,"open-direction"],isOpen:[32]}]]],["p-d6135363",[[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-a61f94d7",[[1,"limel-file",{value:[16],label:[513],required:[516],disabled:[516],readonly:[516],invalid:[516],accept:[513],language:[1],isDraggingOverDropZone:[32]}]]],["p-de0d78b6",[[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-17573ad9",[[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-35c4c9ea",[[1,"limel-dialog",{heading:[1],fullscreen:[516],open:[1540],closingActions:[16]}]]],["p-2024a484",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-dd034867",[[1,"limel-shortcut",{icon:[513],label:[513],disabled:[516],badge:[520],link:[16]}]]],["p-5fb4402e",[[1,"limel-banner",{message:[513],icon:[513],isOpen:[32],open:[64],close:[64]}]]],["p-6fac3a11",[[1,"limel-callout",{heading:[513],icon:[513],type:[513],language:[1]}]]],["p-42649b4a",[[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-abc27b65",[[1,"limel-switch",{label:[513],disabled:[516],readonly:[516],invalid:[516],value:[516],helperText:[513,"helper-text"],fieldId:[32]}]]],["p-e0087b51",[[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-58d7f49a",[[1,"limel-config",{config:[16]}]]],["p-bd62071d",[[1,"limel-flex-container",{direction:[513],justify:[513],align:[513],reverse:[516]}]]],["p-ec0d9552",[[1,"limel-form",{schema:[16],value:[16],disabled:[4],propsFactory:[16],transformErrors:[16],errors:[16]}]]],["p-4a04ede1",[[1,"limel-grid"]]],["p-89a75b1e",[[0,"limel-dock-button",{item:[16],expanded:[516],useMobileLayout:[516,"use-mobile-layout"],isOpen:[32]}]]],["p-554cdf9e",[[1,"limel-color-picker-palette",{value:[513],label:[513],helperText:[513,"helper-text"],required:[516]}]]],["p-ddbb3b4e",[[1,"limel-tab-bar",{tabs:[1040],canScrollLeft:[32],canScrollRight:[32]},[[9,"resize","handleWindowResize"]]]]],["p-c0d699b7",[[1,"limel-checkbox",{disabled:[516],readonly:[516],invalid:[516],label:[513],helperText:[513,"helper-text"],checked:[516],indeterminate:[516],required:[516],modified:[32]}]]],["p-1857080b",[[1,"limel-header",{icon:[1],heading:[1],subheading:[1],supportingText:[1,"supporting-text"]}]]],["p-86550ce4",[[1,"limel-help-content",{value:[1],readMoreLink:[16]}]]],["p-9a45ad26",[[1,"limel-icon",{size:[513],name:[513],badge:[516]}]]],["p-4e15149e",[[0,"limel-progress-flow-item",{item:[16],disabled:[4],readonly:[4],currentStep:[4,"current-step"]}]]],["p-d8f7d851",[[1,"limel-flatpickr-adapter",{value:[16],type:[1],format:[1],isOpen:[4,"is-open"],inputElement:[16],language:[1],formatter:[16]}]]],["p-eacad510",[[1,"limel-helper-line",{helperText:[513,"helper-text"],length:[514],maxLength:[514,"max-length"],invalid:[516],helperTextId:[513,"helper-text-id"]}]]],["p-685438c8",[[0,"limel-action-bar-overflow-menu",{items:[16],openDirection:[513,"open-direction"]}],[0,"limel-action-bar-item",{item:[16],isVisible:[516,"is-visible"]}]]],["p-ca410873",[[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],getEditMode:[64],setFocus:[64],emptyInput:[64]}]]],["p-5c987e04",[[1,"limel-button",{label:[513],primary:[516],outlined:[516],icon:[513],disabled:[516],loading:[516],loadingFailed:[516,"loading-failed"],justLoaded:[32]}]]],["p-59e808c9",[[1,"limel-circular-progress",{value:[2],maxValue:[2,"max-value"],prefix:[513],suffix:[1],displayPercentageColors:[4,"display-percentage-colors"],size:[513]}],[1,"limel-linear-progress",{value:[514],indeterminate:[516]}]]],["p-b7c8aad3",[[1,"limel-markdown",{value:[1]}]]],["p-2322836c",[[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]}],[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]}]]],["p-aa40cef5",[[1,"limel-icon-button",{icon:[513],elevated:[516],label:[513],disabled:[516]}]]],["p-4b51378d",[[1,"limel-popover",{open:[4],openDirection:[513,"open-direction"]}],[1,"limel-popover-surface",{contentCollection:[16]}]]],["p-552fd521",[[1,"limel-spinner",{size:[513],limeBranded:[4,"lime-branded"]}]]],["p-07f7a62e",[[1,"limel-badge",{label:[520]}]]],["p-b592709f",[[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],isModified:[32],showCompletions:[32]}],[1,"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]}]]],["p-ab0587b7",[[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],searcher:[16],emptyResultMessage:[1,"empty-result-message"],loadingSubItems:[32],menuBreadCrumb:[32],searchValue:[32],searchResults:[32]}],[1,"limel-breadcrumbs",{items:[16],divider:[1]}],[1,"limel-menu-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[1],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}]]]],e)));
|
|
2
2
|
//# sourceMappingURL=lime-elements.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as t,h as o,H as r}from"./p-3075aa67.js";const i='@charset "UTF-8";:host(limel-split-button.has-menu){--button-padding-right:2rem}:host(limel-split-button){display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}:host([disabled]){pointer-events:none}limel-button{width:100%}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:"";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}limel-menu:not([disabled]).primary{color:var(--mdc-theme-on-primary, rgb(var(--color-white)))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}.menu-trigger{all:unset;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}.menu-trigger: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:"inherit";background-color:transparent;cursor:pointer}.menu-trigger:not(:disabled):hover{color:"inherit";background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.menu-trigger:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.menu-trigger:not(:disabled):focus{outline:none}.menu-trigger:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.menu-trigger:not(:disabled):focus-visible,.menu-trigger:not(:disabled):hover{background-color:rgb(var(--color-white), 0.1)}.menu-trigger:before{content:"";position:absolute;inset:-0.25rem;z-index:-1}';const n=class{constructor(r){e(this,r);this.select=t(this,"select",7);this.renderMenu=()=>{if(!this.items.length){return}return o("limel-menu",{class:{primary:this.primary},disabled:this.disabled,items:this.items,openDirection:"bottom"},o("button",{class:"menu-trigger",slot:"trigger",disabled:this.disabled},"⋮"))};this.label=undefined;this.primary=false;this.icon=undefined;this.disabled=false;this.items=[]}render(){return o(r,{class:{"has-menu":!!this.items.length}},o("limel-button",{label:this.label,primary:this.primary,icon:this.icon,disabled:this.disabled}),this.renderMenu())}};n.style=i;export{n as limel_split_button};
|
|
2
|
+
//# sourceMappingURL=p-3480e5ff.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["splitButtonCss","SplitButton","this","renderMenu","items","length","h","class","primary","disabled","openDirection","slot","render","Host","label","icon"],"sources":["./src/components/split-button/split-button.scss?tag=limel-split-button&encapsulation=shadow","./src/components/split-button/split-button.tsx"],"sourcesContent":["@import '../../style/mixins';\n\n:host(limel-split-button.has-menu) {\n --button-padding-right: 2rem;\n}\n\n:host(limel-split-button) {\n display: inline-flex;\n isolation: isolate;\n\n * {\n box-sizing: border-box;\n }\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n\nlimel-button {\n width: 100%;\n}\n\n$distance-around-trigger: 0.125rem;\n\nlimel-menu {\n display: flex;\n justify-content: flex-end;\n position: relative;\n z-index: 1;\n\n padding: $distance-around-trigger;\n margin-left: calc(var(--button-padding-right) * -1);\n width: var(--button-padding-right);\n\n &:before {\n transition: background-color 0.5s ease;\n content: '';\n position: absolute;\n inset: 0.375rem auto 0.375rem 0.6875rem;\n width: 1px;\n background-color: currentColor;\n\n opacity: 0.2;\n }\n\n &:not([disabled]) {\n color: var(\n --mdc-theme-primary,\n rgb(var(--color-teal-default))\n ); // similar to limel-button text\n\n &.primary {\n color: var(\n --mdc-theme-on-primary,\n rgb(var(--color-white))\n ); // similar to limel-button text\n }\n }\n\n &[disabled] {\n color: rgba(var(--contrast-1600), 0.37); // similar to limel-button text\n }\n\n &:hover,\n &:focus-within {\n &:before {\n background-color: transparent;\n }\n }\n}\n\n.menu-trigger {\n all: unset;\n\n text-align: center;\n font-weight: bold;\n\n border-radius: 0.125rem;\n height: 100%;\n width: 1rem;\n\n &:not(:disabled) {\n @include is-flat-clickable(\n $color: 'inherit',\n $color--hovered: 'inherit'\n );\n @include visualize-keyboard-focus();\n cursor: pointer;\n\n &:focus-visible,\n &:hover {\n background-color: rgb(var(--color-white), 0.1);\n }\n }\n\n &:before {\n // prevents unintentionally activating the default action,\n // by clicking on the edge of menu trigger,\n // which would be activating the default onClick action\n // on `limel-button`.\n content: '';\n position: absolute;\n inset: -$distance-around-trigger * 2;\n z-index: -1;\n }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { ListSeparator, MenuItem } from '../../interface';\n\n/**\n * A split button is a button with two components:\n * a button and a side-menu attached to it.\n *\n * Clicking on the button runs a default action,\n * and clicking on the arrow opens up a list of other possible actions.\n *\n * :::warning\n * - Never use a split button for navigation purposes, such as going to next page.\n * The button should only be used for performing commands!\n * - Never use this component instead of a Select or Menu component!\n * :::\n * @exampleComponent limel-example-split-button-basic\n * @exampleComponent limel-example-split-button-repeat-default-command\n */\n@Component({\n tag: 'limel-split-button',\n styleUrl: 'split-button.scss',\n shadow: true,\n})\nexport class SplitButton {\n /**\n * The text to show on the default action part of 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 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 * A list of items and separators to show in the menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator> = [];\n\n /**\n * Is emitted when a menu item is selected.\n */\n @Event()\n public select: EventEmitter<MenuItem>;\n\n render() {\n return (\n <Host\n class={{\n 'has-menu': !!this.items.length,\n }}\n >\n <limel-button\n label={this.label}\n primary={this.primary}\n icon={this.icon}\n disabled={this.disabled}\n />\n {this.renderMenu()}\n </Host>\n );\n }\n\n private renderMenu = () => {\n if (!this.items.length) {\n return;\n }\n\n return (\n <limel-menu\n class={{\n primary: this.primary,\n }}\n disabled={this.disabled}\n items={this.items}\n openDirection=\"bottom\"\n >\n <button\n class=\"menu-trigger\"\n slot=\"trigger\"\n disabled={this.disabled}\n >\n ⋮\n </button>\n </limel-menu>\n );\n };\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,y0D,MCuBVC,EAAW,M,wDAuDZC,KAAAC,WAAa,KACjB,IAAKD,KAAKE,MAAMC,OAAQ,CACpB,M,CAGJ,OACIC,EAAA,cACIC,MAAO,CACHC,QAASN,KAAKM,SAElBC,SAAUP,KAAKO,SACfL,MAAOF,KAAKE,MACZM,cAAc,UAEdJ,EAAA,UACIC,MAAM,eACNI,KAAK,UACLF,SAAUP,KAAKO,UAAQ,KAIlB,E,kCAjEJ,M,kCAYC,M,WAM8B,E,CAQhDG,SACI,OACIN,EAACO,EAAI,CACDN,MAAO,CACH,aAAcL,KAAKE,MAAMC,SAG7BC,EAAA,gBACIQ,MAAOZ,KAAKY,MACZN,QAASN,KAAKM,QACdO,KAAMb,KAAKa,KACXN,SAAUP,KAAKO,WAElBP,KAAKC,a"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@limetech/lime-elements",
|
|
3
|
-
"version": "37.1.0-next.
|
|
3
|
+
"version": "37.1.0-next.83",
|
|
4
4
|
"description": "Lime Elements",
|
|
5
5
|
"author": "Lime Technologies",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"generate": "stencil generate"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@commitlint/config-conventional": "^18.4.
|
|
44
|
+
"@commitlint/config-conventional": "^18.4.4",
|
|
45
45
|
"@popperjs/core": "^2.11.8",
|
|
46
46
|
"@rjsf/core": "^2.4.2",
|
|
47
47
|
"@rollup/plugin-node-resolve": "^13.3.0",
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as t,h as o,H as r}from"./p-3075aa67.js";const i='@charset "UTF-8";:host(limel-split-button.has-menu){--button-padding-right:2rem}:host(limel-split-button){display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}:host([disabled]){pointer-events:none}limel-button{width:100%}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:"";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}limel-menu:not([disabled]).primary{color:var(--mdc-theme-on-primary, rgb(var(--color-white)))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}.menu-trigger{all:unset;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}.menu-trigger: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:transparent;cursor:pointer}.menu-trigger:not(:disabled):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.menu-trigger:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.menu-trigger:not(:disabled):focus{outline:none}.menu-trigger:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.menu-trigger:not(:disabled):focus-visible,.menu-trigger:not(:disabled):hover{background-color:rgb(var(--color-white), 0.1)}.menu-trigger:before{content:"";position:absolute;inset:-0.25rem;z-index:-1}';const s=class{constructor(r){e(this,r);this.select=t(this,"select",7);this.renderMenu=()=>{if(!this.items.length){return}return o("limel-menu",{class:{primary:this.primary},disabled:this.disabled,items:this.items,openDirection:"bottom"},o("button",{class:"menu-trigger",slot:"trigger",disabled:this.disabled},"⋮"))};this.label=undefined;this.primary=false;this.icon=undefined;this.disabled=false;this.items=[]}render(){return o(r,{class:{"has-menu":!!this.items.length}},o("limel-button",{label:this.label,primary:this.primary,icon:this.icon,disabled:this.disabled}),this.renderMenu())}};s.style=i;export{s as limel_split_button};
|
|
2
|
-
//# sourceMappingURL=p-b2057def.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["splitButtonCss","SplitButton","this","renderMenu","items","length","h","class","primary","disabled","openDirection","slot","render","Host","label","icon"],"sources":["./src/components/split-button/split-button.scss?tag=limel-split-button&encapsulation=shadow","./src/components/split-button/split-button.tsx"],"sourcesContent":["@import '../../style/mixins';\n\n:host(limel-split-button.has-menu) {\n --button-padding-right: 2rem;\n}\n\n:host(limel-split-button) {\n display: inline-flex;\n isolation: isolate;\n\n * {\n box-sizing: border-box;\n }\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n\nlimel-button {\n width: 100%;\n}\n\n$distance-around-trigger: 0.125rem;\n\nlimel-menu {\n display: flex;\n justify-content: flex-end;\n position: relative;\n z-index: 1;\n\n padding: $distance-around-trigger;\n margin-left: calc(var(--button-padding-right) * -1);\n width: var(--button-padding-right);\n\n &:before {\n transition: background-color 0.5s ease;\n content: '';\n position: absolute;\n inset: 0.375rem auto 0.375rem 0.6875rem;\n width: 1px;\n background-color: currentColor;\n\n opacity: 0.2;\n }\n\n &:not([disabled]) {\n color: var(\n --mdc-theme-primary,\n rgb(var(--color-teal-default))\n ); // similar to limel-button text\n\n &.primary {\n color: var(\n --mdc-theme-on-primary,\n rgb(var(--color-white))\n ); // similar to limel-button text\n }\n }\n\n &[disabled] {\n color: rgba(var(--contrast-1600), 0.37); // similar to limel-button text\n }\n\n &:hover,\n &:focus-within {\n &:before {\n background-color: transparent;\n }\n }\n}\n\n.menu-trigger {\n all: unset;\n\n text-align: center;\n font-weight: bold;\n\n border-radius: 0.125rem;\n height: 100%;\n width: 1rem;\n\n &:not(:disabled) {\n @include is-flat-clickable();\n @include visualize-keyboard-focus();\n cursor: pointer;\n\n &:focus-visible,\n &:hover {\n background-color: rgb(var(--color-white), 0.1);\n }\n }\n\n &:before {\n // prevents unintentionally activating the default action,\n // by clicking on the edge of menu trigger,\n // which would be activating the default onClick action\n // on `limel-button`.\n content: '';\n position: absolute;\n inset: -$distance-around-trigger * 2;\n z-index: -1;\n }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { ListSeparator, MenuItem } from '../../interface';\n\n/**\n * A split button is a button with two components:\n * a button and a side-menu attached to it.\n *\n * Clicking on the button runs a default action,\n * and clicking on the arrow opens up a list of other possible actions.\n *\n * :::warning\n * - Never use a split button for navigation purposes, such as going to next page.\n * The button should only be used for performing commands!\n * - Never use this component instead of a Select or Menu component!\n * :::\n * @exampleComponent limel-example-split-button-basic\n * @exampleComponent limel-example-split-button-repeat-default-command\n */\n@Component({\n tag: 'limel-split-button',\n styleUrl: 'split-button.scss',\n shadow: true,\n})\nexport class SplitButton {\n /**\n * The text to show on the default action part of 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 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 * A list of items and separators to show in the menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator> = [];\n\n /**\n * Is emitted when a menu item is selected.\n */\n @Event()\n public select: EventEmitter<MenuItem>;\n\n render() {\n return (\n <Host\n class={{\n 'has-menu': !!this.items.length,\n }}\n >\n <limel-button\n label={this.label}\n primary={this.primary}\n icon={this.icon}\n disabled={this.disabled}\n />\n {this.renderMenu()}\n </Host>\n );\n }\n\n private renderMenu = () => {\n if (!this.items.length) {\n return;\n }\n\n return (\n <limel-menu\n class={{\n primary: this.primary,\n }}\n disabled={this.disabled}\n items={this.items}\n openDirection=\"bottom\"\n >\n <button\n class=\"menu-trigger\"\n slot=\"trigger\"\n disabled={this.disabled}\n >\n ⋮\n </button>\n </limel-menu>\n );\n };\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,62D,MCuBVC,EAAW,M,wDAuDZC,KAAAC,WAAa,KACjB,IAAKD,KAAKE,MAAMC,OAAQ,CACpB,M,CAGJ,OACIC,EAAA,cACIC,MAAO,CACHC,QAASN,KAAKM,SAElBC,SAAUP,KAAKO,SACfL,MAAOF,KAAKE,MACZM,cAAc,UAEdJ,EAAA,UACIC,MAAM,eACNI,KAAK,UACLF,SAAUP,KAAKO,UAAQ,KAIlB,E,kCAjEJ,M,kCAYC,M,WAM8B,E,CAQhDG,SACI,OACIN,EAACO,EAAI,CACDN,MAAO,CACH,aAAcL,KAAKE,MAAMC,SAG7BC,EAAA,gBACIQ,MAAOZ,KAAKY,MACZN,QAASN,KAAKM,QACdO,KAAMb,KAAKa,KACXN,SAAUP,KAAKO,WAElBP,KAAKC,a"}
|