@siemens/ix 1.6.3 → 2.0.0-beta.1

package/dist/siemens-ix/p-feb8c2c4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["eventListCss","EventList","this","mutationObserver","createMutationObserver","onMutation","bind","componentDidLoad","animated","triggerFadeIn","itemHeight","height","convertToRemString","el","querySelectorAll","forEach","item","classList","add","setCustomHeight","observe","childList","subtree","mutationRecords","triggerFadeOut","then","filter","mutation","type","addedNodes","itemHtml","_a","contains","style","maxHeight","Promise","resolve","keyframes","opacity","easing","listElement","querySelector","animate","duration","fadeOutDuration","finished","listItems","e","i","delay","offset","fadeInDuration","options","iterations","render","h","Host","class","compact","chevron","eventListItemCss","EventListItem","handleItemClick","itemClick","emit","selected","disabled","color"],"sources":["./src/components/event-list/event-list.scss?tag=ix-event-list&encapsulation=scoped","./src/components/event-list/event-list.tsx","./src/components/event-list-item/event-list-item.scss?tag=ix-event-list-item","./src/components/event-list-item/event-list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n$item-height-l: 6.5rem;\n\n:host {\n  display: block;\n  position: relative;\n}\n\nul {\n  list-style: none;\n  padding: 0;\n  margin-bottom: 0;\n}\n\n:host:not(.item-size-s),\n:host:not(.item-size-l) {\n  ::slotted(& .ix-event-list-item) {\n    display: none;\n  }\n}\n\n:host.chevron ::slotted(* .ix-event-list-item) .chevron-icon {\n  display: initial;\n}\n\n.item-size-l {\n  ::slotted(* .ix-event-list-item) {\n    height: $item-height-l;\n    max-height: $item-height-l;\n\n    .event-content {\n      height: $item-height-l;\n      max-height: $item-height-l;\n      white-space: normal;\n    }\n  }\n}\n\n.compact {\n  ::slotted(* .ix-event-list-item) {\n    margin-bottom: 0px;\n    border-radius: 0px;\n\n    .indicator {\n      border-top-left-radius: 0px;\n      border-bottom-left-radius: 0px;\n    }\n\n    .event-list-item-container {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n  }\n\n  .compact:not(:last-child) {\n    .event-list-item-container {\n      border-bottom: none;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { convertToRemString } from '../utils/rwd.util';\n\n@Component({\n  tag: 'ix-event-list',\n  styleUrl: 'event-list.scss',\n  scoped: true,\n})\nexport class EventList {\n  private readonly mutationObserver = createMutationObserver(\n    this.onMutation.bind(this)\n  );\n\n  private static readonly fadeOutDuration = 50;\n  private static readonly fadeInDuration = 150;\n\n  @Element() el!: HTMLIxEventListElement;\n\n  /**\n   * Determines the height of list items.\n   * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\n   * In case a number is supplied it will get converted to rem internally.\n   * Defaults to 'S'.\n   */\n  @Prop() itemHeight: 'S' | 'L' | number = 'S';\n\n  /**\n   * Make event-list items more compact\n   */\n  @Prop() compact = false;\n\n  /**\n   * Animate state change transitions. Defaults to 'true'.\n   */\n  @Prop() animated = true;\n\n  /**\n   * Display a chevron icon in list items. Defaults to 'false'\n   */\n  @Prop() chevron: boolean;\n\n  componentDidLoad() {\n    if (this.animated) {\n      this.triggerFadeIn();\n    }\n\n    if (typeof this.itemHeight === 'number') {\n      const height = convertToRemString(this.itemHeight);\n      this.el.querySelectorAll('.ix-event-list-item').forEach((item) => {\n        item.classList.add('d-flex');\n        this.setCustomHeight(item as HTMLElement, height);\n      });\n    }\n\n    this.mutationObserver.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private onMutation(mutationRecords: Array<MutationRecord>) {\n    this.triggerFadeOut().then(() => {\n      if (typeof this.itemHeight === 'number') {\n        const height = convertToRemString(this.itemHeight);\n\n        mutationRecords\n          .filter((mutation) => mutation.type === 'childList')\n          .forEach((mutation) =>\n            mutation.addedNodes.forEach((item) => {\n              const itemHtml = item as HTMLElement;\n              if (!itemHtml.classList?.contains('ix-event-list-item')) {\n                return;\n              }\n\n              itemHtml.classList.add('d-flex');\n              this.setCustomHeight(itemHtml, height);\n            })\n          );\n      }\n\n      this.triggerFadeIn();\n    });\n  }\n\n  private setCustomHeight(item: HTMLElement, height: string) {\n    item.style.height = height;\n    item.style.maxHeight = height;\n  }\n\n  private triggerFadeOut(): Promise<any> {\n    if (!this.animated) {\n      return Promise.resolve();\n    }\n\n    const keyframes = [\n      {\n        opacity: 1,\n        easing: 'ease-in',\n      },\n      { opacity: 0 },\n    ];\n    const listElement = this.el.querySelector('ul');\n    return listElement.animate(keyframes, {\n      duration: EventList.fadeOutDuration,\n    }).finished;\n  }\n\n  private triggerFadeIn() {\n    if (!this.animated) {\n      return;\n    }\n\n    const listItems = this.el.querySelectorAll('.ix-event-list-item');\n    listItems.forEach((e, i) => {\n      const delay = i * 80;\n      const offset = delay / (delay + EventList.fadeInDuration);\n      const keyframes = [\n        { opacity: 0 },\n        { opacity: 0, easing: 'ease-out', offset },\n        { opacity: 1 },\n      ];\n      const options = {\n        duration: EventList.fadeInDuration + delay,\n        iterations: 1,\n      };\n      e.animate(keyframes, options);\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'item-size-s': this.itemHeight === 'S',\n          'item-size-l': this.itemHeight === 'L',\n          compact: this.compact,\n          chevron: this.chevron,\n        }}\n      >\n        <ul>\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'common-variables';\n\n$height-single-line: 2.5rem;\n\n.ix-event-list-item {\n  display: flex;\n  align-items: center;\n  position: relative;\n  height: $height-single-line;\n  max-height: $height-single-line;\n  border-radius: $default-border-radius;\n  background-color: var(--theme-event-item--background);\n  overflow: hidden;\n  transition: $default-time;\n  cursor: pointer;\n\n  .indicator {\n    height: 100%;\n    width: $small-space;\n    max-width: $small-space;\n    min-width: $small-space;\n    border-top-left-radius: $default-border-radius;\n    border-bottom-left-radius: $default-border-radius;\n  }\n\n  .indicator-empty {\n    border: var(--theme-weak-bdr-1);\n    border-right: none;\n  }\n\n  .event-list-item-container {\n    @include ellipsis;\n\n    display: flex;\n    flex-grow: 1;\n    width: calc(100% - (#{$default-space} + #{$small-space}));\n    height: 100%;\n    border: 0.062rem solid;\n    border-color: var(--theme-event-item--border);\n    border-top-left-radius: 0;\n    border-top-right-radius: $default-border-radius;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: $default-border-radius;\n    border-left: none;\n    padding-left: $default-space;\n  }\n\n  &:not(.selected) {\n    @include hover {\n      background-color: var(--theme-event-item--background--hover);\n    }\n\n    @include active {\n      background-color: var(--theme-event-item--background--active);\n    }\n\n    .event-list-item-container {\n      @include hover {\n        border-color: var(--theme-event-item--border--hover);\n      }\n\n      @include active {\n        border-color: var(--theme-event-item--border--active);\n      }\n    }\n  }\n\n  &.selected {\n    .event-list-item-container {\n      background-color: var(--theme-event-item--background--selected);\n      border-color: var(--theme-event-item--border--selected);\n    }\n  }\n\n  &[disabled],\n  &.disabled {\n    pointer-events: none;\n\n    .event-list-item-container {\n      background-color: var(--theme-event-item--background--disabled);\n      border-color: var(--theme-event-item--border--disabled);\n    }\n  }\n\n  .chevron-icon {\n    margin-left: auto;\n    margin-right: $small-space;\n    opacity: 0.6;\n    align-self: center;\n  }\n\n  .event-content {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n  }\n\n  margin-bottom: $small-space;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  scoped: false,\n})\nexport class EventListItem {\n  @Element() el!: HTMLIxEventListItemElement;\n\n  /**\n   * Color of the status indicator.\n   * Allowed values are all Core UI color names.\n   */\n  @Prop() color: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron: boolean;\n\n  /**\n   * Opacity of the status indicator.\n   * Defaults to 1.0\n   *\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() opacity = 1;\n\n  /**\n   * Event list item click\n   */\n  @Event() itemClick: EventEmitter;\n\n  @Listen('click', { passive: true })\n  handleItemClick() {\n    this.itemClick.emit();\n  }\n\n  render() {\n    return (\n      <div\n        class={{\n          'ix-event-list-item': true,\n          selected: this.selected,\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class={`indicator ${!this.color ? 'indicator-empty' : ''}`}\n          style={{\n            'background-color': this.color\n              ? `var(--theme-${this.color})`\n              : 'inherit',\n            opacity: `${this.disabled ? 0.4 : this.opacity}`,\n          }}\n        ></div>\n\n        <div class=\"event-list-item-container\">\n          <div class=\"event-content\">\n            <slot></slot>\n          </div>\n          {this.chevron ? (\n            <i class=\"glyph glyph-16 glyph-chevron-right chevron-icon\"></i>\n          ) : (\n            ''\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAAe,+kC,MCkBRC,EAAS,M,yBACHC,KAAAC,iBAAmBC,EAClCF,KAAKG,WAAWC,KAAKJ,O,gBAckB,I,aAKvB,M,cAKC,K,uBAOnBK,mBACE,GAAIL,KAAKM,SAAU,CACjBN,KAAKO,e,CAGP,UAAWP,KAAKQ,aAAe,SAAU,CACvC,MAAMC,EAASC,EAAmBV,KAAKQ,YACvCR,KAAKW,GAAGC,iBAAiB,uBAAuBC,SAASC,IACvDA,EAAKC,UAAUC,IAAI,UACnBhB,KAAKiB,gBAAgBH,EAAqBL,EAAO,G,CAIrDT,KAAKC,iBAAiBiB,QAAQlB,KAAKW,GAAI,CAAEQ,UAAW,KAAMC,QAAS,M,CAG7DjB,WAAWkB,GACjBrB,KAAKsB,iBAAiBC,MAAK,KACzB,UAAWvB,KAAKQ,aAAe,SAAU,CACvC,MAAMC,EAASC,EAAmBV,KAAKQ,YAEvCa,EACGG,QAAQC,GAAaA,EAASC,OAAS,cACvCb,SAASY,GACRA,EAASE,WAAWd,SAASC,I,MAC3B,MAAMc,EAAWd,EACjB,MAAKe,EAAAD,EAASb,aAAS,MAAAc,SAAA,SAAAA,EAAEC,SAAS,uBAAuB,CACvD,M,CAGFF,EAASb,UAAUC,IAAI,UACvBhB,KAAKiB,gBAAgBW,EAAUnB,EAAO,K,CAK9CT,KAAKO,eAAe,G,CAIhBU,gBAAgBH,EAAmBL,GACzCK,EAAKiB,MAAMtB,OAASA,EACpBK,EAAKiB,MAAMC,UAAYvB,C,CAGjBa,iBACN,IAAKtB,KAAKM,SAAU,CAClB,OAAO2B,QAAQC,S,CAGjB,MAAMC,EAAY,CAChB,CACEC,QAAS,EACTC,OAAQ,WAEV,CAAED,QAAS,IAEb,MAAME,EAActC,KAAKW,GAAG4B,cAAc,MAC1C,OAAOD,EAAYE,QAAQL,EAAW,CACpCM,SAAU1C,EAAU2C,kBACnBC,Q,CAGGpC,gBACN,IAAKP,KAAKM,SAAU,CAClB,M,CAGF,MAAMsC,EAAY5C,KAAKW,GAAGC,iBAAiB,uBAC3CgC,EAAU/B,SAAQ,CAACgC,EAAGC,KACpB,MAAMC,EAAQD,EAAI,GAClB,MAAME,EAASD,GAASA,EAAQhD,EAAUkD,gBAC1C,MAAMd,EAAY,CAChB,CAAEC,QAAS,GACX,CAAEA,QAAS,EAAGC,OAAQ,WAAYW,UAClC,CAAEZ,QAAS,IAEb,MAAMc,EAAU,CACdT,SAAU1C,EAAUkD,eAAiBF,EACrCI,WAAY,GAEdN,EAAEL,QAAQL,EAAWe,EAAQ,G,CAIjCE,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,cAAevD,KAAKQ,aAAe,IACnC,cAAeR,KAAKQ,aAAe,IACnCgD,QAASxD,KAAKwD,QACdC,QAASzD,KAAKyD,UAGhBJ,EAAA,UACEA,EAAA,c,2BA5HgBtD,EAAA2C,gBAAkB,GAClB3C,EAAAkD,eAAiB,I,UCxB3C,MAAMS,EAAmB,w9E,MCwBZC,EAAa,M,uKA8BN,C,CAQlBC,kBACE5D,KAAK6D,UAAUC,M,CAGjBV,SACE,OACEC,EAAA,OACEE,MAAO,CACL,qBAAsB,KACtBQ,SAAU/D,KAAK+D,SACfC,SAAUhE,KAAKgE,WAGjBX,EAAA,OACEE,MAAO,cAAcvD,KAAKiE,MAAQ,kBAAoB,KACtDlC,MAAO,CACL,mBAAoB/B,KAAKiE,MACrB,eAAejE,KAAKiE,SACpB,UACJ7B,QAAS,GAAGpC,KAAKgE,SAAW,GAAMhE,KAAKoC,aAI3CiB,EAAA,OAAKE,MAAM,6BACTF,EAAA,OAAKE,MAAM,iBACTF,EAAA,cAEDrD,KAAKyD,QACJJ,EAAA,KAAGE,MAAM,oDAAsD,I"}

