npm - @ui5/webcomponents - Versions diffs - 0.0.0-cb061e041 → 0.0.0-cddf8ba1c - Mend

@ui5/webcomponents 0.0.0-cb061e041 → 0.0.0-cddf8ba1c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1890) hide show

package/dist/MultiInput.js.map CHANGED Viewed

	@@ -1 +1 @@
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"]}
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 { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.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\nimport type {\n\tInputSuggestionItemSelectEventDetail as MultiInputSuggestionItemSelectEventDetail,\n\tInputSuggestionItemPreviewEventDetail as MultiInputSuggestionItemPreviewEventDetail,\n} from \"./Input.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<MultiInputTokenDeleteEventDetail>(\"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\tconst isFocusingMorePopover = e.relatedTarget === this.tokenizer.staticAreaItem;\n\n\t\tif (!this.contains(e.relatedTarget as HTMLElement) && !isFocusingMorePopover) {\n\t\t\tthis.tokenizer._tokens.forEach(token => { token.selected = false; });\n\t\t\tthis.tokenizer.scrollToStart();\n\t\t}\n\n\t\tif (e.relatedTarget === this.nativeInput) {\n\t\t\tthis.tokenizer.closeMorePopover();\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\n\t\tthis.tokenizer._getTokens().forEach(token => {\n\t\t\ttoken.selected = false;\n\t\t});\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\t\tconst isCtrl: boolean = e.metaKey \|\| e.ctrlKey;\n\t\tconst tokens = this.tokens;\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\n\t\tif (isCtrl && e.key.toLowerCase() === \"i\" && tokens.length > 0) {\n\t\t\te.preventDefault();\n\t\t\tthis.tokenizer.openMorePopover();\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\n\t\tif (isCtrl && e.key.toLowerCase() === \"i\" && tokens.length > 0) {\n\t\t\te.preventDefault();\n\t\t\tthis.tokenizer.openMorePopover();\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(getScopedVarName(\"--_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\tget morePopoverOpener(): HTMLElement {\n\t\tif (this.tokens.length === 1 && this.tokens[0].isTruncatable) {\n\t\t\treturn this.tokens[0];\n\t\t}\n\n\t\treturn this;\n\t}\n}\n\nMultiInput.define();\n\nexport default MultiInput;\nexport type {\n\tMultiInputTokenDeleteEventDetail,\n\tMultiInputSuggestionItemSelectEventDetail,\n\tMultiInputSuggestionItemPreviewEventDetail,\n};\n"]}

package/dist/Option.d.ts CHANGED Viewed

@@ -11,6 +11,7 @@ import type { IOption } from "./Select.js";
  * @author SAP SE
  * @alias sap.ui.webc.main.Option
  * @extends sap.ui.webc.base.UI5Element
+ * @abstract
  * @tagname ui5-option
  * @implements sap.ui.webc.main.ISelectOption
  * @public
@@ -90,6 +91,7 @@ declare class Option extends UI5Element implements IOption {
      * @slot
      * @public
      */
+    text: Array<Node>;
     get stableDomRef(): string;
 }
 export default Option;

