@siemens/ix 2.0.0-beta.0 → 2.0.0

package/dist/collection/components/breadcrumb-item/breadcrumb-item.js

@@ -6,17 +6,60 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h, Host } from '@stencil/core';
+import { Fragment, h, Host, } from '@stencil/core';
+import animejs from 'animejs';
+import { BaseButton } from '../button/base-button';
+import { a11yHostAttributes } from '../utils/a11y';
 export class BreadcrumbItem {
   constructor() {
     this.label = undefined;
     this.icon = undefined;
+    this.ghost = true;
+    this.visible = true;
+    this.showChevron = true;
+    this.isDropdownTrigger = false;
+  }
+  componentDidLoad() {
+    this.animationFadeIn();
+  }
+  animationFadeIn() {
+    animejs({
+      targets: this.hostElement,
+      duration: 150,
+      opacity: [0, 1],
+      translateX: ['-100%', '0%'],
+      easing: 'linear',
+    });
   }
   render() {
-    return (h(Host, null, h("slot", null)));
+    const a11y = a11yHostAttributes(this.hostElement);
+    const props = {
+      variant: this.ghost ? 'primary' : 'secondary',
+      outline: false,
+      ghost: this.ghost,
+      iconOnly: false,
+      iconOval: false,
+      disabled: false,
+      icon: this.icon,
+      iconSize: '16',
+      loading: false,
+      selected: false,
+      type: 'button',
+      tabIndex: this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,
+      extraClasses: {
+        'dropdown-trigger': this.isDropdownTrigger,
+      },
+      ariaAttributes: a11y,
+    };
+    if (!this.visible) {
+      return h(Host, { class: 'invisible' });
+    }
+    return (h(Host, { class: {
+        'hide-chevron': !this.showChevron,
+      }, onClick: () => this.itemClick.emit(this.label) }, h("li", null, h(BaseButton, Object.assign({}, props, { afterContent: h(Fragment, null, this.showChevron ? (h("ix-icon", { name: 'chevron-right-small', size: "16", class: 'chevron' })) : null) }), this.label, h("slot", null)))));
   }
   static get is() { return "ix-breadcrumb-item"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["breadcrumb-item.scss"]
@@ -62,8 +105,114 @@ export class BreadcrumbItem {
         },
         "attribute": "icon",
         "reflect": false
+      },
+      "ghost": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "ghost",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "visible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "visible",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "showChevron": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "show-chevron",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "isDropdownTrigger": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "is-dropdown-trigger",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "itemClick",
+        "name": "itemClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
 }
 //# sourceMappingURL=breadcrumb-item.js.map