package/dist/types/components/animated-tab/animated-tab.d.ts

@@ -1,11 +0,0 @@
-export declare class AnimatedTab {
-  /**
-   * Icon of the tab
-   */
-  icon: string;
-  /**
-   * Show notification number
-   */
-  count: number;
-  render(): any;
-}

package/dist/types/components/animated-tabs/animated-tabs.d.ts

@@ -1,44 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export declare class AnimatedTabs {
-  hostElement: HTMLIxAnimatedTabsElement;
-  tabs: HTMLIxAnimatedTabElement[];
-  activeIndex: number;
-  /**
-   * @internal For debugging purposes only
-   */
-  disableAnimations: boolean;
-  /**
-   * Current selected tab index
-   */
-  selectedIndex: number;
-  /**
-   * Placement of the tabs
-   */
-  tabPlacement: 'top' | 'bottom';
-  /**
-   * Tab navigated
-   */
-  tabClick: EventEmitter;
-  private easing;
-  private firstRender;
-  private observer;
-  onTabSelectionChange(newSelectionIndex: number, oldSelectionIndex: number): void;
-  onMouseDown(): void;
-  get animatedTabs(): HTMLIxAnimatedTabElement[];
-  get tabsContainer(): Element;
-  get contentContainer(): Element;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  private disconnectCallback;
-  private isSelected;
-  private showTab;
-  private hideTab;
-  private slideOutLeft;
-  private slideOutRight;
-  private slideInLeft;
-  private slideInRight;
-  private updateTabAnimation;
-  private onTabClick;
-  private onTabMouseDown;
-  render(): any;
-}

