@simplysm/angular 14.0.47 → 14.0.49

package/README.md

@@ -0,0 +1,467 @@
+# @simplysm/angular
+
+Angular 21 기반 UI 컴포넌트 라이브러리. Zoneless, signal-based, standalone 컴포넌트로 구성된다.
+
+> **NOTE:** 이 문서는 `@simplysm/angular` 라이브러리의 사용법만 다룬다. Angular 프레임워크 자체의 사용법(컴포넌트 작성, DI, 라우팅, signal 등)은 `angular-cli` MCP를 활용한다.
+
+## Installation
+
+```bash
+npm install @simplysm/angular
+```
+
+## API Overview
+
+### Bootstrap
+
+| API | Type | Description |
+|-----|------|-------------|
+| `provideSdAngular` | function | 모든 기반 설정을 제공하는 환경 프로바이더 팩토리 |
+| `SdAngularConfigProvider` | class | `clientName` 설정을 보유하는 프로바이더 |
+
+-> See [docs/bootstrap.md](./docs/bootstrap.md) for details.
+
+### Providers
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdThemeProvider` | class | 다크모드/폰트 크기 프로바이더 (`dark`, `fontSize` signal) |
+| `SdThemeSelector` | component | 테마 설정 드롭다운 (다크모드 토글, 폰트 크기 조절) |
+| `SdSystemLogProvider` | class | 시스템 로그 기록 프로바이더 |
+| `SdAppStructureProvider` | class | 앱 구조(메뉴/권한) 관리 프로바이더 |
+| `injectPermsSignal` | function | 현재 뷰의 권한 목록을 signal로 반환 |
+| `SdAppStructureUtils` | class | 앱 구조 유틸리티 (메뉴/권한 조회 정적 메서드) |
+| `SdFileDialogProvider` | class | 네이티브 파일 선택 대화상자 프로바이더 |
+| `SdLocalStorageProvider` | class | `clientName` 스코프 localStorage 래퍼 |
+| `SdSystemConfigProvider` | class | 비동기 설정 저장/조회 프로바이더 |
+| `SdServiceClientFactoryProvider` | class | ServiceClient 인스턴스 팩토리/관리 |
+| `SdSharedDataProvider` | class | 이벤트 기반 공유 데이터 캐시 추상 프로바이더 |
+| `SdSharedDataChangeEvent` | const | 공유 데이터 변경 이벤트 정의 |
+| `SdNavigateWindowProvider` | class | 새 윈도우 네비게이션 + 자동 닫기 |
+| `SdActivatedModalProvider` | class | 모달 내부에서 inject하여 모달/컨텐츠 참조 |
+| `SdToastProvider` | class | 토스트 알림 (info/success/warning/danger) |
+| `SdBusyProvider` | class | 글로벌 busy 상태 관리 (spinner/bar/cube) |
+| `SdPrintProvider` | class | 인쇄 및 PDF 생성 프로바이더 |
+| `SdModalProvider` | class | 프로그래밍 방식 모달 생성 |
+
+-> See [docs/providers.md](./docs/providers.md) for details.
+
+### Provider Types
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdMenu` | interface | 메뉴 트리 노드 |
+| `SdFlatMenu` | interface | 플랫 메뉴 항목 |
+| `SdPermission` | interface | 권한 트리 노드 |
+| `SharedDataBase` | interface | 공유 데이터 기본 인터페이스 |
+| `SharedDataInfo` | interface | 공유 데이터 등록 정보 |
+| `SharedDataHandle` | interface | 공유 데이터 핸들 (items signal + get) |
+| `SdModalContentDef` | interface | 모달 컴포넌트 구현 인터페이스 |
+| `SdModalInfo` | interface | 모달 생성 시 전달하는 정보 |
+| `SdModalOptions` | interface | 모달 옵션 (크기, 위치, 동작) |
+| `SdToastContentDef` | interface | 토스트 컴포넌트 구현 인터페이스 |
+| `SdToastInput` | interface | 커스텀 토스트 생성 입력 |
+| `SdToastSeverity` | type | 토스트 심각도 (`"info" \| "success" \| "warning" \| "danger"`) |
+| `SdToastTheme` | type | 토스트 테마 (severity + `"primary" \| "secondary" \| "gray" \| "blue-gray"`) |
+| `SdBusyType` | type | busy 표시 유형 (`"spinner" \| "bar" \| "cube"`) |
+| `SdPrint` | interface | 인쇄 컴포넌트 구현 인터페이스 |
+| `SdPrintInput` | interface | 인쇄 생성 입력 |
+| `SelectModalOutputResult` | interface | 모달 선택 결과 (`selectedItemKeys`, `selectedItems`) |
+
+-> See [docs/provider-types.md](./docs/provider-types.md) for details.
+
+### Directives
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdEvents` | directive | `.capture`, `.passive`, `.once` 수식어 및 커스텀 이벤트 바인딩 |
+| `SdRipple` | directive | `[sdRipple]` 리플 효과 |
+| `SdShowEffect` | directive | `[sdShowEffect]` 뷰포트 진입 시 reveal 애니메이션 |
+| `SdInvalid` | directive | `[sdInvalid]` 유효성 검증 표시기 |
+| `SdTypedTemplate` | directive | `ng-template[typed]` 템플릿 컨텍스트 타입 가드 |
+| `SdItemOfTemplate` | directive | `ng-template[itemOf]` 항목 반복 템플릿 타입 가드 |
+| `SdItemOfTemplateContext` | interface | itemOf 템플릿 컨텍스트 (`$implicit`, `item`, `index`, `depth`) |
+| `SdRouterLink` | directive | `[sdRouterLink]` 라우터 네비게이션 (Ctrl+클릭 새 창) |
+| `SdCommandDirective` | directive | `[sdSaveCommand]`, `[sdRefreshCommand]`, `[sdInsertCommand]` 키보드 단축키 output 이벤트 디렉티브 |
+| `SdResizeDirective` | directive | `[sdResize]` ResizeObserver 기반 resize output 이벤트 디렉티브 |
+| `SdResizeEvent` | interface | resize 이벤트 데이터 (`heightChanged`, `widthChanged`, `target`, `contentRect`) |
+| `SdIntersectionDirective` | directive | `[sdIntersection]` IntersectionObserver 기반 intersection output 이벤트 디렉티브 |
+| `SdIntersectionEvent` | interface | intersection 이벤트 데이터 (`entry`) |
+
+-> See [docs/directives.md](./docs/directives.md) for details.
+
+### Plugins
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdOptionEventPlugin` | class | `.capture`, `.passive`, `.once` 이벤트 옵션 플러그인 (`provideSdAngular`에서 자동 등록) |
+| `SdGlobalErrorHandlerPlugin` | class | 글로벌 에러 핸들러 (PromiseRejection, ErrorEvent 등) |
+
+-> See [docs/plugins.md](./docs/plugins.md) for details.
+
+### Pipes
+
+| API | Type | Description |
+|-----|------|-------------|
+| `FormatPipe` | pipe | DateTime/DateOnly/string 포매팅 파이프 |
+
+-> See [docs/pipes.md](./docs/pipes.md) for details.
+
+### Utils & Setups
+
+| API | Type | Description |
+|-----|------|-------------|
+| `mark` | function | WritableSignal 변경 알림 트리거 (shallow copy) |
+| `setSafeStyle` | function | Renderer2로 여러 CSS 스타일 일괄 적용 |
+| `injectSdSystemConfigResource` | function | 시스템 설정 resource 래퍼 |
+| `injectCurrentPageCodeSignal` | function | 현재 페이지 코드 signal |
+| `injectFullPageCodeSignal` | function | 전체 페이지 코드 signal (NavigationEnd 기반) |
+| `injectViewTitleSignal` | function | 현재 뷰 타이틀 signal |
+| `injectViewTypeSignal` | function | 현재 뷰 타입 signal (`page \| modal \| control`) |
+| `useSelectionManager` | function | 선택 관리 composable (single/multi) |
+| `useSortingManager` | function | 정렬 관리 composable |
+| `useExpandingManager` | function | 트리 확장/축소 관리 composable |
+| `setupBgTheme` | function | body 배경 테마 색상 설정 |
+| `setupRipple` | function | 리플 효과 설정 |
+| `setupRevealOnShow` | function | 뷰포트 진입 시 reveal 애니메이션 설정 |
+| `setupInvalid` | function | 유효성 검증 표시기 설정 |
+| `setupModelHook` | function | model signal의 set을 가드 함수로 래핑 |
+| `setupCanDeactivate` | function | 모달/라우트 canDeactivate 설정 |
+
+-> See [docs/utils.md](./docs/utils.md) for details.
+
+### Type Utilities
+
+| API | Type | Description |
+|-----|------|-------------|
+| `DirectiveInputSignals` | type | InputSignal 프로퍼티에서 값 타입 추출 |
+| `UndefToOptional` | type | undefined 포함 프로퍼티를 optional로 변환 |
+| `WithOptional` | type | 특정 키를 optional로 변환 |
+| `SdViewType` | type | 뷰 타입 (`"page" \| "modal" \| "control"`) |
+| `SortingDef` | interface | 정렬 정의 (`key`, `desc`) |
+| `ExpandItemDef` | interface | 트리 확장 항목 정의 |
+| `SdSelectModal` | interface | 모달 선택 컴포넌트 인터페이스 |
+| `SdSelectModalInfo` | type | 모달 선택 정보 타입 |
+| `SdTextfieldTypes` | type | 텍스트필드 타입별 값 타입 매핑 |
+| `sdTextfieldTypes` | const | 텍스트필드 타입 문자열 배열 |
+| `SelectModeValue` | type | select mode별 value 타입 매핑 |
+
+-> See [docs/type-utilities.md](./docs/type-utilities.md) for details.
+
+### Features
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdAddressSearchModal` | component | Daum Postcode 주소 검색 모달 |
+| `Address` | interface | 주소 검색 결과 |
+| `SdPermissionTable` | component | 권한 매트릭스 테이블 (items, value) |
+| 데이터 시트 CRUD 화면 조립 | recipe | → [recipes/crud-list.md](./docs/recipes/crud-list.md) (`<sd-sheet>`+`<sd-form>`+필터+페이지네이션+편집 직접 조립) |
+| 상세폼 CRUD 화면 조립 | recipe | → [recipes/crud-detail.md](./docs/recipes/crud-detail.md) (`<sd-form>`+load/save/delete+snapshot 변경감지+setupCanDeactivate+Ctrl+S 직접 조립) |
+| 모달 선택 버튼 화면 조립 | recipe | → [recipes/data-select-button.md](./docs/recipes/data-select-button.md) (`<sd-modal-select-button>` 직접 / `<sd-shared-data-select-button>` / 사용자 정의 wrapper) |
+| `SdSharedDataSelect` | component | 공유 데이터 드롭다운 선택 |
+| `SdSharedDataSelectButton` | component | 공유 데이터 모달 선택 버튼 (→ [recipes/data-select-button.md](./docs/recipes/data-select-button.md)) |
+| `SdSharedDataSelectList` | component | 공유 데이터 목록형 선택 (selectedItem model) |
+| `matchesSearchText` | function | 공백 구분 AND 조건 텍스트 검색 매칭 |
+
+-> See [docs/features.md](./docs/features.md) for details.
+
+### UI - Layout
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdDockContainer` | component | 도킹 레이아웃 컨테이너 |
+| `SdDock` | component | 도킹 영역 (top/bottom/left/right) |
+| `SdGap` | component | 간격 (gap) 컴포넌트 |
+| `SdKanbanBoard` | component | 칸반 보드 (드래그앤드롭, selectedValues) |
+| `SdKanbanBoardDropInfo` | interface | 칸반 보드 드롭 이벤트 정보 |
+| `SdKanbanDragRef` | interface | 칸반 드래그 참조 인터페이스 |
+| `SdKanbanDropTarget` | interface | 칸반 드롭 타겟 인터페이스 |
+| `SdKanban` | component | 칸반 아이템 |
+| `SdKanbanLane` | component | 칸반 레인 |
+
+-> See [docs/ui-layout.md](./docs/ui-layout.md) for details.
+
+### UI - Form
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdButton` | component | 버튼 |
+| `SdAnchor` | component | 앵커 (인라인 버튼) |
+| `SdAdditionalButton` | component | 추가 동작 버튼 (드롭다운 포함) |
+| `SdModalSelectButton` | component | 모달 선택 버튼 |
+| `SdTextfield` | component | 텍스트 입력 (13가지 타입: number, text, password, color, email, format, date, month, year, datetime, datetime-sec, time, time-sec) |
+| `SdTextarea` | component | 멀티라인 텍스트 입력 |
+| `SdNumpad` | component | 숫자 패드 |
+| `SdRange` | component | 범위 슬라이더 |
+| `SdDateRangePicker` | component | 날짜 범위 선택기 |
+| `SdStatePreset` | component | 상태 프리셋 저장/불러오기 |
+| `SdStatePresetDef` | interface | 상태 프리셋 데이터 (name, state) |
+| `SdCheckbox` | component | 체크박스 |
+| `SdSwitch` | component | 스위치 토글 |
+| `SdCheckboxGroup` | component | 체크박스 그룹 |
+| `SdCheckboxGroupItem` | component | 체크박스 그룹 항목 |
+| `SdTiptapEditor` | component | TipTap 리치 텍스트 에디터 |
+| `SdSelect` | component | 드롭다운 선택 (single/multi) |
+| `SdSelectItem` | component | 드롭다운 선택 항목 |
+| `SdSelectButton` | component | 버튼 스타일 선택 |
+| `SdForm` | component | 폼 래퍼 (submit 이벤트, busy 관리) |
+
+-> See [docs/ui-form.md](./docs/ui-form.md) for details.
+
+### UI - Navigation
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdCollapse` | component | 접기/펼치기 패널 |
+| `SdCollapseIcon` | component | 접기/펼치기 아이콘 |
+| `SdTab` | component | 탭 컨테이너 |
+| `SdTabItem` | component | 탭 항목 |
+| `SdPagination` | component | 페이지네이션 |
+| `SdSidebarContainer` | component | 사이드바 컨테이너 |
+| `SdSidebar` | component | 사이드바 |
+| `SdSidebarMenu` | component | 사이드바 메뉴 |
+| `SdSidebarUser` | component | 사이드바 사용자 영역 |
+| `SdSidebarUserMenu` | interface | 사이드바 사용자 메뉴 항목 |
+| `SdTopbarContainer` | component | 탑바 컨테이너 |
+| `SdTopbar` | component | 탑바 |
+| `SdTopbarMenu` | component | 탑바 메뉴 |
+| `SdTopbarUser` | component | 탑바 사용자 영역 |
+| `SdTopbarUserMenu` | interface | 탑바 사용자 메뉴 항목 |
+| `getMenuRouterLinkOption` | function | 메뉴에서 라우터 링크 옵션 추출 |
+| `getIsMenuSelected` | function | 메뉴 선택 여부 확인 |
+
+-> See [docs/ui-navigation.md](./docs/ui-navigation.md) for details.
+
+### UI - Data
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdList` | component | 리스트 |
+| `SdListItem` | component | 리스트 항목 |
+| `SdSheet` | component | 스프레드시트 (정렬, 고정, 리사이즈). `key`로 설정 저장 |
+| `SdSheetColumn` | directive | 시트 컬럼 정의 (헤더, 너비, 고정, 정렬 등) |
+| `SdSheetColumnCellTemplate` | directive | 시트 컬럼 셀 내용 정의 (`ng-template[cell]`), `SdSheetCellContext` 타입 가드 제공 |
+| `SdSheetCellContext` | interface | 시트 셀 템플릿 컨텍스트 (`$implicit`, `item`, `index`, `depth`, `edit`) |
+| `SdSheetConfigModal` | component | 시트 설정 모달 |
+| `SdSheetColumnDef` | interface | 시트 컬럼 정의 데이터 |
+| `SdSheetConfig` | interface | 시트 설정 데이터 |
+| `SdSheetHeaderDef` | interface | 시트 헤더 정의 |
+| `SdSheetItemKeydownEventParam` | interface | 시트 항목 keydown 이벤트 파라미터 |
+| `SdSheetCellKeydownEventParam` | interface | 시트 셀 keydown 이벤트 파라미터 |
+
+-> See [docs/ui-data.md](./docs/ui-data.md) for details.
+
+### UI - Visual
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdLabel` | component | 라벨 (테마, 크기) |
+| `SdNote` | component | 노트/알림 메시지 |
+| `SdProgress` | component | 진행률 바 |
+| `SdCalendar` | component | 캘린더 |
+| `SdBarcode` | component | 바코드 생성 (bwip-js) |
+| `SdEcharts` | component | ECharts 차트 래퍼 |
+| `BarcodeType` | type | 바코드 타입 |
+
+-> See [docs/ui-visual.md](./docs/ui-visual.md) for details.
+
+### UI - Overlay
+
+| API | Type | Description |
+|-----|------|-------------|
+| `SdDropdown` | component | 드롭다운 트리거 |
+| `SdDropdownPopup` | component | 드롭다운 팝업 |
+| `SdModal` | component | 모달 래퍼 컴포넌트 |
+| `SdPromptModal` | component | 프롬프트 입력 모달 |
+| `SdConfirmModal` | component | 확인/취소 모달 |
+| `SdToast` | component | 토스트 개별 항목 |
+| `SdToastContainer` | component | 토스트 컨테이너 |
+| `SdBusyContainer` | component | busy 표시 컨테이너 |
+
+-> See [docs/ui-overlay.md](./docs/ui-overlay.md) for details.
+
+### Styling
+
+| API | Type | Description |
+|-----|------|-------------|
+| `.flex-row`, `.flex-column` 등 | CSS class | Flexbox 레이아웃 유틸리티 |
+| `.grid`, `.grid-{1..12}` | CSS class | Grid 레이아웃 유틸리티 |
+| `.card` | CSS class | 카드 스타일 |
+| `.form-box`, `.form-table` | CSS class | 폼 레이아웃 |
+| `.table` | CSS class | 테이블 스타일 |
+| `.p-*`, `.m-*`, `.gap-*` 등 | CSS class | 간격 유틸리티 |
+| `--theme-*-*` | CSS custom property | OKLCH 색상 팔레트 (17+5색 x 7단계) |
+| `.sd-theme-dark` | theme class | 다크 모드 테마 |
+
+-> See [docs/styling.md](./docs/styling.md) for details.
+
+## 컴포넌트 비동기 초기화 규칙
+
+컴포넌트에서 비동기 초기화가 필요한 경우 `async ngOnInit()`을 사용한다.
+
+```typescript
+export class SomePage implements OnInit {
+  busyCount = signal(0);
+
+  async ngOnInit() {
+    this.busyCount.update((v) => v + 1);
+    await this._sdToast.try(async () => {
+      // 비동기 초기화 로직
+    });
+    this.busyCount.update((v) => v - 1);
+  }
+}
+```
+
+- constructor 내 `void (async () => { ... })()` IIFE 패턴 **금지**
+- constructor 내 `void this._init()` 같은 수동 호출 패턴 **금지** — ngOnInit이 이미 같은 역할
+- `resource()` / `httpResource()`는 데이터 로딩 → signal 매핑 용도. 사이드이펙트(라우팅, toast 등) 포함 초기화에는 사용하지 않는다
+
+## 소비 프로젝트 네이밍 규칙
+
+`@simplysm/angular`를 소비하는 앱 프로젝트에서의 파일명·클래스명 규칙이다.
+파일명은 **kebab-case + dot-suffix**, 클래스명은 **PascalCase**를 따른다.
+
+| 접미어 | 조건 | 파일명 예시 | 클래스명 예시 |
+|--------|------|-------------|---------------|
+| `.sheet.ts` / `*Sheet` | `<sd-sheet>` 기반 CRUD 리스트 화면 ([recipes/crud-list.md](./docs/recipes/crud-list.md)) | `outbound-instruction.sheet.ts` | `OutboundInstructionSheet` |
+| `.detail.ts` / `*Detail` | `<sd-form>` 기반 상세 폼 화면 ([recipes/crud-detail.md](./docs/recipes/crud-detail.md)) | `outbound-instruction.detail.ts` | `OutboundInstructionDetail` |
+| `.view.ts` / `*View` | sheet/detail 아닌 병합 컴포넌트 + route 연결 | `dashboard.view.ts` | `DashboardView` |
+| `.modal.ts` / `*Modal` | 모달 전용 컴포넌트 | `item-select.modal.ts` | `ItemSelectModal` |
+| `.provider.ts` / `*Provider` | `@Injectable` 클래스 (**`*Service` 금지**) | `app-service.provider.ts` | `AppServiceProvider` |
+| 접미어 없음 | route 미연결 일반 컨트롤 컴포넌트 | `instruction-item.ts` | `InstructionItem` |
+
+- `pipe`, `directive` 등 기타 Angular 구성요소는 `@simplysm/angular` 패키지 자체의 네이밍 패턴(`.pipe.ts`, `.directive.ts`)을 따른다
+
+## 소비 프로젝트 디렉토리 구조
+
+```
+src/
+├── app/                                  # 라우팅 페이지 (사이드바 메뉴 트리 구조와 대응)
+│   ├── login/
+│   └── home/
+│       ├── {메뉴-그룹}/                  # 사이드바 메뉴 그룹
+│       │   └── {도메인}/                 # 개별 도메인 (트리 깊이 제한 없음)
+│       │       ├── {도메인}.view.ts      # route 연결 병합 컴포넌트
+│       │       ├── {도메인}.sheet.ts     # <sd-sheet> 기반 CRUD 리스트 (recipes/crud-list.md)
+│       │       ├── {도메인}.detail.ts    # <sd-form> 기반 상세 폼 (recipes/crud-detail.md)
+│       │       ├── {이름}.modal.ts       # 도메인 전용 모달
+│       │       └── {이름}.ts            # 일반 컨트롤 (route 미연결)
+│       └── main/
+├── controls/                             # 앱 공유 컨트롤 컴포넌트
+├── directives/                           # 앱 공유 디렉티브
+├── modals/                               # 앱 전역 공통 모달
+├── providers/                            # 앱 전역 프로바이더
+├── types/                                # 타입 정의
+└── utils/                                # 유틸리티
+```
+
+- `app/` 하위 트리는 사이드바 메뉴 구조와 거의 대응된다
+- **배치 기준은 "어느 도메인에 소속되는가"**이다. provider, modal, directive, print-template, util 등 모든 종류의 파일이 소속 도메인 폴더 안에 배치된다 (다른 도메인에서 import하여 사용하는 것은 자유)
+- 특정 도메인에 소속되지 않는 공통 파일만 `src/` 직하의 `controls/`, `modals/`, `providers/` 등에 배치한다
+
+## inject 네이밍 컨벤션
+
+`Sd*Provider`를 `inject()`할 때 변수명은 다음 규칙을 따른다:
+
+- **Sd 접두어 유지**: 클래스명에서 `Sd`를 camelCase로 변환하여 유지한다
+- **Provider 접미어 제거**: 변수명에서 `Provider`를 제거한다
+
+| inject 대상 | 클래스 필드 | 로컬 변수 |
+|-------------|-----------|----------|
+| `SdToastProvider` | `private _sdToast = inject(SdToastProvider)` | `const sdToast = inject(SdToastProvider)` |
+| `SdModalProvider` | `private _sdModal = inject(SdModalProvider)` | `const sdModal = inject(SdModalProvider)` |
+| `SdServiceClientFactoryProvider` | `private _sdServiceClientFactory = inject(SdServiceClientFactoryProvider)` | `const sdServiceClientFactory = inject(...)` |
+
+## Usage Examples
+
+### 앱 부트스트랩
+
+```typescript
+import { provideSdAngular } from "@simplysm/angular";
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideSdAngular({ clientName: "my-app" }),
+    provideRouter(routes),
+  ],
+});
+```
+
+### 모달 표시
+
+```typescript
+import { SdModalProvider, type SdModalInfo } from "@simplysm/angular";
+
+const sdModal = inject(SdModalProvider);
+
+const result = await sdModal.showAsync(
+  { title: "사용자 선택", type: UserSelectModal, inputs: { filter: "active" } },
+  { useCloseByBackdrop: true },
+);
+```
+
+### 서비스 + 이벤트 프록시 (AppServiceProvider 패턴)
+
+소비 프로젝트에서 서비스와 이벤트를 한 곳에서 관리하는 패턴:
+
+```typescript
+import { inject, Injectable } from "@angular/core";
+import { SdServiceClientFactoryProvider } from "@simplysm/angular";
+import { createOrmClientConnector, type OrmClientConnector, type ServiceProxy } from "@simplysm/service-client";
+import type { SystemLogServiceType } from "@my-server-package";
+import type { OrderUpdatedEvent } from "@my-server-package"; // import type만 가능
+
+@Injectable({ providedIn: "root" })
+export class AppServiceProvider {
+  private readonly _sdServiceClientFactory = inject(SdServiceClientFactoryProvider);
+
+  get client() {
+    return this._sdServiceClientFactory.get("MAIN");
+  }
+
+  // 서비스 프록시 — getService() 패턴
+  get systemLog() {
+    return this.client.getService<SystemLogServiceType>("SystemLog");
+  }
+
+  // 이벤트 프록시 — getEvent() 패턴 (getService()와 동일)
+  get orderUpdated() {
+    return this.client.getEvent<typeof OrderUpdatedEvent>("OrderUpdated");
+  }
+}
+```
+
+사용처에서:
+
+```typescript
+const appSvc = inject(AppServiceProvider);
+
+// 서비스 호출
+await appSvc.systemLog.writeLog("hello");
+
+// 이벤트 구독 — 이벤트 이름과 제네릭 타입을 반복 지정할 필요 없음
+const key = await appSvc.orderUpdated.addListener({ orderId: 123 }, async (data) => {
+  // data.status는 string으로 타입 추론
+});
+
+// 이벤트 발행
+await appSvc.orderUpdated.emit((info) => info.orderId === 123, { status: "shipped" });
+
+// 구독 해제
+await appSvc.orderUpdated.removeListener(key);
+```
+
+### 토스트 알림
+
+```typescript
+import { SdToastProvider } from "@simplysm/angular";
+
+const sdToast = inject(SdToastProvider);
+
+sdToast.success("저장되었습니다.");
+const result = await sdToast.try(async () => {
+  return await someAsyncWork();
+});
+```
+

