@ui5/webcomponents 0.0.0-201dc9cbe → 0.0.0-235d4ecde

package/dist/ToolbarButton.js

@@ -0,0 +1,112 @@
+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 property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import Button from "./Button.js";
+import ButtonDesign from "./types/ButtonDesign.js";
+import ToolbarItem from "./ToolbarItem.js";
+import ToolbarButtonTemplate from "./generated/templates/ToolbarButtonTemplate.lit.js";
+import ToolbarPopoverButtonTemplate from "./generated/templates/ToolbarPopoverButtonTemplate.lit.js";
+import ToolbarButtonPopoverCss from "./generated/themes/ToolbarButtonPopover.css.js";
+import { registerToolbarItem } from "./ToolbarRegistry.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-toolbar-button</code> represents an abstract action,
+ * used in the <code>ui5-toolbar</code>.
+ *
+ * <h3>ES6 Module Import</h3>
+ * <code>import "@ui5/webcomponents/dist/ToolbarButton";</code>
+ *
+ * @constructor
+ * @abstract
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarButton
+ * @extends sap.ui.webc.main.ToolbarItem
+ * @tagname ui5-toolbar-button
+ * @public
+ * @since 1.17.0
+ */
+let ToolbarButton = class ToolbarButton extends ToolbarItem {
+    static get staticAreaStyles() {
+        return ToolbarButtonPopoverCss;
+    }
+    get styles() {
+        return {
+            width: this.width,
+            display: this.hidden ? "none" : "inline-block",
+        };
+    }
+    get containsText() {
+        return true;
+    }
+    static get toolbarTemplate() {
+        return ToolbarButtonTemplate;
+    }
+    static get toolbarPopoverTemplate() {
+        return ToolbarPopoverButtonTemplate;
+    }
+    get subscribedEvents() {
+        const map = new Map();
+        map.set("click", { preventClosing: false });
+        return map;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], ToolbarButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })
+], ToolbarButton.prototype, "design", void 0);
+__decorate([
+    property()
+], ToolbarButton.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], ToolbarButton.prototype, "iconEnd", void 0);
+__decorate([
+    property()
+], ToolbarButton.prototype, "tooltip", void 0);
+__decorate([
+    property({ defaultValue: undefined })
+], ToolbarButton.prototype, "accessibleName", void 0);
+__decorate([
+    property({ defaultValue: "" })
+], ToolbarButton.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property({ type: Object })
+], ToolbarButton.prototype, "accessibilityAttributes", void 0);
+__decorate([
+    property()
+], ToolbarButton.prototype, "text", void 0);
+__decorate([
+    property()
+], ToolbarButton.prototype, "width", void 0);
+ToolbarButton = __decorate([
+    customElement({
+        tag: "ui5-toolbar-button",
+        dependencies: [Button],
+    })
+    /**
+     * Fired when the component is activated either with a
+     * mouse/tap or by using the Enter or Space key.
+     * <br><br>
+     * <b>Note:</b> The event will not be fired if the <code>disabled</code>
+     * property is set to <code>true</code>.
+     *
+     * @event sap.ui.webc.main.ToolbarButton#click
+     * @public
+     */
+    ,
+    event("click")
+], ToolbarButton);
+registerToolbarItem(ToolbarButton);
+ToolbarButton.define();
+export default ToolbarButton;
+//# sourceMappingURL=ToolbarButton.js.map

