diff --git a/packages/base/src/Theming.js b/packages/base/src/Theming.js index 95b4a46728c2..4eee549b1721 100644 --- a/packages/base/src/Theming.js +++ b/packages/base/src/Theming.js @@ -1,5 +1,4 @@ import { getTheme, _setTheme } from "./Configuration.js"; -import { getStyles } from "./theming/ThemeBundle.js"; import { getCustomCSS } from "./theming/CustomStyle.js"; import { getThemeProperties } from "./theming/ThemeProperties.js"; import { injectThemeProperties } from "./theming/StyleInjection.js"; @@ -43,21 +42,14 @@ const setTheme = async theme => { const getEffectiveStyle = ElementClass => { const theme = getTheme(); - const styleUrls = ElementClass.getMetadata().getStyleUrl(); const tag = ElementClass.getMetadata().getTag(); - const styles = getStyles(theme, styleUrls); - const cssContent = []; - styles.forEach(css => { - cssContent.push(css); - }); + const customStyle = getCustomCSS(theme, tag) || ""; + let componentStyles = ElementClass.styles; - const customStyle = getCustomCSS(theme, tag); - if (customStyle) { - cssContent.push(customStyle); + if (Array.isArray(componentStyles)) { + componentStyles = componentStyles.join(" "); } - - const cssText = cssContent.join(" "); - return cssText; + return `${componentStyles} ${customStyle}`; }; export { diff --git a/packages/base/src/WebComponent.js b/packages/base/src/WebComponent.js index 40321f6772a5..3e606a56be16 100644 --- a/packages/base/src/WebComponent.js +++ b/packages/base/src/WebComponent.js @@ -261,6 +261,9 @@ class WebComponent extends HTMLElement { return metadata; } + static get styles() { + return ""; + } _initializeState() { const StateClass = this.constructor.StateClass; diff --git a/packages/base/src/WebComponentMetadata.js b/packages/base/src/WebComponentMetadata.js index dbcaaa4763be..af224a3e6c8d 100644 --- a/packages/base/src/WebComponentMetadata.js +++ b/packages/base/src/WebComponentMetadata.js @@ -14,10 +14,6 @@ class WebComponentMetadata { return this.metadata.noShadowDOM; } - getStyleUrl() { - return this.metadata.styleUrl || []; - } - usesNodeText() { return !!this.metadata.usesNodeText; } diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js index 94cb183c90c6..1caa3a682adb 100644 --- a/packages/main/src/Button.js +++ b/packages/main/src/Button.js @@ -2,7 +2,6 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import URI from "@ui5/webcomponents-base/src/types/URI.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import ButtonTemplateContext from "./ButtonTemplateContext.js"; import ButtonType from "./types/ButtonType.js"; @@ -12,18 +11,11 @@ import Icon from "./Icon.js"; // Styles import buttonCss from "./themes/Button.css.js"; -addCustomCSS("ui5-button", "sap_fiori_3", buttonCss); -addCustomCSS("ui5-button", "sap_belize", buttonCss); -addCustomCSS("ui5-button", "sap_belize_hcb", buttonCss); - /** * @public */ const metadata = { tag: "ui5-button", - styleUrl: [ - "Button.css", - ], usesNodeText: true, properties: /** @lends sap.ui.webcomponents.main.Button.prototype */ { @@ -152,6 +144,10 @@ class Button extends WebComponent { return metadata; } + static get styles() { + return buttonCss; + } + static get renderer() { return ButtonRenderer; } diff --git a/packages/main/src/Calendar.js b/packages/main/src/Calendar.js index 7a55dbb1caf2..74bf3851bc09 100644 --- a/packages/main/src/Calendar.js +++ b/packages/main/src/Calendar.js @@ -1,7 +1,6 @@ import "@ui5/webcomponents-base/src/shims/jquery-shim.js"; import "@ui5/webcomponents-base/src/shims/Core-shim.js"; import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import { fetchCldrData } from "@ui5/webcomponents-base/src/CLDR.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider.js"; @@ -25,18 +24,11 @@ import "@ui5/webcomponents-core/dist/sap/ui/core/date/Gregorian.js"; // Styles import calendarCSS from "./themes/Calendar.css.js"; -addCustomCSS("ui5-calendar", "sap_fiori_3", calendarCSS); -addCustomCSS("ui5-calendar", "sap_belize_hcb", calendarCSS); -addCustomCSS("ui5-calendar", "sap_belize", calendarCSS); - /** * @public */ const metadata = { tag: "ui5-calendar", - styleUrl: [ - "Calendar.css", - ], properties: /** @lends sap.ui.webcomponents.main.Calendar.prototype */ { /** * It's a UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970. @@ -124,6 +116,10 @@ class Calendar extends WebComponent { return CalendarRenderer; } + static get styles() { + return calendarCSS; + } + constructor() { super(); this._oLocale = getFormatLocale(); diff --git a/packages/main/src/CalendarHeader.js b/packages/main/src/CalendarHeader.js index a0b30d9685e4..777359133873 100644 --- a/packages/main/src/CalendarHeader.js +++ b/packages/main/src/CalendarHeader.js @@ -1,7 +1,6 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import CalendarHeaderTemplateContext from "./CalendarHeaderTemplateContext.js"; import Button from "./Button.js"; import ButtonType from "./types/ButtonType.js"; @@ -10,15 +9,8 @@ import CalendarHeaderRenderer from "./build/compiled/CalendarHeaderRenderer.lit. // Styles import styles from "./themes/CalendarHeader.css.js"; -addCustomCSS("ui5-calendar-header", "sap_belize", styles); -addCustomCSS("ui5-calendar-header", "sap_belize_hcb", styles); -addCustomCSS("ui5-calendar-header", "sap_fiori_3", styles); - const metadata = { tag: "ui5-calendar-header", - styleUrl: [ - "CalendarHeader.css", - ], properties: { monthText: { type: String, @@ -56,6 +48,10 @@ class CalendarHeader extends WebComponent { return CalendarHeaderRenderer; } + static get styles() { + return styles; + } + constructor() { super(); this._btnPrev = {}; diff --git a/packages/main/src/Card.js b/packages/main/src/Card.js index 4327317f2059..c3a183ccf01f 100644 --- a/packages/main/src/Card.js +++ b/packages/main/src/Card.js @@ -1,7 +1,6 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import URI from "@ui5/webcomponents-base/src/types/URI.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import { isIconURI } from "@ui5/webcomponents-base/src/IconPool.js"; import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; import Function from "@ui5/webcomponents-base/src/types/Function.js"; @@ -11,18 +10,11 @@ import Icon from "./Icon.js"; // Styles import cardCss from "./themes/Card.css.js"; -addCustomCSS("ui5-card", "sap_fiori_3", cardCss); -addCustomCSS("ui5-card", "sap_belize", cardCss); -addCustomCSS("ui5-card", "sap_belize_hcb", cardCss); - /** * @public */ const metadata = { tag: "ui5-card", - styleUrl: [ - "Card.css", - ], defaultSlot: "content", slots: /** @lends sap.ui.webcomponents.main.Card.prototype */ { @@ -151,6 +143,10 @@ class Card extends WebComponent { return CardRenderer; } + static get styles() { + return cardCss; + } + static calculateTemplateContext(state) { const hasAvatar = !!state.avatar; const icon = hasAvatar && isIconURI(state.avatar); diff --git a/packages/main/src/CheckBox.js b/packages/main/src/CheckBox.js index 4d6953260bc7..4232eec5683c 100644 --- a/packages/main/src/CheckBox.js +++ b/packages/main/src/CheckBox.js @@ -2,7 +2,6 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js"; import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import CheckBoxRenderer from "./build/compiled/CheckBoxRenderer.lit.js"; import CheckBoxTemplateContext from "./CheckBoxTemplateContext.js"; @@ -11,16 +10,11 @@ import Label from "./Label.js"; // Styles import checkboxCss from "./themes/CheckBox.css.js"; -addCustomCSS("ui5-checkbox", "sap_fiori_3", checkboxCss); -addCustomCSS("ui5-checkbox", "sap_belize", checkboxCss); -addCustomCSS("ui5-checkbox", "sap_belize_hcb", checkboxCss); - /** * @public */ const metadata = { tag: "ui5-checkbox", - styleUrl: ["CheckBox.css"], properties: /** @lends sap.ui.webcomponents.main.CheckBox.prototype */ { /** @@ -160,6 +154,10 @@ class CheckBox extends WebComponent { return CheckBoxRenderer; } + static get styles() { + return checkboxCss; + } + constructor() { super(); this._label = {}; diff --git a/packages/main/src/CustomListItem.js b/packages/main/src/CustomListItem.js index 38547fba4d02..80071b61063b 100644 --- a/packages/main/src/CustomListItem.js +++ b/packages/main/src/CustomListItem.js @@ -1,5 +1,4 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import ListItem from "./ListItem.js"; import CustomListItemTemplateContext from "./CustomListItemTemplateContext.js"; import CustomListItemRenderer from "./build/compiled/CustomListItemRenderer.lit.js"; @@ -7,20 +6,11 @@ import CustomListItemRenderer from "./build/compiled/CustomListItemRenderer.lit. // Styles import columnListItemCss from "./themes/CustomListItem.css.js"; -addCustomCSS("ui5-li-custom", "sap_fiori_3", columnListItemCss); -addCustomCSS("ui5-li-custom", "sap_belize", columnListItemCss); -addCustomCSS("ui5-li-custom", "sap_belize_hcb", columnListItemCss); - /** * @public */ const metadata = { tag: "ui5-li-custom", - styleUrl: [ - "ListItemBase.css", - "ListItem.css", - "CustomListItem.css", - ], defaultSlot: "content", slots: /** @lends sap.ui.webcomponents.main.CustomListItem.prototype */ { @@ -66,6 +56,10 @@ class CustomListItem extends ListItem { static get calculateTemplateContext() { return CustomListItemTemplateContext.calculate; } + + static get styles() { + return [ListItem.styles, columnListItemCss]; + } } Bootstrap.boot().then(_ => { diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js index efd9db955d03..588fbb9ef799 100644 --- a/packages/main/src/DatePicker.js +++ b/packages/main/src/DatePicker.js @@ -7,7 +7,6 @@ import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js"; import { getCalendarType } from "@ui5/webcomponents-base/src/Configuration.js"; import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider.js"; import { getIconURI } from "@ui5/webcomponents-base/src/IconPool.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import LocaleData from "@ui5/webcomponents-core/dist/sap/ui/core/LocaleData.js"; import DateFormat from "@ui5/webcomponents-core/dist/sap/ui/core/format/DateFormat.js"; import CalendarType from "@ui5/webcomponents-base/src/dates/CalendarType.js"; @@ -29,18 +28,11 @@ import "@ui5/webcomponents-core/dist/sap/ui/core/date/Gregorian.js"; // Styles import datePickerCss from "./themes/DatePicker.css.js"; -addCustomCSS("ui5-datepicker", "sap_fiori_3", datePickerCss); -addCustomCSS("ui5-datepicker", "sap_belize", datePickerCss); -addCustomCSS("ui5-datepicker", "sap_belize_hcb", datePickerCss); - /** * @public */ const metadata = { tag: "ui5-datepicker", - styleUrl: [ - "DatePicker.css", - ], properties: /** @lends sap.ui.webcomponents.main.DatePicker.prototype */ { /** * Defines a formatted date value. @@ -211,6 +203,9 @@ class DatePicker extends WebComponent { return DatePickerTemplateContext.calculate; } + static get styles() { + return datePickerCss; + } constructor() { super(); diff --git a/packages/main/src/DayPicker.js b/packages/main/src/DayPicker.js index ba42125198fb..3837d6bf6d83 100644 --- a/packages/main/src/DayPicker.js +++ b/packages/main/src/DayPicker.js @@ -10,25 +10,17 @@ import LocaleData from "@ui5/webcomponents-core/dist/sap/ui/core/LocaleData.js"; import CalendarDate from "@ui5/webcomponents-base/src/dates/CalendarDate.js"; import { calculateWeekNumber } from "@ui5/webcomponents-base/src/dates/CalendarUtils.js"; import CalendarType from "@ui5/webcomponents-base/src/dates/CalendarType.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import DayPickerTemplateContext from "./DayPickerTemplateContext.js"; import DayPickerRenderer from "./build/compiled/DayPickerRenderer.lit.js"; // Styles import dayPickerCSS from "./themes/DayPicker.css.js"; -addCustomCSS("ui5-daypicker", "sap_fiori_3", dayPickerCSS); -addCustomCSS("ui5-daypicker", "sap_belize", dayPickerCSS); -addCustomCSS("ui5-daypicker", "sap_belize_hcb", dayPickerCSS); - /** * @public */ const metadata = { tag: "ui5-daypicker", - styleUrl: [ - "DayPicker.css", - ], properties: /** @lends sap.ui.webcomponents.main.DayPicker.prototype */ { /** * A UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970. @@ -119,6 +111,10 @@ class DayPicker extends WebComponent { return DayPickerRenderer; } + static get styles() { + return dayPickerCSS; + } + constructor() { super(); this._oLocale = getFormatLocale(); diff --git a/packages/main/src/Dialog.js b/packages/main/src/Dialog.js index 5ca342173033..04dc4bb7283b 100644 --- a/packages/main/src/Dialog.js +++ b/packages/main/src/Dialog.js @@ -1,5 +1,4 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import DialogTemplateContext from "./DialogTemplateContext.js"; import Popup from "./Popup.js"; @@ -9,19 +8,11 @@ import DialogRenderer from "./build/compiled/DialogRenderer.lit.js"; // Styles import dialogCss from "./themes/Dialog.css.js"; -addCustomCSS("ui5-dialog", "sap_fiori_3", dialogCss); -addCustomCSS("ui5-dialog", "sap_belize", dialogCss); -addCustomCSS("ui5-dialog", "sap_belize_hcb", dialogCss); - /** * @public */ const metadata = { tag: "ui5-dialog", - styleUrl: [ - "Popup.css", - "Dialog.css", - ], properties: /** @lends sap.ui.webcomponents.main.Dialog.prototype */ { /** * Determines whether the ui5-dialog should be stretched to fullscreen. @@ -80,6 +71,10 @@ class Dialog extends Popup { return DialogRenderer; } + static get styles() { + return [Popup.styles, dialogCss]; + } + /** * Opens the ui5-dialog. * @public diff --git a/packages/main/src/GroupHeaderListItem.js b/packages/main/src/GroupHeaderListItem.js index 5141577fe00e..52005a25f49a 100644 --- a/packages/main/src/GroupHeaderListItem.js +++ b/packages/main/src/GroupHeaderListItem.js @@ -1,5 +1,4 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import ListItemBase from "./ListItemBase.js"; // Template @@ -7,27 +6,14 @@ import GroupHeaderListItemRenderer from "./build/compiled/GroupHeaderListItemRen import GroupHeaderListItemTemplateContext from "./GroupHeaderListItemTemplateContext.js"; // Styles -import listItemBaseCss from "./themes/ListItemBase.css.js"; import groupheaderListItemCss from "./themes/GroupHeaderListItem.css.js"; -addCustomCSS("ui5-li-groupheader", "sap_fiori_3", listItemBaseCss); -addCustomCSS("ui5-li-groupheader", "sap_fiori_3", groupheaderListItemCss); - -addCustomCSS("ui5-li-groupheader", "sap_belize", listItemBaseCss); -addCustomCSS("ui5-li-groupheader", "sap_belize", groupheaderListItemCss); - -addCustomCSS("ui5-li-groupheader", "sap_belize_hcb", listItemBaseCss); -addCustomCSS("ui5-li-groupheader", "sap_belize_hcb", groupheaderListItemCss); /** * @public */ const metadata = { tag: "ui5-li-groupheader", - styleUrl: [ - "ListItemBase.css", - "GroupHeaderListItem.css", - ], usesNodeText: true, properties: /** @lends sap.ui.webcomponents.main.GroupHeaderListItem.prototype */ { }, @@ -59,6 +45,10 @@ class GroupHeaderListItem extends ListItemBase { static get calculateTemplateContext() { return GroupHeaderListItemTemplateContext.calculate; } + + static get styles() { + return [ListItemBase.styles, groupheaderListItemCss]; + } } Bootstrap.boot().then(_ => { diff --git a/packages/main/src/Icon.js b/packages/main/src/Icon.js index 2743724cbd5b..bde389c86d84 100644 --- a/packages/main/src/Icon.js +++ b/packages/main/src/Icon.js @@ -1,7 +1,6 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import URI from "@ui5/webcomponents-base/src/types/URI.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; import IconTemplateContext from "./IconTemplateContext.js"; import IconRenderer from "./build/compiled/IconRenderer.lit.js"; @@ -9,18 +8,11 @@ import IconRenderer from "./build/compiled/IconRenderer.lit.js"; // Styles import iconCss from "./themes/Icon.css.js"; -addCustomCSS("ui5-icon", "sap_fiori_3", iconCss); -addCustomCSS("ui5-icon", "sap_belize", iconCss); -addCustomCSS("ui5-icon", "sap_belize_hcb", iconCss); - /** * @public */ const metadata = { tag: "ui5-icon", - styleUrl: [ - "Icon.css", - ], properties: /** @lends sap.ui.webcomponents.main.Icon.prototype */ { /** @@ -84,6 +76,10 @@ class Icon extends WebComponent { return IconTemplateContext.calculate; } + static get styles() { + return iconCss; + } + focus() { HTMLElement.prototype.focus.call(this); } diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js index 4324fea5db6b..9acde41cb7b6 100644 --- a/packages/main/src/Input.js +++ b/packages/main/src/Input.js @@ -2,7 +2,6 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import { isIE } from "@ui5/webcomponents-core/dist/sap/ui/Device.js"; import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import { isUp, isDown, @@ -19,23 +18,11 @@ import InputTemplateContext from "./InputTemplateContext.js"; import styles from "./themes/Input.css.js"; import shellbarInput from "./themes/ShellBarInput.css.js"; -addCustomCSS("ui5-input", "sap_fiori_3", styles); -addCustomCSS("ui5-input", "sap_belize", styles); -addCustomCSS("ui5-input", "sap_belize_hcb", styles); - -addCustomCSS("ui5-input", "sap_fiori_3", shellbarInput); -addCustomCSS("ui5-input", "sap_belize", shellbarInput); -addCustomCSS("ui5-input", "sap_belize_hcb", shellbarInput); - /** * @public */ const metadata = { tag: "ui5-input", - styleUrl: [ - "Input.css", - "ShellBarInput.css", - ], defaultSlot: "suggestionItems", slots: /** @lends sap.ui.webcomponents.main.Input.prototype */ { @@ -271,6 +258,10 @@ class Input extends WebComponent { return InputTemplateContext.calculate; } + static get styles() { + return [styles, shellbarInput]; + } + constructor() { super(); // Indicates if there is selected suggestionItem. diff --git a/packages/main/src/Label.js b/packages/main/src/Label.js index 931001a7da14..9a456995d330 100644 --- a/packages/main/src/Label.js +++ b/packages/main/src/Label.js @@ -1,6 +1,5 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; // Template import LabelRenderer from "./build/compiled/LabelRenderer.lit.js"; @@ -9,18 +8,11 @@ import LabelTemplateContext from "./LabelTemplateContext.js"; // Styles import labelCss from "./themes/Label.css.js"; -addCustomCSS("ui5-label", "sap_fiori_3", labelCss); -addCustomCSS("ui5-label", "sap_belize", labelCss); -addCustomCSS("ui5-label", "sap_belize_hcb", labelCss); - /** * @public */ const metadata = { tag: "ui5-label", - styleUrl: [ - "Label.css", - ], usesNodeText: true, properties: /** @lends sap.ui.webcomponents.main.Label.prototype */ { @@ -102,6 +94,10 @@ class Label extends WebComponent { return LabelRenderer; } + static get styles() { + return labelCss; + } + onclick() { const elementToFocus = document.getElementById(this.for); diff --git a/packages/main/src/Link.js b/packages/main/src/Link.js index b2f62f0f0399..a6371cc5ae51 100644 --- a/packages/main/src/Link.js +++ b/packages/main/src/Link.js @@ -1,6 +1,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js"; import URI from "@ui5/webcomponents-base/src/types/URI.js"; import LinkType from "./types/LinkType.js"; @@ -12,16 +11,11 @@ import LinkTemplateContext from "./LinkTemplateContext.js"; // Styles import linkCss from "./themes/Link.css.js"; -addCustomCSS("ui5-link", "sap_fiori_3", linkCss); -addCustomCSS("ui5-link", "sap_belize", linkCss); -addCustomCSS("ui5-link", "sap_belize_hcb", linkCss); - /** * @public */ const metadata = { tag: "ui5-link", - styleUrl: ["Link.css"], usesNodeText: true, properties: /** @lends sap.ui.webcomponents.main.Link.prototype */ { @@ -166,6 +160,10 @@ class Link extends WebComponent { return LinkRederer; } + static get styles() { + return linkCss; + } + onBeforeRendering() { const needsNoReferrer = this.target === "_blank" diff --git a/packages/main/src/List.js b/packages/main/src/List.js index af47b66d6ce0..a85211d9c90e 100644 --- a/packages/main/src/List.js +++ b/packages/main/src/List.js @@ -2,7 +2,6 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation.js"; import FocusHelper from "@ui5/webcomponents-base/src/FocusHelper.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import { isTabNext } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; import ListItemBase from "./ListItemBase.js"; @@ -17,18 +16,11 @@ import ListTemplateContext from "./ListTemplateContext.js"; // Styles import listCss from "./themes/List.css.js"; -addCustomCSS("ui5-list", "sap_fiori_3", listCss); -addCustomCSS("ui5-list", "sap_belize", listCss); -addCustomCSS("ui5-list", "sap_belize_hcb", listCss); - /** * @public */ const metadata = { tag: "ui5-list", - styleUrl: [ - "List.css", - ], defaultSlot: "items", slots: /** @lends sap.ui.webcomponents.main.List.prototype */ { @@ -246,6 +238,10 @@ class List extends WebComponent { return ListRenderer; } + static get styles() { + return listCss; + } + constructor() { super(); this.initItemNavigation(); diff --git a/packages/main/src/ListItem.js b/packages/main/src/ListItem.js index aeeafccca6bc..c84309da4891 100644 --- a/packages/main/src/ListItem.js +++ b/packages/main/src/ListItem.js @@ -7,6 +7,9 @@ import "./RadioButton.js"; import "./CheckBox.js"; import "./Button.js"; +// Styles +import styles from "./themes/ListItem.css"; + /** * @public */ @@ -75,6 +78,10 @@ class ListItem extends ListItemBase { return metadata; } + static get styles() { + return [styles, ListItemBase.styles]; + } + constructor() { super(); this._fnOnDelete = this.onDelete.bind(this); diff --git a/packages/main/src/ListItemBase.js b/packages/main/src/ListItemBase.js index c3ad45069d75..1caf2107ca19 100644 --- a/packages/main/src/ListItemBase.js +++ b/packages/main/src/ListItemBase.js @@ -3,6 +3,10 @@ import FocusHelper from "@ui5/webcomponents-base/src/FocusHelper.js"; import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; import ListItemBaseTemplateContext from "./ListItemBaseTemplateContext.js"; +// Styles +import styles from "./themes/ListItemBase.css"; + + /** * @public */ @@ -49,6 +53,10 @@ class ListItemBase extends WebComponent { return ListItemBaseTemplateContext.calculate; } + static get styles() { + return styles; + } + onfocusin(event) { this.fireEvent("_focused", event); } diff --git a/packages/main/src/MessageStrip.js b/packages/main/src/MessageStrip.js index 167a836a7efa..5cf96399898e 100644 --- a/packages/main/src/MessageStrip.js +++ b/packages/main/src/MessageStrip.js @@ -1,7 +1,6 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import URI from "@ui5/webcomponents-base/src/types/URI.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import MessageStripTemplateContext from "./MessageStripTemplateContext.js"; import MessageStripType from "./types/MessageStripType.js"; import MessageStripRenderer from "./build/compiled/MessageStripRenderer.lit.js"; @@ -10,18 +9,11 @@ import Icon from "./Icon.js"; // Styles import messageStripCss from "./themes/MessageStrip.css.js"; -addCustomCSS("ui5-messagestrip", "sap_fiori_3", messageStripCss); -addCustomCSS("ui5-messagestrip", "sap_belize", messageStripCss); -addCustomCSS("ui5-messagestrip", "sap_belize_hcb", messageStripCss); - /** * @public */ const metadata = { tag: "ui5-messagestrip", - styleUrl: [ - "MessageStrip.css", - ], usesNodeText: true, properties: /** @lends sap.ui.webcomponents.main.MessageStrip.prototype */ { @@ -128,6 +120,10 @@ class MessageStrip extends WebComponent { return MessageStripTemplateContext.calculate; } + static get styles() { + return messageStripCss; + } + constructor() { super(); diff --git a/packages/main/src/MonthPicker.js b/packages/main/src/MonthPicker.js index 85a7c9220bec..52b5cdc0c744 100644 --- a/packages/main/src/MonthPicker.js +++ b/packages/main/src/MonthPicker.js @@ -9,25 +9,17 @@ import LocaleData from "@ui5/webcomponents-core/dist/sap/ui/core/LocaleData.js"; import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider.js"; import CalendarType from "@ui5/webcomponents-base/src/dates/CalendarType.js"; import CalendarDate from "@ui5/webcomponents-base/src/dates/CalendarDate.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import MonthPickerTemplateContext from "./MonthPickerTemplateContext.js"; import MonthPickerRenderer from "./build/compiled/MonthPickerRenderer.lit.js"; // Styles import styles from "./themes/MonthPicker.css.js"; -addCustomCSS("ui5-month-picker", "sap_fiori_3", styles); -addCustomCSS("ui5-month-picker", "sap_belize", styles); -addCustomCSS("ui5-month-picker", "sap_belize_hcb", styles); - /** * @public */ const metadata = { tag: "ui5-month-picker", - styleUrl: [ - "MonthPicker.css", - ], properties: /** @lends sap.ui.webcomponents.main.MonthPicker.prototype */ { /** * A UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970. @@ -87,6 +79,10 @@ class MonthPicker extends WebComponent { return MonthPickerRenderer; } + static get styles() { + return styles; + } + constructor() { super(); this._oLocale = getFormatLocale(); diff --git a/packages/main/src/Panel.js b/packages/main/src/Panel.js index 5c84f8affe53..a2638444300f 100644 --- a/packages/main/src/Panel.js +++ b/packages/main/src/Panel.js @@ -1,6 +1,5 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import { getIconURI } from "@ui5/webcomponents-base/src/IconPool.js"; import slideDown from "@ui5/webcomponents-base/src/animations/slideDown.js"; import slideUp from "@ui5/webcomponents-base/src/animations/slideUp.js"; @@ -14,17 +13,11 @@ import { fetchResourceBundle, getResourceBundle } from "./ResourceBundleProvider // Styles import panelCss from "./themes/Panel.css.js"; -addCustomCSS("ui5-panel", "sap_fiori_3", panelCss); -addCustomCSS("ui5-panel", "sap_belize", panelCss); -addCustomCSS("ui5-panel", "sap_belize_hcb", panelCss); /** * @public */ const metadata = { tag: "ui5-panel", - styleUrl: [ - "Panel.css", - ], defaultSlot: "content", slots: /** @lends sap.ui.webcomponents.main.Panel.prototype */ { @@ -205,6 +198,10 @@ class Panel extends WebComponent { return PanelTemplateContext.calculate; } + static get styles() { + return panelCss; + } + constructor() { super(); diff --git a/packages/main/src/Popover.js b/packages/main/src/Popover.js index c8f6d2b443e8..eb682dff0344 100644 --- a/packages/main/src/Popover.js +++ b/packages/main/src/Popover.js @@ -1,6 +1,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import RenderScheduler from "@ui5/webcomponents-base/src/RenderScheduler.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import Integer from "@ui5/webcomponents-base/src/types/Integer.js"; import FocusHelper from "@ui5/webcomponents-base/src/FocusHelper.js"; import PopoverTemplateContext from "./PopoverTemplateContext.js"; @@ -16,15 +15,11 @@ import PopoverRenderer from "./build/compiled/PopoverRenderer.lit.js"; // Styles import popoverCss from "./themes/Popover.css.js"; -addCustomCSS("ui5-popover", "sap_fiori_3", popoverCss); -addCustomCSS("ui5-popover", "sap_belize", popoverCss); -addCustomCSS("ui5-popover", "sap_belize_hcb", popoverCss); /** * @public */ const metadata = { tag: "ui5-popover", - styleUrl: ["Popup.css", "Popover.css"], properties: /** @lends sap.ui.webcomponents.main.Popover.prototype */ { /** @@ -188,6 +183,10 @@ class Popover extends Popup { return PopoverRenderer; } + static get styles() { + return [Popup.styles, popoverCss]; + } + constructor() { super(); diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js index eb56167365d8..5b0dc9eb2fc8 100644 --- a/packages/main/src/Popup.js +++ b/packages/main/src/Popup.js @@ -1,20 +1,11 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import FocusHelper from "@ui5/webcomponents-base/src/FocusHelper.js"; import Integer from "@ui5/webcomponents-base/src/types/Integer.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import { isEscape } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; // Styles import styles from "./themes/Popup.css.js"; -addCustomCSS("ui5-dialog", "sap_fiori_3", styles); -addCustomCSS("ui5-dialog", "sap_belize", styles); -addCustomCSS("ui5-dialog", "sap_belize_hcb", styles); - -addCustomCSS("ui5-popover", "sap_fiori_3", styles); -addCustomCSS("ui5-popover", "sap_belize", styles); -addCustomCSS("ui5-popover", "sap_belize_hcb", styles); - /** * @public */ @@ -211,6 +202,10 @@ class Popup extends WebComponent { return metadata; } + static get styles() { + return styles; + } + static getNextZIndex() { currentZIndex += 2; return currentZIndex; diff --git a/packages/main/src/RadioButton.js b/packages/main/src/RadioButton.js index e35002aeabb1..323c37935f38 100644 --- a/packages/main/src/RadioButton.js +++ b/packages/main/src/RadioButton.js @@ -1,6 +1,5 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js"; import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js"; import { @@ -19,18 +18,11 @@ import RadioButtonTemplateContext from "./RadioButtonTemplateContext.js"; // Styles import radioButtonCss from "./themes/RadioButton.css.js"; -addCustomCSS("ui5-radiobutton", "sap_fiori_3", radioButtonCss); -addCustomCSS("ui5-radiobutton", "sap_belize", radioButtonCss); -addCustomCSS("ui5-radiobutton", "sap_belize_hcb", radioButtonCss); - /** * @public */ const metadata = { tag: "ui5-radiobutton", - styleUrl: [ - "RadioButton.css", - ], properties: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ { /** @@ -158,6 +150,10 @@ class RadioButton extends WebComponent { return RadioButtonRenderer; } + static get styles() { + return radioButtonCss; + } + constructor() { super(); this._label = {}; diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js index 2423befcd50c..c05a57290d51 100644 --- a/packages/main/src/Select.js +++ b/packages/main/src/Select.js @@ -7,7 +7,6 @@ import { isEnter, } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js"; import Function from "@ui5/webcomponents-base/src/types/Function.js"; import Suggestions from "./Suggestions.js"; @@ -19,18 +18,11 @@ import SelectTemplateContext from "./SelectTemplateContext.js"; // Styles import selectCss from "./themes/Select.css.js"; -addCustomCSS("ui5-select", "sap_fiori_3", selectCss); -addCustomCSS("ui5-select", "sap_belize", selectCss); -addCustomCSS("ui5-select", "sap_belize_hcb", selectCss); - /** * @public */ const metadata = { tag: "ui5-select", - styleUrl: [ - "Select.css", - ], defaultSlot: "items", slots: /** @lends sap.ui.webcomponents.main.Select.prototype */ { @@ -151,6 +143,10 @@ class Select extends WebComponent { return SelectTemplateContext.calculate; } + static get styles() { + return selectCss; + } + constructor() { super(); diff --git a/packages/main/src/ShellBar.js b/packages/main/src/ShellBar.js index 143f3633e51e..5bcb5dad12ca 100644 --- a/packages/main/src/ShellBar.js +++ b/packages/main/src/ShellBar.js @@ -3,7 +3,6 @@ import { getRTL } from "@ui5/webcomponents-base/src/Configuration.js"; import URI from "@ui5/webcomponents-base/src/types/URI.js"; import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import Function from "@ui5/webcomponents-base/src/types/Function.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import ResizeHandler from "@ui5/webcomponents-base/src/delegate/ResizeHandler.js"; import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation.js"; import { isSpace, isEscape } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; @@ -19,18 +18,11 @@ import ShellBarTemplateContext from "./ShellBarTemplateContext.js"; // Styles import styles from "./themes/ShellBar.css.js"; -addCustomCSS("ui5-shellbar", "sap_belize", styles); -addCustomCSS("ui5-shellbar", "sap_belize_hcb", styles); -addCustomCSS("ui5-shellbar", "sap_fiori_3", styles); - /** * @public */ const metadata = { tag: "ui5-shellbar", - styleUrl: [ - "ShellBar.css", - ], properties: /** @lends sap.ui.webcomponents.main.ShellBar.prototype */ { /** @@ -316,6 +308,10 @@ class ShellBar extends WebComponent { return metadata; } + static get styles() { + return styles; + } + static get renderer() { return ShellBarRenderer; } diff --git a/packages/main/src/StandardListItem.js b/packages/main/src/StandardListItem.js index 4356d7da37fd..128bae40cd04 100644 --- a/packages/main/src/StandardListItem.js +++ b/packages/main/src/StandardListItem.js @@ -1,5 +1,4 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import URI from "@ui5/webcomponents-base/src/types/URI.js"; import ListItem from "./ListItem.js"; import Icon from "./Icon.js"; @@ -7,25 +6,12 @@ import StandardListItemTemplateContext from "./StandardListItemTemplateContext.j import StandardListItemRenderer from "./build/compiled/StandardListItemRenderer.lit.js"; // Styles -import listItemCss from "./themes/ListItem.css.js"; -import listItemBaseCss from "./themes/ListItemBase.css.js"; - -addCustomCSS("ui5-li", "sap_fiori_3", listItemCss); -addCustomCSS("ui5-li", "sap_fiori_3", listItemBaseCss); -addCustomCSS("ui5-li", "sap_belize", listItemCss); -addCustomCSS("ui5-li", "sap_belize", listItemBaseCss); -addCustomCSS("ui5-li", "sap_belize_hcb", listItemCss); -addCustomCSS("ui5-li", "sap_belize_hcb", listItemBaseCss); /** * @public */ const metadata = { tag: "ui5-li", - styleUrl: [ - "ListItemBase.css", - "ListItem.css", - ], usesNodeText: true, properties: /** @lends sap.ui.webcomponents.main.StandardListItem.prototype */ { @@ -103,6 +89,10 @@ class StandardListItem extends ListItem { return StandardListItemRenderer; } + static get styles() { + return ListItem.styles; + } + static get metadata() { return metadata; } diff --git a/packages/main/src/Switch.js b/packages/main/src/Switch.js index f052fe550f74..24aac9ae48b5 100644 --- a/packages/main/src/Switch.js +++ b/packages/main/src/Switch.js @@ -1,7 +1,6 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; // Template import SwitchRenderer from "./build/compiled/SwitchRenderer.lit.js"; @@ -11,16 +10,11 @@ import SwitchType from "./types/SwitchType.js"; // Styles import switchCss from "./themes/Switch.css.js"; -addCustomCSS("ui5-switch", "sap_fiori_3", switchCss); -addCustomCSS("ui5-switch", "sap_belize", switchCss); -addCustomCSS("ui5-switch", "sap_belize_hcb", switchCss); - /** * @public */ const metadata = { tag: "ui5-switch", - styleUrl: ["Switch.css"], properties: /** @lends sap.ui.webcomponents.main.Switch.prototype */ { /** @@ -129,6 +123,10 @@ class Switch extends WebComponent { return metadata; } + static get styles() { + return switchCss; + } + static get renderer() { return SwitchRenderer; } diff --git a/packages/main/src/Tab.js b/packages/main/src/Tab.js index 10dd3e1a63b0..22179eaa4587 100644 --- a/packages/main/src/Tab.js +++ b/packages/main/src/Tab.js @@ -12,7 +12,6 @@ import TabRenderer from "./build/compiled/TabRenderer.lit.js"; */ const metadata = { tag: "ui5-tab", - styleUrl: [], defaultSlot: "content", slots: /** @lends sap.ui.webcomponents.main.Tab.prototype */ { diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index 6956cdfa2b7f..1de0232b2352 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -3,7 +3,6 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import ResizeHandler from "@ui5/webcomponents-base/src/delegate/ResizeHandler.js"; import ScrollEnablement from "@ui5/webcomponents-base/src/delegate/ScrollEnablement.js"; import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; import TabContainerTemplateContext from "./TabContainerTemplateContext.js"; import TabContainerRenderer from "./build/compiled/TabContainerRenderer.lit.js"; @@ -17,10 +16,6 @@ import TabBase from "./TabBase.js"; // Styles import buttonCss from "./themes/TabContainer.css.js"; -addCustomCSS("ui5-tabcontainer", "sap_fiori_3", buttonCss); -addCustomCSS("ui5-tabcontainer", "sap_belize", buttonCss); -addCustomCSS("ui5-tabcontainer", "sap_belize_hcb", buttonCss); - const SCROLL_STEP = 128; /** @@ -44,9 +39,6 @@ const metadata = { listenFor: { include: ["*"] }, }, }, - styleUrl: [ - "TabContainer.css", - ], properties: /** @lends sap.ui.webcomponents.main.TabContainer.prototype */ { /** * Determines whether the tabs are in a fixed state that is not @@ -169,6 +161,10 @@ class TabContainer extends WebComponent { return metadata; } + static get styles() { + return buttonCss; + } + static get renderer() { return TabContainerRenderer; } diff --git a/packages/main/src/TabSeparator.js b/packages/main/src/TabSeparator.js index 7dba576b389e..6097f5ac685f 100644 --- a/packages/main/src/TabSeparator.js +++ b/packages/main/src/TabSeparator.js @@ -8,7 +8,6 @@ import TabSeparatorRenderer from "./build/compiled/TabSeparatorRenderer.lit.js"; */ const metadata = { tag: "ui5-tab-separator", - styleUrl: [], properties: /** @lends sap.ui.webcomponents.main.TabSeparator.prototype */{ }, events: /** @lends sap.ui.webcomponents.main.TabSeparator.prototype */{ diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js index db367ccb39e9..12809eb97a05 100644 --- a/packages/main/src/Table.js +++ b/packages/main/src/Table.js @@ -2,7 +2,6 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import ResizeHandler from "@ui5/webcomponents-base/src/delegate/ResizeHandler.js"; import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import TableColumn from "./TableColumn.js"; import TableRow from "./TableRow.js"; import TableRenderer from "./build/compiled/TableRenderer.lit.js"; @@ -10,18 +9,11 @@ import TableRenderer from "./build/compiled/TableRenderer.lit.js"; // Styles import styles from "./themes/Table.css.js"; -addCustomCSS("ui5-table", "sap_fiori_3", styles); -addCustomCSS("ui5-table", "sap_belize", styles); -addCustomCSS("ui5-table", "sap_belize_hcb", styles); - /** * @public */ const metadata = { tag: "ui5-table", - styleUrl: [ - "Table.css", - ], slots: /** @lends sap.ui.webcomponents.main.Table.prototype */ { /** @@ -122,6 +114,10 @@ class Table extends WebComponent { return metadata; } + static get styles() { + return styles; + } + static get renderer() { return TableRenderer; } diff --git a/packages/main/src/TableCell.js b/packages/main/src/TableCell.js index 6622843a7507..1b63b2490206 100644 --- a/packages/main/src/TableCell.js +++ b/packages/main/src/TableCell.js @@ -1,23 +1,15 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import TableCellRenderer from "./build/compiled/TableCellRenderer.lit.js"; // Styles import styles from "./themes/TableCell.css.js"; -addCustomCSS("ui5-table-cell", "sap_fiori_3", styles); -addCustomCSS("ui5-table-cell", "sap_belize", styles); -addCustomCSS("ui5-table-cell", "sap_belize_hcb", styles); - /** * @public */ const metadata = { tag: "ui5-table-cell", - styleUrl: [ - "TableCell.css", - ], slots: /** @lends sap.ui.webcomponents.main.TableCell.prototype */ { /** * Specifies the content of the ui5-table-cell. @@ -69,6 +61,10 @@ class TableCell extends WebComponent { return metadata; } + static get styles() { + return styles; + } + static get renderer() { return TableCellRenderer; } diff --git a/packages/main/src/TableColumn.js b/packages/main/src/TableColumn.js index 7d149b8ea6ca..8bb874ae1898 100644 --- a/packages/main/src/TableColumn.js +++ b/packages/main/src/TableColumn.js @@ -2,21 +2,13 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import Integer from "@ui5/webcomponents-base/src/types/Integer.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import CSSSize from "@ui5/webcomponents-base/src/types/CSSSize.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import TableColumnRenderer from "./build/compiled/TableColumnRenderer.lit.js"; // Styles import styles from "./themes/TableColumn.css.js"; -addCustomCSS("ui5-table-column", "sap_fiori_3", styles); -addCustomCSS("ui5-table-column", "sap_belize", styles); -addCustomCSS("ui5-table-column", "sap_belize_hcb", styles); - const metadata = { tag: "ui5-table-column", - styleUrl: [ - "TableColumn.css", - ], slots: /** @lends sap.ui.webcomponents.main.TableColumn.prototype */ { /** @@ -114,6 +106,10 @@ class TableColumn extends WebComponent { return metadata; } + static get styles() { + return styles; + } + static get renderer() { return TableColumnRenderer; } diff --git a/packages/main/src/TableRow.js b/packages/main/src/TableRow.js index e3f50b153011..08d18773c6a3 100644 --- a/packages/main/src/TableRow.js +++ b/packages/main/src/TableRow.js @@ -1,24 +1,16 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import TableCell from "./TableCell.js"; import TableRowRenderer from "./build/compiled/TableRowRenderer.lit.js"; // Styles import styles from "./themes/TableRow.css.js"; -addCustomCSS("ui5-table-row", "sap_fiori_3", styles); -addCustomCSS("ui5-table-row", "sap_belize", styles); -addCustomCSS("ui5-table-row", "sap_belize_hcb", styles); - /** * @public */ const metadata = { tag: "ui5-table-row", - styleUrl: [ - "TableRow.css", - ], defaultSlot: "cells", slots: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ { /** @@ -69,6 +61,10 @@ class TableRow extends WebComponent { return metadata; } + static get styles() { + return styles; + } + static get renderer() { return TableRowRenderer; } diff --git a/packages/main/src/TextArea.js b/packages/main/src/TextArea.js index b8eace8e2838..7fe4784b8a26 100644 --- a/packages/main/src/TextArea.js +++ b/packages/main/src/TextArea.js @@ -2,7 +2,6 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import CSSSize from "@ui5/webcomponents-base/src/types/CSSSize.js"; import Integer from "@ui5/webcomponents-base/src/types/Integer.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import TextAreaTemplateContext from "./TextAreaTemplateContext.js"; import TextAreaRenderer from "./build/compiled/TextAreaRenderer.lit.js"; import { fetchResourceBundle, getResourceBundle } from "./ResourceBundleProvider.js"; @@ -10,18 +9,11 @@ import { fetchResourceBundle, getResourceBundle } from "./ResourceBundleProvider // Styles import styles from "./themes/TextArea.css.js"; -addCustomCSS("ui5-textarea", "sap_belize", styles); -addCustomCSS("ui5-textarea", "sap_belize_hcb", styles); -addCustomCSS("ui5-textarea", "sap_fiori_3", styles); - /** * @public */ const metadata = { tag: "ui5-textarea", - styleUrl: [ - "TextArea.css", - ], properties: /** @lends sap.ui.webcomponents.main.TextArea.prototype */ { /** * Defines the value of the Web Component. @@ -214,6 +206,10 @@ class TextArea extends WebComponent { return metadata; } + static get styles() { + return styles; + } + static get renderer() { return TextAreaRenderer; } diff --git a/packages/main/src/Timeline.js b/packages/main/src/Timeline.js index e29de7518351..3f841f9184cf 100644 --- a/packages/main/src/Timeline.js +++ b/packages/main/src/Timeline.js @@ -1,6 +1,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation.js"; import TimelineTemplateContext from "./TimelineTemplateContext.js"; import TimelineItem from "./TimelineItem.js"; @@ -9,18 +8,11 @@ import TimelineRenderer from "./build/compiled/TimelineRenderer.lit.js"; // Styles import styles from "./themes/Timeline.css.js"; -addCustomCSS("ui5-timeline", "sap_belize", styles); -addCustomCSS("ui5-timeline", "sap_belize_hcb", styles); -addCustomCSS("ui5-timeline", "sap_fiori_3", styles); - /** * @public */ const metadata = { tag: "ui5-timeline", - styleUrl: [ - "Timeline.css", - ], defaultSlot: "items", slots: /** @lends sap.ui.webcomponents.main.Timeline.prototype */ { /** @@ -66,6 +58,10 @@ class Timeline extends WebComponent { return metadata; } + static get styles() { + return styles; + } + static get renderer() { return TimelineRenderer; } diff --git a/packages/main/src/TimelineItem.js b/packages/main/src/TimelineItem.js index 0ee8a0382439..9b3d134380e3 100644 --- a/packages/main/src/TimelineItem.js +++ b/packages/main/src/TimelineItem.js @@ -1,6 +1,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import URI from "@ui5/webcomponents-base/src/types/URI.js"; import Function from "@ui5/webcomponents-base/src/types/Function.js"; import { fetchCldrData } from "@ui5/webcomponents-base/src/CLDR.js"; @@ -13,18 +12,11 @@ import TimelineItemRenderer from "./build/compiled/TimelineItemRenderer.lit.js"; // Styles import styles from "./themes/TimelineItem.css.js"; -addCustomCSS("ui5-timeline-item", "sap_belize", styles); -addCustomCSS("ui5-timeline-item", "sap_belize_hcb", styles); -addCustomCSS("ui5-timeline-item", "sap_fiori_3", styles); - /** * @public */ const metadata = { tag: "ui5-timeline-item", - styleUrl: [ - "TimelineItem.css", - ], defaultSlot: "description", slots: /** @lends sap.ui.webcomponents.main.TimelineItem.prototype */ { /** @@ -147,6 +139,10 @@ class TimelineItem extends WebComponent { return TimelineItemTemplateContext.calculate; } + static get styles() { + return styles; + } + constructor() { super(); diff --git a/packages/main/src/Title.js b/packages/main/src/Title.js index b1bfbf44653a..d9ad9b28a61b 100644 --- a/packages/main/src/Title.js +++ b/packages/main/src/Title.js @@ -1,6 +1,5 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import TitleLevel from "./types/TitleLevel.js"; import TitleRenderer from "./build/compiled/TitleRenderer.lit.js"; @@ -8,18 +7,11 @@ import TitleRenderer from "./build/compiled/TitleRenderer.lit.js"; // Styles import titleCss from "./themes/Title.css.js"; -addCustomCSS("ui5-title", "sap_fiori_3", titleCss); -addCustomCSS("ui5-title", "sap_belize", titleCss); -addCustomCSS("ui5-title", "sap_belize_hcb", titleCss); - /** * @public */ const metadata = { tag: "ui5-title", - styleUrl: [ - "Title.css", - ], usesNodeText: true, properties: /** @lends sap.ui.webcomponents.main.Title.prototype */ { @@ -76,6 +68,10 @@ class Title extends WebComponent { return TitleRenderer; } + static get styles() { + return titleCss; + } + static calculateTemplateContext(state) { const context = { tag: (state.level === TitleLevel.Auto ? "div" : state.level).toLowerCase(), diff --git a/packages/main/src/ToggleButton.js b/packages/main/src/ToggleButton.js index 6ce21fb4a7b7..733780b1d755 100644 --- a/packages/main/src/ToggleButton.js +++ b/packages/main/src/ToggleButton.js @@ -1,30 +1,16 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import Button from "./Button.js"; import ToggleButtonTemplateContext from "./ToggleButtonTemplateContext.js"; import ToggleButtonRenderer from "./build/compiled/ToggleButtonRenderer.lit.js"; // Styles -import btnCss from "./themes/Button.css.js"; import toggleBtnCss from "./themes/ToggleButton.css.js"; -addCustomCSS("ui5-togglebutton", "sap_fiori_3", btnCss); -addCustomCSS("ui5-togglebutton", "sap_belize", btnCss); -addCustomCSS("ui5-togglebutton", "sap_belize_hcb", btnCss); - -addCustomCSS("ui5-togglebutton", "sap_fiori_3", toggleBtnCss); -addCustomCSS("ui5-togglebutton", "sap_belize", toggleBtnCss); -addCustomCSS("ui5-togglebutton", "sap_belize_hcb", toggleBtnCss); - /** * @public */ const metadata = { tag: "ui5-togglebutton", - styleUrl: [ - "Button.css", - "ToggleButton.css", - ], usesNodeText: true, properties: /** @lends sap.ui.webcomponents.main.ToggleButton.prototype */ { /** @@ -74,6 +60,10 @@ class ToggleButton extends Button { return ToggleButtonRenderer; } + static get styles() { + return [Button.style, toggleBtnCss]; + } + onclick() { if (!this.disabled) { this.pressed = !this.pressed; diff --git a/packages/main/src/YearPicker.js b/packages/main/src/YearPicker.js index 12536578ad95..bcb7943981d2 100644 --- a/packages/main/src/YearPicker.js +++ b/packages/main/src/YearPicker.js @@ -10,25 +10,17 @@ import Integer from "@ui5/webcomponents-base/src/types/Integer.js"; import DateFormat from "@ui5/webcomponents-core/dist/sap/ui/core/format/DateFormat.js"; import CalendarType from "@ui5/webcomponents-base/src/dates/CalendarType.js"; import CalendarDate from "@ui5/webcomponents-base/src/dates/CalendarDate.js"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js"; import YearPickerTemplateContext from "./YearPickerTemplateContext.js"; import YearPickerRenderer from "./build/compiled/YearPickerRenderer.lit.js"; // Styles import styles from "./themes/YearPicker.css.js"; -addCustomCSS("ui5-yearpicker", "sap_fiori_3", styles); -addCustomCSS("ui5-yearpicker", "sap_belize", styles); -addCustomCSS("ui5-yearpicker", "sap_belize_hcb", styles); - /** * @public */ const metadata = { tag: "ui5-yearpicker", - styleUrl: [ - "YearPicker.css", - ], properties: /** @lends sap.ui.webcomponents.main.YearPicker.prototype */ { /** * A UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970. @@ -85,6 +77,10 @@ class YearPicker extends WebComponent { return metadata; } + static get styles() { + return styles; + } + static get renderer() { return YearPickerRenderer; }