@siemens/ix 1.1.0-beta.1 → 1.1.0-beta.3

package/dist/collection/components/blind/blind.js

@@ -1,152 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 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 { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
-import anime from 'animejs';
-export class Blind {
-  constructor() {
-    /**
-     * Collapsed state
-     */
-    this.collapsed = false;
-  }
-  onHeaderClick(e) {
-    e.preventDefault();
-    e.stopImmediatePropagation();
-    this.collapsed = !this.collapsed;
-    this.collapsedChange.emit(this.collapsed);
-  }
-  componentDidLoad() {
-    this.animateCollapse(this.collapsed);
-  }
-  get content() {
-    return this.hostElement.querySelector('.blind-content');
-  }
-  animation(isCollapsed) {
-    this.animateCollapse(isCollapsed);
-  }
-  animateCollapse(isCollapsed) {
-    if (isCollapsed) {
-      this.rotateChevronRight();
-    }
-    else {
-      this.rotateChevronDown();
-    }
-  }
-  rotateChevronDown() {
-    anime({
-      targets: this.chevronRef,
-      duration: 150,
-      easing: 'easeInOutSine',
-      rotateZ: 90,
-    });
-    anime({
-      targets: this.content,
-      duration: 150,
-      easing: 'easeInOutSine',
-      opacity: 1,
-    });
-  }
-  rotateChevronRight() {
-    anime({
-      targets: this.chevronRef,
-      duration: 150,
-      easing: 'easeInOutSine',
-      rotateZ: 0,
-    });
-    anime({
-      targets: this.content,
-      duration: 150,
-      easing: 'easeInOutSine',
-      opacity: 0,
-    });
-  }
-  render() {
-    return (h(Host, null,
-      h("div", { class: {
-          'blind-header': true,
-          closed: this.collapsed,
-        }, onClick: (e) => this.onHeaderClick(e) },
-        h("span", { ref: (ref) => (this.chevronRef = ref), class: {
-            glyph: true,
-            'glyph-chevron-right-small': true,
-          } }),
-        h("div", { class: "blind-header-title" }, this.label !== undefined ? (h("span", { class: "blind-header-title-default" }, this.label)) : (h("slot", { name: "custom-header" })))),
-      h("div", { class: {
-          'blind-content': true,
-          hide: this.collapsed,
-        } },
-        h("slot", null))));
-  }
-  static get is() { return "ix-blind"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["blind.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["blind.css"]
-  }; }
-  static get properties() { return {
-    "collapsed": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Collapsed state"
-      },
-      "attribute": "collapsed",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label of blind"
-      },
-      "attribute": "label",
-      "reflect": false
-    }
-  }; }
-  static get events() { return [{
-      "method": "collapsedChange",
-      "name": "collapsedChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Collapsed state changed"
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "collapsed",
-      "methodName": "animation"
-    }]; }
-}

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -1,228 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 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.
- */
-/*
- * SPDX-FileCopyrightText: 2022 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.
- */
-/* Dimensions */
-/* Font sizes */
-/* Line heights */
-/* Animation timings */
-/*
- * SPDX-FileCopyrightText: 2022 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.
- */
-/*
- * SPDX-FileCopyrightText: 2022 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.
- */
-:host {
-  display: flex;
-  height: 2.5rem;
-  justify-content: flex-start;
-  align-items: center;
-  background-color: transparent;
-  overflow: hidden;
-}
-:host .crumb {
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  white-space: nowrap;
-  border-radius: var(--theme-breadcrumb--border-radius);
-  height: 2rem;
-  max-height: 2rem;
-  min-width: 0;
-  -webkit-margin-end: 0.25rem;
-          margin-inline-end: 0.25rem;
-  padding: 0.5rem 0 0.5rem 0.25rem;
-  outline: none;
-  cursor: pointer;
-}
-:host .crumb:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .crumb:not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-breadcrumb-btn--background--hover);
-}
-:host .crumb:not(.disabled):not(:disabled):hover .crumb-text,
-:host .crumb:not(.disabled):not(:disabled):hover .glyph {
-  color: var(--theme-breadcrumb-btn--color--hover);
-}
-:host .crumb:not(.disabled):not(:disabled):hover .crumb-text + .glyph-chevron-right-small {
-  color: var(--theme-breadcrumb-btn-arrow--color--hover);
-}
-:host .crumb:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .crumb:not(.disabled):not(:disabled):active {
-  background-color: var(--theme-breadcrumb-btn--background--active);
-}
-:host .crumb:not(.disabled):not(:disabled):active .crumb-text,
-:host .crumb:not(.disabled):not(:disabled):active .glyph {
-  color: var(--theme-breadcrumb-btn--color--active);
-}
-:host .crumb:not(.disabled):not(:disabled):active .crumb-text + .glyph-chevron-right-small {
-  color: var(--theme-breadcrumb-btn-arrow--color--active);
-}
-:host .crumb .crumb-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  min-width: 0;
-  font-weight: 700;
-}
-:host .crumb .crumb-text ix-icon {
-  -webkit-margin-end: 0.25rem;
-          margin-inline-end: 0.25rem;
-}
-:host .crumb .crumb-text + .glyph-chevron-right-small {
-  -webkit-margin-start: 0.5rem;
-          margin-inline-start: 0.5rem;
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
-}
-:host .crumb.last {
-  background-color: transparent !important;
-  cursor: default;
-  -webkit-padding-end: 0.25rem;
-          padding-inline-end: 0.25rem;
-}
-:host .crumb.clickable:not(.remove-hover):not(.disabled):not(:disabled):focus-visible {
-  border-color: var(--theme-focus--border-color);
-}
-:host .crumb:not(:last-of-type) {
-  flex-shrink: 0;
-  max-width: 14rem;
-}
-:host .crumb-dropdown {
-  overflow: visible;
-}
-:host .crumb-dropdown .glyph::after {
-  display: none;
-}
-:host .remove-anchor::after {
-  display: none;
-}
-:host .more-text {
-  display: flex;
-}
-:host .more-text .more-text-ellipsis {
-  width: 1rem;
-  display: inline-block;
-  font-weight: 700;
-}
-:host .more-text .glyph {
-  line-height: unset;
-}
-:host .crumb-items {
-  display: contents;
-}
-:host .crumb.btn {
-  background-color: var(--theme-breadcrumb-btn--background);
-  border: var(--theme-btn--btn-thickness) solid transparent;
-  transition: 150ms;
-}
-:host .crumb.btn .crumb-text,
-:host .crumb.btn .glyph {
-  color: var(--theme-breadcrumb-btn--color);
-}
-:host .crumb.btn .crumb-text + .glyph-chevron-right-small {
-  color: var(--theme-breadcrumb-btn-arrow--color);
-}
-:host .crumb.btn.last .crumb-text {
-  color: var(--theme-breadcrumb-btn-last--color);
-}
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-breadcrumb-btn--background--hover);
-}
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text,
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph {
-  color: var(--theme-breadcrumb-btn--color--hover);
-}
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text + .glyph-chevron-right-small {
-  color: var(--theme-breadcrumb-btn-arrow--color--hover);
-}
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled):active {
-  background-color: var(--theme-breadcrumb-btn--background--active);
-}
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text,
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled):active .glyph {
-  color: var(--theme-breadcrumb-btn--color--active);
-}
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text + .glyph-chevron-right-small {
-  color: var(--theme-breadcrumb-btn-arrow--color--active);
-}
-:host .crumb.ghost {
-  background-color: var(--theme-breadcrumb-ghost--background);
-  border: var(--theme-btn--ghost-thickness) solid transparent;
-  transition: 150ms;
-}
-:host .crumb.ghost .crumb-text,
-:host .crumb.ghost .glyph {
-  color: var(--theme-breadcrumb-ghost--color);
-}
-:host .crumb.ghost .crumb-text + .glyph-chevron-right-small {
-  color: var(--theme-breadcrumb-ghost-arrow--color);
-}
-:host .crumb.ghost.last .crumb-text {
-  color: var(--theme-breadcrumb-ghost-last--color);
-}
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-breadcrumb-ghost--background--hover);
-}
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text,
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph {
-  color: var(--theme-breadcrumb-ghost--color--hover);
-}
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text + .glyph-chevron-right-small {
-  color: var(--theme-breadcrumb-ghost-arrow--color--hover);
-}
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled):active {
-  background-color: var(--theme-breadcrumb-ghost--background--active);
-}
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text,
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled):active .glyph {
-  color: var(--theme-breadcrumb-ghost--color--active);
-}
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text + .glyph-chevron-right-small {
-  color: var(--theme-breadcrumb-ghost-arrow--color--active);
-}
-
-.dropdown-overflow .dropdown-menu {
-  max-height: 25rem;
-  overflow-y: auto;
-}

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

