@sapudex/web-components 0.111.0

package/dist/Avatar.d.ts

@@ -0,0 +1,131 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+export declare enum AvatarColorScheme {
+    Mango = "Mango",
+    Red = "Red",
+    Raspberry = "Raspberry",
+    Pink = "Pink",
+    Indigo = "Indigo",
+    Blue = "Blue",
+    Teal = "Teal",
+    Green = "Green",
+    Grey = "Grey",
+    Transparent = "Transparent",
+    Neutral = "Neutral"
+}
+export declare enum AvatarShape {
+    Circle = "Circle",
+    Square = "Square"
+}
+export declare enum AvatarSize {
+    XS = "XS",
+    S = "S",
+    M = "M",
+    L = "L",
+    XL = "XL"
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-avatar</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/Avatar.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExAvatar extends UI5Element {
+    /**
+     * Defines the displayed initials.
+     *
+     * @default ""
+     * @public
+     */
+    initials: string;
+    /**
+     * Defines if the avatar is interactive (focusable and pressable).
+     *
+     * @default false
+     * @public
+     */
+    interactive: boolean;
+    /**
+     * Defines the text alternative of the component.
+     *
+     * @default ""
+     * @public
+     */
+    accessibleName: string;
+    /**
+     * Defines the design of the component.
+     *
+     * @default "Blue"
+     * @public
+     */
+    colorScheme: `${AvatarColorScheme}`;
+    /**
+     * Defines whether the component is disabled.
+     *
+     * @default false
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Defines the name of the fallback icon.
+     *
+     * @default ""
+     * @public
+     */
+    fallbackIcon: string;
+    /**
+     * Defines the name of the UI5 Icon, that will be displayed.
+     *
+     * @default ""
+     * @public
+     */
+    icon: string;
+    /**
+     * Defines the shape of the component.
+     *
+     * @default "Circle"
+     * @public
+     */
+    shape: `${AvatarShape}`;
+    /**
+     * Controls id of the element that label the component
+     *
+     * @default "S"
+     * @public
+     */
+    size: `${AvatarSize}`;
+    /**
+     * Receives the desired <img> tag
+     *
+     * @slot image
+     * @public
+     */
+    image: Array<HTMLElement>;
+    /**
+     * Defines the optional badge that will be used for visual affordance.
+     *
+     * @slot
+     * @public
+     */
+    badge: Array<HTMLElement>;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    handleClick(e: Event): void;
+    get getUI5AvatarColorScheme(): string;
+    get imageSlot(): boolean;
+    get badgeSlot(): boolean;
+    get udexAvatarClass(): string;
+    get avatarAccessibleName(): string;
+}
+export default UDExAvatar;

package/dist/Avatar.js

@@ -0,0 +1,151 @@
+var __decorate = (this && this.__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;
+};
+var UDExAvatar_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import Avatar from "@ui5/webcomponents/dist/Avatar.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { AVATAR_TEXT, DISABLED } from "./generated/i18n/i18n-defaults.js";
+// Template
+import AvatarTemplate from "./generated/templates/AvatarTemplate.lit.js";
+// Styles
+import AvatarCss from "./generated/themes/Avatar.css";
+export var AvatarColorScheme;
+(function (AvatarColorScheme) {
+    AvatarColorScheme["Mango"] = "Mango";
+    AvatarColorScheme["Red"] = "Red";
+    AvatarColorScheme["Raspberry"] = "Raspberry";
+    AvatarColorScheme["Pink"] = "Pink";
+    AvatarColorScheme["Indigo"] = "Indigo";
+    AvatarColorScheme["Blue"] = "Blue";
+    AvatarColorScheme["Teal"] = "Teal";
+    AvatarColorScheme["Green"] = "Green";
+    AvatarColorScheme["Grey"] = "Grey";
+    AvatarColorScheme["Transparent"] = "Transparent";
+    AvatarColorScheme["Neutral"] = "Neutral";
+})(AvatarColorScheme || (AvatarColorScheme = {}));
+export var AvatarShape;
+(function (AvatarShape) {
+    AvatarShape["Circle"] = "Circle";
+    AvatarShape["Square"] = "Square";
+})(AvatarShape || (AvatarShape = {}));
+export var AvatarSize;
+(function (AvatarSize) {
+    AvatarSize["XS"] = "XS";
+    AvatarSize["S"] = "S";
+    AvatarSize["M"] = "M";
+    AvatarSize["L"] = "L";
+    AvatarSize["XL"] = "XL";
+})(AvatarSize || (AvatarSize = {}));
+const udexToUi5ColorSchemeMap = {
+    Mango: "Accent1",
+    Red: "Accent2",
+    Raspberry: "Accent3",
+    Pink: "Accent4",
+    Indigo: "Accent5",
+    Blue: "Accent6",
+    Teal: "Accent7",
+    Green: "Accent8",
+    Grey: "Accent10",
+    Transparent: "Accent6",
+    Neutral: "Accent6",
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-avatar</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/Avatar.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExAvatar = UDExAvatar_1 = class UDExAvatar extends UI5Element {
+    static async onDefine() {
+        UDExAvatar_1.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    }
+    handleClick(e) {
+        e.stopPropagation();
+        if (this.interactive) {
+            this.fireEvent("click");
+        }
+    }
+    get getUI5AvatarColorScheme() {
+        return udexToUi5ColorSchemeMap[this.colorScheme];
+    }
+    get imageSlot() {
+        return !!this.image.length;
+    }
+    get badgeSlot() {
+        return !!this.badge.length;
+    }
+    get udexAvatarClass() {
+        let avatarClass = "udex-avatar";
+        if (this.imageSlot) {
+            avatarClass += " udex-avatar--with-image";
+        }
+        return avatarClass;
+    }
+    get avatarAccessibleName() {
+        return `${this.accessibleName ? this.accessibleName : UDExAvatar_1.i18nBundle.getText(AVATAR_TEXT)} ${this.disabled ? UDExAvatar_1.i18nBundle.getText(DISABLED) : ""}`;
+    }
+};
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExAvatar.prototype, "initials", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExAvatar.prototype, "interactive", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExAvatar.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: AvatarColorScheme, defaultValue: AvatarColorScheme.Blue })
+], UDExAvatar.prototype, "colorScheme", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExAvatar.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExAvatar.prototype, "fallbackIcon", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExAvatar.prototype, "icon", void 0);
+__decorate([
+    property({ type: AvatarShape, defaultValue: AvatarShape.Circle })
+], UDExAvatar.prototype, "shape", void 0);
+__decorate([
+    property({ type: AvatarSize, defaultValue: AvatarSize.S })
+], UDExAvatar.prototype, "size", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], UDExAvatar.prototype, "image", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], UDExAvatar.prototype, "badge", void 0);
+UDExAvatar = UDExAvatar_1 = __decorate([
+    customElement({
+        tag: "udex-avatar",
+        renderer: litRender,
+        styles: AvatarCss,
+        template: AvatarTemplate,
+        dependencies: [Avatar],
+    })
+], UDExAvatar);
+UDExAvatar.define();
+export default UDExAvatar;
+//# sourceMappingURL=Avatar.js.map