package/dist/collection/components/breadcrumb-item/breadcrumb-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb-item/breadcrumb-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,cAAc;;;;;EAWzB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  scoped: true,\n})\nexport class BreadcrumbItem {\n  /**\n   * Breadcrumb label\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon to be displayed next ot the label\n   */\n  @Prop() icon: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb-item/breadcrumb-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,UAAU,EAAmB,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAcnD,MAAM,OAAO,cAAc;;;;iBAcA,IAAI;mBAGX,IAAI;uBAGA,IAAI;6BAGE,KAAK;;EAKjC,gBAAgB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;EACzB,CAAC;EAED,eAAe;IACb,OAAO,CAAC;MACN,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,GAAG;MACb,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;MAC3B,MAAM,EAAE,QAAQ;KACjB,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,MAAM,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,KAAK,GAAoB;MAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW;MAC7C,OAAO,EAAE,KAAK;MACd,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI;MACd,OAAO,EAAE,KAAK;MACd,QAAQ,EAAE,KAAK;MACf,IAAI,EAAE,QAAQ;MACd,QAAQ,EACN,IAAI,CAAC,WAAW,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;MAClE,YAAY,EAAE;QACZ,kBAAkB,EAAE,IAAI,CAAC,iBAAiB;OAC3C;MACD,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACjB,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,WAAW,GAAS,CAAC;KAC1C;IAED,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,cAAc,EAAE,CAAC,IAAI,CAAC,WAAW;OAClC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;MAE9C;QACE,EAAC,UAAU,oBACL,KAAK,IACT,YAAY,EACV,EAAC,QAAQ,QACN,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,eACE,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,SAAS,GACP,CACZ,CAAC,CAAC,CAAC,IAAI,CACC;UAGZ,IAAI,CAAC,KAAK;UACX,eAAa,CACF,CACV,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport animejs from 'animejs';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yHostAttributes } from '../utils/a11y';\n\nexport type BreadcrumbItemLinkTarget =\n  | '_self'\n  | '_blank'\n  | '_parent'\n  | '_top'\n  | string;\n\n@Component({\n  tag: 'ix-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BreadcrumbItem {\n  @Element() hostElement!: HTMLIxBreadcrumbItemElement;\n\n  /**\n   * Breadcrumb label\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon to be displayed next ot the label\n   */\n  @Prop() icon: string;\n\n  /**@internal */\n  @Prop() ghost: boolean = true;\n\n  /**@internal */\n  @Prop() visible = true;\n\n  /**@internal */\n  @Prop() showChevron = true;\n\n  /** @internal */\n  @Prop() isDropdownTrigger = false;\n\n  /**@internal */\n  @Event() itemClick: EventEmitter<string>;\n\n  componentDidLoad() {\n    this.animationFadeIn();\n  }\n\n  animationFadeIn() {\n    animejs({\n      targets: this.hostElement,\n      duration: 150,\n      opacity: [0, 1],\n      translateX: ['-100%', '0%'],\n      easing: 'linear',\n    });\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    const props: BaseButtonProps = {\n      variant: this.ghost ? 'primary' : 'secondary',\n      outline: false,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      disabled: false,\n      icon: this.icon,\n      iconSize: '16',\n      loading: false,\n      selected: false,\n      type: 'button',\n      tabIndex:\n        this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,\n      extraClasses: {\n        'dropdown-trigger': this.isDropdownTrigger,\n      },\n      ariaAttributes: a11y,\n    };\n\n    if (!this.visible) {\n      return <Host class={'invisible'}></Host>;\n    }\n\n    return (\n      <Host\n        class={{\n          'hide-chevron': !this.showChevron,\n        }}\n        onClick={() => this.itemClick.emit(this.label)}\n      >\n        <li>\n          <BaseButton\n            {...props}\n            afterContent={\n              <Fragment>\n                {this.showChevron ? (\n                  <ix-icon\n                    name={'chevron-right-small'}\n                    size=\"16\"\n                    class={'chevron'}\n                  ></ix-icon>\n                ) : null}\n              </Fragment>\n            }\n          >\n            {this.label}\n            <slot></slot>\n          </BaseButton>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/button/base-button.js

@@ -6,6 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { h } from '@stencil/core';
 const isPrimary = (variant) => {
   return variant.toUpperCase() === 'Primary'.toUpperCase();
 };
@@ -23,8 +24,16 @@ export const getButtonClasses = (variant, outline, ghost, iconOnly = false, icon
     'btn-invisible-secondary': isSecondary(variant) && !outline && ghost,
     'btn-icon': iconOnly,
     'btn-oval': iconOval,
-    selected: isSecondary(variant) && (outline || ghost) && selected,
+    selected: selected,
     disabled: disabled,
   };
 };
+export function BaseButton(props, children) {
+  var _a, _b;
+  const extraClasses = (_a = props.extraClasses) !== null && _a !== void 0 ? _a : {};
+  return (h("button", Object.assign({}, props.ariaAttributes, { onClick: (e) => (props.onClick ? props.onClick(e) : undefined), tabindex: props.disabled ? -1 : (_b = props.tabIndex) !== null && _b !== void 0 ? _b : 0, type: props.type, class: Object.assign(Object.assign({}, getButtonClasses(props.variant, props.outline, props.ghost, props.iconOnly, props.iconOval, props.selected, props.disabled || props.loading)), extraClasses) }), props.loading ? h("ix-spinner", { size: "small", hideTrack: true }) : null, props.icon && !props.loading ? (h("ix-icon", { name: props.icon, size: props.iconSize, color: props.iconColor })) : null, h("div", { class: {
+      content: true,
+      [`content-${props.alignment}`]: !!props.alignment,
+    } }, children), props.afterContent ? props.afterContent : null));
+}
 //# sourceMappingURL=base-button.js.map

package/dist/collection/components/button/base-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-button.js","sourceRoot":"","sources":["../../../src/components/button/base-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,MAAM,SAAS,GAAG,CAAC,OAAe,EAAE,EAAE;EACpC,OAAO,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS,CAAC,WAAW,EAAE,CAAC;AAC3D,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,OAAe,EAAE,EAAE;EACtC,OAAO,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,CAAC,WAAW,EAAE,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,OAAsB,EACtB,OAAgB,EAChB,KAAc,EACd,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAiB,EACjB,QAAiB,EACjB,EAAE;EACF,OAAO;IACL,GAAG,EAAE,IAAI;IACT,aAAa,EAAE,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK;IACvD,qBAAqB,EAAE,SAAS,CAAC,OAAO,CAAC,IAAI,OAAO,IAAI,CAAC,KAAK;IAC9D,uBAAuB,EAAE,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,KAAK;IAChE,eAAe,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK;IAC3D,uBAAuB,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI,OAAO,IAAI,CAAC,KAAK;IAClE,yBAAyB,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,KAAK;IACpE,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,QAAQ;IAChE,QAAQ,EAAE,QAAQ;GACnB,CAAC;AACJ,CAAC,CAAC","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\nimport { ButtonVariant } from './button';\n\nconst isPrimary = (variant: string) => {\n  return variant.toUpperCase() === 'Primary'.toUpperCase();\n};\n\nconst isSecondary = (variant: string) => {\n  return variant.toUpperCase() === 'Secondary'.toUpperCase();\n};\n\nexport const getButtonClasses = (\n  variant: ButtonVariant,\n  outline: boolean,\n  ghost: boolean,\n  iconOnly = false,\n  iconOval = false,\n  selected: boolean,\n  disabled: boolean\n) => {\n  return {\n    btn: true,\n    'btn-primary': isPrimary(variant) && !outline && !ghost,\n    'btn-outline-primary': isPrimary(variant) && outline && !ghost,\n    'btn-invisible-primary': isPrimary(variant) && !outline && ghost,\n    'btn-secondary': isSecondary(variant) && !outline && !ghost,\n    'btn-outline-secondary': isSecondary(variant) && outline && !ghost,\n    'btn-invisible-secondary': isSecondary(variant) && !outline && ghost,\n    'btn-icon': iconOnly,\n    'btn-oval': iconOval,\n    selected: isSecondary(variant) && (outline || ghost) && selected,\n    disabled: disabled,\n  };\n};\n"]}
+{"version":3,"file":"base-button.js","sourceRoot":"","sources":["../../../src/components/button/base-button.tsx"],"names":[],"mappings":"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","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 */\nimport { h } from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport { ButtonVariant } from './button';\n\nexport type ButtonAlignment = 'center' | 'start';\n\nconst isPrimary = (variant: string) => {\n  return variant.toUpperCase() === 'Primary'.toUpperCase();\n};\n\nconst isSecondary = (variant: string) => {\n  return variant.toUpperCase() === 'Secondary'.toUpperCase();\n};\n\nexport const getButtonClasses = (\n  variant: ButtonVariant,\n  outline: boolean,\n  ghost: boolean,\n  iconOnly = false,\n  iconOval = false,\n  selected: boolean,\n  disabled: boolean\n) => {\n  return {\n    btn: true,\n    'btn-primary': isPrimary(variant) && !outline && !ghost,\n    'btn-outline-primary': isPrimary(variant) && outline && !ghost,\n    'btn-invisible-primary': isPrimary(variant) && !outline && ghost,\n    'btn-secondary': isSecondary(variant) && !outline && !ghost,\n    'btn-outline-secondary': isSecondary(variant) && outline && !ghost,\n    'btn-invisible-secondary': isSecondary(variant) && !outline && ghost,\n    'btn-icon': iconOnly,\n    'btn-oval': iconOval,\n    selected: selected,\n    disabled: disabled,\n  };\n};\n\nexport type BaseButtonProps = {\n  type: string;\n  variant: ButtonVariant;\n  outline: boolean;\n  ghost: boolean;\n  iconOnly: boolean;\n  iconOval: boolean;\n  selected: boolean;\n  disabled: boolean;\n  loading: boolean;\n  icon: string;\n  onClick?: Function;\n  ariaAttributes?: A11yAttributes;\n  extraClasses?: { [key: string]: boolean };\n  iconSize?: string;\n  iconColor?: string;\n  alignment?: ButtonAlignment;\n  tabIndex?: number;\n  afterContent?: any;\n};\n\nexport function BaseButton(props: BaseButtonProps, children) {\n  const extraClasses = props.extraClasses ?? {};\n\n  return (\n    <button\n      {...props.ariaAttributes}\n      onClick={(e: Event) => (props.onClick ? props.onClick(e) : undefined)}\n      tabindex={props.disabled ? -1 : props.tabIndex ?? 0}\n      type={props.type}\n      class={{\n        ...getButtonClasses(\n          props.variant,\n          props.outline,\n          props.ghost,\n          props.iconOnly,\n          props.iconOval,\n          props.selected,\n          props.disabled || props.loading\n        ),\n        ...extraClasses,\n      }}\n    >\n      {props.loading ? <ix-spinner size=\"small\" hideTrack></ix-spinner> : null}\n      {props.icon && !props.loading ? (\n        <ix-icon\n          name={props.icon}\n          size={props.iconSize as any}\n          color={props.iconColor}\n        ></ix-icon>\n      ) : null}\n      <div\n        class={{\n          content: true,\n          [`content-${props.alignment}`]: !!props.alignment,\n        }}\n      >\n        {children}\n      </div>\n      {props.afterContent ? props.afterContent : null}\n    </button>\n  );\n}\n"]}