@infineon/infineon-design-system-stencil 20.19.4 → 20.19.5
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/dist/cjs/ifx-slider.cjs.entry.js +2 -2
- package/dist/cjs/ifx-slider.cjs.entry.js.map +1 -1
- package/dist/collection/components/button/button.stories.js +5 -1
- package/dist/collection/components/button/button.stories.js.map +1 -1
- package/dist/collection/components/icon-button/icon-button.stories.js +5 -0
- package/dist/collection/components/icon-button/icon-button.stories.js.map +1 -1
- package/dist/collection/components/slider/slider.css +22 -25
- package/dist/collection/components/slider/slider.js +1 -1
- package/dist/collection/components/slider/slider.js.map +1 -1
- package/dist/components/ifx-slider.js +2 -2
- package/dist/components/ifx-slider.js.map +1 -1
- package/dist/esm/ifx-slider.entry.js +2 -2
- package/dist/esm/ifx-slider.entry.js.map +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/p-edb5c816.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-edb5c816.entry.js.map +1 -0
- package/dist/types/components/button/button.stories.d.ts +6 -1
- package/dist/types/components/icon-button/icon-button.stories.d.ts +6 -0
- package/package.json +1 -1
- package/dist/infineon-design-system-stencil/p-7907e3bb.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-7907e3bb.entry.js.map +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-b797e11e.js');
|
|
6
6
|
|
|
7
|
-
const sliderCss = "*{font-family:\"Source Sans 3\"}:host{display:inline-block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:
|
|
7
|
+
const sliderCss = "*{font-family:\"Source Sans 3\"}:host{display:inline-block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0A8276;border-radius:50%;cursor:pointer;transition:box-shadow 0.2s}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover{background:#08665C}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active{background:#06534B}.ifx-slider input[type=range]:disabled{background:#BFBBBB;cursor:default}.ifx-slider input[type=range]:disabled::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#BFBBBB;border-radius:50%;cursor:default}";
|
|
8
8
|
|
|
9
9
|
const IfxSlider = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -44,7 +44,7 @@ const IfxSlider = class {
|
|
|
44
44
|
this.updateValuePercent();
|
|
45
45
|
}
|
|
46
46
|
render() {
|
|
47
|
-
return (index.h("div", { class: "ifx-slider" }, this.leftText && (index.h("span", { class: `left-text` }, this.leftText)), this.leftIcon && (index.h("ifx-icon", { icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), index.h("input", { type: "range", min: this.min, max: this.max, disabled: this.disabled, value: this.internalValue, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event) }), this.rightIcon && (index.h("ifx-icon", { icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (index.h("span", { class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (index.h("span", { class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.
|
|
47
|
+
return (index.h("div", { class: "ifx-slider" }, this.leftText && (index.h("span", { class: `left-text` }, this.leftText)), this.leftIcon && (index.h("ifx-icon", { icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), index.h("input", { type: "range", min: this.min, max: this.max, disabled: this.disabled, value: this.internalValue, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event) }), this.rightIcon && (index.h("ifx-icon", { icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (index.h("span", { class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (index.h("span", { class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.internalValue, "%"))));
|
|
48
48
|
}
|
|
49
49
|
static get watchers() { return {
|
|
50
50
|
"value": ["valueChanged"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-slider.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"file":"ifx-slider.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,q+CAAq+C;;MCO1+C,SAAS;;;;eACE,CAAC;eACD,GAAG;iBACD,CAAC;oBACG,KAAK;0BACC,KAAK;;;;;yBAKN,CAAC;;EAMlC,YAAY,CAAC,QAAgB;IAC3B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,iBAAiB,CAAC,KAAY;IAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;IAChD,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACxC,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;MAChF,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,OAAO,GAAG,CAAC,CAAC;KACnE;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;GACjC;EAED,gBAAgB;IACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAGD,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,YAAY,IACpB,IAAI,CAAC,QAAQ,KACZA,kBAAM,KAAK,EAAE,WAAW,IACrB,IAAI,CAAC,QAAQ,CACT,CACR,EACA,IAAI,CAAC,QAAQ,KACZA,sBAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,YAAY,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,GAAI,CACzF,EAEDA,mBACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAsB,CAAC,EACrD,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,GACjD,EACD,IAAI,CAAC,SAAS,KACbA,sBAAU,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,GAAI,CAC3F,EACA,IAAI,CAAC,SAAS,KACbA,kBAAM,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,IACzD,IAAI,CAAC,SAAS,CACV,CACR,EAEA,IAAI,CAAC,cAAc,KAClBA,kBACE,KAAK,EAAE,qBAAqB,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,IAE7D,IAAI,CAAC,aAAa,MACd,CACR,CACG,EACN;GACH;;;;;;;;;","names":["h"],"sources":["./src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","./src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n// ifx-slider.scss\n:host {\n display: inline-block;\n}\n\n.left-icon,\n.right-icon,\n.left-text,\n.right-text,\n.percentage-display {\n font-size: tokens.$ifxFontSizeS;\n color: tokens.$ifxColorEngineering500;\n margin-left: tokens.$ifxSpace100;\n\n &.disabled {\n // Add the disabled state for the percentage display\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n.left-icon,\n.left-text {\n margin-right: tokens.$ifxSpace100;\n}\n\n.right-icon,\n.right-text,\n.percentage-display {\n margin-left: tokens.$ifxSpace100;\n}\n\n\n.ifx-slider {\n display: flex;\n align-items: center;\n padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\n border-radius: tokens.$ifxBorderRadiusRound;\n\n input[type='range'] {\n -webkit-appearance: none;\n width: 100%;\n height: 4px;\n background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\n outline: none;\n cursor: pointer;\n transition: 0.2s;\n\n &::-moz-range-thumb {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n border-radius: 50%;\n background: tokens.$ifxColorOcean500;\n cursor: pointer;\n box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n }\n\n &:not(:disabled)::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: tokens.$ifxColorOcean500;\n border-radius: 50%;\n cursor: pointer;\n transition: box-shadow 0.2s;\n\n &:hover {\n background: tokens.$ifxColorOcean600;\n }\n\n &:active {\n background: tokens.$ifxColorOcean700;\n }\n }\n }\n\n input[type='range']:disabled {\n background: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n\n input[type='range']:disabled::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: tokens.$ifxColorEngineering300;\n border-radius: 50%;\n cursor: default;\n }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-slider',\n styleUrl: 'slider.scss',\n shadow: true,\n})\nexport class IfxSlider {\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop() value: number = 0;\n @Prop() disabled: boolean = false;\n @Prop() showPercentage: boolean = false;\n @Prop() leftIcon: string;\n @Prop() rightIcon: string;\n @Prop() leftText: string;\n @Prop() rightText: string;\n @State() internalValue: number = 0;\n @Event() ifxChange: EventEmitter<number>;\n\n private inputRef: HTMLInputElement;\n\n @Watch('value')\n valueChanged(newValue: number) {\n this.internalValue = newValue;\n this.updateValuePercent();\n }\n\n handleInputChange(event: Event) {\n const target = event.target as HTMLInputElement;\n this.internalValue = parseInt(target.value);\n this.ifxChange.emit(this.internalValue);\n this.updateValuePercent();\n }\n\n updateValuePercent() {\n if (this.inputRef) {\n const percent = ((this.internalValue - this.min) / (this.max - this.min)) * 100;\n this.inputRef.style.setProperty('--value-percent', `${percent}%`);\n }\n }\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n componentDidLoad() {\n this.updateValuePercent();\n }\n\n\n render() {\n return (\n <div class=\"ifx-slider\">\n {this.leftText && (\n <span class={`left-text`}>\n {this.leftText}\n </span>\n )}\n {this.leftIcon && (\n <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n )}\n\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n disabled={this.disabled}\n value={this.internalValue}\n ref={(el) => (this.inputRef = el as HTMLInputElement)}\n onInput={(event) => this.handleInputChange(event)}\n />\n {this.rightIcon && (\n <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n )}\n {this.rightText && (\n <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n {this.rightText}\n </span>\n )}\n\n {this.showPercentage && (\n <span\n class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n >\n {this.internalValue}%\n </span>\n )}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { icons } from '@infineon/infineon-icons';
|
|
1
2
|
export default {
|
|
2
3
|
title: "Components/Button",
|
|
3
4
|
tags: ['autodocs'],
|
|
@@ -8,13 +9,16 @@ export default {
|
|
|
8
9
|
type: "button",
|
|
9
10
|
size: "m",
|
|
10
11
|
disabled: false,
|
|
11
|
-
icon: "",
|
|
12
12
|
iconPosition: 'left',
|
|
13
13
|
href: false,
|
|
14
14
|
url: "",
|
|
15
15
|
target: '_blank'
|
|
16
16
|
},
|
|
17
17
|
argTypes: {
|
|
18
|
+
icon: {
|
|
19
|
+
options: Object.values(icons).map(i => i['name']),
|
|
20
|
+
control: { type: 'select' },
|
|
21
|
+
},
|
|
18
22
|
variant: {
|
|
19
23
|
options: ['primary', 'secondary', 'tertiary'],
|
|
20
24
|
control: { type: 'radio' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/components/button/button.stories.ts"],"names":[],"mappings":"AACA,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,IAAI,EAAE;IACJ,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,GAAG;IACT,QAAQ,EAAE,KAAK;IACf,
|
|
1
|
+
{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/components/button/button.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,IAAI,EAAE;IACJ,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,GAAG;IACT,QAAQ,EAAE,KAAK;IACf,YAAY,EAAE,MAAM;IACpB,IAAI,EAAE,KAAK;IACX,GAAG,EAAE,EAAE;IACP,MAAM,EAAE,QAAQ;GACjB;EAED,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;MACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,OAAO,EAAE;MACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;MAC7C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,KAAK,EAAE;MACL,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;MACzC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;MAC7B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;MAC9B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,YAAY,EAAE;MACZ,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;MAC1B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,MAAM,EAAE;MACN,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;MACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;GAEF;CAEF,CAAC;AAGF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE,CAC/B,yBAAyB,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,YAAY,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE;IAC1K,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE;cAC3N,CAAC;AAGf,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["\r\nimport { icons } from '@infineon/infineon-icons'\r\n\r\nexport default {\r\n title: \"Components/Button\",\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n label: \"Button\",\r\n variant: \"primary\",\r\n theme: \"default\",\r\n type: \"button\",\r\n size: \"m\",\r\n disabled: false,\r\n iconPosition: 'left',\r\n href: false,\r\n url: \"\",\r\n target: '_blank'\r\n },\r\n\r\n argTypes: {\r\n icon: {\r\n options: Object.values(icons).map(i => i['name']),\r\n control: { type: 'select' },\r\n },\r\n variant: {\r\n options: ['primary', 'secondary', 'tertiary'],\r\n control: { type: 'radio' },\r\n },\r\n theme: {\r\n options: ['default', 'danger', 'inverse'],\r\n control: { type: 'radio' },\r\n },\r\n type: {\r\n options: ['submit', 'button'],\r\n control: { type: 'radio' },\r\n },\r\n size: {\r\n options: ['xs', 's', 'm', 'l'],\r\n control: { type: 'radio' },\r\n },\r\n iconPosition: {\r\n options: ['left', 'right'],\r\n control: { type: 'radio' }\r\n },\r\n target: {\r\n options: ['_blank', '_self', '_parent'],\r\n control: { type: 'radio' }\r\n }\r\n\r\n },\r\n\r\n};\r\n\r\n\r\nconst DefaultTemplate = (args) =>\r\n `<ifx-button disabled=\"${args.disabled}\" variant=\"${args.variant}\" size=\"${args.size}\" target=\"${args.target}\" theme=\"${args.theme}\" ${args.href ? `href=\"${args.url}\"` : \"\"}>\r\n ${args.icon && args.iconPosition.toUpperCase() === \"LEFT\" ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : \"\"}${args.label}${args.icon && args.iconPosition.toUpperCase() === \"RIGHT\" ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : \"\"} \r\n</ifx-button>`;\r\n\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\n\r\n\r\n\r\n"]}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { icons } from '@infineon/infineon-icons';
|
|
1
2
|
export default {
|
|
2
3
|
title: "Components/Icon Button",
|
|
3
4
|
tags: ['autodocs'],
|
|
@@ -11,6 +12,10 @@ export default {
|
|
|
11
12
|
shape: 'round'
|
|
12
13
|
},
|
|
13
14
|
argTypes: {
|
|
15
|
+
icon: {
|
|
16
|
+
options: Object.values(icons).map(i => i['name']),
|
|
17
|
+
control: { type: 'select' },
|
|
18
|
+
},
|
|
14
19
|
variant: {
|
|
15
20
|
options: ['primary', 'secondary', 'tertiary'],
|
|
16
21
|
control: { type: 'radio' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.stories.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,IAAI,EAAE;IACJ,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,GAAG;IACT,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,WAAW;IACjB,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;GACf;EAED,QAAQ,EAAE;IACR,OAAO,EAAE;MACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;MAC7C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IAED,IAAI,EAAE;MACJ,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;MACxB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,MAAM,EAAE;MACN,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;MACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,KAAK,EAAE;MACL,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;MAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;GAEF;CACF,CAAC;AAGF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE,CAC/B,2BAA2B,IAAI,CAAC,KAAK,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,YAAY,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ;qBAC7J,CAAC;AAGtB,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["
|
|
1
|
+
{"version":3,"file":"icon-button.stories.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,IAAI,EAAE;IACJ,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,GAAG;IACT,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,WAAW;IACjB,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;GACf;EAED,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;MACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,OAAO,EAAE;MACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;MAC7C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IAED,IAAI,EAAE;MACJ,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;MACxB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,MAAM,EAAE;MACN,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;MACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,KAAK,EAAE;MACL,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;MAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;GAEF;CACF,CAAC;AAGF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE,CAC/B,2BAA2B,IAAI,CAAC,KAAK,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,YAAY,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ;qBAC7J,CAAC;AAGtB,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons'\n\nexport default {\n title: \"Components/Icon Button\",\n tags: ['autodocs'],\n\n args: {\n variant: \"primary\",\n size: 'm',\n disabled: false,\n icon: \"c-info-24\",\n href: \"\",\n target: '_blank',\n shape: 'round'\n },\n\n argTypes: {\n icon: {\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n },\n variant: {\n options: ['primary', 'secondary', 'tertiary'],\n control: { type: 'radio' },\n },\n\n size: {\n options: ['s', 'm', 'l'],\n control: { type: 'radio' },\n },\n target: {\n options: ['_blank', '_self', '_parent'],\n control: { type: 'radio' }\n },\n style: {\n options: ['round', 'square'],\n control: { type: 'radio' }\n }\n\n },\n};\n\n\nconst DefaultTemplate = (args) =>\n `<ifx-icon-button shape=\"${args.shape}\" variant=\"${args.variant}\" icon=\"${args.icon}\" href=\"${args.href}\" target=\"${args.target}\" size=\"${args.size}\" disabled=\"${args.disabled}\">\n </ifx-icon-button>`;\n\n\nexport const Default = DefaultTemplate.bind({});\n\n"]}
|
|
@@ -43,19 +43,13 @@
|
|
|
43
43
|
.ifx-slider input[type=range] {
|
|
44
44
|
-webkit-appearance: none;
|
|
45
45
|
width: 100%;
|
|
46
|
-
height:
|
|
46
|
+
height: 4px;
|
|
47
47
|
background: linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);
|
|
48
48
|
outline: none;
|
|
49
49
|
cursor: pointer;
|
|
50
50
|
transition: 0.2s;
|
|
51
51
|
}
|
|
52
|
-
.ifx-slider input[type=range]
|
|
53
|
-
background: #BFBBBB;
|
|
54
|
-
cursor: default;
|
|
55
|
-
}
|
|
56
|
-
.ifx-slider input[type=range]::-webkit-slider-thumb {
|
|
57
|
-
-webkit-appearance: none;
|
|
58
|
-
appearance: none;
|
|
52
|
+
.ifx-slider input[type=range]::-moz-range-thumb {
|
|
59
53
|
width: 20px;
|
|
60
54
|
height: 20px;
|
|
61
55
|
border-radius: 50%;
|
|
@@ -63,27 +57,30 @@
|
|
|
63
57
|
cursor: pointer;
|
|
64
58
|
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
|
65
59
|
}
|
|
66
|
-
.ifx-slider input[type=range]::-webkit-slider-thumb
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
.ifx-slider input[type=range]::-webkit-slider-thumb:active {
|
|
71
|
-
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.6);
|
|
72
|
-
background: #06534B;
|
|
73
|
-
}
|
|
74
|
-
.ifx-slider input[type=range]::-moz-range-thumb {
|
|
75
|
-
width: 20px;
|
|
76
|
-
height: 20px;
|
|
77
|
-
border-radius: 50%;
|
|
60
|
+
.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb {
|
|
61
|
+
-webkit-appearance: none;
|
|
62
|
+
width: 16px;
|
|
63
|
+
height: 16px;
|
|
78
64
|
background: #0A8276;
|
|
65
|
+
border-radius: 50%;
|
|
79
66
|
cursor: pointer;
|
|
80
|
-
box-shadow
|
|
67
|
+
transition: box-shadow 0.2s;
|
|
81
68
|
}
|
|
82
|
-
.ifx-slider input[type=range]::-
|
|
83
|
-
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
|
|
69
|
+
.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover {
|
|
84
70
|
background: #08665C;
|
|
85
71
|
}
|
|
86
|
-
.ifx-slider input[type=range]::-
|
|
87
|
-
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.6);
|
|
72
|
+
.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active {
|
|
88
73
|
background: #06534B;
|
|
74
|
+
}
|
|
75
|
+
.ifx-slider input[type=range]:disabled {
|
|
76
|
+
background: #BFBBBB;
|
|
77
|
+
cursor: default;
|
|
78
|
+
}
|
|
79
|
+
.ifx-slider input[type=range]:disabled::-webkit-slider-thumb {
|
|
80
|
+
-webkit-appearance: none;
|
|
81
|
+
width: 16px;
|
|
82
|
+
height: 16px;
|
|
83
|
+
background: #BFBBBB;
|
|
84
|
+
border-radius: 50%;
|
|
85
|
+
cursor: default;
|
|
89
86
|
}
|
|
@@ -35,7 +35,7 @@ export class IfxSlider {
|
|
|
35
35
|
this.updateValuePercent();
|
|
36
36
|
}
|
|
37
37
|
render() {
|
|
38
|
-
return (h("div", { class: "ifx-slider" }, this.leftText && (h("span", { class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), h("input", { type: "range", min: this.min, max: this.max, disabled: this.disabled, value: this.internalValue, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event) }), this.rightIcon && (h("ifx-icon", { icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (h("span", { class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.
|
|
38
|
+
return (h("div", { class: "ifx-slider" }, this.leftText && (h("span", { class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), h("input", { type: "range", min: this.min, max: this.max, disabled: this.disabled, value: this.internalValue, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event) }), this.rightIcon && (h("ifx-icon", { icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (h("span", { class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.internalValue, "%"))));
|
|
39
39
|
}
|
|
40
40
|
static get is() { return "ifx-slider"; }
|
|
41
41
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOtF,MAAM,OAAO,SAAS;;eACE,CAAC;eACD,GAAG;iBACD,CAAC;oBACG,KAAK;0BACC,KAAK;;;;;yBAKN,CAAC;;EAMlC,YAAY,CAAC,QAAgB;IAC3B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAED,iBAAiB,CAAC,KAAY;IAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;IAChD,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACxC,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;MAChF,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,OAAO,GAAG,CAAC,CAAC;KACnE;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;EAClC,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAGD,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,YAAY;MACpB,IAAI,CAAC,QAAQ,IAAI,CAChB,YAAM,KAAK,EAAE,WAAW,IACrB,IAAI,CAAC,QAAQ,CACT,CACR;MACA,IAAI,CAAC,QAAQ,IAAI,CAChB,gBAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,YAAY,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,GAAI,CACzF;MAED,aACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAsB,CAAC,EACrD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,GACjD;MACD,IAAI,CAAC,SAAS,IAAI,CACjB,gBAAU,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,GAAI,CAC3F;MACA,IAAI,CAAC,SAAS,IAAI,CACjB,YAAM,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,IACzD,IAAI,CAAC,SAAS,CACV,CACR;MAEA,IAAI,CAAC,cAAc,IAAI,CACtB,YACE,KAAK,EAAE,qBAAqB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE;QAE7D,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOtF,MAAM,OAAO,SAAS;;eACE,CAAC;eACD,GAAG;iBACD,CAAC;oBACG,KAAK;0BACC,KAAK;;;;;yBAKN,CAAC;;EAMlC,YAAY,CAAC,QAAgB;IAC3B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAED,iBAAiB,CAAC,KAAY;IAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;IAChD,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACxC,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;MAChF,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,OAAO,GAAG,CAAC,CAAC;KACnE;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;EAClC,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAGD,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,YAAY;MACpB,IAAI,CAAC,QAAQ,IAAI,CAChB,YAAM,KAAK,EAAE,WAAW,IACrB,IAAI,CAAC,QAAQ,CACT,CACR;MACA,IAAI,CAAC,QAAQ,IAAI,CAChB,gBAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,YAAY,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,GAAI,CACzF;MAED,aACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAsB,CAAC,EACrD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,GACjD;MACD,IAAI,CAAC,SAAS,IAAI,CACjB,gBAAU,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,GAAI,CAC3F;MACA,IAAI,CAAC,SAAS,IAAI,CACjB,YAAM,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,IACzD,IAAI,CAAC,SAAS,CACV,CACR;MAEA,IAAI,CAAC,cAAc,IAAI,CACtB,YACE,KAAK,EAAE,qBAAqB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE;QAE7D,IAAI,CAAC,aAAa;YACd,CACR,CACG,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-slider',\n styleUrl: 'slider.scss',\n shadow: true,\n})\nexport class IfxSlider {\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop() value: number = 0;\n @Prop() disabled: boolean = false;\n @Prop() showPercentage: boolean = false;\n @Prop() leftIcon: string;\n @Prop() rightIcon: string;\n @Prop() leftText: string;\n @Prop() rightText: string;\n @State() internalValue: number = 0;\n @Event() ifxChange: EventEmitter<number>;\n\n private inputRef: HTMLInputElement;\n\n @Watch('value')\n valueChanged(newValue: number) {\n this.internalValue = newValue;\n this.updateValuePercent();\n }\n\n handleInputChange(event: Event) {\n const target = event.target as HTMLInputElement;\n this.internalValue = parseInt(target.value);\n this.ifxChange.emit(this.internalValue);\n this.updateValuePercent();\n }\n\n updateValuePercent() {\n if (this.inputRef) {\n const percent = ((this.internalValue - this.min) / (this.max - this.min)) * 100;\n this.inputRef.style.setProperty('--value-percent', `${percent}%`);\n }\n }\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n componentDidLoad() {\n this.updateValuePercent();\n }\n\n\n render() {\n return (\n <div class=\"ifx-slider\">\n {this.leftText && (\n <span class={`left-text`}>\n {this.leftText}\n </span>\n )}\n {this.leftIcon && (\n <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n )}\n\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n disabled={this.disabled}\n value={this.internalValue}\n ref={(el) => (this.inputRef = el as HTMLInputElement)}\n onInput={(event) => this.handleInputChange(event)}\n />\n {this.rightIcon && (\n <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n )}\n {this.rightText && (\n <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n {this.rightText}\n </span>\n )}\n\n {this.showPercentage && (\n <span\n class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n >\n {this.internalValue}%\n </span>\n )}\n </div>\n );\n }\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { d as defineCustomElement$2 } from './infineonIconStencil.js';
|
|
3
3
|
|
|
4
|
-
const sliderCss = "*{font-family:\"Source Sans 3\"}:host{display:inline-block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:
|
|
4
|
+
const sliderCss = "*{font-family:\"Source Sans 3\"}:host{display:inline-block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0A8276;border-radius:50%;cursor:pointer;transition:box-shadow 0.2s}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover{background:#08665C}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active{background:#06534B}.ifx-slider input[type=range]:disabled{background:#BFBBBB;cursor:default}.ifx-slider input[type=range]:disabled::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#BFBBBB;border-radius:50%;cursor:default}";
|
|
5
5
|
|
|
6
6
|
const IfxSlider$1 = /*@__PURE__*/ proxyCustomElement(class IfxSlider extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -43,7 +43,7 @@ const IfxSlider$1 = /*@__PURE__*/ proxyCustomElement(class IfxSlider extends HTM
|
|
|
43
43
|
this.updateValuePercent();
|
|
44
44
|
}
|
|
45
45
|
render() {
|
|
46
|
-
return (h("div", { class: "ifx-slider" }, this.leftText && (h("span", { class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), h("input", { type: "range", min: this.min, max: this.max, disabled: this.disabled, value: this.internalValue, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event) }), this.rightIcon && (h("ifx-icon", { icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (h("span", { class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.
|
|
46
|
+
return (h("div", { class: "ifx-slider" }, this.leftText && (h("span", { class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), h("input", { type: "range", min: this.min, max: this.max, disabled: this.disabled, value: this.internalValue, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event) }), this.rightIcon && (h("ifx-icon", { icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (h("span", { class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.internalValue, "%"))));
|
|
47
47
|
}
|
|
48
48
|
static get watchers() { return {
|
|
49
49
|
"value": ["valueChanged"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-slider.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"file":"ifx-slider.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,q+CAAq+C;;MCO1+CA,WAAS;;;;;;eACE,CAAC;eACD,GAAG;iBACD,CAAC;oBACG,KAAK;0BACC,KAAK;;;;;yBAKN,CAAC;;EAMlC,YAAY,CAAC,QAAgB;IAC3B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,iBAAiB,CAAC,KAAY;IAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;IAChD,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACxC,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;MAChF,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,OAAO,GAAG,CAAC,CAAC;KACnE;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;GACjC;EAED,gBAAgB;IACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAGD,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,YAAY,IACpB,IAAI,CAAC,QAAQ,KACZ,YAAM,KAAK,EAAE,WAAW,IACrB,IAAI,CAAC,QAAQ,CACT,CACR,EACA,IAAI,CAAC,QAAQ,KACZ,gBAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,YAAY,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,GAAI,CACzF,EAED,aACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAsB,CAAC,EACrD,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,GACjD,EACD,IAAI,CAAC,SAAS,KACb,gBAAU,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,GAAI,CAC3F,EACA,IAAI,CAAC,SAAS,KACb,YAAM,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,IACzD,IAAI,CAAC,SAAS,CACV,CACR,EAEA,IAAI,CAAC,cAAc,KAClB,YACE,KAAK,EAAE,qBAAqB,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,IAE7D,IAAI,CAAC,aAAa,MACd,CACR,CACG,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["IfxSlider"],"sources":["./src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","./src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n// ifx-slider.scss\n:host {\n display: inline-block;\n}\n\n.left-icon,\n.right-icon,\n.left-text,\n.right-text,\n.percentage-display {\n font-size: tokens.$ifxFontSizeS;\n color: tokens.$ifxColorEngineering500;\n margin-left: tokens.$ifxSpace100;\n\n &.disabled {\n // Add the disabled state for the percentage display\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n.left-icon,\n.left-text {\n margin-right: tokens.$ifxSpace100;\n}\n\n.right-icon,\n.right-text,\n.percentage-display {\n margin-left: tokens.$ifxSpace100;\n}\n\n\n.ifx-slider {\n display: flex;\n align-items: center;\n padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\n border-radius: tokens.$ifxBorderRadiusRound;\n\n input[type='range'] {\n -webkit-appearance: none;\n width: 100%;\n height: 4px;\n background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\n outline: none;\n cursor: pointer;\n transition: 0.2s;\n\n &::-moz-range-thumb {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n border-radius: 50%;\n background: tokens.$ifxColorOcean500;\n cursor: pointer;\n box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n }\n\n &:not(:disabled)::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: tokens.$ifxColorOcean500;\n border-radius: 50%;\n cursor: pointer;\n transition: box-shadow 0.2s;\n\n &:hover {\n background: tokens.$ifxColorOcean600;\n }\n\n &:active {\n background: tokens.$ifxColorOcean700;\n }\n }\n }\n\n input[type='range']:disabled {\n background: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n\n input[type='range']:disabled::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: tokens.$ifxColorEngineering300;\n border-radius: 50%;\n cursor: default;\n }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-slider',\n styleUrl: 'slider.scss',\n shadow: true,\n})\nexport class IfxSlider {\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop() value: number = 0;\n @Prop() disabled: boolean = false;\n @Prop() showPercentage: boolean = false;\n @Prop() leftIcon: string;\n @Prop() rightIcon: string;\n @Prop() leftText: string;\n @Prop() rightText: string;\n @State() internalValue: number = 0;\n @Event() ifxChange: EventEmitter<number>;\n\n private inputRef: HTMLInputElement;\n\n @Watch('value')\n valueChanged(newValue: number) {\n this.internalValue = newValue;\n this.updateValuePercent();\n }\n\n handleInputChange(event: Event) {\n const target = event.target as HTMLInputElement;\n this.internalValue = parseInt(target.value);\n this.ifxChange.emit(this.internalValue);\n this.updateValuePercent();\n }\n\n updateValuePercent() {\n if (this.inputRef) {\n const percent = ((this.internalValue - this.min) / (this.max - this.min)) * 100;\n this.inputRef.style.setProperty('--value-percent', `${percent}%`);\n }\n }\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n componentDidLoad() {\n this.updateValuePercent();\n }\n\n\n render() {\n return (\n <div class=\"ifx-slider\">\n {this.leftText && (\n <span class={`left-text`}>\n {this.leftText}\n </span>\n )}\n {this.leftIcon && (\n <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n )}\n\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n disabled={this.disabled}\n value={this.internalValue}\n ref={(el) => (this.inputRef = el as HTMLInputElement)}\n onInput={(event) => this.handleInputChange(event)}\n />\n {this.rightIcon && (\n <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n )}\n {this.rightText && (\n <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n {this.rightText}\n </span>\n )}\n\n {this.showPercentage && (\n <span\n class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n >\n {this.internalValue}%\n </span>\n )}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h } from './index-69e586c1.js';
|
|
2
2
|
|
|
3
|
-
const sliderCss = "*{font-family:\"Source Sans 3\"}:host{display:inline-block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:
|
|
3
|
+
const sliderCss = "*{font-family:\"Source Sans 3\"}:host{display:inline-block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0A8276;border-radius:50%;cursor:pointer;transition:box-shadow 0.2s}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover{background:#08665C}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active{background:#06534B}.ifx-slider input[type=range]:disabled{background:#BFBBBB;cursor:default}.ifx-slider input[type=range]:disabled::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#BFBBBB;border-radius:50%;cursor:default}";
|
|
4
4
|
|
|
5
5
|
const IfxSlider = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -40,7 +40,7 @@ const IfxSlider = class {
|
|
|
40
40
|
this.updateValuePercent();
|
|
41
41
|
}
|
|
42
42
|
render() {
|
|
43
|
-
return (h("div", { class: "ifx-slider" }, this.leftText && (h("span", { class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), h("input", { type: "range", min: this.min, max: this.max, disabled: this.disabled, value: this.internalValue, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event) }), this.rightIcon && (h("ifx-icon", { icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (h("span", { class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.
|
|
43
|
+
return (h("div", { class: "ifx-slider" }, this.leftText && (h("span", { class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), h("input", { type: "range", min: this.min, max: this.max, disabled: this.disabled, value: this.internalValue, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event) }), this.rightIcon && (h("ifx-icon", { icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (h("span", { class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.internalValue, "%"))));
|
|
44
44
|
}
|
|
45
45
|
static get watchers() { return {
|
|
46
46
|
"value": ["valueChanged"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-slider.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"file":"ifx-slider.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,q+CAAq+C;;MCO1+C,SAAS;;;;eACE,CAAC;eACD,GAAG;iBACD,CAAC;oBACG,KAAK;0BACC,KAAK;;;;;yBAKN,CAAC;;EAMlC,YAAY,CAAC,QAAgB;IAC3B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,iBAAiB,CAAC,KAAY;IAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;IAChD,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACxC,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;MAChF,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,OAAO,GAAG,CAAC,CAAC;KACnE;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;GACjC;EAED,gBAAgB;IACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAGD,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,YAAY,IACpB,IAAI,CAAC,QAAQ,KACZ,YAAM,KAAK,EAAE,WAAW,IACrB,IAAI,CAAC,QAAQ,CACT,CACR,EACA,IAAI,CAAC,QAAQ,KACZ,gBAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,YAAY,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,GAAI,CACzF,EAED,aACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAsB,CAAC,EACrD,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,GACjD,EACD,IAAI,CAAC,SAAS,KACb,gBAAU,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,GAAI,CAC3F,EACA,IAAI,CAAC,SAAS,KACb,YAAM,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,IACzD,IAAI,CAAC,SAAS,CACV,CACR,EAEA,IAAI,CAAC,cAAc,KAClB,YACE,KAAK,EAAE,qBAAqB,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,IAE7D,IAAI,CAAC,aAAa,MACd,CACR,CACG,EACN;GACH;;;;;;;;;","names":[],"sources":["./src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","./src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n// ifx-slider.scss\n:host {\n display: inline-block;\n}\n\n.left-icon,\n.right-icon,\n.left-text,\n.right-text,\n.percentage-display {\n font-size: tokens.$ifxFontSizeS;\n color: tokens.$ifxColorEngineering500;\n margin-left: tokens.$ifxSpace100;\n\n &.disabled {\n // Add the disabled state for the percentage display\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n.left-icon,\n.left-text {\n margin-right: tokens.$ifxSpace100;\n}\n\n.right-icon,\n.right-text,\n.percentage-display {\n margin-left: tokens.$ifxSpace100;\n}\n\n\n.ifx-slider {\n display: flex;\n align-items: center;\n padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\n border-radius: tokens.$ifxBorderRadiusRound;\n\n input[type='range'] {\n -webkit-appearance: none;\n width: 100%;\n height: 4px;\n background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\n outline: none;\n cursor: pointer;\n transition: 0.2s;\n\n &::-moz-range-thumb {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n border-radius: 50%;\n background: tokens.$ifxColorOcean500;\n cursor: pointer;\n box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n }\n\n &:not(:disabled)::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: tokens.$ifxColorOcean500;\n border-radius: 50%;\n cursor: pointer;\n transition: box-shadow 0.2s;\n\n &:hover {\n background: tokens.$ifxColorOcean600;\n }\n\n &:active {\n background: tokens.$ifxColorOcean700;\n }\n }\n }\n\n input[type='range']:disabled {\n background: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n\n input[type='range']:disabled::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: tokens.$ifxColorEngineering300;\n border-radius: 50%;\n cursor: default;\n }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-slider',\n styleUrl: 'slider.scss',\n shadow: true,\n})\nexport class IfxSlider {\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop() value: number = 0;\n @Prop() disabled: boolean = false;\n @Prop() showPercentage: boolean = false;\n @Prop() leftIcon: string;\n @Prop() rightIcon: string;\n @Prop() leftText: string;\n @Prop() rightText: string;\n @State() internalValue: number = 0;\n @Event() ifxChange: EventEmitter<number>;\n\n private inputRef: HTMLInputElement;\n\n @Watch('value')\n valueChanged(newValue: number) {\n this.internalValue = newValue;\n this.updateValuePercent();\n }\n\n handleInputChange(event: Event) {\n const target = event.target as HTMLInputElement;\n this.internalValue = parseInt(target.value);\n this.ifxChange.emit(this.internalValue);\n this.updateValuePercent();\n }\n\n updateValuePercent() {\n if (this.inputRef) {\n const percent = ((this.internalValue - this.min) / (this.max - this.min)) * 100;\n this.inputRef.style.setProperty('--value-percent', `${percent}%`);\n }\n }\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n componentDidLoad() {\n this.updateValuePercent();\n }\n\n\n render() {\n return (\n <div class=\"ifx-slider\">\n {this.leftText && (\n <span class={`left-text`}>\n {this.leftText}\n </span>\n )}\n {this.leftIcon && (\n <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n )}\n\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n disabled={this.disabled}\n value={this.internalValue}\n ref={(el) => (this.inputRef = el as HTMLInputElement)}\n onInput={(event) => this.handleInputChange(event)}\n />\n {this.rightIcon && (\n <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n )}\n {this.rightText && (\n <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n {this.rightText}\n </span>\n )}\n\n {this.showPercentage && (\n <span\n class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n >\n {this.internalValue}%\n </span>\n )}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as i,b as t}from"./p-acd1bd1f.js";export{s as setNonce}from"./p-acd1bd1f.js";const a=()=>{{o(i.prototype)}const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};const o=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const t=i.call(this,false);const a=this.childNodes;if(e){for(let e=0;e<a.length;e++){if(a[e].nodeType!==2){t.appendChild(a[e].cloneNode(true))}}}return t}};a().then((e=>t([["p-aa77bd38",[[1,"ifx-faq"]]],["p-98e40613",[[1,"ifx-dropdown-trigger-button",{isOpen:[4,"is-open"],theme:[1],variant:[1],size:[1],disabled:[4],hideArrow:[4,"hide-arrow"]}]]],["p-5afeb88b",[[1,"ifx-modal",{caption:[1],closeOnOverlayClick:[4,"close-on-overlay-click"],alertColor:[1,"alert-color"],alertIcon:[1,"alert-icon"],showModal:[32],open:[64],close:[64]}]]],["p-50f4cec6",[[1,"ifx-multiselect",{options:[1],size:[1],disabled:[4],error:[4],errorMessage:[1,"error-message"],label:[1],maxItemCount:[2,"max-item-count"],persistentSelectedOptions:[32],listOfOptions:[32],dropdownOpen:[32],dropdownFlipped:[32],zIndex:[32]}]]],["p-ca8575bb",[[1,"ifx-search-bar",{isOpen:[4,"is-open"],disabled:[4],value:[1025],internalState:[32]}]]],["p-3e384f1c",[[1,"ifx-alert",{color:[1],icon:[1]}]]],["p-025503b5",[[1,"ifx-breadcrumb-item-label",{icon:[1],url:[1],target:[1]}]]],["p-07a2f2ed",[[1,"ifx-chip",{placeholder:[1],isEmpty:[32]},[[5,"mousedown","handleOutsideClick"]]]]],["p-420f4319",[[1,"ifx-dropdown-item",{icon:[1],href:[1],target:[1],hide:[4],size:[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-c65fa225",[[1,"ifx-example",{variant:[1],color:[1],size:[1],disabled:[4],icon:[1],position:[1],href:[1],target:[1],type:[1],internalPosition:[32],setFocus:[64]}]]],["p-758bd4e9",[[1,"ifx-icon-button",{variant:[1],size:[1],disabled:[4],icon:[1],href:[1],target:[1],shape:[1],setFocus:[64]}]]],["p-43963509",[[1,"ifx-icons-preview",{iconsArray:[32],isCopied:[32],copiedIndex:[32],htmlTag:[32],iconName:[32]}]]],["p-939327e2",[[1,"ifx-list-item",{isFlush:[1028,"is-flush"],badge:[4],badgeValue:[2,"badge-value"],hasBulletpoint:[32]}]]],["p-1ed08d1e",[[1,"ifx-navbar",{applicationName:[1,"application-name"],fixed:[4],showLogo:[4,"show-logo"],main:[32],products:[32],applications:[32],design:[32],support:[32],about:[32],hasLeftMenuItems:[32],searchBarIsOpen:[32]},[[0,"ifxSearchBarIsOpen","handleSearchBarToggle"],[5,"mousedown","handleOutsideClick"]]]]],["p-c14e5384",[[1,"ifx-navbar-item",{isProfile:[1028,"is-profile"],hideLabel:[4,"hide-label"],icon:[1],href:[1],target:[1],hideComponent:[4,"hide-component"]}]]],["p-51f25847",[[0,"ifx-select",{type:[1],value:[1],name:[1],items:[16],choices:[1],renderChoiceLimit:[2,"render-choice-limit"],maxItemCount:[2,"max-item-count"],addItems:[4,"add-items"],removeItems:[4,"remove-items"],removeItemButton:[4,"remove-item-button"],editItems:[4,"edit-items"],duplicateItemsAllowed:[4,"duplicate-items-allowed"],delimiter:[1],paste:[4],searchEnabled:[4,"search-enabled"],searchChoices:[4,"search-choices"],searchFields:[1,"search-fields"],searchFloor:[2,"search-floor"],searchResultLimit:[2,"search-result-limit"],position:[1],resetScrollPosition:[4,"reset-scroll-position"],shouldSort:[4,"should-sort"],shouldSortItems:[4,"should-sort-items"],sorter:[16],placeholder:[8],placeholderValue:[1,"placeholder-value"],searchPlaceholderValue:[1,"search-placeholder-value"],prependValue:[1,"prepend-value"],appendValue:[1,"append-value"],renderSelectedChoices:[1,"render-selected-choices"],loadingText:[1,"loading-text"],noResultsText:[1,"no-results-text"],noChoicesText:[1,"no-choices-text"],itemSelectText:[1,"item-select-text"],addItemText:[1,"add-item-text"],maxItemText:[1,"max-item-text"],uniqueItemText:[1,"unique-item-text"],classNames:[16],fuseOptions:[16],addItemFilter:[1,"add-item-filter"],customAddItemText:[1,"custom-add-item-text"],callbackOnInit:[16],callbackOnCreateTemplates:[16],valueComparer:[16],ifxError:[4,"ifx-error"],ifxErrorMessage:[1,"ifx-error-message"],ifxLabel:[1,"ifx-label"],ifxDisabled:[4,"ifx-disabled"],ifxPlaceholderValue:[1,"ifx-placeholder-value"],ifxOptions:[1,"ifx-options"],ifxSize:[1,"ifx-size"],ifxSelectedOption:[32],handleChange:[64],highlightItem:[64],unhighlightItem:[64],highlightAll:[64],unhighlightAll:[64],removeActiveItemsByValue:[64],removeActiveItems:[64],removeHighlightedItems:[64],showDropdown:[64],hideDropdown:[64],getValue:[64],setValue:[64],setChoiceByValue:[64],setChoices:[64],clearChoices:[64],clearStore:[64],clearInput:[64],enable:[64],disable:[64],ajax:[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-a410cd14",[[1,"ifx-sidebar-item",{icon:[1],href:[1],target:[1],hasIcon:[32],hasIconWrapper:[32]},[[0,"consoleError","handleConsoleError"]]]]],["p-
|
|
1
|
+
import{p as e,H as i,b as t}from"./p-acd1bd1f.js";export{s as setNonce}from"./p-acd1bd1f.js";const a=()=>{{o(i.prototype)}const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};const o=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const t=i.call(this,false);const a=this.childNodes;if(e){for(let e=0;e<a.length;e++){if(a[e].nodeType!==2){t.appendChild(a[e].cloneNode(true))}}}return t}};a().then((e=>t([["p-aa77bd38",[[1,"ifx-faq"]]],["p-98e40613",[[1,"ifx-dropdown-trigger-button",{isOpen:[4,"is-open"],theme:[1],variant:[1],size:[1],disabled:[4],hideArrow:[4,"hide-arrow"]}]]],["p-5afeb88b",[[1,"ifx-modal",{caption:[1],closeOnOverlayClick:[4,"close-on-overlay-click"],alertColor:[1,"alert-color"],alertIcon:[1,"alert-icon"],showModal:[32],open:[64],close:[64]}]]],["p-50f4cec6",[[1,"ifx-multiselect",{options:[1],size:[1],disabled:[4],error:[4],errorMessage:[1,"error-message"],label:[1],maxItemCount:[2,"max-item-count"],persistentSelectedOptions:[32],listOfOptions:[32],dropdownOpen:[32],dropdownFlipped:[32],zIndex:[32]}]]],["p-ca8575bb",[[1,"ifx-search-bar",{isOpen:[4,"is-open"],disabled:[4],value:[1025],internalState:[32]}]]],["p-3e384f1c",[[1,"ifx-alert",{color:[1],icon:[1]}]]],["p-025503b5",[[1,"ifx-breadcrumb-item-label",{icon:[1],url:[1],target:[1]}]]],["p-07a2f2ed",[[1,"ifx-chip",{placeholder:[1],isEmpty:[32]},[[5,"mousedown","handleOutsideClick"]]]]],["p-420f4319",[[1,"ifx-dropdown-item",{icon:[1],href:[1],target:[1],hide:[4],size:[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-c65fa225",[[1,"ifx-example",{variant:[1],color:[1],size:[1],disabled:[4],icon:[1],position:[1],href:[1],target:[1],type:[1],internalPosition:[32],setFocus:[64]}]]],["p-758bd4e9",[[1,"ifx-icon-button",{variant:[1],size:[1],disabled:[4],icon:[1],href:[1],target:[1],shape:[1],setFocus:[64]}]]],["p-43963509",[[1,"ifx-icons-preview",{iconsArray:[32],isCopied:[32],copiedIndex:[32],htmlTag:[32],iconName:[32]}]]],["p-939327e2",[[1,"ifx-list-item",{isFlush:[1028,"is-flush"],badge:[4],badgeValue:[2,"badge-value"],hasBulletpoint:[32]}]]],["p-1ed08d1e",[[1,"ifx-navbar",{applicationName:[1,"application-name"],fixed:[4],showLogo:[4,"show-logo"],main:[32],products:[32],applications:[32],design:[32],support:[32],about:[32],hasLeftMenuItems:[32],searchBarIsOpen:[32]},[[0,"ifxSearchBarIsOpen","handleSearchBarToggle"],[5,"mousedown","handleOutsideClick"]]]]],["p-c14e5384",[[1,"ifx-navbar-item",{isProfile:[1028,"is-profile"],hideLabel:[4,"hide-label"],icon:[1],href:[1],target:[1],hideComponent:[4,"hide-component"]}]]],["p-51f25847",[[0,"ifx-select",{type:[1],value:[1],name:[1],items:[16],choices:[1],renderChoiceLimit:[2,"render-choice-limit"],maxItemCount:[2,"max-item-count"],addItems:[4,"add-items"],removeItems:[4,"remove-items"],removeItemButton:[4,"remove-item-button"],editItems:[4,"edit-items"],duplicateItemsAllowed:[4,"duplicate-items-allowed"],delimiter:[1],paste:[4],searchEnabled:[4,"search-enabled"],searchChoices:[4,"search-choices"],searchFields:[1,"search-fields"],searchFloor:[2,"search-floor"],searchResultLimit:[2,"search-result-limit"],position:[1],resetScrollPosition:[4,"reset-scroll-position"],shouldSort:[4,"should-sort"],shouldSortItems:[4,"should-sort-items"],sorter:[16],placeholder:[8],placeholderValue:[1,"placeholder-value"],searchPlaceholderValue:[1,"search-placeholder-value"],prependValue:[1,"prepend-value"],appendValue:[1,"append-value"],renderSelectedChoices:[1,"render-selected-choices"],loadingText:[1,"loading-text"],noResultsText:[1,"no-results-text"],noChoicesText:[1,"no-choices-text"],itemSelectText:[1,"item-select-text"],addItemText:[1,"add-item-text"],maxItemText:[1,"max-item-text"],uniqueItemText:[1,"unique-item-text"],classNames:[16],fuseOptions:[16],addItemFilter:[1,"add-item-filter"],customAddItemText:[1,"custom-add-item-text"],callbackOnInit:[16],callbackOnCreateTemplates:[16],valueComparer:[16],ifxError:[4,"ifx-error"],ifxErrorMessage:[1,"ifx-error-message"],ifxLabel:[1,"ifx-label"],ifxDisabled:[4,"ifx-disabled"],ifxPlaceholderValue:[1,"ifx-placeholder-value"],ifxOptions:[1,"ifx-options"],ifxSize:[1,"ifx-size"],ifxSelectedOption:[32],handleChange:[64],highlightItem:[64],unhighlightItem:[64],highlightAll:[64],unhighlightAll:[64],removeActiveItemsByValue:[64],removeActiveItems:[64],removeHighlightedItems:[64],showDropdown:[64],hideDropdown:[64],getValue:[64],setValue:[64],setChoiceByValue:[64],setChoices:[64],clearChoices:[64],clearStore:[64],clearInput:[64],enable:[64],disable:[64],ajax:[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-a410cd14",[[1,"ifx-sidebar-item",{icon:[1],href:[1],target:[1],hasIcon:[32],hasIconWrapper:[32]},[[0,"consoleError","handleConsoleError"]]]]],["p-edb5c816",[[1,"ifx-slider",{min:[2],max:[2],value:[2],disabled:[4],showPercentage:[4,"show-percentage"],leftIcon:[1,"left-icon"],rightIcon:[1,"right-icon"],leftText:[1,"left-text"],rightText:[1,"right-text"],internalValue:[32]}]]],["p-84745b56",[[1,"ifx-text-field",{placeholder:[1],value:[1025],error:[4],errorMessage:[1,"error-message"],success:[4],disabled:[4],readonly:[4],icon:[4]}]]],["p-042ecebc",[[1,"ifx-tooltip",{header:[1],text:[1],position:[1],variant:[1],icon:[1],tooltipVisible:[32],internalPosition:[32]}]]],["p-b109703a",[[1,"ifx-badge"]]],["p-99593c55",[[0,"ifx-basic-table",{cols:[1],rows:[1],columnDefs:[16],rowData:[16],rowHeight:[1,"row-height"],uniqueKey:[1,"unique-key"],tableHeight:[1,"table-height"],gridOptions:[32]}]]],["p-e18695e4",[[1,"ifx-breadcrumb"]]],["p-d13cb063",[[1,"ifx-breadcrumb-item",{isLastItem:[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-6ccb878f",[[1,"ifx-card",{direction:[1],href:[1],target:[1],noBtns:[32],alignment:[32],noImg:[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-fce37e59",[[1,"ifx-card-headline",{isHovered:[4,"is-hovered"],direction:[32],hasDesc:[32]}]]],["p-9f7b7de1",[[1,"ifx-card-image",{src:[1],alt:[1],position:[1]}]]],["p-c706365e",[[1,"ifx-card-links"]]],["p-3ae02e9a",[[1,"ifx-card-overline"]]],["p-41c935d6",[[1,"ifx-card-text",{hasBtn:[32]}]]],["p-f6041d8a",[[1,"ifx-dropdown",{placement:[1],defaultOpen:[4,"default-open"],noAppendToBody:[4,"no-append-to-body"],disabled:[4],noCloseOnOutsideClick:[4,"no-close-on-outside-click"],noCloseOnMenuClick:[4,"no-close-on-menu-click"],internalIsOpen:[32],trigger:[32],menu:[32],isOpen:[64],closeDropdown:[64],openDropdown:[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]]]]],["p-e4ca2035",[[1,"ifx-dropdown-header"]]],["p-2d7286b3",[[1,"ifx-dropdown-menu",{isOpen:[4,"is-open"],size:[1],hideTopPadding:[32],filteredItems:[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-f7d0f880",[[1,"ifx-dropdown-separator"]]],["p-3b6a6777",[[1,"ifx-dropdown-trigger",{isOpen:[4,"is-open"]}]]],["p-2901f8d0",[[1,"ifx-filter-input",{label:[1],size:[1],disabled:[4],icon:[4],search:[4],filter:[4],options:[32]}]]],["p-87f2c40e",[[1,"ifx-footer",{variant:[1],large:[32],default:[32],showFacebook:[32]}]]],["p-b304e24a",[[1,"ifx-footer-column"]]],["p-d618fd1c",[[1,"ifx-link",{href:[1],target:[1],color:[1],bold:[4],underline:[4]}]]],["p-3b29e194",[[1,"ifx-list-group",{flush:[4],bulletpoint:[4],notification:[4]}]]],["p-79a6f218",[[1,"ifx-list-notification",{titleText:[1,"title-text"],isFlush:[4,"is-flush"],creationTime:[8,"creation-time"],postTime:[32],shownTime:[32]}]]],["p-98aa70c1",[[1,"ifx-navbar-menu",{menu:[32]}]]],["p-c4218d32",[[1,"ifx-navbar-menu-item",{href:[1],target:[1],hide:[4]}]]],["p-abfb7592",[[1,"ifx-progress-bar",{value:[2],label:[1],size:[1],showLabel:[4,"show-label"],internalValue:[32]}]]],["p-45fcee45",[[1,"ifx-radio-button",{disabled:[4],value:[4],error:[4],size:[1],internalValue:[32],hasSlot:[32]}]]],["p-4c4c85cf",[[1,"ifx-sidebar",{applicationName:[1,"application-name"]}]]],["p-51898d6e",[[1,"ifx-spinner",{size:[1],variant:[1]}]]],["p-f035a6ec",[[1,"ifx-status",{label:[1],border:[4],color:[1]}]]],["p-e3b7b34a",[[1,"ifx-switch",{value:[4],name:[1],disabled:[4],internalValue:[32]}]]],["p-e5d0e265",[[4,"ifx-tab",{header:[1]}]]],["p-5199a518",[[0,"ifx-table",{cols:[1],rows:[1],columnDefs:[16],rowData:[16],rowHeight:[1,"row-height"],uniqueKey:[1,"unique-key"],tableHeight:[1,"table-height"],pagination:[4],paginationPageSize:[2,"pagination-page-size"],gridOptions:[32]}]]],["p-3a876836",[[1,"ifx-tabs",{tabs:[16],orientation:[1],small:[4],internalOrientation:[32],activeTabIndex:[32],tabRefs:[32],tabHeaderRefs:[32],tabTitles:[32]},[[0,"slotchange","onSlotChange"]]]]],["p-a9433958",[[1,"ifx-tag"]]],["p-a3afa5f0",[[1,"ifx-checkbox",{disabled:[4],value:[4],error:[4],name:[1],size:[1],indeterminate:[4],internalValue:[32]}]]],["p-369b4552",[[1,"ifx-search-field",{value:[1025],showDeleteIcon:[4,"show-delete-icon"],disabled:[4],size:[1],insideDropdown:[32],isFocused:[32]},[[5,"mousedown","handleOutsideClick"]]]]],["p-15b817fc",[[1,"ifx-number-indicator",{inverted:[4]}]]],["p-1348f335",[[1,"ifx-accordion-item",{caption:[1],open:[32],close:[64],isOpen:[64]}],[1,"ifx-accordion",{autoCollapse:[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-1d2ab4ad",[[1,"ifx-button",{variant:[1],theme:[1],size:[1],disabled:[4],href:[1],target:[1],internalHref:[32],setFocus:[64]}]]],["p-a54bbb10",[[0,"ifx-icon",{icon:[1025],ifxIcon:[1032,"ifx-icon"]}]]]],e)));
|
|
2
2
|
//# sourceMappingURL=infineon-design-system-stencil.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,c as t,h as e}from"./p-acd1bd1f.js";const s='*{font-family:"Source Sans 3"}:host{display:inline-block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0A8276;border-radius:50%;cursor:pointer;transition:box-shadow 0.2s}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover{background:#08665C}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active{background:#06534B}.ifx-slider input[type=range]:disabled{background:#BFBBBB;cursor:default}.ifx-slider input[type=range]:disabled::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#BFBBBB;border-radius:50%;cursor:default}';const n=class{constructor(e){i(this,e);this.ifxChange=t(this,"ifxChange",7);this.min=0;this.max=100;this.value=0;this.disabled=false;this.showPercentage=false;this.leftIcon=undefined;this.rightIcon=undefined;this.leftText=undefined;this.rightText=undefined;this.internalValue=0}valueChanged(i){this.internalValue=i;this.updateValuePercent()}handleInputChange(i){const t=i.target;this.internalValue=parseInt(t.value);this.ifxChange.emit(this.internalValue);this.updateValuePercent()}updateValuePercent(){if(this.inputRef){const i=(this.internalValue-this.min)/(this.max-this.min)*100;this.inputRef.style.setProperty("--value-percent",`${i}%`)}}componentWillLoad(){this.internalValue=this.value}componentDidLoad(){this.updateValuePercent()}render(){return e("div",{class:"ifx-slider"},this.leftText&&e("span",{class:`left-text`},this.leftText),this.leftIcon&&e("ifx-icon",{icon:this.leftIcon,class:`left-icon${this.disabled?" disabled":""}`}),e("input",{type:"range",min:this.min,max:this.max,disabled:this.disabled,value:this.internalValue,ref:i=>this.inputRef=i,onInput:i=>this.handleInputChange(i)}),this.rightIcon&&e("ifx-icon",{icon:this.rightIcon,class:`right-icon${this.disabled?" disabled":""}`}),this.rightText&&e("span",{class:`right-text${this.disabled?" disabled":""}`},this.rightText),this.showPercentage&&e("span",{class:`percentage-display${this.disabled?" disabled":""}`},this.internalValue,"%"))}static get watchers(){return{value:["valueChanged"]}}};n.style=s;export{n as ifx_slider};
|
|
2
|
+
//# sourceMappingURL=p-edb5c816.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sliderCss","IfxSlider","valueChanged","newValue","this","internalValue","updateValuePercent","handleInputChange","event","target","parseInt","value","ifxChange","emit","inputRef","percent","min","max","style","setProperty","componentWillLoad","componentDidLoad","render","h","class","leftText","leftIcon","icon","disabled","type","ref","el","onInput","rightIcon","rightText","showPercentage"],"sources":["./src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","./src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n// ifx-slider.scss\n:host {\n display: inline-block;\n}\n\n.left-icon,\n.right-icon,\n.left-text,\n.right-text,\n.percentage-display {\n font-size: tokens.$ifxFontSizeS;\n color: tokens.$ifxColorEngineering500;\n margin-left: tokens.$ifxSpace100;\n\n &.disabled {\n // Add the disabled state for the percentage display\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n.left-icon,\n.left-text {\n margin-right: tokens.$ifxSpace100;\n}\n\n.right-icon,\n.right-text,\n.percentage-display {\n margin-left: tokens.$ifxSpace100;\n}\n\n\n.ifx-slider {\n display: flex;\n align-items: center;\n padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\n border-radius: tokens.$ifxBorderRadiusRound;\n\n input[type='range'] {\n -webkit-appearance: none;\n width: 100%;\n height: 4px;\n background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\n outline: none;\n cursor: pointer;\n transition: 0.2s;\n\n &::-moz-range-thumb {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n border-radius: 50%;\n background: tokens.$ifxColorOcean500;\n cursor: pointer;\n box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n }\n\n &:not(:disabled)::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: tokens.$ifxColorOcean500;\n border-radius: 50%;\n cursor: pointer;\n transition: box-shadow 0.2s;\n\n &:hover {\n background: tokens.$ifxColorOcean600;\n }\n\n &:active {\n background: tokens.$ifxColorOcean700;\n }\n }\n }\n\n input[type='range']:disabled {\n background: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n\n input[type='range']:disabled::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: tokens.$ifxColorEngineering300;\n border-radius: 50%;\n cursor: default;\n }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-slider',\n styleUrl: 'slider.scss',\n shadow: true,\n})\nexport class IfxSlider {\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop() value: number = 0;\n @Prop() disabled: boolean = false;\n @Prop() showPercentage: boolean = false;\n @Prop() leftIcon: string;\n @Prop() rightIcon: string;\n @Prop() leftText: string;\n @Prop() rightText: string;\n @State() internalValue: number = 0;\n @Event() ifxChange: EventEmitter<number>;\n\n private inputRef: HTMLInputElement;\n\n @Watch('value')\n valueChanged(newValue: number) {\n this.internalValue = newValue;\n this.updateValuePercent();\n }\n\n handleInputChange(event: Event) {\n const target = event.target as HTMLInputElement;\n this.internalValue = parseInt(target.value);\n this.ifxChange.emit(this.internalValue);\n this.updateValuePercent();\n }\n\n updateValuePercent() {\n if (this.inputRef) {\n const percent = ((this.internalValue - this.min) / (this.max - this.min)) * 100;\n this.inputRef.style.setProperty('--value-percent', `${percent}%`);\n }\n }\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n componentDidLoad() {\n this.updateValuePercent();\n }\n\n\n render() {\n return (\n <div class=\"ifx-slider\">\n {this.leftText && (\n <span class={`left-text`}>\n {this.leftText}\n </span>\n )}\n {this.leftIcon && (\n <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n )}\n\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n disabled={this.disabled}\n value={this.internalValue}\n ref={(el) => (this.inputRef = el as HTMLInputElement)}\n onInput={(event) => this.handleInputChange(event)}\n />\n {this.rightIcon && (\n <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n )}\n {this.rightText && (\n <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n {this.rightText}\n </span>\n )}\n\n {this.showPercentage && (\n <span\n class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n >\n {this.internalValue}%\n </span>\n )}\n </div>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,o+C,MCOLC,EAAS,M,uEACE,E,SACA,I,WACE,E,cACI,M,oBACM,M,qHAKD,C,CAMjCC,aAAaC,GACXC,KAAKC,cAAgBF,EACrBC,KAAKE,oB,CAGPC,kBAAkBC,GAChB,MAAMC,EAASD,EAAMC,OACrBL,KAAKC,cAAgBK,SAASD,EAAOE,OACrCP,KAAKQ,UAAUC,KAAKT,KAAKC,eACzBD,KAAKE,oB,CAGPA,qBACE,GAAIF,KAAKU,SAAU,CACjB,MAAMC,GAAYX,KAAKC,cAAgBD,KAAKY,MAAQZ,KAAKa,IAAMb,KAAKY,KAAQ,IAC5EZ,KAAKU,SAASI,MAAMC,YAAY,kBAAmB,GAAGJ,K,EAI1DK,oBACEhB,KAAKC,cAAgBD,KAAKO,K,CAG5BU,mBACEjB,KAAKE,oB,CAIPgB,SACE,OACEC,EAAA,OAAKC,MAAM,cACRpB,KAAKqB,UACJF,EAAA,QAAMC,MAAO,aACVpB,KAAKqB,UAGTrB,KAAKsB,UACJH,EAAA,YAAUI,KAAMvB,KAAKsB,SAAUF,MAAO,YAAYpB,KAAKwB,SAAW,YAAc,OAGlFL,EAAA,SACEM,KAAK,QACLb,IAAKZ,KAAKY,IACVC,IAAKb,KAAKa,IACVW,SAAUxB,KAAKwB,SACfjB,MAAOP,KAAKC,cACZyB,IAAMC,GAAQ3B,KAAKU,SAAWiB,EAC9BC,QAAUxB,GAAUJ,KAAKG,kBAAkBC,KAE5CJ,KAAK6B,WACJV,EAAA,YAAUI,KAAMvB,KAAK6B,UAAWT,MAAO,aAAapB,KAAKwB,SAAW,YAAc,OAEnFxB,KAAK8B,WACJX,EAAA,QAAMC,MAAO,aAAapB,KAAKwB,SAAW,YAAc,MACrDxB,KAAK8B,WAIT9B,KAAK+B,gBACJZ,EAAA,QACEC,MAAO,qBAAqBpB,KAAKwB,SAAW,YAAc,MAEzDxB,KAAKC,cAAa,K"}
|
|
@@ -8,13 +8,18 @@ declare const _default: {
|
|
|
8
8
|
type: string;
|
|
9
9
|
size: string;
|
|
10
10
|
disabled: boolean;
|
|
11
|
-
icon: string;
|
|
12
11
|
iconPosition: string;
|
|
13
12
|
href: boolean;
|
|
14
13
|
url: string;
|
|
15
14
|
target: string;
|
|
16
15
|
};
|
|
17
16
|
argTypes: {
|
|
17
|
+
icon: {
|
|
18
|
+
options: any[];
|
|
19
|
+
control: {
|
|
20
|
+
type: string;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
18
23
|
variant: {
|
|
19
24
|
options: string[];
|
|
20
25
|
control: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@infineon/infineon-design-system-stencil",
|
|
3
|
-
"version": "20.19.
|
|
3
|
+
"version": "20.19.5",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Infineon design system Stencil web components",
|
|
6
6
|
"homepage": "https://github.com/Infineon/infineon-design-system-stencil#readme",
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as i,c as t,h as e}from"./p-acd1bd1f.js";const s='*{font-family:"Source Sans 3"}:host{display:inline-block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:3px;background:linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]:disabled{background:#BFBBBB;cursor:default}.ifx-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]::-webkit-slider-thumb:hover{box-shadow:0px 1px 4px rgba(0, 0, 0, 0.4);background:#08665C}.ifx-slider input[type=range]::-webkit-slider-thumb:active{box-shadow:0px 1px 6px rgba(0, 0, 0, 0.6);background:#06534B}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]::-moz-range-thumb:hover{box-shadow:0px 1px 4px rgba(0, 0, 0, 0.4);background:#08665C}.ifx-slider input[type=range]::-moz-range-thumb:active{box-shadow:0px 1px 6px rgba(0, 0, 0, 0.6);background:#06534B}';const a=class{constructor(e){i(this,e);this.ifxChange=t(this,"ifxChange",7);this.min=0;this.max=100;this.value=0;this.disabled=false;this.showPercentage=false;this.leftIcon=undefined;this.rightIcon=undefined;this.leftText=undefined;this.rightText=undefined;this.internalValue=0}valueChanged(i){this.internalValue=i;this.updateValuePercent()}handleInputChange(i){const t=i.target;this.internalValue=parseInt(t.value);this.ifxChange.emit(this.internalValue);this.updateValuePercent()}updateValuePercent(){if(this.inputRef){const i=(this.internalValue-this.min)/(this.max-this.min)*100;this.inputRef.style.setProperty("--value-percent",`${i}%`)}}componentWillLoad(){this.internalValue=this.value}componentDidLoad(){this.updateValuePercent()}render(){return e("div",{class:"ifx-slider"},this.leftText&&e("span",{class:`left-text`},this.leftText),this.leftIcon&&e("ifx-icon",{icon:this.leftIcon,class:`left-icon${this.disabled?" disabled":""}`}),e("input",{type:"range",min:this.min,max:this.max,disabled:this.disabled,value:this.internalValue,ref:i=>this.inputRef=i,onInput:i=>this.handleInputChange(i)}),this.rightIcon&&e("ifx-icon",{icon:this.rightIcon,class:`right-icon${this.disabled?" disabled":""}`}),this.rightText&&e("span",{class:`right-text${this.disabled?" disabled":""}`},this.rightText),this.showPercentage&&e("span",{class:`percentage-display${this.disabled?" disabled":""}`},this.value,"%"))}static get watchers(){return{value:["valueChanged"]}}};a.style=s;export{a as ifx_slider};
|
|
2
|
-
//# sourceMappingURL=p-7907e3bb.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["sliderCss","IfxSlider","valueChanged","newValue","this","internalValue","updateValuePercent","handleInputChange","event","target","parseInt","value","ifxChange","emit","inputRef","percent","min","max","style","setProperty","componentWillLoad","componentDidLoad","render","h","class","leftText","leftIcon","icon","disabled","type","ref","el","onInput","rightIcon","rightText","showPercentage"],"sources":["./src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","./src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n// ifx-slider.scss\n:host {\n display: inline-block;\n}\n\n.left-icon,\n.right-icon,\n.left-text,\n.right-text,\n.percentage-display {\n font-size: tokens.$ifxFontSizeS;\n color: tokens.$ifxColorEngineering500;\n margin-left: tokens.$ifxSpace100;\n\n &.disabled {\n // Add the disabled state for the percentage display\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n.left-icon,\n.left-text {\n margin-right: tokens.$ifxSpace100;\n}\n\n.right-icon,\n.right-text,\n.percentage-display {\n margin-left: tokens.$ifxSpace100;\n}\n\n.ifx-slider {\n display: flex;\n align-items: center;\n padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\n border-radius: tokens.$ifxBorderRadiusRound;\n\n input[type='range'] {\n -webkit-appearance: none;\n width: 100%;\n height: 3px;\n background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\n outline: none;\n cursor: pointer;\n transition: 0.2s;\n\n &:disabled {\n background: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n border-radius: 50%;\n background: tokens.$ifxColorOcean500;\n cursor: pointer;\n box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n\n &:hover {\n box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);\n background: tokens.$ifxColorOcean600;\n }\n\n &:active {\n box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.6);\n background: tokens.$ifxColorOcean700;\n }\n }\n\n &::-moz-range-thumb {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n border-radius: 50%;\n background: tokens.$ifxColorOcean500;\n cursor: pointer;\n box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n\n &:hover {\n box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);\n background: tokens.$ifxColorOcean600;\n }\n\n &:active {\n box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.6);\n background: tokens.$ifxColorOcean700;\n }\n }\n }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-slider',\n styleUrl: 'slider.scss',\n shadow: true,\n})\nexport class IfxSlider {\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop() value: number = 0;\n @Prop() disabled: boolean = false;\n @Prop() showPercentage: boolean = false;\n @Prop() leftIcon: string;\n @Prop() rightIcon: string;\n @Prop() leftText: string;\n @Prop() rightText: string;\n @State() internalValue: number = 0;\n @Event() ifxChange: EventEmitter<number>;\n\n private inputRef: HTMLInputElement;\n\n @Watch('value')\n valueChanged(newValue: number) {\n this.internalValue = newValue;\n this.updateValuePercent();\n }\n\n handleInputChange(event: Event) {\n const target = event.target as HTMLInputElement;\n this.internalValue = parseInt(target.value);\n this.ifxChange.emit(this.internalValue);\n this.updateValuePercent();\n }\n\n updateValuePercent() {\n if (this.inputRef) {\n const percent = ((this.internalValue - this.min) / (this.max - this.min)) * 100;\n this.inputRef.style.setProperty('--value-percent', `${percent}%`);\n }\n }\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n componentDidLoad() {\n this.updateValuePercent();\n }\n\n\n render() {\n return (\n <div class=\"ifx-slider\">\n {this.leftText && (\n <span class={`left-text`}>\n {this.leftText}\n </span>\n )}\n {this.leftIcon && (\n <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n )}\n\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n disabled={this.disabled}\n value={this.internalValue}\n ref={(el) => (this.inputRef = el as HTMLInputElement)}\n onInput={(event) => this.handleInputChange(event)}\n />\n {this.rightIcon && (\n <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n )}\n {this.rightText && (\n <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n {this.rightText}\n </span>\n )}\n\n {this.showPercentage && (\n <span\n class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n >\n {this.value}%\n </span>\n )}\n </div>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,inD,MCOLC,EAAS,M,uEACE,E,SACA,I,WACE,E,cACI,M,oBACM,M,qHAKD,C,CAMjCC,aAAaC,GACXC,KAAKC,cAAgBF,EACrBC,KAAKE,oB,CAGPC,kBAAkBC,GAChB,MAAMC,EAASD,EAAMC,OACrBL,KAAKC,cAAgBK,SAASD,EAAOE,OACrCP,KAAKQ,UAAUC,KAAKT,KAAKC,eACzBD,KAAKE,oB,CAGPA,qBACE,GAAIF,KAAKU,SAAU,CACjB,MAAMC,GAAYX,KAAKC,cAAgBD,KAAKY,MAAQZ,KAAKa,IAAMb,KAAKY,KAAQ,IAC5EZ,KAAKU,SAASI,MAAMC,YAAY,kBAAmB,GAAGJ,K,EAI1DK,oBACEhB,KAAKC,cAAgBD,KAAKO,K,CAG5BU,mBACEjB,KAAKE,oB,CAIPgB,SACE,OACEC,EAAA,OAAKC,MAAM,cACRpB,KAAKqB,UACJF,EAAA,QAAMC,MAAO,aACVpB,KAAKqB,UAGTrB,KAAKsB,UACJH,EAAA,YAAUI,KAAMvB,KAAKsB,SAAUF,MAAO,YAAYpB,KAAKwB,SAAW,YAAc,OAGlFL,EAAA,SACEM,KAAK,QACLb,IAAKZ,KAAKY,IACVC,IAAKb,KAAKa,IACVW,SAAUxB,KAAKwB,SACfjB,MAAOP,KAAKC,cACZyB,IAAMC,GAAQ3B,KAAKU,SAAWiB,EAC9BC,QAAUxB,GAAUJ,KAAKG,kBAAkBC,KAE5CJ,KAAK6B,WACJV,EAAA,YAAUI,KAAMvB,KAAK6B,UAAWT,MAAO,aAAapB,KAAKwB,SAAW,YAAc,OAEnFxB,KAAK8B,WACJX,EAAA,QAAMC,MAAO,aAAapB,KAAKwB,SAAW,YAAc,MACrDxB,KAAK8B,WAIT9B,KAAK+B,gBACJZ,EAAA,QACEC,MAAO,qBAAqBpB,KAAKwB,SAAW,YAAc,MAEzDxB,KAAKO,MAAK,K"}
|