@siemens/ix 2.0.0-beta.0 → 2.0.0

package/dist/components/dropdown-item.js

@@ -1,78 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './icon.js';
-
-/* Siemens iX Icons (1.1.2) */
-const chevronRightSmall = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>chevron-right-small</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(187.520000, 134.186667)'><polygon id='arrowhead-right' points='30.2933333 243.626667 0 213.333333 91.7333333 121.813333 0 30.2933333 30.2933333 0 151.893333 121.813333'/></g></g></svg>";
-
-const dropdownItemCss = ":host{--ix-dropdown-item-checked-color:var(--theme-color-primary);display:flex;flex-direction:row;position:relative;height:2.5rem;width:auto;overflow:hidden;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .dropdown-item{all:unset;display:flex;flex-direction:row;align-items:center;position:relative;height:calc(100% - 2px);width:calc(100% - 0.5rem - 1.5rem - 0.125rem);padding:0 0.5rem;padding-right:1.5rem;border:0.0625rem solid transparent;white-space:nowrap}:host .dropdown-item.no-checked-field{width:calc(100% - 1rem - 1.5rem - 0.125rem);padding:0 1rem;padding-right:1.5rem}:host .dropdown-item:focus-visible{border-color:var(--theme-color-focus-bdr)}:host .dropdown-item-checked{display:flex;align-items:center;justify-content:center;position:relative;height:100%;width:1rem;min-width:1rem;margin-right:0.25rem;color:var(--ix-dropdown-item-checked-color)}:host .dropdown-item-icon{margin-right:0.25rem;color:var(--theme-color-soft-text)}:host .dropdown-item-text{display:block;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .dropdown-item:focus-visible{outline:1px solid yellow}:host .submenu-icon{margin-left:auto}:host(.icon-only) .dropdown-item-icon{margin-right:0px}:host(.icon-only) .dropdown-item-checked{display:none}:host(.icon-only) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem - 0.125rem);padding:0 0.5rem;padding-right:0.5rem}:host(.submenu) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem - 0.125rem);padding:0 0.5rem;padding-right:0.5rem}:host(:not(.disabled):not(:disabled).hover),:host(:not(.disabled):not(:disabled):hover){background-color:var(--theme-ghost--background--hover)}:host(:not(.disabled):not(:disabled).active),:host(:not(.disabled):not(:disabled):active){background-color:var(--theme-ghost--background--active)}:host(.disabled){pointer-events:none;color:var(--theme-color-weak-text) !important}:host(.disabled) .dropdown-item-icon{color:var(--theme-color-weak-text) !important}";
-
-const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.itemClick = createEvent(this, "itemClick", 7);
-    this.label = undefined;
-    this.icon = undefined;
-    this.hover = false;
-    this.disabled = false;
-    this.checked = false;
-    this.isSubMenu = false;
-    this.suppressChecked = false;
-  }
-  /**
-   * Internal usage only
-   */
-  async emitItemClick() {
-    this.itemClick.emit(this.hostElement);
-  }
-  isIconOnly() {
-    return (this.label === undefined &&
-      this.hostElement.innerText === '' &&
-      this.icon !== undefined);
-  }
-  render() {
-    return (h(Host, { class: {
-        hover: this.hover,
-        'icon-only': this.isIconOnly(),
-        disabled: this.disabled,
-        submenu: this.isSubMenu,
-      }, role: "listitem" }, h("button", { type: "button", tabIndex: 0, class: {
-        'dropdown-item': true,
-        'no-checked-field': this.suppressChecked,
-      }, onClick: () => this.emitItemClick() }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { class: "checkmark", name: "single-check", size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, h("div", { class: "dropdown-item-text" }, this.label, h("slot", null)), this.isSubMenu ? (h("ix-icon", { name: chevronRightSmall, class: 'submenu-icon' })) : null)));
-  }
-  get hostElement() { return this; }
-  static get style() { return dropdownItemCss; }
-}, [1, "ix-dropdown-item", {
-    "label": [1],
-    "icon": [1],
-    "hover": [4],
-    "disabled": [4],
-    "checked": [4],
-    "isSubMenu": [4, "is-sub-menu"],
-    "suppressChecked": [4, "suppress-checked"],
-    "emitItemClick": [64]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-dropdown-item", "ix-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-dropdown-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, DropdownItem);
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { DropdownItem as D, defineCustomElement as d };
-
-//# sourceMappingURL=dropdown-item.js.map