@danske/sapphire-angular 1.12.4

package/src/lib/listbox/src/README.md

@@ -0,0 +1,67 @@
+## Solution 1
+
+sp-listbox => using cdkListbox in host directives
+sp-listbox-option => using cdkOption in host directives
+
+Pros:
+
+- Precise and clean mapping to CDK primitives.
+  - sp-listbox-option can easily inject sp-listbox to handle selection state UI.
+  - sp-listbox won't even need to have any template beside from <ng-content></ng-content>
+- No extra elements, when sp-listbox is used. list box items will be direct children of the sp-listbox.
+- Handling sections is easy, since the content reflects the hierarchy.
+
+Cons:
+
+- Usage of listbox in Select and similar components is not straightforward, since cdkOptions should be in the **content** of cdkListbox.
+  We will need another sp-option component that just collect option parts (primaryText, etc.), and loop over that to render sp-listbox-option
+  inside, sp-listbox that's rendered in a popover in sp-select's template.
+
+  - More complication in such use cases. The looping over sp-options to render sp-listbox-option is unintuitive, error-prone, and demands for
+    extra abstractions (such as a directive that would handle the looping).
+  - Two different API for when sp-listbox is used directly, and when inside another component:
+
+    ```html
+    <sp-listbox>
+      <sp-listbox-option></sp-listbox-option>
+      <sp-listbox-option></sp-listbox-option>
+    </sp-listbox>
+    <sp-select>
+      <sp-option></sp-option>
+      <sp-option></sp-option>
+    </sp-select>
+    ```
+
+  - Handling sections is in such use cases complicates the looping over sp-options to create sp-listbox-option
+
+- Code duplication in sp-listbox-option and sp-option
+
+## Solution 2
+
+sp-option => collects different parts of option UI (primaryText, etc.).
+sp-listbox => renders `ul` (with cdkListbox applied) and `li`s (with cdkOption) applied,
+looping over sp-options queried from content or received as input.
+
+Pros:
+
+- Allows for a uniform API for when listbox is used directly, and when used inside things like sp-select:
+  ```html
+  <sp-listbox>
+    <sp-option></sp-option>
+    <sp-option></sp-option>
+  </sp-listbox>
+  <sp-select>
+    <sp-option></sp-option>
+    <sp-option></sp-option>
+  </sp-select>
+  ```
+- Doesn't have limitations of applying cdk directives in hostDirectives. E.g. passing static value to directive
+  inputs is possible.
+- Allows for keeping the default viewEncapsulation.
+- Allows for accepting objects as options, and a template to render them. Similar to `items` API in react, which
+  would allow for performance optimization for long list of options.
+
+cons:
+
+- There will be an extra element, sp-listbox, between the usage and the actual list element.
+- Handling sections requires more work, compared to the other solution.

package/theme-assets/default-dark.css

@@ -0,0 +1 @@
+@import '@danske/sapphire-css/themes/default-dark.assets.css';

package/theme-assets/default.css

@@ -0,0 +1 @@
+@import '@danske/sapphire-css/themes/default.assets.css';