package/dist/ToolbarButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButton.js","sourceRoot":"","sources":["../src/ToolbarButton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAEnD,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAE3C,OAAO,qBAAqB,MAAM,oDAAoD,CAAC;AACvF,OAAO,4BAA4B,MAAM,2DAA2D,CAAC;AAErG,OAAO,uBAAuB,MAAM,gDAAgD,CAAC;AAErF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;GAkBG;AAiBH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAsJtC,MAAM,KAAK,gBAAgB;QAC1B,OAAO,uBAAuB,CAAC;IAChC,CAAC;IAED,IAAI,MAAM;QACT,OAAO;YACN,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc;SAC9C,CAAC;IACH,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC;IACb,CAAC;IAED,MAAM,KAAK,eAAe;QACzB,OAAO,qBAAqB,CAAC;IAC9B,CAAC;IAED,MAAM,KAAK,sBAAsB;QAChC,OAAO,4BAA4B,CAAC;IACrC,CAAC;IAED,IAAI,gBAAgB;QACnB,MAAM,GAAG,GAAG,IAAI,GAAG,EAAE,CAAC;QACtB,GAAG,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;QAC5C,OAAO,GAAG,CAAC;IACZ,CAAC;CACD,CAAA;AAtKA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACT;AAqBnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC,OAAO,EAAE,CAAC;6CAC1C;AAe3B;IADC,QAAQ,EAAE;2CACG;AAWd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACV;AAYlB;IADC,QAAQ,EAAE;8CACM;AAWjB;IADC,QAAQ,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;qDACd;AAWxB;IADC,QAAQ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;wDACJ;AA+B3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAC0G;AAUrI;IADC,QAAQ,EAAE;2CACG;AAcd;IADC,QAAQ,EAAE;4CACI;AApJV,aAAa;IAhBlB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;QACzB,YAAY,EAAE,CAAC,MAAM,CAAC;KACtB,CAAC;IAEF;;;;;;;;;OASG;;IACF,KAAK,CAAC,OAAO,CAAC;GACT,aAAa,CAkLlB;AAED,mBAAmB,CAAC,aAAa,CAAC,CAAC;AAEnC,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport Button from \"./Button.js\";\nimport ButtonDesign from \"./types/ButtonDesign.js\";\n\nimport ToolbarItem from \"./ToolbarItem.js\";\nimport type { IEventOptions } from \"./ToolbarItem.js\";\nimport ToolbarButtonTemplate from \"./generated/templates/ToolbarButtonTemplate.lit.js\";\nimport ToolbarPopoverButtonTemplate from \"./generated/templates/ToolbarPopoverButtonTemplate.lit.js\";\n\nimport ToolbarButtonPopoverCss from \"./generated/themes/ToolbarButtonPopover.css.js\";\n\nimport { registerToolbarItem } from \"./ToolbarRegistry.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-toolbar-button</code> represents an abstract action,\n * used in the <code>ui5-toolbar</code>.\n *\n * <h3>ES6 Module Import</h3>\n * <code>import \"@ui5/webcomponents/dist/ToolbarButton\";</code>\n *\n * @constructor\n * @abstract\n * @author SAP SE\n * @alias sap.ui.webc.main.ToolbarButton\n * @extends sap.ui.webc.main.ToolbarItem\n * @tagname ui5-toolbar-button\n * @public\n * @since 1.17.0\n */\n@customElement({\n\ttag: \"ui5-toolbar-button\",\n\tdependencies: [Button],\n})\n\n/**\n * Fired when the component is activated either with a\n * mouse/tap or by using the Enter or Space key.\n * <br><br>\n * <b>Note:</b> The event will not be fired if the <code>disabled</code>\n * property is set to <code>true</code>.\n *\n * @event sap.ui.webc.main.ToolbarButton#click\n * @public\n */\n@event(\"click\")\nclass ToolbarButton extends ToolbarItem {\n\t/**\n\t * Defines if the action is disabled.\n\t * <br><br>\n\t * <b>Note:</b> a disabled action can't be pressed or focused, and it is not in the tab chain.\n\t *\n\t * @type {boolean}\n\t * @defaultvalue false\n\t * @name sap.ui.webc.main.ToolbarButton.prototype.disabled\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines the action design.\n\t * <b>The available values are:</b>\n\t *\n\t * <ul>\n\t * <li><code>Default</code></li>\n\t * <li><code>Emphasized</code></li>\n\t * <li><code>Positive</code></li>\n\t * <li><code>Negative</code></li>\n\t * <li><code>Transparent</code></li>\n\t * <li><code>Attention</code></li>\n\t * </ul>\n\t *\n\t * @type {ButtonDesign}\n\t * @defaultvalue \"Default\"\n\t * @name sap.ui.webc.main.ToolbarButton.prototype.design\n\t * @public\n\t */\n\t@property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })\n\tdesign!: `${ButtonDesign}`;\n\n\t/**\n\t * Defines the <code>icon</code> source URI.\n\t * <br><br>\n\t * <b>Note:</b>\n\t * SAP-icons font provides numerous buil-in icons. To find all the available icons, see the\n\t * <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>.\n\t *\n\t * @type {string}\n\t * @defaultvalue \"\"\n\t * @name sap.ui.webc.main.ToolbarButton.prototype.icon\n\t * @public\n\t */\n\t@property()\n\ticon!: string;\n\n\t/**\n\t * Defines whether the icon should be displayed after the component text.\n\t *\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.ToolbarButton.prototype.iconEnd\n\t * @defaultvalue false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\ticonEnd!: boolean;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t * <br>\n\t * <b>Note:</b> A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.\n\t * @type {string}\n\t * @name sap.ui.webc.main.ToolbarButton.prototype.tooltip\n\t * @defaultvalue \"\"\n\t * @public\n\t */\n\t@property()\n\ttooltip!: string;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.ToolbarButton.prototype.accessibleName\n\t * @defaultvalue undefined\n\t * @public\n\t */\n\t@property({ defaultValue: undefined })\n\taccessibleName?: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the component.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.ToolbarButton.prototype.accessibleNameRef\n\t * @defaultvalue \"\"\n\t * @public\n\t */\n\t@property({ defaultValue: \"\" })\n\taccessibleNameRef!: string;\n\n\t/**\n\t * An object of strings that defines several additional accessibility attribute values\n\t * for customization depending on the use case.\n\t *\n\t * It supports the following fields:\n\t *\n\t * <ul>\n\t * \t\t<li><code>expanded</code>: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:\n\t *\t\t\t<ul>\n\t *\t\t\t\t<li><code>true</code></li>\n\t *\t\t\t\t<li><code>false</code></li>\n\t *\t\t\t</ul>\n\t * \t\t</li>\n\t * \t\t<li><code>hasPopup</code>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values:\n\t * \t\t\t<ul>\n\t *\t\t\t\t<li><code>Dialog</code></li>\n\t *\t\t\t\t<li><code>Grid</code></li>\n\t *\t\t\t\t<li><code>ListBox</code></li>\n\t *\t\t\t\t<li><code>Menu</code></li>\n\t *\t\t\t\t<li><code>Tree</code></li>\n\t * \t\t\t</ul>\n\t * \t\t</li>\n\t * \t\t<li><code>controls</code>: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.</li>\n\t * </ul>\n\t * @type {object}\n\t * @name sap.ui.webc.main.ToolbarButton.prototype.accessibilityAttributes\n\t * @public\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes!: { expanded: \"true\" | \"false\", hasPopup: \"Dialog\" | \"Grid\" | \"ListBox\" | \"Menu\" | \"Tree\", controls: string};\n\n\t/**\n\t * Button text\n\t * @public\n\t * @defaultvalue \"\"\n\t * @type {string}\n\t * @name sap.ui.webc.main.ToolbarButton.prototype.text\n\t */\n\t@property()\n\ttext!: string;\n\n\t/**\n\t * Defines the width of the button.\n\t * <br><br>\n\t *\n\t * <b>Note:</b> all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.\n\t *\n\t * @name sap.ui.webc.main.ToolbarButton.prototype.width\n\t * @defaultvalue \"\"\n\t * @type {string}\n\t * @public\n\t */\n\t@property()\n\twidth!: string;\n\n\tstatic get staticAreaStyles() {\n\t\treturn ToolbarButtonPopoverCss;\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\twidth: this.width,\n\t\t\tdisplay: this.hidden ? \"none\" : \"inline-block\",\n\t\t};\n\t}\n\n\tget containsText() {\n\t\treturn true;\n\t}\n\n\tstatic get toolbarTemplate() {\n\t\treturn ToolbarButtonTemplate;\n\t}\n\n\tstatic get toolbarPopoverTemplate() {\n\t\treturn ToolbarPopoverButtonTemplate;\n\t}\n\n\tget subscribedEvents(): Map<string, IEventOptions> {\n\t\tconst map = new Map();\n\t\tmap.set(\"click\", { preventClosing: false });\n\t\treturn map;\n\t}\n}\n\nregisterToolbarItem(ToolbarButton);\n\nToolbarButton.define();\n\nexport default ToolbarButton;\n"]}

package/dist/ToolbarItem.d.ts

@@ -0,0 +1,103 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { TemplateFunction } from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
+type IEventOptions = {
+    preventClosing: boolean;
+};
+interface IToolbarItem {
+    overflowPriority: `${ToolbarItemOverflowBehavior}`;
+    preventOverflowClosing: boolean;
+    ignoreSpace?: boolean;
+    containsText?: boolean;
+    hasFlexibleWidth?: boolean;
+    stableDomRef: string;
+}
+/**
+ * @class
+ *
+ * The <code>ui5-tb-item</code> represents an abstract class for items,
+ * used in the <code>ui5-toolbar</code>.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarItem
+ * @extends sap.ui.webc.base.UI5Element
+ * @abstract
+ * @public
+ * @since 1.17.0
+ */
+declare class ToolbarItem extends UI5Element implements IToolbarItem {
+    /**
+     * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set,
+     * the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it.
+     * Available options are:
+     * <ul>
+     * <li><code>NeverOverflow</code></li>
+     * <li><code>AlwaysOverflow</code></li>
+     * <li><code>Default</code></li>
+     * </ul>
+     * @public
+     * @name sap.ui.webc.main.ToolbarItem.prototype.overflowPriority
+     * @defaultvalue "Default"
+     * @type {ToolbarItemOverflowBehavior}
+     */
+    overflowPriority: `${ToolbarItemOverflowBehavior}`;
+    /**
+     * Defines if the toolbar overflow popup should close upon intereaction with the item.
+     * It will close by default.
+     * @type {Boolean}
+     * @defaultvalue false
+     * @public
+     * @name sap.ui.webc.main.ToolbarItem.prototype.preventOverflowClosing
+     */
+    preventOverflowClosing: boolean;
+    /**
+    * Defines if the width of the item should be ignored in calculating the whole width of the toolbar
+    * @returns {Boolean}
+    * @protected
+    */
+    get ignoreSpace(): boolean;
+    /**
+     * Returns if the item contains text. Used to position the text properly inside the popover.
+     * Aligned left if the item has text, default aligned otherwise.
+     * @protected
+     * @returns {Boolean}
+     */
+    get containsText(): boolean;
+    /**
+     * Returns if the item is flexible. An item that is returning true for this property will make
+     * the toolbar expand to fill the 100% width of its container.
+     * @protected
+     * @returns {Boolean}
+     */
+    get hasFlexibleWidth(): boolean;
+    /**
+     * Returns if the item is interactive.
+     * This value is used to determinate if the toolbar should have its accessibility role and attributes set.
+     * At least two interactive items are needed for the toolbar to have the role="toolbar" attribute set.
+     * @protected
+     * @returns {Boolean}
+     */
+    get isInteractive(): boolean;
+    /**
+     * Returns the template for the toolbar item.
+     * @protected
+     * @returns {TemplateFunction}
+     */
+    static get toolbarTemplate(): TemplateFunction;
+    /**
+     * Returns the template for the toolbar item popover.
+     * @protected
+     * @returns {TemplateFunction}
+     */
+    static get toolbarPopoverTemplate(): TemplateFunction;
+    /**
+     * Returns the events that the item is subscribed to.
+     * @protected
+     * @returns {Map}
+     */
+    get subscribedEvents(): Map<string, IEventOptions>;
+    get stableDomRef(): string;
+}
+export type { IToolbarItem, IEventOptions, };
+export default ToolbarItem;