package/dist/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAmB,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE1E,WAAW;AACX,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,SAAS;AACT,OAAO,SAAS,MAAM,+BAA+B,CAAC;AAEtD,MAAM,CAAN,IAAY,iBAYX;AAZD,WAAY,iBAAiB;IAC3B,oCAAe,CAAA;IACf,gCAAW,CAAA;IACX,4CAAuB,CAAA;IACvB,kCAAa,CAAA;IACb,sCAAiB,CAAA;IACjB,kCAAa,CAAA;IACb,kCAAa,CAAA;IACb,oCAAe,CAAA;IACf,kCAAa,CAAA;IACb,gDAA2B,CAAA;IAC3B,wCAAmB,CAAA;AACrB,CAAC,EAZW,iBAAiB,KAAjB,iBAAiB,QAY5B;AAED,MAAM,CAAN,IAAY,WAGX;AAHD,WAAY,WAAW;IACrB,gCAAiB,CAAA;IACjB,gCAAiB,CAAA;AACnB,CAAC,EAHW,WAAW,KAAX,WAAW,QAGtB;AAED,MAAM,CAAN,IAAY,UAMX;AAND,WAAY,UAAU;IACpB,uBAAS,CAAA;IACT,qBAAO,CAAA;IACP,qBAAO,CAAA;IACP,qBAAO,CAAA;IACP,uBAAS,CAAA;AACX,CAAC,EANW,UAAU,KAAV,UAAU,QAMrB;AAED,MAAM,uBAAuB,GAAG;IAC9B,KAAK,EAAE,SAAS;IAChB,GAAG,EAAE,SAAS;IACd,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,UAAU;IAChB,WAAW,EAAE,SAAS;IACtB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,UAAU,kBAAhB,MAAM,UAAW,SAAQ,UAAU;IAsGjC,MAAM,CAAC,KAAK,CAAC,QAAQ;QACnB,YAAU,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,6BAA6B,CAAC,CAAC;IAC7E,CAAC;IAED,WAAW,CAAC,CAAQ;QAClB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;SACzB;IACH,CAAC;IAED,IAAI,uBAAuB;QACzB,OAAO,uBAAuB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACnD,CAAC;IAED,IAAI,SAAS;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;IAC7B,CAAC;IAED,IAAI,SAAS;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;IAC7B,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,WAAW,GAAG,aAAa,CAAC;QAEhC,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,WAAW,IAAI,0BAA0B,CAAC;SAC3C;QAED,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,IAAI,oBAAoB;QACtB,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,YAAU,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAU,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IACrK,CAAC;CACF,CAAA;AAlIG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;4CACzB;AASlB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACJ;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;kDACnB;AASxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,YAAY,EAAE,iBAAiB,CAAC,IAAI,EAAE,CAAC;+CACrC;AASrC;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACP;AASnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;gDACrB;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;wCAC7B;AASd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;yCACvC;AASzB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC;wCAClC;AASvB;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;yCAChB;AAS3B;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;yCACC;AAlGzB,UAAU;IAPf,aAAa,CAAC;QACb,GAAG,EAAE,aAAa;QAClB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,cAAc;QACxB,YAAY,EAAE,CAAC,MAAM,CAAC;KACvB,CAAC;GACI,UAAU,CA0If;AAED,UAAU,CAAC,MAAM,EAAE,CAAC;AAEpB,eAAe,UAAU,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport Avatar from \"@ui5/webcomponents/dist/Avatar.js\";\nimport I18nBundle, { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { AVATAR_TEXT, DISABLED } from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport AvatarTemplate from \"./generated/templates/AvatarTemplate.lit.js\";\n\n// Styles\nimport AvatarCss from \"./generated/themes/Avatar.css\";\n\nexport enum AvatarColorScheme {\n  Mango = \"Mango\",\n  Red = \"Red\",\n  Raspberry = \"Raspberry\",\n  Pink = \"Pink\",\n  Indigo = \"Indigo\",\n  Blue = \"Blue\",\n  Teal = \"Teal\",\n  Green = \"Green\",\n  Grey = \"Grey\",\n  Transparent = \"Transparent\",\n  Neutral = \"Neutral\",\n}\n\nexport enum AvatarShape {\n  Circle = \"Circle\",\n  Square = \"Square\",\n}\n\nexport enum AvatarSize {\n  XS = \"XS\",\n  S = \"S\",\n  M = \"M\",\n  L = \"L\",\n  XL = \"XL\",\n}\n\nconst udexToUi5ColorSchemeMap = {\n  Mango: \"Accent1\",\n  Red: \"Accent2\",\n  Raspberry: \"Accent3\",\n  Pink: \"Accent4\",\n  Indigo: \"Accent5\",\n  Blue: \"Accent6\",\n  Teal: \"Accent7\",\n  Green: \"Accent8\",\n  Grey: \"Accent10\",\n  Transparent: \"Accent6\",\n  Neutral: \"Accent6\",\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-avatar</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/Avatar.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-avatar\",\n  renderer: litRender,\n  styles: AvatarCss,\n  template: AvatarTemplate,\n  dependencies: [Avatar],\n})\nclass UDExAvatar extends UI5Element {\n  /**\n   * Defines the displayed initials.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    initials!: string;\n\n  /**\n   * Defines if the avatar is interactive (focusable and pressable).\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    interactive!: boolean;\n\n  /**\n   * Defines the text alternative of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    accessibleName!: string;\n\n  /**\n   * Defines the design of the component.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property({ type: AvatarColorScheme, defaultValue: AvatarColorScheme.Blue })\n    colorScheme!: `${AvatarColorScheme}`;\n\n  /**\n   * Defines whether the component is disabled.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines the name of the fallback icon.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    fallbackIcon!: string;\n\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    icon!: string;\n\n  /**\n   * Defines the shape of the component.\n   *\n   * @default \"Circle\"\n   * @public\n   */\n  @property({ type: AvatarShape, defaultValue: AvatarShape.Circle })\n    shape!: `${AvatarShape}`;\n\n  /**\n   * Controls id of the element that label the component\n   *\n   * @default \"S\"\n   * @public\n   */\n  @property({ type: AvatarSize, defaultValue: AvatarSize.S })\n    size!: `${AvatarSize}`;\n\n  /**\n   * Receives the desired <img> tag\n   *\n   * @slot image\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    image!: Array<HTMLElement>;\n\n  /**\n   * Defines the optional badge that will be used for visual affordance.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    badge!: Array<HTMLElement>;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine(): Promise<void> {\n    UDExAvatar.i18nBundle = await getI18nBundle(\"sap-ui-webcomponents-bundle\");\n  }\n\n  handleClick(e: Event) {\n    e.stopPropagation();\n    if (this.interactive) {\n      this.fireEvent(\"click\");\n    }\n  }\n\n  get getUI5AvatarColorScheme(): string {\n    return udexToUi5ColorSchemeMap[this.colorScheme];\n  }\n\n  get imageSlot(): boolean {\n    return !!this.image.length;\n  }\n\n  get badgeSlot(): boolean {\n    return !!this.badge.length;\n  }\n\n  get udexAvatarClass(): string {\n    let avatarClass = \"udex-avatar\";\n\n    if (this.imageSlot) {\n      avatarClass += \" udex-avatar--with-image\";\n    }\n\n    return avatarClass;\n  }\n\n  get avatarAccessibleName(): string {\n    return `${this.accessibleName ? this.accessibleName : UDExAvatar.i18nBundle.getText(AVATAR_TEXT)} ${this.disabled ? UDExAvatar.i18nBundle.getText(DISABLED) : \"\"}`;\n  }\n}\n\nUDExAvatar.define();\n\nexport default UDExAvatar;\n"]}

