@ui5/webcomponents 0.0.0-389bdbabc → 0.0.0-38f83ffef

package/dist/CarouselTemplate.d.ts

@@ -0,0 +1,2 @@
+import type Carousel from "./Carousel.js";
+export default function CarouselTemplate(this: Carousel): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/CarouselTemplate.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Button from "./Button.js";
+import slimArrowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+export default function CarouselTemplate() {
+    return (_jsxs("section", { class: {
+            "ui5-carousel-root": true,
+            [`ui5-carousel-background-${this._backgroundDesign}`]: true,
+        }, tabindex: 0, role: "list", "aria-label": this.ariaLabelTxt, "aria-roledescription": this._roleDescription, "aria-activedescendant": this.ariaActiveDescendant, onFocusIn: this._onfocusin, onKeyDown: this._onkeydown, onMouseOut: this._onmouseout, onMouseOver: this._onmouseover, children: [_jsxs("div", { class: this.classes.viewport, part: "content", children: [_jsx("div", { class: this.classes.content, style: { transform: `translateX(${this._isRTL ? "" : "-"}${this._selectedIndex * (this._itemWidth || 0)}px` }, children: this.items.map(itemInfo => _jsx("div", { id: itemInfo.id, class: {
+                                "ui5-carousel-item": true,
+                                "ui5-carousel-item--hidden": !itemInfo.selected,
+                            }, style: { width: `${this._itemWidth || 0}px` }, part: "item", role: "listitem", "aria-posinset": itemInfo.posinset, "aria-setsize": itemInfo.setsize, "aria-selected": itemInfo.selected, children: _jsx("slot", { name: itemInfo.item._individualSlot, tabindex: itemInfo.tabIndex }) })) }), this.showArrows.content &&
+                        _jsxs("div", { class: "ui5-carousel-navigation-arrows", children: [arrowBack.call(this), arrowForward.call(this)] })] }), this.renderNavigation &&
+                _jsxs("div", { class: this.classes.navigation, children: [this.showArrows.navigation && arrowBack.call(this), _jsx("div", { class: "ui5-carousel-navigation", children: !this.hidePageIndicator && navIndicator.call(this) }), this.showArrows.navigation && arrowForward.call(this)] })] }));
+}
+function arrowBack() {
+    return _jsx(Button, { icon: slimArrowLeft, tabindex: -1, tooltip: this.previousPageText, class: {
+            "ui5-carousel-navigation-button": true,
+            "ui5-carousel-navigation-button--hidden": !this.hasPrev
+        }, "data-ui5-arrow-back": true, onClick: this._navButtonClick });
+}
+function arrowForward() {
+    return _jsx(Button, { icon: slimArrowRight, tabindex: -1, tooltip: this.nextPageText, class: {
+            "ui5-carousel-navigation-button": true,
+            "ui5-carousel-navigation-button--hidden": !this.hasNext
+        }, "data-ui5-arrow-forward": true, onClick: this._navButtonClick });
+}
+function navIndicator() {
+    return this.isPageTypeDots ? this.dots.map(dot => _jsx("div", { role: "img", "aria-label": dot.ariaLabel, class: {
+            "ui5-carousel-navigation-dot": true,
+            "ui5-carousel-navigation-dot--active": dot.active
+        } }))
+        :
+            _jsxs("div", { dir: "auto", class: "ui5-carousel-navigation-text", children: [this.selectedIndexToShow, "\u00A0", this.ofText, "\u00A0", this.pagesCount] });
+}
+//# sourceMappingURL=CarouselTemplate.js.map