package/dist/types/components/counter-pill/counter-pill.d.ts

@@ -1,24 +0,0 @@
-export declare class CounterPill {
-  el: HTMLIxCounterPillElement;
-  /**
-   * Pill variant
-   */
-  variant: 'primary' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success' | 'custom';
-  /**
-   * Show pill as outline
-   */
-  outline: boolean;
-  /**
-   * Custom color for pill. Only working for `variant='custom'`
-   */
-  background: string | undefined;
-  /**
-   * Custom font color for pill. Only working for `variant='custom'`
-   */
-  color: string | undefined;
-  /**
-   * Align pill content left
-   */
-  alignLeft: boolean;
-  render(): any;
-}

package/dist/types/components/dropdown/alignment.d.ts

@@ -1,2 +0,0 @@
-import { Placement } from './placement';
-export declare function getAlignment(placement: Placement): "start" | "end";

package/dist/types/components/group-dropdown-item/group-dropdown-item.d.ts

@@ -1,11 +0,0 @@
-export declare class GroupDropdownItem {
-  /**
-   * Group dropdown label
-   */
-  label: string;
-  /**
-   * Group dropdown icon
-   */
-  icon: string;
-  render(): any;
-}

package/dist/types/components/index-button/index-button.d.ts

@@ -1,16 +0,0 @@
-import { ButtonVariant } from '../button/button';
-export type IndexButtonVariant = ButtonVariant;
-/**
- * @internal
- */
-export declare class IxIndexButton {
-  /**
-   * Button variant
-   */
-  variant: IndexButtonVariant;
-  /**
-   * Selection state
-   */
-  selected: boolean;
-  render(): any;
-}

