@siemens/ix-docs 4.3.0 → 4.4.0

package/build/static/demo/v2/preview/html/assets/ix-slider.entry-CcX-eCG9.js

@@ -0,0 +1,236 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { b as a11yHostAttributes } from "./a11y-DAzBNVe7-CO1Uj69l.js";
+import { O as OnListener } from "./listener-DcAn-vyA-vMwX8dLP.js";
+import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
+import { H as HookValidationLifecycle } from "./validation-CTBekLDe-sG9H3Ujv.js";
+const sliderCss = () => `:host{display:flex;flex-direction:column;min-height:2rem;justify-content:center;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-slider-track-marker--background);--trace-color:var(--theme-slider-trace--background);--tick-color:var(--theme-slider-track-marker--background);--tick-color--active:var(--theme-slider-trace-marker--background);--track-color:var(--theme-slider-track--background)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input[type=range]{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1.5rem;margin:0}:host input[type=range].trace::before{content:"";position:absolute;display:block;z-index:-1;width:calc((var(--trace-end) - var(--trace-start)) * 100%);left:calc(var(--trace-start) * 100%);height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%);border-radius:clamp(0rem, (0.01 - var(--trace-start)) * 999rem, 0.125rem) clamp(0rem, (var(--trace-end) - 0.99) * 999rem, 0.125rem) clamp(0rem, (var(--trace-end) - 0.99) * 999rem, 0.125rem) clamp(0rem, (0.01 - var(--trace-start)) * 999rem, 0.125rem)}:host .slider-container{width:100%}:host .slider-container .slider{width:100%}:host .slider-container .slider input[type=range]{width:100%}:host input[type=range].trace:not(.hide-trace-reference)::after{content:"";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(100% * var(--trace-reference))}:host input[type=range]::-webkit-slider-runnable-track{background:transparent;height:0.25rem}:host input[type=range]::-moz-range-track{background:transparent;height:0.25rem}:host input[type=range i]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}:host input[type=range i]::-moz-range-thumb{border:none;border-radius:0}:host input[type=range]::-webkit-slider-thumb{border-radius:50%;background-color:var(--theme-slider-thumb--background);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]::-moz-range-thumb{border-radius:50%;background-color:var(--theme-slider-thumb--background);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]:hover::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:hover::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:active::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--active)}:host input[type=range]:active::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--active)}:host input[type=range]:focus{outline:none}:host input[type=range]:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host input[type=range]:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host{}:host .ticks{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none}:host .ticks circle.tick{--tick-size:6px;--tick-radius:calc(var(--tick-size) / 2);r:var(--tick-radius);fill:var(--tick-color);transform:translate(calc(var(--tick-value) * (100% - var(--thumb-size)) + var(--thumb-size) / 2), 50%)}:host .ticks .tick.tick-at-min{transform:translate(var(--tick-radius), 50%)}:host .ticks .tick.tick-at-max{transform:translate(calc(100% - var(--tick-radius)), 50%)}:host .ticks .tick.tick-active{fill:var(--tick-color--active)}:host .slider{position:relative;display:block;width:100%;height:1.5rem}:host .track{position:absolute;background-color:var(--track-color);height:4px;width:100%;top:50%;transform:translateY(-50%);left:0px;border-radius:2px}:host .thumb{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;top:50%;transform:translateY(-50%)}:host .hide-tooltip{display:none}:host .label{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;min-height:0px}:host(.error),:host(.invalid){--trace-color:var(--theme-slider-trace--background--invalid);--tick-color--active:var(--theme-slider-trace-marker--background--invalid)}:host(.error) input[type=range]::-webkit-slider-thumb,:host(.invalid) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.error) input[type=range]::-moz-range-thumb,:host(.invalid) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.error) input[type=range]:hover::-webkit-slider-thumb,:host(.invalid) input[type=range]:hover::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.error) input[type=range]:hover::-moz-range-thumb,:host(.invalid) input[type=range]:hover::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.error) input[type=range]:active::-webkit-slider-thumb,:host(.invalid) input[type=range]:active::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.error) input[type=range]:active::-moz-range-thumb,:host(.invalid) input[type=range]:active::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.disabled){pointer-events:none;--track-color:var(--theme-slider-track--background--disabled);--trace-color:var(--theme-slider-trace--background--disabled);--tick-color:var(--theme-slider-track-marker--background--disabled);--tick-color--active:var(--theme-slider-trace-marker--background--disabled)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--disabled)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--disabled)}:host(.warning){--trace-color:var(--theme-color-warning-40);--tick-color--active:var(--theme-color-warning)}:host(.warning) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-warning)}:host(.warning) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-warning)}:host(.info){--trace-color:var(--theme-color-info-40);--tick-color--active:var(--theme-color-info)}:host(.info) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-info)}:host(.info) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-info)}:host(.valid){--trace-color:var(--theme-color-success-40);--tick-color--active:var(--theme-color-success)}:host(.valid) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-success)}:host(.valid) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-success)}`;
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+function between(min, value, max) {
+  if (value < min) {
+    return min;
+  } else if (value > max) {
+    return max;
+  } else {
+    return value;
+  }
+}
+const Slider = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    if (hostRef.$hostElement$["s-ei"]) {
+      this.formInternals = hostRef.$hostElement$["s-ei"];
+    } else {
+      this.formInternals = hostRef.$hostElement$.attachInternals();
+      hostRef.$hostElement$["s-ei"] = this.formInternals;
+    }
+    this.showTextAsTooltip = false;
+    this.step = 1;
+    this.min = 0;
+    this.max = 100;
+    this.value = 0;
+    this.trace = false;
+    this.traceReference = 0;
+    this.disabled = false;
+    this.rangeInput = 0;
+    this.rangeMin = 0;
+    this.rangeMax = 100;
+    this.rangeTraceReference = 0;
+    this.showTooltip = false;
+    this.isInvalid = false;
+    this.isValid = false;
+    this.isInfo = false;
+    this.isWarning = false;
+    this.touched = false;
+    this.controlRef = makeRef();
+    this.thumbRef = makeRef();
+    this.tooltipRef = makeRef();
+  }
+  get hasLabels() {
+    return !!this.hostElement.querySelector('[slot="label-start"], [slot="label-end"]');
+  }
+  get tooltip() {
+    return this.tooltipRef.current;
+  }
+  get pseudoThumb() {
+    return this.thumbRef.current;
+  }
+  get slider() {
+    var _a;
+    return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById("slider");
+  }
+  onShowTooltipChange() {
+    var _a, _b;
+    if (this.showTooltip && this.pseudoThumb) {
+      (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.showTooltip(this.pseudoThumb);
+      return;
+    }
+    (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.hideTooltip();
+  }
+  onClassField({ isInvalid, isInfo, isValid, isWarning, isInvalidByRequired }) {
+    this.isInvalid = isInvalid || isInvalidByRequired;
+    this.isInfo = isInfo;
+    this.isValid = isValid;
+    this.isWarning = isWarning;
+  }
+  componentWillLoad() {
+    this.a11yAttributes = a11yHostAttributes(this.hostElement, [
+      "role",
+      "aria-valuemin",
+      "aria-valuemax",
+      "aria-valuenow"
+    ]);
+    this.updateRangeVariables();
+    this.setFormValueIfChanged(this.value);
+  }
+  updateRangeVariables() {
+    this.rangeInput = between(this.min, this.value, this.max);
+    this.rangeTraceReference = between(this.min, this.traceReference, this.max);
+    this.rangeMin = Math.min(this.min, this.max);
+    this.rangeMax = Math.max(this.min, this.max);
+    if (this.value !== void 0) {
+      this.setFormValueIfChanged(this.value);
+    }
+  }
+  updateFormInternalValue(value) {
+    this.setFormValueIfChanged(value);
+    this.valueChange.emit(value);
+  }
+  setFormValueIfChanged(value) {
+    const valueStr = value.toString();
+    if (this.lastFormValue !== valueStr) {
+      this.formInternals.setFormValue(valueStr);
+      this.lastFormValue = valueStr;
+    }
+  }
+  onInput(event) {
+    event.stopPropagation();
+    const value = parseFloat(this.slider.value);
+    if (!isNaN(value)) {
+      const oldValue = this.rangeInput;
+      this.rangeInput = value;
+      const { defaultPrevented } = this.emitInputEvent();
+      if (defaultPrevented) {
+        this.rangeInput = oldValue;
+        this.slider.value = oldValue.toString();
+      } else {
+        this.updateFormInternalValue(value);
+      }
+    }
+  }
+  emitInputEvent() {
+    return this.valueChange.emit(this.rangeInput);
+  }
+  isMarkerActive(markerValue) {
+    const start = Math.min(this.traceReference, this.rangeInput);
+    const end = Math.max(this.traceReference, this.rangeInput);
+    const value = markerValue;
+    return value >= start && value <= end;
+  }
+  // Listen globally on window because sometimes the event listener
+  // of the DOM element input itself is not called if the release
+  // click is not inside the element anymore
+  onPointerUp() {
+    this.showTooltip = false;
+  }
+  /** @internal */
+  hasValidValue() {
+    return Promise.resolve(true);
+  }
+  /** @internal */
+  isTouched() {
+    return Promise.resolve(this.touched);
+  }
+  render() {
+    var _a;
+    const range = this.rangeMax - this.rangeMin;
+    let traceReferenceInPercentage = (this.rangeTraceReference - this.rangeMin) / range;
+    let valueInPercentage = (this.rangeInput - this.rangeMin) / range;
+    const distance = valueInPercentage - traceReferenceInPercentage;
+    let traceStart = traceReferenceInPercentage;
+    let traceEnd = valueInPercentage;
+    if (distance <= 0) {
+      traceStart = valueInPercentage;
+      traceEnd = traceReferenceInPercentage;
+    }
+    return h(Host, { key: "6957b2bb68891be643d1a1271fd550f0ba398b2d", class: {
+      disabled: this.disabled,
+      error: !!this.error,
+      invalid: this.isInvalid,
+      info: this.isInfo,
+      valid: this.isValid,
+      warning: this.isWarning
+    }, onPointerDown: () => setTimeout(() => this.showTooltip = true) }, h("ix-field-wrapper", { key: "22d183907d87d7ee59d11606ffc58d6b0f51a52c", label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.controlRef }, h("div", { key: "a7076b2f4940e1c4d83b874eb06889027f3531b9", class: "slider-container" }, h("div", { key: "4d56ffb868ce60f3b7e47d803ec6ecffb493489d", class: "slider" }, h("div", { key: "ba33818b7f9ce81576136f9e95b5fe7ba88467e7", class: "track" }, h("div", { key: "b5ce5c8c334909d11875ab9ae2b36f719c1244a8", ref: this.thumbRef, class: "thumb", style: {
+      left: `calc(${valueInPercentage} * (100% - 1rem))`
+    } }), h("svg", { key: "292823e7581b335cb5e499eddb2ab71c79789c19", class: "ticks", xmlns: "http://www.w3.org/2000/svg" }, (_a = this.marker) === null || _a === void 0 ? void 0 : _a.filter((markerValue) => markerValue >= this.min && markerValue <= this.max).map((markerValue) => {
+      const markerPosition = (markerValue - this.rangeMin) / range;
+      return h("circle", { class: {
+        tick: true,
+        "tick-active": this.isMarkerActive(markerValue) && this.trace,
+        "tick-at-min": markerPosition === 0,
+        "tick-at-max": markerPosition === 1
+      }, cx: "0", cy: "0", style: {
+        "--tick-value": `${markerPosition}`
+      } });
+    }))), h("input", Object.assign({ key: "2e642f9cc0b3674b7e553b6e2b74d4f015ea4469", id: "slider", ref: this.controlRef, type: "range", list: this.marker ? "markers" : void 0, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), onFocus: () => {
+      this.showTooltip = true;
+      this.touched = true;
+    }, onBlur: () => {
+      this.showTooltip = false;
+    }, style: {
+      "--value": `${valueInPercentage}`,
+      "--trace-reference": `${traceReferenceInPercentage}`,
+      "--trace-start": `${traceStart}`,
+      "--trace-end": `${traceEnd}`
+    }, class: {
+      trace: this.trace && traceReferenceInPercentage !== valueInPercentage,
+      "hide-trace-reference": this.trace && (this.traceReference <= this.min || this.traceReference >= this.max)
+    }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), h("ix-tooltip", { key: "d3367c620a0865ef84daaefdc0102ba3a186215c", ref: this.tooltipRef, class: {
+      "hide-tooltip": !this.showTooltip
+    }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), this.hasLabels && h("div", { key: "e06b2afd4e3521cf34095a5243671b0d24b59695", class: "label" }, h("div", { key: "653916ebdc36874fb412b1481c13fe7a52eddccf" }, h("slot", { key: "0d73fd36d946b79bb84aa41a5b7973a4d986502c", name: "label-start" })), h("div", { key: "9b0938207951dceab28fa89238bc43d28b5e9e3b" }, h("slot", { key: "fb32e79050fb8aa5eb83cde26971b5cafad4f42f", name: "label-end" }))), this.error ? h("ix-typography", { textColor: "alarm" }, this.error) : null)));
+  }
+  static get formAssociated() {
+    return true;
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "showTooltip": [{
+        "onShowTooltipChange": 0
+      }],
+      "value": [{
+        "updateRangeVariables": 0
+      }],
+      "max": [{
+        "updateRangeVariables": 0
+      }],
+      "min": [{
+        "updateRangeVariables": 0
+      }],
+      "traceReference": [{
+        "updateRangeVariables": 0
+      }]
+    };
+  }
+};
+__decorate([
+  HookValidationLifecycle()
+], Slider.prototype, "onClassField", null);
+__decorate([
+  OnListener("pointerup", (self) => self.showTooltip)
+], Slider.prototype, "onPointerUp", null);
+Slider.style = sliderCss();
+export {
+  Slider as ix_slider
+};

package/build/static/demo/v2/preview/html/assets/ix-split-button.entry-CBEDxvHn.js

@@ -0,0 +1,44 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { I as iconContextMenu } from "./index-BBzEV-f4-ChQfUIyc.js";
+import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
+const splitButtonCss = () => `.btn-group ix-button:first-child .btn{border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:0px}.btn-group ix-button:last-child .btn{border-top-left-radius:0px;border-bottom-left-radius:0px}.btn-group ix-button:not(:first-child):not(:last-child) .btn{border-radius:0px;border-right:0px}:host{display:inline-block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .btn-group{position:relative;display:inline-flex;vertical-align:middle;width:100%}:host .btn-group>ix-button:nth-child(1),:host .btn-group>ix-icon-button:nth-child(1){width:calc(100% - 2rem);--ix-button-border-radius-right:0}:host .btn-group>ix-icon-button:nth-child(2){width:2rem;--ix-button-border-radius-left:0}:host .middle-gap{gap:0.125rem}:host .left-button-border{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}`;
+const SplitButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.buttonClick = createEvent(this, "buttonClick", 7);
+    this.variant = "primary";
+    this.closeBehavior = "both";
+    this.disabled = false;
+    this.disableButton = false;
+    this.disableDropdownButton = false;
+    this.placement = "bottom-start";
+    this.enableTopLayer = false;
+    this.toggle = false;
+    this.triggerElementRef = makeRef();
+  }
+  get isDisabledButton() {
+    return this.disabled || this.disableButton;
+  }
+  get isDisabledIcon() {
+    return this.disabled || this.disableDropdownButton;
+  }
+  render() {
+    var _a;
+    const hasOutline = this.variant.toLocaleLowerCase().includes("secondary");
+    const baseAttributes = {
+      variant: this.variant
+    };
+    const buttonAttributes = Object.assign(Object.assign({}, baseAttributes), { disabled: this.isDisabledButton, class: {
+      "left-button-border": !hasOutline
+    } });
+    const dropdownButtonAttributes = Object.assign(Object.assign({}, baseAttributes), { disabled: this.isDisabledIcon });
+    return h(Host, { key: "3c3430ad17d7f4bb877b57b21bfa8e7ec15196dc" }, h("div", { key: "cd36cc825c64a11619a0df7d1ead9eae0374bae8", class: { "btn-group": true, "middle-gap": !hasOutline } }, this.label ? h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }), this.label) : h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton })), h("ix-icon-button", Object.assign({ key: "1846ce902e479fc9b41e5d840f3f2e8d79d99f32" }, dropdownButtonAttributes, { ref: this.triggerElementRef, class: "anchor", icon: (_a = this.splitIcon) !== null && _a !== void 0 ? _a : iconContextMenu, "aria-label": this.ariaLabelSplitIconButton }))), h("ix-dropdown", { key: "f9a05a2ae981731cd71bf4735bf956d5e5092037", closeBehavior: this.closeBehavior, trigger: this.triggerElementRef.waitForCurrent(), enableTopLayer: this.enableTopLayer }, h("slot", { key: "fda03d1edd3588a156186a52be1a6ee911bb2c49" })));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+};
+SplitButton.style = splitButtonCss();
+export {
+  SplitButton as ix_split_button
+};