@sapudex/web-components 0.111.0

package/src/Quote.ts

@@ -0,0 +1,108 @@
+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";
+
+// Template
+import QuoteTemplate from "./generated/templates/QuoteTemplate.lit.js";
+
+// Styles
+import QuoteCss from "./generated/themes/Quote.css.js";
+
+export enum SizeType {
+  small = "small",
+  large = "large"
+}
+
+export enum MaskType {
+  avatar = "avatar",
+  rectangle = "rectangle"
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>udex-quote</code> component is a demo component that displays some text.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-quote
+ * @public
+ */
+@customElement({
+  tag: "udex-quote",
+  renderer: litRender,
+  styles: QuoteCss,
+  template: QuoteTemplate,
+})
+class UDExQuote extends UI5Element {
+  /**
+    * Defines the text content of the Quote.
+    *
+    * @slot content
+    * @public
+    */
+  @slot({ type: HTMLElement, "default": true })
+    content!: Array<HTMLElement>;
+
+  /**
+    * Defines the link in the Quote
+    *
+    * @slot
+    * @public
+  */
+  @slot()
+    link!: Array<HTMLElement>;
+
+  /**
+    * Defines author's name and company
+    *
+    * @public
+    * @slot
+  */
+  @slot()
+    author!: Array<HTMLElement>;
+
+  /**
+    * Defines image near quote text
+    *
+    * @public
+    * @slot
+  */
+  @slot()
+    image!: Array<HTMLElement>;
+
+  /**
+    * Defines image (Avatar or company logo) size
+    *
+    * @public
+    * @default "large"
+  */
+  @property({ type: SizeType, defaultValue: "large" })
+    imageSize!: `${SizeType}`;
+
+  /**
+    * Defines text size
+    *
+    * @public
+    * @default "large"
+  */
+  @property({ type: SizeType, defaultValue: "large" })
+    textSize!: `${SizeType}`;
+
+  /**
+    * Defines image mask
+    *
+    * @public
+    * @default "avatar"
+  */
+  @property({ type: MaskType, defaultValue: "avatar" })
+    mask!: `${MaskType}`;
+}
+
+UDExQuote.define();
+
+export default UDExQuote;

package/src/RadioButton.ts

@@ -0,0 +1,51 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+
+import RadioButton from "@ui5/webcomponents/dist/RadioButton.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+
+// Styles
+import radioButtonCss from "@ui5/webcomponents/dist/generated/themes/RadioButton.css.js";
+import RadioButtonCss from "./generated/themes/RadioButton.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-radio-button</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/RadioButton.js";</code>
+ *
+ * @constructor
+ * @extends RadioButton
+ * @public
+ */
+@customElement({
+  tag: "udex-radio-button",
+  renderer: litRender,
+  styles: [radioButtonCss, RadioButtonCss],
+  dependencies: [RadioButton],
+})
+class UDExRadioButton extends RadioButton {
+  /**
+   * Define if arrow icons for last and first page are visible.
+   *
+   * @public
+   * @default false
+   */
+  @property({ type: Boolean })
+    displayOnly!: boolean;
+
+  onAfterRendering() {
+    this.readonly = this.readonly || this.displayOnly;
+  }
+}
+
+UDExRadioButton.define();
+
+export default UDExRadioButton;

package/src/RangeSlider.ts

@@ -0,0 +1,44 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import RangeSlider from "@ui5/webcomponents/dist/RangeSlider.js";
+import SliderBase from "@ui5/webcomponents/dist/SliderBase.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+
+// Styles
+import rangeSliderCss from "@ui5/webcomponents/dist/generated/themes/RangeSlider.css.js";
+import SliderCss from "./generated/themes/Slider.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-range-slider</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/RangeSlider.js";</code>
+ *
+ * @constructor
+ * @extends RangeSlider
+ * @public
+ */
+@customElement({
+  tag: "udex-range-slider",
+  renderer: litRender,
+  styles: [SliderBase.styles, rangeSliderCss, SliderCss],
+  dependencies: [],
+})
+class UDExRangeSlider extends RangeSlider {
+  onEnterDOM(): void {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+  }
+}
+
+UDExRangeSlider.define();
+
+export default UDExRangeSlider;

package/src/RatingIndicator.hbs

@@ -0,0 +1,53 @@
+<div class="udex-rating-indicator ui5-rating-indicator-root {{classNames}}"
+	role="slider"
+	aria-roledescription="{{_ariaRoleDescription}}"
+	aria-valuemin="0"
+	aria-valuenow="{{value}}"
+	aria-valuemax="{{max}}"
+	aria-valuetext="{{value}} of {{max}}"
+	aria-orientation="horizontal"
+	aria-disabled="{{_ariaDisabled}}"
+	aria-readonly="{{ariaReadonly}}"
+	aria-description="{{_ariaDescription}}"
+	tabindex="{{effectiveTabIndex}}"
+	@focusin="{{_onfocusin}}"
+	@focusout="{{_onfocusout}}"
+	@click="{{_onclick}}"
+	@keydown="{{_onkeydown}}"
+	title="{{ratingTooltip}}"
+	aria-label="{{_ariaLabel}}"
+>
+	<ul class="udex-rating-indicator__list ui5-rating-indicator-list"
+		aria-hidden="true"
+		>
+		{{#each _stars}}
+			{{#if this.selected}}
+				<li data-ui5-value="{{this.index}}" class="udex-rating-indicator__item udex-rating-indicator__item-sel ui5-rating-indicator-item ui5-rating-indicator-item-sel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
+			{{else if this.halfStar}}
+				<li class="udex-rating-indicator__item udex-rating-indicator__item-half ui5-rating-indicator-item ui5-rating-indicator-item-half">
+					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+					<div class="udex-rating-indicator__half-icon-wrapper ui5-rating-indicator-half-icon-wrapper">
+						<ui5-icon data-ui5-value="{{this.index}}" name="favorite" class="udex-rating-indicator__half-icon ui5-rating-indicator-half-icon"></ui5-icon>
+					</div>
+				</li>
+			{{else if ../readonly}}
+				<li class="udex-rating-indicator__item udex-rating-indicator__item-unsel ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+				</li>
+			{{else if ../disabled}}
+				<li class="udex-rating-indicator__item udex-rating-indicator__item-unsel ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+				</li>
+			{{else}}
+				<li data-ui5-value="{{this.index}}" class="udex-rating-indicator__item udex-rating-indicator__item-unsel ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+				</li>
+			{{/if}}
+		{{/each}}
+	</ul>
+  {{#if totalCount}}
+    <div class="udex-rating-indicator__total">&#40;{{totalCount}}&#41;</div>
+  {{/if}}
+</div>

package/src/RatingIndicator.ts

@@ -0,0 +1,73 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+
+import RatingIndicator from "@ui5/webcomponents/dist/RatingIndicator.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import RatingIndicatorTemplate from "./generated/templates/RatingIndicatorTemplate.lit.js";
+
+// Styles
+import RatingIndicatorCss from "./generated/themes/RatingIndicator.css.js";
+import { TOTAL } from "./generated/i18n/i18n-defaults.js";
+
+export enum DisplayType {
+  Desktop = "Desktop",
+  Mobile = "Mobile"
+}
+
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * ### ES6 Module Import
+ *
+ * `import @udex/web-components/dist/RatingIndicator.js";`
+ * @constructor
+ * @extends RatingIndicator
+ * @public
+ */
+
+@customElement({
+  tag: "udex-rating-indicator",
+  renderer: litRender,
+  styles: [RatingIndicator.styles, RatingIndicatorCss],
+  template: RatingIndicatorTemplate,
+  dependencies: [Icon],
+})
+
+class UDExRatingIndicator extends RatingIndicator {
+  /**
+   * Defines the display type of the component.
+   *
+   * @default "Desktop"
+   * @public
+   */
+  @property({ defaultValue: DisplayType.Desktop })
+    display!: `${DisplayType}`;
+
+  /**
+    * The number of total votes.
+    *
+    * @public
+    */
+  @property()
+    totalCount!: number;
+
+  get classNames(): string {
+    return `udex-rating-indicator--${this.display.toLowerCase()}`;
+  }
+
+  get _ariaLabel() {
+    const ariaLabelText = getEffectiveAriaLabelText(this);
+    if (this.totalCount) {
+      return `${ariaLabelText ? `${ariaLabelText}, ` : ""}${RatingIndicator.i18nBundle.getText(TOTAL)} ${this.totalCount}`;
+    }
+    return ariaLabelText;
+  }
+}
+
+UDExRatingIndicator.define();
+
+export default UDExRatingIndicator;

package/src/Search.hbs

@@ -0,0 +1,90 @@
+<div class="udex-search__root">
+    <form role="search" class="udex-search__container {{focusClasses}} {{isNotEmptyClass}}">
+        {{#if labelAnimationDisabled}}
+            <input
+                id="search-input"
+                type="search"
+                name="search"
+                class="udex-search__field"
+                autocomplete="off"
+                role="combobox"
+                aria-controls="suggestions-popover"
+                aria-expanded="false"
+                aria-haspopup="{{showSuggestedPopover}}"
+                placeholder="{{label}}"
+                .value="{{value}}"
+                @input="{{handleSearchChange}}"
+                @keydown="{{handleKeyDown}}"
+                @focus="{{handleFocus}}"
+                @focusout="{{handleFocusout}}"
+                @blur="{{handleBlur}}"
+                @click="{{handleInputClick}}"
+            />
+        {{else}}
+            {{#if label}}
+                <label for="search-input" class="{{labelClasses}}">
+                    {{label}}
+                </label>
+            {{/if}}
+            <input
+                id="search-input"
+                type="search"
+                name="search"
+                class="udex-search__field"
+                autocomplete="off"
+                role="combobox"
+                aria-label="{{accInfo.ariaLabel}}"
+                aria-controls="suggestions-popover"
+                aria-expanded="false"
+                aria-haspopup="{{showSuggestedPopover}}"
+                .value="{{value}}"
+                @input="{{handleSearchChange}}"
+                @keydown="{{handleKeyDown}}"
+                @focus="{{handleFocus}}"
+                @focusout="{{handleFocusout}}"
+                @blur="{{handleBlur}}"
+                @click="{{handleInputClick}}"
+            />
+        {{/if}}
+        <div class="udex-search__icons">
+            {{#if isShowResetButton}}
+                <ui5-button
+                    id="reset-button"
+                    class="udex-search__button udex-search__reset-button"
+                    design="Default"
+                    icon="decline"
+                    tooltip="Reset Button"
+                    @click="{{onReset}}"
+                    @keydown="{{handleKeyDownReset}}"
+                ></ui5-button>
+            {{/if}}
+            {{#if isVoiceButton}}
+                <ui5-button
+                    id="voice-button"
+                    class="udex-search__button udex-search__voice-button {{voiceActiveClass}}"
+                    design="Default"
+                    icon="microphone"
+                    tooltip="Voice Button"
+                    @click="{{onVoice}}"
+                ></ui5-button>
+            {{/if}}
+            {{#if showSubmitButton}}
+                {{#if nonInteractiveSubmitButton}}
+                    <ui5-icon
+                        class="udex-search__icon"
+                        name="search">
+                    </ui5-icon>
+                {{else}}
+                    <ui5-button
+                        id="submit-button"
+                        class="udex-search__button udex-search__submit-button {{searchButtonActiveClass}}"
+                        design="Default"
+                        icon="search"
+                        tooltip="Submit Button"
+                        @click="{{onSubmit}}"
+                    ></ui5-button>
+                {{/if}}
+            {{/if}}
+        </div>
+    </form>
+</div>