@sapudex/web-components 2.10.0 → 2.11.0

package/dist/PromoTile.js

@@ -0,0 +1,198 @@
+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 UDExPromoTile_1;
+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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
+import PromoTileTemplate from "./PromoTileTemplate.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { PROMO_TILE, PROMO_TILE_ICON } from "./generated/i18n/i18n-defaults.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import { UDExPromoTileColorSheme, UDExPromoTileMode } from "./types/PromoTile.js";
+// Styles
+import PromoTileCss from "./generated/themes/PromoTile.css.js";
+export var UDExOrientation;
+(function (UDExOrientation) {
+    UDExOrientation["Vertical"] = "Vertical";
+    UDExOrientation["Horizontal"] = "Horizontal";
+})(UDExOrientation || (UDExOrientation = {}));
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-promo-tile</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/PromoTile.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-promo-tile
+ * @public
+ */
+let UDExPromoTile = UDExPromoTile_1 = class UDExPromoTile extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Defines the orientation of the Promo Tile component.
+         *
+         * @type {string}
+         * @defaultvalue "Vertical"
+         * @public
+         */
+        this.orientation = UDExOrientation.Vertical;
+        this._colorMode = UDExPromoTileMode.light;
+        this._lightModeColors = [1, 2];
+        this._darkModeColors = [7, 8, 9, 10];
+        this._handleResizeBound = this._handleResize.bind(this);
+    }
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+        ResizeHandler.register(this, this._handleResizeBound);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResizeBound);
+    }
+    onAfterRendering() {
+        this._button = this.getButton();
+        this.applyColorScheme();
+    }
+    _handleResize() {
+        if (this._button) {
+            this._button.size = this.isMobile ? UDExButtonSize.Medium : UDExButtonSize.Large;
+        }
+    }
+    getButton() {
+        return this.shadowRoot.querySelector("[udex-button]");
+    }
+    applyColorScheme() {
+        if (!this.colorScheme) {
+            return;
+        }
+        this._colorMode = this.checkColorMode(this.colorScheme);
+        const eyebrowColor = this.checkEyebrowColor(this.colorScheme);
+        if (this._colorMode === UDExPromoTileMode.dark) {
+            if (this._button) {
+                this._button.design = this.buttonDesign || UDExButtonDesign.Secondary;
+            }
+            this.style.setProperty("--udex-promo-tile-icon-fill-color", `var(--udexCoreTextLight)`);
+        }
+        this.style.setProperty("--udex-promo-tile-background", `var(--udexColor${this.colorScheme})`);
+        this.style.setProperty("--udex-promo-tile-eyebrow-color", `var(--udexColor${eyebrowColor})`);
+    }
+    getColorNumber(colorScheme) {
+        const match = colorScheme.match(/\d+/);
+        return match ? parseInt(match[0]) : 0;
+    }
+    checkColorMode(colorScheme) {
+        const number = this.getColorNumber(colorScheme);
+        if (number && this._darkModeColors.includes(number)) {
+            return UDExPromoTileMode.dark;
+        }
+        return UDExPromoTileMode.light;
+    }
+    checkEyebrowColor(colorScheme) {
+        const number = this.getColorNumber(colorScheme);
+        let color = UDExPromoTileColorSheme.Blue8;
+        if (number === 7) {
+            color = "NeutralWhite";
+        }
+        else if (this._darkModeColors.includes(number)) {
+            color = colorScheme.replace(`${number}`, `${number - 7}`);
+        }
+        else if (this._lightModeColors.includes(number)) {
+            color = colorScheme.replace(`${number}`, `${number + 7}`);
+        }
+        return color;
+    }
+    get isMobile() {
+        return BreakpointUtils.isAtMost("S");
+    }
+    get promoTileContainerText() {
+        return this.accessibleName || this.header || UDExPromoTile_1.i18nBundle.getText(PROMO_TILE);
+    }
+    get _showPictogram() {
+        return !!this.icon || !!this.logoUrl;
+    }
+    get _showLogo() {
+        return !this.icon && !!this.logoUrl;
+    }
+    get _imageLabel() {
+        return this.imageLabel || UDExPromoTile_1.i18nBundle.getText(PROMO_TILE_ICON);
+    }
+    handleCTAButtonClick(e) {
+        e.preventDefault();
+        this.fireDecoratorEvent("button-click");
+    }
+};
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], UDExPromoTile.prototype, "content", void 0);
+__decorate([
+    property({ type: String })
+], UDExPromoTile.prototype, "orientation", void 0);
+__decorate([
+    property({ type: String })
+], UDExPromoTile.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], UDExPromoTile.prototype, "imageLabel", void 0);
+__decorate([
+    property({ type: String })
+], UDExPromoTile.prototype, "logoUrl", void 0);
+__decorate([
+    property({ type: String })
+], UDExPromoTile.prototype, "header", void 0);
+__decorate([
+    property({ type: String })
+], UDExPromoTile.prototype, "eyebrow", void 0);
+__decorate([
+    property({ type: String })
+], UDExPromoTile.prototype, "button", void 0);
+__decorate([
+    property({ type: String })
+], UDExPromoTile.prototype, "buttonDesign", void 0);
+__decorate([
+    property({ type: String })
+], UDExPromoTile.prototype, "colorScheme", void 0);
+__decorate([
+    property({ type: String })
+], UDExPromoTile.prototype, "accessibleName", void 0);
+__decorate([
+    i18n("@sapudex/web-components")
+], UDExPromoTile, "i18nBundle", void 0);
+UDExPromoTile = UDExPromoTile_1 = __decorate([
+    customElement({
+        tag: "udex-promo-tile",
+        renderer: jsxRenderer,
+        styles: PromoTileCss,
+        template: PromoTileTemplate,
+    })
+    /**
+     * Triggered when the user clicks on the CTA button
+     *
+     * @public
+     */
+    ,
+    event("button-click", { cancelable: true, bubbles: true })
+], UDExPromoTile);
+UDExPromoTile.define();
+export default UDExPromoTile;
+//# sourceMappingURL=PromoTile.js.map

