@ui5/webcomponents 0.0.0-b6f02e4b3 → 0.0.0-b93bc8b37

package/dist/MultiInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiInput.js","sourceRoot":"","sources":["../src/MultiInput.ts"],"names":[],"mappings":"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","sourcesContent":["import 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.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport {\n\tisShow,\n\tisBackSpace,\n\tisLeft,\n\tisRight,\n\tisRightCtrl,\n\tisHome,\n\tisEnd,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { MULTIINPUT_ROLEDESCRIPTION_TEXT } from \"./generated/i18n/i18n-defaults.js\";\nimport Input from \"./Input.js\";\nimport MultiInputTemplate from \"./generated/templates/MultiInputTemplate.lit.js\";\nimport styles from \"./generated/themes/MultiInput.css.js\";\nimport Token from \"./Token.js\";\nimport Tokenizer, { ClipboardDataOperation } from \"./Tokenizer.js\";\nimport type { TokenizerTokenDeleteEventDetail } from \"./Tokenizer.js\";\nimport Icon from \"./Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/value-help.js\";\n\ntype MultiInputTokenDeleteEventDetail = {\n\ttoken: Token;\n}\n\n/**\n * @class\n * <h3>Overview</h3>\n * A <code>ui5-multi-input</code> field allows the user to enter multiple values, which are displayed as <code>ui5-token</code>.\n *\n * User can choose interaction for creating tokens.\n * Fiori Guidelines say that user should create tokens when:\n * <ul>\n * <li>Type a value in the input and press enter or focus out the input field (<code>change</code> event is fired)</li>\n * <li>Select a value from the suggestion list (<code>suggestion-item-select</code> event is fired)</li>\n * </ul>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/MultiInput\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.MultiInput\n * @extends sap.ui.webc.main.Input\n * @tagname ui5-multi-input\n * @appenddocs sap.ui.webc.main.Token\n * @since 1.0.0-rc.9\n * @public\n */\n@customElement({\n\ttag: \"ui5-multi-input\",\n\trenderer: litRender,\n\ttemplate: MultiInputTemplate,\n\tstyles: [Input.styles, styles],\n\tdependencies: [\n\t\t...Input.dependencies,\n\t\tTokenizer,\n\t\tToken,\n\t\tIcon,\n\t],\n})\n/**\n * Fired when the value help icon is pressed\n * and F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.\n *\n * @event sap.ui.webc.main.MultiInput#value-help-trigger\n * @public\n */\n@event(\"value-help-trigger\")\n\n/**\n * Fired when a token is about to be deleted.\n *\n * @event sap.ui.webc.main.MultiInput#token-delete\n * @param {HTMLElement} token deleted token.\n * @public\n */\n@event(\"token-delete\", {\n\tdetail: {\n\t\ttoken: { type: HTMLElement },\n\t},\n})\n\nclass MultiInput extends Input {\n\t/**\n\t * Determines whether a value help icon will be visualized in the end of the input.\n\t * Pressing the icon will fire <code>value-help-trigger</code> event.\n\t *\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.MultiInput.prototype.showValueHelpIcon\n\t * @defaultvalue false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowValueHelpIcon!: boolean;\n\n\t/**\n\t * Indicates whether the tokenizer is expanded or collapsed(shows the n more label)\n\t * @defaultvalue false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\texpandedTokenizer!: boolean;\n\n\t/**\n\t * Indicates whether the tokenizer has tokens\n\t * @defaultvalue false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\ttokenizerAvailable!: boolean;\n\n\t/**\n\t * Defines the component tokens.\n\t *\n\t * @type {sap.ui.webc.main.IToken[]}\n\t * @name sap.ui.webc.main.MultiInput.prototype.tokens\n\t * @slot tokens\n\t * @public\n\t */\n\t@slot()\n\ttokens!: Array<Token>;\n\n\t_skipOpenSuggestions: boolean;\n\t_valueHelpIconPressed: boolean;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Prevent suggestions' opening.\n\t\tthis._skipOpenSuggestions = false;\n\t\tthis._valueHelpIconPressed = false;\n\t}\n\n\tvalueHelpPress() {\n\t\tthis.closePopover();\n\t\tthis.fireEvent(\"value-help-trigger\");\n\t}\n\n\tshowMorePress() {\n\t\tthis.expandedTokenizer = false;\n\t\tthis.focus();\n\t}\n\n\ttokenDelete(e: CustomEvent<TokenizerTokenDeleteEventDetail>) {\n\t\tconst focusedToken = e.detail.ref;\n\t\tconst selectedTokens = this.tokens.filter(token => token.selected);\n\t\tconst shouldFocusInput = this.tokens.length - 1 === 0 || this.tokens.length === selectedTokens.length;\n\n\t\tif (this._readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (focusedToken) {\n\t\t\tthis.fireEvent<MultiInputTokenDeleteEventDetail>(\"token-delete\", { token: focusedToken });\n\t\t\tif (shouldFocusInput) {\n\t\t\t\tthis.focus();\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tif (selectedTokens.indexOf(focusedToken) === -1) {\n\t\t\tselectedTokens.push(focusedToken);\n\t\t}\n\n\t\tselectedTokens.forEach(token => {\n\t\t\tthis.fireEvent(\"token-delete\", { token });\n\t\t});\n\t}\n\n\tvalueHelpMouseDown(e: MouseEvent) {\n\t\tconst target = e.target as Icon;\n\t\tthis.closePopover();\n\t\tthis.tokenizer.closeMorePopover();\n\t\tthis._valueHelpIconPressed = true;\n\t\ttarget.focus();\n\t}\n\n\t_tokenizerFocusOut(e: FocusEvent) {\n\t\tif (!this.contains(e.relatedTarget as HTMLElement)) {\n\t\t\tthis.tokenizer._tokens.forEach(token => { token.selected = false; });\n\t\t\tthis.tokenizer.scrollToStart();\n\t\t}\n\t}\n\n\tvalueHelpMouseUp() {\n\t\tsetTimeout(() => {\n\t\t\tthis._valueHelpIconPressed = false;\n\t\t}, 0);\n\t}\n\n\tinnerFocusIn() {\n\t\tthis.expandedTokenizer = true;\n\t\tthis.focused = true;\n\t\tthis.tokenizer.scrollToEnd();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tsuper._onkeydown(e);\n\n\t\tconst target = e.target as HTMLInputElement;\n\t\tconst isHomeInBeginning = isHome(e) && target.selectionStart === 0;\n\n\t\tif (isHomeInBeginning) {\n\t\t\tthis._skipOpenSuggestions = true; // Prevent input focus when navigating through the tokens\n\t\t\treturn this._focusFirstToken(e);\n\t\t}\n\n\t\tif (isLeft(e) || isBackSpace(e)) {\n\t\t\tthis._skipOpenSuggestions = true;\n\t\t\treturn this._handleLeft(e);\n\t\t}\n\n\t\tthis._skipOpenSuggestions = false;\n\n\t\tif (isShow(e)) {\n\t\t\tthis.valueHelpPress();\n\t\t}\n\t}\n\n\t_onTokenizerKeydown(e: KeyboardEvent) {\n\t\tconst rightCtrl = isRightCtrl(e);\n\t\tconst isCtrl = !!(e.metaKey || e.ctrlKey);\n\t\tconst tokens = this.tokens;\n\n\t\tif (isRight(e) || isEnd(e) || rightCtrl) {\n\t\t\te.preventDefault();\n\t\t\tconst lastTokenIndex = this.tokens.length - 1;\n\n\t\t\tif (e.target === this.tokens[lastTokenIndex] && this.tokens[lastTokenIndex] === document.activeElement) {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.focus();\n\t\t\t\t}, 0);\n\t\t\t} else if (rightCtrl) {\n\t\t\t\te.preventDefault();\n\t\t\t\treturn this.tokenizer._handleArrowCtrl(e, e.target as Token, this.tokens, true);\n\t\t\t}\n\t\t}\n\n\t\tif (isCtrl && [\"c\", \"x\"].includes(e.key.toLowerCase())) {\n\t\t\te.preventDefault();\n\n\t\t\tconst isCut = e.key.toLowerCase() === \"x\";\n\t\t\tconst selectedTokens = tokens.filter(token => token.selected);\n\n\t\t\tif (isCut) {\n\t\t\t\tconst cutResult = this.tokenizer._fillClipboard(ClipboardDataOperation.cut, selectedTokens);\n\n\t\t\t\tselectedTokens.forEach(token => {\n\t\t\t\t\tthis.fireEvent<MultiInputTokenDeleteEventDetail>(\"token-delete\", { token });\n\t\t\t\t});\n\n\t\t\t\tthis.focus();\n\n\t\t\t\treturn cutResult;\n\t\t\t}\n\n\t\t\treturn this.tokenizer._fillClipboard(ClipboardDataOperation.copy, selectedTokens);\n\t\t}\n\t}\n\n\t_handleLeft(e: KeyboardEvent) {\n\t\tconst cursorPosition = this.getDomRef()!.querySelector(`input`)!.selectionStart;\n\t\tconst tokens = this.tokens;\n\t\tconst lastToken = tokens.length && tokens[tokens.length - 1];\n\n\t\tif (cursorPosition === 0 && lastToken) {\n\t\t\te.preventDefault();\n\t\t\tlastToken.focus();\n\t\t\tthis.tokenizer._itemNav.setCurrentItem(lastToken);\n\t\t}\n\t}\n\n\t_focusFirstToken(e: KeyboardEvent) {\n\t\tconst tokens = this.tokens;\n\t\tconst firstToken = tokens.length && tokens[0];\n\n\t\tif (firstToken) {\n\t\t\te.preventDefault();\n\n\t\t\tfirstToken.focus();\n\t\t\tthis.tokenizer._itemNav.setCurrentItem(firstToken);\n\t\t}\n\t}\n\n\t_onfocusout(e: FocusEvent) {\n\t\tsuper._onfocusout(e);\n\t\tconst relatedTarget = e.relatedTarget as HTMLElement;\n\t\tconst insideDOM = this.contains(relatedTarget);\n\t\tconst insideShadowDom = this.shadowRoot!.contains(relatedTarget);\n\n\t\tif (!insideDOM && !insideShadowDom) {\n\t\t\tthis.expandedTokenizer = false;\n\n\t\t\t// we need to reset tabindex setting by tokenizer\n\t\t\tthis.tokenizer._itemNav._currentIndex = -1;\n\t\t}\n\t}\n\n\t/**\n\t * @override\n\t */\n\tasync _onfocusin(e: FocusEvent) {\n\t\tconst inputDomRef = await this.getInputDOMRef();\n\n\t\tif (e.target === inputDomRef) {\n\t\t\tawait super._onfocusin(e);\n\t\t}\n\t}\n\n\tlastItemDeleted() {\n\t\tsetTimeout(() => {\n\t\t\tthis.focus();\n\t\t}, 0);\n\t}\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\n\t\tthis.style.setProperty(\"--_ui5-input-icons-count\", `${this.iconsCount}`);\n\t\tthis.tokenizerAvailable = this.tokens && this.tokens.length > 0;\n\t}\n\n\tget iconsCount() {\n\t\treturn super.iconsCount + (this.showValueHelpIcon ? 1 : 0);\n\t}\n\n\tget tokenizer() {\n\t\treturn this.shadowRoot!.querySelector<Tokenizer>(\"[ui5-tokenizer]\")!;\n\t}\n\n\tget _tokensCountText() {\n\t\tif (!this.tokenizer) {\n\t\t\treturn;\n\t\t}\n\t\treturn this.tokenizer._tokensCountText();\n\t}\n\n\tget _tokensCountTextId() {\n\t\treturn `${this._id}-hiddenText-nMore`;\n\t}\n\n\t/**\n\t * Returns the placeholder value when there are no tokens.\n\t * @protected\n\t */\n\tget _placeholder() {\n\t\tif (this.tokenizer && this.tokenizer._tokens.length) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\treturn this.placeholder;\n\t}\n\n\tget accInfo() {\n\t\tconst ariaDescribedBy = `${this._tokensCountTextId} ${this.suggestionsTextId} ${this.valueStateTextId}`.trim();\n\t\treturn {\n\t\t\t\"input\": {\n\t\t\t\t...super.accInfo.input,\n\t\t\t\t\"ariaRoledescription\": this.ariaRoleDescription,\n\t\t\t\t\"ariaDescribedBy\": ariaDescribedBy,\n\t\t\t},\n\t\t};\n\t}\n\n\tget ariaRoleDescription() {\n\t\treturn MultiInput.i18nBundle.getText(MULTIINPUT_ROLEDESCRIPTION_TEXT);\n\t}\n}\n\nMultiInput.define();\n\nexport default MultiInput;\nexport { MultiInputTokenDeleteEventDetail };\n"]}