package/dist/Option.js CHANGED Viewed

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 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";
 /**
  * @class
@@ -18,21 +19,12 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
  * @author SAP SE
  * @alias sap.ui.webc.main.Option
  * @extends sap.ui.webc.base.UI5Element
+ * @abstract
  * @tagname ui5-option
  * @implements sap.ui.webc.main.ISelectOption
  * @public
  */
 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`;
     }
@@ -58,6 +50,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Option.prototype, "_focused", void 0);
+__decorate([
+    slot({ type: Node, "default": true, invalidateOnChildChange: true })
+], Option.prototype, "text", void 0);
 Option = __decorate([
     customElement("ui5-option")
 ], Option);

package/dist/Option.js.map CHANGED Viewed

	@@ -1 +1 @@
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"]}
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,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAG3E;;;;;;;;;;;;;;;GAeG;AAEH,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IA4F9B,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;CACD,CAAA;AAtFA;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;AAanB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;oCAClD;AA1Fd,MAAM;IADX,aAAa,CAAC,YAAY,CAAC;GACtB,MAAM,CA+FX;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 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\";\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 * @abstract\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\t@slot({ type: Node, \"default\": true, invalidateOnChildChange: true })\n\ttext!: Array<Node>;\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 CHANGED Viewed

@@ -124,7 +124,7 @@ declare class Panel extends UI5Element {
      * @defaultvalue "Form"
      * @public
      */
-    accessibleRole: PanelAccessibleRole;
+    accessibleRole: `${PanelAccessibleRole}`;
     /**
      * Defines the "aria-level" of component heading,
      * set by the <code>headerText</code>.
@@ -135,7 +135,7 @@ declare class Panel extends UI5Element {
      * @defaultvalue "H2"
      * @public
     */
-    headerLevel: TitleLevel;
+    headerLevel: `${TitleLevel}`;
     /**
      * Defines the accessible ARIA name of the component.
      *
@@ -146,6 +146,18 @@ declare class Panel extends UI5Element {
      * @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.
+     * @type {boolean}
+     * @name sap.ui.webc.main.Panel.prototype.stickyHeader
+     * @defaultvalue false
+     * @public
+     * @since 1.16.0-rc.1
+     */
+    stickyHeader: boolean;
     /**
      * 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.
@@ -195,6 +207,9 @@ declare class Panel extends UI5Element {
         headerBtn: {
             "ui5-panel-header-button-animated": boolean;
         };
+        stickyHeaderClass: {
+            "ui5-panel-heading-wrapper-sticky": boolean;
+        };
     };
     get toggleButtonTitle(): string;
     get expanded(): boolean;

package/dist/Panel.js CHANGED Viewed

@@ -180,6 +180,9 @@ let Panel = Panel_1 = class Panel extends UI5Element {
             headerBtn: {
                 "ui5-panel-header-button-animated": !this.shouldNotAnimate(),
             },
+            stickyHeaderClass: {
+                "ui5-panel-heading-wrapper-sticky": this.stickyHeader,
+            },
         };
     }
     get toggleButtonTitle() {
@@ -268,6 +271,9 @@ __decorate([
 __decorate([
     property()
 ], Panel.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: Boolean })
+], Panel.prototype, "stickyHeader", void 0);
 __decorate([
     property({ type: Boolean })
 ], Panel.prototype, "useAccessibleNameForToggleButton", void 0);

package/dist/Panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Panel.js","sourceRoot":"","sources":["../src/Panel.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport slideDown from \"@ui5/webcomponents-base/dist/animations/slideDown.js\";\nimport slideUp from \"@ui5/webcomponents-base/dist/animations/slideUp.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AnimationMode from \"@ui5/webcomponents-base/dist/types/AnimationMode.js\";\nimport { getAnimationMode } from \"@ui5/webcomponents-base/dist/config/AnimationMode.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport Button from \"./Button.js\";\nimport Icon from \"./Icon.js\";\nimport TitleLevel from \"./types/TitleLevel.js\";\nimport PanelAccessibleRole from \"./types/PanelAccessibleRole.js\";\nimport PanelTemplate from \"./generated/templates/PanelTemplate.lit.js\";\n\nimport { PANEL_ICON } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport panelCss from \"./generated/themes/Panel.css.js\";\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n \n The <code>ui5-panel</code> component is a container which has a header and a\n * content area and is used\n * for grouping and displaying information. It can be collapsed to save space on the screen.\n \n <h3>Guidelines:</h3>\n * <ul>\n * <li>Nesting two or more panels is not recommended.</li>\n * <li>Do not stack too many panels on one page.</li>\n * </ul>\n \n <h3>Structure</h3>\n * The panel's header area consists of a title bar with a header text or custom header.\n * <br>\n * 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.\n * <br>\n * 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.\n * <br>\n * The content area can contain an arbitrary set of controls.\n * <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.\n \n <h3>Responsive Behavior</h3>\n * <ul>\n * <li>If the width of the panel is set to 100% (default), the panel and its children are\n * resized responsively,\n * depending on its parent container.</li>\n * <li>If the panel has a fixed height, it will take up the space even if the panel is\n * collapsed.</li>\n * <li>When the panel is expandable (the <code>fixed</code> property is set to <code>false</code>),\n * an arrow icon (pointing to the right) appears in front of the header.</li>\n * <li>When the animation is activated, expand/collapse uses a smooth animation to open or\n * close the content area.</li>\n * <li>When the panel expands/collapses, the arrow icon rotates 90 degrees\n * clockwise/counter-clockwise.</li>\n * </ul>\n \n <h3>CSS Shadow Parts</h3>\n \n <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.\n * <br>\n * The <code>ui5-panel</code> exposes the following CSS Shadow Parts:\n * <ul>\n * <li>header - Used to style the wrapper of the header</li>\n * <li>content - Used to style the wrapper of the content</li>\n * </ul>\n \n <h3>Keyboard Handling</h3>\n \n <h4>Fast Navigation</h4>\n * 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>.\n * In order to use this functionality, you need to import the following module:\n * <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code>\n * <br><br>\n \n <h3>ES6 Module Import</h3>\n \n <code>import \"@ui5/webcomponents/dist/Panel\";</code>\n \n @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.Panel\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-panel\n * @public\n /\n@customElement({\n\ttag: \"ui5-panel\",\n\tfastNavigation: true,\n\tlanguageAware: true,\n\trenderer: litRender,\n\ttemplate: PanelTemplate,\n\tstyles: panelCss,\n\tdependencies: [Button, Icon],\n})\n/\n Fired when the component is expanded/collapsed by user interaction.\n \n @event sap.ui.webc.main.Panel#toggle\n * @public\n /\n@event(\"toggle\")\nclass Panel extends UI5Element {\n\t/\n\t This property is used to set the header text of the component.\n\t * The text is visible in both expanded and collapsed states.\n\t * <br><br>\n\t * <b>Note:</b> This property is overridden by the <code>header</code> slot.\n\t \n\t @type {string}\n\t * @name sap.ui.webc.main.Panel.prototype.headerText\n\t * @defaultvalue \"\"\n\t * @public\n\t /\n\t@property()\n\theaderText!: string;\n\n\t/\n\t Determines whether the component is in a fixed state that is not\n\t * expandable/collapsible by user interaction.\n\t \n\t @type {boolean}\n\t * @name sap.ui.webc.main.Panel.prototype.fixed\n\t * @defaultvalue false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tfixed!: boolean;\n\n\t/\n\t Indicates whether the component is collapsed and only the header is displayed.\n\t \n\t @type {boolean}\n\t * @name sap.ui.webc.main.Panel.prototype.collapsed\n\t * @defaultvalue false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tcollapsed!: boolean;\n\n\t/\n\t Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.\n\t \n\t @type {boolean}\n\t * @name sap.ui.webc.main.Panel.prototype.noAnimation\n\t * @defaultvalue false\n\t * @public\n\t * @since 1.0.0-rc.16\n\t /\n\t@property({ type: Boolean })\n\tnoAnimation!: boolean;\n\n\t/\n\t Sets the accessible ARIA role of the component.\n\t * Depending on the usage, you can change the role from the default <code>Form</code>\n\t * to <code>Region</code> or <code>Complementary</code>.\n\t \n\t @type {sap.ui.webc.main.types.PanelAccessibleRole}\n\t * @name sap.ui.webc.main.Panel.prototype.accessibleRole\n\t * @defaultvalue \"Form\"\n\t * @public\n\t /\n\t@property({ type: PanelAccessibleRole, defaultValue: PanelAccessibleRole.Form })\n\taccessibleRole!: PanelAccessibleRole;\n\n\t/\n\t Defines the \"aria-level\" of component heading,\n\t * set by the <code>headerText</code>.\n\t * <br><br>\n\t * Available options are: <code>\"H6\"</code> to <code>\"H1\"</code>.\n\t * @type {sap.ui.webc.main.types.TitleLevel}\n\t * @name sap.ui.webc.main.Panel.prototype.headerLevel\n\t * @defaultvalue \"H2\"\n\t * @public\n\t/\n\t@property({ type: TitleLevel, defaultValue: TitleLevel.H2 })\n\theaderLevel!: TitleLevel;\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.Panel.prototype.accessibleName\n\t * @defaultvalue \"\"\n\t * @public\n\t * @since 1.0.0-rc.15\n\t /\n\t@property()\n\taccessibleName!: string;\n\n\t/\n\t When set to <code>true</code>, the <code>accessibleName</code> property will be\n\t * applied not only on the panel root itself, but on its toggle button too.\n\t * <b>Note:</b> This property only has effect if <code>accessibleName</code> is set and a header slot is provided.\n\t * @type {boolean}\n\t * @defaultvalue false\n\t * @private\n\t /\n\t@property({ type: Boolean })\n\tuseAccessibleNameForToggleButton!: boolean;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean })\n\t_hasHeader!: boolean;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_contentExpanded!: boolean;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_animationRunning!: boolean;\n\n\t/\n\t Defines the component header area.\n\t * <br><br>\n\t * <b>Note:</b> When a header is provided, the <code>headerText</code> property is ignored.\n\t \n\t @type {HTMLElement[]}\n\t * @name sap.ui.webc.main.Panel.prototype.header\n\t * @slot\n\t * @public\n\t /\n\t@slot()\n\theader!: Array<HTMLElement>;\n\n\t/\n\t Defines the content of the component.\n\t * The content is visible only when the component is expanded.\n\t \n\t @type {Node[]}\n\t * @name sap.ui.webc.main.Panel.prototype.default\n\t * @slot\n\t * @public\n\t */\n\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\t// If the animation is running, it will set the content expanded state at the end\n\t\tif (!this._animationRunning) {\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t}\n\n\t\tthis._hasHeader = !!this.header.length;\n\t}\n\n\tshouldToggle(element: HTMLElement): boolean {\n\t\tconst customContent = this.header.length;\n\t\tif (customContent) {\n\t\t\treturn element.classList.contains(\"ui5-panel-header-button\");\n\t\t}\n\t\treturn true;\n\t}\n\n\tshouldNotAnimate() {\n\t\treturn this.noAnimation \|\| getAnimationMode() === AnimationMode.None;\n\t}\n\n\t_headerClick(e: MouseEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._toggleOpen();\n\t}\n\n\t_toggleButtonClick(e: MouseEvent) {\n\t\tif (e.x === 0 && e.y === 0) {\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\t}\n\n\t_headerKeyDown(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_headerKeyUp(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._toggleOpen();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\tthis._toggleOpen();\n\t\t}\n\t}\n\n\t_toggleOpen() {\n\t\tif (this.fixed) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.collapsed = !this.collapsed;\n\n\t\tif (this.shouldNotAnimate()) {\n\t\t\tthis.fireEvent(\"toggle\");\n\t\t\treturn;\n\t\t}\n\n\t\tthis._animationRunning = true;\n\n\t\tconst elements = this.getDomRef()!.querySelectorAll(\".ui5-panel-content\");\n\t\tconst animations: Array<Promise<void \| Error>> = [];\n\n\t\t[].forEach.call(elements, oElement => {\n\t\t\tif (this.collapsed) {\n\t\t\t\tanimations.push(slideUp(oElement).promise());\n\t\t\t} else {\n\t\t\t\tanimations.push(slideDown(oElement).promise());\n\t\t\t}\n\t\t});\n\n\t\tPromise.all(animations).then(() => {\n\t\t\tthis._animationRunning = false;\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t\tthis.fireEvent(\"toggle\");\n\t\t});\n\t}\n\n\t_headerOnTarget(target: HTMLElement) {\n\t\treturn target.classList.contains(\"sapMPanelWrappingDiv\");\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\theaderBtn: {\n\t\t\t\t\"ui5-panel-header-button-animated\": !this.shouldNotAnimate(),\n\t\t\t},\n\t\t};\n\t}\n\n\tget toggleButtonTitle() {\n\t\treturn Panel.i18nBundle.getText(PANEL_ICON);\n\t}\n\n\tget expanded() {\n\t\treturn !this.collapsed;\n\t}\n\n\tget accRole() {\n\t\treturn this.accessibleRole.toLowerCase();\n\t}\n\n\tget effectiveAccessibleName() {\n\t\treturn typeof this.accessibleName === \"string\" && this.accessibleName.length ? this.accessibleName : undefined;\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"button\": {\n\t\t\t\t\"accessibilityAttributes\": {\n\t\t\t\t\t\"expanded\": this.expanded,\n\t\t\t\t},\n\t\t\t\t\"title\": this.toggleButtonTitle,\n\t\t\t\t\"ariaLabelButton\": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined,\n\t\t\t},\n\t\t\t\"ariaExpanded\": this.nonFixedInternalHeader ? this.expanded : undefined,\n\t\t\t\"ariaControls\": this.nonFixedInternalHeader ? `${this._id}-content` : undefined,\n\t\t\t\"ariaLabelledby\": this.nonFocusableButton ? this.ariaLabelledbyReference : undefined,\n\t\t\t\"role\": this.nonFixedInternalHeader ? \"button\" : undefined,\n\t\t};\n\t}\n\n\tget ariaLabelledbyReference() {\n\t\treturn (this.nonFocusableButton && this.headerText && !this.fixed) ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget fixedPanelAriaLabelledbyReference() {\n\t\treturn this.fixed && !this.effectiveAccessibleName ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget headerAriaLevel() {\n\t\treturn this.headerLevel.slice(1);\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this.header.length \|\| this.fixed) ? \"-1\" : \"0\";\n\t}\n\n\tget headingWrapperAriaLevel() {\n\t\treturn !this._hasHeader ? this.headerAriaLevel : undefined;\n\t}\n\n\tget headingWrapperRole() {\n\t\treturn !this._hasHeader ? \"heading\" : undefined;\n\t}\n\n\tget nonFixedInternalHeader() {\n\t\treturn !this._hasHeader && !this.fixed;\n\t}\n\n\tget hasHeaderOrHeaderText() {\n\t\treturn this._hasHeader \|\| this.headerText;\n\t}\n\n\tget nonFocusableButton() {\n\t\treturn !this.header.length;\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tcontent: {\n\t\t\t\tdisplay: this._contentExpanded ? \"block\" : \"none\",\n\t\t\t},\n\t\t};\n\t}\n\n\tstatic async onDefine() {\n\t\tPanel.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n}\n\nPanel.define();\n\nexport default Panel;\n"]}
1	+ {"version":3,"file":"Panel.js","sourceRoot":"","sources":["../src/Panel.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport slideDown from \"@ui5/webcomponents-base/dist/animations/slideDown.js\";\nimport slideUp from \"@ui5/webcomponents-base/dist/animations/slideUp.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AnimationMode from \"@ui5/webcomponents-base/dist/types/AnimationMode.js\";\nimport { getAnimationMode } from \"@ui5/webcomponents-base/dist/config/AnimationMode.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport Button from \"./Button.js\";\nimport Icon from \"./Icon.js\";\nimport TitleLevel from \"./types/TitleLevel.js\";\nimport PanelAccessibleRole from \"./types/PanelAccessibleRole.js\";\nimport PanelTemplate from \"./generated/templates/PanelTemplate.lit.js\";\n\nimport { PANEL_ICON } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport panelCss from \"./generated/themes/Panel.css.js\";\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n \n The <code>ui5-panel</code> component is a container which has a header and a\n * content area and is used\n * for grouping and displaying information. It can be collapsed to save space on the screen.\n \n <h3>Guidelines:</h3>\n * <ul>\n * <li>Nesting two or more panels is not recommended.</li>\n * <li>Do not stack too many panels on one page.</li>\n * </ul>\n \n <h3>Structure</h3>\n * The panel's header area consists of a title bar with a header text or custom header.\n * <br>\n * 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.\n * <br>\n * 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.\n * <br>\n * The content area can contain an arbitrary set of controls.\n * <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.\n \n <h3>Responsive Behavior</h3>\n * <ul>\n * <li>If the width of the panel is set to 100% (default), the panel and its children are\n * resized responsively,\n * depending on its parent container.</li>\n * <li>If the panel has a fixed height, it will take up the space even if the panel is\n * collapsed.</li>\n * <li>When the panel is expandable (the <code>fixed</code> property is set to <code>false</code>),\n * an arrow icon (pointing to the right) appears in front of the header.</li>\n * <li>When the animation is activated, expand/collapse uses a smooth animation to open or\n * close the content area.</li>\n * <li>When the panel expands/collapses, the arrow icon rotates 90 degrees\n * clockwise/counter-clockwise.</li>\n * </ul>\n \n <h3>CSS Shadow Parts</h3>\n \n <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.\n * <br>\n * The <code>ui5-panel</code> exposes the following CSS Shadow Parts:\n * <ul>\n * <li>header - Used to style the wrapper of the header</li>\n * <li>content - Used to style the wrapper of the content</li>\n * </ul>\n \n <h3>Keyboard Handling</h3>\n \n <h4>Fast Navigation</h4>\n * 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>.\n * In order to use this functionality, you need to import the following module:\n * <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code>\n * <br><br>\n \n <h3>ES6 Module Import</h3>\n \n <code>import \"@ui5/webcomponents/dist/Panel\";</code>\n \n @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.Panel\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-panel\n * @public\n /\n@customElement({\n\ttag: \"ui5-panel\",\n\tfastNavigation: true,\n\tlanguageAware: true,\n\trenderer: litRender,\n\ttemplate: PanelTemplate,\n\tstyles: panelCss,\n\tdependencies: [Button, Icon],\n})\n/\n Fired when the component is expanded/collapsed by user interaction.\n \n @event sap.ui.webc.main.Panel#toggle\n * @public\n /\n@event(\"toggle\")\nclass Panel extends UI5Element {\n\t/\n\t This property is used to set the header text of the component.\n\t * The text is visible in both expanded and collapsed states.\n\t * <br><br>\n\t * <b>Note:</b> This property is overridden by the <code>header</code> slot.\n\t \n\t @type {string}\n\t * @name sap.ui.webc.main.Panel.prototype.headerText\n\t * @defaultvalue \"\"\n\t * @public\n\t /\n\t@property()\n\theaderText!: string;\n\n\t/\n\t Determines whether the component is in a fixed state that is not\n\t * expandable/collapsible by user interaction.\n\t \n\t @type {boolean}\n\t * @name sap.ui.webc.main.Panel.prototype.fixed\n\t * @defaultvalue false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tfixed!: boolean;\n\n\t/\n\t Indicates whether the component is collapsed and only the header is displayed.\n\t \n\t @type {boolean}\n\t * @name sap.ui.webc.main.Panel.prototype.collapsed\n\t * @defaultvalue false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tcollapsed!: boolean;\n\n\t/\n\t Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.\n\t \n\t @type {boolean}\n\t * @name sap.ui.webc.main.Panel.prototype.noAnimation\n\t * @defaultvalue false\n\t * @public\n\t * @since 1.0.0-rc.16\n\t /\n\t@property({ type: Boolean })\n\tnoAnimation!: boolean;\n\n\t/\n\t Sets the accessible ARIA role of the component.\n\t * Depending on the usage, you can change the role from the default <code>Form</code>\n\t * to <code>Region</code> or <code>Complementary</code>.\n\t \n\t @type {sap.ui.webc.main.types.PanelAccessibleRole}\n\t * @name sap.ui.webc.main.Panel.prototype.accessibleRole\n\t * @defaultvalue \"Form\"\n\t * @public\n\t /\n\t@property({ type: PanelAccessibleRole, defaultValue: PanelAccessibleRole.Form })\n\taccessibleRole!: `${PanelAccessibleRole}`;\n\n\t/\n\t Defines the \"aria-level\" of component heading,\n\t * set by the <code>headerText</code>.\n\t * <br><br>\n\t * Available options are: <code>\"H6\"</code> to <code>\"H1\"</code>.\n\t * @type {sap.ui.webc.main.types.TitleLevel}\n\t * @name sap.ui.webc.main.Panel.prototype.headerLevel\n\t * @defaultvalue \"H2\"\n\t * @public\n\t/\n\t@property({ type: TitleLevel, defaultValue: TitleLevel.H2 })\n\theaderLevel!: `${TitleLevel}`;\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.Panel.prototype.accessibleName\n\t * @defaultvalue \"\"\n\t * @public\n\t * @since 1.0.0-rc.15\n\t /\n\t@property()\n\taccessibleName!: string;\n\n\t/\n\t Indicates whether the Panel header is sticky or not.\n\t * If stickyHeader is set to true, then whenever you scroll the content or\n\t * the application, the header of the panel will be always visible and\n\t * a solid color will be used for its design.\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.Panel.prototype.stickyHeader\n\t * @defaultvalue false\n\t * @public\n\t * @since 1.16.0-rc.1\n\t /\n\t @property({ type: Boolean })\n\t stickyHeader!: boolean;\n\n\t/\n\t When set to <code>true</code>, the <code>accessibleName</code> property will be\n\t * applied not only on the panel root itself, but on its toggle button too.\n\t * <b>Note:</b> This property only has effect if <code>accessibleName</code> is set and a header slot is provided.\n\t * @type {boolean}\n\t * @defaultvalue false\n\t * @private\n\t /\n\t@property({ type: Boolean })\n\tuseAccessibleNameForToggleButton!: boolean;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean })\n\t_hasHeader!: boolean;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_contentExpanded!: boolean;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_animationRunning!: boolean;\n\n\t/\n\t Defines the component header area.\n\t * <br><br>\n\t * <b>Note:</b> When a header is provided, the <code>headerText</code> property is ignored.\n\t \n\t @type {HTMLElement[]}\n\t * @name sap.ui.webc.main.Panel.prototype.header\n\t * @slot\n\t * @public\n\t /\n\t@slot()\n\theader!: Array<HTMLElement>;\n\n\t/\n\t Defines the content of the component.\n\t * The content is visible only when the component is expanded.\n\t \n\t @type {Node[]}\n\t * @name sap.ui.webc.main.Panel.prototype.default\n\t * @slot\n\t * @public\n\t */\n\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\t// If the animation is running, it will set the content expanded state at the end\n\t\tif (!this._animationRunning) {\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t}\n\n\t\tthis._hasHeader = !!this.header.length;\n\t}\n\n\tshouldToggle(element: HTMLElement): boolean {\n\t\tconst customContent = this.header.length;\n\t\tif (customContent) {\n\t\t\treturn element.classList.contains(\"ui5-panel-header-button\");\n\t\t}\n\t\treturn true;\n\t}\n\n\tshouldNotAnimate() {\n\t\treturn this.noAnimation \|\| getAnimationMode() === AnimationMode.None;\n\t}\n\n\t_headerClick(e: MouseEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._toggleOpen();\n\t}\n\n\t_toggleButtonClick(e: MouseEvent) {\n\t\tif (e.x === 0 && e.y === 0) {\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\t}\n\n\t_headerKeyDown(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_headerKeyUp(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._toggleOpen();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\tthis._toggleOpen();\n\t\t}\n\t}\n\n\t_toggleOpen() {\n\t\tif (this.fixed) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.collapsed = !this.collapsed;\n\n\t\tif (this.shouldNotAnimate()) {\n\t\t\tthis.fireEvent(\"toggle\");\n\t\t\treturn;\n\t\t}\n\n\t\tthis._animationRunning = true;\n\n\t\tconst elements = this.getDomRef()!.querySelectorAll(\".ui5-panel-content\");\n\t\tconst animations: Array<Promise<void \| Error>> = [];\n\n\t\t[].forEach.call(elements, oElement => {\n\t\t\tif (this.collapsed) {\n\t\t\t\tanimations.push(slideUp(oElement).promise());\n\t\t\t} else {\n\t\t\t\tanimations.push(slideDown(oElement).promise());\n\t\t\t}\n\t\t});\n\n\t\tPromise.all(animations).then(() => {\n\t\t\tthis._animationRunning = false;\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t\tthis.fireEvent(\"toggle\");\n\t\t});\n\t}\n\n\t_headerOnTarget(target: HTMLElement) {\n\t\treturn target.classList.contains(\"sapMPanelWrappingDiv\");\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\theaderBtn: {\n\t\t\t\t\"ui5-panel-header-button-animated\": !this.shouldNotAnimate(),\n\t\t\t},\n\t\t\tstickyHeaderClass: {\n\t\t\t\t\"ui5-panel-heading-wrapper-sticky\": this.stickyHeader,\n\t\t\t},\n\t\t};\n\t}\n\n\tget toggleButtonTitle() {\n\t\treturn Panel.i18nBundle.getText(PANEL_ICON);\n\t}\n\n\tget expanded() {\n\t\treturn !this.collapsed;\n\t}\n\n\tget accRole() {\n\t\treturn this.accessibleRole.toLowerCase();\n\t}\n\n\tget effectiveAccessibleName() {\n\t\treturn typeof this.accessibleName === \"string\" && this.accessibleName.length ? this.accessibleName : undefined;\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"button\": {\n\t\t\t\t\"accessibilityAttributes\": {\n\t\t\t\t\t\"expanded\": this.expanded,\n\t\t\t\t},\n\t\t\t\t\"title\": this.toggleButtonTitle,\n\t\t\t\t\"ariaLabelButton\": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined,\n\t\t\t},\n\t\t\t\"ariaExpanded\": this.nonFixedInternalHeader ? this.expanded : undefined,\n\t\t\t\"ariaControls\": this.nonFixedInternalHeader ? `${this._id}-content` : undefined,\n\t\t\t\"ariaLabelledby\": this.nonFocusableButton ? this.ariaLabelledbyReference : undefined,\n\t\t\t\"role\": this.nonFixedInternalHeader ? \"button\" : undefined,\n\t\t};\n\t}\n\n\tget ariaLabelledbyReference() {\n\t\treturn (this.nonFocusableButton && this.headerText && !this.fixed) ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget fixedPanelAriaLabelledbyReference() {\n\t\treturn this.fixed && !this.effectiveAccessibleName ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget headerAriaLevel() {\n\t\treturn this.headerLevel.slice(1);\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this.header.length \|\| this.fixed) ? \"-1\" : \"0\";\n\t}\n\n\tget headingWrapperAriaLevel() {\n\t\treturn !this._hasHeader ? this.headerAriaLevel : undefined;\n\t}\n\n\tget headingWrapperRole() {\n\t\treturn !this._hasHeader ? \"heading\" : undefined;\n\t}\n\n\tget nonFixedInternalHeader() {\n\t\treturn !this._hasHeader && !this.fixed;\n\t}\n\n\tget hasHeaderOrHeaderText() {\n\t\treturn this._hasHeader \|\| this.headerText;\n\t}\n\n\tget nonFocusableButton() {\n\t\treturn !this.header.length;\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tcontent: {\n\t\t\t\tdisplay: this._contentExpanded ? \"block\" : \"none\",\n\t\t\t},\n\t\t};\n\t}\n\n\tstatic async onDefine() {\n\t\tPanel.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n}\n\nPanel.define();\n\nexport default Panel;\n"]}

package/dist/Popover.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import Popup from "./Popup.js";
+import type { PopupBeforeCloseEventDetail as PopoverBeforeCloseEventDetail } from "./Popup.js";
 import PopoverPlacementType from "./types/PopoverPlacementType.js";
 import PopoverVerticalAlign from "./types/PopoverVerticalAlign.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
@@ -14,7 +15,7 @@ type CalculatedPlacement = {
     arrow: ArrowPosition;
     top: number;
     left: number;
-    placementType: PopoverPlacementType;
+    placementType: `${PopoverPlacementType}`;
 };
 /**
  * @class
@@ -55,6 +56,13 @@ type CalculatedPlacement = {
  *
  * <code>import "@ui5/webcomponents/dist/Popover.js";</code>
  *
+ * <b>Note: </b> We recommend placing popup-like components (<code>ui5-dialog</code> and <code>ui5-popover</code>)
+ * outside any other components. Preferably, the popup-like components should be placed
+ * in an upper level HTML element. Otherwise, in some cases the parent HTML elements can break
+ * the position and/or z-index management of the popup-like components.
+ *
+ * <b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>).
+ *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webc.main.Popover
@@ -77,55 +85,31 @@ declare class Popover extends Popup {
     headerText: string;
     /**
      * Determines on which side the component is placed at.
-     * <br><br>
-     * Available options are:
-     * <ul>
-     * <li><code>Left</code></li>
-     * <li><code>Right</code></li>
-     * <li><code>Top</code></li>
-     * <li><code>Bottom</code></li>
-     * </ul>
      *
      * @type {sap.ui.webc.main.types.PopoverPlacementType}
      * @name sap.ui.webc.main.Popover.prototype.placementType
      * @defaultvalue "Right"
      * @public
      */
-    placementType: PopoverPlacementType;
+    placementType: `${PopoverPlacementType}`;
     /**
      * Determines the horizontal alignment of the component.
-     * <br><br>
-     * Available options are:
-     * <ul>
-     * <li><code>Center</code></li>
-     * <li><code>Left</code></li>
-     * <li><code>Right</code></li>
-     * <li><code>Stretch</code></li>
-     * </ul>
      *
      * @type {sap.ui.webc.main.types.PopoverHorizontalAlign}
      * @name sap.ui.webc.main.Popover.prototype.horizontalAlign
      * @defaultvalue "Center"
      * @public
      */
-    horizontalAlign: PopoverHorizontalAlign;
+    horizontalAlign: `${PopoverHorizontalAlign}`;
     /**
      * Determines the vertical alignment of the component.
-     * <br><br>
-     * Available options are:
-     * <ul>
-     * <li><code>Center</code></li>
-     * <li><code>Top</code></li>
-     * <li><code>Bottom</code></li>
-     * <li><code>Stretch</code></li>
-     * </ul>
      *
      * @type {sap.ui.webc.main.types.PopoverVerticalAlign}
      * @name sap.ui.webc.main.Popover.prototype.verticalAlign
      * @defaultvalue "Center"
      * @public
      */
-    verticalAlign: PopoverVerticalAlign;
+    verticalAlign: `${PopoverVerticalAlign}`;
     /**
      * Defines whether the component should close when
      * clicking/tapping outside of the popover.
@@ -200,7 +184,7 @@ declare class Popover extends Popup {
      *
      * @private
      */
-    actualPlacementType: PopoverPlacementType;
+    actualPlacementType: `${PopoverPlacementType}`;
     _maxHeight?: number;
     _maxWidth?: number;
     /**
@@ -254,7 +238,7 @@ declare class Popover extends Popup {
      * @private
      */
     _removeOpenedPopup(): void;
-    shouldCloseDueToOverflow(placement: PopoverPlacementType, openerRect: DOMRect): boolean;
+    shouldCloseDueToOverflow(placement: `${PopoverPlacementType}`, openerRect: DOMRect): boolean;
     shouldCloseDueToNoOpener(openerRect: DOMRect): boolean;
     isOpenerOutsideViewport(openerRect: DOMRect): boolean;
     /**
@@ -271,7 +255,12 @@ declare class Popover extends Popup {
      * @returns {int} The adjusted top in px.
      */
     _adjustForIOSKeyboard(top: number): number;
+    _getContainingBlockClientLocation(): DOMRect | {
+        left: number;
+        top: number;
+    };
     getPopoverSize(): PopoverSize;
+    _showOutsideViewport(): void;
     get arrowDOM(): Element;
     /**
      * @private
@@ -294,7 +283,7 @@ declare class Popover extends Popup {
      * @private
      */
     fallbackPlacement(clientWidth: number, clientHeight: number, targetRect: DOMRect, popoverSize: PopoverSize): PopoverPlacementType | undefined;
-    getActualPlacementType(targetRect: DOMRect, popoverSize: PopoverSize): PopoverPlacementType;
+    getActualPlacementType(targetRect: DOMRect, popoverSize: PopoverSize): `${PopoverPlacementType}`;
     getVerticalLeft(targetRect: DOMRect, popoverSize: PopoverSize): number;
     getHorizontalTop(targetRect: DOMRect, popoverSize: PopoverSize): number;
     get isModal(): boolean;
@@ -322,8 +311,9 @@ declare class Popover extends Popup {
      * Hook for descendants to hide footer.
      */
     get _displayFooter(): boolean;
-    get _actualHorizontalAlign(): PopoverHorizontalAlign;
+    get _actualHorizontalAlign(): "Left" | "Right" | "Center" | "Stretch" | PopoverHorizontalAlign.Left | PopoverHorizontalAlign.Right;
 }
 declare const instanceOfPopover: (object: any) => object is Popover;
 export default Popover;
 export { instanceOfPopover };
+export type { PopoverBeforeCloseEventDetail, };

package/dist/Popover.js CHANGED Viewed

@@ -13,6 +13,8 @@ import { isIOS } from "@ui5/webcomponents-base/dist/Device.js";
 import DOMReference from "@ui5/webcomponents-base/dist/types/DOMReference.js";
 import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
+import isElementContainingBlock from "@ui5/webcomponents-base/dist/util/isElementContainingBlock.js";
+import getParentElement from "@ui5/webcomponents-base/dist/util/getParentElement.js";
 import Popup from "./Popup.js";
 import PopoverPlacementType from "./types/PopoverPlacementType.js";
 import PopoverVerticalAlign from "./types/PopoverVerticalAlign.js";
@@ -64,6 +66,13 @@ const ARROW_SIZE = 8;
  *
  * <code>import "@ui5/webcomponents/dist/Popover.js";</code>
  *
+ * <b>Note: </b> We recommend placing popup-like components (<code>ui5-dialog</code> and <code>ui5-popover</code>)
+ * outside any other components. Preferably, the popup-like components should be placed
+ * in an upper level HTML element. Otherwise, in some cases the parent HTML elements can break
+ * the position and/or z-index management of the popup-like components.
+ *
+ * <b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>).
+ *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webc.main.Popover
@@ -80,13 +89,14 @@ let Popover = Popover_1 = class Popover extends Popup {
         super();
     }
     onAfterRendering() {
+        super.onAfterRendering();
         if (!this.isOpen() && this.open) {
             let opener;
             if (this.opener instanceof HTMLElement) {
                 opener = this.opener;
             }
             else if (typeof this.opener === "string") {
-                opener = this.getRootNode().getElementById(this.opener);
+                opener = this.getRootNode().getElementById(this.opener) || document.getElementById(this.opener);
             }
             if (!opener) {
                 console.warn("Valid opener id is required."); // eslint-disable-line
@@ -185,8 +195,11 @@ let Popover = Popover_1 = class Popover extends Popup {
         this._show();
     }
     _show() {
-        let placement;
+        if (!this.opened) {
+            this._showOutsideViewport();
+        }
         const popoverSize = this.getPopoverSize();
+        let placement;
         if (popoverSize.width === 0 || popoverSize.height === 0) {
             // size can not be determined properly at this point, popover will be shown with the next reposition
             return;
@@ -195,7 +208,7 @@ let Popover = Popover_1 = class Popover extends Popup {
             // update opener rect if it was changed during the popover being opened
             this._openerRect = this._opener.getBoundingClientRect();
         }
-        if (this.shouldCloseDueToNoOpener(this._openerRect) && this.isFocusWithin()) {
+        if (this.shouldCloseDueToNoOpener(this._openerRect) && this.isFocusWithin() && this._oldPlacement) {
             // reuse the old placement as the opener is not available,
             // but keep the popover open as the focus is within
             placement = this._oldPlacement;
@@ -219,11 +232,13 @@ let Popover = Popover_1 = class Popover extends Popup {
         this.arrowTranslateX = placement.arrow.x;
         this.arrowTranslateY = placement.arrow.y;
         top = this._adjustForIOSKeyboard(top);
+        const containingBlockClientLocation = this._getContainingBlockClientLocation();
+        left -= containingBlockClientLocation.left;
+        top -= containingBlockClientLocation.top;
         Object.assign(this.style, {
             top: `${top}px`,
             left: `${left}px`,
         });
-        super._show();
         if (this.horizontalAlign === PopoverHorizontalAlign.Stretch && this._width) {
             this.style.width = this._width;
         }
@@ -242,17 +257,27 @@ let Popover = Popover_1 = class Popover extends Popup {
         const actualTop = Math.ceil(this.getBoundingClientRect().top);
         return top + (Number.parseInt(this.style.top || "0") - actualTop);
     }
-    getPopoverSize() {
-        if (!this.opened) {
-            Object.assign(this.style, {
-                display: "block",
-                top: "-10000px",
-                left: "-10000px",
-            });
+    _getContainingBlockClientLocation() {
+        let parentElement = getParentElement(this);
+        while (parentElement) {
+            if (isElementContainingBlock(parentElement)) {
+                return parentElement.getBoundingClientRect();
+            }
+            parentElement = getParentElement(parentElement);
         }
+        return { left: 0, top: 0 };
+    }
+    getPopoverSize() {
         const rect = this.getBoundingClientRect(), width = rect.width, height = rect.height;
         return { width, height };
     }
+    _showOutsideViewport() {
+        Object.assign(this.style, {
+            display: this._displayProp,
+            top: "-10000px",
+            left: "-10000px",
+        });
+    }
     get arrowDOM() {
         return this.shadowRoot.querySelector(".ui5-popover-arrow");
     }
@@ -440,7 +465,7 @@ let Popover = Popover_1 = class Popover extends Popup {
     }
     getVerticalLeft(targetRect, popoverSize) {
         const horizontalAlign = this._actualHorizontalAlign;
-        let left;
+        let left = 0;
         switch (horizontalAlign) {
             case PopoverHorizontalAlign.Center:
             case PopoverHorizontalAlign.Stretch:
@@ -456,7 +481,7 @@ let Popover = Popover_1 = class Popover extends Popup {
         return left;
     }
     getHorizontalTop(targetRect, popoverSize) {
-        let top;
+        let top = 0;
         switch (this.verticalAlign) {
             case PopoverVerticalAlign.Center:
             case PopoverVerticalAlign.Stretch: