From 94f81c1adc15eacd18dfec47954f90495f748424 Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Thu, 18 Apr 2019 17:57:04 +0300 Subject: [PATCH] feat: adds static method styles to base class --- packages/base/src/Theming.js | 18 +++++------------- packages/base/src/WebComponent.js | 3 +++ packages/base/src/WebComponentMetadata.js | 4 ---- packages/main/src/Button.js | 12 ++++-------- packages/main/src/Calendar.js | 12 ++++-------- packages/main/src/CalendarHeader.js | 12 ++++-------- packages/main/src/Card.js | 12 ++++-------- packages/main/src/CheckBox.js | 10 ++++------ packages/main/src/CustomListItem.js | 14 ++++---------- packages/main/src/DatePicker.js | 11 +++-------- packages/main/src/DayPicker.js | 12 ++++-------- packages/main/src/Dialog.js | 13 ++++--------- packages/main/src/GroupHeaderListItem.js | 18 ++++-------------- packages/main/src/Icon.js | 12 ++++-------- packages/main/src/Input.js | 19 +++++-------------- packages/main/src/Label.js | 12 ++++-------- packages/main/src/Link.js | 10 ++++------ packages/main/src/List.js | 12 ++++-------- packages/main/src/ListItem.js | 7 +++++++ packages/main/src/ListItemBase.js | 8 ++++++++ packages/main/src/MessageStrip.js | 12 ++++-------- packages/main/src/MonthPicker.js | 12 ++++-------- packages/main/src/Panel.js | 11 ++++------- packages/main/src/Popover.js | 9 ++++----- packages/main/src/Popup.js | 13 ++++--------- packages/main/src/RadioButton.js | 12 ++++-------- packages/main/src/Select.js | 12 ++++-------- packages/main/src/ShellBar.js | 12 ++++-------- packages/main/src/StandardListItem.js | 18 ++++-------------- packages/main/src/Switch.js | 10 ++++------ packages/main/src/Tab.js | 1 - packages/main/src/TabContainer.js | 12 ++++-------- packages/main/src/TabSeparator.js | 1 - packages/main/src/Table.js | 12 ++++-------- packages/main/src/TableCell.js | 12 ++++-------- packages/main/src/TableColumn.js | 12 ++++-------- packages/main/src/TableRow.js | 12 ++++-------- packages/main/src/TextArea.js | 12 ++++-------- packages/main/src/Timeline.js | 12 ++++-------- packages/main/src/TimelineItem.js | 12 ++++-------- packages/main/src/Title.js | 13 ++++--------- packages/main/src/ToggleButton.js | 18 ++++-------------- packages/main/src/YearPicker.js | 12 ++++-------- 43 files changed, 167 insertions(+), 326 deletions(-) diff --git a/packages/base/src/Theming.js b/packages/base/src/Theming.js index 59f5ec42fe4c..0dca79f06887 100644 --- a/packages/base/src/Theming.js +++ b/packages/base/src/Theming.js @@ -1,5 +1,4 @@ import { getTheme, _setTheme } from "./Configuration"; -import { getStyles } from "./theming/ThemeBundle"; import { getCustomCSS } from "./theming/CustomStyle"; import { getThemeProperties } from "./theming/ThemeProperties"; import { injectThemeProperties } from "./theming/StyleInjection"; @@ -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 341f364ab699..cc4389958ccd 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 065e4084074d..1c1a1a4d0723 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 659ec9d7d047..110fd8dee534 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"; import URI from "@ui5/webcomponents-base/src/types/URI"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import ButtonTemplateContext from "./ButtonTemplateContext"; import ButtonType from "./types/ButtonType"; @@ -12,18 +11,11 @@ import Icon from "./Icon"; // Styles import buttonCss from "./themes/Button.css"; -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 812756f2c340..cea598012d3d 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"; import "@ui5/webcomponents-base/src/shims/Core-shim"; import WebComponent from "@ui5/webcomponents-base/src/WebComponent"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import { fetchCldrData } from "@ui5/webcomponents-base/src/CLDR"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider"; @@ -25,18 +24,11 @@ import "@ui5/webcomponents-core/dist/sap/ui/core/date/Gregorian"; // Styles import calendarCSS from "./themes/Calendar.css"; -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 55a48fa876e6..a065103c1cdb 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"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import CalendarHeaderTemplateContext from "./CalendarHeaderTemplateContext"; import Button from "./Button"; import ButtonType from "./types/ButtonType"; @@ -10,15 +9,8 @@ import CalendarHeaderRenderer from "./build/compiled/CalendarHeaderRenderer.lit" // Styles import styles from "./themes/CalendarHeader.css"; -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 433f453524e1..cd5a107e858d 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"; import URI from "@ui5/webcomponents-base/src/types/URI"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import { isIconURI } from "@ui5/webcomponents-base/src/IconPool"; import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents"; import Function from "@ui5/webcomponents-base/src/types/Function"; @@ -11,18 +10,11 @@ import Icon from "./Icon"; // Styles import cardCss from "./themes/Card.css"; -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 bed8e22c2f7b..82ce8b0b9ef4 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"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes"; import ValueState from "@ui5/webcomponents-base/src/types/ValueState"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import CheckBoxRenderer from "./build/compiled/CheckBoxRenderer.lit"; import CheckBoxTemplateContext from "./CheckBoxTemplateContext"; @@ -11,16 +10,11 @@ import Label from "./Label"; // Styles import checkboxCss from "./themes/CheckBox.css"; -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 fbd6c1cbab0e..ce0b4850e2ce 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"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import ListItem from "./ListItem"; import CustomListItemTemplateContext from "./CustomListItemTemplateContext"; import CustomListItemRenderer from "./build/compiled/CustomListItemRenderer.lit"; @@ -7,20 +6,11 @@ import CustomListItemRenderer from "./build/compiled/CustomListItemRenderer.lit" // Styles import columnListItemCss from "./themes/CustomListItem.css"; -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 710ece3eef5c..2b7bbf1ae52b 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"; import { getCalendarType } from "@ui5/webcomponents-base/src/Configuration"; import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider"; import { getIconURI } from "@ui5/webcomponents-base/src/IconPool"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import LocaleData from "@ui5/webcomponents-core/dist/sap/ui/core/LocaleData"; import DateFormat from "@ui5/webcomponents-core/dist/sap/ui/core/format/DateFormat"; import CalendarType from "@ui5/webcomponents-base/src/dates/CalendarType"; @@ -29,18 +28,11 @@ import "@ui5/webcomponents-core/dist/sap/ui/core/date/Gregorian"; // Styles import datePickerCss from "./themes/DatePicker.css"; -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 f1d07f865ba3..8106036744e5 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"; import CalendarDate from "@ui5/webcomponents-base/src/dates/CalendarDate"; import { calculateWeekNumber } from "@ui5/webcomponents-base/src/dates/CalendarUtils"; import CalendarType from "@ui5/webcomponents-base/src/dates/CalendarType"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import DayPickerTemplateContext from "./DayPickerTemplateContext"; import DayPickerRenderer from "./build/compiled/DayPickerRenderer.lit"; // Styles import dayPickerCSS from "./themes/DayPicker.css"; -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 e550fc65083e..adf35374bc7c 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"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import DialogTemplateContext from "./DialogTemplateContext"; import Popup from "./Popup"; @@ -9,19 +8,11 @@ import DialogRenderer from "./build/compiled/DialogRenderer.lit"; // Styles import dialogCss from "./themes/Dialog.css"; -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 fd46f4a55bb0..f2c625b5f776 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"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import ListItemBase from "./ListItemBase"; // Template @@ -7,27 +6,14 @@ import GroupHeaderListItemRenderer from "./build/compiled/GroupHeaderListItemRen import GroupHeaderListItemTemplateContext from "./GroupHeaderListItemTemplateContext"; // Styles -import listItemBaseCss from "./themes/ListItemBase.css"; import groupheaderListItemCss from "./themes/GroupHeaderListItem.css"; -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 f79d380971dd..a3c71c7f140d 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"; import URI from "@ui5/webcomponents-base/src/types/URI"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents"; import IconTemplateContext from "./IconTemplateContext"; import IconRenderer from "./build/compiled/IconRenderer.lit"; @@ -9,18 +8,11 @@ import IconRenderer from "./build/compiled/IconRenderer.lit"; // Styles import iconCss from "./themes/Icon.css"; -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 9172d81374db..c11bb4dc644c 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"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; import { isIE } from "@ui5/webcomponents-core/dist/sap/ui/Device"; import ValueState from "@ui5/webcomponents-base/src/types/ValueState"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import { isUp, isDown, @@ -11,7 +10,7 @@ import { } from "@ui5/webcomponents-base/src/events/PseudoEvents"; import Icon from "./Icon"; import InputType from "./types/InputType"; -// Template +// Template , import InputRenderer from "./build/compiled/InputRenderer.lit"; import InputTemplateContext from "./InputTemplateContext"; @@ -19,23 +18,11 @@ import InputTemplateContext from "./InputTemplateContext"; import styles from "./themes/Input.css"; import shellbarInput from "./themes/ShellBarInput.css"; -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 92f6a07b5a61..dfb53884e39c 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"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; // Template import LabelRenderer from "./build/compiled/LabelRenderer.lit"; @@ -9,18 +8,11 @@ import LabelTemplateContext from "./LabelTemplateContext"; // Styles import labelCss from "./themes/Label.css"; -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 378b60fbd5ce..014080acbed6 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"; import WebComponent from "@ui5/webcomponents-base/src/WebComponent"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes"; import URI from "@ui5/webcomponents-base/src/types/URI"; import LinkType from "./types/LinkType"; @@ -12,16 +11,11 @@ import LinkTemplateContext from "./LinkTemplateContext"; // Styles import linkCss from "./themes/Link.css"; -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 829e3ffdd16d..de7c414a360c 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"; import WebComponent from "@ui5/webcomponents-base/src/WebComponent"; import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation"; import FocusHelper from "@ui5/webcomponents-base/src/FocusHelper"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import { isTabNext } from "@ui5/webcomponents-base/src/events/PseudoEvents"; import ListItemBase from "./ListItemBase"; @@ -17,18 +16,11 @@ import ListTemplateContext from "./ListTemplateContext"; // Styles import listCss from "./themes/List.css"; -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 92e778db0264..39a9fcb67623 100644 --- a/packages/main/src/ListItem.js +++ b/packages/main/src/ListItem.js @@ -7,6 +7,9 @@ import "./RadioButton"; import "./CheckBox"; import "./Button"; +// 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 9f79aa581492..aa77b3c07915 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"; import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/src/events/PseudoEvents"; import ListItemBaseTemplateContext from "./ListItemBaseTemplateContext"; +// 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 25636c5f962d..ca5c171ff364 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"; import URI from "@ui5/webcomponents-base/src/types/URI"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import MessageStripTemplateContext from "./MessageStripTemplateContext"; import MessageStripType from "./types/MessageStripType"; import MessageStripRenderer from "./build/compiled/MessageStripRenderer.lit"; @@ -10,18 +9,11 @@ import Icon from "./Icon"; // Styles import messageStripCss from "./themes/MessageStrip.css"; -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 c55f5aa88772..ae1c30962552 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"; import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider"; import CalendarType from "@ui5/webcomponents-base/src/dates/CalendarType"; import CalendarDate from "@ui5/webcomponents-base/src/dates/CalendarDate"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import MonthPickerTemplateContext from "./MonthPickerTemplateContext"; import MonthPickerRenderer from "./build/compiled/MonthPickerRenderer.lit"; // Styles import styles from "./themes/MonthPicker.css"; -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 54d112661d6f..c41bfa7ad676 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"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import { getIconURI } from "@ui5/webcomponents-base/src/IconPool"; import slideDown from "@ui5/webcomponents-base/src/animations/slideDown"; import slideUp from "@ui5/webcomponents-base/src/animations/slideUp"; @@ -14,17 +13,11 @@ import { fetchResourceBundle, getResourceBundle } from "./ResourceBundleProvider // Styles import panelCss from "./themes/Panel.css"; -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 1b2bbc021e79..e7e1de84659a 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"; import RenderScheduler from "@ui5/webcomponents-base/src/RenderScheduler"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import Integer from "@ui5/webcomponents-base/src/types/Integer"; import FocusHelper from "@ui5/webcomponents-base/src/FocusHelper"; import PopoverTemplateContext from "./PopoverTemplateContext"; @@ -16,15 +15,11 @@ import PopoverRenderer from "./build/compiled/PopoverRenderer.lit"; // Styles import popoverCss from "./themes/Popover.css"; -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 popoverCss; + } + constructor() { super(); diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js index 0443a1a5c8fd..927f543f56ad 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"; import FocusHelper from "@ui5/webcomponents-base/src/FocusHelper"; import Integer from "@ui5/webcomponents-base/src/types/Integer"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import { isEscape } from "@ui5/webcomponents-base/src/events/PseudoEvents"; // Styles import styles from "./themes/Popup.css"; -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 b678d5738e92..a3cc65202db4 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"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes"; import ValueState from "@ui5/webcomponents-base/src/types/ValueState"; import { @@ -19,18 +18,11 @@ import RadioButtonTemplateContext from "./RadioButtonTemplateContext"; // Styles import radioButtonCss from "./themes/RadioButton.css"; -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 c39385d9f840..841940933d2f 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"; import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import ValueState from "@ui5/webcomponents-base/src/types/ValueState"; import Function from "@ui5/webcomponents-base/src/types/Function"; import Suggestions from "./Suggestions"; @@ -19,18 +18,11 @@ import SelectTemplateContext from "./SelectTemplateContext"; // Styles import selectCss from "./themes/Select.css"; -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 9376ef4c21b8..a28a2b98acaf 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"; import URI from "@ui5/webcomponents-base/src/types/URI"; import WebComponent from "@ui5/webcomponents-base/src/WebComponent"; import Function from "@ui5/webcomponents-base/src/types/Function"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import ResizeHandler from "@ui5/webcomponents-base/src/delegate/ResizeHandler"; import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation"; import { isSpace, isEscape } from "@ui5/webcomponents-base/src/events/PseudoEvents"; @@ -19,18 +18,11 @@ import ShellBarTemplateContext from "./ShellBarTemplateContext"; // Styles import styles from "./themes/ShellBar.css"; -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 9ed275f30546..10f92fea312a 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"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import URI from "@ui5/webcomponents-base/src/types/URI"; import ListItem from "./ListItem"; import Icon from "./Icon"; @@ -7,25 +6,12 @@ import StandardListItemTemplateContext from "./StandardListItemTemplateContext"; import StandardListItemRenderer from "./build/compiled/StandardListItemRenderer.lit"; // Styles -import listItemCss from "./themes/ListItem.css"; -import listItemBaseCss from "./themes/ListItemBase.css"; - -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 0f8ff84b50f8..6efd61dc17f9 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"; import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; // Template import SwitchRenderer from "./build/compiled/SwitchRenderer.lit"; @@ -11,16 +10,11 @@ import SwitchType from "./types/SwitchType"; // Styles import switchCss from "./themes/Switch.css"; -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 bc9a3559518e..e128005e6b90 100644 --- a/packages/main/src/Tab.js +++ b/packages/main/src/Tab.js @@ -12,7 +12,6 @@ import TabRenderer from "./build/compiled/TabRenderer.lit"; */ 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 19ab40884ee5..62670d57ff77 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"; import ResizeHandler from "@ui5/webcomponents-base/src/delegate/ResizeHandler"; import ScrollEnablement from "@ui5/webcomponents-base/src/delegate/ScrollEnablement"; import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents"; import TabContainerTemplateContext from "./TabContainerTemplateContext"; import TabContainerRenderer from "./build/compiled/TabContainerRenderer.lit"; @@ -17,10 +16,6 @@ import TabBase from "./TabBase"; // Styles import buttonCss from "./themes/TabContainer.css"; -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 f10c4d67d24a..337c523c17e3 100644 --- a/packages/main/src/TabSeparator.js +++ b/packages/main/src/TabSeparator.js @@ -8,7 +8,6 @@ import TabSeparatorRenderer from "./build/compiled/TabSeparatorRenderer.lit"; */ 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 681c4727ceb1..b36b7a872ef4 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"; import ResizeHandler from "@ui5/webcomponents-base/src/delegate/ResizeHandler"; import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import TableColumn from "./TableColumn"; import TableRow from "./TableRow"; import TableRenderer from "./build/compiled/TableRenderer.lit"; @@ -10,18 +9,11 @@ import TableRenderer from "./build/compiled/TableRenderer.lit"; // Styles import styles from "./themes/Table.css"; -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 96e767568f15..80bd5eee9933 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"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import TableCellRenderer from "./build/compiled/TableCellRenderer.lit"; // Styles import styles from "./themes/TableCell.css"; -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 64dd8e27fa3c..e0344d9aca3a 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"; import Integer from "@ui5/webcomponents-base/src/types/Integer"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; import CSSSize from "@ui5/webcomponents-base/src/types/CSSSize"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import TableColumnRenderer from "./build/compiled/TableColumnRenderer.lit"; // Styles import styles from "./themes/TableColumn.css"; -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 079ba1b892bc..15b4bdb93dc4 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"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import TableCell from "./TableCell"; import TableRowRenderer from "./build/compiled/TableRowRenderer.lit"; // Styles import styles from "./themes/TableRow.css"; -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 111346fd858a..a328f3be56c1 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"; import WebComponent from "@ui5/webcomponents-base/src/WebComponent"; import CSSSize from "@ui5/webcomponents-base/src/types/CSSSize"; import Integer from "@ui5/webcomponents-base/src/types/Integer"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import TextAreaTemplateContext from "./TextAreaTemplateContext"; import TextAreaRenderer from "./build/compiled/TextAreaRenderer.lit"; import { fetchResourceBundle, getResourceBundle } from "./ResourceBundleProvider"; @@ -10,18 +9,11 @@ import { fetchResourceBundle, getResourceBundle } from "./ResourceBundleProvider // Styles import styles from "./themes/TextArea.css"; -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 fb01a88c4db4..816c7c1c9dea 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"; import WebComponent from "@ui5/webcomponents-base/src/WebComponent"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation"; import TimelineTemplateContext from "./TimelineTemplateContext"; import TimelineItem from "./TimelineItem"; @@ -9,18 +8,11 @@ import TimelineRenderer from "./build/compiled/TimelineRenderer.lit"; // Styles import styles from "./themes/Timeline.css"; -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 c6c0be94f2ea..5eca4ee1b4a1 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"; import WebComponent from "@ui5/webcomponents-base/src/WebComponent"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import URI from "@ui5/webcomponents-base/src/types/URI"; import Function from "@ui5/webcomponents-base/src/types/Function"; import { fetchCldrData } from "@ui5/webcomponents-base/src/CLDR"; @@ -13,18 +12,11 @@ import TimelineItemRenderer from "./build/compiled/TimelineItemRenderer.lit"; // Styles import styles from "./themes/TimelineItem.css"; -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 474721530654..58251d00acfc 100644 --- a/packages/main/src/Title.js +++ b/packages/main/src/Title.js @@ -1,25 +1,16 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import TitleLevel from "./types/TitleLevel"; import TitleRenderer from "./build/compiled/TitleRenderer.lit"; -// Styles // Styles import titleCss from "./themes/Title.css"; -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 +67,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 228b99fb2304..d779eb6acf39 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"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import Button from "./Button"; import ToggleButtonTemplateContext from "./ToggleButtonTemplateContext"; import ToggleButtonRenderer from "./build/compiled/ToggleButtonRenderer.lit"; // Styles -import btnCss from "./themes/Button.css"; import toggleBtnCss from "./themes/ToggleButton.css"; -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 d787a0547cbd..cc13577a1552 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"; import DateFormat from "@ui5/webcomponents-core/dist/sap/ui/core/format/DateFormat"; import CalendarType from "@ui5/webcomponents-base/src/dates/CalendarType"; import CalendarDate from "@ui5/webcomponents-base/src/dates/CalendarDate"; -import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import YearPickerTemplateContext from "./YearPickerTemplateContext"; import YearPickerRenderer from "./build/compiled/YearPickerRenderer.lit"; // Styles import styles from "./themes/YearPicker.css"; -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; }