package/dist/Option.d.ts

@@ -0,0 +1,95 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { IOption } from "./Select.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-option</code> component defines the content of an option in the <code>ui5-select</code>.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.Option
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-option
+ * @implements sap.ui.webc.main.ISelectOption
+ * @public
+ */
+declare class Option extends UI5Element implements IOption {
+    /**
+     * Defines the selected state of the component.
+     * @type {boolean}
+     * @defaultvalue false
+     * @name sap.ui.webc.main.Option.prototype.selected
+     * @public
+     */
+    selected: boolean;
+    /**
+     * Defines whether the component is in disabled state.
+     * <br><br>
+     * <b>Note:</b> A disabled component is hidden.
+     * @type {boolean}
+     * @defaultvalue false
+     * @name sap.ui.webc.main.Option.prototype.disabled
+     * @public
+     * @since 1.0.0-rc.12
+     */
+    disabled: boolean;
+    /**
+     * Defines the tooltip of the component.
+     * @type {string}
+     * @defaultvalue ""
+     * @private
+     * @since 1.1.0
+     */
+    title: string;
+    /**
+     * Defines the <code>icon</code> source URI.
+     * <br><br>
+     * <b>Note:</b>
+     * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
+     * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
+     *
+     * @type {string}
+     * @name sap.ui.webc.main.Option.prototype.icon
+     * @public
+     */
+    icon?: string;
+    /**
+     * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected.
+     * For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>.
+     *
+     * @type {string}
+     * @name sap.ui.webc.main.Option.prototype.value
+     * @public
+     */
+    value: string;
+    /**
+     * Defines the additional text displayed at the end of the option element.
+     * @type {string}
+     * @name sap.ui.webc.main.Option.prototype.additionalText
+     * @public
+     * @since 1.3.0
+     */
+    additionalText: string;
+    /**
+     * Defines the focused state of the component.
+     * @type {boolean}
+     * @defaultvalue false
+     * @since 1.0.0-rc.13
+     * @private
+     */
+    _focused: boolean;
+    /**
+     * Defines the text of the component.
+     * <br><br>
+     * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+     *
+     * @type {Node[]}
+     * @name sap.ui.webc.main.Option.prototype.default
+     * @slot
+     * @public
+     */
+    get stableDomRef(): string;
+}
+export default Option;

