fix(oui-select-picker): fix transclude with component instead of span

packages/oui-select-picker/README.md

@@ -39,7 +39,25 @@
     disabled></oui-select-picker>
 ```
 
-### Sections
+### Sections using `oui-select-picker-section`
+
+```html:preview
+<oui-select-picker label="Checked"
+    match="name"
+    description="Checked select picker">
+    <oui-select-picker-section>Section 1</oui-select-picker-section>
+    <oui-select-picker-section>Section 2</oui-select-picker-section>
+</oui-select-picker>
+<oui-select-picker label="Disabled"
+    match="name"
+    description="Disabled select picker"
+    disabled>
+    <oui-select-picker-section>Section 1</oui-select-picker-section>
+    <oui-select-picker-section>Section 2</oui-select-picker-section>
+</oui-select-picker>
+```
+
+### Sections using `span`
 
 ```html:preview
 <oui-select-picker label="Checked"
@@ -57,6 +75,8 @@
 </oui-select-picker>
 ```
 
+**Note**: This use is **deprecated** and will be removed in the next major version
+
 ### On change
 
 ```html:preview

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

@@ -1,6 +1,8 @@
-import SelectPicker from "./select-picker.component.js";
+import SelectPicker from "./select-picker.component";
+import SelectPickerSection from "./section/select-picker-section.component";
 
 export default angular
     .module("oui.select-picker", [])
     .component("ouiSelectPicker", SelectPicker)
+    .component("ouiSelectPickerSection", SelectPickerSection)
     .name;

packages/oui-select-picker/src/section/select-picker-section.component.js

@@ -0,0 +1,16 @@
+export default {
+    controller: class {
+        constructor ($element, $timeout) {
+            "ngInject";
+
+            this.$element = $element;
+            this.$timeout = $timeout;
+        }
+
+        $postLink () {
+            this.$timeout(() =>
+                this.$element.addClass("oui-select-picker__section")
+            );
+        }
+    }
+};

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

@@ -5,7 +5,8 @@ export default {
     template,
     controller,
     transclude: {
-        sectionSlot: "?span"
+        sectionSlot: "?ouiSelectPickerSection",
+        deprecatedSlot: "?span" // Deprecated: Replaced by "oui-select-picker-section"
     },
     bindings: {
         model: "=?",

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

@@ -40,7 +40,8 @@ export default class SelectPickerController {
             }
         }
 
-        this.transcludeSection = this.$transclude.isSlotFilled("sectionSlot");
+        this.sectionTransclude = this.$transclude.isSlotFilled("sectionSlot");
+        this.deprecatedTransclude = this.$transclude.isSlotFilled("deprecatedSlot");
     }
 
     $postLink () {

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

@@ -1,53 +1,56 @@
 <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.id }}"
-        ng-change="$ctrl.onRadioModelChange({ modelValue: $ctrl.model })"
-        ng-disabled="$ctrl.disabled"
-        ng-model="$ctrl.model"
-        ng-required="$ctrl.required"
-        ng-value="$ctrl.selectedValue">
+    name="{{:: $ctrl.name }}"
+    ng-attr-aria-labelledby="{{:: $ctrl.id }}Label"
+    ng-attr-aria-describedby="{{:: $ctrl.description && $ctrl.id + 'Description' || undefined }}"
+    ng-attr-id="{{:: $ctrl.id }}"
+    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">
+        ng-if="$ctrl.picture">
         <img class="oui-select-picker__picture" alt="" aria-hidden="true"
-                ng-if="$ctrl.isImgPath"
-                ng-src="{{ :: $ctrl.picture }}">
+            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>
+            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>
     <span class="oui-select-picker__description"
-            id="{{:: $ctrl.id }}Description"
-            ng-bind=":: $ctrl.description"
-            ng-if="$ctrl.description"></span>
+        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 === 1 && $ctrl.match">
+        ng-if="$ctrl.values.length === 1 && $ctrl.match">
         <span class="oui-select-picker__value"
-                ng-bind=":: $ctrl.getFirstValueMatch($ctrl.match)">
+            ng-bind=":: $ctrl.getFirstValueMatch($ctrl.match)">
         </span>
     </span>
     <span class="oui-select-picker__value-container oui-select-picker__section"
           ng-if="$ctrl.values.length > 1">
         <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">
+            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">
             <span ng-if="$ctrl.match" ng-bind=":: $ctrl.$scope.$parent.getItemValue($item, $ctrl.match)"></span>
             <span ng-if="!$ctrl.match" ng-bind=":: $item"></span>
         </oui-select>
     </span>
     <span class="oui-select-picker__transclude-container"
-            ng-if="$ctrl.transcludeSection"
-            ng-transclude="sectionSlot"></span>
+        ng-if="$ctrl.sectionTransclude"
+        ng-transclude="sectionSlot"></span>
+    <span class="oui-select-picker__transclude-container"
+        ng-if="$ctrl.deprecatedTransclude"
+        ng-transclude="deprecatedSlot"></span>
 </label>