package/dist/PromoTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromoTile.js","sourceRoot":"","sources":["../src/PromoTile.ts"],"names":[],"mappings":"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","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 event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport PromoTileTemplate from \"./PromoTileTemplate.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { PROMO_TILE, PROMO_TILE_ICON } from \"./generated/i18n/i18n-defaults.js\";\nimport { BreakpointUtils } from \"./utils/Breakpoints.js\";\nimport type UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport { UDExPromoTileColorSheme, UDExPromoTileMode } from \"./types/PromoTile.js\";\n\n// Styles\nimport PromoTileCss from \"./generated/themes/PromoTile.css.js\";\n\nexport enum UDExOrientation {\n  Vertical = \"Vertical\",\n  Horizontal = \"Horizontal\",\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-promo-tile</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/PromoTile.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-promo-tile\n * @public\n */\n@customElement({\n  tag: \"udex-promo-tile\",\n  renderer: jsxRenderer,\n  styles: PromoTileCss,\n  template: PromoTileTemplate,\n})\n\n/**\n * Triggered when the user clicks on the CTA button\n *\n * @public\n */\n@event(\"button-click\", { cancelable: true, bubbles: true })\n\nclass UDExPromoTile extends UI5Element {\n  eventDetails!: {\n    \"button-click\": void,\n  };\n\n  /**\n   * Defines the text content of the Promo Tile.\n   *\n   * @slot content\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    content!: Array<HTMLElement>;\n\n  /**\n   * Defines the orientation of the Promo Tile component.\n   *\n   * @type {string}\n   * @defaultvalue \"Vertical\"\n   * @public\n   */\n  @property({ type: String })\n    orientation: `${UDExOrientation}` = UDExOrientation.Vertical;\n\n  /**\n   * Defines the UI5 icon name in the pictogram section.\n   *\n   * @type {string}\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String })\n    icon?: string;\n\n  /**\n   * Defines the image aria label and alt in the pictogram section.\n   *\n   * @type {string}\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String })\n    imageLabel?: string;\n\n  /**\n   * Defines the logo URL in the pictogram section.\n   *\n   * @type {string}\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String })\n    logoUrl?: string;\n\n  /**\n   * Defines the header text of the promo tile.\n   *\n   * @type {string}\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String })\n    header?: string;\n\n  /**\n   * Defines the eyebrow text of the promo tile.\n   *\n   * @type {string}\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String })\n    eyebrow?: string;\n\n  /**\n   * Defines the CTA button label\n   *\n   * @type {string}\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String })\n    button?: string;\n\n  /**\n   * Defines the CTA button design\n   *\n   * @type {string}\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String })\n    buttonDesign?: UDExButtonDesign;\n\n  /**\n   * Defines the color scheme of the Promo Tile.\n   *\n   * @type {string}\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String })\n    colorScheme?: UDExPromoTileColorSheme;\n\n  /**\n   * Defines the accessible name of the component.\n   *\n   * @type {string}\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String })\n    accessibleName?: string;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _handleResizeBound: ResizeObserverCallback;\n  _button: UDExButton | undefined;\n  _colorMode: UDExPromoTileMode = UDExPromoTileMode.light;\n  _lightModeColors: Array<number> = [1, 2];\n  _darkModeColors: Array<number> = [7, 8, 9, 10];\n\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n    ResizeHandler.register(this, this._handleResizeBound);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  onAfterRendering() {\n    this._button = this.getButton();\n    this.applyColorScheme();\n  }\n\n  _handleResize(): void {\n    if (this._button) {\n      this._button.size = this.isMobile ? UDExButtonSize.Medium : UDExButtonSize.Large;\n    }\n  }\n\n  getButton(): UDExButton | undefined {\n    return this.shadowRoot!.querySelector<UDExButton>(\n      \"[udex-button]\",\n    )!;\n  }\n\n  applyColorScheme(): void {\n    if (!this.colorScheme) {\n      return;\n    }\n\n    this._colorMode = this.checkColorMode(this.colorScheme);\n    const eyebrowColor = this.checkEyebrowColor(this.colorScheme);\n\n    if (this._colorMode === UDExPromoTileMode.dark) {\n      if (this._button) {\n        this._button.design = this.buttonDesign || UDExButtonDesign.Secondary;\n      }\n      this.style.setProperty(\"--udex-promo-tile-icon-fill-color\", `var(--udexCoreTextLight)`);\n    }\n    this.style.setProperty(\"--udex-promo-tile-background\", `var(--udexColor${this.colorScheme})`);\n    this.style.setProperty(\"--udex-promo-tile-eyebrow-color\", `var(--udexColor${eyebrowColor})`);\n  }\n\n  getColorNumber(colorScheme: string): number {\n    const match = colorScheme.match(/\\d+/);\n    return match ? parseInt(match[0]) : 0;\n  }\n\n  checkColorMode(colorScheme: string): UDExPromoTileMode {\n    const number = this.getColorNumber(colorScheme);\n\n    if (number && this._darkModeColors.includes(number)) {\n      return UDExPromoTileMode.dark;\n    }\n    return UDExPromoTileMode.light;\n  }\n\n  checkEyebrowColor(colorScheme: string): string {\n    const number = this.getColorNumber(colorScheme);\n    let color: string = UDExPromoTileColorSheme.Blue8;\n\n    if (number === 7) {\n      color = \"NeutralWhite\";\n    } else if (this._darkModeColors.includes(number)) {\n      color = colorScheme.replace(`${number}`, `${number - 7}`);\n    } else if (this._lightModeColors.includes(number)) {\n      color = colorScheme.replace(`${number}`, `${number + 7}`);\n    }\n    return color;\n  }\n\n  get isMobile(): boolean {\n    return BreakpointUtils.isAtMost(\"S\");\n  }\n\n  get promoTileContainerText(): string {\n    return this.accessibleName || this.header || UDExPromoTile.i18nBundle.getText(PROMO_TILE);\n  }\n\n  get _showPictogram(): boolean {\n    return !!this.icon || !!this.logoUrl;\n  }\n\n  get _showLogo(): boolean {\n    return !this.icon && !!this.logoUrl;\n  }\n\n  get _imageLabel(): string {\n    return this.imageLabel || UDExPromoTile.i18nBundle.getText(PROMO_TILE_ICON);\n  }\n\n  handleCTAButtonClick(e: Event) {\n    e.preventDefault();\n    this.fireDecoratorEvent(\"button-click\");\n  }\n}\n\nUDExPromoTile.define();\n\nexport default UDExPromoTile;\n"]}

