@limetech/lime-elements 38.22.2 → 38.23.1
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 +24 -0
- package/dist/cjs/{checkbox.template-f624966b.js → checkbox.template-92ae2e60.js} +3 -3
- package/dist/cjs/checkbox.template-92ae2e60.js.map +1 -0
- package/dist/cjs/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/limel-dynamic-label_4.cjs.entry.js +1 -1
- package/dist/cjs/limel-icon-button.cjs.entry.js +12 -2
- package/dist/cjs/limel-icon-button.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-slider.cjs.entry.js +1 -1
- package/dist/cjs/limel-slider.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-switch.cjs.entry.js +2 -2
- package/dist/cjs/limel-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-text-editor.cjs.entry.js +2 -2
- package/dist/cjs/limel-text-editor.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/checkbox/checkbox.template.js +2 -2
- package/dist/collection/components/checkbox/checkbox.template.js.map +1 -1
- package/dist/collection/components/icon-button/icon-button.css +2 -4
- package/dist/collection/components/icon-button/icon-button.js +21 -5
- package/dist/collection/components/icon-button/icon-button.js.map +1 -1
- package/dist/collection/components/slider/slider.js +1 -1
- package/dist/collection/components/slider/slider.js.map +1 -1
- package/dist/collection/components/switch/switch.js +2 -2
- package/dist/collection/components/switch/switch.js.map +1 -1
- package/dist/collection/components/text-editor/text-editor.js +2 -2
- package/dist/collection/components/text-editor/text-editor.js.map +1 -1
- package/dist/esm/{checkbox.template-890a59d7.js → checkbox.template-9acc6347.js} +3 -3
- package/dist/esm/checkbox.template-9acc6347.js.map +1 -0
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-checkbox.entry.js +1 -1
- package/dist/esm/limel-dynamic-label_4.entry.js +1 -1
- package/dist/esm/limel-icon-button.entry.js +12 -2
- package/dist/esm/limel-icon-button.entry.js.map +1 -1
- package/dist/esm/limel-slider.entry.js +1 -1
- package/dist/esm/limel-slider.entry.js.map +1 -1
- package/dist/esm/limel-switch.entry.js +2 -2
- package/dist/esm/limel-switch.entry.js.map +1 -1
- package/dist/esm/limel-text-editor.entry.js +2 -2
- package/dist/esm/limel-text-editor.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js.map +1 -1
- package/dist/lime-elements/{p-bf647874.entry.js → p-026417fa.entry.js} +2 -2
- package/dist/lime-elements/{p-a0fa40ee.entry.js → p-2116b3ce.entry.js} +2 -2
- package/dist/lime-elements/{p-a0fa40ee.entry.js.map → p-2116b3ce.entry.js.map} +1 -1
- package/dist/lime-elements/{p-45b6d10e.entry.js → p-250acfe4.entry.js} +2 -2
- package/dist/lime-elements/p-250acfe4.entry.js.map +1 -0
- package/dist/lime-elements/{p-549629d5.entry.js → p-51d475d8.entry.js} +2 -2
- package/dist/lime-elements/{p-549629d5.entry.js.map → p-51d475d8.entry.js.map} +1 -1
- package/dist/lime-elements/p-8ded6465.js +2 -0
- package/dist/lime-elements/p-8ded6465.js.map +1 -0
- package/dist/lime-elements/{p-bd37337a.entry.js → p-a7aa383b.entry.js} +2 -2
- package/dist/lime-elements/p-b928421f.entry.js +2 -0
- package/dist/lime-elements/p-b928421f.entry.js.map +1 -0
- package/dist/types/components/icon-button/icon-button.d.ts +4 -1
- package/dist/types/components.d.ts +6 -2
- package/package.json +1 -1
- package/dist/cjs/checkbox.template-f624966b.js.map +0 -1
- package/dist/esm/checkbox.template-890a59d7.js.map +0 -1
- package/dist/lime-elements/p-2c69d13e.js +0 -2
- package/dist/lime-elements/p-2c69d13e.js.map +0 -1
- package/dist/lime-elements/p-45b6d10e.entry.js.map +0 -1
- package/dist/lime-elements/p-a8fe6abf.entry.js +0 -2
- package/dist/lime-elements/p-a8fe6abf.entry.js.map +0 -1
- /package/dist/lime-elements/{p-bf647874.entry.js.map → p-026417fa.entry.js.map} +0 -0
- /package/dist/lime-elements/{p-bd37337a.entry.js.map → p-a7aa383b.entry.js.map} +0 -0
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-2714248e.js';
|
|
2
2
|
import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-e0d24198.js';
|
|
3
3
|
import { c as createRandomString } from './random-string-355331d3.js';
|
|
4
|
+
import { g as getIconName, b as getIconTitle } from './get-icon-props-37514418.js';
|
|
4
5
|
|
|
5
|
-
const iconButtonCss = "@charset \"UTF-8\";: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{all:unset;display:inline-flex;align-items:center;justify-content:center;height:2.25rem;width:2.25rem;border-radius:50%}button:not(:disabled){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--icon-background-color, transparent)}button:not(:disabled):hover,button:not(:disabled):focus,button:not(:disabled):focus-visible{will-change:color, background-color, box-shadow, transform}button:not(:disabled):hover,button:not(:disabled):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button:not(:disabled):hover{box-shadow:var(--button-shadow-hovered)}button:not(:disabled):active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button:not(:disabled):hover,button:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not(:disabled):focus{outline:none}button:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:disabled{cursor:not-allowed;color:var(--limel-theme-text-disabled-on-background-color)}:host([elevated]) button{box-shadow:var(--button-shadow-normal)}:host([elevated]) button:disabled{box-shadow:var(--button-shadow-normal)}limel-icon{width:1.
|
|
6
|
+
const iconButtonCss = "@charset \"UTF-8\";: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{all:unset;display:inline-flex;align-items:center;justify-content:center;height:2.25rem;width:2.25rem;border-radius:50%}button:not(:disabled){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--icon-background-color, transparent)}button:not(:disabled):hover,button:not(:disabled):focus,button:not(:disabled):focus-visible{will-change:color, background-color, box-shadow, transform}button:not(:disabled):hover,button:not(:disabled):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button:not(:disabled):hover{box-shadow:var(--button-shadow-hovered)}button:not(:disabled):active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button:not(:disabled):hover,button:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not(:disabled):focus{outline:none}button:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:disabled{cursor:not-allowed;color:var(--limel-theme-text-disabled-on-background-color)}:host([elevated]) button{box-shadow:var(--button-shadow-normal)}:host([elevated]) button:disabled{box-shadow:var(--button-shadow-normal)}limel-icon{padding:0.25rem;width:1.75rem}";
|
|
6
7
|
|
|
7
8
|
const IconButton = class {
|
|
8
9
|
constructor(hostRef) {
|
|
@@ -41,7 +42,16 @@ const IconButton = class {
|
|
|
41
42
|
if (this.host.hasAttribute('tabindex')) {
|
|
42
43
|
buttonAttributes.tabindex = this.host.getAttribute('tabindex');
|
|
43
44
|
}
|
|
44
|
-
return (h(Host, { onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ disabled: this.disabled, id: this.tooltipId }, buttonAttributes),
|
|
45
|
+
return (h(Host, { onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
|
|
46
|
+
}
|
|
47
|
+
renderIcon() {
|
|
48
|
+
var _a, _b;
|
|
49
|
+
const icon = getIconName(this.icon);
|
|
50
|
+
const title = getIconTitle(this.icon);
|
|
51
|
+
return (h("limel-icon", { name: icon, "aria-label": title, "aria-hidden": title ? null : 'true', style: {
|
|
52
|
+
color: `${(_a = this.icon) === null || _a === void 0 ? void 0 : _a.color}`,
|
|
53
|
+
'--icon-background-color': `${(_b = this.icon) === null || _b === void 0 ? void 0 : _b.backgroundColor}`,
|
|
54
|
+
} }));
|
|
45
55
|
}
|
|
46
56
|
renderTooltip(tooltipId) {
|
|
47
57
|
if (this.label) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-icon-button.entry.js","mappings":"
|
|
1
|
+
{"file":"limel-icon-button.entry.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,u6DAAu6D;;MCsBh7D,UAAU;;;IA6CX,cAAS,GAAG,kBAAkB,EAAE,CAAC;IAuDjC,4BAAuB,GAAG,CAAC,CAAC;MAChC,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,CAAC,CAAC,cAAc,EAAE,CAAC;OACtB;KACJ,CAAC;;oBA5FgB,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACnC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAIO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;GACJ;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IAEnD,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,QACI,EAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,IACvC,4BACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,SAAS,IACd,gBAAgB,GAEnB,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAC9B,CACN,EACT;GACL;EAEO,UAAU;;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACpC,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEtC,QACI,kBACI,IAAI,EAAE,IAAI,gBACE,KAAK,iBACJ,KAAK,GAAG,IAAI,GAAG,MAAM,EAClC,KAAK,EAAE;QACH,KAAK,EAAE,GAAG,MAAC,IAAI,CAAC,IAAa,0CAAE,KAAK,EAAE;QACtC,yBAAyB,EAAE,GACvB,MAAC,IAAI,CAAC,IAAa,0CAAE,eACzB,EAAE;OACL,GACH,EACJ;GACL;EAEO,aAAa,CAAC,SAAS;IAC3B,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,OAAO,qBAAe,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KACrE;GACJ;;;;;;;;","names":[],"sources":["./src/components/icon-button/icon-button.scss?tag=limel-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n:host([hidden]) {\n display: none;\n}\n\n@include mixins.visualize-aria-expanded('button');\n\nbutton {\n all: unset;\n &:not(:disabled) {\n @include mixins.is-flat-clickable(\n $background-color: var(--icon-background-color, transparent)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n height: 2.25rem;\n width: 2.25rem;\n border-radius: 50%;\n\n &:disabled {\n cursor: not-allowed;\n\n color: var(--limel-theme-text-disabled-on-background-color);\n }\n}\n\n:host([elevated]) {\n button {\n box-shadow: var(--button-shadow-normal);\n &:disabled {\n box-shadow: var(--button-shadow-normal);\n }\n }\n}\n\nlimel-icon {\n padding: 0.25rem;\n width: 1.75rem;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { getIconName, getIconTitle } from '../icon/get-icon-props';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-icon\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n tag: 'limel-icon-button',\n shadow: { delegatesFocus: true },\n styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n /**\n * The icon to display.\n */\n @Prop()\n public icon: string | Icon;\n\n /**\n * Set to `true` to give the button our standard \"elevated\" look, lifting\n * it off the flat layout.\n */\n @Prop({ reflect: true })\n public elevated = false;\n\n /**\n * The text to show to screenreaders and other assistive tech.\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * Set to `true` to disable the button.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n @Element()\n private host: HTMLLimelIconButtonElement;\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private tooltipId = createRandomString();\n\n private initialize() {\n const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n if (!element) {\n return;\n }\n }\n\n public render() {\n const buttonAttributes: { tabindex?: string } = {};\n\n if (this.host.hasAttribute('tabindex')) {\n buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n }\n\n return (\n <Host onClick={this.filterClickWhenDisabled}>\n <button\n disabled={this.disabled}\n id={this.tooltipId}\n {...buttonAttributes}\n >\n {this.renderIcon()}\n {this.renderTooltip(this.tooltipId)}\n </button>\n </Host>\n );\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n const title = getIconTitle(this.icon);\n\n return (\n <limel-icon\n name={icon}\n aria-label={title}\n aria-hidden={title ? null : 'true'}\n style={{\n color: `${(this.icon as Icon)?.color}`,\n '--icon-background-color': `${\n (this.icon as Icon)?.backgroundColor\n }`,\n }}\n />\n );\n }\n\n private renderTooltip(tooltipId) {\n if (this.label) {\n return <limel-tooltip elementId={tooltipId} label={this.label} />;\n }\n }\n\n private filterClickWhenDisabled = (e) => {\n if (this.disabled) {\n e.preventDefault();\n }\n };\n}\n"],"version":3}
|
|
@@ -1397,7 +1397,7 @@ const Slider = class {
|
|
|
1397
1397
|
} }, this.renderSliderInput(inputProps), this.renderTrack(), this.renderThumb()));
|
|
1398
1398
|
};
|
|
1399
1399
|
this.renderSliderInput = (inputProps) => {
|
|
1400
|
-
return (h("input", Object.assign({ class: "mdc-slider__input", type: "range", min: this.multiplyByFactor(this.valuemin), max: this.multiplyByFactor(this.valuemax), value: this.multiplyByFactor(this.value), name: "volume", "aria-labelledby": this.labelId, "aria-controls": this.helperTextId }, inputProps)));
|
|
1400
|
+
return (h("input", Object.assign({ class: "mdc-slider__input", type: "range", min: this.multiplyByFactor(this.valuemin), max: this.multiplyByFactor(this.valuemax), value: this.multiplyByFactor(this.value), name: "volume", "aria-labelledby": this.labelId, "aria-describedby": this.helperText ? this.helperTextId : undefined, "aria-controls": this.helperText ? this.helperTextId : undefined }, inputProps)));
|
|
1401
1401
|
};
|
|
1402
1402
|
this.renderTrack = () => {
|
|
1403
1403
|
return (h("div", { class: "mdc-slider__track" }, h("div", { class: "mdc-slider__track--inactive" }), h("div", { class: "mdc-slider__track--active" }, h("div", { class: "mdc-slider__track--active_fill" }))));
|