@kirbydesign/designsystem 0.0.0

package/src/lib/components/dropdown/dropdown.component.html

@@ -0,0 +1,42 @@
+<button
+  kirby-button
+  [size]="size"
+  [attentionLevel]="isOpen ? attentionLevelOpen : attentionLevel"
+  tabindex="-1"
+  (click)="onToggle($event)"
+  (mousedown)="onButtonMouseEvent($event)"
+  [disabled]="disabled"
+  type="button"
+>
+  <span class="text">{{ selectedText || placeholder }}</span>
+  <kirby-icon [name]="isOpen ? 'arrow-up' : 'arrow-down'"></kirby-icon>
+</button>
+
+<ng-container *ngTemplateOutlet="usePopover ? popoverTemplate : itemWrapperTemplate"></ng-container>
+
+<ng-template #popoverTemplate>
+  <kirby-popover [target]="buttonElement" [popout]="popout" (willHide)="_onPopoverWillHide()">
+    <ng-container *ngTemplateOutlet="itemWrapperTemplate"></ng-container>
+  </kirby-popover>
+</ng-template>
+
+<ng-template #itemWrapperTemplate>
+  <kirby-card>
+    <ng-container *ngFor="let item of items; let i = index">
+      <ng-container
+        *ngTemplateOutlet="
+          itemTemplate || defaultItemTemplate;
+          context: { $implicit: item, selected: i === selectedIndex, index: i }
+        "
+      ></ng-container>
+    </ng-container>
+  </kirby-card>
+</ng-template>
+
+<ng-template #defaultItemTemplate let-item let-selected="selected" let-index="index">
+  <kirby-item [selectable]="true" [selected]="selected" (click)="onItemSelect(index)" role="option">
+    <!-- Tabindex fixes issue with popover dropdown not working in safari -->
+    <h3 tabindex="0">{{ getTextFromItem(item) }}</h3>
+    <kirby-icon *ngIf="selected" name="checkmark-selected" slot="end"></kirby-icon>
+  </kirby-item>
+</ng-template>

package/src/lib/components/dropdown/dropdown.component.scss

@@ -0,0 +1,142 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+$dropdown-max-height: 8 * utils.$dropdown-item-height;
+$margin-horizontal-total: 2 * utils.size('s');
+$min-screen-width-small: 320px;
+$min-screen-width: 375px;
+
+:host {
+  display: inline-block;
+  position: relative;
+  max-width: calc(100vw - #{$margin-horizontal-total});
+
+  &.expand {
+    display: block;
+
+    kirby-card {
+      width: 100%;
+      min-width: initial;
+      max-width: initial;
+    }
+  }
+
+  // Outline is applied on button border instead,
+  // to keep the rounded shape:
+  outline: none;
+
+  // Only apply focus ring if pointer device can hover
+  // (effectively desktop/mouse devices):
+  @include utils.focus {
+    > button,
+    > button.attention-level3 {
+      border-color: utils.$focus-ring-color;
+    }
+  }
+
+  &.error,
+  &.ng-touched.ng-invalid {
+    > button {
+      border-color: utils.get-color('danger');
+    }
+  }
+}
+
+:host > button {
+  position: relative;
+  margin: 0;
+  outline: none;
+  width: 100%;
+  transition: box-shadow 0.2s, border-color 0.2s;
+
+  // Temporary fix for button-width as attention level 3 has border,
+  // and attention level 2 does not:
+  &.attention-level2 {
+    border: 1px solid transparent;
+  }
+
+  .text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+kirby-popover {
+  --max-height: #{$dropdown-max-height};
+}
+
+kirby-card {
+  max-height: $dropdown-max-height;
+  margin-top: utils.size('xxxs');
+  margin-bottom: utils.size('xxxs');
+  overflow-y: auto;
+  box-shadow: utils.get-elevation(8);
+  min-width: $min-screen-width-small - $margin-horizontal-total;
+  @include utils.media('>=small') {
+    min-width: $min-screen-width - $margin-horizontal-total;
+  }
+
+  max-width: calc(100vw - #{$margin-horizontal-total});
+}
+
+:host(:not(.with-popover)) {
+  kirby-card {
+    display: none;
+    opacity: 0;
+    position: absolute;
+    z-index: utils.z('dropdown');
+  }
+
+  &.is-opening {
+    kirby-card {
+      display: block;
+    }
+  }
+
+  &.is-open {
+    kirby-card {
+      display: block;
+      opacity: 1;
+    }
+  }
+
+  &.popout-left {
+    kirby-card {
+      right: 0;
+    }
+  }
+
+  &.popout-up {
+    kirby-card {
+      top: 0;
+      margin-top: -#{utils.size('xxxs')};
+      transform: translateY(-100%);
+    }
+
+    &.is-open {
+      > button {
+        // Move button on top of card's shadow:
+        z-index: utils.z('dropdown') + 1;
+      }
+    }
+  }
+}
+
+:host(.is-open) {
+  & > button {
+    box-shadow: utils.get-elevation(8);
+  }
+}
+
+:host-context(kirby-calendar) {
+  > button {
+    border-color: transparent;
+    font-weight: utils.font-weight('bold');
+    font-size: initial;
+  }
+
+  &.is-open {
+    & > button {
+      box-shadow: none;
+    }
+  }
+}