package/dist/types/components/modal/modal-utils.d.ts

@@ -1,29 +0,0 @@
-import { NotificationColor } from '../utils/notification-color';
-import { TypedEvent } from '../utils/typed-event';
-export interface ModalConfig<TReason = any> {
-  animation?: boolean;
-  ariaDescribedBy?: string;
-  ariaLabelledBy?: string;
-  backdrop?: boolean | 'static';
-  backdropClass?: string;
-  beforeDismiss?: (reason?: TReason) => boolean | Promise<boolean>;
-  centered?: boolean;
-  container?: string | HTMLElement;
-  content: string | HTMLElement;
-  keyboard?: boolean;
-  modalDialogClass?: string;
-  scrollable?: boolean;
-  size?: 'sm' | 'lg' | 'xl';
-  title: string;
-  windowClass?: string;
-  icon?: string;
-  iconColor?: NotificationColor;
-}
-export interface ModalInstance<TReason = any> {
-  htmlElement: HTMLIxModalElement;
-  onClose: TypedEvent<TReason>;
-  onDismiss: TypedEvent<TReason>;
-}
-export declare function modal<T = any>(config: ModalConfig<T>): Promise<ModalInstance<T>>;
-export declare function closeModal<TClose = any>(element: Element, closeResult: TClose): void;
-export declare function dismissModal(element: Element, dismissResult?: any): void;