package/dist/PromoTileTemplate.d.ts

@@ -0,0 +1,2 @@
+import type UDExPromoTile from "./PromoTile.js";
+export default function PromoTileTemplate(this: UDExPromoTile): import("@ui5/webcomponents-base").JSX.Element;

package/dist/PromoTileTemplate.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
+export default function PromoTileTemplate() {
+    const rootClass = "udex-promo-tile";
+    return (_jsxs("div", { role: "region", class: `${rootClass}__container ${rootClass}--${this.orientation?.toLowerCase()} ${rootClass}--${this._colorMode}`, "aria-label": this.promoTileContainerText, children: [this._showPictogram &&
+                _jsxs("div", { part: "image", class: {
+                        "udex-promo-tile__pictogram": true,
+                        "udex-promo-tile__pictogram--logo": this.logoUrl
+                    }, title: this._imageLabel, children: [this.icon &&
+                            _jsx(UI5Icon, { class: `${rootClass}__icon`, name: this.icon?.toLowerCase(), mode: IconMode.Decorative, accessibleName: this._imageLabel }), this._showLogo &&
+                            _jsx("img", { src: this.logoUrl, class: `${rootClass}__icon`, "aria-label": this._imageLabel, alt: this._imageLabel })] }), _jsxs("div", { part: "content", class: `${rootClass}__content`, children: [_jsxs("div", { class: `${rootClass}__text`, children: [this.eyebrow &&
+                                _jsx("div", { class: `${rootClass}__eyebrow eyebrow--l`, children: this.eyebrow }), this.header &&
+                                _jsx("div", { part: "header", class: `${rootClass}__header`, children: this.header }), _jsx("slot", {})] }), !!this.button && footerSection.call(this, rootClass)] })] }));
+}
+function footerSection(rootClass) {
+    return (_jsx(_Fragment, { children: _jsx("div", { part: "footer", class: `${rootClass}__footer`, children: _jsx(UDExButton, { class: `${rootClass}__btn`, size: UDExButtonSize.Large, design: this.buttonDesign, onClick: this.handleCTAButtonClick, accessibleRole: UDExButtonAccessibleRole.Button, children: this.button }) }) }));
+}
+//# sourceMappingURL=PromoTileTemplate.js.map

