layout.Card: slideDirection_ #5400

Author: tobiu

examples/layout/card/MainContainer.mjs

@@ -22,7 +22,7 @@ class MainContainer extends ConfigurationViewport {
 
         return [{
             module        : Radio,
-            checked       : layout.slideDirection === 'bottom-left',
+            checked       : layout.slideDirection === 'horizontal',
             hideValueLabel: false,
             labelText     : 'slideDirection',
             listeners     : {change: me.onRadioLayoutChange.bind(me, 'slideDirection', 'horizontal')},
@@ -126,7 +126,7 @@ class MainContainer extends ConfigurationViewport {
      */
     onRadioLayoutChange(config, value, opts) {
         if (opts.value === true) { // we only want to listen to check events, not uncheck
-            this.exampleComponent.layout[config] = value;
+            this.getItem('card-container').layout[config] = value;
         }
     }
 

src/layout/Card.mjs

@@ -24,6 +24,13 @@ class Card extends Base {
      * @static
      */
     static itemCls = 'neo-layout-card-item'
+    /**
+     * Valid values for slideDirection
+     * @member {String[]} iconPositions=['horizontal','vertical',null]
+     * @protected
+     * @static
+     */
+    static slideDirections = ['horizontal', 'vertical', null]
 
     static config = {
         /**
@@ -47,7 +54,12 @@ class Card extends Base {
          * This will keep the instances & vdom trees
          * @member {Boolean} removeInactiveCards=true
          */
-        removeInactiveCards: true
+        removeInactiveCards: true,
+        /*
+         * Valid values: 'horizontal', 'vertical', null
+         * @member {String|null} slideDirection_=null
+         */
+        slideDirection_: null
     }
 
     /**
@@ -164,6 +176,17 @@ class Card extends Base {
         container.wrapperCls = wrapperCls;
     }
 
+    /**
+     * Triggered before the slideDirection config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @returns {String}
+     * @protected
+     */
+    beforeSetSlideDirection(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'slideDirection')
+    }
+
     /**
      * Loads a component.Base module which is defined via module: () => import('...')
      * @param {Object} item