package/dist/ToolbarItem.js

@@ -0,0 +1,96 @@
+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 property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
+/**
+ * @class
+ *
+ * The <code>ui5-tb-item</code> represents an abstract class for items,
+ * used in the <code>ui5-toolbar</code>.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarItem
+ * @extends sap.ui.webc.base.UI5Element
+ * @abstract
+ * @public
+ * @since 1.17.0
+ */
+class ToolbarItem extends UI5Element {
+    /**
+    * Defines if the width of the item should be ignored in calculating the whole width of the toolbar
+    * @returns {Boolean}
+    * @protected
+    */
+    get ignoreSpace() {
+        return false;
+    }
+    /**
+     * Returns if the item contains text. Used to position the text properly inside the popover.
+     * Aligned left if the item has text, default aligned otherwise.
+     * @protected
+     * @returns {Boolean}
+     */
+    get containsText() {
+        return false;
+    }
+    /**
+     * Returns if the item is flexible. An item that is returning true for this property will make
+     * the toolbar expand to fill the 100% width of its container.
+     * @protected
+     * @returns {Boolean}
+     */
+    get hasFlexibleWidth() {
+        return false;
+    }
+    /**
+     * Returns if the item is interactive.
+     * This value is used to determinate if the toolbar should have its accessibility role and attributes set.
+     * At least two interactive items are needed for the toolbar to have the role="toolbar" attribute set.
+     * @protected
+     * @returns {Boolean}
+     */
+    get isInteractive() {
+        return true;
+    }
+    /**
+     * Returns the template for the toolbar item.
+     * @protected
+     * @returns {TemplateFunction}
+     */
+    static get toolbarTemplate() {
+        throw new Error("Template must be defined");
+    }
+    /**
+     * Returns the template for the toolbar item popover.
+     * @protected
+     * @returns {TemplateFunction}
+     */
+    static get toolbarPopoverTemplate() {
+        throw new Error("Popover template must be defined");
+    }
+    /**
+     * Returns the events that the item is subscribed to.
+     * @protected
+     * @returns {Map}
+     */
+    get subscribedEvents() {
+        return new Map();
+    }
+    get stableDomRef() {
+        return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+    }
+}
+__decorate([
+    property({ type: ToolbarItemOverflowBehavior, defaultValue: ToolbarItemOverflowBehavior.Default })
+], ToolbarItem.prototype, "overflowPriority", void 0);
+__decorate([
+    property({ type: Boolean })
+], ToolbarItem.prototype, "preventOverflowClosing", void 0);
+export default ToolbarItem;
+//# sourceMappingURL=ToolbarItem.js.map