package/dist/PromoTileTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromoTileTemplate.js","sourceRoot":"","sources":["../src/PromoTileTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,QAAQ,MAAM,2CAA2C,CAAC;AACjE,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,wBAAwB,MAAM,iCAAiC,CAAC;AAEvE,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACvC,MAAM,SAAS,GAAG,iBAAiB,CAAC;IAEpC,OAAO,CACL,eACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,GAAG,SAAS,eAAe,SAAS,KAAK,IAAI,CAAC,WAAW,EAAE,WAAW,EAAE,IAAI,SAAS,KAAK,IAAI,CAAC,UAAU,EAAE,gBACtG,IAAI,CAAC,sBAAsB,aACtC,IAAI,CAAC,cAAc;gBAClB,eACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;wBACL,4BAA4B,EAAE,IAAI;wBAClC,kCAAkC,EAAE,IAAI,CAAC,OAAO;qBACjD,EACD,KAAK,EAAE,IAAI,CAAC,WAAW,aACtB,IAAI,CAAC,IAAI;4BACR,KAAC,OAAO,IACN,KAAK,EAAE,GAAG,SAAS,QAAQ,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,EAC9B,IAAI,EAAE,QAAQ,CAAC,UAAU,EACzB,cAAc,EAAE,IAAI,CAAC,WAAW,GACxB,EACX,IAAI,CAAC,SAAS;4BACb,cACE,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,KAAK,EAAE,GAAG,SAAS,QAAQ,gBACf,IAAI,CAAC,WAAW,EAC5B,GAAG,EAAE,IAAI,CAAC,WAAW,GAAI,IACzB,EAER,eAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,GAAG,SAAS,WAAW,aAChD,eAAK,KAAK,EAAE,GAAG,SAAS,QAAQ,aAC7B,IAAI,CAAC,OAAO;gCACX,cAAK,KAAK,EAAE,GAAG,SAAS,sBAAsB,YAAG,IAAI,CAAC,OAAO,GAAO,EAErE,IAAI,CAAC,MAAM;gCACV,cAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,GAAG,SAAS,UAAU,YAAG,IAAI,CAAC,MAAM,GAAO,EAEvE,gBAAa,IACT,EACL,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,IACjD,IACF,CACP,CAAC;AACJ,CAAC;AACD,SAAS,aAAa,CAAsB,SAAiB;IAC3D,OAAO,CACL,4BACE,cAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,GAAG,SAAS,UAAU,YAC9C,KAAC,UAAU,IAAC,KAAK,EAAE,GAAG,SAAS,OAAO,EACpC,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,cAAc,EAAE,wBAAwB,CAAC,MAAM,YAC9C,IAAI,CAAC,MAAM,GACD,GACT,GACL,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import type UDExPromoTile from \"./PromoTile.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport IconMode from \"@ui5/webcomponents/dist/types/IconMode.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonAccessibleRole from \"./types/ButtonAccessibleRole.js\";\n\nexport default function PromoTileTemplate(this: UDExPromoTile) {\n  const rootClass = \"udex-promo-tile\";\n\n  return (\n    <div\n      role=\"region\"\n      class={`${rootClass}__container ${rootClass}--${this.orientation?.toLowerCase()} ${rootClass}--${this._colorMode}`}\n      aria-label={this.promoTileContainerText}>\n      {this._showPictogram &&\n        <div\n          part=\"image\"\n          class={{\n            \"udex-promo-tile__pictogram\": true,\n            \"udex-promo-tile__pictogram--logo\": this.logoUrl\n          }}\n          title={this._imageLabel}>\n          {this.icon &&\n            <UI5Icon\n              class={`${rootClass}__icon`}\n              name={this.icon?.toLowerCase()}\n              mode={IconMode.Decorative}\n              accessibleName={this._imageLabel}>\n            </UI5Icon>}\n          {this._showLogo &&\n            <img\n              src={this.logoUrl}\n              class={`${rootClass}__icon`}\n              aria-label={this._imageLabel}\n              alt={this._imageLabel} />}\n        </div>\n      }\n      <div part=\"content\" class={`${rootClass}__content`}>\n        <div class={`${rootClass}__text`}>\n          {this.eyebrow &&\n            <div class={`${rootClass}__eyebrow eyebrow--l`}>{this.eyebrow}</div>\n          }\n          {this.header &&\n            <div part=\"header\" class={`${rootClass}__header`}>{this.header}</div>\n          }\n          <slot></slot>\n        </div>\n        {!!this.button && footerSection.call(this, rootClass)}\n      </div>\n    </div>\n  );\n}\nfunction footerSection(this: UDExPromoTile, rootClass: string) {\n  return (\n    <>\n      <div part=\"footer\" class={`${rootClass}__footer`}>\n        <UDExButton class={`${rootClass}__btn`}\n          size={UDExButtonSize.Large}\n          design={this.buttonDesign}\n          onClick={this.handleCTAButtonClick}\n          accessibleRole={UDExButtonAccessibleRole.Button}>\n          {this.button}\n        </UDExButton>\n      </div>\n    </>\n  );\n}\n"]}

