@semantic-components/ui 0.0.1 → 0.0.10

package/fesm2022/semantic-components-ui.mjs

@@ -1,612 +1,1185 @@
+import { Directionality } from '@angular/cdk/bidi';
+import * as i2 from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import { _getEventTarget } from '@angular/cdk/platform';
+import * as i4 from '@angular/cdk/portal';
+import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
+import * as i1 from '@angular/common';
+import { CommonModule, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { input, output, Component, ViewEncapsulation, ChangeDetectionStrategy, signal, computed, LOCALE_ID, Inject, inject, Injector, viewChild, Input, HostBinding, EventEmitter, forwardRef, Output, ViewChild, ContentChildren } from '@angular/core';
+import { CdkMenuTrigger, CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import * as i1$1 from '@angular/platform-browser';
+import { noop } from 'rxjs';
+
+class MonthDaysComponent {
+    days = input.required();
+    firstDayMonth = input.required();
+    selectedDay = input('');
+    selectedDayChange = output();
+    isSelected(day) {
+        return day === this.selectedDay();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setSelectedDay(event) {
+        const selectedDay = event.target.dataset.scDay;
+        this.selectedDayChange.emit(selectedDay);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MonthDaysComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: MonthDaysComponent, isStandalone: true, selector: "sc-month-days", inputs: { days: { classPropertyName: "days", publicName: "days", isSignal: true, isRequired: true, transformFunction: null }, firstDayMonth: { classPropertyName: "firstDayMonth", publicName: "firstDayMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDay: { classPropertyName: "selectedDay", publicName: "selectedDay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedDayChange: "selectedDayChange" }, ngImport: i0, template: `
+    <div class="grid w-64 grid-cols-7">
+      @for (day of days(); track $index; let index = $index) {
+        <button
+          class="block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
+          [ngClass]="{
+            'col-start-1': index === 0 && firstDayMonth() === 0,
+            'col-start-2': index === 0 && firstDayMonth() === 1,
+            'col-start-3': index === 0 && firstDayMonth() === 2,
+            'col-start-4': index === 0 && firstDayMonth() === 3,
+            'col-start-5': index === 0 && firstDayMonth() === 4,
+            'col-start-6': index === 0 && firstDayMonth() === 5,
+            'col-start-7': index === 0 && firstDayMonth() === 6,
+            '!bg-primary-700 dark:!bg-primary-600 !text-white': isSelected(day),
+          }"
+          [attr.data-sc-day]="day"
+          (click)="setSelectedDay($event)"
+        >
+          {{ day.slice(-2) }}
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MonthDaysComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-month-days', standalone: true, imports: [CommonModule, NgClass], template: `
+    <div class="grid w-64 grid-cols-7">
+      @for (day of days(); track $index; let index = $index) {
+        <button
+          class="block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
+          [ngClass]="{
+            'col-start-1': index === 0 && firstDayMonth() === 0,
+            'col-start-2': index === 0 && firstDayMonth() === 1,
+            'col-start-3': index === 0 && firstDayMonth() === 2,
+            'col-start-4': index === 0 && firstDayMonth() === 3,
+            'col-start-5': index === 0 && firstDayMonth() === 4,
+            'col-start-6': index === 0 && firstDayMonth() === 5,
+            'col-start-7': index === 0 && firstDayMonth() === 6,
+            '!bg-primary-700 dark:!bg-primary-600 !text-white': isSelected(day),
+          }"
+          [attr.data-sc-day]="day"
+          (click)="setSelectedDay($event)"
+        >
+          {{ day.slice(-2) }}
+        </button>
+      }
+    </div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class MonthYearHeaderComponent {
+    monthYear = input.required();
+    monthYearChange = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MonthYearHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.11", type: MonthYearHeaderComponent, isStandalone: true, selector: "sc-month-year-header", inputs: { monthYear: { classPropertyName: "monthYear", publicName: "monthYear", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { monthYearChange: "monthYearChange" }, ngImport: i0, template: `
+    <div class="mb-2 flex justify-between">
+      <button
+        class="rounded-lg bg-white p-2.5 text-lg text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white"
+        (click)="monthYearChange.emit(-1)"
+        aria-label="Previous month"
+        type="button"
+      >
+        <svg
+          class="size-4 text-gray-800 rtl:rotate-180 dark:text-white"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 14 10"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M13 5H1m0 0 4 4M1 5l4-4"
+          ></path>
+        </svg>
+      </button>
+
+      <button
+        class="rounded-lg bg-white px-5 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
+        type="button"
+      >
+        {{ monthYear() }}
+      </button>
+
+      <button
+        class="rounded-lg bg-white p-2.5 text-lg text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white"
+        (click)="monthYearChange.emit(1)"
+        type="button"
+        aria-label="Next month"
+      >
+        <svg
+          class="size-4 text-gray-800 rtl:rotate-180 dark:text-white"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 14 10"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M1 5h12m0 0L9 1m4 4L9 9"
+          ></path>
+        </svg>
+      </button>
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MonthYearHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-month-year-header', standalone: true, imports: [CommonModule], template: `
+    <div class="mb-2 flex justify-between">
+      <button
+        class="rounded-lg bg-white p-2.5 text-lg text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white"
+        (click)="monthYearChange.emit(-1)"
+        aria-label="Previous month"
+        type="button"
+      >
+        <svg
+          class="size-4 text-gray-800 rtl:rotate-180 dark:text-white"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 14 10"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M13 5H1m0 0 4 4M1 5l4-4"
+          ></path>
+        </svg>
+      </button>
+
+      <button
+        class="rounded-lg bg-white px-5 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
+        type="button"
+      >
+        {{ monthYear() }}
+      </button>
+
+      <button
+        class="rounded-lg bg-white p-2.5 text-lg text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white"
+        (click)="monthYearChange.emit(1)"
+        type="button"
+        aria-label="Next month"
+      >
+        <svg
+          class="size-4 text-gray-800 rtl:rotate-180 dark:text-white"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 14 10"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M1 5h12m0 0L9 1m4 4L9 9"
+          ></path>
+        </svg>
+      </button>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class WeekDaysNamesComponent {
+    weekDaysNames = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: WeekDaysNamesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: WeekDaysNamesComponent, isStandalone: true, selector: "sc-week-days-names", inputs: { weekDaysNames: { classPropertyName: "weekDaysNames", publicName: "weekDaysNames", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <div class="mb-1 grid grid-cols-7">
+      @for (weekDayName of weekDaysNames(); track weekDayName.long) {
+        <abbr
+          class="h-6 text-center text-sm font-medium leading-6 text-gray-500 dark:text-gray-400"
+          [title]="weekDayName.long"
+          [attr.aria-label]="weekDayName.long"
+        >
+          {{ weekDayName.short }}
+        </abbr>
+      }
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: WeekDaysNamesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-week-days-names', standalone: true, imports: [CommonModule], template: `
+    <div class="mb-1 grid grid-cols-7">
+      @for (weekDayName of weekDaysNames(); track weekDayName.long) {
+        <abbr
+          class="h-6 text-center text-sm font-medium leading-6 text-gray-500 dark:text-gray-400"
+          [title]="weekDayName.long"
+          [attr.aria-label]="weekDayName.long"
+        >
+          {{ weekDayName.short }}
+        </abbr>
+      }
+    </div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class InlineDatePickerComponent {
+    localeId;
+    year = signal(0);
+    month = signal(0);
+    weekDaysNames = signal([]);
+    monthYear = computed(() => {
+        const options = {
+            month: 'long',
+            year: 'numeric',
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        };
+        const s = new Intl.DateTimeFormat(this.localeId, options).format(new Date(this.year(), this.month(), 1));
+        return s;
+    });
+    monthDays = computed(() => {
+        // Month in JavaScript is 0-indexed (January is 0, February is 1, etc),
+        // but by using 0 as the day it will give us the last day of the prior
+        // month. So passing in 1 as the month number will return the last day
+        // of January, not February
+        const numOfDays = new Date(this.year(), this.month() + 1, 0).getDate();
+        const days = [];
+        for (let i = 1; i <= numOfDays; i++) {
+            const date = new Date(this.year(), this.month(), i);
+            days.push(`${date.getFullYear()}-${this.twoDigits(date.getMonth() + 1)}-${this.twoDigits(date.getDate())}`);
+        }
+        return days;
+    });
+    firstDayMonth = computed(() => {
+        const date = new Date(this.year(), this.month(), 1);
+        const intlLongFormatter = new Intl.DateTimeFormat(this.localeId, { weekday: 'long' });
+        const dayName = intlLongFormatter.format(date);
+        return this.weekDaysNames()
+            .map((e) => e.long)
+            .indexOf(dayName);
+    });
+    selectedDay = signal('');
+    constructor(localeId) {
+        this.localeId = localeId;
+    }
+    ngOnInit() {
+        this.init();
+        this.setLocaleDayNames();
+    }
+    init() {
+        const today = new Date();
+        this.year.set(today.getFullYear());
+        this.month.set(today.getMonth());
+    }
+    setSelectedDay(day) {
+        this.selectedDay.set(day);
+    }
+    //https://github.com/angular/angular/issues/57193
+    setLocaleDayNames() {
+        const weekDaysNames = [];
+        const intlNarrowFormatter = new Intl.DateTimeFormat(this.localeId, { weekday: 'narrow' });
+        const intlShortFormatter = new Intl.DateTimeFormat(this.localeId, { weekday: 'short' });
+        const intlLongFormatter = new Intl.DateTimeFormat(this.localeId, { weekday: 'long' });
+        let k = 0;
+        const firstDayOfWeek = this.getFirstDayOfWeek();
+        if (firstDayOfWeek === 7) {
+            // First day of the week is Sunday
+            k = 3; // 3th January 2021 is a Sunday
+        }
+        if (firstDayOfWeek === 1) {
+            // First day of the week is Monday
+            k = 4; // 4th January 2021 is a Monday
+        }
+        for (let i = 0; i < 7; i += 1) {
+            const date = new Date(Date.UTC(2021, 0, i + k));
+            weekDaysNames.push({
+                narrow: intlNarrowFormatter.format(date),
+                short: intlShortFormatter.format(date),
+                long: intlLongFormatter.format(date),
+            });
+        }
+        this.weekDaysNames.set(weekDaysNames);
+    }
+    getFirstDayOfWeek() {
+        const locale = new Intl.Locale(this.localeId);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return locale.getWeekInfo().firstDay;
+    }
+    setMonthYear(n) {
+        if (n === 1) {
+            if (this.month() < 11) {
+                this.month.update((value) => value + 1);
+            }
+            else {
+                this.month.set(0);
+                this.year.update((value) => value + 1);
+            }
+        }
+        if (n === -1) {
+            if (this.month() > 0) {
+                this.month.update((value) => value - 1);
+            }
+            else {
+                this.month.set(11);
+                this.year.update((value) => value - 1);
+            }
+        }
+    }
+    twoDigits(n) {
+        return n.toLocaleString(this.localeId, {
+            minimumIntegerDigits: 2,
+            useGrouping: false,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: InlineDatePickerComponent, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: InlineDatePickerComponent, isStandalone: true, selector: "sc-inline-date-picker", ngImport: i0, template: `
+    <div class="inline-block rounded-lg bg-white p-4 shadow-lg dark:bg-gray-700">
+      <div class="bg-white px-2 py-3 text-center font-semibold dark:bg-gray-700 dark:text-white">
+        <sc-month-year-header [monthYear]="monthYear()" (monthYearChange)="setMonthYear($event)" />
+      </div>
+
+      <sc-week-days-names [weekDaysNames]="weekDaysNames()" />
+
+      <sc-month-days
+        [days]="monthDays()"
+        [firstDayMonth]="firstDayMonth()"
+        [selectedDay]="selectedDay()"
+        (selectedDayChange)="setSelectedDay($event)"
+      />
+
+      <div class="mt-2 flex space-x-2 rtl:space-x-reverse">
+        <button
+          class="bg-primary-700 hover:bg-primary-800 dark:hover:bg-primary-700 focus:ring-primary-300 dark:bg-primary-600 w-1/2 rounded-lg px-5 py-2 text-center text-sm font-medium text-white focus:ring-4"
+          type="button"
+        >
+          Today
+        </button>
+        <button
+          class="focus:ring-primary-300 w-1/2 rounded-lg border border-gray-300 bg-white px-5 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:ring-4 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
+          type="button"
+        >
+          Clear
+        </button>
+      </div>
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WeekDaysNamesComponent, selector: "sc-week-days-names", inputs: ["weekDaysNames"] }, { kind: "component", type: MonthYearHeaderComponent, selector: "sc-month-year-header", inputs: ["monthYear"], outputs: ["monthYearChange"] }, { kind: "component", type: MonthDaysComponent, selector: "sc-month-days", inputs: ["days", "firstDayMonth", "selectedDay"], outputs: ["selectedDayChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: InlineDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-inline-date-picker', standalone: true, imports: [CommonModule, WeekDaysNamesComponent, MonthYearHeaderComponent, MonthDaysComponent], template: `
+    <div class="inline-block rounded-lg bg-white p-4 shadow-lg dark:bg-gray-700">
+      <div class="bg-white px-2 py-3 text-center font-semibold dark:bg-gray-700 dark:text-white">
+        <sc-month-year-header [monthYear]="monthYear()" (monthYearChange)="setMonthYear($event)" />
+      </div>
+
+      <sc-week-days-names [weekDaysNames]="weekDaysNames()" />
+
+      <sc-month-days
+        [days]="monthDays()"
+        [firstDayMonth]="firstDayMonth()"
+        [selectedDay]="selectedDay()"
+        (selectedDayChange)="setSelectedDay($event)"
+      />
+
+      <div class="mt-2 flex space-x-2 rtl:space-x-reverse">
+        <button
+          class="bg-primary-700 hover:bg-primary-800 dark:hover:bg-primary-700 focus:ring-primary-300 dark:bg-primary-600 w-1/2 rounded-lg px-5 py-2 text-center text-sm font-medium text-white focus:ring-4"
+          type="button"
+        >
+          Today
+        </button>
+        <button
+          class="focus:ring-primary-300 w-1/2 rounded-lg border border-gray-300 bg-white px-5 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:ring-4 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
+          type="button"
+        >
+          Clear
+        </button>
+      </div>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }] });
 
 class DatePickerComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: DatePickerComponent, isStandalone: true, selector: "lib-date-picker", ngImport: i0, template: `
-    <p>date-picker works!</p>
+    localeId;
+    dateFormatPattern = signal('');
+    constructor(localeId) {
+        this.localeId = localeId;
+    }
+    ngOnInit() {
+        this.dateFormatPattern.set(this.getDateFormatPattern(this.localeId));
+    }
+    getDateFormatPattern(localeId) {
+        const getPatternForPart = (part) => {
+            switch (part.type) {
+                case 'day':
+                    return 'd'.repeat(part.value.length);
+                case 'month':
+                    return 'M'.repeat(part.value.length);
+                case 'year':
+                    return 'y'.repeat(part.value.length);
+                case 'literal':
+                    return part.value;
+                default:
+                    throw new Error('no default');
+            }
+        };
+        return new Intl.DateTimeFormat(localeId)
+            .formatToParts(new Date('2022-01-01'))
+            .map(getPatternForPart)
+            .join('');
+    }
+    _injector = inject(Injector);
+    _dir = inject(Directionality, { optional: true });
+    _overlay = inject(Overlay);
+    _isOpen = signal(false);
+    _input = viewChild('input');
+    _overlayOrigin = viewChild('overlayOrigin');
+    _overlayRef = null;
+    _portal = null;
+    /** Emits when the datepicker is opened. */
+    opened = output();
+    /** Emits when the datepicker is closed. */
+    closed = output();
+    /** Emits when the user selects a date. */
+    selected = output();
+    /** Opens the datepicker. */
+    open() {
+        if (!this._input) {
+            return;
+        }
+        // Focus should already be on the input, but this call is in case the datepicker is opened
+        // programmatically. We need to call this even if the datepicker is already open, because
+        // the user might be clicking the toggle.
+        this._input()?.nativeElement.focus();
+        if (this._isOpen()) {
+            return;
+        }
+        this._isOpen.set(true);
+        const overlayRef = this._getOverlayRef();
+        overlayRef.updateSize({ width: this._overlayOrigin()?.nativeElement.offsetWidth });
+        this._portal ??= new ComponentPortal(InlineDatePickerComponent);
+        overlayRef.attach(this._portal);
+        this.opened.emit();
+    }
+    /** Closes the datepicker. */
+    close() {
+        if (this._isOpen()) {
+            this._isOpen.set(false);
+            this._overlayRef?.detach();
+            this.closed.emit();
+        }
+    }
+    /** Creates an overlay reference for the datepicker panel. */
+    _getOverlayRef() {
+        if (this._overlayRef) {
+            return this._overlayRef;
+        }
+        const _overlayOrigin = this._overlayOrigin();
+        if (_overlayOrigin === undefined) {
+            throw new Error('_overlayOrigin is undefined');
+        }
+        const positionStrategy = this._overlay
+            .position()
+            .flexibleConnectedTo(_overlayOrigin)
+            .withFlexibleDimensions(false)
+            .withPush(false)
+            // .withTransformOriginOn('.mat-datepicker-panel')
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                //panelClass: 'mat-datepicker-above',
+            },
+        ]);
+        this._overlayRef = this._overlay.create({
+            positionStrategy,
+            scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            direction: this._dir || 'ltr',
+            hasBackdrop: false,
+        });
+        this._overlayRef.keydownEvents().subscribe((event) => {
+            console.log(event);
+        });
+        this._overlayRef.outsidePointerEvents().subscribe((event) => {
+            const target = _getEventTarget(event);
+            const origin = this._overlayOrigin()?.nativeElement;
+            if (target && target !== origin && !origin?.contains(target)) {
+                this.close();
+            }
+        });
+        return this._overlayRef;
+    }
+    /** Selects a specific date value. */
+    _selectValue(value) {
+        this.close();
+        this.selected.emit(value);
+        this._input()?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DatePickerComponent, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.11", type: DatePickerComponent, isStandalone: true, selector: "sc-date-picker", outputs: { opened: "opened", closed: "closed", selected: "selected" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="relative max-w-sm" #overlayOrigin>
+      <button class="absolute inset-y-0 end-0 flex items-center pe-3.5" (click)="open()">
+        <svg
+          class="size-4 text-gray-500 dark:text-gray-400"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+        >
+          <path
+            d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"
+          />
+        </svg>
+      </button>
+      <input
+        class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 pe-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+        #input
+        type="text"
+        placeholder="Select date"
+      />
+    </div>
+    {{ dateFormatPattern() }}
   `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-date-picker', standalone: true, imports: [CommonModule], template: `
-    <p>date-picker works!</p>
+            args: [{ selector: 'sc-date-picker', standalone: true, imports: [CommonModule, InlineDatePickerComponent], template: `
+    <div class="relative max-w-sm" #overlayOrigin>
+      <button class="absolute inset-y-0 end-0 flex items-center pe-3.5" (click)="open()">
+        <svg
+          class="size-4 text-gray-500 dark:text-gray-400"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+        >
+          <path
+            d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"
+          />
+        </svg>
+      </button>
+      <input
+        class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 pe-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+        #input
+        type="text"
+        placeholder="Select date"
+      />
+    </div>
+    {{ dateFormatPattern() }}
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }] });
+
+class DropdownComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: DropdownComponent, isStandalone: true, selector: "sc-dropdown", ngImport: i0, template: `
+    <!--ng-content select="dropdown-toggle" /-->
+
+    <button
+      class="inline-flex items-center rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+      [cdkMenuTriggerFor]="menu"
+      type="button"
+    >
+      Dropdown button
+      <svg
+        class="ms-3 size-2.5"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 10 6"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m1 1 4 4 4-4"
+        />
+      </svg>
+    </button>
+
+    <ng-template #menu>
+      <div
+        class="z-10 w-44 divide-y divide-gray-100 rounded-lg bg-white shadow dark:bg-gray-700"
+        cdkMenu
+      >
+        <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
+          <ng-content select="dropdown-items" />
+        </ul>
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-dropdown', standalone: true, imports: [CommonModule, CdkMenuTrigger, CdkMenu], template: `
+    <!--ng-content select="dropdown-toggle" /-->
+
+    <button
+      class="inline-flex items-center rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+      [cdkMenuTriggerFor]="menu"
+      type="button"
+    >
+      Dropdown button
+      <svg
+        class="ms-3 size-2.5"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 10 6"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m1 1 4 4 4-4"
+        />
+      </svg>
+    </button>
+
+    <ng-template #menu>
+      <div
+        class="z-10 w-44 divide-y divide-gray-100 rounded-lg bg-white shadow dark:bg-gray-700"
+        cdkMenu
+      >
+        <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
+          <ng-content select="dropdown-items" />
+        </ul>
+      </div>
+    </ng-template>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class DropdownDividerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DropdownDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: DropdownDividerComponent, isStandalone: true, selector: "sc-dropdown-divider", ngImport: i0, template: `
+    <li class="py-2"><hr /></li>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DropdownDividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-dropdown-divider', standalone: true, imports: [CommonModule], template: `
+    <li class="py-2"><hr /></li>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+//TODO try to add CdkMenuItem
+class DropdownItemComponent {
+    text = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.11", type: DropdownItemComponent, isStandalone: true, selector: "sc-dropdown-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <li>
+      <a
+        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+        href="javascript:void(0)"
+      >
+        {{ text() }}
+      </a>
+    </li>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DropdownItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-dropdown-item', standalone: true, imports: [CommonModule, CdkMenuItem], template: `
+    <li>
+      <a
+        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+        href="javascript:void(0)"
+      >
+        {{ text() }}
+      </a>
+    </li>
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
 class EditorComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: EditorComponent, isStandalone: true, selector: "lib-editor", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: EditorComponent, isStandalone: true, selector: "sc-editor", ngImport: i0, template: `
     <p>editor works!</p>
   `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-editor', standalone: true, imports: [CommonModule], template: `
+            args: [{ selector: 'sc-editor', standalone: true, imports: [CommonModule], template: `
     <p>editor works!</p>
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
-class NavbarComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: NavbarComponent, isStandalone: true, selector: "lib-navbar", ngImport: i0, template: `
-    <nav class="border-gray-200 bg-white dark:bg-gray-900">
-      <div class="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4">
-        <a class="flex items-center space-x-3 rtl:space-x-reverse" href="https://flowbite.com/">
-          <img class="h-8" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" />
-          <span class="self-center whitespace-nowrap text-2xl font-semibold dark:text-white">
-            Flowbite
-          </span>
-        </a>
-        <div class="flex items-center space-x-1 md:order-2 md:space-x-0 rtl:space-x-reverse">
-          <button
-            class="inline-flex cursor-pointer items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
-            type="button"
-            data-dropdown-toggle="language-dropdown-menu"
-          >
-            <svg
-              class="me-3 h-5 w-5 rounded-full"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-              viewBox="0 0 3900 3900"
+class NavComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: NavComponent, isStandalone: true, selector: "sc-nav", ngImport: i0, template: `
+    <p>nav works!</p>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-nav', standalone: true, imports: [CommonModule], template: `
+    <p>nav works!</p>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class NavItemComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: NavItemComponent, isStandalone: true, selector: "sc-nav-item", ngImport: i0, template: `
+    <p>nav-item works!</p>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NavItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-nav-item', standalone: true, imports: [CommonModule], template: `
+    <p>nav-item works!</p>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }] });
+
+class NavItemDropdownComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NavItemDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: NavItemDropdownComponent, isStandalone: true, selector: "sc-nav-item-dropdown", ngImport: i0, template: `
+    <li>
+      <button
+        class="flex w-full items-center justify-between rounded px-3 py-2 text-gray-900 hover:bg-gray-100 md:w-auto md:border-0 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:focus:text-white md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
+        id="dropdownNavbarLink"
+        data-dropdown-toggle="dropdownNavbar"
+      >
+        Dropdown
+        <svg
+          class="ms-2.5 size-2.5"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 10 6"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m1 1 4 4 4-4"
+          />
+        </svg>
+      </button>
+      <!-- Dropdown menu -->
+      <div
+        class="z-10 hidden w-44 divide-y divide-gray-100 rounded-lg bg-white font-normal shadow dark:divide-gray-600 dark:bg-gray-700"
+        id="dropdownNavbar"
+      >
+        <ul
+          class="py-2 text-sm text-gray-700 dark:text-gray-400"
+          aria-labelledby="dropdownLargeButton"
+        >
+          <li>
+            <a
+              class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+              href="javascript:void(0)"
             >
-              <path fill="#b22234" d="M0 0h7410v3900H0z" />
-              <path
-                d="M0 450h7410m0 600H0m0 600h7410m0 600H0m0 600h7410m0 600H0"
-                stroke="#fff"
-                stroke-width="300"
-              />
-              <path fill="#3c3b6e" d="M0 0h2964v2100H0z" />
-              <g fill="#fff">
-                <g id="d">
-                  <g id="c">
-                    <g id="e">
-                      <g id="b">
-                        <path
-                          id="a"
-                          d="M247 90l70.534 217.082-184.66-134.164h228.253L176.466 307.082z"
-                        />
-                        <use xlink:href="#a" y="420" />
-                        <use xlink:href="#a" y="840" />
-                        <use xlink:href="#a" y="1260" />
-                      </g>
-                      <use xlink:href="#a" y="1680" />
-                    </g>
-                    <use xlink:href="#b" x="247" y="210" />
-                  </g>
-                  <use xlink:href="#c" x="494" />
-                </g>
-                <use xlink:href="#d" x="988" />
-                <use xlink:href="#c" x="1976" />
-                <use xlink:href="#e" x="2470" />
-              </g>
-            </svg>
-            English (US)
-          </button>
-          <!-- Dropdown -->
-          <div
-            class="z-50 my-4 hidden list-none divide-y divide-gray-100 rounded-lg bg-white text-base shadow dark:bg-gray-700"
-            id="language-dropdown-menu"
-          >
-            <ul class="py-2 font-medium" role="none">
-              <li>
-                <a
-                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-                  href="javascript:void(0)"
-                  role="menuitem"
-                >
-                  <div class="inline-flex items-center">
-                    <svg
-                      class="me-2 h-3.5 w-3.5 rounded-full"
-                      id="flag-icon-css-us"
-                      aria-hidden="true"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 512 512"
-                    >
-                      <g fill-rule="evenodd">
-                        <g stroke-width="1pt">
-                          <path
-                            fill="#bd3d44"
-                            d="M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z"
-                            transform="scale(3.9385)"
-                          />
-                          <path
-                            fill="#fff"
-                            d="M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z"
-                            transform="scale(3.9385)"
-                          />
-                        </g>
-                        <path fill="#192f5d" d="M0 0h98.8v70H0z" transform="scale(3.9385)" />
-                        <path
-                          fill="#fff"
-                          d="M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z"
-                          transform="scale(3.9385)"
-                        />
-                      </g>
-                    </svg>
-                    English (US)
-                  </div>
-                </a>
-              </li>
-              <li>
-                <a
-                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-                  href="javascript:void(0)"
-                  role="menuitem"
-                >
-                  <div class="inline-flex items-center">
-                    <svg
-                      class="me-2 h-3.5 w-3.5 rounded-full"
-                      id="flag-icon-css-de"
-                      aria-hidden="true"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 512 512"
-                    >
-                      <path fill="#ffce00" d="M0 341.3h512V512H0z" />
-                      <path d="M0 0h512v170.7H0z" />
-                      <path fill="#d00" d="M0 170.7h512v170.6H0z" />
-                    </svg>
-                    Deutsch
-                  </div>
-                </a>
-              </li>
-              <li>
-                <a
-                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-                  href="javascript:void(0)"
-                  role="menuitem"
-                >
-                  <div class="inline-flex items-center">
-                    <svg
-                      class="me-2 h-3.5 w-3.5 rounded-full"
-                      id="flag-icon-css-it"
-                      aria-hidden="true"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 512 512"
-                    >
-                      <g fill-rule="evenodd" stroke-width="1pt">
-                        <path fill="#fff" d="M0 0h512v512H0z" />
-                        <path fill="#009246" d="M0 0h170.7v512H0z" />
-                        <path fill="#ce2b37" d="M341.3 0H512v512H341.3z" />
-                      </g>
-                    </svg>
-                    Italiano
-                  </div>
-                </a>
-              </li>
-              <li>
-                <a
-                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-                  href="javascript:void(0)"
-                  role="menuitem"
-                >
-                  <div class="inline-flex items-center">
-                    <svg
-                      class="me-2 h-3.5 w-3.5 rounded-full"
-                      id="flag-icon-css-cn"
-                      aria-hidden="true"
-                      xmlns="http://www.w3.org/2000/svg"
-                      xmlns:xlink="http://www.w3.org/1999/xlink"
-                      viewBox="0 0 512 512"
-                    >
-                      <defs><path id="a" fill="#ffde00" d="M1-.3L-.7.8 0-1 .6.8-1-.3z" /></defs>
-                      <path fill="#de2910" d="M0 0h512v512H0z" />
-                      <use
-                        width="30"
-                        height="20"
-                        transform="matrix(76.8 0 0 76.8 128 128)"
-                        xlink:href="#a"
-                      />
-                      <use
-                        width="30"
-                        height="20"
-                        transform="rotate(-121 142.6 -47) scale(25.5827)"
-                        xlink:href="#a"
-                      />
-                      <use
-                        width="30"
-                        height="20"
-                        transform="rotate(-98.1 198 -82) scale(25.6)"
-                        xlink:href="#a"
-                      />
-                      <use
-                        width="30"
-                        height="20"
-                        transform="rotate(-74 272.4 -114) scale(25.6137)"
-                        xlink:href="#a"
-                      />
-                      <use
-                        width="30"
-                        height="20"
-                        transform="matrix(16 -19.968 19.968 16 256 230.4)"
-                        xlink:href="#a"
-                      />
-                    </svg>
-                    中文 (繁體)
-                  </div>
-                </a>
-              </li>
-            </ul>
-          </div>
-          <button
-            class="inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 md:hidden dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
-            data-collapse-toggle="navbar-language"
-            type="button"
-            aria-controls="navbar-language"
-            aria-expanded="false"
-          >
-            <span class="sr-only">Open main menu</span>
-            <svg
-              class="h-5 w-5"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 17 14"
+              Dashboard
+            </a>
+          </li>
+          <li>
+            <a
+              class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+              href="javascript:void(0)"
             >
-              <path
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M1 1h15M1 7h15M1 13h15"
-              />
-            </svg>
-          </button>
-        </div>
-        <div
-          class="hidden w-full items-center justify-between md:order-1 md:flex md:w-auto"
-          id="navbar-language"
-        >
-          <ul
-            class="mt-4 flex flex-col rounded-lg border border-gray-100 bg-gray-50 p-4 font-medium md:mt-0 md:flex-row md:space-x-8 md:border-0 md:bg-white md:p-0 rtl:space-x-reverse dark:border-gray-700 dark:bg-gray-800 md:dark:bg-gray-900"
+              Settings
+            </a>
+          </li>
+          <li>
+            <a
+              class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+              href="javascript:void(0)"
+            >
+              Earnings
+            </a>
+          </li>
+        </ul>
+        <div class="py-1">
+          <a
+            class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
+            href="javascript:void(0)"
           >
-            <li>
-              <a
-                class="block rounded bg-blue-700 px-3 py-2 text-white md:bg-transparent md:p-0 md:text-blue-700 md:dark:text-blue-500"
-                href="javascript:void(0)"
-                aria-current="page"
-              >
-                Home
-              </a>
-            </li>
-            <li>
-              <a
-                class="block rounded px-3 py-2 text-gray-900 hover:bg-gray-100 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
-                href="javascript:void(0)"
-              >
-                About
-              </a>
-            </li>
-            <li>
-              <a
-                class="block rounded px-3 py-2 text-gray-900 hover:bg-gray-100 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
-                href="javascript:void(0)"
-              >
-                Services
-              </a>
-            </li>
-            <li>
-              <a
-                class="block rounded px-3 py-2 text-gray-900 hover:bg-gray-100 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
-                href="javascript:void(0)"
-              >
-                Pricing
-              </a>
-            </li>
-            <li>
-              <a
-                class="block rounded px-3 py-2 text-gray-900 hover:bg-gray-100 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
-                href="javascript:void(0)"
-              >
-                Contact
-              </a>
-            </li>
-          </ul>
+            Sign out
+          </a>
         </div>
       </div>
-    </nav>
+    </li>
   `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NavItemDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-navbar', standalone: true, imports: [CommonModule], template: `
-    <nav class="border-gray-200 bg-white dark:bg-gray-900">
-      <div class="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4">
-        <a class="flex items-center space-x-3 rtl:space-x-reverse" href="https://flowbite.com/">
-          <img class="h-8" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" />
-          <span class="self-center whitespace-nowrap text-2xl font-semibold dark:text-white">
-            Flowbite
-          </span>
-        </a>
-        <div class="flex items-center space-x-1 md:order-2 md:space-x-0 rtl:space-x-reverse">
-          <button
-            class="inline-flex cursor-pointer items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
-            type="button"
-            data-dropdown-toggle="language-dropdown-menu"
-          >
-            <svg
-              class="me-3 h-5 w-5 rounded-full"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-              viewBox="0 0 3900 3900"
+            args: [{ selector: 'sc-nav-item-dropdown', standalone: true, imports: [CommonModule], template: `
+    <li>
+      <button
+        class="flex w-full items-center justify-between rounded px-3 py-2 text-gray-900 hover:bg-gray-100 md:w-auto md:border-0 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:focus:text-white md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
+        id="dropdownNavbarLink"
+        data-dropdown-toggle="dropdownNavbar"
+      >
+        Dropdown
+        <svg
+          class="ms-2.5 size-2.5"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 10 6"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m1 1 4 4 4-4"
+          />
+        </svg>
+      </button>
+      <!-- Dropdown menu -->
+      <div
+        class="z-10 hidden w-44 divide-y divide-gray-100 rounded-lg bg-white font-normal shadow dark:divide-gray-600 dark:bg-gray-700"
+        id="dropdownNavbar"
+      >
+        <ul
+          class="py-2 text-sm text-gray-700 dark:text-gray-400"
+          aria-labelledby="dropdownLargeButton"
+        >
+          <li>
+            <a
+              class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+              href="javascript:void(0)"
             >
-              <path fill="#b22234" d="M0 0h7410v3900H0z" />
-              <path
-                d="M0 450h7410m0 600H0m0 600h7410m0 600H0m0 600h7410m0 600H0"
-                stroke="#fff"
-                stroke-width="300"
-              />
-              <path fill="#3c3b6e" d="M0 0h2964v2100H0z" />
-              <g fill="#fff">
-                <g id="d">
-                  <g id="c">
-                    <g id="e">
-                      <g id="b">
-                        <path
-                          id="a"
-                          d="M247 90l70.534 217.082-184.66-134.164h228.253L176.466 307.082z"
-                        />
-                        <use xlink:href="#a" y="420" />
-                        <use xlink:href="#a" y="840" />
-                        <use xlink:href="#a" y="1260" />
-                      </g>
-                      <use xlink:href="#a" y="1680" />
-                    </g>
-                    <use xlink:href="#b" x="247" y="210" />
-                  </g>
-                  <use xlink:href="#c" x="494" />
-                </g>
-                <use xlink:href="#d" x="988" />
-                <use xlink:href="#c" x="1976" />
-                <use xlink:href="#e" x="2470" />
-              </g>
-            </svg>
-            English (US)
-          </button>
-          <!-- Dropdown -->
-          <div
-            class="z-50 my-4 hidden list-none divide-y divide-gray-100 rounded-lg bg-white text-base shadow dark:bg-gray-700"
-            id="language-dropdown-menu"
-          >
-            <ul class="py-2 font-medium" role="none">
-              <li>
-                <a
-                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-                  href="javascript:void(0)"
-                  role="menuitem"
-                >
-                  <div class="inline-flex items-center">
-                    <svg
-                      class="me-2 h-3.5 w-3.5 rounded-full"
-                      id="flag-icon-css-us"
-                      aria-hidden="true"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 512 512"
-                    >
-                      <g fill-rule="evenodd">
-                        <g stroke-width="1pt">
-                          <path
-                            fill="#bd3d44"
-                            d="M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z"
-                            transform="scale(3.9385)"
-                          />
-                          <path
-                            fill="#fff"
-                            d="M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z"
-                            transform="scale(3.9385)"
-                          />
-                        </g>
-                        <path fill="#192f5d" d="M0 0h98.8v70H0z" transform="scale(3.9385)" />
-                        <path
-                          fill="#fff"
-                          d="M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z"
-                          transform="scale(3.9385)"
-                        />
-                      </g>
-                    </svg>
-                    English (US)
-                  </div>
-                </a>
-              </li>
-              <li>
-                <a
-                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-                  href="javascript:void(0)"
-                  role="menuitem"
-                >
-                  <div class="inline-flex items-center">
-                    <svg
-                      class="me-2 h-3.5 w-3.5 rounded-full"
-                      id="flag-icon-css-de"
-                      aria-hidden="true"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 512 512"
-                    >
-                      <path fill="#ffce00" d="M0 341.3h512V512H0z" />
-                      <path d="M0 0h512v170.7H0z" />
-                      <path fill="#d00" d="M0 170.7h512v170.6H0z" />
-                    </svg>
-                    Deutsch
-                  </div>
-                </a>
-              </li>
-              <li>
-                <a
-                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-                  href="javascript:void(0)"
-                  role="menuitem"
-                >
-                  <div class="inline-flex items-center">
-                    <svg
-                      class="me-2 h-3.5 w-3.5 rounded-full"
-                      id="flag-icon-css-it"
-                      aria-hidden="true"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 512 512"
-                    >
-                      <g fill-rule="evenodd" stroke-width="1pt">
-                        <path fill="#fff" d="M0 0h512v512H0z" />
-                        <path fill="#009246" d="M0 0h170.7v512H0z" />
-                        <path fill="#ce2b37" d="M341.3 0H512v512H341.3z" />
-                      </g>
-                    </svg>
-                    Italiano
-                  </div>
-                </a>
-              </li>
-              <li>
-                <a
-                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-                  href="javascript:void(0)"
-                  role="menuitem"
-                >
-                  <div class="inline-flex items-center">
-                    <svg
-                      class="me-2 h-3.5 w-3.5 rounded-full"
-                      id="flag-icon-css-cn"
-                      aria-hidden="true"
-                      xmlns="http://www.w3.org/2000/svg"
-                      xmlns:xlink="http://www.w3.org/1999/xlink"
-                      viewBox="0 0 512 512"
-                    >
-                      <defs><path id="a" fill="#ffde00" d="M1-.3L-.7.8 0-1 .6.8-1-.3z" /></defs>
-                      <path fill="#de2910" d="M0 0h512v512H0z" />
-                      <use
-                        width="30"
-                        height="20"
-                        transform="matrix(76.8 0 0 76.8 128 128)"
-                        xlink:href="#a"
-                      />
-                      <use
-                        width="30"
-                        height="20"
-                        transform="rotate(-121 142.6 -47) scale(25.5827)"
-                        xlink:href="#a"
-                      />
-                      <use
-                        width="30"
-                        height="20"
-                        transform="rotate(-98.1 198 -82) scale(25.6)"
-                        xlink:href="#a"
-                      />
-                      <use
-                        width="30"
-                        height="20"
-                        transform="rotate(-74 272.4 -114) scale(25.6137)"
-                        xlink:href="#a"
-                      />
-                      <use
-                        width="30"
-                        height="20"
-                        transform="matrix(16 -19.968 19.968 16 256 230.4)"
-                        xlink:href="#a"
-                      />
-                    </svg>
-                    中文 (繁體)
-                  </div>
-                </a>
-              </li>
-            </ul>
-          </div>
-          <button
-            class="inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 md:hidden dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
-            data-collapse-toggle="navbar-language"
-            type="button"
-            aria-controls="navbar-language"
-            aria-expanded="false"
-          >
-            <span class="sr-only">Open main menu</span>
-            <svg
-              class="h-5 w-5"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 17 14"
+              Dashboard
+            </a>
+          </li>
+          <li>
+            <a
+              class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+              href="javascript:void(0)"
             >
-              <path
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M1 1h15M1 7h15M1 13h15"
-              />
-            </svg>
-          </button>
-        </div>
-        <div
-          class="hidden w-full items-center justify-between md:order-1 md:flex md:w-auto"
-          id="navbar-language"
-        >
-          <ul
-            class="mt-4 flex flex-col rounded-lg border border-gray-100 bg-gray-50 p-4 font-medium md:mt-0 md:flex-row md:space-x-8 md:border-0 md:bg-white md:p-0 rtl:space-x-reverse dark:border-gray-700 dark:bg-gray-800 md:dark:bg-gray-900"
+              Settings
+            </a>
+          </li>
+          <li>
+            <a
+              class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+              href="javascript:void(0)"
+            >
+              Earnings
+            </a>
+          </li>
+        </ul>
+        <div class="py-1">
+          <a
+            class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
+            href="javascript:void(0)"
           >
-            <li>
-              <a
-                class="block rounded bg-blue-700 px-3 py-2 text-white md:bg-transparent md:p-0 md:text-blue-700 md:dark:text-blue-500"
-                href="javascript:void(0)"
-                aria-current="page"
-              >
-                Home
-              </a>
-            </li>
-            <li>
-              <a
-                class="block rounded px-3 py-2 text-gray-900 hover:bg-gray-100 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
-                href="javascript:void(0)"
-              >
-                About
-              </a>
-            </li>
-            <li>
-              <a
-                class="block rounded px-3 py-2 text-gray-900 hover:bg-gray-100 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
-                href="javascript:void(0)"
-              >
-                Services
-              </a>
-            </li>
-            <li>
-              <a
-                class="block rounded px-3 py-2 text-gray-900 hover:bg-gray-100 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
-                href="javascript:void(0)"
-              >
-                Pricing
-              </a>
-            </li>
-            <li>
-              <a
-                class="block rounded px-3 py-2 text-gray-900 hover:bg-gray-100 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
-                href="javascript:void(0)"
-              >
-                Contact
-              </a>
-            </li>
-          </ul>
+            Sign out
+          </a>
         </div>
       </div>
-    </nav>
+    </li>
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
 class TooltipComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: TooltipComponent, isStandalone: true, selector: "lib-tooltip", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: TooltipComponent, isStandalone: true, selector: "sc-tooltip", ngImport: i0, template: `
     <p>tooltip works!</p>
   `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-tooltip', standalone: true, imports: [CommonModule], template: `
+            args: [{ selector: 'sc-tooltip', standalone: true, imports: [CommonModule], template: `
     <p>tooltip works!</p>
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
+class SelectOptionComponent {
+    value;
+    disabled = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: SelectOptionComponent, isStandalone: true, selector: "sc-select-option", inputs: { value: "value", disabled: "disabled" }, host: { attributes: { "role": "listbox" }, properties: { "attr.aria-label": "value", "class.disabled": "this.disabled" } }, ngImport: i0, template: `
+    <ng-content></ng-content>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SelectOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-select-option', standalone: true, imports: [CommonModule], template: `
+    <ng-content></ng-content>
+  `, host: {
+                        role: 'listbox',
+                        '[attr.aria-label]': 'value',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }, {
+                type: Input
+            }] } });
+
+class SelectComponent {
+    cd;
+    domSanitizer;
+    overlay;
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    inputId = '';
+    label = '';
+    placeholder = '';
+    required = false;
+    disabled = false;
+    error = false;
+    multiple = false;
+    search = false;
+    ariaLabel = '';
+    ariaLabelledby = '';
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    change = new EventEmitter();
+    select;
+    contentTemplate;
+    options;
+    displayText;
+    displayX = false;
+    //private readonly selectedOption: SelectOptionComponent;
+    showing = false;
+    showPlaceholder = true;
+    overlayRef;
+    constructor(cd, domSanitizer, overlay) {
+        this.cd = cd;
+        this.domSanitizer = domSanitizer;
+        this.overlay = overlay;
+    }
+    onChangeFn = (_) => noop();
+    onTouchedFn = () => noop();
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    validate(control) {
+        return null;
+    }
+    ngOnInit() {
+        if (!this.displayText) {
+            this.displayText = this.domSanitizer.bypassSecurityTrustHtml(this.placeholder);
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    writeValue(obj) { }
+    onTouched() {
+        this.onTouchedFn();
+    }
+    mainSelectClasses() {
+        return {
+            mainSelect: true,
+            error: this.error,
+            disabled: this.disabled,
+            placeholder: this.showPlaceholder,
+        };
+    }
+    onDropMenuIconClick(event) {
+        if (!this.disabled) {
+            event.stopPropagation();
+            this.select.nativeElement.focus();
+            this.select.nativeElement.click();
+        }
+    }
+    onKeyDown(event) {
+        console.log('onKeyDown');
+    }
+    showDropdown() {
+        this.overlayRef = this.overlay.create(this.getOverlayConfig());
+        this.overlayRef.attach(this.contentTemplate);
+        this.syncWidth();
+        this.overlayRef.backdropClick().subscribe(() => this.hide());
+        this.showing = true;
+    }
+    hide() {
+        this.overlayRef.detach();
+        this.showing = false;
+    }
+    syncWidth() {
+        if (!this.overlayRef) {
+            return;
+        }
+        const refRectWidth = this.select.nativeElement.getBoundingClientRect().width;
+        this.overlayRef.updateSize({ width: refRectWidth });
+    }
+    getOverlayConfig() {
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.select.nativeElement)
+            .withPush(true)
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 4,
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -4,
+            },
+        ]);
+        const scrollStrategy = this.overlay.scrollStrategies.reposition();
+        return new OverlayConfig({
+            positionStrategy: positionStrategy,
+            scrollStrategy: scrollStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.DomSanitizer }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: SelectComponent, isStandalone: true, selector: "sc-select", inputs: { inputId: ["id", "inputId"], label: "label", placeholder: "placeholder", required: "required", disabled: "disabled", error: "error", multiple: "multiple", search: "search", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { change: "change" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                multi: true,
+                useExisting: SelectComponent,
+            },
+        ], queries: [{ propertyName: "options", predicate: SelectOptionComponent }], viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }, { propertyName: "contentTemplate", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: `
+    <div class="" [class.required]="required">
+      @if (label.length > 0) {
+        <p class="" [class.error]="error">{{ label }}</p>
+      }
+
+      <div
+        #select
+        [ngClass]="mainSelectClasses()"
+        [attr.id]="inputId"
+        [attr.aria-label]="ariaLabel || null"
+        [attr.aria-labelledby]="ariaLabelledby || null"
+        [attr.aria-multiselectable]="false"
+        [innerHTML]="displayText"
+        (click)="showDropdown()"
+        (keydown)="onKeyDown($event)"
+        (blur)="onTouched()"
+        role="listbox"
+        tabindex="{{ this.disabled ? -1 : 0 }}"
+      ></div>
+      <button class="" (click)="onDropMenuIconClick($event)">test</button>
+      <ng-template class="dropdown" #overlayTemplate="cdkPortal" cdk-portal>
+        <div class="">
+          <button class="" (keydown)="onKeyDown($event)">
+            <ng-content />
+          </button>
+        </div>
+      </ng-template>
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i4.TemplatePortalDirective, selector: "[cdk-portal], [portal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-select', standalone: true, imports: [CommonModule, PortalModule], template: `
+    <div class="" [class.required]="required">
+      @if (label.length > 0) {
+        <p class="" [class.error]="error">{{ label }}</p>
+      }
+
+      <div
+        #select
+        [ngClass]="mainSelectClasses()"
+        [attr.id]="inputId"
+        [attr.aria-label]="ariaLabel || null"
+        [attr.aria-labelledby]="ariaLabelledby || null"
+        [attr.aria-multiselectable]="false"
+        [innerHTML]="displayText"
+        (click)="showDropdown()"
+        (keydown)="onKeyDown($event)"
+        (blur)="onTouched()"
+        role="listbox"
+        tabindex="{{ this.disabled ? -1 : 0 }}"
+      ></div>
+      <button class="" (click)="onDropMenuIconClick($event)">test</button>
+      <ng-template class="dropdown" #overlayTemplate="cdkPortal" cdk-portal>
+        <div class="">
+          <button class="" (keydown)="onKeyDown($event)">
+            <ng-content />
+          </button>
+        </div>
+      </ng-template>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: SelectComponent,
+                        },
+                    ] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.DomSanitizer }, { type: i2.Overlay }], propDecorators: { inputId: [{
+                type: Input,
+                args: ['id']
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], ariaLabelledby: [{
+                type: Input,
+                args: ['aria-labelledby']
+            }], change: [{
+                type: Output
+            }], select: [{
+                type: ViewChild,
+                args: ['select']
+            }], contentTemplate: [{
+                type: ViewChild,
+                args: [CdkPortal]
+            }], options: [{
+                type: ContentChildren,
+                args: [SelectOptionComponent]
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DatePickerComponent, EditorComponent, NavbarComponent, TooltipComponent };
+export { DatePickerComponent, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, EditorComponent, InlineDatePickerComponent, NavComponent, NavItemComponent, NavItemDropdownComponent, SelectComponent, SelectOptionComponent, TooltipComponent };
 //# sourceMappingURL=semantic-components-ui.mjs.map