@ui5/webcomponents 0.0.0-4e00e5559 → 0.0.0-4e88b8243

package/dist/OptionCustom.js

@@ -0,0 +1,65 @@
+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 customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import ListItemBase from "./ListItemBase.js";
+// Template
+import OptionCustomTemplate from "./OptionCustomTemplate.js";
+// Styles
+import optionBaseCss from "./generated/themes/OptionBase.css.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-option-custom` component defines a custom content of an option in the `ui5-select`.
+ * A component to be the same way as the standard `ui5-option`.
+ * The component accepts arbitrary HTML content to allow full customization.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/OptionCustom.js";`
+ * @constructor
+ * @since 2.0.0
+ * @extends ListItemBase
+ * @implements {IOption}
+ * @public
+ */
+let OptionCustom = class OptionCustom extends ListItemBase {
+    get effectiveDisplayText() {
+        return this.displayText || this.textContent || "";
+    }
+};
+__decorate([
+    property()
+], OptionCustom.prototype, "displayText", void 0);
+__decorate([
+    property()
+], OptionCustom.prototype, "value", void 0);
+__decorate([
+    slot({ type: Node, "default": true, invalidateOnChildChange: true })
+], OptionCustom.prototype, "content", void 0);
+__decorate([
+    property()
+], OptionCustom.prototype, "tooltip", void 0);
+__decorate([
+    property({ type: Boolean })
+], OptionCustom.prototype, "selected", void 0);
+OptionCustom = __decorate([
+    customElement({
+        tag: "ui5-option-custom",
+        template: OptionCustomTemplate,
+        styles: [
+            ListItemBase.styles,
+            optionBaseCss,
+        ],
+    })
+], OptionCustom);
+OptionCustom.define();
+export default OptionCustom;
+//# sourceMappingURL=OptionCustom.js.map

package/dist/OptionCustom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionCustom.js","sourceRoot":"","sources":["../src/OptionCustom.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAE7C,WAAW;AACX,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAE7D,SAAS;AACT,OAAO,aAAa,MAAM,sCAAsC,CAAC;AAEjE;;;;;;;;;;;;;;;;;GAiBG;AASH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,YAAY;IA8CtC,IAAI,oBAAoB;QACvB,OAAO,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC;IACnD,CAAC;CACD,CAAA;AAvCA;IADC,QAAQ,EAAE;iDACU;AASrB;IADC,QAAQ,EAAE;2CACI;AASf;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;6CAC/C;AAQtB;IADC,QAAQ,EAAE;6CACM;AAQT;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACF;AA5CrB,YAAY;IARjB,aAAa,CAAC;QACd,GAAG,EAAE,mBAAmB;QACxB,QAAQ,EAAE,oBAAoB;QAC9B,MAAM,EAAE;YACP,YAAY,CAAC,MAAM;YACnB,aAAa;SACb;KACD,CAAC;GACI,YAAY,CAiDjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type { IOption } from \"./Select.js\";\nimport ListItemBase from \"./ListItemBase.js\";\n\n// Template\nimport OptionCustomTemplate from \"./OptionCustomTemplate.js\";\n\n// Styles\nimport optionBaseCss from \"./generated/themes/OptionBase.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-option-custom` component defines a custom content of an option in the `ui5-select`.\n * A component to be the same way as the standard `ui5-option`.\n * The component accepts arbitrary HTML content to allow full customization.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/OptionCustom.js\";`\n * @constructor\n * @since 2.0.0\n * @extends ListItemBase\n * @implements {IOption}\n * @public\n */\n@customElement({\n\ttag: \"ui5-option-custom\",\n\ttemplate: OptionCustomTemplate,\n\tstyles: [\n\t\tListItemBase.styles,\n\t\toptionBaseCss,\n\t],\n})\nclass OptionCustom extends ListItemBase implements IOption {\n\teventDetails!: ListItemBase[\"eventDetails\"];\n\n\t/**\n\t * Defines the text, displayed inside the `ui5-select` input filed\n\t * when the option gets selected.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tdisplayText?: string;\n\n\t/**\n\t * Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\n\t * For more information on HTML Form support, see the `name` property of `ui5-select`.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tvalue?: string;\n\n\t/**\n\t * Defines the text of the component.\n\t *\n\t * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true, invalidateOnChildChange: true })\n\tcontent!: Array<Node>;\n\n\t/**\n\t * Defines the tooltip of the option.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttooltip?: string;\n\n\t/**\n\t * Defines the selected state of the component.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdeclare selected: boolean;\n\n\tget effectiveDisplayText() {\n\t\treturn this.displayText || this.textContent || \"\";\n\t}\n}\n\nOptionCustom.define();\n\nexport default OptionCustom;\n"]}

package/dist/OptionCustomTemplate.d.ts

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