package/dist/Option.js

@@ -1,111 +1,12 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-
-/**
-* @public
-*/
-const metadata = {
-	tag: "ui5-option",
-	managedSlots: true,
-	properties: /** @lends  sap.ui.webcomponents.main.Option.prototype */ {
-
-		/**
-		 * Defines the selected state of the component.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		selected: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the component is in disabled state.
-		 * <br><br>
-		 * <b>Note:</b> A disabled component is noninteractive.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 * @since 1.0.0-rc.12
-		 */
-		disabled: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the tooltip of the component.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.1.0
-		 */
-		title: {
-			type: String,
-		},
-
-		/**
-		 * Defines the <code>icon</code> source URI.
-		 * <br><br>
-		 * <b>Note:</b>
-		 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
-		 * <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>.
-		 *
-		 * @type {string}
-		 * @public
-		 */
-		icon: {
-			type: String,
-			defaultValue: null,
-		},
-
-		/**
-		 * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected.
-		 * For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>.
-		 *
-		 * @type {string}
-		 * @public
-		 */
-		value: {
-			type: String,
-		},
-
-		/**
-		 * Defines the additional text displayed at the end of the option element.
-		 * @type {string}
-		 * @public
-		 * @since 1.3.0
-		 */
-		 additionalText: {
-			type: String,
-		},
-
-		/**
-		 * Defines the focused state of the component.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @since 1.0.0-rc.13
-		 * @private
-		 */
-		_focused: {
-			type: Boolean,
-		},
-	},
-	slots: /** @lends sap.ui.webcomponents.main.Option.prototype */ {
-		/**
-		 * Defines the text of the component.
-		 * <br><br>
-		 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
-		 *
-		 * @type {Node[]}
-		 * @slot
-		 * @public
-		 */
-		"default": {
-			type: Node,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.main.Option.prototype */ {},
+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 customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 /**
  * @class
  *
@@ -115,22 +16,51 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Option
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Option
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-option
- * @implements sap.ui.webcomponents.main.ISelectOption
+ * @implements sap.ui.webc.main.ISelectOption
  * @public
  */
-class Option extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	get stableDomRef() {
-		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
-	}
-}
-
+let Option = class Option extends UI5Element {
+    /**
+     * Defines the text of the component.
+     * <br><br>
+     * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+     *
+     * @type {Node[]}
+     * @name sap.ui.webc.main.Option.prototype.default
+     * @slot
+     * @public
+     */
+    get stableDomRef() {
+        return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], Option.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], Option.prototype, "disabled", void 0);
+__decorate([
+    property()
+], Option.prototype, "title", void 0);
+__decorate([
+    property({ defaultValue: null })
+], Option.prototype, "icon", void 0);
+__decorate([
+    property()
+], Option.prototype, "value", void 0);
+__decorate([
+    property()
+], Option.prototype, "additionalText", void 0);
+__decorate([
+    property({ type: Boolean })
+], Option.prototype, "_focused", void 0);
+Option = __decorate([
+    customElement("ui5-option")
+], Option);
 Option.define();
-
 export default Option;
+//# sourceMappingURL=Option.js.map

package/dist/Option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.js","sourceRoot":"","sources":["../src/Option.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAG3E;;;;;;;;;;;;;;GAcG;AAEH,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IA+E9B;;;;;;;;;OASG;IAEH,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;CACD,CAAA;AApFA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAanB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAUnB;IADC,QAAQ,EAAE;qCACI;AAcf;IADC,QAAQ,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;oCACnB;AAWd;IADC,QAAQ,EAAE;qCACI;AAUf;IADC,QAAQ,EAAE;8CACa;AAUxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AA7Ed,MAAM;IADX,aAAa,CAAC,YAAY,CAAC;GACtB,MAAM,CA6FX;AAED,MAAM,CAAC,MAAM,EAAE,CAAC;AAEhB,eAAe,MAAM,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 type { IOption } from \"./Select.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>ui5-option</code> component defines the content of an option in the <code>ui5-select</code>.\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.Option\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-option\n * @implements sap.ui.webc.main.ISelectOption\n * @public\n */\n@customElement(\"ui5-option\")\nclass Option extends UI5Element implements IOption {\n\t/**\n\t * Defines the selected state of the component.\n\t * @type {boolean}\n\t * @defaultvalue false\n\t * @name sap.ui.webc.main.Option.prototype.selected\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t * <br><br>\n\t * <b>Note:</b> A disabled component is hidden.\n\t * @type {boolean}\n\t * @defaultvalue false\n\t * @name sap.ui.webc.main.Option.prototype.disabled\n\t * @public\n\t * @since 1.0.0-rc.12\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t * @type {string}\n\t * @defaultvalue \"\"\n\t * @private\n\t * @since 1.1.0\n\t */\n\t@property()\n\ttitle!: string;\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 built-in icons. To find all the available icons, see the\n\t * <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.Option.prototype.icon\n\t * @public\n\t */\n\t@property({ defaultValue: null })\n\ticon?: string;\n\n\t/**\n\t * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected.\n\t * For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.Option.prototype.value\n\t * @public\n\t */\n\t@property()\n\tvalue!: string;\n\n\t/**\n\t * Defines the additional text displayed at the end of the option element.\n\t * @type {string}\n\t * @name sap.ui.webc.main.Option.prototype.additionalText\n\t * @public\n\t * @since 1.3.0\n\t */\n\t@property()\n\tadditionalText!: string;\n\n\t/**\n\t * Defines the focused state of the component.\n\t * @type {boolean}\n\t * @defaultvalue false\n\t * @since 1.0.0-rc.13\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_focused!: boolean;\n\n\t/**\n\t * Defines the text of the component.\n\t * <br><br>\n\t * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t *\n\t * @type {Node[]}\n\t * @name sap.ui.webc.main.Option.prototype.default\n\t * @slot\n\t * @public\n\t */\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") || `${this._id}-stable-dom-ref`;\n\t}\n}\n\nOption.define();\n\nexport default Option;\n"]}