package/dist/types/components/modal-container/modal-container.d.ts

@@ -1,12 +0,0 @@
-import { ModalConfig, ModalInstance } from '../modal/modal-utils';
-export declare class ModalContainer {
-  hostElement: HTMLIxModalContainerElement;
-  get modalStack(): Element;
-  /**
-   * Display modal dialog
-   *
-   * @param config
-   */
-  showModal<T = any>(config: ModalConfig<T>): Promise<ModalInstance<T>>;
-  render(): any;
-}

package/dist/types/components/utils/screen/context.d.ts

@@ -1,4 +0,0 @@
-export declare function isBasicNavigationLayout(element: HTMLElement): element is HTMLIxBasicNavigationElement;
-export declare const hostContext: (selector: string, element: HTMLElement) => HTMLIxBasicNavigationElement | HTMLIxMapNavigationElement;
-export declare const isHostedBy: (selector: string, element: HTMLElement) => boolean;
-export declare const getHostApplicationLayout: (element: HTMLElement) => HTMLIxBasicNavigationElement | HTMLIxMapNavigationElement;

package/dist/types/components/utils/screen/index.d.ts

@@ -1 +0,0 @@
-export { screenMode } from './service';

package/dist/types/components/utils/screen/mode.d.ts

@@ -1,10 +0,0 @@
-export type Mode = 'desktop' | 'mobile';
-export type MediaQueryListener = {
-  matchMedia: MediaQueryList;
-  dispose: () => void;
-};
-export declare const createMediaQueryListener: (query: string, callback: (event: MediaQueryListEvent) => void) => MediaQueryListener;
-export declare const createModeListener: (modeChangeCallback: (mode: Mode) => void) => {
-  dispose: () => void;
-  matchMedia: MediaQueryList;
-};

package/dist/types/components/utils/screen/service.d.ts

@@ -1,10 +0,0 @@
-import { TypedEvent } from '../typed-event';
-import { Mode } from './mode';
-declare class ScreenMode {
-  #private;
-  constructor();
-  get mode(): Mode;
-  get onChange(): TypedEvent<Mode>;
-}
-export declare const screenMode: ScreenMode;
-export {};

package/scss/_fonts.scss

@@ -1,70 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2023 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-@import './mixins/fonts';
-
-.text-xs {
-  @include text-xs;
-}
-
-.text-s {
-  @include text-s;
-}
-
-.text-caption {
-  @include text-caption;
-}
-
-.text-caption-single {
-  @include text-caption-single;
-}
-
-.text-default {
-  @include text-default;
-}
-
-.text-default-single {
-  @include text-default-single;
-}
-
-.text-default-title {
-  @include text-default-title;
-}
-
-.text-default-title-single {
-  @include text-default-title-single;
-}
-
-.text-l {
-  @include text-l;
-}
-
-.text-l-single {
-  @include text-l-single;
-}
-
-.text-l-title {
-  @include text-l-title;
-}
-
-.text-l-title-single {
-  @include text-l-title-single;
-}
-
-.text-h2 {
-  @include text-h2;
-}
-
-.text-xl {
-  @include text-xl;
-}
-
-a {
-  color: var(--theme-color-primary);
-}