package/dist/Badge.d.ts

@@ -0,0 +1,78 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import "@ui5/webcomponents/dist/Badge.js";
+export declare enum BadgeType {
+    text = "Text",
+    number = "Number"
+}
+export declare enum BadgeSize {
+    small = "Small",
+    large = "Large"
+}
+export declare enum BadgeTextDesign {
+    Info = "Info",
+    Success = "Success",
+    Error = "Error",
+    Warning = "Warning"
+}
+export declare enum BadgeNumberDesign {
+    Blue = "Blue",
+    Red = "Red",
+    White = "White"
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-badge</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/Badge.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExBadge extends UI5Element {
+    /**
+     * Defines the type of the component.
+     *
+     * @default "Text"
+     * @public
+     */
+    type: `${BadgeType}`;
+    /**
+     * Defines the size of the component.
+     *
+     * @default "Large"
+     * @public
+     */
+    size: `${BadgeSize}`;
+    /**
+     * Defines the design of text type component.
+     *
+     * @default "Info"
+     * @public
+     */
+    design: `${BadgeTextDesign}`;
+    /**
+     * Defines the design of number type component.
+     *
+     * @default "Blue"
+     * @public
+     */
+    numberDesign: `${BadgeNumberDesign}`;
+    /**
+     * Defines the content of the component.
+     *
+     * @public
+     */
+    default: Array<Node>;
+    get textType(): boolean;
+    get textClasses(): string;
+    get numberClasses(): string;
+}
+export default UDExBadge;

package/dist/Badge.js

@@ -0,0 +1,103 @@
+var __decorate = (this && this.__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;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import "@ui5/webcomponents/dist/Badge.js";
+import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
+// Styles
+import BadgeCss from "./generated/themes/Badge.css.js";
+export var BadgeType;
+(function (BadgeType) {
+    BadgeType["text"] = "Text";
+    BadgeType["number"] = "Number";
+})(BadgeType || (BadgeType = {}));
+export var BadgeSize;
+(function (BadgeSize) {
+    BadgeSize["small"] = "Small";
+    BadgeSize["large"] = "Large";
+})(BadgeSize || (BadgeSize = {}));
+export var BadgeTextDesign;
+(function (BadgeTextDesign) {
+    BadgeTextDesign["Info"] = "Info";
+    BadgeTextDesign["Success"] = "Success";
+    BadgeTextDesign["Error"] = "Error";
+    BadgeTextDesign["Warning"] = "Warning";
+})(BadgeTextDesign || (BadgeTextDesign = {}));
+export var BadgeNumberDesign;
+(function (BadgeNumberDesign) {
+    BadgeNumberDesign["Blue"] = "Blue";
+    BadgeNumberDesign["Red"] = "Red";
+    BadgeNumberDesign["White"] = "White";
+})(BadgeNumberDesign || (BadgeNumberDesign = {}));
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-badge</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/Badge.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExBadge = class UDExBadge extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the design of text type component.
+         *
+         * @default "Info"
+         * @public
+         */
+        this.design = BadgeTextDesign.Info;
+    }
+    get textType() {
+        return this.type === BadgeType.text;
+    }
+    get textClasses() {
+        return `udex-badge udex-badge--text udex-badge--${this.design.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;
+    }
+    get numberClasses() {
+        return `udex-badge udex-badge--number udex-badge--${this.numberDesign.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;
+    }
+};
+__decorate([
+    property({ defaultValue: BadgeType.text })
+], UDExBadge.prototype, "type", void 0);
+__decorate([
+    property({ defaultValue: BadgeSize.large })
+], UDExBadge.prototype, "size", void 0);
+__decorate([
+    property({ defaultValue: BadgeTextDesign.Info })
+], UDExBadge.prototype, "design", void 0);
+__decorate([
+    property({ defaultValue: BadgeNumberDesign.Blue })
+], UDExBadge.prototype, "numberDesign", void 0);
+__decorate([
+    slot({ type: Node, "default": true })
+], UDExBadge.prototype, "default", void 0);
+UDExBadge = __decorate([
+    customElement({
+        tag: "udex-badge",
+        renderer: litRender,
+        styles: BadgeCss,
+        template: BadgeTemplate,
+        dependencies: [],
+    })
+], UDExBadge);
+UDExBadge.define();
+export default UDExBadge;
+//# sourceMappingURL=Badge.js.map

package/dist/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,kCAAkC,CAAC;AAE1C,OAAO,aAAa,MAAM,4CAA4C,CAAC;AAEvE,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD,MAAM,CAAN,IAAY,SAGX;AAHD,WAAY,SAAS;IACnB,0BAAa,CAAA;IACb,8BAAiB,CAAA;AACnB,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAED,MAAM,CAAN,IAAY,SAGX;AAHD,WAAY,SAAS;IACnB,4BAAe,CAAA;IACf,4BAAe,CAAA;AACjB,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAED,MAAM,CAAN,IAAY,eAKX;AALD,WAAY,eAAe;IACzB,gCAAa,CAAA;IACb,sCAAmB,CAAA;IACnB,kCAAe,CAAA;IACf,sCAAmB,CAAA;AACrB,CAAC,EALW,eAAe,KAAf,eAAe,QAK1B;AAED,MAAM,CAAN,IAAY,iBAIX;AAJD,WAAY,iBAAiB;IAC3B,kCAAa,CAAA;IACb,gCAAW,CAAA;IACX,oCAAe,CAAA;AACjB,CAAC,EAJW,iBAAiB,KAAjB,iBAAiB,QAI5B;AAED;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAmBE;;;;;WAKG;QAED,WAAM,GAAyB,eAAe,CAAC,IAAI,CAAC;IA6BxD,CAAC;IAXC,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC;IACtC,CAAC;IAED,IAAI,WAAW;QACb,OAAO,2CAA2C,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IACvH,CAAC;IAED,IAAI,aAAa;QACf,OAAO,6CAA6C,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IAC/H,CAAC;CACF,CAAA;AA/CG;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;uCACnB;AAStB;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC;uCACpB;AAStB;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,eAAe,CAAC,IAAI,EAAE,CAAC;yCACK;AAQpD;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,iBAAiB,CAAC,IAAI,EAAE,CAAC;+CACX;AAQtC;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACd;AA1CpB,SAAS;IAPd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,QAAQ;QAChB,QAAQ,EAAE,aAAa;QACvB,YAAY,EAAE,EAAE;KACjB,CAAC;GACI,SAAS,CAuDd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport \"@ui5/webcomponents/dist/Badge.js\";\n\nimport BadgeTemplate from \"./generated/templates/BadgeTemplate.lit.js\";\n\n// Styles\nimport BadgeCss from \"./generated/themes/Badge.css.js\";\n\nexport enum BadgeType {\n  text = \"Text\",\n  number = \"Number\",\n}\n\nexport enum BadgeSize {\n  small = \"Small\",\n  large = \"Large\",\n}\n\nexport enum BadgeTextDesign {\n  Info = \"Info\",\n  Success = \"Success\",\n  Error = \"Error\",\n  Warning = \"Warning\",\n}\n\nexport enum BadgeNumberDesign {\n  Blue = \"Blue\",\n  Red = \"Red\",\n  White = \"White\",\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-badge</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/Badge.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-badge\",\n  renderer: litRender,\n  styles: BadgeCss,\n  template: BadgeTemplate,\n  dependencies: [],\n})\nclass UDExBadge extends UI5Element {\n  /**\n   * Defines the type of the component.\n   *\n   * @default \"Text\"\n   * @public\n   */\n  @property({ defaultValue: BadgeType.text })\n    type!: `${BadgeType}`;\n\n  /**\n   * Defines the size of the component.\n   *\n   * @default \"Large\"\n   * @public\n   */\n  @property({ defaultValue: BadgeSize.large })\n    size!: `${BadgeSize}`;\n\n  /**\n   * Defines the design of text type component.\n   *\n   * @default \"Info\"\n   * @public\n   */\n  @property({ defaultValue: BadgeTextDesign.Info })\n    design: `${BadgeTextDesign}` = BadgeTextDesign.Info;\n  /**\n   * Defines the design of number type component.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property({ defaultValue: BadgeNumberDesign.Blue })\n    numberDesign!: `${BadgeNumberDesign}`;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    default!: Array<Node>;\n\n  get textType(): boolean {\n    return this.type === BadgeType.text;\n  }\n\n  get textClasses(): string {\n    return `udex-badge udex-badge--text udex-badge--${this.design.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n\n  get numberClasses(): string {\n    return `udex-badge udex-badge--number udex-badge--${this.numberDesign.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n}\n\nUDExBadge.define();\n\nexport default UDExBadge;\n"]}