package/dist/ToolbarItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarItem.js","sourceRoot":"","sources":["../src/ToolbarItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E,OAAO,2BAA2B,MAAM,wCAAwC,CAAC;AAejF;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAY,SAAQ,UAAU;IA6BnC;;;;MAIE;IACF,IAAI,WAAW;QACd,OAAO,KAAK,CAAC;IACd,CAAC;IAED;;;;;OAKG;IACH,IAAI,YAAY;QACf,OAAO,KAAK,CAAC;IACd,CAAC;IAED;;;;;OAKG;IACH,IAAI,gBAAgB;QACnB,OAAO,KAAK,CAAC;IACd,CAAC;IAED;;;;;;OAMG;IACH,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC;IACb,CAAC;IAED;;;;OAIG;IACH,MAAM,KAAK,eAAe;QACzB,MAAM,IAAI,KAAK,CAAC,0BAA0B,CAAC,CAAC;IAC7C,CAAC;IAED;;;;OAIG;IACH,MAAM,KAAK,sBAAsB;QAChC,MAAM,IAAI,KAAK,CAAC,kCAAkC,CAAC,CAAC;IACrD,CAAC;IAED;;;;OAIG;IACH,IAAI,gBAAgB;QACnB,OAAO,IAAI,GAAG,EAAE,CAAC;IAClB,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;CACD;AAnFA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,2BAA2B,EAAE,YAAY,EAAE,2BAA2B,CAAC,OAAO,EAAE,CAAC;qDAC/C;AAWpD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DACK;AA8ElC,eAAe,WAAW,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport { TemplateFunction } from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\n\nimport ToolbarItemOverflowBehavior from \"./types/ToolbarItemOverflowBehavior.js\";\n\ntype IEventOptions = {\n\tpreventClosing: boolean;\n}\n\ninterface IToolbarItem {\n\toverflowPriority: `${ToolbarItemOverflowBehavior}`;\n\tpreventOverflowClosing: boolean;\n\tignoreSpace?: boolean;\n\tcontainsText?: boolean;\n\thasFlexibleWidth?: boolean;\n\tstableDomRef: string;\n}\n\n/**\n * @class\n *\n * The <code>ui5-tb-item</code> represents an abstract class for items,\n * used in the <code>ui5-toolbar</code>.\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.ToolbarItem\n * @extends sap.ui.webc.base.UI5Element\n * @abstract\n * @public\n * @since 1.17.0\n */\nclass ToolbarItem extends UI5Element implements IToolbarItem {\n\t/**\n\t * Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\n\t * the item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.\n\t * Available options are:\n\t * <ul>\n\t * <li><code>NeverOverflow</code></li>\n\t * <li><code>AlwaysOverflow</code></li>\n\t * <li><code>Default</code></li>\n\t * </ul>\n\t * @public\n\t * @name sap.ui.webc.main.ToolbarItem.prototype.overflowPriority\n\t * @defaultvalue \"Default\"\n\t * @type {ToolbarItemOverflowBehavior}\n\t */\n\t@property({ type: ToolbarItemOverflowBehavior, defaultValue: ToolbarItemOverflowBehavior.Default })\n\toverflowPriority!: `${ToolbarItemOverflowBehavior}`;\n\n\t/**\n\t * Defines if the toolbar overflow popup should close upon intereaction with the item.\n\t * It will close by default.\n\t * @type {Boolean}\n\t * @defaultvalue false\n\t * @public\n\t * @name sap.ui.webc.main.ToolbarItem.prototype.preventOverflowClosing\n\t */\n\t@property({ type: Boolean })\n\tpreventOverflowClosing!: boolean;\n\n\t/**\n\t* Defines if the width of the item should be ignored in calculating the whole width of the toolbar\n\t* @returns {Boolean}\n\t* @protected\n\t*/\n\tget ignoreSpace(): boolean {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns if the item contains text. Used to position the text properly inside the popover.\n\t * Aligned left if the item has text, default aligned otherwise.\n\t * @protected\n\t * @returns {Boolean}\n\t */\n\tget containsText(): boolean {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns if the item is flexible. An item that is returning true for this property will make\n\t * the toolbar expand to fill the 100% width of its container.\n\t * @protected\n\t * @returns {Boolean}\n\t */\n\tget hasFlexibleWidth(): boolean {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns if the item is interactive.\n\t * This value is used to determinate if the toolbar should have its accessibility role and attributes set.\n\t * At least two interactive items are needed for the toolbar to have the role=\"toolbar\" attribute set.\n\t * @protected\n\t * @returns {Boolean}\n\t */\n\tget isInteractive(): boolean {\n\t\treturn true;\n\t}\n\n\t/**\n\t * Returns the template for the toolbar item.\n\t * @protected\n\t * @returns {TemplateFunction}\n\t */\n\tstatic get toolbarTemplate(): TemplateFunction {\n\t\tthrow new Error(\"Template must be defined\");\n\t}\n\n\t/**\n\t * Returns the template for the toolbar item popover.\n\t * @protected\n\t * @returns {TemplateFunction}\n\t */\n\tstatic get toolbarPopoverTemplate(): TemplateFunction {\n\t\tthrow new Error(\"Popover template must be defined\");\n\t}\n\n\t/**\n\t * Returns the events that the item is subscribed to.\n\t * @protected\n\t * @returns {Map}\n\t */\n\tget subscribedEvents(): Map<string, IEventOptions> {\n\t\treturn new Map();\n\t}\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") || `${this._id}-stable-dom-ref`;\n\t}\n}\n\nexport type {\n\tIToolbarItem,\n\tIEventOptions,\n};\nexport default ToolbarItem;\n"]}