package/dist/Quote.d.ts

@@ -7,6 +7,10 @@ export declare enum UDExMaskType {
     avatar = "avatar",
     rectangle = "rectangle"
 }
+export declare enum UDExImagePlacement {
+    left = "left",
+    right = "right"
+}
 /**
  * @class
  *
@@ -69,5 +73,12 @@ declare class UDExQuote extends UI5Element {
       * @default "avatar"
     */
     mask: `${UDExMaskType}`;
+    /**
+     * Defines image placement
+     *
+     * @public
+     * @default "left"
+     */
+    imagePlacement: `${UDExImagePlacement}`;
 }
 export default UDExQuote;

package/dist/Quote.js

@@ -23,6 +23,11 @@ export var UDExMaskType;
     UDExMaskType["avatar"] = "avatar";
     UDExMaskType["rectangle"] = "rectangle";
 })(UDExMaskType || (UDExMaskType = {}));
+export var UDExImagePlacement;
+(function (UDExImagePlacement) {
+    UDExImagePlacement["left"] = "left";
+    UDExImagePlacement["right"] = "right";
+})(UDExImagePlacement || (UDExImagePlacement = {}));
 /**
  * @class
  *
@@ -44,21 +49,28 @@ let UDExQuote = class UDExQuote extends UI5Element {
           * @public
           * @default "large"
         */
-        this.imageSize = "large";
+        this.imageSize = UDExSizeType.large;
         /**
           * Defines text size
           *
           * @public
           * @default "large"
         */
-        this.textSize = "large";
+        this.textSize = UDExSizeType.large;
         /**
           * Defines image mask
           *
           * @public
           * @default "avatar"
         */