package/dist/Breadcrumbs.d.ts

@@ -0,0 +1,96 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { LinkClickEventDetail } from "@ui5/webcomponents/dist/Link.js";
+import ItemNavigation, { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UDExBreadcrumbsItem from "./BreadcrumbsItem.js";
+import Link from "./Link.js";
+import Dropdown from "./Dropdown.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import "@ui5/webcomponents-icons/dist/home.js";
+export type UDExBreadcrumbsItemClickEventDetail = {
+    item: UDExBreadcrumbsItem;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-breadcrumbs</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/Breadcrumbs.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExBreadcrumbs extends UI5Element {
+    /**
+     * Indicates if dropdown is opened
+     *
+     * @default false
+     * @private
+     */
+    _dropdownOpened: boolean;
+    /**
+     * Defines how many breadcrumb items should be visible
+     *
+     * @default 3
+     * @public
+     */
+    showItems?: number;
+    /**
+     * Defines the component items.
+     *
+     * **Note:** Use the `udex-breadcrumbs-item` component to define the desired items.
+     * @public
+     */
+    items: Array<UDExBreadcrumbsItem>;
+    responsivePopover?: Dropdown;
+    _itemNavigation?: ItemNavigation;
+    static i18nBundle: I18nBundle;
+    onBeforeRendering(): void;
+    _preprocessItems(): void;
+    _getResponsePopover(): Promise<Dropdown>;
+    /**
+     * Getter for the interactive element that opens the overflow
+     * @private
+     */
+    get _dropdownArrowLink(): Link;
+    /**
+     * Getter for the list of links corresponding to the abstract breadcrumb items
+     */
+    get _links(): Link[];
+    _getFocusableItems(): ITabbable[];
+    _initItemNavigation(): void;
+    onAfterRendering(): void;
+    _getItems(): UDExBreadcrumbsItem[];
+    _closeRespPopover(): void;
+    _openRespPopover(): Promise<void>;
+    _onDropdownLinkPress(e: CustomEvent<LinkClickEventDetail>): void;
+    _onLinkPress(e: CustomEvent<LinkClickEventDetail>): void;
+    _isItemVisible(item: UDExBreadcrumbsItem): boolean;
+    _afterDropdownOpen(): void;
+    _afterDropdownClose(): void;
+    get _visibleItems(): UDExBreadcrumbsItem[];
+    /**
+     * Getter for the list of abstract breadcrumb items to be rendered as links outside the overflow
+     */
+    get _linksData(): UDExBreadcrumbsItem[];
+    get _isOverflowEmpty(): boolean;
+    _toggleDropdown(): void;
+    get _dropdownItems(): UDExBreadcrumbsItem[];
+    get _triggerClass(): "" | "udex-breadcrumbs__trigger--opened";
+    get _accessibleNameText(): string;
+    get _dropdownArrowAccessibleNameText(): string;
+    _onfocusin(e: FocusEvent): void;
+    static onDefine(): Promise<void>;
+}
+export default UDExBreadcrumbs;