package/dist/CarouselTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselTemplate.js","sourceRoot":"","sources":["../src/CarouselTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type Carousel from \"./Carousel.js\";\nimport Button from \"./Button.js\";\nimport slimArrowLeft from \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nexport default function CarouselTemplate(this: Carousel) {\n\treturn (\n\t\t<section\n\t\t\tclass={{\n\t\t\t\t\"ui5-carousel-root\": true,\n\t\t\t\t[`ui5-carousel-background-${this._backgroundDesign}`]: true,\n\t\t\t}}\n\t\t\ttabindex={0}\n\t\t\trole=\"list\"\n\t\t\taria-label={this.ariaLabelTxt}\n\t\t\taria-roledescription={this._roleDescription}\n\t\t\taria-activedescendant={this.ariaActiveDescendant}\n\t\t\tonFocusIn={this._onfocusin}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonMouseOut={this._onmouseout}\n\t\t\tonMouseOver={this._onmouseover}\n\t\t>\n\t\t\t<div class={this.classes.viewport} part=\"content\">\n\t\t\t\t<div class={this.classes.content} style={{ transform: `translateX(${this._isRTL ? \"\" : \"-\"}${this._selectedIndex * (this._itemWidth || 0)}px` }}>\n\t\t\t\t\t{this.items.map(itemInfo =>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tid={itemInfo.id}\n\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\"ui5-carousel-item\": true,\n\t\t\t\t\t\t\t\t\"ui5-carousel-item--hidden\": !itemInfo.selected,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={{ width: `${this._itemWidth || 0}px` }}\n\t\t\t\t\t\t\tpart=\"item\"\n\t\t\t\t\t\t\trole=\"listitem\"\n\t\t\t\t\t\t\taria-posinset={itemInfo.posinset}\n\t\t\t\t\t\t\taria-setsize={itemInfo.setsize}\n\t\t\t\t\t\t\taria-selected = {itemInfo.selected}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot name={itemInfo.item._individualSlot} tabindex={itemInfo.tabIndex}></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{this.showArrows.content &&\n\t\t\t\t\t<div class=\"ui5-carousel-navigation-arrows\">\n\t\t\t\t\t\t{arrowBack.call(this)}\n\t\t\t\t\t\t{arrowForward.call(this)}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t{this.renderNavigation &&\n\t\t\t\t<div class={this.classes.navigation}>\n\t\t\t\t\t{this.showArrows.navigation && arrowBack.call(this)}\n\n\t\t\t\t\t<div class=\"ui5-carousel-navigation\">\n\t\t\t\t\t\t{ !this.hidePageIndicator && navIndicator.call(this) }\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.showArrows.navigation && arrowForward.call(this)}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</section>\n\t);\n}\n\nfunction arrowBack(this: Carousel) {\n\treturn <Button\n\t\ticon={slimArrowLeft}\n\t\ttabindex={-1}\n\t\ttooltip={this.previousPageText}\n\t\tclass={{\n\t\t\t\"ui5-carousel-navigation-button\": true,\n\t\t\t\"ui5-carousel-navigation-button--hidden\": !this.hasPrev\n\t\t}}\n\t\tdata-ui5-arrow-back\n\t\tonClick={this._navButtonClick}\n\t/>;\n}\n\nfunction arrowForward(this: Carousel) {\n\treturn <Button\n\t\ticon={slimArrowRight}\n\t\ttabindex={-1}\n\t\ttooltip={this.nextPageText}\n\t\tclass={{\n\t\t\t\"ui5-carousel-navigation-button\": true,\n\t\t\t\"ui5-carousel-navigation-button--hidden\": !this.hasNext\n\t\t}}\n\t\tdata-ui5-arrow-forward\n\t\tonClick={this._navButtonClick}\n\t/>;\n}\n\nfunction navIndicator(this: Carousel) {\n\treturn this.isPageTypeDots ? this.dots.map(dot =>\n\t\t<div\n\t\t\trole=\"img\"\n\t\t\taria-label={dot.ariaLabel}\n\t\t\tclass={{\n\t\t\t\t\"ui5-carousel-navigation-dot\": true,\n\t\t\t\t\"ui5-carousel-navigation-dot--active\": dot.active\n\t\t\t}}\n\t\t></div>)\n\t\t:\n\t\t<div\n\t\t\tdir=\"auto\"\n\t\t\tclass=\"ui5-carousel-navigation-text\"\n\t\t>{this.selectedIndexToShow}&nbsp;{this.ofText}&nbsp;{this.pagesCount}</div>;\n}\n"]}

package/dist/CheckBox.d.ts