package/dist/controls/dropdown/sd-dropdown-popup.d.ts

@@ -2,6 +2,7 @@ import * as i0 from "@angular/core";
 export declare class SdDropdownPopup {
     private readonly _parentControl;
     private readonly _elRef;
+    private _capped;
     onKeydown(event: KeyboardEvent): void;
     onResize(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdDropdownPopup, never>;

package/dist/controls/dropdown/sd-dropdown-popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-dropdown-popup.d.ts","sourceRoot":"","sources":["../../../src/controls/dropdown/sd-dropdown-popup.ts"],"names":[],"mappings":";AAWA,qBA6Ea,eAAe;IAC1B,OAAO,CAAC,QAAQ,CAAC,cAAc,CAE7B;IACF,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAE1D,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAIrC,QAAQ,IAAI,IAAI;yCAVL,eAAe;2CAAf,eAAe;CAmB3B"}
+{"version":3,"file":"sd-dropdown-popup.d.ts","sourceRoot":"","sources":["../../../src/controls/dropdown/sd-dropdown-popup.ts"],"names":[],"mappings":";AAWA,qBA6Ea,eAAe;IAC1B,OAAO,CAAC,QAAQ,CAAC,cAAc,CAE7B;IACF,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,OAAO,CAAS;IAExB,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAIrC,QAAQ,IAAI,IAAI;yCAXL,eAAe;2CAAf,eAAe;CAuB3B"}

package/dist/controls/dropdown/sd-dropdown-popup.js

@@ -6,13 +6,18 @@ const _c0 = ["*"];
 export class SdDropdownPopup {
     _parentControl = inject(forwardRef(() => SdDropdown));
     _elRef = inject((ElementRef));
+    _capped = false;
     onKeydown(event) {
         this._parentControl.onPopupKeydown(event);
     }
     onResize() {
         const el = this._elRef.nativeElement;
         const divEl = el.firstElementChild;
-        if (divEl.clientHeight > 300) {
+        const shouldCap = divEl.scrollHeight > 300;
+        if (shouldCap === this._capped)
+            return;
+        this._capped = shouldCap;
+        if (shouldCap) {
             el.style.height = "300px";
         }
         else {

package/dist/controls/dropdown/sd-dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-dropdown.d.ts","sourceRoot":"","sources":["../../../src/controls/dropdown/sd-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,UAAU,EAMX,MAAM,eAAe,CAAC;AAEvB,OAAO,wBAAwB,CAAC;;AAEhC,qBAgBa,UAAU;IACrB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAE1D,IAAI,+CAAgB;IACpB,QAAQ,qEAAiD;IAEzD,UAAU,0DAGR;IAEF,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,YAAY,CAAC,CAAc;IACnC,OAAO,CAAC,WAAW,CAAC,CAAc;IAClC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAiB;;IAiEtC,WAAW,IAAI,IAAI;IAQnB,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA8CzC,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAY1C,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB;IA8B5B,OAAO,CAAC,wBAAwB;IAShC,OAAO,CAAC,sBAAsB;IAqC9B,OAAO,CAAC,YAAY;yCA3OT,UAAU;2CAAV,UAAU;CAwQtB"}
+{"version":3,"file":"sd-dropdown.d.ts","sourceRoot":"","sources":["../../../src/controls/dropdown/sd-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,UAAU,EAMX,MAAM,eAAe,CAAC;AAEvB,OAAO,wBAAwB,CAAC;;AAEhC,qBAgBa,UAAU;IACrB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAE1D,IAAI,+CAAgB;IACpB,QAAQ,qEAAiD;IAEzD,UAAU,0DAEP;IAEH,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,YAAY,CAAC,CAAc;IACnC,OAAO,CAAC,WAAW,CAAC,CAAc;IAClC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAiB;;IAiEtC,WAAW,IAAI,IAAI;IAQnB,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA8CzC,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAY1C,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB;IA8B5B,OAAO,CAAC,wBAAwB;IAShC,OAAO,CAAC,sBAAsB;IAqC9B,OAAO,CAAC,YAAY;yCA1OT,UAAU;2CAAV,UAAU;CAuQtB"}

package/dist/controls/dropdown/sd-dropdown.js

@@ -8,7 +8,9 @@ export class SdDropdown {
     _elRef = inject((ElementRef));
     open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    popupElRef = contentChild.required(SdDropdownPopup, { read: ElementRef });
+    popupElRef = contentChild.required(SdDropdownPopup, {
+        read: ElementRef,
+    });
     _popupEl;
     _mouseoverEl;
     _backdropEl;
@@ -268,5 +270,7 @@ export class SdDropdown {
     <ng-content select="sd-dropdown-popup" />
   `,
             }]
-    }], () => [], { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], popupElRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdDropdownPopup), { ...{ read: ElementRef }, isSignal: true }] }] }); })();
+    }], () => [], { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], popupElRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdDropdownPopup), { ...{
+                        read: ElementRef,
+                    }, isSignal: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdDropdown, { className: "SdDropdown", filePath: "packages/angular/src/controls/dropdown/sd-dropdown.ts", lineNumber: 34 }); })();

package/dist/controls/select/sd-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-select.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAaL,WAAW,EAIZ,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI1D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;;AAUhD,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;IAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,qBAuNa,QAAQ,CAAC,CAAC,SAAS,QAAQ,GAAG,OAAO,EAAE,CAAC;IACnD,UAAU,yCAAwB;IAClC,KAAK,2EAAoC;IACzC,WAAW,0DAAmB;IAC9B,QAAQ,qEAAiD;IACzD,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,QAAQ,qEAAiD;IAEzD,aAAa,qEAAiD;IAC9D,8BAA8B,8DAAuB;IAErD,KAAK,uDAAgB;IACrB,SAAS,6CAAgB,CAAC,SAAS,MAAM,KAAK,OAAO,EAAkB;IACvE,aAAa,8CAAgB,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,eAAI;IAEtD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,YAAY,+CAAgB;IAE5B,SAAS,CAAC,QAAQ,CAAC,eAAe,iUAAmB;IAErD,aAAa,+DAAiC;IAC9C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAkC;IACnE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG7B;IAEF,UAAU,gEAAgD;IAC1D,UAAU,gEAAgD;IAC1D,UAAU,+DAAyD;IAEnE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAwB;IAEnD,wBAAwB,+DAA2C;IAEnE,UAAU;cAIY,CAAC;eAAS,MAAM;eAAS,MAAM;SAelD;;IAgIH,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,SAAS,GAAG,IAAI;IAO1C,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,SAAS,GAAG,IAAI;IAI1C,OAAO,CAAC,YAAY;IAepB,WAAW,IAAI,IAAI;IAQnB,aAAa,IAAI,IAAI;IAIrB,aAAa,IAAI,IAAI;IAIrB,YAAY,IAAI,IAAI;yCApOT,QAAQ;2CAAR,QAAQ;CAwOpB"}
+{"version":3,"file":"sd-select.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAaL,WAAW,EAIZ,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI1D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;;AAUhD,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;IAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,qBA4Na,QAAQ,CAAC,CAAC,SAAS,QAAQ,GAAG,OAAO,EAAE,CAAC;IACnD,UAAU,yCAAwB;IAClC,KAAK,2EAAoC;IACzC,WAAW,0DAAmB;IAC9B,QAAQ,qEAAiD;IACzD,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,QAAQ,qEAAiD;IAEzD,aAAa,qEAAiD;IAC9D,8BAA8B,8DAAuB;IAErD,KAAK,uDAAgB;IACrB,SAAS,6CAAgB,CAAC,SAAS,MAAM,KAAK,OAAO,EAAkB;IACvE,aAAa,8CAAgB,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,eAAI;IAEtD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,YAAY,+CAAgB;IAE5B,SAAS,CAAC,QAAQ,CAAC,eAAe,iUAAmB;IAErD,aAAa,+DAAiC;IAC9C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAkC;IACnE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG7B;IAEF,UAAU,gEAAgD;IAC1D,UAAU,gEAAgD;IAC1D,UAAU,+DAAyD;IAEnE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAwB;IAEnD,wBAAwB,+DAA2C;IAEnE,UAAU;cAIY,CAAC;eAAS,MAAM;eAAS,MAAM;SAelD;;IAmGH,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,SAAS,GAAG,IAAI;IAO1C,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,SAAS,GAAG,IAAI;IAI1C,OAAO,CAAC,YAAY;IAepB,WAAW,IAAI,IAAI;IAQnB,aAAa,IAAI,IAAI;IAIrB,aAAa,IAAI,IAAI;IAIrB,YAAY,IAAI,IAAI;yCAvMT,QAAQ;2CAAR,QAAQ;CA2MpB"}

package/dist/controls/select/sd-select.js

@@ -156,30 +156,9 @@ export class SdSelect {
                 return "선택된 항목이 없습니다.";
             return "";
         });
-        // D3: contentClass/contentStyle via effect() on popup element
-        // + D4: keyboard navigation via tabbable()
         effect((onCleanup) => {
             if (this.dropdownOpen()) {
                 const popupEl = this._dropdownControl().popupElRef().nativeElement;
-                const cls = this.contentClass();
-                const addedClasses = [];
-                if (cls != null) {
-                    for (const c of cls.split(" ").filter(Boolean)) {
-                        popupEl.classList.add(c);
-                        addedClasses.push(c);
-                    }
-                }
-                const style = this.contentStyle();
-                const addedStyleProps = [];
-                if (style != null) {
-                    const tempEl = document.createElement("div");
-                    tempEl.style.cssText = style;
-                    for (let i = 0; i < tempEl.style.length; i++) {
-                        const prop = tempEl.style[i];
-                        addedStyleProps.push(prop);
-                        popupEl.style.setProperty(prop, tempEl.style.getPropertyValue(prop));
-                    }
-                }
                 const onKeydown = (event) => {
                     if (event.ctrlKey || event.altKey)
                         return;
@@ -197,9 +176,7 @@ export class SdSelect {
                             }
                         }
                         else {
-                            // ArrowUp
                             if (currIndex <= 0) {
-                                // Return focus to dropdown trigger
                                 this._dropdownElRef().nativeElement.focus();
                             }
                             else {
@@ -211,12 +188,6 @@ export class SdSelect {
                 popupEl.addEventListener("keydown", onKeydown);
                 onCleanup(() => {
                     popupEl.removeEventListener("keydown", onKeydown);
-                    for (const c of addedClasses) {
-                        popupEl.classList.remove(c);
-                    }
-                    for (const prop of addedStyleProps) {
-                        popupEl.style.removeProperty(prop);
-                    }
                 });
             }
         });
@@ -319,7 +290,7 @@ export class SdSelect {
             i0.ɵɵqueryAdvance(2);
         } }, hostVars: 4, hostBindings: function SdSelect_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-size", ctx.size())("data-sd-inline", ctx.inline())("data-sd-inset", ctx.inset())("data-sd-disabled", ctx.disabled());
-        } }, inputs: { selectMode: [1, "selectMode"], value: [1, "value"], placeholder: [1, "placeholder"], disabled: [1, "disabled"], inline: [1, "inline"], inset: [1, "inset"], size: [1, "size"], required: [1, "required"], hideSelectAll: [1, "hideSelectAll"], multiSelectionDisplayDirection: [1, "multiSelectionDisplayDirection"], items: [1, "items"], trackByFn: [1, "trackByFn"], getChildrenFn: [1, "getChildrenFn"], contentClass: [1, "contentClass"], contentStyle: [1, "contentStyle"], dropdownOpen: [1, "dropdownOpen"] }, outputs: { value: "valueChange", dropdownOpen: "dropdownOpenChange" }, ngContentSelectors: _c3, decls: 15, vars: 10, consts: [["contentEl", ""], [3, "openChange", "disabled", "open"], [1, "_sd-select-control", 3, "sdRipple"], [1, "_sd-select-control-content"], [3, "innerHTML"], [1, "sd-text-color-gray-default"], [1, "_sd-select-control-icon"], [3, "ngTemplateOutlet"], [1, "_sd-select-all-bar"], [3, "svg"], ["data-sd-select-all", "", 3, "click"], [3, "width"], ["data-sd-deselect-all", "", 3, "click"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function SdSelect_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { selectMode: [1, "selectMode"], value: [1, "value"], placeholder: [1, "placeholder"], disabled: [1, "disabled"], inline: [1, "inline"], inset: [1, "inset"], size: [1, "size"], required: [1, "required"], hideSelectAll: [1, "hideSelectAll"], multiSelectionDisplayDirection: [1, "multiSelectionDisplayDirection"], items: [1, "items"], trackByFn: [1, "trackByFn"], getChildrenFn: [1, "getChildrenFn"], contentClass: [1, "contentClass"], contentStyle: [1, "contentStyle"], dropdownOpen: [1, "dropdownOpen"] }, outputs: { value: "valueChange", dropdownOpen: "dropdownOpenChange" }, ngContentSelectors: _c3, decls: 15, vars: 14, consts: [["contentEl", ""], [3, "openChange", "disabled", "open"], [1, "_sd-select-control", 3, "sdRipple"], [1, "_sd-select-control-content"], [3, "innerHTML"], [1, "sd-text-color-gray-default"], [1, "_sd-select-control-icon"], [3, "ngTemplateOutlet"], [1, "_sd-select-all-bar"], [3, "svg"], ["data-sd-select-all", "", 3, "click"], [3, "width"], ["data-sd-deselect-all", "", 3, "click"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function SdSelect_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵprojectionDef(_c2);
             i0.ɵɵelementStart(0, "sd-dropdown", 1);
@@ -337,10 +308,12 @@ export class SdSelect {
             i0.ɵɵconditionalCreate(13, SdSelect_Conditional_13_Template, 2, 0)(14, SdSelect_Conditional_14_Template, 1, 0);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            let tmp_10_0;
+            let tmp_12_0;
             i0.ɵɵproperty("disabled", ctx.disabled());
             i0.ɵɵtwoWayProperty("open", ctx.dropdownOpen);
             i0.ɵɵadvance();
+            i0.ɵɵstyleMap(ctx.contentStyle());
+            i0.ɵɵclassMap(ctx.contentClass());
             i0.ɵɵproperty("sdRipple", !ctx.disabled());
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx._selectedItemContentHTML() != null ? 4 : ctx.placeholder() ? 5 : 6);
@@ -355,7 +328,7 @@ export class SdSelect {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx._beforeTpl() ? 12 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_10_0 = ctx._itemOfTpl()) ? 13 : 14, tmp_10_0);
+            i0.ɵɵconditional((tmp_12_0 = ctx._itemOfTpl()) ? 13 : 14, tmp_12_0);
         } }, dependencies: [SdDropdown,
             SdDropdownPopup,
             SdAnchor,
@@ -376,7 +349,12 @@ export class SdSelect {
                     NgIcon,
                 ], template: `
     <sd-dropdown [disabled]="disabled()" [(open)]="dropdownOpen">
-      <div class="_sd-select-control" [sdRipple]="!disabled()">
+      <div
+        class="_sd-select-control"
+        [class]="contentClass()"
+        [style]="contentStyle()"
+        [sdRipple]="!disabled()"
+      >
         <div class="_sd-select-control-content" #contentEl>
           @if (_selectedItemContentHTML() != null) {
             <div [innerHTML]="_selectedItemContentHTML()"></div>
@@ -428,4 +406,4 @@ export class SdSelect {
                     "[attr.data-sd-disabled]": "disabled()",
                 }, styles: ["sd-select {\n  display: block;\n  position: relative;\n  width: 100%;\n  min-width: 10em;\n}\nsd-select > sd-dropdown {\n  display: flex;\n  overflow: hidden;\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-select > sd-dropdown:focus, sd-select > sd-dropdown:focus-within {\n  border-color: var(--theme-primary-default);\n}\nsd-select > sd-dropdown > ._sd-select-control {\n  display: flex;\n  position: relative;\n  gap: var(--gap-default);\n  flex-grow: 1;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-content {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  opacity: 0.3;\n}\nsd-select > sd-dropdown > ._sd-select-control:hover > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:focus > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:active > ._sd-select-control-icon {\n  opacity: 1;\n}\nsd-select > sd-dropdown > sd-select-button {\n  padding: var(--gap-sm);\n  border-left: 1px solid var(--theme-gray-lightest);\n}\nsd-select > sd-dropdown > sd-select-button:last-of-type {\n  border-top-right-radius: var(--border-radius-default);\n  border-bottom-right-radius: var(--border-radius-default);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown {\n  background: var(--theme-gray-lightest);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n  color: var(--text-trans-light);\n  cursor: default;\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  display: none;\n}\nsd-select[data-sd-inline=true] {\n  display: inline-block;\n  width: auto;\n  vertical-align: top;\n}\nsd-select[data-sd-size=sm] > sd-dropdown > ._sd-select-control {\n  padding: var(--gap-xs) var(--gap-sm);\n  gap: var(--gap-sm);\n}\nsd-select[data-sd-size=sm] > sd-dropdown > sd-select-button {\n  padding: var(--gap-xs);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > ._sd-select-control {\n  padding: var(--gap-default) var(--gap-lg);\n  gap: var(--gap-lg);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > sd-select-button {\n  padding: var(--gap-default);\n}\nsd-select[data-sd-inset=true] {\n  min-width: auto;\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown {\n  border: none;\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown > sd-select-button {\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus, sd-select[data-sd-inset=true] > sd-dropdown:focus-within {\n  outline: 1px solid var(--theme-primary-default);\n  outline-offset: -1px;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus > sd-select-button, sd-select[data-sd-inset=true] > sd-dropdown:focus-within > sd-select-button {\n  outline: 1px solid var(--theme-primary-default);\n  outline-offset: -1px;\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown {\n  background: var(--control-color);\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n  color: var(--text-trans-default);\n}\n\n._sd-select-all-bar {\n  display: flex;\n  padding: var(--gap-sm) var(--gap-default);\n  border-bottom: 1px solid var(--border-color-light);\n}"] }]
     }], () => [], { selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hideSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSelectAll", required: false }] }], multiSelectionDisplayDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectionDisplayDirection", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], getChildrenFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getChildrenFn", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], dropdownOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownOpen", required: false }] }, { type: i0.Output, args: ["dropdownOpenChange"] }], _itemControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdSelectItem), { isSignal: true }] }], _dropdownControl: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdDropdown), { isSignal: true }] }], _dropdownElRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdDropdown), { ...{ read: ElementRef }, isSignal: true }] }], _headerTpl: [{ type: i0.ContentChild, args: ["headerTpl", { isSignal: true }] }], _beforeTpl: [{ type: i0.ContentChild, args: ["beforeTpl", { isSignal: true }] }], _itemOfTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdItemOfTemplate), { ...{ read: TemplateRef }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelect, { className: "SdSelect", filePath: "packages/angular/src/controls/select/sd-select.ts", lineNumber: 254 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelect, { className: "SdSelect", filePath: "packages/angular/src/controls/select/sd-select.ts", lineNumber: 259 }); })();