package/dist/OptionCustomTemplate.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
+export default function OptionCustomTemplate() {
+    return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option", title: this.tooltip });
+}
+function listItemContent() {
+    return _jsx("slot", {});
+}
+//# sourceMappingURL=OptionCustomTemplate.js.map

package/dist/OptionCustomTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionCustomTemplate.js","sourceRoot":"","sources":["../src/OptionCustomTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAG7D,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC3C,OAAO,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,eAAe,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;AACtG,CAAC;AAED,SAAS,eAAe;IACvB,OAAO,gBAAa,CAAC;AACtB,CAAC","sourcesContent":["import ListItemBaseTemplate from \"./ListItemBaseTemplate.js\";\nimport type OptionCustom from \"./OptionCustom.js\";\n\nexport default function OptionCustomTemplate(this: OptionCustom) {\n\treturn ListItemBaseTemplate.call(this, { listItemContent }, { role: \"option\", title: this.tooltip });\n}\n\nfunction listItemContent(this: OptionCustom) {\n\treturn <slot></slot>;\n}\n"]}

package/dist/OptionTemplate.d.ts

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

package/dist/OptionTemplate.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "./Icon.js";
+import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
+export default function OptionTemplate() {
+    return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option", title: this.tooltip });
+}
+function listItemContent() {
+    return (_jsxs("div", { part: "content", id: `${this._id}-content`, class: "ui5-li-content", children: [this.displayIconBegin &&
+                _jsx(Icon, { part: "icon", name: this.icon, class: "ui5-li-icon", mode: "Decorative" }), _jsxs("div", { class: "ui5-li-text-wrapper", children: [_jsx("span", { part: "title", class: "ui5-li-title", children: _jsx("slot", {}) }), this.additionalText &&
+                        _jsx("span", { part: "additional-text", class: "ui5-li-additional-text", children: this.additionalText })] })] }));
+}
+//# sourceMappingURL=OptionTemplate.js.map

package/dist/OptionTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionTemplate.js","sourceRoot":"","sources":["../src/OptionTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAG7D,MAAM,CAAC,OAAO,UAAU,cAAc;IACrC,OAAO,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,eAAe,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;AACtG,CAAC;AAED,SAAS,eAAe;IACvB,OAAO,CACN,eAAK,IAAI,EAAC,SAAS,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,EAAE,KAAK,EAAC,gBAAgB,aACnE,IAAI,CAAC,gBAAgB;gBACrB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,YAAY,GAAG,EAE5E,eAAK,KAAK,EAAC,qBAAqB,aAC/B,eAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,cAAc,YAAC,gBAAa,GAAO,EAC3D,IAAI,CAAC,cAAc;wBACnB,eAAM,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,wBAAwB,YAAE,IAAI,CAAC,cAAc,GAAQ,IAEpF,IACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import Icon from \"./Icon.js\";\nimport ListItemBaseTemplate from \"./ListItemBaseTemplate.js\";\nimport type Option from \"./Option.js\";\n\nexport default function OptionTemplate(this: Option) {\n\treturn ListItemBaseTemplate.call(this, { listItemContent }, { role: \"option\", title: this.tooltip });\n}\n\nfunction listItemContent(this: Option) {\n\treturn (\n\t\t<div part=\"content\" id={`${this._id}-content`} class=\"ui5-li-content\">\n\t\t\t{this.displayIconBegin &&\n\t\t\t\t<Icon part=\"icon\" name={this.icon} class=\"ui5-li-icon\" mode=\"Decorative\" />\n\t\t\t}\n\t\t\t<div class=\"ui5-li-text-wrapper\">\n\t\t\t\t<span part=\"title\" class=\"ui5-li-title\"><slot></slot></span>\n\t\t\t\t{this.additionalText &&\n\t\t\t\t\t<span part=\"additional-text\" class=\"ui5-li-additional-text\">{this.additionalText}</span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/dist/Panel.d.ts