@@ -0,0 +1,206 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
+import type WrappingType from "./types/WrappingType.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * Allows the user to set a binary value, such as true/false or yes/no for an item.
+ *
+ * The `ui5-checkbox` component consists of a box and a label that describes its purpose.
+ * If it's checked, an indicator is displayed inside the box.
+ * To check/uncheck the `ui5-checkbox`, the user has to click or tap the square
+ * box or its label.
+ *
+ * The `ui5-checkbox` component only has 2 states - checked and unchecked.
+ * Clicking or tapping toggles the `ui5-checkbox` between checked and unchecked state.
+ *
+ * ### Usage
+ *
+ * You can define the checkbox text with via the `text` property. If the text exceeds the available width, it is truncated by default.
+ * In case you prefer text to truncate, set the `wrappingType` property to "None".
+ * The touchable area for toggling the `ui5-checkbox` ends where the text ends.
+ *
+ * You can disable the `ui5-checkbox` by setting the `disabled` property to
+ * `true`,
+ * or use the `ui5-checkbox` in read-only mode by setting the `readonly`
+ * property to `true`.
+ *
+ * ### Keyboard Handling
+ *
+ * The user can use the following keyboard shortcuts to toggle the checked state of the `ui5-checkbox`.
+ *
+ * - [Space],[Enter] - Toggles between different states: checked, not checked.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/CheckBox.js";`
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @csspart root - Used to style the outermost wrapper of the `ui5-checkbox`
+ * @csspart label - Used to style the label of the `ui5-checkbox`
+ * @csspart icon - Used to style the icon of the `ui5-checkbox`
+ */
+declare class CheckBox extends UI5Element implements IFormInputElement {
+    eventDetails: {
+        "change": void;
+        "value-changed": void;
+    };
+    /**
+     * Receives id(or many ids) of the elements that label the component
+     * @default undefined
+     * @public
+     * @since 1.1.0
+     */
+    accessibleNameRef?: string;
+    /**
+     * Defines the accessible ARIA name of the component.
+     * @public
+     * @default undefined
+     * @since 1.1.0
+     */
+    accessibleName?: string;
+    /**
+     * Defines whether the component is disabled.
+     *
+     * **Note:** A disabled component is completely noninteractive.
+     * @default false
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Defines whether the component is read-only.
+     *
+     * **Note:** A read-only component is not editable,
+     * but still provides visual feedback upon user interaction.
+     * @default false
+     * @public
+     */
+    readonly: boolean;
+    /**
+     * Determines whether the `ui5-checkbox` is in display only state.
+     *
+     * When set to `true`, the `ui5-checkbox` is not interactive, not editable, not focusable
+     * and not in the tab chain. This setting is used for forms in review mode.
+     *
+     * **Note:** When the property `disabled` is set to `true` this property has no effect.
+     * @since 1.22.0
+     * @public
+     * @default false
+     */
+    displayOnly: boolean;
+    /**
+     * Defines whether the component is required.
+     *
+     * **Note:** We advise against using the text property of the checkbox when there is a
+     * label associated with it to avoid having two required asterisks.
+     * @default false
+     * @public
+     * @since 1.3.0
+     */
+    required: boolean;
+    /**
+    * Defines whether the component is displayed as partially checked.
+    *
+    * **Note:** The indeterminate state can be set only programmatically and can’t be achieved by user
+    * interaction and the resulting visual state depends on the values of the `indeterminate`
+    * and `checked` properties:
+    *
+    * -  If the component is checked and indeterminate, it will be displayed as partially checked
+    * -  If the component is checked and it is not indeterminate, it will be displayed as checked
+    * -  If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute
+    * @default false
+    * @public
+    * @since 1.0.0-rc.15
+    */
+    indeterminate: boolean;
+    /**
+     * Defines if the component is checked.
+     *
+     * **Note:** The property can be changed with user interaction,
+     * either by cliking/tapping on the component, or by
+     * pressing the Enter or Space key.
+     * @default false
+     * @formEvents change
+     * @formProperty
+     * @public
+     */
+    checked: boolean;
+    /**
+     * Defines the text of the component.
+     * @default undefined
+     * @public
+     */
+    text?: string;
+    /**
+     * Defines the value state of the component.
+     * @default "None"
+     * @public
+     */
+    valueState: `${ValueState}`;
+    /**
+     * Defines whether the component text wraps when there is not enough space.
+     *
+     * **Note:** for option "Normal" the text will wrap and the words will not be broken based on hyphenation.
+     * **Note:** for option "None" the text will be truncated with an ellipsis.
+     * @default "Normal"
+     * @public
+     */
+    wrappingType: `${WrappingType}`;
+    /**
+     * Determines the name by which the component will be identified upon submission in an HTML form.
+     *
+     * **Note:** This property is only applicable within the context of an HTML Form element.
+     * @default undefined
+     * @public
+     */
+    name?: string;
+    /**
+     * Defines the active state (pressed or not) of the component.
+     * @private
+     */
+    active: boolean;
+    static i18nBundle: I18nBundle;
+    _deactivate: () => void;
+    get formValidityMessage(): string;
+    get formValidity(): ValidityStateFlags;
+    formElementAnchor(): Promise<HTMLElement | undefined>;
+    get formFormattedValue(): "on" | null;
+    constructor();
+    onEnterDOM(): void;
+    _onclick(): void;
+    _onmousedown(): void;
+    _onmouseup(): void;
+    _onfocusout(): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _onkeyup(e: KeyboardEvent): void;
+    toggle(): this;
+    canToggle(): boolean;
+    valueStateTextMappings(): {
+        Negative: string;
+        Critical: string;
+        Positive: string;
+    };
+    get ariaLabelText(): string | undefined;
+    get classes(): {
+        main: {
+            "ui5-checkbox--hoverable": boolean;
+        };
+    };
+    get ariaReadonly(): "true" | undefined;
+    get effectiveAriaDisabled(): "true" | undefined;
+    get effectiveAriaChecked(): boolean | "mixed";
+    get ariaLabelledBy(): string | undefined;
+    get ariaDescribedBy(): string | undefined;
+    get hasValueState(): boolean;
+    get valueStateText(): string | undefined;
+    get effectiveTabIndex(): number | undefined;
+    get tabbable(): boolean;
+    get isCompletelyChecked(): boolean;
+    get isDisplayOnly(): boolean;
+}
+export default CheckBox;