├── .editorconfig ├── .github └── workflows │ ├── npm-publish.yml │ └── pr.yml ├── .gitignore ├── .oxlintrc.json ├── .prettierrc ├── .vscode ├── extensions.json ├── launch.json ├── settings.json └── tasks.json ├── README.md ├── angular.json ├── jest.config.js ├── package.json ├── pnpm-lock.yaml ├── projects ├── adk │ ├── README.md │ ├── a11y │ │ ├── accessibility-group.spec.ts │ │ ├── accessibility-group.ts │ │ ├── accessibility-item.ts │ │ ├── accessibility.service.spec.ts │ │ ├── accessibility.service.ts │ │ ├── accessiblity-group.md │ │ ├── autofocus.ts │ │ ├── focus-trap.spec.ts │ │ ├── focus-trap.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── accordion │ │ ├── accordion-adk.ts │ │ ├── accordion-content.ts │ │ ├── accordion-group.spec.ts │ │ ├── accordion-group.ts │ │ ├── accordion-header.ts │ │ ├── accordion-item.spec.ts │ │ ├── accordion-item.ts │ │ ├── accordion-reference.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── autocomplete │ │ ├── autocomplete-input.ts │ │ ├── autocomplete.spec.ts │ │ ├── autocomplete.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── avatar │ │ ├── avatar.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── bidi │ │ ├── direction.service.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── breadcrumb │ │ ├── breadcrumb-link.ts │ │ ├── breadcrumb-separator.ts │ │ ├── breadcrumb.ts │ │ ├── breadcrumbs.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── cache │ │ ├── cache-config.ts │ │ ├── cache.interecptor.ts │ │ ├── cache.spec.ts │ │ ├── cache.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── carousel │ │ ├── carousel-adk.ts │ │ ├── carousel-item.ts │ │ ├── carousel-next.ts │ │ ├── carousel-reference.ts │ │ ├── carousel.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── checkbox │ │ ├── checkbox.spec.ts │ │ ├── checkbox.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── chip │ │ ├── chip-group.ts │ │ ├── chip.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── clipboard │ │ ├── clipboard.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── collections │ │ ├── SelectionModel.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── color-picker │ │ ├── color-input.ts │ │ ├── color-picker-trigger.ts │ │ ├── color-picker.spec.ts │ │ ├── color-picker.ts │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── utils.spec.ts │ │ └── utils.ts │ ├── cookies │ │ ├── cookie.service.spec.ts │ │ ├── cookie.service.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── datepicker │ │ ├── calendar.ts │ │ ├── date-adapter-interface.ts │ │ ├── date-adapter.spec.ts │ │ ├── date-adapter.ts │ │ ├── datepicker-trigger.ts │ │ ├── datepicker.spec.ts │ │ ├── datepicker.ts │ │ ├── native-date-adapter.ts │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── time.spec.ts │ │ └── time.ts │ ├── dialog │ │ ├── dialog.animation.ts │ │ ├── dialog.service.ts │ │ ├── dialog.spec.ts │ │ ├── dialog.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── drag │ │ ├── drag-drop-group.ts │ │ ├── drag-drop.spec.ts │ │ ├── drag-drop.ts │ │ ├── drag-move.ts │ │ ├── drag.spec.ts │ │ ├── drag.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── form-field │ │ ├── auto-height.ts │ │ ├── error.ts │ │ ├── form-field.ts │ │ ├── input.ts │ │ ├── label.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── hover-card │ │ ├── hover-card.spec.ts │ │ ├── hover-card.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── icon │ │ ├── icon.service.spec.ts │ │ ├── icon.service.ts │ │ ├── icon.spec.ts │ │ ├── icon.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── inline-edit │ │ ├── inline-edit.spec.ts │ │ ├── inline-edit.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── jwt │ │ ├── jwt.service.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── keys │ │ ├── keys.service.ts │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── shortcuts.service.spec.ts │ │ └── shortcuts.service.ts │ ├── layout │ │ ├── layout.spec.ts │ │ ├── layout.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── list │ │ ├── list.directive.ts │ │ ├── list.spec.ts │ │ ├── list.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── mask │ │ ├── mask-pipe.ts │ │ ├── mask.ts │ │ ├── masking.spec.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── menu │ │ ├── context-menu.ts │ │ ├── mention.ts │ │ ├── menu-trigger.ts │ │ ├── menu.spec.ts │ │ ├── menu.ts │ │ ├── navigation-menu.spec.ts │ │ ├── navigation-menu.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── network │ │ ├── network.interceptor.ts │ │ ├── network.service.ts │ │ ├── ng-package.json │ │ └── public-api.ts │ ├── ng-package.json │ ├── otp │ │ ├── ng-package.json │ │ ├── otp.spec.ts │ │ ├── otp.ts │ │ └── public-api.ts │ ├── package.json │ ├── pagination │ │ ├── ng-package.json │ │ ├── pagination.spec.ts │ │ ├── pagination.ts │ │ └── public-api.ts │ ├── popover │ │ ├── base-popover.service.ts │ │ ├── ng-package.json │ │ ├── popover-arrow.ng.ts │ │ ├── popover-arrow.spec.ts │ │ ├── popover-trigger.ts │ │ ├── popover.service.spec.ts │ │ ├── popover.service.ts │ │ ├── popover.spec.ts │ │ ├── popover.ts │ │ ├── public-api.ts │ │ ├── utils.spec.ts │ │ └── utils.ts │ ├── portal │ │ ├── dialog-ref.spec.ts │ │ ├── dialog-ref.ts │ │ ├── ng-package.json │ │ ├── portal-base.service.ts │ │ ├── portal-close.directive.spec.ts │ │ ├── portal-close.directive.ts │ │ ├── portal.component.spec.ts │ │ ├── portal.component.ts │ │ ├── portal.service.spec.ts │ │ ├── portal.service.ts │ │ └── public-api.ts │ ├── progress │ │ ├── ng-package.json │ │ ├── progress.spec.ts │ │ ├── progress.ts │ │ └── public-api.ts │ ├── radio │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── radio-group.spec.ts │ │ ├── radio-group.ts │ │ └── radio.ts │ ├── resizable │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── resizable-group.ts │ │ ├── resizable.spec.ts │ │ └── resizable.ts │ ├── schematics │ │ ├── collection.json │ │ └── components │ │ │ ├── files │ │ │ ├── accordion │ │ │ │ ├── accordion-llm.md.template │ │ │ │ ├── accordion.ts.template │ │ │ │ └── index.ts.template │ │ │ ├── alert │ │ │ │ ├── alert-llm.md.template │ │ │ │ ├── alert.ts.template │ │ │ │ └── index.ts.template │ │ │ ├── autocomplete │ │ │ │ ├── autocomplete-llm.md.template │ │ │ │ ├── autocomplete.ts.template │ │ │ │ └── index.ts.template │ │ │ ├── avatar │ │ │ │ ├── avatar-llm.md.template │ │ │ │ ├── avatar.ts.template │ │ │ │ └── index.ts.template │ │ │ ├── badge │ │ │ │ ├── badge-llm.md.template │ │ │ │ ├── badge.ts.template │ │ │ │ └── index.ts.template │ │ │ ├── breadcrumb │ │ │ │ ├── breadcrumb-llm.md.template │ │ │ │ ├── breadcrumb.ts.template │ │ │ │ └── index.ts.template │ │ │ ├── button │ │ │ │ ├── button-llm.md.template │ │ │ │ ├── button.ts.template │ │ │ │ └── index.ts.template │ │ │ ├── card │ │ │ │ ├── card-llm.md.template │ │ │ │ ├── card.ts.template │ │ │ │ └── index.ts.template │ │ │ ├── carousel │ │ │ │ ├── carousel-llm.md.template │ │ │ │ ├── carousel.ts.template │ │ │ │ └── index.ts.template │ │ │ ├── checkbox │ │ │ │ ├── checkbox-llm.md.template │ │ │ │ ├── checkbox.ts.template │ │ │ │ ├── focus-style.directive.ts.template │ │ │ │ └── index.ts.template │ │ │ ├── chip │ │ │ │ ├── chip-llm.md.template │ │ │ │ ├── chip.ts.template │ │ │ │ └── index.ts.template │ │ │ ├── color-picker │ │ │ │ ├── color-picker-llm.md.template │ │ │ │ ├── color-picker.ts.template │ │ │ │ └── index.ts.template │ │ │ ├── command │ │ │ │ ├── command.ts.template │ │ │ │ └── index.ts.template │ │ │ ├── datepicker │ │ │ │ ├── calendar.ts.template │ │ │ │ ├── datepicker-llm.md.template │ │ │ │ ├── datepicker.ts.template │ │ │ │ ├── index.ts.template │ │ │ │ └── time.ts.template │ │ │ ├── dialog │ │ │ │ ├── dialog-llm.md.template │ │ │ │ ├── dialog.ts.template │ │ │ │ └── index.ts.template │ │ │ ├── drawer │ │ │ │ ├── drawer-llm.md.template │ │ │ │ ├── drawer.ts.template │ │ │ │ └── index.ts.template │ │ │ ├── form-field │ │ │ │ ├── form-field-llm.md.template │ │ │ │ ├── form-field.ts.template │ │ │ │ ├── index.ts.template │ │ │ │ └── input-style.directive.ts.template │ │ │ ├── hover-card │ │ │ │ ├── hover-card-llm.md.template │ │ │ │ ├── hover-card.ts.template │ │ │ │ └── index.ts.template │ │ │ ├── icon │ │ │ │ ├── icon-llm.md.template │ │ │ │ ├── icon.ts.template │ │ │ │ └── index.ts.template │ │ │ ├── inline-edit │ │ │ │ ├── index.ts.template │ │ │ │ ├── inline-edit-llm.md.template │ │ │ │ └── inline-edit.ts.template │ │ │ ├── keys │ │ │ │ ├── index.ts.template │ │ │ │ └── key.ts.template │ │ │ ├── list │ │ │ │ ├── index.ts.template │ │ │ │ ├── list-llm.md.template │ │ │ │ └── list.ts.template │ │ │ ├── mask │ │ │ │ ├── index.ts.template │ │ │ │ ├── mask-llm.md.template │ │ │ │ └── mask.ts.template │ │ │ ├── menu │ │ │ │ ├── context-menu-llm.md.template │ │ │ │ ├── context-menu.ts.template │ │ │ │ ├── index.ts.template │ │ │ │ ├── mention.ts.template │ │ │ │ ├── menu-llm.md.template │ │ │ │ ├── menu.ts.template │ │ │ │ └── navigation-menu.ts.template │ │ │ ├── otp │ │ │ │ ├── index.ts.template │ │ │ │ ├── otp-llm.md.template │ │ │ │ └── otp.ts.template │ │ │ ├── pagination │ │ │ │ ├── index.ts.template │ │ │ │ ├── pagination-llm.md.template │ │ │ │ └── pagination.ts.template │ │ │ ├── picasa │ │ │ │ ├── index.ts.template │ │ │ │ ├── picasa-base.component.ts.template │ │ │ │ ├── picasa.component.ts.template │ │ │ │ ├── picasa.directive.ts.template │ │ │ │ └── picase.service.ts.template │ │ │ ├── popover │ │ │ │ ├── index.ts.template │ │ │ │ ├── popover-llm.md.template │ │ │ │ └── popover.ts.template │ │ │ ├── progress │ │ │ │ ├── index.ts.template │ │ │ │ ├── progress-llm.md.template │ │ │ │ └── progress.ts.template │ │ │ ├── radio │ │ │ │ ├── index.ts.template │ │ │ │ ├── radio-llm.md.template │ │ │ │ └── radio.ts.template │ │ │ ├── resizable │ │ │ │ ├── index.ts.template │ │ │ │ ├── resizable-llm.md.template │ │ │ │ └── resizable.ts.template │ │ │ ├── scroll-area │ │ │ │ ├── index.ts.template │ │ │ │ └── scroll-area.ts.template │ │ │ ├── select │ │ │ │ ├── index.ts.template │ │ │ │ ├── list-selection.ts.template │ │ │ │ ├── option.ts.template │ │ │ │ ├── select-input.ts.template │ │ │ │ ├── select-llm.md.template │ │ │ │ └── select.ts.template │ │ │ ├── selectable │ │ │ │ ├── index.ts.template │ │ │ │ ├── selectable-llm.md.template │ │ │ │ └── selectable.ts.template │ │ │ ├── separator │ │ │ │ ├── index.ts.template │ │ │ │ └── separator.ts.template │ │ │ ├── sheet │ │ │ │ ├── index.ts.template │ │ │ │ ├── sheet-llm.md.template │ │ │ │ └── sheet.ts.template │ │ │ ├── sidenav │ │ │ │ ├── index.ts.template │ │ │ │ ├── sidenav-llm.md.template │ │ │ │ └── sidenav.ts.template │ │ │ ├── skeleton │ │ │ │ ├── index.ts.template │ │ │ │ ├── skeleton-llm.md.template │ │ │ │ └── skeleton.ts.template │ │ │ ├── slider │ │ │ │ ├── index.ts.template │ │ │ │ ├── slider-llm.md.template │ │ │ │ └── slider.ts.template │ │ │ ├── sonner │ │ │ │ ├── index.ts.template │ │ │ │ ├── sonner-llm.md.template │ │ │ │ └── sonner.ts.template │ │ │ ├── spinner │ │ │ │ ├── index.ts.template │ │ │ │ ├── spinner-llm.md.template │ │ │ │ └── spinner.ts.template │ │ │ ├── stepper │ │ │ │ ├── index.ts.template │ │ │ │ ├── stepper-llm.md.template │ │ │ │ └── stepper.ts.template │ │ │ ├── switch │ │ │ │ ├── index.ts.template │ │ │ │ ├── switch-llm.md.template │ │ │ │ └── switch.ts.template │ │ │ ├── table │ │ │ │ ├── index.ts.template │ │ │ │ ├── table-llm.md.template │ │ │ │ └── table.ts.template │ │ │ ├── tabs │ │ │ │ ├── index.ts.template │ │ │ │ ├── tab.ts.template │ │ │ │ └── tabs-llm.md.template │ │ │ ├── theme │ │ │ │ ├── index.ts.template │ │ │ │ ├── theme-button.ts.template │ │ │ │ ├── theme-llm.md.template │ │ │ │ └── theme.service.ts.template │ │ │ ├── toggle-group │ │ │ │ ├── index.ts.template │ │ │ │ ├── toggle-group-llm.md.template │ │ │ │ └── toggle-group.ts.template │ │ │ ├── toggle │ │ │ │ ├── index.ts.template │ │ │ │ ├── toggle-llm.md.template │ │ │ │ └── toggle.ts.template │ │ │ ├── tooltip │ │ │ │ ├── index.ts.template │ │ │ │ ├── tooltip-llm.md.template │ │ │ │ └── tooltip.ts.template │ │ │ ├── tour │ │ │ │ ├── index.ts.template │ │ │ │ └── tour.ts.template │ │ │ └── tree │ │ │ │ ├── index.ts.template │ │ │ │ └── tree.ts.template │ │ │ ├── index.ts │ │ │ ├── schema.json │ │ │ └── schema.ts │ ├── scroll-area │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ └── scroll-area.ts │ ├── select │ │ ├── list-selection.ts │ │ ├── ng-package.json │ │ ├── option-group.ts │ │ ├── option.ts │ │ ├── public-api.ts │ │ ├── select-base.ts │ │ ├── select-input.ts │ │ ├── select.spec.ts │ │ └── select.ts │ ├── selectable │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── selectable-item.spec.ts │ │ ├── selectable-item.ts │ │ ├── selectable.spec.ts │ │ └── selectable.ts │ ├── sheet │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── sheet.service.ts │ │ ├── sheet.spec.ts │ │ └── sheet.ts │ ├── sidenav │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── sidenav-header.ts │ │ ├── sidenav.service.ts │ │ ├── sidenav.spec.ts │ │ └── sidenav.ts │ ├── slider │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── slider.spec.ts │ │ └── slider.ts │ ├── sonner │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── sonner.service.ts │ │ ├── sonner.spec.ts │ │ └── sonner.ts │ ├── src │ │ └── public-api.ts │ ├── stepper │ │ ├── animation.ts │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── step.ts │ │ ├── stepper-adk.ts │ │ └── stepper.ts │ ├── switch │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── switch.spec.ts │ │ └── switch.ts │ ├── table │ │ ├── body-cell.ts │ │ ├── body-row.ts │ │ ├── column.ts │ │ ├── head-cell.ts │ │ ├── head-row.ts │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── sort.ts │ │ ├── table.spec.ts │ │ └── table.ts │ ├── tabs │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── tab-group.spec.ts │ │ ├── tab-group.ts │ │ ├── tab.spec.ts │ │ └── tab.ts │ ├── test │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ └── utils.ts │ ├── toggle-group │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── toggle-group.spec.ts │ │ ├── toggle-group.ts │ │ └── toggle-item.ts │ ├── toggle │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── toggle.spec.ts │ │ └── toggle.ts │ ├── tooltip │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── tooltip.directive.ts │ │ ├── tooltip.service.spec.ts │ │ ├── tooltip.service.ts │ │ ├── tooltip.spec.ts │ │ └── tooltip.ts │ ├── tour │ │ ├── animation.ts │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── tour-base.ts │ │ ├── tour-step.ts │ │ ├── tour.service.ts │ │ └── tour.ts │ ├── translate │ │ ├── config.spec.ts │ │ ├── config.ts │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── translate.service.ts │ │ └── translate.ts │ ├── tree │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ ├── tree-node.ts │ │ ├── tree-toggle.ts │ │ ├── tree.spec.ts │ │ └── tree.ts │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ ├── tsconfig.schematics.json │ ├── tsconfig.spec.json │ ├── utils │ │ ├── animation.ts │ │ ├── disposals.ts │ │ ├── dom-observer.service.ts │ │ ├── ng-package.json │ │ ├── number-only.spec.ts │ │ ├── number-only.ts │ │ ├── public-api.ts │ │ ├── range.pipe.ts │ │ ├── ssr.ts │ │ └── utils.ts │ └── virtualizer │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── public-api.ts │ │ └── virtualizer.ts ├── docs │ ├── public │ │ ├── .gitkeep │ │ ├── GeistVF.woff2 │ │ ├── _redirects │ │ ├── favicon.ico │ │ ├── i18n │ │ │ ├── ar.json │ │ │ ├── en.json │ │ │ └── fr.json │ │ ├── logo.png │ │ ├── logo.svg │ │ ├── music1.webp │ │ ├── nodejs.md │ │ └── wallpaper.jpg │ ├── server.ts │ ├── src │ │ ├── app │ │ │ ├── add.component.ts │ │ │ ├── add.service.ts │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.config.server.ts │ │ │ ├── app.config.ts │ │ │ ├── app.routes.server.ts │ │ │ ├── app.routes.ts │ │ │ ├── app.service.ts │ │ │ ├── chat │ │ │ │ ├── chat.component.ts │ │ │ │ ├── chat.routes.ts │ │ │ │ └── chat.service.ts │ │ │ ├── currency-mask.ng.ts │ │ │ ├── examples │ │ │ │ ├── blogs.component.ts │ │ │ │ ├── data.ts │ │ │ │ ├── example.routes.ts │ │ │ │ ├── forms.component.ts │ │ │ │ ├── inventory.component.ts │ │ │ │ ├── mail.component.ts │ │ │ │ ├── main.component.ts │ │ │ │ ├── markdown.component.ts │ │ │ │ ├── music.component.ts │ │ │ │ ├── playground.component.ts │ │ │ │ ├── sidebars.component.ts │ │ │ │ └── termor.component.ts │ │ │ ├── introduction.ng.ts │ │ │ ├── origin │ │ │ │ ├── carousel-origin.ts │ │ │ │ ├── dropdown.ng.ts │ │ │ │ ├── origin.ng.ts │ │ │ │ ├── origin.routes.ts │ │ │ │ └── slider-origin.ts │ │ │ ├── ui │ │ │ │ ├── accordion │ │ │ │ │ ├── accordion-usage.ts │ │ │ │ │ ├── accordion.component.ts │ │ │ │ │ └── accordion.md │ │ │ │ ├── alert-dialog │ │ │ │ │ ├── alert-dialog-adk.ts │ │ │ │ │ ├── alert-dialog-usage.ts │ │ │ │ │ └── alert-dialog.component.ts │ │ │ │ ├── autocomplete │ │ │ │ │ ├── autocomplete-adk.ts │ │ │ │ │ ├── autocomplete-usage.ts │ │ │ │ │ └── autocomplete.component.ts │ │ │ │ ├── avatar │ │ │ │ │ ├── avatar-adk.ts │ │ │ │ │ ├── avatar-usage.ts │ │ │ │ │ └── avatar.component.ts │ │ │ │ ├── badge │ │ │ │ │ ├── badge-adk.ts │ │ │ │ │ ├── badge-usage.ts │ │ │ │ │ └── badge.component.ts │ │ │ │ ├── base.component.ts │ │ │ │ ├── breadcrumbs │ │ │ │ │ ├── breadcrumb.component.ts │ │ │ │ │ ├── breadcrumbs-adk.ts │ │ │ │ │ └── breadcrumbs-usage.ts │ │ │ │ ├── buttons.component.ts │ │ │ │ ├── calendar │ │ │ │ │ ├── calendar-adk.ts │ │ │ │ │ ├── calendar-usage.ts │ │ │ │ │ └── calendar.component.ts │ │ │ │ ├── card │ │ │ │ │ ├── card-adk.ts │ │ │ │ │ ├── card-usage.ts │ │ │ │ │ └── card.component.ts │ │ │ │ ├── carousel │ │ │ │ │ ├── carousel-adk.ts │ │ │ │ │ ├── carousel-usage.ts │ │ │ │ │ └── carousel.component.ts │ │ │ │ ├── checkbox │ │ │ │ │ ├── checkbox-adk.ts │ │ │ │ │ ├── checkbox-usage.ts │ │ │ │ │ └── checkbox.component.ts │ │ │ │ ├── chip │ │ │ │ │ ├── chip-adk.ts │ │ │ │ │ ├── chip-usage.ts │ │ │ │ │ └── chip.component.ts │ │ │ │ ├── code.component.ts │ │ │ │ ├── color-picker │ │ │ │ │ ├── color-picker-adk.ts │ │ │ │ │ ├── color-picker-usage.ts │ │ │ │ │ └── color-picker.component.ts │ │ │ │ ├── command.component.ts │ │ │ │ ├── context-menu.component.ts │ │ │ │ ├── datepicker.component.ts │ │ │ │ ├── dialog.component.ts │ │ │ │ ├── directionality.component.ts │ │ │ │ ├── drag.component.ts │ │ │ │ ├── drawer.component.ts │ │ │ │ ├── form-field │ │ │ │ │ ├── form-field-usage.ts │ │ │ │ │ └── form-field.component.ts │ │ │ │ ├── forms.component.ts │ │ │ │ ├── hover-card.component.ts │ │ │ │ ├── inline-edit.component.ts │ │ │ │ ├── jwt │ │ │ │ │ ├── jwt-usage.ts │ │ │ │ │ └── jwt.component.ts │ │ │ │ ├── keyboard-shortcuts.component.ts │ │ │ │ ├── lang-button.ts │ │ │ │ ├── list.component.ts │ │ │ │ ├── mask.component.ts │ │ │ │ ├── mention.component.ts │ │ │ │ ├── menu.component.ts │ │ │ │ ├── nav-header.component.ts │ │ │ │ ├── navigation-menu.component.ts │ │ │ │ ├── otp.component.ts │ │ │ │ ├── pagination.component.ts │ │ │ │ ├── picasa.component.ts │ │ │ │ ├── popover-demo.component.ts │ │ │ │ ├── popover.component.ts │ │ │ │ ├── progress.component.ts │ │ │ │ ├── radio.component.ts │ │ │ │ ├── resizable.component.ts │ │ │ │ ├── scroll-area.component.ts │ │ │ │ ├── select.component.ts │ │ │ │ ├── selectable.component.ts │ │ │ │ ├── sheet.component.ts │ │ │ │ ├── shortcuts.component.ts │ │ │ │ ├── sidenav.component.ts │ │ │ │ ├── skeleton.component.ts │ │ │ │ ├── slider │ │ │ │ │ ├── slider-adk.ts │ │ │ │ │ ├── slider-usage.ts │ │ │ │ │ └── slider.component.ts │ │ │ │ ├── sonner.component.ts │ │ │ │ ├── spinner.component.ts │ │ │ │ ├── stepper │ │ │ │ │ ├── stepper-usage.ts │ │ │ │ │ └── stepper.component.ts │ │ │ │ ├── switch │ │ │ │ │ ├── switch-adk.ts │ │ │ │ │ ├── switch-usage.ts │ │ │ │ │ └── switch.component.ts │ │ │ │ ├── table │ │ │ │ │ ├── table-demo-one.ng.ts │ │ │ │ │ └── table.component.ts │ │ │ │ ├── tabs │ │ │ │ │ ├── tabs-adk.ts │ │ │ │ │ ├── tabs-usage.ts │ │ │ │ │ └── tabs.component.ts │ │ │ │ ├── test │ │ │ │ │ ├── test-adk.ts │ │ │ │ │ ├── test-usage.ts │ │ │ │ │ └── test.component.ts │ │ │ │ ├── theme.component.ts │ │ │ │ ├── toggle-group.component.ts │ │ │ │ ├── toggle.component.ts │ │ │ │ ├── tooltip.component.ts │ │ │ │ ├── tour-demo.component.ts │ │ │ │ ├── tour.component.ts │ │ │ │ ├── translation.component.ts │ │ │ │ ├── tree-data.ts │ │ │ │ ├── tree.component.ts │ │ │ │ ├── tree.component1.ts │ │ │ │ ├── typography.component.ts │ │ │ │ ├── ui.component.html │ │ │ │ ├── ui.component.ts │ │ │ │ ├── ui.routes.ts │ │ │ │ └── virtualizer.component.ts │ │ │ └── wordpower.component.ts │ │ ├── index.html │ │ ├── main.server.ts │ │ ├── main.ts │ │ └── styles.scss │ ├── tsconfig.app.json │ └── tsconfig.spec.json └── mee │ ├── README.md │ ├── accordion │ ├── accordion-llm.md │ ├── accordion.spec.ts │ ├── accordion.ts │ ├── ng-package.json │ └── public-api.ts │ ├── alert │ ├── alert-llm.md │ ├── alert.ts │ ├── ng-package.json │ └── public-api.ts │ ├── autocomplete │ ├── autocomplete-llm.md │ ├── autocomplete.spec.ts │ ├── autocomplete.ts │ ├── ng-package.json │ └── public-api.ts │ ├── avatar │ ├── avatar-llm.md │ ├── avatar.component.spec.ts │ ├── avatar.ts │ ├── ng-package.json │ └── public-api.ts │ ├── badge │ ├── badge-llm.md │ ├── badge.ts │ ├── ng-package.json │ └── public-api.ts │ ├── breadcrumb │ ├── breadcrumb-llm.md │ ├── breadcrumb.ts │ ├── ng-package.json │ └── public-api.ts │ ├── button │ ├── button-llm.md │ ├── button.spec.ts │ ├── button.ts │ ├── ng-package.json │ └── public-api.ts │ ├── card │ ├── card-llm.md │ ├── card.spec.ts │ ├── card.ts │ ├── ng-package.json │ └── public-api.ts │ ├── carousel │ ├── carousel-llm.md │ ├── carousel.ts │ ├── ng-package.json │ └── public-api.ts │ ├── checkbox │ ├── checkbox-llm.md │ ├── checkbox.spec.ts │ ├── checkbox.ts │ ├── focus-style.directive.ts │ ├── ng-package.json │ └── public-api.ts │ ├── chip │ ├── chip-llm.md │ ├── chip.ts │ ├── ng-package.json │ └── public-api.ts │ ├── color-picker │ ├── color-picker-llm.md │ ├── color-picker.spec.ts │ ├── color-picker.ts │ ├── ng-package.json │ └── public-api.ts │ ├── command │ ├── command.ts │ ├── ng-package.json │ └── public-api.ts │ ├── datepicker │ ├── calendar.ts │ ├── datepicker-llm.md │ ├── datepicker.ts │ ├── ng-package.json │ ├── public-api.ts │ └── time.ts │ ├── dialog │ ├── dialog-llm.md │ ├── dialog.spec.ts │ ├── dialog.ts │ ├── ng-package.json │ └── public-api.ts │ ├── drawer │ ├── drawer-llm.md │ ├── drawer.spec.ts │ ├── drawer.ts │ ├── ng-package.json │ └── public-api.ts │ ├── form-field │ ├── form-field-llm.md │ ├── form-field.spec.ts │ ├── form-field.ts │ ├── input-style.directive.ts │ ├── ng-package.json │ └── public-api.ts │ ├── hover-card │ ├── hover-card-llm.md │ ├── hover-card.ts │ ├── ng-package.json │ └── public-api.ts │ ├── icon │ ├── icon-llm.md │ ├── icon.ts │ ├── ng-package.json │ └── public-api.ts │ ├── inline-edit │ ├── inline-edit-llm.md │ ├── inline-edit.ts │ ├── ng-package.json │ └── public-api.ts │ ├── keys │ ├── key.ts │ ├── ng-package.json │ └── public-api.ts │ ├── list │ ├── list-llm.md │ ├── list.spec.ts │ ├── list.ts │ ├── ng-package.json │ └── public-api.ts │ ├── mask │ ├── mask-llm.md │ ├── mask.ts │ ├── ng-package.json │ └── public-api.ts │ ├── menu │ ├── context-menu-llm.md │ ├── context-menu.ts │ ├── mention.ts │ ├── menu-llm.md │ ├── menu.ts │ ├── navigation-menu.ts │ ├── ng-package.json │ └── public-api.ts │ ├── ng-package.json │ ├── otp │ ├── ng-package.json │ ├── otp-llm.md │ ├── otp.ts │ └── public-api.ts │ ├── package.json │ ├── pagination │ ├── ng-package.json │ ├── pagination-llm.md │ ├── pagination.spec.ts │ ├── pagination.ts │ └── public-api.ts │ ├── picasa │ ├── ng-package.json │ ├── picasa-base.component.ts │ ├── picasa.component.ts │ ├── picasa.directive.ts │ ├── picase.service.ts │ └── public-api.ts │ ├── popover │ ├── popover-llm.md │ ├── popover.ts │ └── public-api.ts │ ├── progress │ ├── ng-package.json │ ├── progress-llm.md │ ├── progress.spec.ts │ ├── progress.ts │ └── public-api.ts │ ├── radio │ ├── ng-package.json │ ├── public-api.ts │ ├── radio-group.spec.ts │ ├── radio-llm.md │ ├── radio.spec.ts │ └── radio.ts │ ├── resizable │ ├── ng-package.json │ ├── public-api.ts │ ├── resizable-llm.md │ ├── resizable.spec.ts │ └── resizable.ts │ ├── scroll-area │ ├── ng-package.json │ ├── public-api.ts │ └── scroll-area.ts │ ├── select │ ├── list-selection.ts │ ├── ng-package.json │ ├── option.ts │ ├── public-api.ts │ ├── select-input.ts │ ├── select-llm.md │ ├── select.spec.ts │ └── select.ts │ ├── selectable │ ├── ng-package.json │ ├── public-api.ts │ ├── selectable-item.spec.ts │ ├── selectable-llm.md │ ├── selectable.spec.ts │ └── selectable.ts │ ├── separator │ ├── ng-package.json │ ├── public-api.ts │ ├── separator.spec.ts │ └── separator.ts │ ├── sheet │ ├── ng-package.json │ ├── public-api.ts │ ├── sheet-llm.md │ └── sheet.ts │ ├── sidenav │ ├── ng-package.json │ ├── public-api.ts │ ├── sidenav-llm.md │ └── sidenav.ts │ ├── skeleton │ ├── ng-package.json │ ├── public-api.ts │ ├── skeleton-llm.md │ └── skeleton.ts │ ├── slider │ ├── ng-package.json │ ├── public-api.ts │ ├── slider-llm.md │ └── slider.ts │ ├── sonner │ ├── ng-package.json │ ├── public-api.ts │ ├── sonner-llm.md │ ├── sonner.spec.ts │ └── sonner.ts │ ├── spinner │ ├── ng-package.json │ ├── public-api.ts │ ├── spinner-llm.md │ └── spinner.ts │ ├── src │ └── public-api.ts │ ├── stepper │ ├── ng-package.json │ ├── public-api.ts │ ├── stepper-llm.md │ └── stepper.ts │ ├── switch │ ├── ng-package.json │ ├── public-api.ts │ ├── switch-llm.md │ ├── switch.spec.ts │ └── switch.ts │ ├── table │ ├── ng-package.json │ ├── public-api.ts │ ├── table-llm.md │ └── table.ts │ ├── tabs │ ├── ng-package.json │ ├── public-api.ts │ ├── tab-group.spec.ts │ ├── tab.spec.ts │ ├── tab.ts │ └── tabs-llm.md │ ├── theme │ ├── ng-package.json │ ├── public-api.ts │ ├── theme-button.ts │ ├── theme-llm.md │ └── theme.service.ts │ ├── toggle-group │ ├── ng-package.json │ ├── public-api.ts │ ├── toggle-group-llm.md │ ├── toggle-group.spec.ts │ └── toggle-group.ts │ ├── toggle │ ├── ng-package.json │ ├── public-api.ts │ ├── toggle-llm.md │ ├── toggle.spec.ts │ └── toggle.ts │ ├── tooltip │ ├── ng-package.json │ ├── public-api.ts │ ├── tooltip-llm.md │ └── tooltip.ts │ ├── tour │ ├── ng-package.json │ ├── public-api.ts │ └── tour.ts │ ├── tree │ ├── ng-package.json │ ├── public-api.ts │ ├── tree.spec.ts │ └── tree.ts │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ ├── tsconfig.spec.json │ └── typography │ ├── heading.ts │ ├── ng-package.json │ └── public-api.ts ├── schematic-file-copy.js ├── setup-jest.ts ├── tailwind.config.js ├── tsconfig.json └── tsconfig.spec.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /.oxlintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "node_modules/oxlint/configuration_schema.json", 3 | "rules": { 4 | "no-document-cookie": "off" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["prettier-plugin-tailwindcss"], 3 | "singleQuote": true, 4 | "printWidth": 100, 5 | "arrowParens": "avoid" 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "files.autoSave": "off", 4 | "jest.runMode": "on-demand", 5 | "cSpell.words": ["meeui", "Sonner", "clazz", "ngbase"] 6 | } 7 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | // jest.config.js 2 | module.exports = { 3 | preset: 'jest-preset-angular', 4 | setupFilesAfterEnv: ['/setup-jest.ts'], 5 | // globalSetup: "jest-preset-angular/global-setup", 6 | moduleNameMapper: { 7 | '@meeui/ui/(.*)$': '/projects/mee/$1/public-api.ts', 8 | '@ngbase/adk/(.*)$': '/projects/adk/$1/public-api.ts', 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /projects/adk/a11y/accessiblity-group.md: -------------------------------------------------------------------------------- 1 | ### Edge cases documentation 2 | 3 | When a radio group is inside a popup, when user applies a popoverClose to the radio item, then clicking a radio item the popup closes before selecting the radio item. This happens because the we are trigger click on focusIn triggers and it tries to select the first item by default. 4 | -------------------------------------------------------------------------------- /projects/adk/a11y/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/a11y/public-api.ts: -------------------------------------------------------------------------------- 1 | export { AccessibleGroup } from './accessibility-group'; 2 | export { AccessibleItem } from './accessibility-item'; 3 | export { FocusTrap } from './focus-trap'; 4 | export { Autofocus } from './autofocus'; 5 | -------------------------------------------------------------------------------- /projects/adk/accordion/accordion-content.ts: -------------------------------------------------------------------------------- 1 | import { animate, state, style, transition, trigger } from '@angular/animations'; 2 | import { Directive, inject } from '@angular/core'; 3 | import { NgbAccordion } from './accordion-item'; 4 | 5 | @Directive({ 6 | selector: '[ngbAccordionContent]', 7 | host: { 8 | role: 'region', 9 | '[id]': 'accordion.id', 10 | '[attr.aria-labelledby]': "'accordion-' + accordion.id", 11 | }, 12 | }) 13 | export class NgbAccordionContent { 14 | readonly accordion = inject(NgbAccordion); 15 | } 16 | 17 | export const slideAnimation = trigger('slide', [ 18 | state('void', style({ height: '0', opacity: 0 })), 19 | state('*', style({ height: '*', opacity: 1 })), 20 | transition('void => *', animate('300ms ease')), 21 | transition('* => void', animate('300ms ease')), 22 | ]); 23 | -------------------------------------------------------------------------------- /projects/adk/accordion/accordion-group.ts: -------------------------------------------------------------------------------- 1 | import { booleanAttribute, contentChildren, Directive, effect, input, signal } from '@angular/core'; 2 | import { NgbAccordion } from './accordion-item'; 3 | 4 | @Directive({ 5 | selector: '[ngbAccordionGroup]', 6 | exportAs: 'ngbAccordionGroup', 7 | }) 8 | export class NgbAccordionGroup { 9 | readonly items = contentChildren(NgbAccordion); 10 | readonly multiple = input(false, { transform: booleanAttribute }); 11 | readonly activeId = signal(''); 12 | 13 | constructor() { 14 | effect(() => { 15 | const items = this.items(); 16 | const ids = this.activeId(); 17 | const isMultiple = this.multiple(); 18 | if (!isMultiple) { 19 | items.forEach(item => { 20 | item.expanded.set(ids.includes(item.id)); 21 | }); 22 | } 23 | }); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /projects/adk/accordion/accordion-header.ts: -------------------------------------------------------------------------------- 1 | import { Directive, inject } from '@angular/core'; 2 | import { NgbAccordion } from './accordion-item'; 3 | 4 | @Directive({ 5 | selector: '[ngbAccordionHeader]', 6 | host: { 7 | '(click)': 'accordion.disabled() ? null : accordion.toggle()', 8 | '[tabindex]': 'accordion.disabled() ? -1 : 0', 9 | '[attr.aria-disabled]': 'accordion.disabled()', 10 | '[attr.aria-expanded]': 'accordion.expanded()', 11 | '[attr.aria-controls]': 'accordion.id', 12 | '[id]': `'accordion-' + accordion.id`, 13 | }, 14 | }) 15 | export class NgbAccordionHeader { 16 | accordion = inject(NgbAccordion); 17 | } 18 | -------------------------------------------------------------------------------- /projects/adk/accordion/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/accordion/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of accordion 3 | */ 4 | 5 | export { NgbAccordionGroup } from './accordion-group'; 6 | export { NgbAccordion, aliasAccordion } from './accordion-item'; 7 | export { NgbAccordionHeader } from './accordion-header'; 8 | export { NgbAccordionContent, slideAnimation } from './accordion-content'; 9 | -------------------------------------------------------------------------------- /projects/adk/autocomplete/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/autocomplete/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of autocomplete 3 | */ 4 | 5 | export * from './autocomplete'; 6 | export * from './autocomplete-input'; 7 | -------------------------------------------------------------------------------- /projects/adk/avatar/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/avatar/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './avatar'; 2 | -------------------------------------------------------------------------------- /projects/adk/bidi/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/bidi/public-api.ts: -------------------------------------------------------------------------------- 1 | export { Directionality, injectDirectionality } from './direction.service'; 2 | -------------------------------------------------------------------------------- /projects/adk/breadcrumb/breadcrumb-link.ts: -------------------------------------------------------------------------------- 1 | import { Directive, inject } from '@angular/core'; 2 | import { NgbBreadcrumb } from './public-api'; 3 | 4 | @Directive({ 5 | selector: '[ngbBreadcrumbLink]', 6 | host: { 7 | '[tabIndex]': 'breadcrumb.active() ? -1 : 0', 8 | '[attr.aria-current]': "breadcrumb.active() ? 'page' : null", 9 | '[attr.aria-disabled]': 'breadcrumb.active() || null', 10 | role: 'link', 11 | }, 12 | }) 13 | export class NgbBreadcrumbLink { 14 | readonly breadcrumb = inject(NgbBreadcrumb); 15 | } 16 | -------------------------------------------------------------------------------- /projects/adk/breadcrumb/breadcrumb-separator.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { injectDirectionality } from '@ngbase/adk/bidi'; 3 | 4 | @Directive({ 5 | selector: '[ngbBreadcrumbsSeparator]', 6 | host: { 7 | tabindex: '-1', 8 | 'aria-hidden': 'true', 9 | role: 'presentation', 10 | }, 11 | }) 12 | export class NgbBreadcrumbSeparator { 13 | readonly dir = injectDirectionality(); 14 | } 15 | -------------------------------------------------------------------------------- /projects/adk/breadcrumb/breadcrumbs.ts: -------------------------------------------------------------------------------- 1 | import { contentChild, contentChildren, Directive, TemplateRef } from '@angular/core'; 2 | import { NgbBreadcrumb } from './breadcrumb'; 3 | import { NgbBreadcrumbSeparator } from './breadcrumb-separator'; 4 | 5 | @Directive({ 6 | selector: '[ngbBreadcrumbs]', 7 | host: { 8 | 'aria-label': 'breadcrumb', 9 | }, 10 | }) 11 | export class NgbBreadcrumbs { 12 | readonly items = contentChildren(NgbBreadcrumb); 13 | readonly separator = contentChild(NgbBreadcrumbSeparator, { read: TemplateRef }); 14 | } 15 | -------------------------------------------------------------------------------- /projects/adk/breadcrumb/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/breadcrumb/public-api.ts: -------------------------------------------------------------------------------- 1 | export { NgbBreadcrumbs } from './breadcrumbs'; 2 | export { NgbBreadcrumb, aliasBreadcrumb } from './breadcrumb'; 3 | export { NgbBreadcrumbLink } from './breadcrumb-link'; 4 | export { NgbBreadcrumbSeparator } from './breadcrumb-separator'; 5 | -------------------------------------------------------------------------------- /projects/adk/cache/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/cache/public-api.ts: -------------------------------------------------------------------------------- 1 | export { injectCache, type CacheConfig } from './cache'; 2 | export { cacheInterceptor } from './cache.interecptor'; 3 | export { provideCache, type CacheInterceptorConfig } from './cache-config'; 4 | -------------------------------------------------------------------------------- /projects/adk/carousel/carousel-item.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, inject } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[ngbCarouselItem]', 5 | }) 6 | export class NgbCarouselItem { 7 | private readonly el = inject>(ElementRef); 8 | 9 | get width() { 10 | const el = this.el.nativeElement; 11 | return el.getBoundingClientRect?.().width ?? el.offsetWidth; // SSR: fallback to offsetWidth 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /projects/adk/carousel/carousel-next.ts: -------------------------------------------------------------------------------- 1 | import { Directive, inject, input } from '@angular/core'; 2 | import { NgbCarousel } from './carousel'; 3 | 4 | @Directive({ 5 | selector: '[ngbCarouselButton]', 6 | host: { 7 | '(click)': 'clicked($event)', 8 | }, 9 | }) 10 | export class NgbCarouselButton { 11 | private readonly carousel = inject(NgbCarousel); 12 | 13 | readonly ngbCarouselButton = input.required(); 14 | 15 | clicked(event: Event) { 16 | event.preventDefault(); 17 | const no = this.ngbCarouselButton(); 18 | if (no === 'next') { 19 | this.carousel.next(); 20 | } else if (no === 'prev') { 21 | this.carousel.prev(); 22 | } else { 23 | this.carousel.go(no); 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /projects/adk/carousel/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/carousel/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './carousel'; 2 | export * from './carousel-item'; 3 | export * from './carousel-next'; 4 | -------------------------------------------------------------------------------- /projects/adk/checkbox/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/checkbox/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of checkbox 3 | */ 4 | 5 | export { aliasCheckbox, CheckboxButton, NgbCheckbox } from './checkbox'; 6 | -------------------------------------------------------------------------------- /projects/adk/chip/chip-group.ts: -------------------------------------------------------------------------------- 1 | import { contentChildren, Directive, effect, untracked } from '@angular/core'; 2 | // import { Autocomplete } from '@ngbase/adk/autocomplete'; 3 | import { NgbChip } from './chip'; 4 | 5 | @Directive({ 6 | selector: '[ngbChipGroup]', 7 | }) 8 | export class NgbChipGroup { 9 | readonly chips = contentChildren(NgbChip); 10 | // readonly autoComplete = inject(Autocomplete); 11 | 12 | // constructor() { 13 | // effect(() => { 14 | // const chips = this.chips(); 15 | // untracked(() => { 16 | // chips.forEach(chip => { 17 | // chip.close.subscribe(() => { 18 | // this.autoComplete.removeValue(chip.value()); 19 | // }); 20 | // }); 21 | // }); 22 | // }); 23 | // } 24 | } 25 | -------------------------------------------------------------------------------- /projects/adk/chip/chip.ts: -------------------------------------------------------------------------------- 1 | import { booleanAttribute, Directive, inject, input, output } from '@angular/core'; 2 | import { Directionality } from '@ngbase/adk/bidi'; 3 | 4 | @Directive({ 5 | selector: '[ngbChipRemove]', 6 | host: { 7 | type: 'button', 8 | '(click)': 'chip.close.emit($event)', 9 | '[attr.data-dir]': 'chip.dir.isRtl() ? "rtl" : "ltr"', 10 | }, 11 | }) 12 | export class NgbChipRemove { 13 | readonly chip = inject(NgbChip); 14 | } 15 | 16 | @Directive({ 17 | selector: '[ngbChip]', 18 | }) 19 | export class NgbChip { 20 | readonly dir = inject(Directionality); 21 | 22 | readonly removable = input(true, { transform: booleanAttribute }); 23 | readonly value = input(); 24 | readonly close = output(); 25 | } 26 | 27 | export function aliasChip(chip: typeof NgbChip) { 28 | return { provide: NgbChip, useExisting: chip }; 29 | } 30 | -------------------------------------------------------------------------------- /projects/adk/chip/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/chip/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './chip'; 2 | export * from './chip-group'; 3 | -------------------------------------------------------------------------------- /projects/adk/clipboard/clipboard.ts: -------------------------------------------------------------------------------- 1 | import { Directive, input } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[ngbCopyToClipboard]', 5 | host: { 6 | class: 'cursor-pointer', 7 | '(click)': 'onClick($event)', 8 | }, 9 | }) 10 | export class CopyToClipboard { 11 | readonly ngbCopyToClipboard = input(); 12 | 13 | onClick(event: MouseEvent): void { 14 | event.preventDefault(); 15 | const textToCopy = this.ngbCopyToClipboard(); 16 | if (!textToCopy) return; 17 | 18 | navigator.clipboard 19 | .writeText(textToCopy) 20 | .then(() => { 21 | console.log('Text copied to clipboard'); 22 | }) 23 | .catch(err => { 24 | console.error('Failed to copy text: ', err); 25 | }); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /projects/adk/clipboard/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/clipboard/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './clipboard'; 2 | -------------------------------------------------------------------------------- /projects/adk/collections/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/collections/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './SelectionModel'; 2 | -------------------------------------------------------------------------------- /projects/adk/color-picker/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/color-picker/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of color-picker 3 | */ 4 | 5 | export * from './color-picker'; 6 | export * from './color-picker-trigger'; 7 | export * from './color-input'; 8 | -------------------------------------------------------------------------------- /projects/adk/cookies/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/cookies/public-api.ts: -------------------------------------------------------------------------------- 1 | export { CookieService, injectCookie } from './cookie.service'; 2 | -------------------------------------------------------------------------------- /projects/adk/datepicker/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/datepicker/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './calendar'; 2 | export * from './datepicker'; 3 | export * from './datepicker-trigger'; 4 | export * from './time'; 5 | export * from './native-date-adapter'; 6 | -------------------------------------------------------------------------------- /projects/adk/dialog/dialog.service.ts: -------------------------------------------------------------------------------- 1 | import { basePortal, DialogInput, DialogOptions } from '@ngbase/adk/portal'; 2 | import { NgbDialogContainer } from './dialog'; 3 | 4 | export function ngbDialogPortal(component: typeof NgbDialogContainer) { 5 | const NAME = 'dialog'; 6 | const base = basePortal(NAME, component); 7 | 8 | function open(component: DialogInput, opt?: DialogOptions) { 9 | const { diaRef } = base.open( 10 | component, 11 | (comp, options) => { 12 | comp.instance.setOptions(options); 13 | }, 14 | opt, 15 | ); 16 | 17 | return diaRef; 18 | } 19 | 20 | function closeAll() { 21 | base.closeAll(); 22 | } 23 | return { open, closeAll }; 24 | } 25 | 26 | export type NgbDialog = ReturnType; 27 | -------------------------------------------------------------------------------- /projects/adk/dialog/dialog.spec.ts: -------------------------------------------------------------------------------- 1 | import { provideNoopAnimations } from '@angular/platform-browser/animations'; 2 | import { render, RenderResult } from '@ngbase/adk/test'; 3 | import { DialogRef } from '@ngbase/adk/portal'; 4 | import { NgbDialogContainer } from './dialog'; 5 | 6 | const options = { title: 'Drawer' }; 7 | const mockDialogRef = new DialogRef(options, jest.fn(), jest.fn(), true); 8 | 9 | describe('DrawerComponent', () => { 10 | let component: NgbDialogContainer; 11 | let view: RenderResult; 12 | 13 | beforeEach(async () => { 14 | view = await render(NgbDialogContainer, [ 15 | provideNoopAnimations(), 16 | { provide: DialogRef, useValue: mockDialogRef }, 17 | ]); 18 | component = view.host; 19 | component.setOptions(options); 20 | view.detectChanges(); 21 | }); 22 | 23 | it('should create', () => { 24 | expect(component).toBeTruthy(); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /projects/adk/dialog/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/dialog/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of dialog 3 | */ 4 | 5 | export * from './dialog.service'; 6 | export * from './dialog'; 7 | export * from './dialog.animation'; 8 | -------------------------------------------------------------------------------- /projects/adk/drag/drag-drop-group.ts: -------------------------------------------------------------------------------- 1 | import { contentChildren, Directive } from '@angular/core'; 2 | import { DragDrop } from './drag-drop'; 3 | 4 | @Directive({ 5 | selector: '[ngbDropGroup]', 6 | host: { 7 | class: 'drop-group', 8 | }, 9 | }) 10 | export class DropGroup { 11 | readonly drops = contentChildren(DragDrop); 12 | private currentDrop: DragDrop | null = null; 13 | private previousDrop: DragDrop | null = null; 14 | 15 | onStart(drop: DragDrop) { 16 | this.previousDrop = drop; 17 | this.currentDrop = drop; 18 | } 19 | 20 | // onDragMove(data: T) { 21 | // if (this.currentDrop?.fromThis(data)) { 22 | // return; 23 | // } 24 | // const drop = this.drops().find(drop => drop.fromThis(data)); 25 | // if (drop) { 26 | // this.currentDrop = drop; 27 | // } 28 | // } 29 | } 30 | -------------------------------------------------------------------------------- /projects/adk/drag/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/drag/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of drag 3 | */ 4 | 5 | export * from './drag'; 6 | export * from './drag-move'; 7 | export * from './drag-drop'; 8 | -------------------------------------------------------------------------------- /projects/adk/form-field/label.ts: -------------------------------------------------------------------------------- 1 | import { Directive, inject } from '@angular/core'; 2 | import { NgbFormField } from './form-field'; 3 | 4 | @Directive({ 5 | selector: '[ngbLabel]', 6 | host: { 7 | '[attr.for]': 'id', 8 | }, 9 | }) 10 | export class NgbLabel { 11 | private readonly formField = inject(NgbFormField); 12 | readonly id = this.formField._id; 13 | } 14 | -------------------------------------------------------------------------------- /projects/adk/form-field/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/form-field/public-api.ts: -------------------------------------------------------------------------------- 1 | export { NgbInputError, markControlsTouched, toggleDiv } from './error'; 2 | export * from './form-field'; 3 | export { InputBase } from './input'; 4 | export * from './auto-height'; 5 | export * from './label'; 6 | -------------------------------------------------------------------------------- /projects/adk/hover-card/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/hover-card/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of hover-card 3 | */ 4 | 5 | export * from './hover-card'; 6 | -------------------------------------------------------------------------------- /projects/adk/icon/icon.ts: -------------------------------------------------------------------------------- 1 | import { computed, Directive, inject, input, resource } from '@angular/core'; 2 | import { DomSanitizer } from '@angular/platform-browser'; 3 | import { IconService } from './icon.service'; 4 | 5 | @Directive({ 6 | selector: '[ngbIcon]', 7 | host: { 8 | '[innerHTML]': 'svg()', 9 | }, 10 | }) 11 | export class NgbIcon { 12 | readonly service = inject(IconService); 13 | readonly sanitizer = inject(DomSanitizer); 14 | 15 | readonly name = input.required(); 16 | 17 | private readonly icon = resource({ 18 | request: this.name, 19 | loader: ({ request }) => this.service.getIcon(request), 20 | }); 21 | 22 | readonly svg = computed(() => { 23 | const txt = this.icon.value() || ''; 24 | return this.sanitizer.bypassSecurityTrustHtml(txt); 25 | }); 26 | } 27 | -------------------------------------------------------------------------------- /projects/adk/icon/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/icon/public-api.ts: -------------------------------------------------------------------------------- 1 | export { NgbIcon } from './icon'; 2 | export { type IconLoaderFn, ICON_LOADER } from './icon.service'; 3 | -------------------------------------------------------------------------------- /projects/adk/inline-edit/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/inline-edit/public-api.ts: -------------------------------------------------------------------------------- 1 | export { NgbInlineEdit, NgbInlineInput, NgbInlineValue, provideInlineEdit } from './inline-edit'; 2 | -------------------------------------------------------------------------------- /projects/adk/jwt/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/jwt/public-api.ts: -------------------------------------------------------------------------------- 1 | export { injectJwt, provideJwt, JwtService } from './jwt.service'; 2 | -------------------------------------------------------------------------------- /projects/adk/keys/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/keys/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of keys 3 | */ 4 | 5 | export { Keys } from './keys.service'; 6 | export { keyMap, Shortcuts } from './shortcuts.service'; 7 | -------------------------------------------------------------------------------- /projects/adk/layout/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/layout/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './layout'; 2 | -------------------------------------------------------------------------------- /projects/adk/list/list.spec.ts: -------------------------------------------------------------------------------- 1 | import { render, RenderResult } from '@ngbase/adk/test'; 2 | import { NgbList } from './list'; 3 | import { Component } from '@angular/core'; 4 | 5 | @Component({ 6 | template: `
  • `, 7 | imports: [NgbList], 8 | }) 9 | class TestComponent {} 10 | 11 | describe('ListComponent', () => { 12 | let component: TestComponent; 13 | let view: RenderResult; 14 | 15 | beforeEach(async () => { 16 | view = await render(TestComponent); 17 | component = view.host; 18 | view.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /projects/adk/list/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/list/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of list 3 | */ 4 | 5 | export * from './list'; 6 | export * from './list.directive'; 7 | // export * from './list-selection.component'; 8 | -------------------------------------------------------------------------------- /projects/adk/mask/mask-pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | import { maskTransform } from './mask'; 3 | 4 | @Pipe({ 5 | name: 'mask', 6 | }) 7 | export class MaskPipe implements PipeTransform { 8 | transform(value: string, mask: string): string { 9 | return maskTransform(value, mask); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/adk/mask/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/mask/public-api.ts: -------------------------------------------------------------------------------- 1 | export { Mask } from './mask'; 2 | export { MaskPipe } from './mask-pipe'; 3 | -------------------------------------------------------------------------------- /projects/adk/menu/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/menu/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of menu 3 | */ 4 | 5 | export * from './context-menu'; 6 | export * from './mention'; 7 | export * from './menu'; 8 | export * from './menu-trigger'; 9 | export * from './navigation-menu'; 10 | -------------------------------------------------------------------------------- /projects/adk/network/network.interceptor.ts: -------------------------------------------------------------------------------- 1 | import { HTTP_INTERCEPTORS, HttpInterceptorFn } from '@angular/common/http'; 2 | import { catchError } from 'rxjs'; 3 | import { injectNetwork } from './network.service'; 4 | import { isClient } from '@ngbase/adk/utils'; 5 | 6 | const networkInterceptor: HttpInterceptorFn = (req, next) => { 7 | const networkService = injectNetwork(); 8 | const isBrowser = isClient(); 9 | 10 | if (isBrowser && !networkService.isOnline()) { 11 | throw 'No internet connection'; 12 | } 13 | 14 | return next(req).pipe( 15 | catchError(error => { 16 | if (isBrowser && !networkService.isOnline()) { 17 | // You can implement custom error handling here 18 | } 19 | throw error; 20 | }), 21 | ); 22 | }; 23 | 24 | export const provideNetworkInterceptor = () => ({ 25 | provide: HTTP_INTERCEPTORS, 26 | useFactory: networkInterceptor, 27 | multi: true, 28 | }); 29 | -------------------------------------------------------------------------------- /projects/adk/network/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/network/public-api.ts: -------------------------------------------------------------------------------- 1 | export { provideNetworkInterceptor } from './network.interceptor'; 2 | export { injectNetwork, Network } from './network.service'; 3 | -------------------------------------------------------------------------------- /projects/adk/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/adk", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/adk/otp/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/otp/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './otp'; 2 | -------------------------------------------------------------------------------- /projects/adk/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ngbase/adk", 3 | "version": "0.1.11", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/ng-base/ngbase.git" 7 | }, 8 | "keywords": [ 9 | "angular" 10 | ], 11 | "license": "MIT", 12 | "bugs": { 13 | "url": "https://github.com/ng-base/ngbase/issues" 14 | }, 15 | "peerDependencies": { 16 | "@angular/common": "^19.0.0", 17 | "@angular/core": "^19.0.0", 18 | "@angular/forms": "^19.0.0" 19 | }, 20 | "dependencies": { 21 | "tslib": "^2.3.0" 22 | }, 23 | "schematics": "./schematics/collection.json", 24 | "sideEffects": false 25 | } 26 | -------------------------------------------------------------------------------- /projects/adk/pagination/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/pagination/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './pagination'; 2 | -------------------------------------------------------------------------------- /projects/adk/popover/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/popover/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of popover 3 | */ 4 | 5 | export * from './popover.service'; 6 | export * from './popover'; 7 | export * from './popover-trigger'; 8 | export * from './base-popover.service'; 9 | export * from './popover-arrow.ng'; 10 | export { tooltipPosition } from './utils'; 11 | -------------------------------------------------------------------------------- /projects/adk/portal/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/portal/portal-close.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, inject, input } from '@angular/core'; 2 | import { DialogRef } from './dialog-ref'; 3 | 4 | @Directive({ 5 | selector: '[ngbPortalClose]', 6 | host: { 7 | '(click)': 'close()', 8 | }, 9 | }) 10 | export class NgbPortalClose { 11 | readonly dialogRef = inject(DialogRef); 12 | readonly ngbPortalClose = input(); 13 | 14 | close(data = this.ngbPortalClose()) { 15 | this.dialogRef.close(data); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/adk/portal/portal.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { render, RenderResult } from '@ngbase/adk/test'; 2 | import { Portal } from './portal.component'; 3 | 4 | describe('PortalComponent', () => { 5 | let component: Portal; 6 | let view: RenderResult; 7 | 8 | beforeEach(async () => { 9 | view = await render(Portal); 10 | component = view.host; 11 | view.detectChanges(); 12 | }); 13 | 14 | it('should create', () => { 15 | expect(component).toBeTruthy(); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /projects/adk/portal/portal.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, ViewContainerRef, viewChild } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngb-portal', 5 | template: ``, 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | }) 8 | export class Portal { 9 | myDialog = viewChild('myDialog', { read: ViewContainerRef }); 10 | } 11 | -------------------------------------------------------------------------------- /projects/adk/portal/portal.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { injectService } from '@ngbase/adk/test'; 2 | import { PortalService } from './portal.service'; 3 | 4 | describe('PortalService', () => { 5 | let service: PortalService; 6 | 7 | beforeEach(() => { 8 | service = injectService(PortalService, [PortalService]); 9 | }); 10 | 11 | it('should be created', () => { 12 | expect(service).toBeTruthy(); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /projects/adk/portal/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of portal 3 | */ 4 | 5 | export * from './portal-close.directive'; 6 | export { 7 | BaseDialog, 8 | DIALOG_INJ, 9 | type DialogInput, 10 | DialogOptions, 11 | DialogRef, 12 | createInj, 13 | } from './dialog-ref'; 14 | export * from './portal-base.service'; 15 | export * from './portal.component'; 16 | export * from './portal.service'; 17 | -------------------------------------------------------------------------------- /projects/adk/progress/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/progress/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of progress 3 | */ 4 | 5 | export { NgbProgress, NgbProgressBar } from './progress'; 6 | -------------------------------------------------------------------------------- /projects/adk/radio/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/radio/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of radio 3 | */ 4 | 5 | export * from './radio'; 6 | export * from './radio-group'; 7 | -------------------------------------------------------------------------------- /projects/adk/resizable/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/resizable/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of resizable 3 | */ 4 | 5 | export * from './resizable'; 6 | export * from './resizable-group'; 7 | -------------------------------------------------------------------------------- /projects/adk/schematics/collection.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json", 3 | "schematics": { 4 | "ng-add": { 5 | "description": "Add my library to the project.", 6 | "factory": "./ng-add/index#ngAdd", 7 | "schema": "./ng-add/schema.json" 8 | }, 9 | "ui": { 10 | "description": "Add an component to the project.", 11 | "factory": "./components/index#myGenerator", 12 | "schema": "./components/schema.json" 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/accordion/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of accordion 3 | */ 4 | 5 | export * from './accordion'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/alert/alert-llm.md.template: -------------------------------------------------------------------------------- 1 | # MEE Alert 2 | 3 | ```typescript 4 | import { alertPortal } from '@/ui/alert'; 5 | ``` 6 | 7 | ## Usage 8 | 9 | ```ts 10 | const alert = alertPortal(); 11 | alert.open({ 12 | title: 'Alert', 13 | description: 'This is an alert', 14 | actions: [ 15 | { 16 | text: 'Cancel', 17 | type: 'secondary', // ButtonVariant 18 | handler: close => close(), 19 | }, 20 | { 21 | text: 'OK', 22 | type: 'primary', // ButtonVariant 23 | handler: close => { 24 | okHandler(); 25 | close(); 26 | }, 27 | }, 28 | ], 29 | }); 30 | 31 | function okHandler() { 32 | console.log('OK'); 33 | } 34 | ``` 35 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/alert/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './alert'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/autocomplete/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of autocomplete 3 | */ 4 | 5 | export * from './autocomplete'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/avatar/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './avatar'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/badge/badge-llm.md.template: -------------------------------------------------------------------------------- 1 | # MEE Badge 2 | 3 | ```typescript 4 | import { Badge } from '@/ui/badge'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `<<%= name %>-badge>, [<%= name %>Badge]` 10 | 11 | - **Inputs:** 12 | 13 | - `variant`: 'default' | 'secondary' | 'outline' | 'destructive' = 'default' - Badge variant 14 | 15 | - **Export:** `<%= name %>Badge` 16 | 17 | ## Usage 18 | 19 | ```html 20 | <<%= name %>-badge>Badge-badge> 21 | ``` 22 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/badge/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './badge'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/breadcrumb/breadcrumb-llm.md.template: -------------------------------------------------------------------------------- 1 | # MEE Breadcrumb 2 | 3 | ```typescript 4 | import { Breadcrumb, Breadcrumbs, BreadcrumbsSeparator } from '@/ui/breadcrumb'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `<<%= name %>-breadcrumbs>` 10 | 11 | ### `<<%= name %>-breadcrumb>` 12 | 13 | ### `<<%= name %>-breadcrumbs-separator>` - Optional 14 | 15 | ## Usage 16 | 17 | ```html 18 | <<%= name %>-breadcrumbs> 19 | BreadcrumbsSeparator> 20 | <<%= name %>-icon name="lucideChevronRight">-icon> 21 | 22 | 23 | Breadcrumb routerLink="/home">Home 24 | <<%= name %>-breadcrumb>Contact-breadcrumb> 25 | -breadcrumbs> 26 | ``` 27 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/breadcrumb/index.ts.template: -------------------------------------------------------------------------------- 1 | export { Breadcrumbs, BreadcrumbsSeparator, Breadcrumb } from './breadcrumb'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/button/button-llm.md.template: -------------------------------------------------------------------------------- 1 | # MEE Button 2 | 3 | ```typescript 4 | import { Button } from '@/ui/button'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `[<%= name %>Button]` 10 | 11 | - ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'icon' 12 | - **Inputs:** 13 | 14 | - `variant`: ButtonVariant = 'primary' 15 | 16 | - **Export:** `#button="<%= name %>Button"` - Template reference 17 | 18 | ## Usage 19 | 20 | ```html 21 | 22 | 25 | ``` 26 | 27 | Note: When you use icon as button, then make sure to use icon variant 28 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/button/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of button 3 | */ 4 | 5 | export * from './button'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/card/card-llm.md.template: -------------------------------------------------------------------------------- 1 | # MEE Card 2 | 3 | ```typescript 4 | import { Card } from '@/ui/card'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `<<%= name %>-card>, [<%= name %>Card]` 10 | 11 | ## Usage 12 | 13 | ```html 14 | <<%= name %>-card>Card-card> 15 |
    Card>Card
    16 | ``` 17 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/card/card.ts.template: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: '<%= name %>-card, [<%= name %>Card]', 5 | changeDetection: ChangeDetectionStrategy.OnPush, 6 | template: ``, 7 | host: { 8 | class: 'block rounded-lg border bg-card text-card-foreground p-4', 9 | }, 10 | }) 11 | export class Card {} 12 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/card/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of card 3 | */ 4 | 5 | export * from './card'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/carousel/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './carousel'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/checkbox/checkbox-llm.md.template: -------------------------------------------------------------------------------- 1 | # MEE Checkbox 2 | 3 | ```typescript 4 | import { Checkbox } from '<%= basepath %>/checkbox'; 5 | ``` 6 | 7 | ## Component 8 | 9 | ### `<<%= name %>-checkbox>` 10 | 11 | - **Inputs:** 12 | 13 | - `disabled`: boolean - Whether the checkbox is disabled 14 | - `checked`: boolean - Whether the checkbox is checked (2way) 15 | - `indeterminate`: boolean - Whether the checkbox is indeterminate 16 | 17 | - **Outputs:** 18 | 19 | - `checkedChange`: boolean - Whether the checkbox is checked 20 | - `change`: boolean - Whether the checkbox is checked 21 | 22 | ## Usage 23 | 24 | ```html 25 | <<%= name %>-checkbox [checked]="true" (checkedChange)="onChange($event)" /> 26 | <<%= name %>-checkbox [(checked)]="property" /> 27 | ``` 28 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/checkbox/focus-style.directive.ts.template: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | export const focusStyles = { 4 | within: 'focus-within:ring-[2px] focus-within:border-primary', 5 | focus: 6 | 'outline-none focus-visible:ring-[2px] ring-primary/30 ring-offset-background focus-visible:border-primary', 7 | }; 8 | 9 | @Directive({ 10 | selector: '[<%= name %>FocusStyle]', 11 | host: { 12 | class: focusStyles.focus, 13 | }, 14 | }) 15 | export class FocusStyle {} 16 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/checkbox/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of checkbox 3 | */ 4 | 5 | export * from './checkbox'; 6 | export { FocusStyle as ɵFocusStyle, focusStyles as ɵFocusStyles } from './focus-style.directive'; 7 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/chip/chip-llm.md.template: -------------------------------------------------------------------------------- 1 | # MEE Chip 2 | 3 | ```typescript 4 | import { Chip, ChipGroup } from '<%= basepath %>/chip'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `<<%= name %>-chip-group>` 10 | 11 | ### `<<%= name %>-chip>, [<%= name %>Chip]` 12 | 13 | - **Inputs:** 14 | 15 | - `removable`: boolean - Whether the chip is removable 16 | - `value`: any - The value of the chip 17 | 18 | - **Outputs:** 19 | 20 | - `close`: PointerEvent - Emits when the close button is clicked 21 | 22 | ## Usage 23 | 24 | ```html 25 | <<%= name %>-chip-group> 26 | <<%= name %>-chip [value]="item" [removable]="true">Text-chip> 27 | 28 | -chip-group> 29 | ``` 30 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/chip/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './chip'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/color-picker/color-picker-llm.md.template: -------------------------------------------------------------------------------- 1 | # MEE Color Picker 2 | 3 | ```typescript 4 | import { FormField, Label } from '@/ui/form-field'; 5 | import { ColorInput } from '@/ui/color-picker'; 6 | ``` 7 | 8 | ## Components 9 | 10 | ### `<<%= name %>-color-input>` 11 | 12 | ColorFormat: `hex` | `rgb` | `hsl` | `hsb` 13 | 14 | - **Inputs:** 15 | 16 | - `format`: ColorFormat - The format of the color input 17 | - `presetColors`: string[] - The preset colors of the color input 18 | - `value`: string - The value of the color input (2way) 19 | 20 | ## Usage 21 | 22 | ```html 23 | <<%= name %>-form-field> 24 | 25 | <<%= name %>-color-input [format]="format" [presetColors]="presetColors" [(value)]="value" /> 26 | -form-field> 27 | ``` 28 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/color-picker/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of color-picker 3 | */ 4 | 5 | export * from './color-picker'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/command/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './command'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/datepicker/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './datepicker'; 2 | export * from './time'; 3 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/dialog/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of dialog 3 | */ 4 | 5 | export * from './dialog'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/drawer/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of drawer 3 | */ 4 | 5 | export * from './drawer'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/form-field/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of input 3 | */ 4 | 5 | export * from './form-field'; 6 | export * from './input-style.directive'; 7 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/form-field/input-style.directive.ts.template: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { ɵFocusStyles as focusStyles } from '<%= basepath %>/checkbox'; 3 | 4 | @Directive({ 5 | selector: '[<%= name %>InputStyle]', 6 | host: { 7 | '[class]': 8 | "'mis inline-block rounded-lg bg-transparent px-2.5 py-2 border font-normal min-h-10 ' + focusStyles.focus + ' ' + focusStyles.within", 9 | }, 10 | }) 11 | export class InputStyle { 12 | readonly focusStyles = focusStyles; 13 | } 14 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/hover-card/hover-card-llm.md.template: -------------------------------------------------------------------------------- 1 | # Hover Card 2 | 3 | ```typescript 4 | import { HoverCard } from '@/ui/hover-card'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `<%= name %>-hover-card` 10 | 11 | - **Inputs** 12 | - `<%= name %>HoverCard`: TemplateRef - The template to show when hovering over the element 13 | - `options`: PopoverOptions - The options for the hover card 14 | - `delay`: number - The delay in milliseconds before the hover card is shown 15 | 16 | ## Usage 17 | 18 | ```html 19 | 22 | 23 | 24 |
    Hover card content
    25 |     26 | ``` 27 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/hover-card/hover-card.ts.template: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { NgbHoverCard } from '@ngbase/adk/hover-card'; 3 | 4 | @Directive({ 5 | selector: '[<%= name %>HoverCard]', 6 | hostDirectives: [ 7 | { 8 | directive: NgbHoverCard, 9 | inputs: ['ngbHoverCard: <%= name %>HoverCard', 'options', 'delay'], 10 | }, 11 | ], 12 | }) 13 | export class HoverCard {} 14 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/hover-card/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of hover-card 3 | */ 4 | 5 | export * from './hover-card'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/icon/icon-llm.md.template: -------------------------------------------------------------------------------- 1 | # Icon 2 | 3 | ```typescript 4 | import { Icon } from '@/ui/icon'; 5 | import { provideIcons } from '@ng-icons/core'; 6 | import { lucideHouse } from '@ng-icons/lucide'; 7 | ``` 8 | 9 | ## Components 10 | 11 | ### `<%= name %>-icon` 12 | 13 | - **Inputs** 14 | - `name`: string - The name of the icon to display 15 | - `size`: string - The size of the icon to display 16 | 17 | ## Usage 18 | 19 | ```typescript 20 | @Component({ 21 | standalone: true, 22 | viewProviders: [provideIcons({ lucideHouse })], 23 | imports: [Icon], 24 | template: `<<%= name %>-icon name="lucideHouse" />`, 25 | }) 26 | export class AppComponent {} 27 | ``` 28 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/icon/icon.ts.template: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, input } from '@angular/core'; 2 | import { IconType, NgIconComponent } from '@ng-icons/core'; 3 | 4 | @Component({ 5 | selector: '<%= name %>-icon', 6 | imports: [NgIconComponent], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | template: ``, 9 | host: { 10 | class: 'inline-flex items-center justify-center', 11 | }, 12 | }) 13 | export class Icon { 14 | readonly name = input.required(); 15 | readonly size = input('1rem'); 16 | } 17 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/icon/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './icon'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/inline-edit/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './inline-edit'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/inline-edit/inline-edit-llm.md.template: -------------------------------------------------------------------------------- 1 | # Inline Edit 2 | 3 | ```typescript 4 | import { InlineEdit } from '@/ui/inline-edit'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `<%= name %>-inline-edit` 10 | 11 | - **Inputs** 12 | - `value`: string - The value of the input (2way) 13 | - `editOn`: 'click' | 'dblclick' = 'dblclick' - The event to trigger the edit 14 | - **Outputs** 15 | - `valueChange`: EventEmitter - The event emitter for the value change 16 | 17 | ## Usage 18 | 19 | ```html 20 | <<%= name %>-inline-edit [value]="value" [editOn]="editOn" (valueChange)="onValueChange($event)" /> 21 | <<%= name %>-inline-edit [(value)]="value" /> 22 | ``` 23 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/inline-edit/inline-edit.ts.template: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { 3 | NgbInlineEdit, 4 | NgbInlineInput, 5 | NgbInlineValue, 6 | provideInlineEdit, 7 | } from '@ngbase/adk/inline-edit'; 8 | 9 | @Component({ 10 | selector: '<%= name %>-inline-edit', 11 | imports: [NgbInlineInput, NgbInlineValue], 12 | providers: [provideInlineEdit(), { provide: NgbInlineEdit, useExisting: InlineEdit }], 13 | template: ` 14 | @if (isEditing()) { 15 | 19 | } @else { 20 |
    {{ localValue() }}
    21 | } 22 | `, 23 | }) 24 | export class InlineEdit extends NgbInlineEdit {} 25 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/keys/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of keys 3 | */ 4 | 5 | export * from './key'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/list/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of list 3 | */ 4 | 5 | export * from './list'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/list/list-llm.md.template: -------------------------------------------------------------------------------- 1 | # List 2 | 3 | ```typescript 4 | import { List } from '@/ui/list'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `[<%= name %>List]` 10 | 11 | - **inputs** 12 | 13 | - `disabled`: boolean 14 | 15 | - **exports** - `<%= name %>List` 16 | 17 | ## Usage 18 | 19 | ```html 20 | 21 | 22 | 23 | ``` 24 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/mask/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './mask'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/mask/mask-llm.md.template: -------------------------------------------------------------------------------- 1 | # Mask 2 | 3 | ```typescript 4 | import { Mask } from '@/ui/mask'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `<%= name %>Mask` 10 | 11 | - **Inputs** 12 | - `<%= name %>Mask`: string - The mask pattern to apply to the input 13 | - `showMaskType`: boolean = false - Whether to show the mask type 14 | 15 | ## Usage 16 | 17 | ```html 18 | <<%= name %>-mask [<%= name %>Mask]="'(000) 000-0000'" [showMaskType]="showMaskType" /> 19 | ``` 20 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/mask/mask.ts.template: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { Mask } from '@ngbase/adk/mask'; 3 | 4 | @Directive({ 5 | selector: '[<%= name %>Mask]', 6 | hostDirectives: [{ directive: Mask, inputs: ['ngbMask: <%= name %>Mask', 'showMaskType'] }], 7 | }) 8 | export class MaskInput {} 9 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/menu/context-menu-llm.md.template: -------------------------------------------------------------------------------- 1 | # Menu 2 | 3 | ```typescript 4 | import { Menu, MenuTrigger, MenuContent } from '@/ui/menu'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `[<%= name %>ContextMenu]` 10 | 11 | - **Inputs** 12 | - `<%= name %>ContextMenu`: Menu - Menu reference 13 | - **Outputs** 14 | - `ctxOpen`: EventEmitter - Emits when the context menu is opened 15 | - `ctxClose`: EventEmitter - Emits when the context menu is closed 16 | - **Exports** - `<%= name %>ContextMenu` 17 | 18 | ## Usage 19 | 20 | ```html 21 | 22 | <<%= name %>-menu #menu> 23 | 24 | 25 | -menu> 26 | ``` 27 | 28 | ## Context Menu 29 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/menu/context-menu.ts.template: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { NgbContextMenu } from '@ngbase/adk/menu'; 3 | 4 | @Directive({ 5 | selector: '[<%= name %>ContextMenu]', 6 | hostDirectives: [ 7 | { 8 | directive: NgbContextMenu, 9 | inputs: ['ngbContextMenu: <%= name %>ContextMenu'], 10 | outputs: ['ctxOpen', 'ctxClose'], 11 | }, 12 | ], 13 | }) 14 | export class ContextMenu {} 15 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/menu/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of menu 3 | */ 4 | 5 | export * from './menu'; 6 | export * from './context-menu'; 7 | export * from './navigation-menu'; 8 | export * from './mention'; 9 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/menu/mention.ts.template: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { NgbMentionTrigger } from '@ngbase/adk/menu'; 3 | 4 | @Directive({ 5 | selector: '[<%= name %>MentionTrigger]', 6 | hostDirectives: [ 7 | { 8 | directive: NgbMentionTrigger, 9 | inputs: ['ngbMentionTrigger: <%= name %>MentionTrigger', 'key', 'options'], 10 | outputs: ['search'], 11 | }, 12 | ], 13 | }) 14 | export class MentionTrigger {} 15 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/menu/navigation-menu.ts.template: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { NgbNavigationMenu } from '@ngbase/adk/menu'; 3 | 4 | @Directive({ 5 | selector: '[<%= name %>NavigationMenu]', 6 | hostDirectives: [{ directive: NgbNavigationMenu, inputs: ['hover'] }], 7 | }) 8 | export class NavigationMenu {} 9 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/otp/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of input 3 | */ 4 | 5 | export * from './otp'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/otp/otp-llm.md.template: -------------------------------------------------------------------------------- 1 | # OTP 2 | 3 | ```typescript 4 | import { Otp } from '@/ui/otp'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `<%= name %>-otp-input` 10 | 11 | - **Inputs** 12 | - `size`: number[] - The size of the OTP input 13 | - `masked`: boolean - Whether the OTP input is masked 14 | - `disabled`: boolean - Whether the OTP input is disabled 15 | - **Exports** - `<%= name %>OtpInput` 16 | 17 | ## Usage 18 | 19 | ```html 20 | <<%= name %>-otp-input [size]="[4, 4, 4]" [masked]="true" [disabled]="false">-otp-input> 21 | ``` 22 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/pagination/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './pagination'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/pagination/pagination-llm.md.template: -------------------------------------------------------------------------------- 1 | # Pagination 2 | 3 | ```typescript 4 | import { Pagination } from '@/ui/pagination'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `<%= name %>-pagination` 10 | 11 | - **Inputs** 12 | - `size`: number - The size of the pagination (2way) 13 | - `active`: number - The active page (2way) 14 | - `total`: number - The total number of pages 15 | - `sizeOptions`: number[] - The options for the size of the pagination 16 | - **Outputs** 17 | - `valueChanged`: EventEmitter - Emits when the value changes 18 | - **Exports** - `<%= name %>Pagination` 19 | 20 | ## Usage 21 | 22 | ```html 23 | <<%= name %>-pagination 24 | [size]="10" 25 | [active]="1" 26 | [total]="100" 27 | [sizeOptions]="[10, 20, 50, 100]" 28 | >-pagination> 29 | ``` 30 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/picasa/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './picasa.directive'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/picasa/picase.service.ts.template: -------------------------------------------------------------------------------- 1 | import { basePortal, DialogInput, DialogOptions } from '@ngbase/adk/portal'; 2 | import { PicasaBase } from './picasa-base.component'; 3 | 4 | export function picasaPortal() { 5 | const NAME = 'picasa'; 6 | const base = basePortal(NAME, PicasaBase); 7 | 8 | function open(component: DialogInput, opt?: DialogOptions) { 9 | const { diaRef } = base.open( 10 | component, 11 | (comp, options) => { 12 | comp.instance.setOptions(options); 13 | }, 14 | opt, 15 | ); 16 | 17 | return diaRef; 18 | } 19 | 20 | function closeAll() { 21 | base.closeAll(); 22 | } 23 | return { open, closeAll }; 24 | } 25 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/popover/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './popover'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/progress/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of progress 3 | */ 4 | 5 | export * from './progress'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/progress/progress-llm.md.template: -------------------------------------------------------------------------------- 1 | # Progress 2 | 3 | ```typescript 4 | import { Progress } from '@/ui/progress'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `<%= name %>-progress` 10 | 11 | - **Inputs** 12 | - `value`: number - The value of the progress 13 | - **Exports** - `<%= name %>Progress` 14 | 15 | ## Usage 16 | 17 | ```html 18 | <<%= name %>-progress [value]="progress">-progress> 19 | ``` 20 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/progress/progress.ts.template: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { NgbProgress, NgbProgressBar } from '@ngbase/adk/progress'; 3 | 4 | @Component({ 5 | selector: '<%= name %>-progress', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | hostDirectives: [{ directive: NgbProgress, inputs: ['value'] }], 8 | imports: [NgbProgressBar], 9 | template: `
    `, 10 | host: { 11 | class: 'block h-2 my-1 bg-muted rounded-full', 12 | }, 13 | }) 14 | export class Progress {} 15 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/radio/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of radio 3 | */ 4 | 5 | export * from './radio'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/resizable/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of resizable 3 | */ 4 | 5 | export * from './resizable'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/scroll-area/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './scroll-area'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/select/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of select 3 | */ 4 | 5 | export * from './select'; 6 | export * from './option'; 7 | export * from './select-input'; 8 | export * from './list-selection'; 9 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/select/list-selection.ts.template: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { provideValueAccessor } from '@ngbase/adk/utils'; 3 | import { SelectBase } from '@ngbase/adk/select'; 4 | 5 | @Component({ 6 | selector: '<%= name %>-list-selection', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | template: ``, 9 | providers: [provideValueAccessor(ListSelection)], 10 | }) 11 | export class ListSelection extends SelectBase { 12 | constructor() { 13 | super(true); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/select/select-input.ts.template: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { NgbSelectInput, NgbSelectTrigger } from '@ngbase/adk/select'; 3 | import { InputStyle } from '<%= basepath %>/form-field'; 4 | 5 | @Directive({ 6 | selector: '[<%= name %>SelectInput]', 7 | hostDirectives: [ 8 | { directive: NgbSelectInput, inputs: ['placeholder', 'options', 'filterFn'] }, 9 | InputStyle, 10 | ], 11 | host: { 12 | class: 'w-full !m-0 mb-1 !ring-0 !border-0 !border-b rounded-none px-3 z-10', 13 | }, 14 | }) 15 | export class SelectInput {} 16 | 17 | @Directive({ 18 | selector: '[<%= name %>SelectTrigger]', 19 | hostDirectives: [NgbSelectTrigger], 20 | }) 21 | export class SelectTrigger {} 22 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/selectable/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './selectable'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/separator/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of separator 3 | */ 4 | 5 | export * from './separator'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/separator/separator.ts.template: -------------------------------------------------------------------------------- 1 | import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: '<%= name %>-separator', 5 | changeDetection: ChangeDetectionStrategy.OnPush, 6 | template: ``, 7 | host: { 8 | class: 'bg-border block flex-none', 9 | '[class]': `vertical() ? 'w-[1px]' : 'h-[1px] w-full'`, 10 | // '[class.my-1]': `menu`, 11 | }, 12 | }) 13 | export class Separator { 14 | vertical = input(false, { transform: booleanAttribute }); 15 | 16 | constructor() { 17 | // console.log('Separator', this.menu); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/sheet/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of sheet 3 | */ 4 | 5 | export * from './sheet'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/sidenav/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './sidenav'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/skeleton/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './skeleton'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/skeleton/skeleton-llm.md.template: -------------------------------------------------------------------------------- 1 | # Skeleton 2 | 3 | ```typescript 4 | import { Skeleton } from '@/ui/skeleton'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `<%= name %>-skeleton` 10 | 11 | - **Inputs** 12 | - `width`: string - The width of the skeleton 13 | - `height`: string - The height of the skeleton 14 | - `shape`: 'circle' | 'rectangle' - The shape of the skeleton 15 | - **Export** - `<%= name %>Skeleton` - Template reference 16 | 17 | ## Usage 18 | 19 | ```html 20 | <<%= name %>-skeleton width="10px" height="10px" shape="circle">-skeleton> 21 | <<%= name %>-skeleton width="25px" height="10px" shape="rectangle">-skeleton> 22 | ``` 23 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/skeleton/skeleton.ts.template: -------------------------------------------------------------------------------- 1 | import { Component, input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: '<%= name %>-skeleton', 5 | template: ``, 6 | host: { 7 | class: 'block animate-pulse bg-muted', 8 | '[class]': `shape() === 'circle' ? 'rounded-full' : 'rounded-md'`, 9 | }, 10 | }) 11 | export class Skeleton { 12 | readonly shape = input<'circle' | 'rectangle'>('rectangle'); 13 | readonly width = input('100%'); 14 | readonly height = input('20px'); 15 | } 16 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/slider/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of slider 3 | */ 4 | 5 | export * from './slider'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/sonner/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of sonner 3 | */ 4 | 5 | export { sonnerPortal } from './sonner'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/spinner/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './spinner'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/spinner/spinner-llm.md.template: -------------------------------------------------------------------------------- 1 | # Spinner 2 | 3 | ```typescript 4 | import { Spinner } from '@/ui/spinner'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `<%= name %>-spinner` 10 | 11 | - **Inputs** 12 | - `size`: 'small' | 'medium' | 'large' = 'medium' - The size of the spinner 13 | - `mode`: 'light' | 'dark' | '' = 'light' - The mode of the spinner 14 | - `diameter`: number = 35 - The diameter of the spinner 15 | - `strokeWidth`: number = 3 - The stroke width of the spinner 16 | - `root`: boolean = false - Whether the spinner is the root spinner 17 | - **Export** - `<%= name %>Spinner` - Template reference 18 | 19 | ## Usage 20 | 21 | ```html 22 | <<%= name %>-spinner 23 | [size]="size()" 24 | [mode]="mode()" 25 | [diameter]="diameter()" 26 | [strokeWidth]="strokeWidth()" 27 | [root]="root()" 28 | >-spinner> 29 | ``` 30 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/stepper/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './stepper'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/switch/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of switch 3 | */ 4 | 5 | export * from './switch'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/switch/switch-llm.md.template: -------------------------------------------------------------------------------- 1 | # Switch 2 | 3 | ```typescript 4 | import { Switch } from '@/ui/switch'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `<%= name %>-switch` 10 | 11 | - **Inputs** 12 | - `checked`: boolean = false - Whether the switch is checked (2way) 13 | - `disabled`: boolean = false - Whether the switch is disabled 14 | - **Outputs** 15 | - `checkedChange`: EventEmitter - Emits the checked value when it changes 16 | - `change`: EventEmitter - Emits the checked value when it changes 17 | - **Export** - `<%= name %>Switch` - Template reference 18 | 19 | ## Usage 20 | 21 | ```html 22 | <<%= name %>-switch [(checked)]="checked" [disabled]="disabled()">-switch> 23 | ``` 24 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/table/index.ts.template: -------------------------------------------------------------------------------- 1 | import { 2 | BodyRow, 3 | BodyRowDef, 4 | Cell, 5 | CellDef, 6 | Column, 7 | HeadDef, 8 | Head, 9 | Table, 10 | HeadRow, 11 | HeadRowDef, 12 | } from './table'; 13 | 14 | export * from './table'; 15 | 16 | export const TableComponents = [ 17 | BodyRow, 18 | BodyRowDef, 19 | Cell, 20 | CellDef, 21 | Head, 22 | HeadDef, 23 | HeadRow, 24 | HeadRowDef, 25 | Column, 26 | Table, 27 | ]; 28 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/tabs/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of tab 3 | */ 4 | 5 | export * from './tab'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/theme/index.ts.template: -------------------------------------------------------------------------------- 1 | export { injectTheme } from './theme.service'; 2 | export { ThemeButton } from './theme-button'; 3 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/theme/theme-llm.md.template: -------------------------------------------------------------------------------- 1 | # Theme 2 | 3 | ```typescript 4 | import { ThemeButton, injectTheme } from '@/ui/theme'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### ThemeButton 10 | 11 | ```html 12 | <<%= name %>-theme-button /> 13 | ``` 14 | 15 | ## Usage 16 | 17 | ```typescript 18 | const theme = injectTheme(); 19 | 20 | theme.toggle(); 21 | theme.mode(); // 'light' | 'dark' | '' 22 | theme.mode.set('light'); 23 | ``` 24 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/toggle-group/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of toggle-group 3 | */ 4 | 5 | export * from './toggle-group'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/toggle-group/toggle-group-llm.md.template: -------------------------------------------------------------------------------- 1 | # Toggle 2 | 3 | ```typescript 4 | import { ToggleGroup, ToggleItem } from '@/ui/toggle-group'; 5 | ``` 6 | 7 | ### `<%= name %>-toggle-group` 8 | 9 | - **inputs** 10 | 11 | - `value`: boolean (2way) 12 | - `multiple`: boolean 13 | 14 | - **exports** - `<%= name %>ToggleGroup` 15 | 16 | ### `<%= name %>-toggle-item` 17 | 18 | - **inputs** 19 | 20 | - `value`: boolean 21 | - `disabled`: boolean 22 | 23 | - **exports** - `<%= name %>ToggleItem` 24 | 25 | ## Usage 26 | 27 | ```html 28 | <<%= name %>-toggle-group [(value)]="value" [multiple]="multiple"> 29 | 30 | 31 | -toggle-group> 32 | ``` 33 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/toggle/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of toggle 3 | */ 4 | 5 | export * from './toggle'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/toggle/toggle-llm.md.template: -------------------------------------------------------------------------------- 1 | # Toggle 2 | 3 | ```typescript 4 | import { Toggle } from '@/ui/toggle'; 5 | ``` 6 | 7 | ### `<%= name %>-toggle` 8 | 9 | - **inputs** 10 | 11 | - `value`: boolean (2way) 12 | 13 | - **exports** - `<%= name %>Toggle` 14 | 15 | ## Usage 16 | 17 | ```html 18 | <<%= name %>-toggle [(value)]="value" /> 19 | ``` 20 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/toggle/toggle.ts.template: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { NgbToggle } from '@ngbase/adk/toggle'; 3 | 4 | @Component({ 5 | selector: 'button[<%= name %>Toggle]', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | hostDirectives: [{ directive: NgbToggle, inputs: ['value'], outputs: ['valueChange'] }], 8 | template: ``, 9 | host: { 10 | class: 'block w-9 h-9 rounded relative aria-[pressed=true]:bg-foreground', 11 | }, 12 | }) 13 | export class Toggle {} 14 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/tooltip/index.ts.template: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of tooltip 3 | */ 4 | 5 | export { provideTooltipOptions, Tooltip } from './tooltip'; 6 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/tooltip/tooltip-llm.md.template: -------------------------------------------------------------------------------- 1 | # Tooltip 2 | 3 | ```typescript 4 | import { Tooltip } from '@/ui/tooltip'; 5 | ``` 6 | 7 | ## Components 8 | 9 | PopoverPosition = 10 | | 'top' 11 | | 'bottom' 12 | | 'left' 13 | | 'right' 14 | | 'rs' 15 | | 're' 16 | | 'ls' 17 | | 'le' 18 | | 'tl' 19 | | 'tr' 20 | | 'bl' 21 | | 'br'; 22 | 23 | ### `<%= name %>-tooltip` 24 | 25 | - **inputs** 26 | 27 | - `<%= name %>Tooltip`: string 28 | - `<%= name %>TooltipPosition`: PopoverPosition 29 | - `delay`: number 30 | 31 | - **exports** - `<%= name %>Tooltip` 32 | 33 | ## Usage 34 | 35 | ```html 36 | <<%= name %>-tooltip <%= name %>Tooltip="Tooltip content" [delay]="100" /> 37 | ``` 38 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/tour/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './tour'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/tour/tour.ts.template: -------------------------------------------------------------------------------- 1 | import { Directive, inject, InjectionToken } from '@angular/core'; 2 | import { NgbTour, NgbTourService, NgbTourStep } from '@ngbase/adk/tour'; 3 | 4 | export const TourService = new InjectionToken('TourService', { 5 | providedIn: 'root', 6 | factory: () => inject(NgbTourService), 7 | }); 8 | 9 | @Directive({ 10 | selector: '[<%= name %>Tour]', 11 | hostDirectives: [NgbTour], 12 | }) 13 | export class Tour {} 14 | 15 | @Directive({ 16 | selector: '[<%= name %>TourStep]', 17 | hostDirectives: [{ directive: NgbTourStep, inputs: ['ngbTourStep: <%= name %>TourStep'] }], 18 | }) 19 | export class TourStep {} 20 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/files/tree/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './tree'; 2 | -------------------------------------------------------------------------------- /projects/adk/schematics/components/schema.ts: -------------------------------------------------------------------------------- 1 | export interface MyGeneratorSchema { 2 | name: string; 3 | path?: string; 4 | project?: string; 5 | component: string[]; 6 | } 7 | -------------------------------------------------------------------------------- /projects/adk/scroll-area/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/scroll-area/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './scroll-area'; 2 | -------------------------------------------------------------------------------- /projects/adk/select/list-selection.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { provideValueAccessor } from '@ngbase/adk/utils'; 3 | import { SelectBase } from './select-base'; 4 | 5 | @Directive({ 6 | selector: '[ngbListSelection]', 7 | providers: [provideValueAccessor(ListSelection)], 8 | }) 9 | export class ListSelection extends SelectBase { 10 | constructor() { 11 | super(true); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /projects/adk/select/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/select/option-group.ts: -------------------------------------------------------------------------------- 1 | import { Directive, input } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[ngbOptionGroup]', 5 | }) 6 | export class NgbOptionGroup { 7 | readonly label = input.required(); 8 | readonly disabled = input(false); 9 | } 10 | -------------------------------------------------------------------------------- /projects/adk/select/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of select 3 | */ 4 | 5 | export * from './select'; 6 | export * from './option'; 7 | export * from './option-group'; 8 | export * from './select-input'; 9 | export * from './list-selection'; 10 | export * from './select-base'; 11 | -------------------------------------------------------------------------------- /projects/adk/selectable/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/selectable/public-api.ts: -------------------------------------------------------------------------------- 1 | export { NgbSelectable } from './selectable'; 2 | export { NgbSelectableItem } from './selectable-item'; 3 | -------------------------------------------------------------------------------- /projects/adk/selectable/selectable-item.ts: -------------------------------------------------------------------------------- 1 | import { Directive, computed, inject, input } from '@angular/core'; 2 | import { AccessibleItem } from '@ngbase/adk/a11y'; 3 | import { NgbSelectable } from './selectable'; 4 | 5 | @Directive({ 6 | selector: '[ngbSelectableItem]', 7 | host: { 8 | role: 'tab', 9 | '(click)': 'select()', 10 | '[attr.aria-selected]': 'selected()', 11 | }, 12 | hostDirectives: [AccessibleItem], 13 | }) 14 | export class NgbSelectableItem { 15 | readonly selectable: NgbSelectable = inject(NgbSelectable); 16 | readonly value = input.required(); 17 | 18 | readonly selected = computed(() => this.value() === this.selectable.activeIndex()); 19 | 20 | constructor() { 21 | inject(AccessibleItem)._ayId.set(this.selectable.ayId); 22 | } 23 | 24 | select() { 25 | this.selectable.setValue(this.value()!); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /projects/adk/sheet/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/sheet/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of sheet 3 | */ 4 | 5 | export * from './sheet.service'; 6 | export * from './sheet'; 7 | -------------------------------------------------------------------------------- /projects/adk/sidenav/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/sidenav/public-api.ts: -------------------------------------------------------------------------------- 1 | export { NgbSidenav, NgbSidenavOverlay, aliasSidenav } from './sidenav'; 2 | export { 3 | NgbSidenavHeader, 4 | NgbSidenavHeaderContent, 5 | NgbSidenavHeaderTrack, 6 | slideAnimation, 7 | } from './sidenav-header'; 8 | export { type SidenavType } from './sidenav.service'; 9 | -------------------------------------------------------------------------------- /projects/adk/slider/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/slider/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of slider 3 | */ 4 | 5 | export { NgbSlider, SliderTrack, SliderRange, SliderThumb, aliasSlider } from './slider'; 6 | -------------------------------------------------------------------------------- /projects/adk/sonner/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/sonner/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of sonner 3 | */ 4 | 5 | export * from './sonner.service'; 6 | export * from './sonner'; 7 | -------------------------------------------------------------------------------- /projects/adk/src/public-api.ts: -------------------------------------------------------------------------------- 1 | export default {}; 2 | -------------------------------------------------------------------------------- /projects/adk/stepper/animation.ts: -------------------------------------------------------------------------------- 1 | import { trigger, state, style, transition, animate } from '@angular/animations'; 2 | 3 | export const stepperAnimation = trigger('slide', [ 4 | state('void', style({ height: '0', overflow: 'hidden' })), 5 | state('*', style({ height: '*' })), 6 | transition('void => *', animate('200ms ease')), 7 | transition('* => void', animate('200ms ease')), 8 | ]); 9 | -------------------------------------------------------------------------------- /projects/adk/stepper/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/stepper/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './stepper'; 2 | export * from './step'; 3 | export * from './animation'; 4 | -------------------------------------------------------------------------------- /projects/adk/switch/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/switch/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of switch 3 | */ 4 | 5 | export * from './switch'; 6 | -------------------------------------------------------------------------------- /projects/adk/table/body-cell.ts: -------------------------------------------------------------------------------- 1 | import { Directive, inject } from '@angular/core'; 2 | import { NgbColumn } from './column'; 3 | 4 | @Directive({ 5 | selector: '[ngbCell]', 6 | host: { 7 | '[class]': `column.sticky() === 'start' ? 'sticky left-0 border-r z-10' : column.sticky() === 'end' ? 'sticky right-0 border-l z-10' : ''`, 8 | }, 9 | }) 10 | export class NgbCell { 11 | readonly column = inject(NgbColumn); 12 | } 13 | 14 | @Directive({ 15 | selector: '[ngbCellDef]', 16 | }) 17 | export class NgbCellDef {} 18 | -------------------------------------------------------------------------------- /projects/adk/table/column.ts: -------------------------------------------------------------------------------- 1 | import { Directive, input, contentChild, TemplateRef } from '@angular/core'; 2 | import { NgbCellDef } from './body-cell'; 3 | import { NgbHeadDef } from './head-cell'; 4 | 5 | @Directive({ 6 | selector: '[ngbColumn]', 7 | }) 8 | export class NgbColumn { 9 | readonly ngbColumn = input.required(); 10 | readonly sticky = input<'start' | 'end' | ''>(''); 11 | readonly cells = contentChild(NgbCellDef, { read: TemplateRef }); 12 | readonly heads = contentChild(NgbHeadDef, { read: TemplateRef }); 13 | } 14 | -------------------------------------------------------------------------------- /projects/adk/table/head-cell.ts: -------------------------------------------------------------------------------- 1 | import { Directive, inject } from '@angular/core'; 2 | import { NgbColumn } from './column'; 3 | 4 | @Directive({ 5 | selector: '[ngbHead]', 6 | host: { 7 | '[attr.data-sticky]': 'column.sticky() || undefined', 8 | }, 9 | }) 10 | export class NgbHead { 11 | readonly column = inject(NgbColumn); 12 | readonly sticky = this.column.sticky; 13 | } 14 | 15 | @Directive({ 16 | selector: '[ngbHeadDef]', 17 | }) 18 | export class NgbHeadDef {} 19 | -------------------------------------------------------------------------------- /projects/adk/table/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/table/public-api.ts: -------------------------------------------------------------------------------- 1 | import { NgbCell, NgbCellDef } from './body-cell'; 2 | import { NgbBodyRow, NgbBodyRowDef, aliasBodyRow } from './body-row'; 3 | import { NgbColumn } from './column'; 4 | import { NgbHead, NgbHeadDef } from './head-cell'; 5 | import { NgbHeadRow, NgbHeadRowDef, aliasHeadRow } from './head-row'; 6 | import { aliasSort, aliasSortHeader, NgbSort, NgbSortHeader } from './sort'; 7 | import { NgbTable, aliasTable } from './table'; 8 | 9 | export { 10 | NgbBodyRow, 11 | NgbBodyRowDef, 12 | NgbCell, 13 | NgbCellDef, 14 | NgbColumn, 15 | NgbHead, 16 | NgbHeadDef, 17 | NgbHeadRow, 18 | NgbHeadRowDef, 19 | NgbSort, 20 | NgbSortHeader, 21 | NgbTable, 22 | aliasBodyRow, 23 | aliasHeadRow, 24 | aliasSort, 25 | aliasSortHeader, 26 | aliasTable, 27 | }; 28 | -------------------------------------------------------------------------------- /projects/adk/tabs/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/tabs/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of tab 3 | */ 4 | 5 | export * from './tab'; 6 | export * from './tab-group'; 7 | -------------------------------------------------------------------------------- /projects/adk/test/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/test/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './utils'; 2 | -------------------------------------------------------------------------------- /projects/adk/toggle-group/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/toggle-group/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of toggle-group 3 | */ 4 | 5 | export * from './toggle-group'; 6 | export * from './toggle-item'; 7 | -------------------------------------------------------------------------------- /projects/adk/toggle/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/toggle/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of toggle 3 | */ 4 | 5 | export * from './toggle'; 6 | -------------------------------------------------------------------------------- /projects/adk/toggle/toggle.spec.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { render, RenderResult } from '@ngbase/adk/test'; 3 | import { NgbToggle } from './toggle'; 4 | 5 | @Component({ 6 | imports: [NgbToggle], 7 | template: ``, 8 | }) 9 | class TestComponent {} 10 | 11 | describe('ToggleComponent', () => { 12 | let component: NgbToggle; 13 | let view: RenderResult; 14 | 15 | beforeEach(async () => { 16 | view = await render(TestComponent); 17 | component = view.viewChild(NgbToggle); 18 | view.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /projects/adk/tooltip/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "./public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/tooltip/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of tooltip 3 | */ 4 | 5 | export { NgbTooltipTemplate, tooltipAnimation } from './tooltip'; 6 | export { NgbTooltip, provideNgbTooltipOptions, type TooltipOptions } from './tooltip.directive'; 7 | -------------------------------------------------------------------------------- /projects/adk/tour/animation.ts: -------------------------------------------------------------------------------- 1 | import { trigger, state, style, transition, animate } from '@angular/animations'; 2 | import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils'; 3 | 4 | export const slideInOutAnimation = trigger('slideInOutAnimation', [ 5 | state('1', style({ transform: 'none', opacity: 1 })), 6 | state('void', style({ transform: 'translateY(-20px)', opacity: 0 })), 7 | state('0', style({ transform: 'translateY(-20px)', opacity: 0 })), 8 | transition('* => *', animate('100ms ease-out')), 9 | ]); 10 | 11 | export const tourAnimation = [ 12 | createHostAnimation(['@slideInOutAnimation', '@fadeAnimation']), 13 | slideInOutAnimation, 14 | fadeAnimation('200ms'), 15 | ]; 16 | -------------------------------------------------------------------------------- /projects/adk/tour/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/tour/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './tour-step'; 2 | export * from './tour'; 3 | export * from './tour.service'; 4 | export * from './tour-base'; 5 | export * from './animation'; 6 | -------------------------------------------------------------------------------- /projects/adk/tour/tour-step.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, inject, input } from '@angular/core'; 2 | import { NgbTourService } from './tour.service'; 3 | 4 | @Directive({ 5 | selector: '[ngbTourStep]', 6 | }) 7 | export class NgbTourStep { 8 | readonly el = inject(ElementRef); 9 | readonly tourService = inject(NgbTourService); 10 | 11 | // Inputs 12 | readonly ngbTourStep = input.required(); 13 | 14 | constructor() { 15 | this.tourService.addStep(this); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/adk/tour/tour.ts: -------------------------------------------------------------------------------- 1 | import { inject, contentChildren, Directive } from '@angular/core'; 2 | import { NgbTourService } from './tour.service'; 3 | import { NgbTourStep } from './tour-step'; 4 | 5 | @Directive({ 6 | selector: '[ngbTour]', 7 | }) 8 | export class NgbTour { 9 | readonly tourService = inject(NgbTourService); 10 | readonly steps = contentChildren(NgbTourStep, { descendants: true }); 11 | } 12 | -------------------------------------------------------------------------------- /projects/adk/translate/config.spec.ts: -------------------------------------------------------------------------------- 1 | import { interpolate } from './config'; 2 | 3 | describe('interpolate', () => { 4 | it('should interpolate the key with the params', () => { 5 | expect(interpolate('Hello {{ name }}', { name: 'John' })).toBe('Hello John'); 6 | expect(interpolate('Hello {{name}}', { name: 'John' })).toBe('Hello John'); 7 | expect(interpolate('Hello {{ name }}', {})).toBe('Hello {{ name }}'); 8 | expect(interpolate(undefined as any, { name: 'John' })).toBe(undefined); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /projects/adk/translate/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/translate/public-api.ts: -------------------------------------------------------------------------------- 1 | export { Translate, translate } from './translate'; 2 | export { type TranslateConfig, provideTranslate } from './config'; 3 | export { injectTranslate } from './translate.service'; 4 | -------------------------------------------------------------------------------- /projects/adk/tree/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/tree/public-api.ts: -------------------------------------------------------------------------------- 1 | export { NgbTree, aliasTree } from './tree'; 2 | export { NgbTreeNode, aliasTreeNode } from './tree-node'; 3 | export { NgbTreeNodeToggle, NgbTreeNodeDef, NgbTreeNodeContent } from './tree-toggle'; 4 | -------------------------------------------------------------------------------- /projects/adk/tree/tree-toggle.ts: -------------------------------------------------------------------------------- 1 | import { Directive, inject } from '@angular/core'; 2 | import { NgbTreeNode } from './tree-node'; 3 | 4 | @Directive({ 5 | selector: '[ngbTreeNodeToggle]', 6 | host: { 7 | '(click)': 'toggle()', 8 | '[attr.aria-hidden]': '!treeNode.hasChildren()', 9 | tabIndex: '-1', 10 | }, 11 | }) 12 | export class NgbTreeNodeToggle { 13 | treeNode = inject(NgbTreeNode); 14 | 15 | toggle() { 16 | if (this.treeNode.hasChildren()) { 17 | this.treeNode.toggle(); 18 | } 19 | } 20 | } 21 | 22 | @Directive({ 23 | selector: '[ngbTreeNodeDef]', 24 | }) 25 | export class NgbTreeNodeDef {} 26 | 27 | @Directive({ 28 | selector: '[ngbTreeNodeContent]', 29 | }) 30 | export class NgbTreeNodeContent {} 31 | -------------------------------------------------------------------------------- /projects/adk/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "../../tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "../../out-tsc/lib", 7 | "declaration": true, 8 | "declarationMap": true, 9 | "inlineSources": true, 10 | "types": [] 11 | }, 12 | "exclude": [ 13 | "**/*.spec.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /projects/adk/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.lib.json", 5 | "compilerOptions": { 6 | "declarationMap": false 7 | }, 8 | "angularCompilerOptions": { 9 | "compilationMode": "partial" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/adk/tsconfig.schematics.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "lib": ["es2018", "dom"], 5 | "declaration": true, 6 | "module": "commonjs", 7 | "moduleResolution": "node", 8 | "noEmitOnError": true, 9 | "noFallthroughCasesInSwitch": true, 10 | "noImplicitAny": true, 11 | "noImplicitThis": true, 12 | "noUnusedParameters": true, 13 | "noUnusedLocals": true, 14 | "rootDir": "schematics/", 15 | "outDir": "../../dist/adk/schematics", 16 | "skipDefaultLibCheck": true, 17 | "skipLibCheck": true, 18 | "sourceMap": true, 19 | "strictNullChecks": true, 20 | "target": "es6", 21 | "types": ["node"] 22 | }, 23 | "include": ["schematics/**/*"], 24 | "exclude": ["schematics/*/files/**/*"] 25 | } 26 | -------------------------------------------------------------------------------- /projects/adk/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "../../tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "../../out-tsc/spec", 7 | "types": [ 8 | "jasmine" 9 | ] 10 | }, 11 | "include": [ 12 | "**/*.spec.ts", 13 | "**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /projects/adk/utils/disposals.ts: -------------------------------------------------------------------------------- 1 | import { afterNextRender, DestroyRef, inject, Injector } from '@angular/core'; 2 | 3 | type Cleanup = () => void; 4 | type CleanupRegisterFn = (fn: Cleanup) => void; 5 | 6 | export function disposals() { 7 | const injector = inject(Injector); 8 | const destroyRef = inject(DestroyRef); 9 | return { 10 | afterNextRender: (fn: (cleanup: CleanupRegisterFn) => void) => { 11 | const cleanup: Cleanup[] = []; 12 | const register = (fn: Cleanup) => cleanup.push(fn); 13 | const runCleanup = () => cleanup.forEach(c => c()); 14 | afterNextRender( 15 | () => { 16 | runCleanup(); 17 | fn(register); 18 | }, 19 | { injector }, 20 | ); 21 | return destroyRef.onDestroy(() => runCleanup()); 22 | }, 23 | }; 24 | } 25 | 26 | export function cleanup(fn: () => void) { 27 | inject(DestroyRef).onDestroy(fn); 28 | } 29 | -------------------------------------------------------------------------------- /projects/adk/utils/dom-observer.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Observable } from 'rxjs'; 3 | 4 | @Injectable({ 5 | providedIn: 'root', 6 | }) 7 | export class DomObserverService { 8 | private observer?: MutationObserver; 9 | 10 | observeElement( 11 | targetNode: Node, 12 | config: MutationObserverInit = { childList: true, subtree: true }, 13 | ): Observable { 14 | return new Observable(observer => { 15 | this.observer = new MutationObserver(mutations => { 16 | observer.next(mutations); 17 | }); 18 | 19 | this.observer.observe(targetNode, config); 20 | 21 | return () => { 22 | this.observer?.disconnect(); 23 | }; 24 | }); 25 | } 26 | 27 | isElementPresent(selector: string): boolean { 28 | return !!document.querySelector(selector); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /projects/adk/utils/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/utils/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './range.pipe'; 2 | export * from './utils'; 3 | 4 | export * from './disposals'; 5 | export * from './ssr'; 6 | export * from './animation'; 7 | export * from './number-only'; 8 | -------------------------------------------------------------------------------- /projects/adk/utils/range.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'range', 5 | }) 6 | export class RangePipe implements PipeTransform { 7 | transform(value: number) { 8 | return Array.from({ length: value }, (v, k) => k + 1); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /projects/adk/utils/ssr.ts: -------------------------------------------------------------------------------- 1 | import { isPlatformBrowser, isPlatformServer } from '@angular/common'; 2 | import { inject, PLATFORM_ID } from '@angular/core'; 3 | 4 | export function isServer() { 5 | return isPlatformServer(inject(PLATFORM_ID)); 6 | } 7 | 8 | export function isClient() { 9 | return isPlatformBrowser(inject(PLATFORM_ID)); 10 | } 11 | -------------------------------------------------------------------------------- /projects/adk/virtualizer/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /projects/adk/virtualizer/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/adk/virtualizer/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './virtualizer'; 2 | -------------------------------------------------------------------------------- /projects/docs/public/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-base/ngbase/8e73ff3df7867c087907e774a7af43214fab7dd8/projects/docs/public/.gitkeep -------------------------------------------------------------------------------- /projects/docs/public/GeistVF.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-base/ngbase/8e73ff3df7867c087907e774a7af43214fab7dd8/projects/docs/public/GeistVF.woff2 -------------------------------------------------------------------------------- /projects/docs/public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /projects/docs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-base/ngbase/8e73ff3df7867c087907e774a7af43214fab7dd8/projects/docs/public/favicon.ico -------------------------------------------------------------------------------- /projects/docs/public/i18n/ar.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "مرحبًا {{ value }}" 3 | } 4 | -------------------------------------------------------------------------------- /projects/docs/public/i18n/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Hello {{ value }}" 3 | } 4 | -------------------------------------------------------------------------------- /projects/docs/public/i18n/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Hello fr" 3 | } 4 | -------------------------------------------------------------------------------- /projects/docs/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-base/ngbase/8e73ff3df7867c087907e774a7af43214fab7dd8/projects/docs/public/logo.png -------------------------------------------------------------------------------- /projects/docs/public/music1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-base/ngbase/8e73ff3df7867c087907e774a7af43214fab7dd8/projects/docs/public/music1.webp -------------------------------------------------------------------------------- /projects/docs/public/wallpaper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-base/ngbase/8e73ff3df7867c087907e774a7af43214fab7dd8/projects/docs/public/wallpaper.jpg -------------------------------------------------------------------------------- /projects/docs/src/app/add.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable() 4 | export class AddService { 5 | constructor() {} 6 | } 7 | -------------------------------------------------------------------------------- /projects/docs/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { render, RenderResult } from '@ngbase/adk/test'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | let component: AppComponent; 6 | let view: RenderResult; 7 | 8 | beforeEach(async () => { 9 | view = await render(AppComponent); 10 | component = view.host; 11 | view.detectChanges(); 12 | }); 13 | 14 | it('should create the app', () => { 15 | expect(component).toBeTruthy(); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /projects/docs/src/app/app.config.server.ts: -------------------------------------------------------------------------------- 1 | import { mergeApplicationConfig, ApplicationConfig } from '@angular/core'; 2 | import { provideServerRendering } from '@angular/platform-server'; 3 | import { appConfig } from './app.config'; 4 | import { serverRoutes } from './app.routes.server'; 5 | import { provideServerRoutesConfig } from '@angular/ssr'; 6 | 7 | const serverConfig: ApplicationConfig = { 8 | providers: [provideServerRendering(), provideServerRoutesConfig(serverRoutes)], 9 | }; 10 | 11 | export const config = mergeApplicationConfig(appConfig, serverConfig); 12 | -------------------------------------------------------------------------------- /projects/docs/src/app/app.routes.server.ts: -------------------------------------------------------------------------------- 1 | // app.routes.server.ts 2 | import { RenderMode, ServerRoute } from '@angular/ssr'; 3 | export const serverRoutes: ServerRoute[] = [ 4 | { 5 | path: 'examples/:id', // This renders the "/" route on the client (CSR) 6 | renderMode: RenderMode.Prerender, 7 | getPrerenderParams: () => 8 | Promise.resolve(Array.from({ length: 7 }, (_, i) => ({ id: i.toString() }))), 9 | }, 10 | { 11 | path: '**', // All other routes will be rendered on the server (CSR) 12 | renderMode: RenderMode.Prerender, 13 | }, 14 | ]; 15 | -------------------------------------------------------------------------------- /projects/docs/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | import { BaseComponent } from './ui/base.component'; 3 | 4 | export const routes: Routes = [ 5 | { 6 | path: '', 7 | component: BaseComponent, 8 | children: [ 9 | { path: '', loadComponent: () => import('./introduction.ng') }, 10 | { path: 'docs', loadChildren: () => import('./ui/ui.routes') }, 11 | { path: 'examples', loadChildren: () => import('./examples/example.routes') }, 12 | { path: 'origin', loadChildren: () => import('./origin/origin.routes') }, 13 | ], 14 | }, 15 | ]; 16 | -------------------------------------------------------------------------------- /projects/docs/src/app/app.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable() 4 | export class AppService { 5 | constructor() {} 6 | } 7 | -------------------------------------------------------------------------------- /projects/docs/src/app/chat/chat.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | import { ChatComponent } from './chat.component'; 3 | 4 | export const CHAT_ROUTES: Routes = [{ path: '', component: ChatComponent }]; 5 | -------------------------------------------------------------------------------- /projects/docs/src/app/chat/chat.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | interface ChatData { 4 | id: number; 5 | message: string; 6 | type: 'sent' | 'received'; 7 | } 8 | 9 | @Injectable() 10 | export class ChatService { 11 | data: ChatData[] = [ 12 | { id: 1, message: 'Hello', type: 'sent' }, 13 | { id: 2, message: 'Hi', type: 'received' }, 14 | { id: 3, message: 'How are you?', type: 'sent' }, 15 | { id: 4, message: 'I am fine', type: 'received' }, 16 | { id: 5, message: 'What about you?', type: 'received' }, 17 | { id: 6, message: 'I am also fine', type: 'sent' }, 18 | { id: 7, message: 'Bye', type: 'sent' }, 19 | { id: 8, message: 'Goodbye', type: 'received' }, 20 | ]; 21 | constructor() {} 22 | } 23 | -------------------------------------------------------------------------------- /projects/docs/src/app/examples/example.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | import { ExamplesComponent } from './main.component'; 3 | 4 | const EXAMPLE_ROUTES: Routes = [ 5 | { path: ':id', component: ExamplesComponent }, 6 | { path: '', redirectTo: '0', pathMatch: 'full' }, 7 | ]; 8 | 9 | export default EXAMPLE_ROUTES; 10 | -------------------------------------------------------------------------------- /projects/docs/src/app/introduction.ng.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { RouterLink } from '@angular/router'; 3 | import { Button } from '@meeui/ui/button'; 4 | 5 | @Component({ 6 | selector: 'app-introduction', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | imports: [Button, RouterLink], 9 | template: ` 10 |
    11 |
    12 |

    Introduction Coming Soon...

    13 |

    14 | 15 |

    16 |
    17 |
    18 | `, 19 | }) 20 | export default class Introduction {} 21 | -------------------------------------------------------------------------------- /projects/docs/src/app/origin/origin.ng.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterLink } from '@angular/router'; 3 | import { Card } from '@meeui/ui/card'; 4 | 5 | @Component({ 6 | selector: 'app-origin', 7 | standalone: true, 8 | imports: [Card, RouterLink], 9 | template: `
    10 | 11 |

    Slider

    12 |     13 | 14 |

    Carousel

    15 |     16 | 17 |

    Dropdown

    18 |     19 |
    `, 20 | }) 21 | export default class Origin {} 22 | -------------------------------------------------------------------------------- /projects/docs/src/app/origin/origin.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const ORIGIN_ROUTES: Routes = [ 4 | { path: 'slider', loadComponent: () => import('./slider-origin') }, 5 | { path: 'carousel', loadComponent: () => import('./carousel-origin') }, 6 | { path: 'dropdown', loadComponent: () => import('./dropdown.ng') }, 7 | { path: '', loadComponent: () => import('./origin.ng') }, 8 | ]; 9 | 10 | export default ORIGIN_ROUTES; 11 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/alert-dialog/alert-dialog-usage.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { alertPortal } from '@meeui/ui/alert'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | template: ``, 7 | }) 8 | export class AppComponent { 9 | alert = alertPortal(); 10 | 11 | openAlert() { 12 | this.alert.open({ 13 | title: 'Are you absolutely sure?', 14 | description: `This alert cannot be dismissed using the "esc" key or touching the "backdrop". 15 | Select any option to close the alert.`, 16 | actions: [ 17 | { text: 'Cancel', type: 'ghost', handler: close => close() }, 18 | { text: 'Continue', handler: close => close() }, 19 | ], 20 | }); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/avatar/avatar-usage.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Avatar } from '@meeui/ui/avatar'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | template: ` `, 7 | imports: [Avatar], 8 | }) 9 | export class AppComponent {} 10 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/badge/badge-adk.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mee-badge, [meeBadge]', 5 | changeDetection: ChangeDetectionStrategy.OnPush, 6 | template: ``, 7 | host: { 8 | class: 'inline-block bg-muted rounded-full px-2 py-1 text-xs font-semibold', 9 | }, 10 | }) 11 | export class Badge {} 12 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/badge/badge-usage.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Badge } from '@meeui/ui/badge'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | imports: [Badge], 7 | template: ` 8 | 9 | Badge 10 | `, 11 | }) 12 | export class AppComponent {} 13 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/breadcrumbs/breadcrumbs-usage.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Breadcrumbs, Breadcrumb } from '@meeui/ui/breadcrumb'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | imports: [Breadcrumbs, Breadcrumb], 7 | template: ` 8 | 9 | 10 | Home 11 | 12 | 13 | Product 14 | 15 | 16 | Items 17 | 18 | 19 | `, 20 | }) 21 | export class AppComponent {} 22 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/calendar/calendar-adk.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-base/ngbase/8e73ff3df7867c087907e774a7af43214fab7dd8/projects/docs/src/app/ui/calendar/calendar-adk.ts -------------------------------------------------------------------------------- /projects/docs/src/app/ui/calendar/calendar-usage.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { DatePicker } from '@meeui/ui/datepicker'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | imports: [DatePicker], 7 | template: ``, 8 | }) 9 | export class AppComponent {} 10 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/calendar/calendar.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { DatePicker } from '@meeui/ui/datepicker'; 3 | import { Heading } from '@meeui/ui/typography'; 4 | import { DocCode, getCode } from '../code.component'; 5 | 6 | @Component({ 7 | selector: 'app-calendar', 8 | imports: [Heading, DatePicker, DocCode], 9 | changeDetection: ChangeDetectionStrategy.OnPush, 10 | template: ` 11 |

    Calendar

    12 | 13 | 18 | 19 | `, 20 | }) 21 | export default class CalendarComponent { 22 | tsCode = getCode('/calendar/calendar-usage.ts'); 23 | } 24 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/card/card-adk.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-base/ngbase/8e73ff3df7867c087907e774a7af43214fab7dd8/projects/docs/src/app/ui/card/card-adk.ts -------------------------------------------------------------------------------- /projects/docs/src/app/ui/checkbox/checkbox-usage.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { Checkbox } from '@meeui/ui/checkbox'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | template: `Check the UI`, 8 | imports: [Checkbox, FormsModule], 9 | }) 10 | export class AppComponent { 11 | checkBox = false; 12 | } 13 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/chip/chip-usage.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Chip } from '@meeui/ui/chip'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | imports: [Chip], 7 | template: ``, 8 | }) 9 | export class AppComponent {} 10 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/chip/chip.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { Chip } from '@meeui/ui/chip'; 3 | import { Heading } from '@meeui/ui/typography'; 4 | import { DocCode, getCode } from '../code.component'; 5 | 6 | @Component({ 7 | selector: 'app-chip', 8 | imports: [Heading, Chip, DocCode], 9 | changeDetection: ChangeDetectionStrategy.OnPush, 10 | template: ` 11 |

    Chip

    12 | 13 |
    Chip
    14 |     15 | `, 16 | }) 17 | export default class ChipComponent { 18 | tsCode = getCode('/chip/chip-usage.ts'); 19 | 20 | adkCode = getCode('/chip/chip-adk.ts'); 21 | } 22 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/color-picker/color-picker-usage.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { ColorInput } from '@meeui/ui/color-picker'; 4 | import { Label, FormField } from '@meeui/ui/form-field'; 5 | 6 | @Component({ 7 | selector: 'app-root', 8 | imports: [ColorInput, Label, FormField, FormsModule], 9 | template: ` 10 | 11 | 12 | 13 | 14 | `, 15 | }) 16 | export class AppComponent { 17 | hexColor = '#1778FF'; 18 | } 19 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/command.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Command } from '@meeui/ui/command'; 3 | import { dialogPortal } from '@meeui/ui/dialog'; 4 | import { keyMap } from '@ngbase/adk/keys'; 5 | 6 | @Component({ 7 | selector: 'app-command', 8 | template: ``, 9 | }) 10 | export default class CommandComponent { 11 | dialog = dialogPortal(); 12 | 13 | constructor() { 14 | keyMap('ctrl+k', () => this.open()); 15 | } 16 | 17 | open() { 18 | this.dialog.open(Command, { 19 | header: true, 20 | width: '600px', 21 | minHeight: '400px', 22 | maxHeight: '500px', 23 | }); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/directionality.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-directionality', 5 | template: ``, 6 | }) 7 | export default class DirectionalityComponent {} 8 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/inline-edit.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, signal } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { InlineEdit } from '@meeui/ui/inline-edit'; 4 | import { Heading } from '@meeui/ui/typography'; 5 | 6 | @Component({ 7 | imports: [FormsModule, Heading, InlineEdit], 8 | selector: 'app-inline-edit', 9 | template: ` 10 |

    Inline Edit

    11 | {{ value() }} 12 | 13 | `, 14 | }) 15 | export default class InlineEditComponent { 16 | value = signal('Hello World'); 17 | } 18 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/jwt/jwt-usage.ts: -------------------------------------------------------------------------------- 1 | import { inject } from '@angular/core'; 2 | import { Injectable } from '@angular/core'; 3 | import { ApplicationConfig } from '@angular/core'; 4 | import { JwtService, provideJwt } from '@ngbase/adk/jwt'; 5 | 6 | // app.config.ts 7 | export const appConfig: ApplicationConfig = { 8 | providers: [ 9 | provideJwt(() => ({ 10 | tokenGetter: () => localStorage.getItem('auth_token'), 11 | })), 12 | ], 13 | }; 14 | 15 | // auth.service.ts 16 | @Injectable() 17 | export class AuthService { 18 | readonly jwtService = inject(JwtService); 19 | 20 | getToken() { 21 | return this.jwtService.getToken(); 22 | } 23 | 24 | isTokenExpired() { 25 | return this.jwtService.isTokenExpired(); 26 | } 27 | 28 | decodeToken() { 29 | return this.jwtService.decodeToken(); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/jwt/jwt.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { DocCode, getCode } from '../code.component'; 3 | import { Heading } from '@meeui/ui/typography'; 4 | 5 | @Component({ 6 | selector: 'app-jwt', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | imports: [DocCode, Heading], 9 | template: ` 10 |

    JWT

    11 | 12 | `, 13 | }) 14 | export default class JwtComponent { 15 | readonly tsCode = getCode('jwt/jwt-usage.ts'); 16 | 17 | adkCode = ` 18 | @Injectable() 19 | export class JwtService { 20 | getToken(): string | null; 21 | 22 | isTokenExpired(token?: string): boolean; 23 | 24 | decodeToken(token?: string): T | null; 25 | 26 | getTokenExpirationDate(token?: string): Date | null; 27 | } 28 | `.trim(); 29 | } 30 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/keyboard-shortcuts.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-keyboard-shortcuts', 5 | template: ``, 6 | }) 7 | export class KeyboardShortcutsComponent {} 8 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/picasa.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { RangePipe } from '@ngbase/adk/utils'; 3 | import { Picasa, PicasaItem } from '@meeui/ui/picasa'; 4 | import { Heading } from '@meeui/ui/typography'; 5 | 6 | @Component({ 7 | selector: 'app-picasa', 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | imports: [Picasa, PicasaItem, Heading, RangePipe], 10 | template: ` 11 |

    Picasa

    12 |
    13 | @for (item of 5 | range; track $index) { 14 | Placeholder 15 | } 16 |
    17 | `, 18 | }) 19 | export default class PicasaComponent {} 20 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/scroll-area.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { RangePipe } from '@ngbase/adk/utils'; 4 | import { List } from '@meeui/ui/list'; 5 | import { ScrollArea } from '@meeui/ui/scroll-area'; 6 | import { Heading } from '@meeui/ui/typography'; 7 | 8 | @Component({ 9 | selector: 'app-scroll-area', 10 | imports: [FormsModule, Heading, ScrollArea, List, RangePipe], 11 | template: ` 12 |

    Scroll Area

    13 | 14 | @for (item of 10 | range; track item) { 15 | 16 | } 17 | 18 | `, 19 | }) 20 | export default class ScrollAreaComponent {} 21 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/slider/slider-usage.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { Slider } from '@meeui/ui/slider'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | imports: [FormsModule, Slider], 8 | template: ` `, 9 | }) 10 | export class AppComponent { 11 | slider = 50; 12 | } 13 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/switch/switch-usage.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { Switch } from '@meeui/ui/switch'; 4 | 5 | @Component({ 6 | selector: 'app-switch', 7 | imports: [Switch, FormsModule], 8 | template: ` Switch the UI `, 9 | }) 10 | export class SwitchComponent { 11 | switch = false; 12 | } 13 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/switch/switch.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { Switch } from '@meeui/ui/switch'; 4 | import { Heading } from '@meeui/ui/typography'; 5 | import { DocCode, getCode } from '../code.component'; 6 | 7 | @Component({ 8 | selector: 'app-switch', 9 | imports: [FormsModule, Heading, Switch, DocCode], 10 | template: ` 11 |

    Switch

    12 | 13 | Switch the UI 14 | 15 | `, 16 | }) 17 | export default class SwitchComponent { 18 | switch = false; 19 | 20 | tsCode = getCode('switch/switch-usage.ts'); 21 | 22 | adkCode = getCode('switch/switch-adk.ts'); 23 | } 24 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/tabs/tabs-usage.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Tabs, Tab, TabHeader } from '@meeui/ui/tabs'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | imports: [Tabs, Tab, TabHeader], 7 | template: ` 8 | 9 | 10 |

    This is a tab content

    11 |     12 | 13 |

    Tab with long name

    14 |

    This is a tab content

    15 |     16 |     17 | `, 18 | }) 19 | export class AppComponent {} 20 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/test/test-usage.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, Component, inject } from '@angular/core'; 2 | import { fakeService, render, RenderResult } from '@ngbase/adk/test'; 3 | 4 | @Injectable({ providedIn: 'root' }) 5 | class TestService { 6 | value = 'Hello World'; 7 | } 8 | 9 | @Component({ 10 | selector: 'app-test', 11 | template: `

    {{ service.value }}

    `, 12 | }) 13 | class TestComponent { 14 | readonly service = inject(TestService); 15 | } 16 | 17 | const testServiceFake = fakeService(TestService, () => ({ 18 | value: 'Hello World', 19 | })); 20 | 21 | describe('TestComponent', () => { 22 | let view: RenderResult; 23 | 24 | beforeEach(async () => { 25 | view = await render(TestComponent, [testServiceFake]); 26 | }); 27 | 28 | it('should create', () => { 29 | expect(view.host).toBeTruthy(); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/test/test.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { DocCode, getCode } from '../code.component'; 3 | import { Heading } from '@meeui/ui/typography'; 4 | 5 | @Component({ 6 | selector: 'app-test', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | imports: [DocCode, Heading], 9 | template: `

    Test

    10 | `, 16 | }) 17 | export default class TestComponent { 18 | tsCode = getCode('/test/test-usage.ts'); 19 | adkCode = ''; 20 | referencesCode = getCode('/test/test-adk.ts'); 21 | } 22 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/toggle.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { Toggle } from '@meeui/ui/toggle'; 4 | import { Heading } from '@meeui/ui/typography'; 5 | 6 | @Component({ 7 | selector: 'app-toggle', 8 | imports: [FormsModule, Heading, Toggle], 9 | template: ` 10 |

    Toggle

    11 | 12 | `, 13 | }) 14 | export default class ToggleComponent { 15 | toggle = ''; 16 | } 17 | -------------------------------------------------------------------------------- /projects/docs/src/app/ui/tour.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, inject } from '@angular/core'; 2 | import { Button } from '@meeui/ui/button'; 3 | import { TourService } from '@meeui/ui/tour'; 4 | import { Heading } from '@meeui/ui/typography'; 5 | import { TourDemoComponent } from './tour-demo.component'; 6 | 7 | @Component({ 8 | selector: 'app-tour', 9 | imports: [Button, Heading], 10 | template: ` 11 |

    Tour

    12 | 13 | 14 | `, 15 | }) 16 | export default class TourComponent { 17 | tourService = inject(TourService); 18 | 19 | start() { 20 | this.tourService.start(TourDemoComponent, [ 21 | 'theme-toggle', 22 | 'theme-open', 23 | 'context-menu', 24 | 'tabs', 25 | 'resizable', 26 | ]); 27 | // this.ngxTour.startTour(this.dashboardTour); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /projects/docs/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Docs 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /projects/docs/src/main.server.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { AppComponent } from './app/app.component'; 3 | import { config } from './app/app.config.server'; 4 | 5 | const bootstrap = () => bootstrapApplication(AppComponent, config); 6 | 7 | export default bootstrap; 8 | -------------------------------------------------------------------------------- /projects/docs/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err)); 6 | -------------------------------------------------------------------------------- /projects/docs/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "../../tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "../../out-tsc/app", 7 | "types": ["node"] 8 | }, 9 | "files": ["src/main.ts", "src/main.server.ts", "server.ts"], 10 | "include": ["src/**/*.d.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /projects/docs/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "../../tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "../../out-tsc/spec", 7 | "types": ["jest"] 8 | }, 9 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /projects/mee/accordion/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/accordion/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of accordion 3 | */ 4 | 5 | export * from './accordion'; 6 | -------------------------------------------------------------------------------- /projects/mee/alert/alert-llm.md: -------------------------------------------------------------------------------- 1 | # MEE Alert 2 | 3 | ```typescript 4 | import { alertPortal } from '@/ui/alert'; 5 | ``` 6 | 7 | ## Usage 8 | 9 | ```ts 10 | const alert = alertPortal(); 11 | alert.open({ 12 | title: 'Alert', 13 | description: 'This is an alert', 14 | actions: [ 15 | { 16 | text: 'Cancel', 17 | type: 'secondary', // ButtonVariant 18 | handler: close => close(), 19 | }, 20 | { 21 | text: 'OK', 22 | type: 'primary', // ButtonVariant 23 | handler: close => { 24 | okHandler(); 25 | close(); 26 | }, 27 | }, 28 | ], 29 | }); 30 | 31 | function okHandler() { 32 | console.log('OK'); 33 | } 34 | ``` 35 | -------------------------------------------------------------------------------- /projects/mee/alert/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/alert/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './alert'; 2 | -------------------------------------------------------------------------------- /projects/mee/autocomplete/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/autocomplete/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of autocomplete 3 | */ 4 | 5 | export * from './autocomplete'; 6 | -------------------------------------------------------------------------------- /projects/mee/avatar/avatar.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { render, RenderResult } from '@ngbase/adk/test'; 3 | import { Avatar } from './avatar'; 4 | 5 | @Component({ 6 | imports: [Avatar], 7 | template: '', 8 | }) 9 | export class AvatarComponent {} 10 | 11 | describe('AvatarComponent', () => { 12 | let view: RenderResult; 13 | 14 | beforeEach(async () => { 15 | view = await render(AvatarComponent); 16 | }); 17 | it('should create', async () => { 18 | expect(true).toBe(true); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /projects/mee/avatar/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/avatar/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './avatar'; 2 | -------------------------------------------------------------------------------- /projects/mee/badge/badge-llm.md: -------------------------------------------------------------------------------- 1 | # MEE Badge 2 | 3 | ```typescript 4 | import { Badge } from '@/ui/badge'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `, [meeBadge]` 10 | 11 | - **Inputs:** 12 | 13 | - `variant`: 'default' | 'secondary' | 'outline' | 'destructive' = 'default' - Badge variant 14 | 15 | - **Export:** `meeBadge` 16 | 17 | ## Usage 18 | 19 | ```html 20 | Badge 21 | ``` 22 | -------------------------------------------------------------------------------- /projects/mee/badge/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/badge/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './badge'; 2 | -------------------------------------------------------------------------------- /projects/mee/breadcrumb/breadcrumb-llm.md: -------------------------------------------------------------------------------- 1 | # MEE Breadcrumb 2 | 3 | ```typescript 4 | import { Breadcrumb, Breadcrumbs, BreadcrumbsSeparator } from '@/ui/breadcrumb'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `` 10 | 11 | ### `` 12 | 13 | ### `` - Optional 14 | 15 | ## Usage 16 | 17 | ```html 18 | 19 | 20 | 21 | 22 | 23 | Home 24 | Contact 25 | 26 | ``` 27 | -------------------------------------------------------------------------------- /projects/mee/breadcrumb/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/breadcrumb/public-api.ts: -------------------------------------------------------------------------------- 1 | export { Breadcrumbs, BreadcrumbsSeparator, Breadcrumb } from './breadcrumb'; 2 | -------------------------------------------------------------------------------- /projects/mee/button/button-llm.md: -------------------------------------------------------------------------------- 1 | # MEE Button 2 | 3 | ```typescript 4 | import { Button } from '@/ui/button'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `[meeButton]` 10 | 11 | - ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'icon' 12 | - **Inputs:** 13 | 14 | - `variant`: ButtonVariant = 'primary' 15 | 16 | - **Export:** `#button="meeButton"` - Template reference 17 | 18 | ## Usage 19 | 20 | ```html 21 | 22 | 25 | ``` 26 | 27 | Note: When you use icon as button, then make sure to use icon variant 28 | -------------------------------------------------------------------------------- /projects/mee/button/button.spec.ts: -------------------------------------------------------------------------------- 1 | import { render, RenderResult } from '@ngbase/adk/test'; 2 | import { Button } from './button'; 3 | 4 | describe('ButtonComponent', () => { 5 | let component: Button; 6 | let view: RenderResult 28 | 29 | ``` 30 | -------------------------------------------------------------------------------- /projects/mee/chip/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/chip/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './chip'; 2 | -------------------------------------------------------------------------------- /projects/mee/color-picker/color-picker-llm.md: -------------------------------------------------------------------------------- 1 | # MEE Color Picker 2 | 3 | ```typescript 4 | import { FormField, Label } from '@/ui/form-field'; 5 | import { ColorInput } from '@/ui/color-picker'; 6 | ``` 7 | 8 | ## Components 9 | 10 | ### `` 11 | 12 | ColorFormat: `hex` | `rgb` | `hsl` | `hsb` 13 | 14 | - **Inputs:** 15 | 16 | - `format`: ColorFormat - The format of the color input 17 | - `presetColors`: string[] - The preset colors of the color input 18 | - `value`: string - The value of the color input (2way) 19 | 20 | ## Usage 21 | 22 | ```html 23 | 24 | 25 | 26 | 27 | ``` 28 | -------------------------------------------------------------------------------- /projects/mee/color-picker/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/color-picker/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of color-picker 3 | */ 4 | 5 | export * from './color-picker'; 6 | -------------------------------------------------------------------------------- /projects/mee/command/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/command/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './command'; 2 | -------------------------------------------------------------------------------- /projects/mee/datepicker/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/datepicker/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './datepicker'; 2 | export * from './time'; 3 | -------------------------------------------------------------------------------- /projects/mee/dialog/dialog.spec.ts: -------------------------------------------------------------------------------- 1 | import { provideNoopAnimations } from '@angular/platform-browser/animations'; 2 | import { render, RenderResult } from '@ngbase/adk/test'; 3 | import { DialogRef } from '@ngbase/adk/portal'; 4 | import { DialogContainer } from './dialog'; 5 | 6 | const options = { title: 'Drawer' }; 7 | const mockDialogRef = new DialogRef(options, jest.fn(), jest.fn(), true); 8 | 9 | describe('DrawerComponent', () => { 10 | let component: DialogContainer; 11 | let view: RenderResult; 12 | 13 | beforeEach(async () => { 14 | view = await render(DialogContainer, [ 15 | provideNoopAnimations(), 16 | { provide: DialogRef, useValue: mockDialogRef }, 17 | ]); 18 | component = view.host; 19 | component.setOptions(options); 20 | view.detectChanges(); 21 | }); 22 | 23 | it('should create', () => { 24 | expect(component).toBeTruthy(); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /projects/mee/dialog/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/dialog/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of dialog 3 | */ 4 | 5 | export * from './dialog'; 6 | -------------------------------------------------------------------------------- /projects/mee/drawer/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/drawer/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of drawer 3 | */ 4 | 5 | export * from './drawer'; 6 | -------------------------------------------------------------------------------- /projects/mee/form-field/form-field.spec.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { render, RenderResult } from '@ngbase/adk/test'; 3 | import { MeeInput } from './form-field'; 4 | 5 | @Component({ 6 | imports: [MeeInput], 7 | template: ` `, 8 | }) 9 | class TestInput {} 10 | 11 | describe('InputComponent', () => { 12 | let component: TestInput; 13 | let view: RenderResult; 14 | let input: MeeInput; 15 | 16 | beforeEach(async () => { 17 | view = await render(TestInput); 18 | component = view.host; 19 | input = view.viewChild(MeeInput); 20 | view.detectChanges(); 21 | }); 22 | 23 | it('should create', () => { 24 | expect(component).toBeTruthy(); 25 | expect(input).toBeTruthy(); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /projects/mee/form-field/input-style.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { ɵFocusStyles as focusStyles } from '@meeui/ui/checkbox'; 3 | 4 | @Directive({ 5 | selector: '[meeInputStyle]', 6 | host: { 7 | '[class]': 8 | "'mis inline-block rounded-lg bg-transparent px-2.5 py-2 border font-normal min-h-10 ' + focusStyles.focus + ' ' + focusStyles.within", 9 | }, 10 | }) 11 | export class InputStyle { 12 | readonly focusStyles = focusStyles; 13 | } 14 | -------------------------------------------------------------------------------- /projects/mee/form-field/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/form-field/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of input 3 | */ 4 | 5 | export * from './form-field'; 6 | export * from './input-style.directive'; 7 | -------------------------------------------------------------------------------- /projects/mee/hover-card/hover-card-llm.md: -------------------------------------------------------------------------------- 1 | # Hover Card 2 | 3 | ```typescript 4 | import { HoverCard } from '@/ui/hover-card'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `mee-hover-card` 10 | 11 | - **Inputs** 12 | - `meeHoverCard`: TemplateRef - The template to show when hovering over the element 13 | - `options`: PopoverOptions - The options for the hover card 14 | - `delay`: number - The delay in milliseconds before the hover card is shown 15 | 16 | ## Usage 17 | 18 | ```html 19 | 22 | 23 | 24 |
    Hover card content
    25 |     26 | ``` 27 | -------------------------------------------------------------------------------- /projects/mee/hover-card/hover-card.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { NgbHoverCard } from '@ngbase/adk/hover-card'; 3 | 4 | @Directive({ 5 | selector: '[meeHoverCard]', 6 | hostDirectives: [ 7 | { 8 | directive: NgbHoverCard, 9 | inputs: ['ngbHoverCard: meeHoverCard', 'options', 'delay'], 10 | }, 11 | ], 12 | }) 13 | export class HoverCard {} 14 | -------------------------------------------------------------------------------- /projects/mee/hover-card/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/hover-card/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of hover-card 3 | */ 4 | 5 | export * from './hover-card'; 6 | -------------------------------------------------------------------------------- /projects/mee/icon/icon-llm.md: -------------------------------------------------------------------------------- 1 | # Icon 2 | 3 | ```typescript 4 | import { Icon } from '@/ui/icon'; 5 | import { provideIcons } from '@ng-icons/core'; 6 | import { lucideHouse } from '@ng-icons/lucide'; 7 | ``` 8 | 9 | ## Components 10 | 11 | ### `mee-icon` 12 | 13 | - **Inputs** 14 | - `name`: string - The name of the icon to display 15 | - `size`: string - The size of the icon to display 16 | 17 | ## Usage 18 | 19 | ```typescript 20 | @Component({ 21 | standalone: true, 22 | viewProviders: [provideIcons({ lucideHouse })], 23 | imports: [Icon], 24 | template: ``, 25 | }) 26 | export class AppComponent {} 27 | ``` 28 | -------------------------------------------------------------------------------- /projects/mee/icon/icon.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, input } from '@angular/core'; 2 | import { IconType, NgIconComponent } from '@ng-icons/core'; 3 | 4 | @Component({ 5 | selector: 'mee-icon', 6 | imports: [NgIconComponent], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | template: ``, 9 | host: { 10 | class: 'inline-flex items-center justify-center', 11 | }, 12 | }) 13 | export class Icon { 14 | readonly name = input.required(); 15 | readonly size = input('1rem'); 16 | } 17 | -------------------------------------------------------------------------------- /projects/mee/icon/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/icon/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './icon'; 2 | -------------------------------------------------------------------------------- /projects/mee/inline-edit/inline-edit-llm.md: -------------------------------------------------------------------------------- 1 | # Inline Edit 2 | 3 | ```typescript 4 | import { InlineEdit } from '@/ui/inline-edit'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `mee-inline-edit` 10 | 11 | - **Inputs** 12 | - `value`: string - The value of the input (2way) 13 | - `editOn`: 'click' | 'dblclick' = 'dblclick' - The event to trigger the edit 14 | - **Outputs** 15 | - `valueChange`: EventEmitter - The event emitter for the value change 16 | 17 | ## Usage 18 | 19 | ```html 20 | 21 | 22 | ``` 23 | -------------------------------------------------------------------------------- /projects/mee/inline-edit/inline-edit.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { 3 | NgbInlineEdit, 4 | NgbInlineInput, 5 | NgbInlineValue, 6 | provideInlineEdit, 7 | } from '@ngbase/adk/inline-edit'; 8 | 9 | @Component({ 10 | selector: 'mee-inline-edit', 11 | imports: [NgbInlineInput, NgbInlineValue], 12 | providers: [provideInlineEdit(), { provide: NgbInlineEdit, useExisting: InlineEdit }], 13 | template: ` 14 | @if (isEditing()) { 15 | 19 | } @else { 20 |
    {{ localValue() }}
    21 | } 22 | `, 23 | }) 24 | export class InlineEdit extends NgbInlineEdit {} 25 | -------------------------------------------------------------------------------- /projects/mee/inline-edit/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/inline-edit/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './inline-edit'; 2 | -------------------------------------------------------------------------------- /projects/mee/keys/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/keys/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of keys 3 | */ 4 | 5 | export * from './key'; 6 | -------------------------------------------------------------------------------- /projects/mee/list/list-llm.md: -------------------------------------------------------------------------------- 1 | # List 2 | 3 | ```typescript 4 | import { List } from '@/ui/list'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `[meeList]` 10 | 11 | - **inputs** 12 | 13 | - `disabled`: boolean 14 | 15 | - **exports** - `meeList` 16 | 17 | ## Usage 18 | 19 | ```html 20 | 21 | 22 | 23 | ``` 24 | -------------------------------------------------------------------------------- /projects/mee/list/list.spec.ts: -------------------------------------------------------------------------------- 1 | import { render, RenderResult } from '@ngbase/adk/test'; 2 | import { List } from './list'; 3 | import { Component } from '@angular/core'; 4 | 5 | @Component({ 6 | template: `
  • `, 7 | imports: [List], 8 | }) 9 | class TestComponent {} 10 | 11 | describe('ListComponent', () => { 12 | let component: TestComponent; 13 | let view: RenderResult; 14 | 15 | beforeEach(async () => { 16 | view = await render(TestComponent); 17 | component = view.host; 18 | view.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /projects/mee/list/list.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { NgbList, NgbListActionGroup, provideList } from '@ngbase/adk/list'; 3 | import { ɵFocusStyle as FocusStyle } from '@meeui/ui/checkbox'; 4 | 5 | @Directive({ 6 | selector: '[meeListStyle]', 7 | host: { 8 | class: 9 | 'flex items-center gap-2 py-2 px-2 hover:bg-accent cursor-pointer rounded-md text-left data-[focus="true"]:bg-accent', 10 | }, 11 | }) 12 | export class ListStyle {} 13 | 14 | @Directive({ 15 | selector: '[meeList]', 16 | hostDirectives: [ListStyle, FocusStyle], 17 | providers: [provideList(List)], 18 | host: { 19 | role: 'list', 20 | '[class]': 'disabled() ? "pointer-events-none cursor-not-allowed opacity-50" : ""', 21 | }, 22 | }) 23 | export class List extends NgbList {} 24 | 25 | @Directive({ 26 | selector: '[meeActionGroup]', 27 | hostDirectives: [NgbListActionGroup], 28 | }) 29 | export class ListActionGroup {} 30 | -------------------------------------------------------------------------------- /projects/mee/list/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/list/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of list 3 | */ 4 | 5 | export * from './list'; 6 | -------------------------------------------------------------------------------- /projects/mee/mask/mask-llm.md: -------------------------------------------------------------------------------- 1 | # Mask 2 | 3 | ```typescript 4 | import { Mask } from '@/ui/mask'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `meeMask` 10 | 11 | - **Inputs** 12 | - `meeMask`: string - The mask pattern to apply to the input 13 | - `showMaskType`: boolean = false - Whether to show the mask type 14 | 15 | ## Usage 16 | 17 | ```html 18 | 19 | ``` 20 | -------------------------------------------------------------------------------- /projects/mee/mask/mask.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { Mask } from '@ngbase/adk/mask'; 3 | 4 | @Directive({ 5 | selector: '[meeMask]', 6 | hostDirectives: [{ directive: Mask, inputs: ['ngbMask: meeMask', 'showMaskType'] }], 7 | }) 8 | export class MaskInput {} 9 | -------------------------------------------------------------------------------- /projects/mee/mask/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/mask/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './mask'; 2 | -------------------------------------------------------------------------------- /projects/mee/menu/context-menu-llm.md: -------------------------------------------------------------------------------- 1 | # Menu 2 | 3 | ```typescript 4 | import { Menu, MenuTrigger, MenuContent } from '@/ui/menu'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `[meeContextMenu]` 10 | 11 | - **Inputs** 12 | - `meeContextMenu`: Menu - Menu reference 13 | - **Outputs** 14 | - `ctxOpen`: EventEmitter - Emits when the context menu is opened 15 | - `ctxClose`: EventEmitter - Emits when the context menu is closed 16 | - **Exports** - `meeContextMenu` 17 | 18 | ## Usage 19 | 20 | ```html 21 | 22 | 23 | 24 | 25 | 26 | ``` 27 | 28 | ## Context Menu 29 | -------------------------------------------------------------------------------- /projects/mee/menu/context-menu.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { NgbContextMenu } from '@ngbase/adk/menu'; 3 | 4 | @Directive({ 5 | selector: '[meeContextMenu]', 6 | hostDirectives: [ 7 | { 8 | directive: NgbContextMenu, 9 | inputs: ['ngbContextMenu: meeContextMenu'], 10 | outputs: ['ctxOpen', 'ctxClose'], 11 | }, 12 | ], 13 | }) 14 | export class ContextMenu {} 15 | -------------------------------------------------------------------------------- /projects/mee/menu/mention.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { NgbMentionTrigger } from '@ngbase/adk/menu'; 3 | 4 | @Directive({ 5 | selector: '[meeMentionTrigger]', 6 | hostDirectives: [ 7 | { 8 | directive: NgbMentionTrigger, 9 | inputs: ['ngbMentionTrigger: meeMentionTrigger', 'key', 'options'], 10 | outputs: ['search'], 11 | }, 12 | ], 13 | }) 14 | export class MentionTrigger {} 15 | -------------------------------------------------------------------------------- /projects/mee/menu/menu-llm.md: -------------------------------------------------------------------------------- 1 | # Menu 2 | 3 | ```typescript 4 | import { Menu, MenuTrigger, MenuContent } from '@/ui/menu'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `mee-menu` 10 | 11 | - **Exports** - `meeMenu` 12 | 13 | ### `meeMenuContent` 14 | 15 | ### `meeMenuTrigger` 16 | 17 | - **Inputs** 18 | - `meeMenuTrigger`: meeMenu - Menu reference 19 | - **Exports** - `meeMenuTrigger` 20 | 21 | ## Menu Usage 22 | 23 | ```html 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | ``` 38 | -------------------------------------------------------------------------------- /projects/mee/menu/navigation-menu.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { NgbNavigationMenu } from '@ngbase/adk/menu'; 3 | 4 | @Directive({ 5 | selector: '[meeNavigationMenu]', 6 | hostDirectives: [{ directive: NgbNavigationMenu, inputs: ['hover'] }], 7 | }) 8 | export class NavigationMenu {} 9 | -------------------------------------------------------------------------------- /projects/mee/menu/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/menu/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of menu 3 | */ 4 | 5 | export * from './menu'; 6 | export * from './context-menu'; 7 | export * from './navigation-menu'; 8 | export * from './mention'; 9 | -------------------------------------------------------------------------------- /projects/mee/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/mee", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /projects/mee/otp/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/otp/otp-llm.md: -------------------------------------------------------------------------------- 1 | # OTP 2 | 3 | ```typescript 4 | import { Otp } from '@/ui/otp'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `mee-otp-input` 10 | 11 | - **Inputs** 12 | - `size`: number[] - The size of the OTP input 13 | - `masked`: boolean - Whether the OTP input is masked 14 | - `disabled`: boolean - Whether the OTP input is disabled 15 | - **Exports** - `meeOtpInput` 16 | 17 | ## Usage 18 | 19 | ```html 20 | 21 | ``` 22 | -------------------------------------------------------------------------------- /projects/mee/otp/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of input 3 | */ 4 | 5 | export * from './otp'; 6 | -------------------------------------------------------------------------------- /projects/mee/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@meeui/ui", 3 | "version": "0.1.7", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/sheikalthaf/mee-ui.git" 7 | }, 8 | "keywords": [ 9 | "angular" 10 | ], 11 | "license": "MIT", 12 | "bugs": { 13 | "url": "https://github.com/sheikalthaf/mee-ui/issues" 14 | }, 15 | "peerDependencies": { 16 | "@angular/common": "^18.0.0", 17 | "@angular/core": "^18.0.0", 18 | "@angular/forms": "^18.0.0", 19 | "@ngbase/adk": "^0.1.0" 20 | }, 21 | "dependencies": { 22 | "tslib": "^2.3.0" 23 | }, 24 | "sideEffects": false 25 | } 26 | -------------------------------------------------------------------------------- /projects/mee/pagination/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/pagination/pagination-llm.md: -------------------------------------------------------------------------------- 1 | # Pagination 2 | 3 | ```typescript 4 | import { Pagination } from '@/ui/pagination'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `mee-pagination` 10 | 11 | - **Inputs** 12 | - `size`: number - The size of the pagination (2way) 13 | - `active`: number - The active page (2way) 14 | - `total`: number - The total number of pages 15 | - `sizeOptions`: number[] - The options for the size of the pagination 16 | - **Outputs** 17 | - `valueChanged`: EventEmitter - Emits when the value changes 18 | - **Exports** - `meePagination` 19 | 20 | ## Usage 21 | 22 | ```html 23 | 29 | ``` 30 | -------------------------------------------------------------------------------- /projects/mee/pagination/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './pagination'; 2 | -------------------------------------------------------------------------------- /projects/mee/picasa/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/picasa/picase.service.ts: -------------------------------------------------------------------------------- 1 | import { basePortal, DialogInput, DialogOptions } from '@ngbase/adk/portal'; 2 | import { PicasaBase } from './picasa-base.component'; 3 | 4 | export function picasaPortal() { 5 | const NAME = 'picasa'; 6 | const base = basePortal(NAME, PicasaBase); 7 | 8 | function open(component: DialogInput, opt?: DialogOptions) { 9 | const { diaRef } = base.open( 10 | component, 11 | (comp, options) => { 12 | comp.instance.setOptions(options); 13 | }, 14 | opt, 15 | ); 16 | 17 | return diaRef; 18 | } 19 | 20 | function closeAll() { 21 | base.closeAll(); 22 | } 23 | return { open, closeAll }; 24 | } 25 | -------------------------------------------------------------------------------- /projects/mee/picasa/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './picasa.directive'; 2 | -------------------------------------------------------------------------------- /projects/mee/popover/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './popover'; 2 | -------------------------------------------------------------------------------- /projects/mee/progress/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/progress/progress-llm.md: -------------------------------------------------------------------------------- 1 | # Progress 2 | 3 | ```typescript 4 | import { Progress } from '@/ui/progress'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `mee-progress` 10 | 11 | - **Inputs** 12 | - `value`: number - The value of the progress 13 | - **Exports** - `meeProgress` 14 | 15 | ## Usage 16 | 17 | ```html 18 | 19 | ``` 20 | -------------------------------------------------------------------------------- /projects/mee/progress/progress.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { NgbProgress, NgbProgressBar } from '@ngbase/adk/progress'; 3 | 4 | @Component({ 5 | selector: 'mee-progress', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | hostDirectives: [{ directive: NgbProgress, inputs: ['value'] }], 8 | imports: [NgbProgressBar], 9 | template: `
    `, 10 | host: { 11 | class: 'block h-2 my-1 bg-muted rounded-full', 12 | }, 13 | }) 14 | export class Progress {} 15 | -------------------------------------------------------------------------------- /projects/mee/progress/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of progress 3 | */ 4 | 5 | export * from './progress'; 6 | -------------------------------------------------------------------------------- /projects/mee/radio/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/radio/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of radio 3 | */ 4 | 5 | export * from './radio'; 6 | -------------------------------------------------------------------------------- /projects/mee/radio/radio-llm.md: -------------------------------------------------------------------------------- 1 | # Radio 2 | 3 | ```typescript 4 | import { Radio, RadioGroup } from '@/ui/radio'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `mee-radio-group` 10 | 11 | - **Inputs** 12 | - `value`: any - The value of the radio group (2way) 13 | - **Outputs** 14 | - `valueChange`: EventEmitter - The event emitter for the value change 15 | - **Exports** - `meeRadioGroup` 16 | 17 | ### `mee-radio` 18 | 19 | - **Inputs** 20 | - `value`: any - The value of the radio 21 | - `disabled`: boolean - Whether the radio is disabled 22 | - **Exports** - `meeRadio` 23 | 24 | ## Usage 25 | 26 | ```html 27 | 28 | Radio 1 29 | Radio 2 30 | 31 | 32 | 33 | Radio 1 34 | Radio 2 35 | 36 | ``` 37 | -------------------------------------------------------------------------------- /projects/mee/resizable/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/resizable/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of resizable 3 | */ 4 | 5 | export * from './resizable'; 6 | -------------------------------------------------------------------------------- /projects/mee/resizable/resizable-llm.md: -------------------------------------------------------------------------------- 1 | # Resizable 2 | 3 | ```typescript 4 | import { Resizable, ResizableGroup } from '@/ui/resizable'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `mee-resizable-group` 10 | 11 | - **Inputs** 12 | - `direction`: 'horizontal' | 'vertical' = 'horizontal' - The direction of the resizable group 13 | - **Exports** - `meeResizableGroup` 14 | 15 | ### `mee-resizable` 16 | 17 | - **Inputs** 18 | - `size`: number | string = 'auto' - The size of the resizable 19 | - `min`: number | string = 0 - The minimum size of the resizable 20 | - `max`: number | string = undefined - The maximum size of the resizable 21 | - **Exports** - `meeResizable` 22 | 23 | ## Usage 24 | 25 | ```html 26 | 27 | 28 | 29 | 30 | 31 | ``` 32 | -------------------------------------------------------------------------------- /projects/mee/scroll-area/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/scroll-area/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './scroll-area'; 2 | -------------------------------------------------------------------------------- /projects/mee/select/list-selection.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { provideValueAccessor } from '@ngbase/adk/utils'; 3 | import { SelectBase } from '@ngbase/adk/select'; 4 | 5 | @Component({ 6 | selector: 'mee-list-selection', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | template: ``, 9 | providers: [provideValueAccessor(ListSelection)], 10 | }) 11 | export class ListSelection extends SelectBase { 12 | constructor() { 13 | super(true); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /projects/mee/select/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/select/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of select 3 | */ 4 | 5 | export * from './select'; 6 | export * from './option'; 7 | export * from './select-input'; 8 | export * from './list-selection'; 9 | -------------------------------------------------------------------------------- /projects/mee/select/select-input.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { NgbSelectInput, NgbSelectTrigger } from '@ngbase/adk/select'; 3 | import { InputStyle } from '@meeui/ui/form-field'; 4 | 5 | @Directive({ 6 | selector: '[meeSelectInput]', 7 | hostDirectives: [ 8 | { directive: NgbSelectInput, inputs: ['placeholder', 'options', 'filterFn'] }, 9 | InputStyle, 10 | ], 11 | host: { 12 | class: 'w-full !m-0 mb-1 !ring-0 !border-0 !border-b rounded-none px-3 z-10', 13 | }, 14 | }) 15 | export class SelectInput {} 16 | 17 | @Directive({ 18 | selector: '[meeSelectTrigger]', 19 | hostDirectives: [NgbSelectTrigger], 20 | }) 21 | export class SelectTrigger {} 22 | -------------------------------------------------------------------------------- /projects/mee/selectable/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/selectable/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './selectable'; 2 | -------------------------------------------------------------------------------- /projects/mee/selectable/selectable-llm.md: -------------------------------------------------------------------------------- 1 | # Selectable 2 | 3 | ```typescript 4 | import { Selectable, SelectableItem } from '@/ui/selectable'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `mee-selectable` 10 | 11 | - **Inputs** 12 | - `activeIndex`: number - Active index (2way) 13 | - **Outputs** 14 | - `activeIndexChange`: EventEmitter - Active index changed event 15 | - `valueChanged`: EventEmitter - Value changed event 16 | - **Export** - `meeSelectable` - Template reference 17 | 18 | ### `mee-selectable-item, [meeSelectableItem]` 19 | 20 | - **Inputs** 21 | - `value`: any - Value 22 | - **Export** - `meeSelectableItem` - Template reference 23 | 24 | ## Usage 25 | 26 | ```html 27 | 28 | Item 1 29 | 30 | 31 | ``` 32 | -------------------------------------------------------------------------------- /projects/mee/separator/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/separator/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of separator 3 | */ 4 | 5 | export * from './separator'; 6 | -------------------------------------------------------------------------------- /projects/mee/separator/separator.spec.ts: -------------------------------------------------------------------------------- 1 | import { render, RenderResult } from '@ngbase/adk/test'; 2 | import { Separator } from './separator'; 3 | 4 | describe('SeparatorComponent', () => { 5 | let component: Separator; 6 | let view: RenderResult; 7 | 8 | beforeEach(async () => { 9 | view = await render(Separator); 10 | component = view.host; 11 | view.detectChanges(); 12 | }); 13 | 14 | it('should create', () => { 15 | expect(component).toBeTruthy(); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /projects/mee/separator/separator.ts: -------------------------------------------------------------------------------- 1 | import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mee-separator', 5 | changeDetection: ChangeDetectionStrategy.OnPush, 6 | template: ``, 7 | host: { 8 | class: 'bg-border block flex-none', 9 | '[class]': `vertical() ? 'w-[1px]' : 'h-[1px] w-full'`, 10 | // '[class.my-1]': `menu`, 11 | }, 12 | }) 13 | export class Separator { 14 | vertical = input(false, { transform: booleanAttribute }); 15 | 16 | constructor() { 17 | // console.log('Separator', this.menu); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /projects/mee/sheet/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/sheet/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of sheet 3 | */ 4 | 5 | export * from './sheet'; 6 | -------------------------------------------------------------------------------- /projects/mee/sidenav/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/sidenav/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './sidenav'; 2 | -------------------------------------------------------------------------------- /projects/mee/skeleton/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/skeleton/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './skeleton'; 2 | -------------------------------------------------------------------------------- /projects/mee/skeleton/skeleton-llm.md: -------------------------------------------------------------------------------- 1 | # Skeleton 2 | 3 | ```typescript 4 | import { Skeleton } from '@/ui/skeleton'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `mee-skeleton` 10 | 11 | - **Inputs** 12 | - `width`: string - The width of the skeleton 13 | - `height`: string - The height of the skeleton 14 | - `shape`: 'circle' | 'rectangle' - The shape of the skeleton 15 | - **Export** - `meeSkeleton` - Template reference 16 | 17 | ## Usage 18 | 19 | ```html 20 | 21 | 22 | ``` 23 | -------------------------------------------------------------------------------- /projects/mee/skeleton/skeleton.ts: -------------------------------------------------------------------------------- 1 | import { Component, input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mee-skeleton', 5 | template: ``, 6 | host: { 7 | class: 'block animate-pulse bg-muted', 8 | '[class]': `shape() === 'circle' ? 'rounded-full' : 'rounded-md'`, 9 | }, 10 | }) 11 | export class Skeleton { 12 | readonly shape = input<'circle' | 'rectangle'>('rectangle'); 13 | readonly width = input('100%'); 14 | readonly height = input('20px'); 15 | } 16 | -------------------------------------------------------------------------------- /projects/mee/slider/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/slider/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of slider 3 | */ 4 | 5 | export * from './slider'; 6 | -------------------------------------------------------------------------------- /projects/mee/sonner/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/sonner/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of sonner 3 | */ 4 | 5 | export { sonnerPortal } from './sonner'; 6 | -------------------------------------------------------------------------------- /projects/mee/spinner/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/spinner/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './spinner'; 2 | -------------------------------------------------------------------------------- /projects/mee/spinner/spinner-llm.md: -------------------------------------------------------------------------------- 1 | # Spinner 2 | 3 | ```typescript 4 | import { Spinner } from '@/ui/spinner'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `mee-spinner` 10 | 11 | - **Inputs** 12 | - `size`: 'small' | 'medium' | 'large' = 'medium' - The size of the spinner 13 | - `mode`: 'light' | 'dark' | '' = 'light' - The mode of the spinner 14 | - `diameter`: number = 35 - The diameter of the spinner 15 | - `strokeWidth`: number = 3 - The stroke width of the spinner 16 | - `root`: boolean = false - Whether the spinner is the root spinner 17 | - **Export** - `meeSpinner` - Template reference 18 | 19 | ## Usage 20 | 21 | ```html 22 | 29 | ``` 30 | -------------------------------------------------------------------------------- /projects/mee/src/public-api.ts: -------------------------------------------------------------------------------- 1 | export default {}; 2 | -------------------------------------------------------------------------------- /projects/mee/stepper/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/stepper/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './stepper'; 2 | -------------------------------------------------------------------------------- /projects/mee/stepper/stepper-llm.md: -------------------------------------------------------------------------------- 1 | # Stepper 2 | 3 | ```typescript 4 | import { Stepper, Step, StepHeader } from '@/ui/stepper'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `mee-stepper` 10 | 11 | - **Inputs** 12 | - `activeIndex`: number = 0 - The index of the active step (2way) 13 | - `direction`: 'horizontal' | 'vertical' = 'horizontal' - The direction of the stepper 14 | - **Export** - `meeStepper` - Template reference 15 | 16 | ### `mee-step` 17 | 18 | - **Inputs** 19 | - `title`: string - The title of the step 20 | - **Export** - `meeStep` - Template reference 21 | 22 | ### `[meeStepHeader]` 23 | 24 | ## Usage 25 | 26 | ```html 27 | 28 | Step 1 29 | Step 2 30 | Step 3 31 | 32 | ``` 33 | -------------------------------------------------------------------------------- /projects/mee/switch/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/switch/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of switch 3 | */ 4 | 5 | export * from './switch'; 6 | -------------------------------------------------------------------------------- /projects/mee/switch/switch-llm.md: -------------------------------------------------------------------------------- 1 | # Switch 2 | 3 | ```typescript 4 | import { Switch } from '@/ui/switch'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### `mee-switch` 10 | 11 | - **Inputs** 12 | - `checked`: boolean = false - Whether the switch is checked (2way) 13 | - `disabled`: boolean = false - Whether the switch is disabled 14 | - **Outputs** 15 | - `checkedChange`: EventEmitter - Emits the checked value when it changes 16 | - `change`: EventEmitter - Emits the checked value when it changes 17 | - **Export** - `meeSwitch` - Template reference 18 | 19 | ## Usage 20 | 21 | ```html 22 | 23 | ``` 24 | -------------------------------------------------------------------------------- /projects/mee/table/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/table/public-api.ts: -------------------------------------------------------------------------------- 1 | import { 2 | BodyRow, 3 | BodyRowDef, 4 | Cell, 5 | CellDef, 6 | Column, 7 | HeadDef, 8 | Head, 9 | Table, 10 | HeadRow, 11 | HeadRowDef, 12 | } from './table'; 13 | 14 | export * from './table'; 15 | 16 | export const TableComponents = [ 17 | BodyRow, 18 | BodyRowDef, 19 | Cell, 20 | CellDef, 21 | Head, 22 | HeadDef, 23 | HeadRow, 24 | HeadRowDef, 25 | Column, 26 | Table, 27 | ]; 28 | -------------------------------------------------------------------------------- /projects/mee/tabs/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/tabs/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of tab 3 | */ 4 | 5 | export * from './tab'; 6 | -------------------------------------------------------------------------------- /projects/mee/theme/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/theme/public-api.ts: -------------------------------------------------------------------------------- 1 | export { injectTheme } from './theme.service'; 2 | export { ThemeButton } from './theme-button'; 3 | -------------------------------------------------------------------------------- /projects/mee/theme/theme-llm.md: -------------------------------------------------------------------------------- 1 | # Theme 2 | 3 | ```typescript 4 | import { ThemeButton, injectTheme } from '@/ui/theme'; 5 | ``` 6 | 7 | ## Components 8 | 9 | ### ThemeButton 10 | 11 | ```html 12 | 13 | ``` 14 | 15 | ## Usage 16 | 17 | ```typescript 18 | const theme = injectTheme(); 19 | 20 | theme.toggle(); 21 | theme.mode(); // 'light' | 'dark' | '' 22 | theme.mode.set('light'); 23 | ``` 24 | -------------------------------------------------------------------------------- /projects/mee/theme/theme.service.ts: -------------------------------------------------------------------------------- 1 | import { inject, Injectable, signal } from '@angular/core'; 2 | import { isClient } from '@ngbase/adk/utils'; 3 | 4 | @Injectable({ providedIn: 'root' }) 5 | export class ThemeService { 6 | readonly mode = signal<'light' | 'dark' | ''>('light'); 7 | 8 | constructor() { 9 | if (isClient()) { 10 | const theme = localStorage.getItem('theme'); 11 | this._update((theme as 'light' | 'dark') || 'light'); 12 | } 13 | } 14 | 15 | toggle() { 16 | this._update(this.mode() === 'dark' ? 'light' : 'dark'); 17 | } 18 | 19 | private _update(mode: 'light' | 'dark' = 'light') { 20 | const body = document.body; 21 | if (mode === 'dark') { 22 | body.classList.add('dark'); 23 | } else { 24 | body.classList.remove('dark'); 25 | } 26 | localStorage.setItem('theme', mode); 27 | this.mode.set(mode); 28 | } 29 | } 30 | 31 | export const injectTheme = () => inject(ThemeService); 32 | -------------------------------------------------------------------------------- /projects/mee/toggle-group/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/toggle-group/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of toggle-group 3 | */ 4 | 5 | export * from './toggle-group'; 6 | -------------------------------------------------------------------------------- /projects/mee/toggle-group/toggle-group-llm.md: -------------------------------------------------------------------------------- 1 | # Toggle 2 | 3 | ```typescript 4 | import { ToggleGroup, ToggleItem } from '@/ui/toggle-group'; 5 | ``` 6 | 7 | ### `mee-toggle-group` 8 | 9 | - **inputs** 10 | 11 | - `value`: boolean (2way) 12 | - `multiple`: boolean 13 | 14 | - **exports** - `meeToggleGroup` 15 | 16 | ### `mee-toggle-item` 17 | 18 | - **inputs** 19 | 20 | - `value`: boolean 21 | - `disabled`: boolean 22 | 23 | - **exports** - `meeToggleItem` 24 | 25 | ## Usage 26 | 27 | ```html 28 | 29 | 30 | 31 | 32 | ``` 33 | -------------------------------------------------------------------------------- /projects/mee/toggle-group/toggle-group.spec.ts: -------------------------------------------------------------------------------- 1 | import { render, RenderResult } from '@ngbase/adk/test'; 2 | import { ToggleGroup } from './toggle-group'; 3 | 4 | describe('ToggleGroupComponent', () => { 5 | let component: ToggleGroup; 6 | let view: RenderResult>; 7 | 8 | beforeEach(async () => { 9 | view = await render(ToggleGroup); 10 | component = view.host; 11 | view.detectChanges(); 12 | }); 13 | 14 | it('should create', () => { 15 | expect(component).toBeTruthy(); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /projects/mee/toggle-group/toggle-group.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Directive } from '@angular/core'; 2 | import { NgbToggleGroup, NgbToggleItem } from '@ngbase/adk/toggle-group'; 3 | 4 | @Component({ 5 | selector: 'mee-toggle-group', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | hostDirectives: [ 8 | { directive: NgbToggleGroup, inputs: ['value', 'multiple'], outputs: ['valueChange'] }, 9 | ], 10 | template: ` `, 11 | host: { 12 | class: 'flex gap-1', 13 | }, 14 | }) 15 | export class ToggleGroup {} 16 | 17 | @Directive({ 18 | selector: 'button[meeToggleItem]', 19 | hostDirectives: [{ directive: NgbToggleItem, inputs: ['disabled', 'value'] }], 20 | host: { 21 | class: 22 | 'inline-block rounded h-9 px-3 hover:bg-opacity-80 active:bg-opacity-70 aria-[selected=true]:bg-foreground', 23 | }, 24 | }) 25 | export class ToggleItem {} 26 | -------------------------------------------------------------------------------- /projects/mee/toggle/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/toggle/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of toggle 3 | */ 4 | 5 | export * from './toggle'; 6 | -------------------------------------------------------------------------------- /projects/mee/toggle/toggle-llm.md: -------------------------------------------------------------------------------- 1 | # Toggle 2 | 3 | ```typescript 4 | import { Toggle } from '@/ui/toggle'; 5 | ``` 6 | 7 | ### `mee-toggle` 8 | 9 | - **inputs** 10 | 11 | - `value`: boolean (2way) 12 | 13 | - **exports** - `meeToggle` 14 | 15 | ## Usage 16 | 17 | ```html 18 | 19 | ``` 20 | -------------------------------------------------------------------------------- /projects/mee/toggle/toggle.spec.ts: -------------------------------------------------------------------------------- 1 | import { render, RenderResult } from '@ngbase/adk/test'; 2 | import { Toggle } from './toggle'; 3 | 4 | describe('ToggleComponent', () => { 5 | let component: Toggle; 6 | let view: RenderResult; 7 | 8 | beforeEach(async () => { 9 | view = await render(Toggle); 10 | component = view.host; 11 | view.detectChanges(); 12 | }); 13 | 14 | it('should create', () => { 15 | expect(component).toBeTruthy(); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /projects/mee/toggle/toggle.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { NgbToggle } from '@ngbase/adk/toggle'; 3 | 4 | @Component({ 5 | selector: 'button[meeToggle]', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | hostDirectives: [{ directive: NgbToggle, inputs: ['value'], outputs: ['valueChange'] }], 8 | template: ``, 9 | host: { 10 | class: 'block w-9 h-9 rounded relative aria-[pressed=true]:bg-foreground', 11 | }, 12 | }) 13 | export class Toggle {} 14 | -------------------------------------------------------------------------------- /projects/mee/tooltip/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "./public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/tooltip/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of tooltip 3 | */ 4 | 5 | export { provideTooltipOptions, Tooltip } from './tooltip'; 6 | -------------------------------------------------------------------------------- /projects/mee/tooltip/tooltip-llm.md: -------------------------------------------------------------------------------- 1 | # Tooltip 2 | 3 | ```typescript 4 | import { Tooltip } from '@/ui/tooltip'; 5 | ``` 6 | 7 | ## Components 8 | 9 | PopoverPosition = 10 | | 'top' 11 | | 'bottom' 12 | | 'left' 13 | | 'right' 14 | | 'rs' 15 | | 're' 16 | | 'ls' 17 | | 'le' 18 | | 'tl' 19 | | 'tr' 20 | | 'bl' 21 | | 'br'; 22 | 23 | ### `mee-tooltip` 24 | 25 | - **inputs** 26 | 27 | - `meeTooltip`: string 28 | - `meeTooltipPosition`: PopoverPosition 29 | - `delay`: number 30 | 31 | - **exports** - `meeTooltip` 32 | 33 | ## Usage 34 | 35 | ```html 36 | 37 | ``` 38 | -------------------------------------------------------------------------------- /projects/mee/tour/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/tour/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './tour'; 2 | -------------------------------------------------------------------------------- /projects/mee/tour/tour.ts: -------------------------------------------------------------------------------- 1 | import { Directive, inject, InjectionToken } from '@angular/core'; 2 | import { NgbTour, NgbTourService, NgbTourStep } from '@ngbase/adk/tour'; 3 | 4 | export const TourService = new InjectionToken('TourService', { 5 | providedIn: 'root', 6 | factory: () => inject(NgbTourService), 7 | }); 8 | 9 | @Directive({ 10 | selector: '[meeTour]', 11 | hostDirectives: [NgbTour], 12 | }) 13 | export class Tour {} 14 | 15 | @Directive({ 16 | selector: '[meeTourStep]', 17 | hostDirectives: [{ directive: NgbTourStep, inputs: ['ngbTourStep: meeTourStep'] }], 18 | }) 19 | export class TourStep {} 20 | -------------------------------------------------------------------------------- /projects/mee/tree/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/tree/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './tree'; 2 | -------------------------------------------------------------------------------- /projects/mee/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/lib", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "inlineSources": true, 9 | "types": [] 10 | }, 11 | "exclude": ["**/*.spec.ts"] 12 | } 13 | -------------------------------------------------------------------------------- /projects/mee/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false, 6 | "paths": { 7 | "@ngbase/adk/*": ["../../dist/adk/*"] 8 | } 9 | }, 10 | "angularCompilerOptions": { 11 | "compilationMode": "partial" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /projects/mee/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": ["jest"] 7 | }, 8 | "include": ["projects/**/*.spec.ts", "projects/**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /projects/mee/typography/heading.ts: -------------------------------------------------------------------------------- 1 | import { Directive, input } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[meeHeader]', 5 | host: { 6 | '[class]': `'font-semibold ' + (meeHeader() == 'sm' 7 | ? 'text-2xl' 8 | : meeHeader() == 'md' 9 | ? 'text-3xl' 10 | : meeHeader() == 'lg' 11 | ? 'text-4xl' 12 | : meeHeader() == 'xs' 13 | ? 'text-base font-semibold' 14 | : '!font-medium')`, 15 | }, 16 | }) 17 | export class Heading { 18 | meeHeader = input<'xs' | 'sm' | 'md' | 'lg' | ''>(); 19 | } 20 | -------------------------------------------------------------------------------- /projects/mee/typography/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "public-api.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/mee/typography/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of typography 3 | */ 4 | 5 | export * from './heading'; 6 | -------------------------------------------------------------------------------- /setup-jest.ts: -------------------------------------------------------------------------------- 1 | import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless'; 2 | 3 | setupZonelessTestEnv(); 4 | 5 | globalThis.ResizeObserver = jest.fn().mockImplementation(() => ({ 6 | observe: jest.fn(), 7 | unobserve: jest.fn(), 8 | disconnect: jest.fn(), 9 | })); 10 | 11 | let scrollIntoViewMock = jest.fn(); 12 | window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock; 13 | 14 | globalThis.DOMRect = class { 15 | static fromRect: () => { 16 | top: 0; 17 | left: 0; 18 | bottom: 0; 19 | right: 0; 20 | width: 0; 21 | height: 0; 22 | x: 0; 23 | y: 0; 24 | toJSON: () => '{}'; 25 | }; 26 | } as any; 27 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": ["jest"] 7 | }, 8 | "include": ["projects/**/*.spec.ts", "projects/**/*.d.ts"] 9 | } 10 | --------------------------------------------------------------------------------