@@ -0,0 +1,184 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type TitleLevel from "./types/TitleLevel.js";
+import type PanelAccessibleRole from "./types/PanelAccessibleRole.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-panel` component is a container which has a header and a
+ * content area and is used
+ * for grouping and displaying information. It can be collapsed to save space on the screen.
+ *
+ * ### Guidelines:
+ *
+ * - Nesting two or more panels is not recommended.
+ * - Do not stack too many panels on one page.
+ *
+ * ### Structure
+ * The panel's header area consists of a title bar with a header text or custom header.
+ *
+ * The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.
+ *
+ * The custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.
+ *
+ * The content area can contain an arbitrary set of controls.
+ *
+ * **Note:** The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.
+ *
+ * ### Responsive Behavior
+ *
+ * - If the width of the panel is set to 100% (default), the panel and its children are
+ * resized responsively,
+ * depending on its parent container.
+ * - If the panel has a fixed height, it will take up the space even if the panel is
+ * collapsed.
+ * - When the panel is expandable (the `fixed` property is set to `false`),
+ * an arrow icon (pointing to the right) appears in front of the header.
+ * - When the animation is activated, expand/collapse uses a smooth animation to open or
+ * close the content area.
+ * - When the panel expands/collapses, the arrow icon rotates 90 degrees
+ * clockwise/counter-clockwise.
+ *
+ * ### Keyboard Handling
+ *
+ * #### Fast Navigation
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
+ * In order to use this functionality, you need to import the following module:
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Panel.js";`
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @slot {Array<Node>} default - Defines the content of the component. The content is visible only when the component is expanded.
+ * @csspart header - Used to style the wrapper of the header.
+ * @csspart content - Used to style the wrapper of the content.
+ */
+declare class Panel extends UI5Element {
+    eventDetails: {
+        toggle: void;
+    };
+    /**
+     * This property is used to set the header text of the component.
+     * The text is visible in both expanded and collapsed states.
+     *
+     * **Note:** This property is overridden by the `header` slot.
+     * @default undefined
+     * @public
+     */
+    headerText?: string;
+    /**
+     * Determines whether the component is in a fixed state that is not
+     * expandable/collapsible by user interaction.
+     * @default false
+     * @public
+     */
+    fixed: boolean;
+    /**
+     * Indicates whether the component is collapsed and only the header is displayed.
+     * @default false
+     * @public
+     */
+    collapsed: boolean;
+    /**
+     * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.
+     * @default false
+     * @public
+     * @since 1.0.0-rc.16
+     */
+    noAnimation: boolean;
+    /**
+     * Sets the accessible ARIA role of the component.
+     * Depending on the usage, you can change the role from the default `Form`
+     * to `Region` or `Complementary`.
+     * @default "Form"
+     * @public
+     */
+    accessibleRole: `${PanelAccessibleRole}`;
+    /**
+     * Defines the "aria-level" of component heading,
+     * set by the `headerText`.
+     * @default "H2"
+     * @public
+    */
+    headerLevel: `${TitleLevel}`;
+    /**
+     * Defines the accessible ARIA name of the component.
+     * @default undefined
+     * @public
+     * @since 1.0.0-rc.15
+     */
+    accessibleName?: string;
+    /**
+     * Indicates whether the Panel header is sticky or not.
+     * If stickyHeader is set to true, then whenever you scroll the content or
+     * the application, the header of the panel will be always visible and
+     * a solid color will be used for its design.
+     * @default false
+     * @public
+     * @since 1.16.0-rc.1
+     */
+    stickyHeader: boolean;
+    /**
+     * When set to `true`, the `accessibleName` property will be
+     * applied not only on the panel root itself, but on its toggle button too.
+     * **Note:** This property only has effect if `accessibleName` is set and a header slot is provided.
+     * @default false
+     * @private
+      */
+    useAccessibleNameForToggleButton: boolean;
+    /**
+     * @private
+     */
+    _hasHeader: boolean;
+    _contentExpanded: boolean;
+    _animationRunning: boolean;
+    /**
+     * Defines the component header area.
+     *
+     * **Note:** When a header is provided, the `headerText` property is ignored.
+     * @public
+     */
+    header: Array<HTMLElement>;
+    static i18nBundle: I18nBundle;
+    onBeforeRendering(): void;
+    shouldToggle(element: HTMLElement): boolean;
+    get shouldNotAnimate(): boolean;
+    _headerClick(e: MouseEvent): void;
+    _toggleButtonClick(e: MouseEvent): void;
+    _headerKeyDown(e: KeyboardEvent): void;
+    _headerKeyUp(e: KeyboardEvent): void;
+    _toggleOpen(): void;
+    _headerOnTarget(target: HTMLElement): boolean;
+    get toggleButtonTitle(): string;
+    get expanded(): boolean;
+    get accRole(): Lowercase<PanelAccessibleRole>;
+    get effectiveAccessibleName(): string | undefined;
+    get accInfo(): {
+        button: {
+            accessibilityAttributes: {
+                expanded: boolean;
+            };
+            title: string;
+            ariaLabelButton: string | undefined;
+        };
+        ariaExpanded: boolean | undefined;
+        ariaControls: string | undefined;
+        ariaLabelledby: string | undefined;
+        role: "button" | undefined;
+    };
+    get ariaLabelledbyReference(): string | undefined;
+    get fixedPanelAriaLabelledbyReference(): string | undefined;
+    get headerAriaLevel(): number;
+    get headerTabIndex(): 0 | -1;
+    get headingWrapperAriaLevel(): number | undefined;
+    get headingWrapperRole(): "heading" | undefined;
+    get nonFixedInternalHeader(): boolean;
+    get hasHeaderOrHeaderText(): string | true | undefined;
+    get nonFocusableButton(): boolean;
+}
+export default Panel;