package/dist/ToolbarRegistry.d.ts

@@ -0,0 +1,7 @@
+import type IToolbarItem from "./ToolbarItem.js";
+declare const registerToolbarItem: (ElementClass: typeof IToolbarItem) => void;
+declare const getRegisteredToolbarItem: (name: string) => typeof IToolbarItem | undefined;
+declare const getRegisteredStyles: () => import("@ui5/webcomponents-base/dist/types.js").ComponentStylesData[];
+declare const getRegisteredStaticAreaStyles: () => import("@ui5/webcomponents-base/dist/types.js").ComponentStylesData[];
+declare const getRegisteredDependencies: () => typeof import("@ui5/webcomponents-base/dist/UI5Element.js").default[];
+export { registerToolbarItem, getRegisteredToolbarItem, getRegisteredStyles, getRegisteredStaticAreaStyles, getRegisteredDependencies, };

package/dist/ToolbarRegistry.js

@@ -0,0 +1,22 @@
+import getSharedResource from "@ui5/webcomponents-base/dist/getSharedResource.js";
+const registry = getSharedResource("ToolbarItem.registry", new Map());
+const registerToolbarItem = (ElementClass) => {
+    registry.set(ElementClass.name, ElementClass);
+};
+const getRegisteredToolbarItem = (name) => {
+    if (!registry.has(name)) {
+        throw new Error(`No template found for ${name}`);
+    }
+    return registry.get(name);
+};
+const getRegisteredStyles = () => {
+    return [...registry.values()].map((ElementClass) => ElementClass.styles);
+};
+const getRegisteredStaticAreaStyles = () => {
+    return [...registry.values()].map((ElementClass) => ElementClass.staticAreaStyles);
+};
+const getRegisteredDependencies = () => {
+    return [...registry.values()].map((ElementClass) => ElementClass.dependencies).flat();
+};
+export { registerToolbarItem, getRegisteredToolbarItem, getRegisteredStyles, getRegisteredStaticAreaStyles, getRegisteredDependencies, };
+//# sourceMappingURL=ToolbarRegistry.js.map

package/dist/ToolbarRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarRegistry.js","sourceRoot":"","sources":["../src/ToolbarRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,mDAAmD,CAAC;AAIlF,MAAM,QAAQ,GAAG,iBAAiB,CAAmC,sBAAsB,EAAE,IAAI,GAAG,EAAE,CAAC,CAAC;AAExG,MAAM,mBAAmB,GAAG,CAAC,YAAiC,EAAE,EAAE;IACjE,QAAQ,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;AAC/C,CAAC,CAAC;AAEF,MAAM,wBAAwB,GAAG,CAAC,IAAY,EAAE,EAAE;IACjD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QACxB,MAAM,IAAI,KAAK,CAAC,yBAAyB,IAAI,EAAE,CAAC,CAAC;KACjD;IAED,OAAO,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,GAAG,EAAE;IAChC,OAAO,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,YAAiC,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;AAC/F,CAAC,CAAC;AAEF,MAAM,6BAA6B,GAAG,GAAG,EAAE;IAC1C,OAAO,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,YAAiC,EAAE,EAAE,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;AACzG,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,GAAG,EAAE;IACtC,OAAO,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,YAAiC,EAAE,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC;AAC5G,CAAC,CAAC;AAEF,OAAO,EACN,mBAAmB,EACnB,wBAAwB,EACxB,mBAAmB,EACnB,6BAA6B,EAC7B,yBAAyB,GACzB,CAAC","sourcesContent":["import getSharedResource from \"@ui5/webcomponents-base/dist/getSharedResource.js\";\n\nimport type IToolbarItem from \"./ToolbarItem.js\";\n\nconst registry = getSharedResource<Map<string, typeof IToolbarItem>>(\"ToolbarItem.registry\", new Map());\n\nconst registerToolbarItem = (ElementClass: typeof IToolbarItem) => {\n\tregistry.set(ElementClass.name, ElementClass);\n};\n\nconst getRegisteredToolbarItem = (name: string) => {\n\tif (!registry.has(name)) {\n\t\tthrow new Error(`No template found for ${name}`);\n\t}\n\n\treturn registry.get(name);\n};\n\nconst getRegisteredStyles = () => {\n\treturn [...registry.values()].map((ElementClass: typeof IToolbarItem) => ElementClass.styles);\n};\n\nconst getRegisteredStaticAreaStyles = () => {\n\treturn [...registry.values()].map((ElementClass: typeof IToolbarItem) => ElementClass.staticAreaStyles);\n};\n\nconst getRegisteredDependencies = () => {\n\treturn [...registry.values()].map((ElementClass: typeof IToolbarItem) => ElementClass.dependencies).flat();\n};\n\nexport {\n\tregisterToolbarItem,\n\tgetRegisteredToolbarItem,\n\tgetRegisteredStyles,\n\tgetRegisteredStaticAreaStyles,\n\tgetRegisteredDependencies,\n};\n"]}