@@ -1,252 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 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 { Component, Element, Event, h, Host, Prop, State } from '@stencil/core';
-import animejs from 'animejs';
-import { createMutationObserver } from '../utils/mutation-observer';
-export class Breadcrumb {
-  constructor() {
-    /**
-     * Excess items will get hidden inside of dropdown
-     */
-    this.visibleItemCount = 9;
-    /**
-     * Items will be accessible through a dropdown
-     */
-    this.nextItems = [];
-    /**
-     * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)
-     */
-    this.ghost = false;
-    this.items = [];
-  }
-  get breadcrumbItems() {
-    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));
-  }
-  get crumbItems() {
-    return Array.from(this.hostElement.querySelectorAll('.crumb-items .crumb'));
-  }
-  onItemClick(item) {
-    this.itemClick.emit(item);
-  }
-  componentDidLoad() {
-    this.mutationObserver = createMutationObserver(() => {
-      const updatedItems = this.getItems();
-      const update = () => {
-        this.items = updatedItems;
-      };
-      if (updatedItems.length >= this.items.length) {
-        update();
-      }
-      else if (updatedItems.length < this.items.length) {
-        const last = this.crumbItems[this.crumbItems.length - 1];
-        this.animationFadeOut(last, () => update());
-      }
-    });
-    this.mutationObserver.observe(this.hostElement.querySelector('.crumb-items'), {
-      subtree: true,
-      childList: true,
-    });
-  }
-  componentWillLoad() {
-    this.items = this.getItems();
-  }
-  getItems() {
-    return this.breadcrumbItems.map((item) => {
-      return { label: item.label, icon: item.icon };
-    });
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  animationFadeOut(ref, complete) {
-    animejs({
-      targets: ref,
-      translateX: '-100%',
-      duration: 150,
-      opacity: [1, 0],
-      easing: 'linear',
-      complete: () => complete(),
-    });
-  }
-  animationFadeIn(ref) {
-    animejs({
-      targets: ref,
-      duration: 150,
-      opacity: [0, 1],
-      translateX: ['-100%', '0%'],
-      easing: 'linear',
-    });
-  }
-  handleLastButtonRef(ref, last) {
-    var _a;
-    if (last) {
-      this.animationFadeIn(ref);
-    }
-    if (last && ((_a = this.nextItems) === null || _a === void 0 ? void 0 : _a.length)) {
-      this.nextButtonRef = ref;
-    }
-  }
-  sliceHiddenItems() {
-    let sliceIndex = 0;
-    if (this.items.length > this.visibleItemCount) {
-      sliceIndex = this.items.length - this.visibleItemCount;
-    }
-    return this.items.slice(sliceIndex);
-  }
-  clickItem(item, last) {
-    if (!last) {
-      this.onItemClick(item);
-    }
-  }
-  renderBreadcrumbItems() {
-    return this.sliceHiddenItems().map((item, index, array) => {
-      var _a;
-      const last = index === array.length - 1;
-      const isLastItem = last && !((_a = this.nextItems) === null || _a === void 0 ? void 0 : _a.length);
-      return (h("div", { ref: (ref) => this.handleLastButtonRef(ref, last), "data-breadcrumb": index, class: {
-          crumb: true,
-          clickable: true,
-          ghost: this.ghost,
-          btn: !this.ghost,
-          last: isLastItem,
-          'remove-hover': isLastItem,
-        }, onClick: () => this.clickItem(item.label, last), "data-testid": "item" },
-        h("span", { class: "crumb-text remove-anchor" },
-          item.icon ? h("ix-icon", { name: item.icon, size: "16" }) : '',
-          item.label),
-        !isLastItem ? (h("span", { class: "glyph glyph-18 glyph-chevron-right-small text-default-text" })) : null));
-    });
-  }
-  render() {
-    var _a, _b, _c;
-    return (h(Host, null,
-      h("ix-dropdown", { trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
-          ? this.previousButtonRef
-          : null }, this.items
-        .slice(0, this.items.length - this.visibleItemCount)
-        .map((item) => (h("ix-dropdown-item", { label: item.label, onClick: () => this.onItemClick(item.label) })))),
-      ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (h("div", { class: "crumb crumb-dropdown", ref: (ref) => (this.previousButtonRef = ref) },
-        h("span", { class: "remove-anchor more-text" },
-          h("span", { class: "more-text-ellipsis" }, "..."),
-          h("span", { class: "glyph glyph-16 glyph-chevron-right" })))) : null,
-      h("div", { class: "crumb-items" },
-        this.renderBreadcrumbItems(),
-        h("slot", null)),
-      h("ix-dropdown", { trigger: this.nextButtonRef }, (_c = this.nextItems) === null || _c === void 0 ? void 0 : _c.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
-          this.nextClick.emit({
-            event: e,
-            item,
-          });
-        } }))))));
-  }
-  static get is() { return "ix-breadcrumb"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["breadcrumb.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["breadcrumb.css"]
-  }; }
-  static get properties() { return {
-    "visibleItemCount": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Excess items will get hidden inside of dropdown"
-      },
-      "attribute": "visible-item-count",
-      "reflect": false,
-      "defaultValue": "9"
-    },
-    "nextItems": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Items will be accessible through a dropdown"
-      },
-      "defaultValue": "[]"
-    },
-    "ghost": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)"
-      },
-      "attribute": "ghost",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "previousButtonRef": {},
-    "nextButtonRef": {},
-    "items": {}
-  }; }
-  static get events() { return [{
-      "method": "itemClick",
-      "name": "itemClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Crumb item clicked event"
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "nextClick",
-      "name": "nextClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Next item clicked event"
-      },
-      "complexType": {
-        "original": "{ event: UIEvent; item: string }",
-        "resolved": "{ event: UIEvent; item: string; }",
-        "references": {
-          "UIEvent": {
-            "location": "global"
-          }
-        }
-      }
-    }]; }
-  static get elementRef() { return "hostElement"; }
-}

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

@@ -1,11 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 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.
- */
-:host {
-  display: block;
-}

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

@@ -1,59 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 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 { Component, h, Host, Prop } from '@stencil/core';
-export class BreadcrumbItem {
-  render() {
-    return (h(Host, null,
-      h("slot", null)));
-  }
-  static get is() { return "ix-breadcrumb-item"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["breadcrumb-item.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["breadcrumb-item.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Breadcrumb label"
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon to be displayed next ot the label"
-      },
-      "attribute": "icon",
-      "reflect": false
-    }
-  }; }
-}