compass: add className option

Author: venmax

docs/plugins/compass.md

@@ -201,6 +201,13 @@ Color of the navigation cone.
 
 Default color of hotspots.
 
+#### `className`
+
+-   type: `string`
+-   updatable: yes
+
+CSS class(es) added to the compass element.
+
 ## Methods
 
 #### `setHotspots(hotspots)`

packages/compass-plugin/src/CompassPlugin.ts

@@ -15,6 +15,7 @@ const getConfig = utils.getConfigParser<CompassPluginConfig, ParsedCompassPlugin
         navigationColor: 'rgba(255, 0, 0, 0.2)',
         hotspots: [],
         hotspotColor: 'rgba(0, 0, 0, 0.5)',
+        className: null
     },
     {
         position: (position, { defValue }) => {

packages/compass-plugin/src/components/CompassComponent.ts

@@ -91,6 +91,11 @@ export class CompassComponent extends AbstractComponent {
 
     applyConfig() {
         this.container.className = `psv-compass psv-compass--${this.config.position.join('-')}`;
+
+        if (this.config.className) {
+            utils.addClasses(this.container, this.config.className);
+        }
+
         this.background.innerHTML = this.config.backgroundSvg;
 
         this.container.style.width = this.config.size;

packages/compass-plugin/src/model.ts

@@ -53,6 +53,11 @@ export type CompassPluginConfig = {
      * @default 'rgba(0, 0, 0, 0.5)'
      */
     hotspotColor?: string;
+
+    /**
+     * CSS class(es) added to the compass element.
+     */
+    className?: string;
 };
 
 export type ParsedCompassPluginConfig = Omit<CompassPluginConfig, 'position'> & {