package/dist/ToolbarSelect.d.ts

@@ -0,0 +1,112 @@
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import ToolbarSelectTemplate from "./generated/templates/ToolbarSelectTemplate.lit.js";
+import ToolbarPopoverSelectTemplate from "./generated/templates/ToolbarPopoverSelectTemplate.lit.js";
+import ToolbarItem from "./ToolbarItem.js";
+import Option from "./Option.js";
+import "./ToolbarSelectOption.js";
+import type { SelectChangeEventDetail } from "./Select.js";
+type ToolbarSelectChangeEventDetail = SelectChangeEventDetail;
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-toolbar-select</code> component is used to create a toolbar drop-down list.
+ * The items inside the <code>ui5-toolbar-select</code> define the available options by using the <code>ui5-toolbar-select-option</code> component.
+ *
+ * <h3>ES6 Module Import</h3>
+ * <code>import "@ui5/webcomponents/dist/ToolbarSelect";</code>
+ * <br>
+ * <code>import "@ui5/webcomponents/dist/ToolbarSelectOption";</code> (comes with <code>ui5-toolbar-select</code>)
+ * @constructor
+ * @abstract
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarSelect
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-toolbar-select
+ * @appenddocs sap.ui.webc.main.ToolbarSelectOption
+ * @public
+ * @since 1.17.0
+ */
+declare class ToolbarSelect extends ToolbarItem {
+    /**
+     * Defines the width of the select.
+     * <br><br>
+     *
+     * <b>Note:</b> all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
+     *
+     * @name sap.ui.webc.main.ToolbarSelect.prototype.width
+     * @defaultvalue ""
+     * @type {string}
+     * @public
+     */
+    width: string;
+    /**
+     * Defines the component options.
+     *
+     * <br><br>
+     * <b>Note:</b> Only one selected option is allowed.
+     * If more than one option is defined as selected, the last one would be considered as the selected one.
+     *
+     * <br><br>
+     * <b>Note:</b> Use the <code>ui5-toolbar-select-option</code> component to define the desired options.
+     * @type {sap.ui.webc.main.ISelectOption[]}
+     * @slot options
+     * @name sap.ui.webc.main.ToolbarSelect.prototype.default
+     * @public
+     */
+    options: Array<Option>;
+    /**
+     * Defines the value state of the component.
+     * <br><br>
+     *
+     * @type {sap.ui.webc.base.types.ValueState}
+     * @defaultvalue "None"
+     * @name sap.ui.webc.main.ToolbarSelect.prototype.valueState
+     * @public
+     */
+    valueState: `${ValueState}`;
+    /**
+     * Defines whether the component is in disabled state.
+     * <br><br>
+     * <b>Note:</b> A disabled component is noninteractive.
+     *
+     * @type {boolean}
+     * @defaultvalue false
+     * @name sap.ui.webc.main.ToolbarSelect.prototype.disabled
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Defines the accessible ARIA name of the component.
+     *
+     * @type {string}
+     * @public
+     * @defaultvalue ""
+     * @name sap.ui.webc.main.ToolbarSelect.prototype.accessibleName
+     */
+    accessibleName: string;
+    /**
+     * Receives id(or many ids) of the elements that label the select.
+     *
+     * @type {string}
+     * @defaultvalue ""
+     * @name sap.ui.webc.main.ToolbarSelect.prototype.accessibleNameRef
+     * @public
+     */
+    accessibleNameRef: string;
+    _onEvent: EventListener;
+    static get toolbarTemplate(): typeof ToolbarSelectTemplate;
+    static get toolbarPopoverTemplate(): typeof ToolbarPopoverSelectTemplate;
+    get subscribedEvents(): Map<any, any>;
+    constructor();
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    attachEventListeners(): void;
+    detachEventListeners(): void;
+    _onEventHandler(e: Event): void;
+    get styles(): {
+        width: string;
+    };
+}
+export default ToolbarSelect;
+export type { ToolbarSelectChangeEventDetail, };