package/dist/Panel.d.ts

@@ -0,0 +1,232 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import TitleLevel from "./types/TitleLevel.js";
+import PanelAccessibleRole from "./types/PanelAccessibleRole.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-panel</code> 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.
+ *
+ * <h3>Guidelines:</h3>
+ * <ul>
+ * <li>Nesting two or more panels is not recommended.</li>
+ * <li>Do not stack too many panels on one page.</li>
+ * </ul>
+ *
+ * <h3>Structure</h3>
+ * The panel's header area consists of a title bar with a header text or custom header.
+ * <br>
+ * 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.
+ * <br>
+ * The custom header can be set through the <code>header</code> slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.
+ * <br>
+ * The content area can contain an arbitrary set of controls.
+ * <br><b>Note:</b> 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.
+ *
+ * <h3>Responsive Behavior</h3>
+ * <ul>
+ * <li>If the width of the panel is set to 100% (default), the panel and its children are
+ * resized responsively,
+ * depending on its parent container.</li>
+ * <li>If the panel has a fixed height, it will take up the space even if the panel is
+ * collapsed.</li>
+ * <li>When the panel is expandable (the <code>fixed</code> property is set to <code>false</code>),
+ * an arrow icon (pointing to the right) appears in front of the header.</li>
+ * <li>When the animation is activated, expand/collapse uses a smooth animation to open or
+ * close the content area.</li>
+ * <li>When the panel expands/collapses, the arrow icon rotates 90 degrees
+ * clockwise/counter-clockwise.</li>
+ * </ul>
+ *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-panel</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>header - Used to style the wrapper of the header</li>
+ * <li>content - Used to style the wrapper of the content</li>
+ * </ul>
+ *
+ * <h3>Keyboard Handling</h3>
+ *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Panel";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.Panel
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-panel
+ * @public
+ */
+declare class Panel extends UI5Element {
+    /**
+     * This property is used to set the header text of the component.
+     * The text is visible in both expanded and collapsed states.
+     * <br><br>
+     * <b>Note:</b> This property is overridden by the <code>header</code> slot.
+     *
+     * @type {string}
+     * @name sap.ui.webc.main.Panel.prototype.headerText
+     * @defaultvalue ""
+     * @public
+     */
+    headerText: string;
+    /**
+     * Determines whether the component is in a fixed state that is not
+     * expandable/collapsible by user interaction.
+     *
+     * @type {boolean}
+     * @name sap.ui.webc.main.Panel.prototype.fixed
+     * @defaultvalue false
+     * @public
+     */
+    fixed: boolean;
+    /**
+     * Indicates whether the component is collapsed and only the header is displayed.
+     *
+     * @type {boolean}
+     * @name sap.ui.webc.main.Panel.prototype.collapsed
+     * @defaultvalue 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.
+     *
+     * @type {boolean}
+     * @name sap.ui.webc.main.Panel.prototype.noAnimation
+     * @defaultvalue 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 <code>Form</code>
+     * to <code>Region</code> or <code>Complementary</code>.
+     *
+     * @type {sap.ui.webc.main.types.PanelAccessibleRole}
+     * @name sap.ui.webc.main.Panel.prototype.accessibleRole
+     * @defaultvalue "Form"
+     * @public
+     */
+    accessibleRole: PanelAccessibleRole;
+    /**
+     * Defines the "aria-level" of component heading,
+     * set by the <code>headerText</code>.
+     * <br><br>
+     * Available options are: <code>"H6"</code> to <code>"H1"</code>.
+     * @type {sap.ui.webc.main.types.TitleLevel}
+     * @name sap.ui.webc.main.Panel.prototype.headerLevel
+     * @defaultvalue "H2"
+     * @public
+    */
+    headerLevel: TitleLevel;
+    /**
+     * Defines the accessible ARIA name of the component.
+     *
+     * @type {string}
+     * @name sap.ui.webc.main.Panel.prototype.accessibleName
+     * @defaultvalue ""
+     * @public
+     * @since 1.0.0-rc.15
+     */
+    accessibleName: string;
+    /**
+     * When set to <code>true</code>, the <code>accessibleName</code> property will be
+     * applied not only on the panel root itself, but on its toggle button too.
+     * <b>Note:</b> This property only has effect if <code>accessibleName</code> is set and a header slot is provided.
+     * @type {boolean}
+     * @defaultvalue false
+     * @private
+      */
+    useAccessibleNameForToggleButton: boolean;
+    /**
+     * @private
+     */
+    _hasHeader: boolean;
+    _contentExpanded: boolean;
+    _animationRunning: boolean;
+    /**
+     * Defines the component header area.
+     * <br><br>
+     * <b>Note:</b> When a header is provided, the <code>headerText</code> property is ignored.
+     *
+     * @type {HTMLElement[]}
+     * @name sap.ui.webc.main.Panel.prototype.header
+     * @slot
+     * @public
+     */
+    header: Array<HTMLElement>;
+    /**
+     * Defines the content of the component.
+     * The content is visible only when the component is expanded.
+     *
+     * @type {Node[]}
+     * @name sap.ui.webc.main.Panel.prototype.default
+     * @slot
+     * @public
+     */
+    static i18nBundle: I18nBundle;
+    onBeforeRendering(): void;
+    shouldToggle(element: HTMLElement): boolean;
+    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 classes(): {
+        headerBtn: {
+            "ui5-panel-header-button-animated": boolean;
+        };
+    };
+    get toggleButtonTitle(): string;
+    get expanded(): boolean;
+    get accRole(): string;
+    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: string | undefined;
+    };
+    get ariaLabelledbyReference(): string | undefined;
+    get fixedPanelAriaLabelledbyReference(): string | undefined;
+    get headerAriaLevel(): string;
+    get headerTabIndex(): "0" | "-1";
+    get headingWrapperAriaLevel(): string | undefined;
+    get headingWrapperRole(): "heading" | undefined;
+    get nonFixedInternalHeader(): boolean;
+    get hasHeaderOrHeaderText(): string | true;
+    get nonFocusableButton(): boolean;
+    get styles(): {
+        content: {
+            display: string;
+        };
+    };
+    static onDefine(): Promise<void>;
+}
+export default Panel;