MOBILE-3640 components: Add style component

src/core/components/components.module.ts

@@ -54,6 +54,7 @@ import { CoreLocalFileComponent } from './local-file/local-file';
 import { CoreBSTooltipComponent } from './bs-tooltip/bs-tooltip';
 import { CoreSitePickerComponent } from './site-picker/site-picker';
 import { CoreChartComponent } from './chart/chart';
+import { CoreStyleComponent } from './style/style';
 
 @NgModule({
     declarations: [
@@ -69,6 +70,7 @@ import { CoreChartComponent } from './chart/chart';
         CoreRecaptchaModalComponent,
         CoreShowPasswordComponent,
         CoreSplitViewComponent,
+        CoreStyleComponent,
         CoreEmptyBoxComponent,
         CoreTabsComponent,
         CoreTabComponent,
@@ -112,6 +114,7 @@ import { CoreChartComponent } from './chart/chart';
         CoreRecaptchaModalComponent,
         CoreShowPasswordComponent,
         CoreSplitViewComponent,
+        CoreStyleComponent,
         CoreEmptyBoxComponent,
         CoreTabsComponent,
         CoreTabComponent,

src/core/components/style/style.ts

@@ -0,0 +1,77 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, ElementRef, Input, OnChanges } from '@angular/core';
+
+/**
+ * Component to add a <style> tag.
+ *
+ * @description
+ * This component will include a <style> tag with some CSS rules that can optionally be pefixed.
+ *
+ * Example:
+ *
+ * <core-style [css]="'p { color: red; }'" prefix=".custom-rules"></core-style>
+ */
+@Component({
+    selector: 'core-style',
+    template: '',
+})
+export class CoreStyleComponent implements OnChanges {
+
+    @Input() css = ''; // CSS rules.
+    @Input() prefix = ''; // Prefix to add to CSS rules.
+
+    constructor(private element: ElementRef) {}
+
+    /**
+     * @inheritdoc
+     */
+    ngOnChanges(): void {
+        if (this.element && this.element.nativeElement) {
+            const style = document.createElement('style');
+            style.innerText = this.prefixCSS(this.css, this.prefix);
+
+            this.element.nativeElement.innerHTML = '';
+            this.element.nativeElement.appendChild(style);
+        }
+    }
+
+    /**
+     * Add a prefix to all rules in a CSS string.
+     *
+     * @param css CSS code to be prefixed.
+     * @param prefix Prefix css selector.
+     * @return Prefixed CSS.
+     */
+    protected prefixCSS(css: string, prefix: string): string {
+        if (!css) {
+            return '';
+        }
+
+        if (!prefix) {
+            return css;
+        }
+
+        // Remove comments first.
+        let regExp = /\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm;
+        css = css.replace(regExp, '');
+
+        // Add prefix.
+        regExp = /([^]*?)({[^]*?}|,)/g;
+
+        return css.replace(regExp, prefix + ' $1 $2');
+    }
+
+}