package/dist/ToolbarSelect.js

@@ -0,0 +1,154 @@
+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 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.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { registerToolbarItem } from "./ToolbarRegistry.js";
+// Templates
+import ToolbarSelectTemplate from "./generated/templates/ToolbarSelectTemplate.lit.js";
+import ToolbarPopoverSelectTemplate from "./generated/templates/ToolbarPopoverSelectTemplate.lit.js";
+import ToolbarItem from "./ToolbarItem.js";
+import Select from "./Select.js";
+import Option from "./Option.js";
+import "./ToolbarSelectOption.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-toolbar-select</code> component is used to create a toolbar drop-down list.
+ * The items inside the <code>ui5-toolbar-select</code> define the available options by using the <code>ui5-toolbar-select-option</code> component.
+ *
+ * <h3>ES6 Module Import</h3>
+ * <code>import "@ui5/webcomponents/dist/ToolbarSelect";</code>
+ * <br>
+ * <code>import "@ui5/webcomponents/dist/ToolbarSelectOption";</code> (comes with <code>ui5-toolbar-select</code>)
+ * @constructor
+ * @abstract
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarSelect
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-toolbar-select
+ * @appenddocs sap.ui.webc.main.ToolbarSelectOption
+ * @public
+ * @since 1.17.0
+ */
+let ToolbarSelect = class ToolbarSelect extends ToolbarItem {
+    static get toolbarTemplate() {
+        return ToolbarSelectTemplate;
+    }
+    static get toolbarPopoverTemplate() {
+        return ToolbarPopoverSelectTemplate;
+    }
+    get subscribedEvents() {
+        const map = new Map();
+        map.set("click", { preventClosing: true });
+        map.set("change", { preventClosing: false });
+        map.set("open", { preventClosing: true });
+        map.set("close", { preventClosing: true });
+        return map;
+    }
+    constructor() {
+        super();
+        this._onEvent = this._onEventHandler.bind(this);
+    }
+    onEnterDOM() {
+        this.attachEventListeners();
+    }
+    onExitDOM() {
+        this.detachEventListeners();
+    }
+    attachEventListeners() {
+        [...this.subscribedEvents.keys()].forEach(e => {
+            this.addEventListener(e, this._onEvent);
+        });
+    }
+    detachEventListeners() {
+        [...this.subscribedEvents.keys()].forEach(e => {
+            this.removeEventListener(e, this._onEvent);
+        });
+    }
+    _onEventHandler(e) {
+        if (e.type === "change") {
+            // update options
+            const selectedOption = e.detail.selectedOption;
+            const selectedOptionIndex = Number(selectedOption?.getAttribute("data-ui5-external-action-item-index"));
+            this.options.forEach((option, index) => {
+                if (index === selectedOptionIndex) {
+                    option.setAttribute("selected", "");
+                }
+                else {
+                    option.removeAttribute("selected");
+                }
+            });
+        }
+    }
+    get styles() {
+        return {
+            width: this.width,
+        };
+    }
+};
+__decorate([
+    property()
+], ToolbarSelect.prototype, "width", void 0);
+__decorate([
+    slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
+], ToolbarSelect.prototype, "options", void 0);
+__decorate([
+    property({ type: ValueState, defaultValue: ValueState.None })
+], ToolbarSelect.prototype, "valueState", void 0);
+__decorate([
+    property({ type: Boolean })
+], ToolbarSelect.prototype, "disabled", void 0);
+__decorate([
+    property()
+], ToolbarSelect.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], ToolbarSelect.prototype, "accessibleNameRef", void 0);
+ToolbarSelect = __decorate([
+    customElement({
+        tag: "ui5-toolbar-select",
+        dependencies: [Select, Option],
+    })
+    /**
+     * Fired when the selected option changes.
+     *
+     * @event sap.ui.webc.main.ToolbarSelect#change
+     * @allowPreventDefault
+     * @param {HTMLElement} selectedOption the selected option.
+     * @public
+     */
+    ,
+    event("change", {
+        detail: {
+            selectedOption: { type: HTMLElement },
+        },
+    })
+    /**
+     * Fired after the component's dropdown menu opens.
+     *
+     * @event sap.ui.webc.main.ToolbarSelect#open
+     * @public
+     */
+    ,
+    event("open")
+    /**
+     * Fired after the component's dropdown menu closes.
+     *
+     * @event sap.ui.webc.main.ToolbarSelect#close
+     * @public
+     */
+    ,
+    event("close")
+], ToolbarSelect);
+registerToolbarItem(ToolbarSelect);
+ToolbarSelect.define();
+export default ToolbarSelect;
+//# sourceMappingURL=ToolbarSelect.js.map