package/scss/components/_buttons.scss

@@ -1,175 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2023 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-@import './mixins/hover';
-@import './mixins/text-truncation';
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: $x-large-space;
-  font-size: $font-size-default;
-  font-weight: $font-weight-bold;
-  transition: $default-time;
-  padding: 0 $small-space;
-  min-width: 5rem;
-  gap: $tiny-space;
-
-  @include ellipsis;
-
-  .glyph {
-    margin-right: $tiny-space;
-    font-weight: $font-weight-normal;
-  }
-
-  &:focus-visible,
-  &.focus {
-    box-shadow: none;
-  }
-}
-
-$button-categories: (primary, secondary);
-
-@mixin btn($name, $enable-border: true) {
-  .btn-#{$name} {
-    border-radius: var(--theme-btn--border-radius);
-
-    @if $enable-border == false {
-      --bs-btn-border-width: 0px;
-      --bs-btn-active-border-color: none;
-    }
-
-    &,
-    &.focus,
-    &:focus-visible {
-      background-color: var(--theme-btn-#{$name}--background);
-      color: var(--theme-btn-#{$name}--color);
-
-      @if $enable-border {
-        border-width: var(--theme-btn--border-thickness);
-        border-color: var(--theme-btn-#{$name}--border-color);
-        border-style: solid;
-      } @else {
-        border-color: transparent;
-      }
-    }
-
-    @include focus-visible {
-      outline: 1px solid var(--theme-color-focus-bdr);
-      outline-offset: var(--theme-btn--focus--outline-offset);
-    }
-
-    &.selected {
-      background-color: var(--theme-btn-#{$name}--background--selected);
-    }
-
-    &.hover,
-    &:hover {
-      @if $enable-border {
-        border-color: var(--theme-btn-#{$name}--border-color--hover) !important;
-      }
-
-      background-color: var(--theme-btn-#{$name}--background--hover) !important;
-      color: var(--theme-btn-#{$name}--color--hover) !important;
-    }
-
-    &.selected {
-      &.hover,
-      &:hover {
-        background-color: var(--theme-btn-#{$name}--background--selected-hover);
-        color: var(--theme-btn-#{$name}--color--selected-hover);
-      }
-    }
-
-    &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled).active,
-    .show > &.dropdown-toggle {
-      @if $enable-border {
-        border-color: var(
-          --theme-btn-#{$name}--border-color--active
-        ) !important;
-      }
-
-      background-color: var(
-        --theme-btn-#{$name}--background--active
-      ) !important;
-      color: var(--theme-btn-#{$name}--color--active) !important;
-    }
-
-    &.selected {
-      &:not(:disabled):not(.disabled):active,
-      &:not(:disabled):not(.disabled).active,
-      .show > &.dropdown-toggle {
-        background-color: var(
-          --theme-btn-#{$name}--background--selected-active
-        );
-        color: var(--theme-btn-#{$name}--color--selected-active);
-      }
-    }
-
-    &.disabled,
-    &:disabled {
-      pointer-events: none;
-      cursor: initial;
-
-      @if $enable-border {
-        border-color: var(--theme-btn-#{$name}--border-color--disabled);
-      }
-
-      background-color: var(--theme-btn-#{$name}--background--disabled);
-      color: var(--theme-btn-#{$name}--color--disabled);
-      opacity: 1;
-    }
-  }
-}
-
-@each $category in $button-categories {
-  @include btn($category);
-  @include btn('outline-#{$category}');
-  @include btn('invisible-#{$category}', false);
-}
-
-.btn-oval,
-.btn-icon {
-  min-width: $x-large-space;
-  width: $x-large-space;
-
-  .glyph {
-    margin-right: 0;
-  }
-}
-
-.btn-oval {
-  border-radius: 6.25rem;
-  width: $default-control-height;
-}
-
-.btn-icon-xs,
-.btn-icon-12 {
-  height: $default-space;
-  width: $default-space;
-  min-width: $default-space;
-  min-height: $default-space;
-}
-
-.btn-icon-s,
-.btn-icon-16 {
-  height: $large-space;
-  width: $large-space;
-  min-width: $large-space;
-  min-height: $large-space;
-}
-
-.btn-icon-32 {
-  height: $x-large-space;
-  width: $x-large-space;
-  min-width: $x-large-space;
-  min-height: $x-large-space;
-}

package/scss/components/_dropdown.scss

@@ -1,169 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2023 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-@import '../mixins/hover';
-
-.dropdown-group {
-  margin: 0.687rem;
-  display: block;
-  position: relative;
-  width: 21.562rem;
-  border-radius: 0.25rem;
-  background-color: #f8f9fa;
-  border: solid 0.062rem rgba(0, 0, 0, 0.25);
-
-  .dropdown-group-title {
-    display: block;
-    position: relative;
-    font-size: 0.875rem;
-    text-align: left;
-    margin: 0.937rem 0 1.25rem 0.937rem;
-  }
-
-  .dropdown-group-content {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    overflow-x: hidden;
-    height: 11.562rem;
-    margin: 0.937rem 0 0.937rem 0.937rem;
-
-    > * {
-      margin-bottom: 1rem;
-    }
-  }
-}
-
-.dropdown-group-submit {
-  display: flex;
-  justify-content: space-between;
-  margin: 0 0.687rem 0 0.687rem;
-}
-
-.dropdown-menu {
-  position: absolute;
-
-  background-color: var(--theme-menu--background);
-  @include text-default-single;
-  border: var(--theme-menu--border-thickness) solid
-    var(--theme-menu--border--color);
-  border-radius: var(--theme-menu--border-radius);
-  max-width: 100vw;
-  padding: $tiny-space 0;
-  transition: background-color $default-time;
-  box-shadow: var(--theme-menu--box-shadow);
-
-  &.xl > .dropdown-item {
-    height: 2.5rem;
-    line-height: 2.187rem;
-  }
-}
-
-.dropdown-header {
-  display: flex;
-  align-items: center;
-  height: $large-control-height;
-  color: var(--theme-menu-header--color);
-  padding: 0 $default-space;
-}
-
-.dropdown-buttons {
-  display: flex;
-  padding: $tiny-space $small-space;
-
-  ix-icon-button + ix-icon-button {
-    margin-inline-start: $small-space;
-  }
-}
-
-.dropdown-item {
-  display: flex;
-  height: 2.5rem;
-  position: relative;
-  align-items: center;
-  cursor: pointer;
-  padding: 0 $x-large-space;
-  border: 1px solid transparent;
-  color: var(--theme-menu-item--color);
-
-  &:focus-visible {
-    background-color: var(--theme-menu-item--background);
-    color: var(--theme-menu-item--color);
-  }
-
-  &:focus-visible {
-    outline: none;
-    background-color: var(--theme-menu-item--background);
-    border-color: #119fff;
-    color: var(--theme-menu-item--color--focus);
-  }
-
-  @include hover {
-    color: var(--theme-menu-item--color--hover);
-    background-color: var(--theme-menu-item--background--hover);
-  }
-
-  @include active {
-    color: var(--theme-menu-item--color--active);
-    background-color: var(--theme-menu-item--background--active);
-  }
-
-  &.disabled,
-  &:disabled {
-    color: var(--theme-menu-item--color--disabled);
-    background-color: var(--theme-menu-item--background--disabled);
-  }
-
-  > a,
-  a:hover,
-  a:active {
-    color: var(--theme-color-std-text);
-  }
-
-  > .glyph {
-    color: var(--theme-menu-item-icon--color);
-
-    &.disabled {
-      color: var(--color-weak-text);
-    }
-
-    &.glyph-single-check {
-      color: var(--theme-menu-item-icon-check--color);
-    }
-
-    margin-inline-end: $small-space;
-  }
-}
-
-.dropdown-item {
-  > input[type='checkbox'] + label {
-    margin-bottom: 0px;
-
-    &::before {
-      margin-right: 1rem;
-    }
-  }
-}
-
-.dropdown-divider {
-  border-top: 1px solid var(--theme-menu-separator--background);
-  margin: $tiny-space 0;
-}
-
-button.dropdown-toggle {
-  position: relative;
-  padding-right: 1.5rem;
-}
-
-button.dropdown-toggle::after {
-  position: absolute;
-  top: 45%;
-  right: 0.5rem;
-}