-        this.mask = "avatar";
+        this.mask = UDExMaskType.avatar;
+        /**
+         * Defines image placement
+         *
+         * @public
+         * @default "left"
+         */
+        this.imagePlacement = UDExImagePlacement.left;
     }
 };
 __decorate([
@@ -82,6 +94,9 @@ __decorate([
 __decorate([
     property()
 ], UDExQuote.prototype, "mask", void 0);
+__decorate([
+    property()
+], UDExQuote.prototype, "imagePlacement", void 0);
 UDExQuote = __decorate([
     customElement({
         tag: "udex-quote",

package/dist/Quote.js.map

@@ -1 +1 @@
-{"version":3,"file":"Quote.js","sourceRoot":"","sources":["../src/Quote.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;AAE7E,WAAW;AACX,OAAO,aAAa,MAAM,4CAA4C,CAAC;AAEvE,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,+BAAe,CAAA;IACf,+BAAe,CAAA;AACjB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,iCAAiB,CAAA;IACjB,uCAAuB,CAAA;AACzB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAED;;;;;;;;;;;GAWG;AAOH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAqCE;;;;;UAKE;QAEA,cAAS,GAAsB,OAAO,CAAC;QAEzC;;;;;UAKE;QAEA,aAAQ,GAAsB,OAAO,CAAC;QAExC;;;;;UAKE;QAEA,SAAI,GAAsB,QAAQ,CAAC;IACvC,CAAC;CAAA,CAAA;AAvDG;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACd;AAS7B;IADD,IAAI,EAAE;uCACqB;AAS1B;IADD,IAAI,EAAE;yCACuB;AAS5B;IADD,IAAI,EAAE;wCACsB;AAS3B;IADD,QAAQ,EAAE;4CAC8B;AASvC;IADD,QAAQ,EAAE;2CAC6B;AAStC;IADD,QAAQ,EAAE;uCAC0B;AA9DjC,SAAS;IANd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,QAAQ;QAChB,QAAQ,EAAE,aAAa;KACxB,CAAC;GACI,SAAS,CA+Dd;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\";\n\n// Template\nimport QuoteTemplate from \"./generated/templates/QuoteTemplate.lit.js\";\n\n// Styles\nimport QuoteCss from \"./generated/themes/Quote.css.js\";\n\nexport enum UDExSizeType {\n  small = \"small\",\n  large = \"large\"\n}\n\nexport enum UDExMaskType {\n  avatar = \"avatar\",\n  rectangle = \"rectangle\"\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>udex-quote</code> component is a demo component that displays some text.\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-quote\n * @public\n */\n@customElement({\n  tag: \"udex-quote\",\n  renderer: litRender,\n  styles: QuoteCss,\n  template: QuoteTemplate,\n})\nclass UDExQuote extends UI5Element {\n  /**\n    * Defines the text content of the Quote.\n    *\n    * @slot content\n    * @public\n    */\n  @slot({ type: HTMLElement, \"default\": true })\n    content!: Array<HTMLElement>;\n\n  /**\n    * Defines the link in the Quote\n    *\n    * @slot\n    * @public\n  */\n  @slot()\n    link!: Array<HTMLElement>;\n\n  /**\n    * Defines author's name and company\n    *\n    * @public\n    * @slot\n  */\n  @slot()\n    author!: Array<HTMLElement>;\n\n  /**\n    * Defines image near quote text\n    *\n    * @public\n    * @slot\n  */\n  @slot()\n    image!: Array<HTMLElement>;\n\n  /**\n    * Defines image (Avatar or company logo) size\n    *\n    * @public\n    * @default \"large\"\n  */\n  @property()\n    imageSize: `${UDExSizeType}` = \"large\";\n\n  /**\n    * Defines text size\n    *\n    * @public\n    * @default \"large\"\n  */\n  @property()\n    textSize: `${UDExSizeType}` = \"large\";\n\n  /**\n    * Defines image mask\n    *\n    * @public\n    * @default \"avatar\"\n  */\n  @property()\n    mask: `${UDExMaskType}` = \"avatar\";\n}\n\nUDExQuote.define();\n\nexport default UDExQuote;\n"]}
+{"version":3,"file":"Quote.js","sourceRoot":"","sources":["../src/Quote.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;AAE7E,WAAW;AACX,OAAO,aAAa,MAAM,4CAA4C,CAAC;AAEvE,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,+BAAe,CAAA;IACf,+BAAe,CAAA;AACjB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,iCAAiB,CAAA;IACjB,uCAAuB,CAAA;AACzB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAED,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,qCAAe,CAAA;AACjB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED;;;;;;;;;;;GAWG;AAOH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAqCE;;;;;UAKE;QAEA,cAAS,GAAsB,YAAY,CAAC,KAAK,CAAC;QAEpD;;;;;UAKE;QAEA,aAAQ,GAAsB,YAAY,CAAC,KAAK,CAAC;QAEnD;;;;;UAKE;QAEA,SAAI,GAAsB,YAAY,CAAC,MAAM,CAAC;QAEhD;;;;;WAKG;QAED,mBAAc,GAA4B,kBAAkB,CAAC,IAAI,CAAC;IACtE,CAAC;CAAA,CAAA;AAhEG;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACd;AAS7B;IADD,IAAI,EAAE;uCACqB;AAS1B;IADD,IAAI,EAAE;yCACuB;AAS5B;IADD,IAAI,EAAE;wCACsB;AAS3B;IADD,QAAQ,EAAE;4CACyC;AASlD;IADD,QAAQ,EAAE;2CACwC;AASjD;IADD,QAAQ,EAAE;uCACqC;AAS9C;IADD,QAAQ,EAAE;iDACyD;AAvEhE,SAAS;IANd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,QAAQ;QAChB,QAAQ,EAAE,aAAa;KACxB,CAAC;GACI,SAAS,CAwEd;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\";\n\n// Template\nimport QuoteTemplate from \"./generated/templates/QuoteTemplate.lit.js\";\n\n// Styles\nimport QuoteCss from \"./generated/themes/Quote.css.js\";\n\nexport enum UDExSizeType {\n  small = \"small\",\n  large = \"large\"\n}\n\nexport enum UDExMaskType {\n  avatar = \"avatar\",\n  rectangle = \"rectangle\"\n}\n\nexport enum UDExImagePlacement {\n  left = \"left\",\n  right = \"right\"\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>udex-quote</code> component is a demo component that displays some text.\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-quote\n * @public\n */\n@customElement({\n  tag: \"udex-quote\",\n  renderer: litRender,\n  styles: QuoteCss,\n  template: QuoteTemplate,\n})\nclass UDExQuote extends UI5Element {\n  /**\n    * Defines the text content of the Quote.\n    *\n    * @slot content\n    * @public\n    */\n  @slot({ type: HTMLElement, \"default\": true })\n    content!: Array<HTMLElement>;\n\n  /**\n    * Defines the link in the Quote\n    *\n    * @slot\n    * @public\n  */\n  @slot()\n    link!: Array<HTMLElement>;\n\n  /**\n    * Defines author's name and company\n    *\n    * @public\n    * @slot\n  */\n  @slot()\n    author!: Array<HTMLElement>;\n\n  /**\n    * Defines image near quote text\n    *\n    * @public\n    * @slot\n  */\n  @slot()\n    image!: Array<HTMLElement>;\n\n  /**\n    * Defines image (Avatar or company logo) size\n    *\n    * @public\n    * @default \"large\"\n  */\n  @property()\n    imageSize: `${UDExSizeType}` = UDExSizeType.large;\n\n  /**\n    * Defines text size\n    *\n    * @public\n    * @default \"large\"\n  */\n  @property()\n    textSize: `${UDExSizeType}` = UDExSizeType.large;\n\n  /**\n    * Defines image mask\n    *\n    * @public\n    * @default \"avatar\"\n  */\n  @property()\n    mask: `${UDExMaskType}` = UDExMaskType.avatar;\n\n  /**\n   * Defines image placement\n   *\n   * @public\n   * @default \"left\"\n   */\n  @property()\n    imagePlacement: `${UDExImagePlacement}` = UDExImagePlacement.left;\n}\n\nUDExQuote.define();\n\nexport default UDExQuote;\n"]}

package/dist/Search.d.ts

@@ -395,7 +395,9 @@ declare class UDExSearch extends UI5Element {
     handleOutsideClick(): void;
     handleBlur(): void;
     handleSearchChange(e: InputEvent): void;
-    handleDebounce: (...args: any) => void;
+    handleDebounce: (() => void) & {
+        cancel: () => void;
+    };
     handleKeyDown: (e: KeyboardEvent) => void;
     handleEnterKey(e: KeyboardEvent): void;
     handleTabKey(e: KeyboardEvent): void;

package/dist/Search.js

@@ -408,6 +408,7 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
         this.handleSubmitValue();
     }
     handleSubmitValue() {
+        this.handleDebounce.cancel();
         this.onClosePopover();
         this.fireDecoratorEvent("submit-search-value", { value: this.value });
     }