fix(oui-select-picker): fix main classname on component (#280)

Author: AxelPeter

packages/oui-select-picker/src/select-picker.controller.js

@@ -19,6 +19,7 @@ export default class SelectPickerController {
         // So we use $timeout to force the $apply
         this.$timeout(() => {
             this.$element
+                .addClass("oui-select-picker")
                 .removeAttr("id")
                 .removeAttr("name");
 

packages/oui-select-picker/src/select-picker.html

@@ -1,52 +1,50 @@
-<div class="oui-select-picker">
-    <input type="radio" class="oui-select-picker__input"
-           name="{{:: $ctrl.name }}"
-           ng-attr-aria-labelledby="{{:: $ctrl.id }}-label"
-           ng-attr-aria-describedby="{{:: $ctrl.description && $ctrl.id + '-description' || undefined }}"
-           ng-attr-id="{{:: $ctrl.selectedValue ? $ctrl.id : undefined }}"
-           ng-change="$ctrl.onRadioModelChange({ modelValue: $ctrl.model })"
-           ng-disabled="$ctrl.disabled"
-           ng-model="$ctrl.model"
-           ng-required="$ctrl.required"
-           ng-value="$ctrl.selectedValue">
-    <label class="oui-select-picker__label-container" for="{{:: $ctrl.id }}">
-        <span class="oui-select-picker__picture-container"
-              ng-if="$ctrl.picture">
-            <img class="oui-select-picker__picture" alt="" aria-hidden="true"
-                 ng-if="$ctrl.isImgPath"
-                 ng-src="{{ :: $ctrl.picture }}">
-            <span class="oui-select-picker__picture" aria-hidden="true"
-                  ng-class=":: $ctrl.picture"
-                  ng-if="!$ctrl.isImgPath"></span>
+<input type="radio" class="oui-select-picker__input"
+        name="{{:: $ctrl.name }}"
+        ng-attr-aria-labelledby="{{:: $ctrl.id }}-label"
+        ng-attr-aria-describedby="{{:: $ctrl.description && $ctrl.id + '-description' || undefined }}"
+        ng-attr-id="{{:: $ctrl.selectedValue ? $ctrl.id : undefined }}"
+        ng-change="$ctrl.onRadioModelChange({ modelValue: $ctrl.model })"
+        ng-disabled="$ctrl.disabled"
+        ng-model="$ctrl.model"
+        ng-required="$ctrl.required"
+        ng-value="$ctrl.selectedValue">
+<label class="oui-select-picker__label-container" for="{{:: $ctrl.id }}">
+    <span class="oui-select-picker__picture-container"
+            ng-if="$ctrl.picture">
+        <img class="oui-select-picker__picture" alt="" aria-hidden="true"
+                ng-if="$ctrl.isImgPath"
+                ng-src="{{ :: $ctrl.picture }}">
+        <span class="oui-select-picker__picture" aria-hidden="true"
+                ng-class=":: $ctrl.picture"
+                ng-if="!$ctrl.isImgPath"></span>
+    </span>
+    <span class="oui-select-picker__label">
+        <span id="{{:: $ctrl.id }}-label"
+                ng-bind="$ctrl.label">
         </span>
-        <span class="oui-select-picker__label">
-            <span id="{{:: $ctrl.id }}-label"
-                  ng-bind="$ctrl.label">
-            </span>
-        </span>
-        <span class="oui-select-picker__description"
-              id="{{:: $ctrl.id }}-description"
-              ng-bind=":: $ctrl.description"
-              ng-if="$ctrl.description"></span>
-        <span class="oui-select-picker__value-container oui-select-picker__section"
-            ng-if="$ctrl.values.length">
-            <span class="oui-select-picker__value"
-                  ng-bind=":: $ctrl.getFirstValueMatch($ctrl.match)"
-                  ng-if="$ctrl.values.length === 1"></span>
-            <oui-select name="{{:: $ctrl.name }}"
-                        disabled="$ctrl.disabled"
-                        items="$ctrl.values"
-                        match="{{ $ctrl.match }}"
-                        model="$ctrl.selectedValue"
-                        on-change="$ctrl.onSelectModelChange({ modelValue: $ctrl.selectedValue })"
-                        placeholder="{{:: $ctrl.placeholder || ' - ' }}"
-                        data-align="end"
-                        ng-if="$ctrl.values.length > 1">
-                <span ng-bind=":: $ctrl.$scope.$parent.getItemValue($item, $ctrl.match)"></span>
-            </oui-select>
-        </span>
-        <span class="oui-select-picker__transclude-container"
-              ng-if="$ctrl.transcludeSection"
-              ng-transclude="sectionSlot"></span>
-    </label>
-</div>
+    </span>
+    <span class="oui-select-picker__description"
+            id="{{:: $ctrl.id }}-description"
+            ng-bind=":: $ctrl.description"
+            ng-if="$ctrl.description"></span>
+    <span class="oui-select-picker__value-container oui-select-picker__section"
+        ng-if="$ctrl.values.length">
+        <span class="oui-select-picker__value"
+                ng-bind=":: $ctrl.getFirstValueMatch($ctrl.match)"
+                ng-if="$ctrl.values.length === 1"></span>
+        <oui-select name="{{:: $ctrl.name }}"
+                    disabled="$ctrl.disabled"
+                    items="$ctrl.values"
+                    match="{{ $ctrl.match }}"
+                    model="$ctrl.selectedValue"
+                    on-change="$ctrl.onSelectModelChange({ modelValue: $ctrl.selectedValue })"
+                    placeholder="{{:: $ctrl.placeholder || ' - ' }}"
+                    data-align="end"
+                    ng-if="$ctrl.values.length > 1">
+            <span ng-bind=":: $ctrl.$scope.$parent.getItemValue($item, $ctrl.match)"></span>
+        </oui-select>
+    </span>
+    <span class="oui-select-picker__transclude-container"
+            ng-if="$ctrl.transcludeSection"
+            ng-transclude="sectionSlot"></span>
+</label>