├── .editorconfig ├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── .vscode ├── extensions.json ├── launch.json └── tasks.json ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── angular.json ├── package.json ├── postcss.config.js ├── projects ├── consumer │ ├── README.md │ ├── sitemap-creator.js │ ├── src │ │ ├── app │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.html │ │ │ ├── app.component.scss │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── docs │ │ │ │ ├── docs-routing.ts │ │ │ │ ├── docs.component.html │ │ │ │ ├── docs.component.scss │ │ │ │ ├── docs.component.ts │ │ │ │ ├── docs.module.ts │ │ │ │ ├── features │ │ │ │ │ ├── accordion │ │ │ │ │ │ ├── accordion.component.html │ │ │ │ │ │ ├── accordion.component.scss │ │ │ │ │ │ ├── accordion.component.spec.ts │ │ │ │ │ │ └── accordion.component.ts │ │ │ │ │ ├── alert │ │ │ │ │ │ ├── alert.component.html │ │ │ │ │ │ ├── alert.component.scss │ │ │ │ │ │ ├── alert.component.spec.ts │ │ │ │ │ │ └── alert.component.ts │ │ │ │ │ ├── avatar │ │ │ │ │ │ ├── avatar.component.html │ │ │ │ │ │ ├── avatar.component.scss │ │ │ │ │ │ ├── avatar.component.spec.ts │ │ │ │ │ │ └── avatar.component.ts │ │ │ │ │ ├── breadcrumb │ │ │ │ │ │ ├── breadcrumb.component.html │ │ │ │ │ │ ├── breadcrumb.component.scss │ │ │ │ │ │ └── breadcrumb.component.ts │ │ │ │ │ ├── button-group │ │ │ │ │ │ ├── button-group.component.html │ │ │ │ │ │ ├── button-group.component.scss │ │ │ │ │ │ ├── button-group.component.spec.ts │ │ │ │ │ │ └── button-group.component.ts │ │ │ │ │ ├── button │ │ │ │ │ │ ├── button.component.html │ │ │ │ │ │ ├── button.component.scss │ │ │ │ │ │ ├── button.component.spec.ts │ │ │ │ │ │ └── button.component.ts │ │ │ │ │ ├── checkbox │ │ │ │ │ │ ├── checkbox.component.html │ │ │ │ │ │ ├── checkbox.component.scss │ │ │ │ │ │ ├── checkbox.component.spec.ts │ │ │ │ │ │ └── checkbox.component.ts │ │ │ │ │ ├── chip │ │ │ │ │ │ ├── chip.component.html │ │ │ │ │ │ ├── chip.component.scss │ │ │ │ │ │ └── chip.component.ts │ │ │ │ │ ├── collapse │ │ │ │ │ │ ├── collapse.component.html │ │ │ │ │ │ ├── collapse.component.scss │ │ │ │ │ │ ├── collapse.component.spec.ts │ │ │ │ │ │ └── collapse.component.ts │ │ │ │ │ ├── dialog │ │ │ │ │ │ ├── dialog.component.html │ │ │ │ │ │ ├── dialog.component.scss │ │ │ │ │ │ ├── dialog.component.spec.ts │ │ │ │ │ │ └── dialog.component.ts │ │ │ │ │ ├── iconbutton │ │ │ │ │ │ ├── icon-button.component.html │ │ │ │ │ │ ├── icon-button.component.scss │ │ │ │ │ │ └── icon-button.component.ts │ │ │ │ │ ├── input │ │ │ │ │ │ ├── input.component.html │ │ │ │ │ │ ├── input.component.scss │ │ │ │ │ │ ├── input.component.spec.ts │ │ │ │ │ │ └── input.component.ts │ │ │ │ │ ├── pagination │ │ │ │ │ │ ├── pagination.component.html │ │ │ │ │ │ ├── pagination.component.scss │ │ │ │ │ │ └── pagination.component.ts │ │ │ │ │ ├── radio │ │ │ │ │ │ ├── radio.component.html │ │ │ │ │ │ ├── radio.component.scss │ │ │ │ │ │ ├── radio.component.spec.ts │ │ │ │ │ │ └── radio.component.ts │ │ │ │ │ ├── select │ │ │ │ │ │ ├── select.component.html │ │ │ │ │ │ ├── select.component.scss │ │ │ │ │ │ ├── select.component.spec.ts │ │ │ │ │ │ └── select.component.ts │ │ │ │ │ ├── slider │ │ │ │ │ │ ├── slider.component.html │ │ │ │ │ │ ├── slider.component.scss │ │ │ │ │ │ └── slider.component.ts │ │ │ │ │ ├── switch │ │ │ │ │ │ ├── switch.component.html │ │ │ │ │ │ ├── switch.component.scss │ │ │ │ │ │ ├── switch.component.spec.ts │ │ │ │ │ │ └── switch.component.ts │ │ │ │ │ ├── textarea │ │ │ │ │ │ ├── textarea.component.html │ │ │ │ │ │ ├── textarea.component.scss │ │ │ │ │ │ ├── textarea.component.spec.ts │ │ │ │ │ │ └── textarea.component.ts │ │ │ │ │ └── typography │ │ │ │ │ │ ├── typography.component.html │ │ │ │ │ │ ├── typography.component.scss │ │ │ │ │ │ ├── typography.component.spec.ts │ │ │ │ │ │ └── typography.component.ts │ │ │ │ ├── footer │ │ │ │ │ ├── footer.component.html │ │ │ │ │ ├── footer.component.scss │ │ │ │ │ ├── footer.component.spec.ts │ │ │ │ │ └── footer.component.ts │ │ │ │ ├── header │ │ │ │ │ └── header.component.html │ │ │ │ ├── main │ │ │ │ │ ├── main.component.html │ │ │ │ │ ├── main.component.scss │ │ │ │ │ ├── main.component.spec.ts │ │ │ │ │ └── main.component.ts │ │ │ │ ├── pages │ │ │ │ │ ├── about-angular │ │ │ │ │ │ ├── about-angular.component.html │ │ │ │ │ │ ├── about-angular.component.scss │ │ │ │ │ │ ├── about-angular.component.spec.ts │ │ │ │ │ │ └── about-angular.component.ts │ │ │ │ │ ├── about-tailwind │ │ │ │ │ │ ├── about-tailwind.component.html │ │ │ │ │ │ ├── about-tailwind.component.scss │ │ │ │ │ │ ├── about-tailwind.component.spec.ts │ │ │ │ │ │ └── about-tailwind.component.ts │ │ │ │ │ ├── colors │ │ │ │ │ │ ├── colors.component.html │ │ │ │ │ │ ├── colors.component.scss │ │ │ │ │ │ ├── colors.component.spec.ts │ │ │ │ │ │ └── colors.component.ts │ │ │ │ │ ├── fonts │ │ │ │ │ │ ├── fonts.component.html │ │ │ │ │ │ ├── fonts.component.scss │ │ │ │ │ │ ├── fonts.component.spec.ts │ │ │ │ │ │ └── fonts.component.ts │ │ │ │ │ ├── installation │ │ │ │ │ │ ├── installation.component.html │ │ │ │ │ │ ├── installation.component.scss │ │ │ │ │ │ ├── installation.component.spec.ts │ │ │ │ │ │ └── installation.component.ts │ │ │ │ │ ├── license │ │ │ │ │ │ ├── license.component.html │ │ │ │ │ │ ├── license.component.scss │ │ │ │ │ │ ├── license.component.spec.ts │ │ │ │ │ │ └── license.component.ts │ │ │ │ │ ├── release-notes │ │ │ │ │ │ ├── release-notes.component.html │ │ │ │ │ │ ├── release-notes.component.scss │ │ │ │ │ │ ├── release-notes.component.spec.ts │ │ │ │ │ │ └── release-notes.component.ts │ │ │ │ │ └── theming │ │ │ │ │ │ ├── theming.component.html │ │ │ │ │ │ ├── theming.component.scss │ │ │ │ │ │ ├── theming.component.spec.ts │ │ │ │ │ │ └── theming.component.ts │ │ │ │ ├── right-sidebar │ │ │ │ │ ├── right-sidebar.component.html │ │ │ │ │ ├── right-sidebar.component.scss │ │ │ │ │ ├── right-sidebar.component.spec.ts │ │ │ │ │ └── right-sidebar.component.ts │ │ │ │ └── sidebar │ │ │ │ │ ├── sidebar.component.html │ │ │ │ │ ├── sidebar.component.scss │ │ │ │ │ ├── sidebar.component.spec.ts │ │ │ │ │ └── sidebar.component.ts │ │ │ ├── home │ │ │ │ ├── header │ │ │ │ │ ├── header.component.html │ │ │ │ │ ├── header.component.scss │ │ │ │ │ ├── header.component.spec.ts │ │ │ │ │ └── header.component.ts │ │ │ │ ├── home.component.html │ │ │ │ ├── home.component.scss │ │ │ │ ├── home.component.spec.ts │ │ │ │ └── home.component.ts │ │ │ └── shared │ │ │ │ ├── components │ │ │ │ ├── code-previewer │ │ │ │ │ ├── code-previewer.component.html │ │ │ │ │ ├── code-previewer.component.scss │ │ │ │ │ └── code-previewer.component.ts │ │ │ │ ├── code │ │ │ │ │ ├── code.component.html │ │ │ │ │ ├── code.component.scss │ │ │ │ │ ├── code.component.spec.ts │ │ │ │ │ └── code.component.ts │ │ │ │ ├── feature-preview │ │ │ │ │ ├── feature-preview.component.html │ │ │ │ │ ├── feature-preview.component.scss │ │ │ │ │ ├── feature-preview.component.spec.ts │ │ │ │ │ └── feature-preview.component.ts │ │ │ │ ├── h1 │ │ │ │ │ ├── h1.component.html │ │ │ │ │ ├── h1.component.scss │ │ │ │ │ ├── h1.component.spec.ts │ │ │ │ │ └── h1.component.ts │ │ │ │ ├── h2 │ │ │ │ │ ├── h2.component.html │ │ │ │ │ ├── h2.component.scss │ │ │ │ │ ├── h2.component.spec.ts │ │ │ │ │ └── h2.component.ts │ │ │ │ ├── navbar │ │ │ │ │ ├── navbar.component.html │ │ │ │ │ ├── navbar.component.scss │ │ │ │ │ ├── navbar.component.spec.ts │ │ │ │ │ └── navbar.component.ts │ │ │ │ ├── paragraph │ │ │ │ │ ├── paragraph.component.html │ │ │ │ │ ├── paragraph.component.scss │ │ │ │ │ ├── paragraph.component.spec.ts │ │ │ │ │ └── paragraph.component.ts │ │ │ │ └── properties-table │ │ │ │ │ ├── properties-table.component.html │ │ │ │ │ ├── properties-table.component.scss │ │ │ │ │ ├── properties-table.component.spec.ts │ │ │ │ │ └── properties-table.component.ts │ │ │ │ ├── model │ │ │ │ ├── property.model.ts │ │ │ │ └── sidebar-item.model.ts │ │ │ │ ├── shared.module.ts │ │ │ │ └── shared.service.ts │ │ ├── assets │ │ │ ├── .gitkeep │ │ │ ├── avatar.jpeg │ │ │ └── images │ │ │ │ ├── accordions.jpeg │ │ │ │ ├── alerts.jpeg │ │ │ │ ├── angular.svg │ │ │ │ ├── avatar.jpeg │ │ │ │ ├── breadcrumb.jpeg │ │ │ │ ├── buttongroup.jpeg │ │ │ │ ├── buttons.jpeg │ │ │ │ ├── cards.jpeg │ │ │ │ ├── checkboxes.jpeg │ │ │ │ ├── chips.jpeg │ │ │ │ ├── collapse.jpeg │ │ │ │ ├── community.svg │ │ │ │ ├── dialogs.jpeg │ │ │ │ ├── footer │ │ │ │ ├── analytics-by-nepcha-black-transparent.webp │ │ │ │ └── vercel.png │ │ │ │ ├── global-styles.png │ │ │ │ ├── header-bg.jpg │ │ │ │ ├── header-bg.png │ │ │ │ ├── header-bg.svg │ │ │ │ ├── header-figma.jpeg │ │ │ │ ├── icon-buttons.jpeg │ │ │ │ ├── inputs.jpeg │ │ │ │ ├── logo.png │ │ │ │ ├── menus.jpeg │ │ │ │ ├── navbars.jpeg │ │ │ │ ├── pagination.jpeg │ │ │ │ ├── popovers.jpeg │ │ │ │ ├── progress-bar.jpeg │ │ │ │ ├── radio-buttons.jpeg │ │ │ │ ├── selects.jpeg │ │ │ │ ├── slider.jpeg │ │ │ │ ├── switch.jpeg │ │ │ │ ├── tab.jpeg │ │ │ │ ├── tabs.jpeg │ │ │ │ ├── tailwind-logo.svg │ │ │ │ ├── text-area.jpeg │ │ │ │ ├── tooltip.jpeg │ │ │ │ └── typography.jpeg │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── robots.txt │ │ ├── sitemap.xml │ │ └── styles.scss │ ├── tsconfig.app.json │ └── tsconfig.spec.json └── david-ui-angular │ ├── README.md │ ├── ng-package.json │ ├── package.json │ ├── src │ ├── lib │ │ ├── assets │ │ │ ├── angle-up-solid.svg │ │ │ ├── check.svg │ │ │ └── xmark-solid.svg │ │ ├── components │ │ │ ├── accordion │ │ │ │ ├── accordion-body │ │ │ │ │ ├── accordion-body.component.html │ │ │ │ │ ├── accordion-body.component.scss │ │ │ │ │ └── accordion-body.component.ts │ │ │ │ ├── accordion-expansion │ │ │ │ │ ├── accordion-expansion.component.html │ │ │ │ │ ├── accordion-expansion.component.scss │ │ │ │ │ └── accordion-expansion.component.ts │ │ │ │ ├── accordion-header │ │ │ │ │ ├── accordion-header.component.html │ │ │ │ │ ├── accordion-header.component.scss │ │ │ │ │ └── accordion-header.component.ts │ │ │ │ ├── accordion.component.html │ │ │ │ ├── accordion.component.scss │ │ │ │ ├── accordion.component.ts │ │ │ │ └── accordion.module.ts │ │ │ ├── alert │ │ │ │ ├── alert.component.html │ │ │ │ ├── alert.component.scss │ │ │ │ ├── alert.component.ts │ │ │ │ └── alert.module.ts │ │ │ ├── avatar │ │ │ │ ├── avatar.component.html │ │ │ │ ├── avatar.component.scss │ │ │ │ ├── avatar.component.ts │ │ │ │ └── avatar.module.ts │ │ │ ├── breadcrumb │ │ │ │ ├── breadcrumb-item-directive │ │ │ │ │ └── breadcrumb-item.directive.ts │ │ │ │ ├── breadcrumb.component.html │ │ │ │ ├── breadcrumb.component.scss │ │ │ │ ├── breadcrumb.component.ts │ │ │ │ └── breadcrumb.module.ts │ │ │ ├── button-group │ │ │ │ ├── button-group.component.html │ │ │ │ ├── button-group.component.scss │ │ │ │ ├── button-group.component.ts │ │ │ │ └── button-group.module.ts │ │ │ ├── button │ │ │ │ ├── button.component.html │ │ │ │ ├── button.component.scss │ │ │ │ ├── button.component.ts │ │ │ │ └── button.module.ts │ │ │ ├── checkbox │ │ │ │ ├── checkbox.component.html │ │ │ │ ├── checkbox.component.scss │ │ │ │ ├── checkbox.component.ts │ │ │ │ └── checkbox.module.ts │ │ │ ├── chip │ │ │ │ ├── chip.component.html │ │ │ │ ├── chip.component.scss │ │ │ │ ├── chip.component.spec.ts │ │ │ │ ├── chip.component.ts │ │ │ │ └── chip.module.ts │ │ │ ├── collapse │ │ │ │ ├── collapse.component.html │ │ │ │ ├── collapse.component.scss │ │ │ │ ├── collapse.component.ts │ │ │ │ └── collapse.module.ts │ │ │ ├── dialog │ │ │ │ ├── dialog-body │ │ │ │ │ ├── dialog-body.component.html │ │ │ │ │ ├── dialog-body.component.scss │ │ │ │ │ └── dialog-body.component.ts │ │ │ │ ├── dialog-footer │ │ │ │ │ ├── dialog-footer.component.html │ │ │ │ │ ├── dialog-footer.component.scss │ │ │ │ │ └── dialog-footer.component.ts │ │ │ │ ├── dialog-header │ │ │ │ │ ├── dialog-header.component.html │ │ │ │ │ ├── dialog-header.component.scss │ │ │ │ │ └── dialog-header.component.ts │ │ │ │ ├── dialog.component.html │ │ │ │ ├── dialog.component.scss │ │ │ │ ├── dialog.component.ts │ │ │ │ └── dialog.module.ts │ │ │ ├── iconbutton │ │ │ │ ├── icon-button.component.html │ │ │ │ ├── icon-button.component.scss │ │ │ │ ├── icon-button.component.ts │ │ │ │ └── icon-button.module.ts │ │ │ ├── input │ │ │ │ ├── input.component.html │ │ │ │ ├── input.component.scss │ │ │ │ ├── input.component.spec.ts │ │ │ │ ├── input.component.ts │ │ │ │ └── input.module.ts │ │ │ ├── paginator │ │ │ │ ├── paginator.component.html │ │ │ │ ├── paginator.component.scss │ │ │ │ ├── paginator.component.ts │ │ │ │ └── paginator.module.ts │ │ │ ├── radiobutton │ │ │ │ ├── radio-button.component.html │ │ │ │ ├── radio-button.component.scss │ │ │ │ ├── radio-button.component.ts │ │ │ │ └── radio-button.module.ts │ │ │ ├── select │ │ │ │ ├── options │ │ │ │ │ ├── options.component.html │ │ │ │ │ ├── options.component.scss │ │ │ │ │ └── options.component.ts │ │ │ │ ├── select.component.html │ │ │ │ ├── select.component.scss │ │ │ │ ├── select.component.ts │ │ │ │ └── select.module.ts │ │ │ ├── slider │ │ │ │ ├── slider.component.html │ │ │ │ ├── slider.component.scss │ │ │ │ ├── slider.component.ts │ │ │ │ └── slider.module.ts │ │ │ ├── switch │ │ │ │ ├── switch.component.html │ │ │ │ ├── switch.component.scss │ │ │ │ ├── switch.component.ts │ │ │ │ └── switch.module.ts │ │ │ ├── textarea │ │ │ │ ├── textarea.component.html │ │ │ │ ├── textarea.component.scss │ │ │ │ ├── textarea.component.ts │ │ │ │ └── textarea.module.ts │ │ │ └── typography │ │ │ │ ├── typography.component.html │ │ │ │ ├── typography.component.scss │ │ │ │ ├── typography.component.ts │ │ │ │ └── typography.module.ts │ │ ├── david-ui-angular.module.ts │ │ ├── services │ │ │ ├── david-ui-angular.service.spec.ts │ │ │ ├── david-ui-angular.service.ts │ │ │ └── select │ │ │ │ ├── dui-select.service.spec.ts │ │ │ │ └── dui-select.service.ts │ │ ├── shared │ │ │ ├── components │ │ │ │ ├── cdk-dropdown │ │ │ │ │ ├── cdk-dropdown.component.scss │ │ │ │ │ └── cdk-dropdown.component.ts │ │ │ │ └── dui-icon │ │ │ │ │ └── dui-icon.component.ts │ │ │ ├── directive │ │ │ │ ├── dropdown-for.directive.ts │ │ │ │ └── dui-ripple.directive.ts │ │ │ └── models │ │ │ │ └── paginatedRes.ts │ │ ├── styles │ │ │ └── styles.scss │ │ ├── theme │ │ │ ├── components │ │ │ │ ├── alert │ │ │ │ │ ├── alert-Ghost.ts │ │ │ │ │ ├── alert-Gradient.ts │ │ │ │ │ ├── alert-Outlined.ts │ │ │ │ │ ├── alert-filled.ts │ │ │ │ │ └── alert-theme.ts │ │ │ │ ├── avatar │ │ │ │ │ ├── avatar-borders.ts │ │ │ │ │ └── avatar-theme.ts │ │ │ │ ├── breadcrumb │ │ │ │ │ └── breadcrumb-theme.ts │ │ │ │ ├── button-group │ │ │ │ │ ├── buttonGroupDividerColors.ts │ │ │ │ │ └── buttonGroupTheme.ts │ │ │ │ ├── button │ │ │ │ │ ├── button-fillled.ts │ │ │ │ │ ├── button-gradient.ts │ │ │ │ │ ├── button-outline.ts │ │ │ │ │ ├── button-text.ts │ │ │ │ │ └── button-theme.ts │ │ │ │ ├── checkbox │ │ │ │ │ ├── checkbox-colors.ts │ │ │ │ │ └── checkbox-theme.ts │ │ │ │ ├── chip │ │ │ │ │ ├── chip-filled.ts │ │ │ │ │ ├── chip-ghost.ts │ │ │ │ │ ├── chip-gradient.ts │ │ │ │ │ ├── chip-outlined.ts │ │ │ │ │ └── chip-theme.ts │ │ │ │ ├── collapse │ │ │ │ │ └── collapse-theme.ts │ │ │ │ ├── dialog │ │ │ │ │ ├── dialog-body-theme.ts │ │ │ │ │ ├── dialog-footer-theme.ts │ │ │ │ │ ├── dialog-header-theme.ts │ │ │ │ │ └── dialog-theme.ts │ │ │ │ ├── iconbutton │ │ │ │ │ └── iconbutton-theme.ts │ │ │ │ ├── input │ │ │ │ │ ├── input-outline-theme │ │ │ │ │ │ ├── input-outline-colors.ts │ │ │ │ │ │ ├── input-outline-labels-colors.ts │ │ │ │ │ │ └── input-outline-theme.ts │ │ │ │ │ ├── input-standard-theme │ │ │ │ │ │ ├── input-standard-colors.ts │ │ │ │ │ │ ├── input-standard-label-colors.ts │ │ │ │ │ │ └── input-standard-theme.ts │ │ │ │ │ ├── input-static-theme │ │ │ │ │ │ ├── input-static-colors.ts │ │ │ │ │ │ ├── input-static-label-colors.ts │ │ │ │ │ │ └── input-static-theme.ts │ │ │ │ │ └── input-theme.ts │ │ │ │ ├── paginator │ │ │ │ │ ├── paginator-theme.ts │ │ │ │ │ └── paginator-variants-theme.ts │ │ │ │ ├── radio │ │ │ │ │ ├── radio-colors.ts │ │ │ │ │ └── radio-theme.ts │ │ │ │ ├── select │ │ │ │ │ ├── select-outline-theme │ │ │ │ │ │ ├── select-outline-colors.ts │ │ │ │ │ │ ├── select-outline-label-colors.ts │ │ │ │ │ │ └── select-outline-theme.ts │ │ │ │ │ ├── select-standard │ │ │ │ │ │ ├── select-standard-colors.ts │ │ │ │ │ │ ├── select-standard-label-colors.ts │ │ │ │ │ │ └── select-standard-theme.ts │ │ │ │ │ ├── select-static │ │ │ │ │ │ ├── select-static-colors.ts │ │ │ │ │ │ ├── select-static-label-colors.ts │ │ │ │ │ │ └── select-static-theme.ts │ │ │ │ │ └── select-theme.ts │ │ │ │ ├── slider │ │ │ │ │ ├── slider-colors.ts │ │ │ │ │ └── slider-theme.ts │ │ │ │ ├── switch │ │ │ │ │ ├── switch-colors.ts │ │ │ │ │ └── switch-theme.ts │ │ │ │ ├── textarea │ │ │ │ │ ├── textarea-outline │ │ │ │ │ │ ├── textarea-outline-colors.ts │ │ │ │ │ │ ├── textarea-outline-label-colors.ts │ │ │ │ │ │ └── textarea-outline-theme.ts │ │ │ │ │ ├── textarea-standard │ │ │ │ │ │ ├── textarea-standard-colors.ts │ │ │ │ │ │ ├── textarea-standard-label-colors.ts │ │ │ │ │ │ └── textarea-standard-theme.ts │ │ │ │ │ ├── textarea-static │ │ │ │ │ │ ├── textarea-static-colors.ts │ │ │ │ │ │ ├── textarea-static-label-colors.ts │ │ │ │ │ │ └── textarea-static-theme.ts │ │ │ │ │ └── textarea-theme.ts │ │ │ │ └── typography │ │ │ │ │ ├── typography-colors.ts │ │ │ │ │ └── typography-variants.ts │ │ │ └── theme-base.ts │ │ ├── types │ │ │ ├── componentTypes │ │ │ │ ├── alert.ts │ │ │ │ ├── avatar.ts │ │ │ │ ├── breadcrumb.ts │ │ │ │ ├── button.ts │ │ │ │ ├── checkbox.ts │ │ │ │ ├── chip.ts │ │ │ │ ├── collapse.ts │ │ │ │ ├── dialog.ts │ │ │ │ ├── input.ts │ │ │ │ ├── paginator.ts │ │ │ │ ├── radio.ts │ │ │ │ ├── select.ts │ │ │ │ ├── slider.ts │ │ │ │ └── typography.ts │ │ │ ├── generic.ts │ │ │ └── index.ts │ │ └── utilities │ │ │ └── helpers │ │ │ └── string-helper.ts │ └── public-api.ts │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ └── tsconfig.spec.json ├── tailwind.config.js └── tsconfig.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 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.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 | package-lock.json 14 | 15 | # IDEs and editors 16 | .idea/ 17 | .project 18 | .classpath 19 | .c9/ 20 | *.launch 21 | .settings/ 22 | *.sublime-workspace 23 | 24 | # Visual Studio Code 25 | .vscode/* 26 | !.vscode/settings.json 27 | !.vscode/tasks.json 28 | !.vscode/launch.json 29 | !.vscode/extensions.json 30 | .history/* 31 | 32 | # Miscellaneous 33 | /.angular/cache 34 | .sass-cache/ 35 | /connect.lock 36 | /coverage 37 | /libpeerconnection.log 38 | testem.log 39 | /typings 40 | 41 | # System files 42 | .DS_Store 43 | Thumbs.db 44 | package-lock.json 45 | -------------------------------------------------------------------------------- /.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/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [1.0.0] - 2024-2-21 2 | ### Update 3 | - Angular 17 update -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution 2 | 3 | You can contribute to the package by following the steps below: 4 | 5 | 1. Fork the project - [David UI Angular](https://github.com/david-ui-org/david-ui-angular) 6 | 2. Create your feature branch (`git checkout -b feature/AmazingFeature`) 7 | 3. Commit your changes (`git commit -m 'Add some AmazingFeature'`) 8 | 4. Push to the branch (`git push origin feature/AmazingFeature`) 9 | 5. Open a pull request 10 | 6. Wait for the pull request to be reviewed 11 | 7. Get your pull request merged 12 | 8. Celebrate 🎉 13 | 9. Repeat 14 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Creative Tim 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('tailwindcss'), 4 | require('autoprefixer'), 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /projects/consumer/sitemap-creator.js: -------------------------------------------------------------------------------- 1 | const xmlbuilder = require('xmlbuilder'); 2 | const moment = require('moment'); 3 | const fs = require('fs'); 4 | 5 | 6 | 7 | // Define your application's routes 8 | const routes = [ 9 | '/', 10 | '/docs/accordion', 11 | '/docs/alert', 12 | '/docs/avatar', 13 | '/docs/breadcrumb', 14 | '/docs/button', 15 | '/docs/button-group', 16 | '/docs/checkbox', 17 | '/docs/chip', 18 | '/docs/collapse', 19 | '/docs/colors', 20 | '/docs/dialog', 21 | '/docs/fonts', 22 | '/docs/icon-button', 23 | '/docs/installation', 24 | '/docs/input', 25 | '/docs/license', 26 | '/docs/pagination', 27 | '/docs/radiobutton', 28 | '/docs/select', 29 | '/docs/slider', 30 | '/docs/switch', 31 | '/docs/textarea', 32 | '/docs/theming', 33 | '/docs/what-is-tailwind-css', 34 | ]; 35 | 36 | function generateSitemap(){ 37 | const root = xmlbuilder.create('urlset', { version: '1.0', encoding: 'UTF-8' }); 38 | root.att('xmlns', 'http://www.sitemaps.org/schemas/sitemap/0.9'); 39 | 40 | routes.forEach(route => { 41 | const url = root.ele('url'); 42 | url.ele('loc', `https://www.david-ui-angular.com${route}`); 43 | url.ele('lastmod', `${moment(new Date()).format('YYYY-MM-DD')}`); 44 | // You can add more elements like and here if needed 45 | }); 46 | 47 | // write to file 48 | fs.writeFile('./projects/consumer/src/sitemap.xml', root.toString(), (err) => { 49 | if (err) { 50 | return console.log(err); 51 | } 52 | 53 | console.log("The file was saved!"); 54 | }); 55 | } 56 | 57 | generateSitemap(); -------------------------------------------------------------------------------- /projects/consumer/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { HomeComponent } from './home/home.component'; 4 | import { DocsComponent } from './docs/docs.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: HomeComponent, 10 | data: { 11 | title: 'David UI Angular - Tailwind CSS Library for Angular', 12 | meta: [ 13 | { 14 | name: 'description', 15 | content: 'This is an example Description Meta tag!' 16 | } 17 | ], 18 | 19 | } 20 | 21 | }, 22 | { 23 | path: '', 24 | component: DocsComponent, 25 | children: [ 26 | { 27 | path: 'docs', 28 | loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule) 29 | } 30 | 31 | ] 32 | }, 33 | { 34 | path:'**', 35 | redirectTo:'/' 36 | } 37 | ]; 38 | 39 | @NgModule({ 40 | imports: [RouterModule.forRoot(routes, { 41 | anchorScrolling: 'enabled', 42 | scrollPositionRestoration: 'top', 43 | 44 | })], 45 | exports: [RouterModule] 46 | }) 47 | export class AppRoutingModule { } 48 | -------------------------------------------------------------------------------- /projects/consumer/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/consumer/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/app.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { AppComponent } from './app.component'; 5 | import { SharedModule } from './shared/shared.module'; 6 | import { DocsModule } from './docs/docs.module'; 7 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 8 | import { HomeComponent } from './home/home.component'; 9 | import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; 10 | import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs'; 11 | import { HeaderComponent } from './home/header/header.component'; 12 | @NgModule({ 13 | declarations: [AppComponent,HomeComponent, HeaderComponent], 14 | imports: [ 15 | BrowserModule, 16 | BrowserAnimationsModule, 17 | AppRoutingModule, 18 | SharedModule, 19 | DocsModule, 20 | ], 21 | bootstrap: [AppComponent], 22 | providers: [ 23 | { 24 | provide: HIGHLIGHT_OPTIONS, 25 | useValue: { 26 | coreLibraryLoader: () => import('highlight.js/lib/core'), 27 | lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'), // Optional, only if you want the line numbers 28 | languages: { 29 | typescript: () => import('highlight.js/lib/languages/typescript'), 30 | css: () => import('highlight.js/lib/languages/css'), 31 | xml: () => import('highlight.js/lib/languages/xml') 32 | }, 33 | } 34 | } 35 | ], 36 | }) 37 | export class AppModule {} 38 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/docs.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/docs.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/docs.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/docs.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | 4 | @Component({ 5 | selector: 'app-docs', 6 | templateUrl: './docs.component.html', 7 | styleUrls: ['./docs.component.scss'], 8 | }) 9 | export class DocsComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/accordion/accordion.component.scss: -------------------------------------------------------------------------------- 1 | .left-nav { 2 | top: 100px; 3 | height: 80vh; 4 | ul { 5 | li { 6 | a { 7 | &.active { 8 | color: #2196f3; 9 | } 10 | } 11 | 12 | &:last-child { 13 | margin-bottom: 20px; 14 | } 15 | } 16 | } 17 | } 18 | 19 | .right-nav { 20 | top: 100px; 21 | height: 80vh; 22 | ul { 23 | li { 24 | a { 25 | &.active { 26 | color: #2196f3; 27 | } 28 | } 29 | 30 | &:last-child { 31 | margin-bottom: 20px; 32 | } 33 | } 34 | } 35 | } 36 | 37 | .code-snippet-area { 38 | .component-preview { 39 | border-radius: 12px; 40 | background: #f9fbfd; 41 | height: 200px; 42 | 43 | .header { 44 | padding: 10px 20px 10px 20px; 45 | border-bottom: 1px solid rgba(#607d8b, 0.1); 46 | a { 47 | color: #212121; 48 | font-size: 14px; 49 | } 50 | } 51 | .content { 52 | padding: 50px; 53 | display: flex; 54 | justify-content: center; 55 | align-items: center; 56 | } 57 | } 58 | .code-section { 59 | border-radius: 12px; 60 | background: #0d1117; 61 | height: 300px; 62 | display: flex; 63 | flex-direction: column; 64 | 65 | .header { 66 | padding: 10px 20px 10px 20px; 67 | border-bottom: 1px solid rgba(#607d8b, 0.2); 68 | display: flex; 69 | justify-content: space-between; 70 | a { 71 | color: #607d8b; 72 | font-size: 14px; 73 | } 74 | } 75 | 76 | .footer { 77 | padding: 10px 0 10px 0; 78 | border-top: 1px solid rgba(#607d8b, 0.2); 79 | display: flex; 80 | justify-content: center; 81 | align-items: center; 82 | margin-top: auto; 83 | a { 84 | color: #607d8b; 85 | font-size: 14px; 86 | } 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/accordion/accordion.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AccordionComponent } from './accordion.component'; 4 | 5 | describe('AccordionComponent', () => { 6 | let component: AccordionComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [AccordionComponent] 12 | }); 13 | fixture = TestBed.createComponent(AccordionComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/alert/alert.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/alert/alert.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/alert/alert.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AlertComponent } from './alert.component'; 4 | 5 | describe('AlertComponent', () => { 6 | let component: AlertComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [AlertComponent] 12 | }); 13 | fixture = TestBed.createComponent(AlertComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/avatar/avatar.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/avatar/avatar.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/avatar/avatar.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AvatarComponent } from './avatar.component'; 4 | 5 | describe('AvatarComponent', () => { 6 | let component: AvatarComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [AvatarComponent] 12 | }); 13 | fixture = TestBed.createComponent(AvatarComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/breadcrumb/breadcrumb.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/breadcrumb/breadcrumb.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/breadcrumb/breadcrumb.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-breadcrumb', 5 | templateUrl: './breadcrumb.component.html', 6 | styleUrls: ['./breadcrumb.component.scss'] 7 | }) 8 | export class BreadcrumbComponent { 9 | 10 | importCode: string = ` import { DUIBreadCrumb } from "david-ui-angular"; 11 | 12 | @NgModule({ 13 | declarations: [AppComponent], 14 | imports: [BrowserModule, DUIBreadCrumb], 15 | providers: [], 16 | bootstrap: [AppComponent], 17 | }) 18 | export class AppModule {}`; 19 | collapseCode: string = ` 20 |
21 | 22 | 23 | Docs 24 | 25 | 26 | Components 27 | 28 | 29 | Breadcrumbs 30 | 31 | 32 |
33 | `; 34 | 35 | } 36 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/button-group/button-group.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/button-group/button-group.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/button-group/button-group.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ButtonGroupComponent } from './button-group.component'; 4 | 5 | describe('ButtonGroupComponent', () => { 6 | let component: ButtonGroupComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ButtonGroupComponent] 12 | }); 13 | fixture = TestBed.createComponent(ButtonGroupComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/button/button.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/button/button.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/button/button.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ButtonComponent } from './button.component'; 4 | 5 | describe('ButtonComponent', () => { 6 | let component: ButtonComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ButtonComponent] 12 | }); 13 | fixture = TestBed.createComponent(ButtonComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/checkbox/checkbox.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/checkbox/checkbox.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/checkbox/checkbox.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CheckboxComponent } from './checkbox.component'; 4 | 5 | describe('CheckboxComponent', () => { 6 | let component: CheckboxComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [CheckboxComponent] 12 | }); 13 | fixture = TestBed.createComponent(CheckboxComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/chip/chip.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/chip/chip.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/collapse/collapse.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/collapse/collapse.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/collapse/collapse.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CollapseComponent } from './collapse.component'; 4 | 5 | describe('CollapseComponent', () => { 6 | let component: CollapseComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [CollapseComponent] 12 | }); 13 | fixture = TestBed.createComponent(CollapseComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/collapse/collapse.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Property } from '../../../shared/model/property.model'; 3 | 4 | @Component({ 5 | selector: 'app-collapse', 6 | templateUrl: './collapse.component.html', 7 | styleUrls: ['./collapse.component.scss'], 8 | }) 9 | export class CollapseComponent { 10 | importCode: string = ` import { DUICollapse } from "david-ui-angular"; 11 | 12 | @NgModule({ 13 | declarations: [AppComponent], 14 | imports: [BrowserModule, DUICollapse], 15 | providers: [], 16 | bootstrap: [AppComponent], 17 | }) 18 | export class AppModule {}`; 19 | collapseCode: string = ` 20 | Toggle Collapse 21 | 22 | 23 | Use our Tailwind CSS collapse for your website. You can use if for 24 | accordion, collapsible items and much more. 25 | 26 | `; 27 | 28 | collapseProperties: Property[] = [ 29 | { 30 | attribute: 'className', 31 | type: 'string', 32 | description: 'Add custom className for collapse', 33 | default: "''", 34 | }, 35 | { 36 | attribute: 'open', 37 | type: 'boolean', 38 | description: 'Change collapse visibility', 39 | default: 'false', 40 | }, 41 | ]; 42 | 43 | open: boolean = false; 44 | toggleCollapse() { 45 | this.open = !this.open; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/dialog/dialog.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/dialog/dialog.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/dialog/dialog.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DialogComponent } from './dialog.component'; 4 | 5 | describe('DialogComponent', () => { 6 | let component: DialogComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [DialogComponent] 12 | }); 13 | fixture = TestBed.createComponent(DialogComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/iconbutton/icon-button.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/iconbutton/icon-button.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/input/input.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/input/input.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/input/input.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { InputComponent } from './input.component'; 4 | 5 | describe('InputComponent', () => { 6 | let component: InputComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [InputComponent] 12 | }); 13 | fixture = TestBed.createComponent(InputComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/pagination/pagination.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/pagination/pagination.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/radio/radio.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/radio/radio.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/radio/radio.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { RadioComponent } from './radio.component'; 4 | 5 | describe('RadioComponent', () => { 6 | let component: RadioComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [RadioComponent] 12 | }); 13 | fixture = TestBed.createComponent(RadioComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/select/select.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/select/select.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/select/select.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SelectComponent } from './select.component'; 4 | 5 | describe('SelectComponent', () => { 6 | let component: SelectComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [SelectComponent] 12 | }); 13 | fixture = TestBed.createComponent(SelectComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/slider/slider.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/slider/slider.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/switch/switch.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/switch/switch.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/switch/switch.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SwitchComponent } from './switch.component'; 4 | 5 | describe('SwitchComponent', () => { 6 | let component: SwitchComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [SwitchComponent] 12 | }); 13 | fixture = TestBed.createComponent(SwitchComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/textarea/textarea.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/textarea/textarea.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/textarea/textarea.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TextareaComponent } from './textarea.component'; 4 | 5 | describe('TextareaComponent', () => { 6 | let component: TextareaComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [TextareaComponent] 12 | }); 13 | fixture = TestBed.createComponent(TextareaComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/typography/typography.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/features/typography/typography.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/features/typography/typography.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TypographyComponent } from './typography.component'; 4 | 5 | describe('TypographyComponent', () => { 6 | let component: TypographyComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [TypographyComponent] 12 | }); 13 | fixture = TestBed.createComponent(TypographyComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/footer/footer.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/footer/footer.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/footer/footer.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { FooterComponent } from './footer.component'; 4 | 5 | describe('FooterComponent', () => { 6 | let component: FooterComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [FooterComponent] 12 | }); 13 | fixture = TestBed.createComponent(FooterComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-footer', 5 | templateUrl: './footer.component.html', 6 | styleUrls: ['./footer.component.scss'] 7 | }) 8 | export class FooterComponent { 9 | 10 | currentYear: number = new Date().getFullYear() 11 | 12 | } 13 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/main/main.component.scss: -------------------------------------------------------------------------------- 1 | .right-nav { 2 | ul { 3 | li { 4 | a { 5 | // font-size: 14px; 6 | // color: #78909c; 7 | 8 | // &:hover { 9 | // color: #000; 10 | // } 11 | } 12 | &:last-child { 13 | margin-bottom: 20px; 14 | } 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/main/main.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MainComponent } from './main.component'; 4 | 5 | describe('MainComponent', () => { 6 | let component: MainComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [MainComponent] 12 | }); 13 | fixture = TestBed.createComponent(MainComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/main/main.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-main', 5 | templateUrl: './main.component.html', 6 | styleUrls: ['./main.component.scss'] 7 | }) 8 | export class MainComponent { 9 | } 10 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/about-angular/about-angular.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

6 | What is Angular 7 |

8 |

9 | Coming soon 10 |

11 |
12 |
13 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/about-angular/about-angular.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/pages/about-angular/about-angular.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/about-angular/about-angular.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AboutAngularComponent } from './about-angular.component'; 4 | 5 | describe('AboutAngularComponent', () => { 6 | let component: AboutAngularComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [AboutAngularComponent] 12 | }); 13 | fixture = TestBed.createComponent(AboutAngularComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/about-angular/about-angular.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-about-angular', 5 | templateUrl: './about-angular.component.html', 6 | styleUrls: ['./about-angular.component.scss'] 7 | }) 8 | export class AboutAngularComponent {} 9 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/about-tailwind/about-tailwind.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/pages/about-tailwind/about-tailwind.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/about-tailwind/about-tailwind.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AboutTailwindComponent } from './about-tailwind.component'; 4 | 5 | describe('AboutTailwindComponent', () => { 6 | let component: AboutTailwindComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [AboutTailwindComponent] 12 | }); 13 | fixture = TestBed.createComponent(AboutTailwindComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/about-tailwind/about-tailwind.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-about-tailwind', 5 | templateUrl: './about-tailwind.component.html', 6 | styleUrls: ['./about-tailwind.component.scss'] 7 | }) 8 | export class AboutTailwindComponent { 9 | snippet: string = 10 | ` 11 | Image placeholder 12 | 13 | `; 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/colors/colors.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/pages/colors/colors.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/colors/colors.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ColorsComponent } from './colors.component'; 4 | 5 | describe('ColorsComponent', () => { 6 | let component: ColorsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ColorsComponent] 12 | }); 13 | fixture = TestBed.createComponent(ColorsComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/colors/colors.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-colors', 5 | templateUrl: './colors.component.html', 6 | styleUrls: ['./colors.component.scss'] 7 | }) 8 | export class ColorsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/fonts/fonts.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 | Tailwind CSS Customizing Fonts with Angular 5 |

6 |

7 | Coming soon 8 |

9 |
10 |
-------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/fonts/fonts.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/pages/fonts/fonts.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/fonts/fonts.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { FontsComponent } from './fonts.component'; 4 | 5 | describe('FontsComponent', () => { 6 | let component: FontsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [FontsComponent] 12 | }); 13 | fixture = TestBed.createComponent(FontsComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/fonts/fonts.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-fonts', 5 | templateUrl: './fonts.component.html', 6 | styleUrls: ['./fonts.component.scss'] 7 | }) 8 | export class FontsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/installation/installation.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/pages/installation/installation.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/installation/installation.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { InstallationComponent } from './installation.component'; 4 | 5 | describe('InstallationComponent', () => { 6 | let component: InstallationComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [InstallationComponent] 12 | }); 13 | fixture = TestBed.createComponent(InstallationComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/installation/installation.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'doc-installation', 5 | templateUrl: './installation.component.html', 6 | styleUrls: ['./installation.component.scss'] 7 | }) 8 | export class InstallationComponent { 9 | installCode = ` 10 | npm install david-ui-angular 11 | // or 12 | yarn add david-ui-angular 13 | `; 14 | stylesCode = ` 15 | @import "/david-ui-angular/styles/_styles.scss"; 16 | @import "@angular/cdk/overlay-prebuilt.css"; 17 | `; 18 | 19 | styleAngularCode = ` // Add this to your angular.json file 20 | "styles": [ 21 | "src/styles.scss", 22 | "./node_modules/david-ui-angular/styles/_styles.scss" 23 | ], 24 | `; 25 | 26 | importModuleCode = ` // e.g Button Module, add this to your app.module.ts file 27 | import { DUIButton } from "david-ui-angular"; 28 | 29 | @NgModule({ 30 | declarations: [AppComponent], 31 | imports: [BrowserModule, DUIButton], 32 | providers: [], 33 | bootstrap: [AppComponent], 34 | }) 35 | export class AppModule {} 36 | `; 37 | 38 | useHtmlCode = ` 39 | Click Me 40 | `; 41 | 42 | tailwindConfigCode = ` // add below line into the content array of your tailwind.config.js file 43 | "./node_modules/david-ui-angular/**/*.{html,ts,js,mjs}" 44 | `; 45 | } 46 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/license/license.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/pages/license/license.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/license/license.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { LicenseComponent } from './license.component'; 4 | 5 | describe('LicenseComponent', () => { 6 | let component: LicenseComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [LicenseComponent] 12 | }); 13 | fixture = TestBed.createComponent(LicenseComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/license/license.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'doc-license', 5 | templateUrl: './license.component.html', 6 | styleUrls: ['./license.component.scss'] 7 | }) 8 | export class LicenseComponent { 9 | currentYear : number = new Date().getFullYear(); 10 | } 11 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/release-notes/release-notes.component.html: -------------------------------------------------------------------------------- 1 |

Release Notes Coming Soon!

2 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/release-notes/release-notes.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/pages/release-notes/release-notes.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/release-notes/release-notes.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ReleaseNotesComponent } from './release-notes.component'; 4 | 5 | describe('ReleaseNotesComponent', () => { 6 | let component: ReleaseNotesComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ReleaseNotesComponent] 12 | }); 13 | fixture = TestBed.createComponent(ReleaseNotesComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/release-notes/release-notes.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'doc-release-notes', 5 | templateUrl: './release-notes.component.html', 6 | styleUrls: ['./release-notes.component.scss'] 7 | }) 8 | export class ReleaseNotesComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/theming/theming.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Tailwind CSS Theming with Angular 4 |

5 |

6 | Coming soon 7 |

8 |
9 |
-------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/theming/theming.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/pages/theming/theming.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/theming/theming.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ThemingComponent } from './theming.component'; 4 | 5 | describe('ThemingComponent', () => { 6 | let component: ThemingComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ThemingComponent] 12 | }); 13 | fixture = TestBed.createComponent(ThemingComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/pages/theming/theming.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-theming', 5 | templateUrl: './theming.component.html', 6 | styleUrls: ['./theming.component.scss'] 7 | }) 8 | export class ThemingComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/right-sidebar/right-sidebar.component.html: -------------------------------------------------------------------------------- 1 |
2 |
5 | On This Page 6 |
7 | 18 |
19 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/right-sidebar/right-sidebar.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/docs/right-sidebar/right-sidebar.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/right-sidebar/right-sidebar.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { RightSidebarComponent } from './right-sidebar.component'; 4 | 5 | describe('RightSidebarComponent', () => { 6 | let component: RightSidebarComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [RightSidebarComponent] 12 | }); 13 | fixture = TestBed.createComponent(RightSidebarComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/sidebar/sidebar.component.scss: -------------------------------------------------------------------------------- 1 | .left-nav { 2 | ul { 3 | li { 4 | &:last-child { 5 | margin-bottom: 20px; 6 | } 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/sidebar/sidebar.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SidebarComponent } from './sidebar.component'; 4 | 5 | describe('SidebarComponent', () => { 6 | let component: SidebarComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [SidebarComponent] 12 | }); 13 | fixture = TestBed.createComponent(SidebarComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/docs/sidebar/sidebar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { SidebarItem, SidebarData } from '../../shared/model/sidebar-item.model'; 3 | import { SharedService } from '../../shared/shared.service'; 4 | 5 | @Component({ 6 | selector: 'app-sidebar', 7 | templateUrl: './sidebar.component.html', 8 | styleUrls: ['./sidebar.component.scss'] 9 | }) 10 | export class SidebarComponent { 11 | sidebarItems = SidebarData; 12 | constructor(readonly sharedService : SharedService){ 13 | 14 | } 15 | 16 | 17 | } 18 | -------------------------------------------------------------------------------- /projects/consumer/src/app/home/header/header.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/home/header/header.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/home/header/header.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HeaderComponent } from './header.component'; 4 | 5 | describe('HeaderComponent', () => { 6 | let component: HeaderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [HeaderComponent] 12 | }); 13 | fixture = TestBed.createComponent(HeaderComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/home/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-header', 5 | templateUrl: './header.component.html', 6 | styleUrls: ['./header.component.scss'] 7 | }) 8 | export class HeaderComponent { 9 | code = "npm i david-ui-angular"; 10 | } 11 | -------------------------------------------------------------------------------- /projects/consumer/src/app/home/home.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/home/home.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | 5 | describe('HomeComponent', () => { 6 | let component: HomeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [HomeComponent] 12 | }); 13 | fixture = TestBed.createComponent(HomeComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | templateUrl: './home.component.html', 6 | styleUrls: ['./home.component.scss'] 7 | }) 8 | export class HomeComponent {} 9 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/code-previewer/code-previewer.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/shared/components/code-previewer/code-previewer.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/code-previewer/code-previewer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'code-previewer', 5 | templateUrl: './code-previewer.component.html', 6 | styleUrls: ['./code-previewer.component.scss'] 7 | }) 8 | export class CodePreviewerComponent { 9 | @Input({required: true}) Code! : string; 10 | 11 | isExpanded: boolean = false; 12 | 13 | toggleCodeExpanssion(){ 14 | this.isExpanded = !this.isExpanded 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/code/code.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/code/code.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/shared/components/code/code.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/code/code.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CodeComponent } from './code.component'; 4 | 5 | describe('CodeComponent', () => { 6 | let component: CodeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [CodeComponent] 12 | }); 13 | fixture = TestBed.createComponent(CodeComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/code/code.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-code', 5 | templateUrl: './code.component.html', 6 | styleUrls: ['./code.component.scss'] 7 | }) 8 | export class CodeComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/feature-preview/feature-preview.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/shared/components/feature-preview/feature-preview.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/feature-preview/feature-preview.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { FeaturePreviewComponent } from './feature-preview.component'; 4 | 5 | describe('FeaturePreviewComponent', () => { 6 | let component: FeaturePreviewComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [FeaturePreviewComponent] 12 | }); 13 | fixture = TestBed.createComponent(FeaturePreviewComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/feature-preview/feature-preview.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'feature-preview', 5 | templateUrl: './feature-preview.component.html', 6 | styleUrls: ['./feature-preview.component.scss'] 7 | }) 8 | export class FeaturePreviewComponent { 9 | @Input() centered : boolean = true; 10 | } 11 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/h1/h1.component.html: -------------------------------------------------------------------------------- 1 |

2 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/h1/h1.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/shared/components/h1/h1.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/h1/h1.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { H1Component } from './h1.component'; 4 | 5 | describe('H1Component', () => { 6 | let component: H1Component; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [H1Component] 12 | }); 13 | fixture = TestBed.createComponent(H1Component); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/h1/h1.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-h1', 5 | templateUrl: './h1.component.html', 6 | styleUrls: ['./h1.component.scss'] 7 | }) 8 | export class H1Component { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/h2/h2.component.html: -------------------------------------------------------------------------------- 1 |

2 | 3 |

-------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/h2/h2.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/shared/components/h2/h2.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/h2/h2.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { H2Component } from './h2.component'; 4 | 5 | describe('H2Component', () => { 6 | let component: H2Component; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [H2Component] 12 | }); 13 | fixture = TestBed.createComponent(H2Component); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/h2/h2.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-h2', 5 | templateUrl: './h2.component.html', 6 | styleUrls: ['./h2.component.scss'] 7 | }) 8 | export class H2Component { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/navbar/navbar.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/shared/components/navbar/navbar.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/navbar/navbar.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NavbarComponent } from './navbar.component'; 4 | 5 | describe('NavbarComponent', () => { 6 | let component: NavbarComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [NavbarComponent] 12 | }); 13 | fixture = TestBed.createComponent(NavbarComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/navbar/navbar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SharedService } from '../../shared.service'; 3 | import { Route, Router } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-navbar', 7 | templateUrl: './navbar.component.html', 8 | styleUrls: ['./navbar.component.scss'] 9 | }) 10 | export class NavbarComponent { 11 | 12 | openNav = false; 13 | constructor(readonly sharedService : SharedService, readonly router : Router){ 14 | 15 | } 16 | 17 | 18 | 19 | } 20 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/paragraph/paragraph.component.html: -------------------------------------------------------------------------------- 1 |

-------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/paragraph/paragraph.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/shared/components/paragraph/paragraph.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/paragraph/paragraph.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ParagraphComponent } from './paragraph.component'; 4 | 5 | describe('ParagraphComponent', () => { 6 | let component: ParagraphComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ParagraphComponent] 12 | }); 13 | fixture = TestBed.createComponent(ParagraphComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/paragraph/paragraph.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-paragraph', 5 | templateUrl: './paragraph.component.html', 6 | styleUrls: ['./paragraph.component.scss'] 7 | }) 8 | export class ParagraphComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/properties-table/properties-table.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12 | 13 | 14 | 15 | 16 | 18 | 21 | 22 | 24 | 25 | 26 |
5 | AttributeType 7 | 9 | Description 11 | Default
17 | {{property.attribute}}{{property.type}} 20 | {{property.description}} 23 | {{property.default}}
-------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/properties-table/properties-table.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/app/shared/components/properties-table/properties-table.component.scss -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/properties-table/properties-table.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PropertiesTableComponent } from './properties-table.component'; 4 | 5 | describe('PropertiesTableComponent', () => { 6 | let component: PropertiesTableComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [PropertiesTableComponent] 12 | }); 13 | fixture = TestBed.createComponent(PropertiesTableComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/components/properties-table/properties-table.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | import { Property } from '../../model/property.model'; 3 | 4 | @Component({ 5 | selector: 'app-properties-table', 6 | templateUrl: './properties-table.component.html', 7 | styleUrls: ['./properties-table.component.scss'] 8 | }) 9 | export class PropertiesTableComponent { 10 | @Input() public properties: Property[] = []; 11 | } 12 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/model/property.model.ts: -------------------------------------------------------------------------------- 1 | // property.model.ts 2 | export interface Property { 3 | attribute: string; 4 | type: string; 5 | description: string; 6 | default: any; // Change the type according to your needs 7 | } 8 | -------------------------------------------------------------------------------- /projects/consumer/src/app/shared/shared.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject'; 3 | 4 | @Injectable({ 5 | providedIn: 'root' 6 | }) 7 | export class SharedService { 8 | sideBar = new BehaviorSubject(false); 9 | sideBar$ = this.sideBar.asObservable(); 10 | showSideBar = false; 11 | constructor() { } 12 | } 13 | -------------------------------------------------------------------------------- /projects/consumer/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/.gitkeep -------------------------------------------------------------------------------- /projects/consumer/src/assets/avatar.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/avatar.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/accordions.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/accordions.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/alerts.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/alerts.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/angular.svg: -------------------------------------------------------------------------------- 1 | 8 | 12 | 16 | 20 | -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/avatar.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/avatar.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/breadcrumb.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/breadcrumb.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/buttongroup.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/buttongroup.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/buttons.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/buttons.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/cards.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/cards.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/checkboxes.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/checkboxes.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/chips.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/chips.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/collapse.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/collapse.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/dialogs.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/dialogs.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/footer/analytics-by-nepcha-black-transparent.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/footer/analytics-by-nepcha-black-transparent.webp -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/footer/vercel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/footer/vercel.png -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/global-styles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/global-styles.png -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/header-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/header-bg.jpg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/header-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/header-bg.png -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/header-figma.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/header-figma.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/icon-buttons.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/icon-buttons.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/inputs.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/inputs.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/logo.png -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/menus.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/menus.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/navbars.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/navbars.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/pagination.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/pagination.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/popovers.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/popovers.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/progress-bar.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/progress-bar.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/radio-buttons.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/radio-buttons.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/selects.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/selects.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/slider.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/slider.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/switch.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/switch.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/tab.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/tab.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/tabs.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/tabs.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/text-area.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/text-area.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/tooltip.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/tooltip.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/assets/images/typography.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/assets/images/typography.jpeg -------------------------------------------------------------------------------- /projects/consumer/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/consumer/src/favicon.ico -------------------------------------------------------------------------------- /projects/consumer/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | David UI Angular 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /projects/consumer/src/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app/app.module'; 4 | 5 | 6 | platformBrowserDynamic().bootstrapModule(AppModule) 7 | .catch(err => console.error(err)); 8 | -------------------------------------------------------------------------------- /projects/consumer/src/robots.txt: -------------------------------------------------------------------------------- 1 | # * 2 | User-agent: * 3 | Allow: / 4 | 5 | # Host 6 | Host: https://www.david-ui-angular.com 7 | 8 | # Sitemaps 9 | Sitemap: https://www.david-ui-angular.com/sitemap.xml -------------------------------------------------------------------------------- /projects/consumer/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import "../../david-ui-angular/src/lib/styles/styles.scss"; 3 | @import "@angular/cdk/overlay-prebuilt.css"; 4 | 5 | body { 6 | margin: 0; 7 | padding: 0; 8 | overflow: scroll; 9 | scroll-behavior: smooth; 10 | background: #fff; 11 | font-family: "Roboto", sans-serif; 12 | font-weight: 400; 13 | height: 100%; 14 | } 15 | // .container { 16 | // width: 1320px !important; 17 | // } 18 | .header-bg { 19 | background: url(../../consumer/src/assets/images/header-bg.jpg) no-repeat; 20 | } 21 | .no-scrollbar::-webkit-scrollbar { 22 | display: none; 23 | } 24 | 25 | /* Hide scrollbar for IE, Edge and Firefox */ 26 | .no-scrollbar { 27 | -ms-overflow-style: none; 28 | /* IE and Edge */ 29 | scrollbar-width: none; 30 | /* Firefox */ 31 | } 32 | pre { 33 | code { 34 | background: #1e293b !important; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /projects/consumer/tsconfig.app.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/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ], 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/consumer/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": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "include": [ 11 | "src/**/*.spec.ts", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /projects/david-ui-angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/david-ui-angular", 4 | "allowedNonPeerDependencies": [ 5 | "tailwindcss" 6 | ], 7 | "lib": { 8 | "entryFile": "src/public-api.ts" 9 | }, 10 | "assets": [ 11 | "src/lib/assets/" 12 | ] 13 | } -------------------------------------------------------------------------------- /projects/david-ui-angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "david-ui-angular", 3 | "version": "v1.1.0", 4 | "author": { 5 | "name": "David UI Org", 6 | "url": "https://github.com/david-ui-org" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "git@github.com:david-ui-org/david-ui-angular.git" 11 | }, 12 | "license": "MIT", 13 | "keywords": [ 14 | "angular", 15 | "tailwind", 16 | "david-ui", 17 | "tailwindcss", 18 | "typescript" 19 | ], 20 | "peerDependencies": { 21 | "@angular/common": "^16.2.0 || ^17.1.3", 22 | "@angular/cdk": "^16.2.8 || ^17.1.2", 23 | "@angular/core": "^16.2.0 || ^17.1.3", 24 | "bundle-scss": "^1.5.4", 25 | "cpx": "^1.5.0", 26 | "rxjs": "~7.8.0", 27 | "tailwind-merge": "^1.14.0" 28 | }, 29 | "dependencies": { 30 | "tslib": "^2.3.0", 31 | "tailwindcss": "^3.3.3" 32 | 33 | }, 34 | "sideEffects": false 35 | } 36 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/assets/angle-up-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/assets/check.svg: -------------------------------------------------------------------------------- 1 | 9 | 14 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/assets/xmark-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/accordion/accordion-body/accordion-body.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
-------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/accordion/accordion-body/accordion-body.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/accordion/accordion-body/accordion-body.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/accordion/accordion-body/accordion-body.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | import { twMerge } from 'tailwind-merge'; 3 | 4 | @Component({ 5 | selector: 'dui-accordion-body', 6 | templateUrl: './accordion-body.component.html', 7 | styleUrls: ['./accordion-body.component.scss'] 8 | }) 9 | export class AccordionBodyComponent implements OnInit { 10 | 11 | @Input() className! : string 12 | 13 | bodyClass = 'px-2 block w-full py-4 text-gray-700 antialiased font-sans text-sm font-light leading-normal' 14 | ngOnInit(): void { 15 | this.bodyClass = twMerge(this.bodyClass,this.className) 16 | } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/accordion/accordion-expansion/accordion-expansion.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | 7 |
8 |
-------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/accordion/accordion-expansion/accordion-expansion.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/accordion/accordion-expansion/accordion-expansion.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/accordion/accordion-expansion/accordion-expansion.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | animate, 3 | state, 4 | style, 5 | transition, 6 | trigger, 7 | } from '@angular/animations'; 8 | import { 9 | AfterContentInit, 10 | Component, 11 | ContentChild, 12 | Input, 13 | OnInit, 14 | } from '@angular/core'; 15 | import { AccordionHeaderComponent } from '../accordion-header/accordion-header.component'; 16 | import { ConvertToClassName } from '../../../utilities/helpers/string-helper'; 17 | import { twMerge } from 'tailwind-merge'; 18 | 19 | @Component({ 20 | selector: 'dui-accordion-expansion', 21 | templateUrl: './accordion-expansion.component.html', 22 | styleUrls: ['./accordion-expansion.component.scss'], 23 | animations: [ 24 | trigger('accordionCollapse', [ 25 | state( 26 | 'closed', 27 | style({ 28 | height: '0', 29 | overflow: 'hidden', 30 | opacity: '0', 31 | visibility: 'hidden', 32 | }) 33 | ), 34 | state( 35 | 'open', 36 | style({ 37 | overflow: 'hidden', 38 | }) 39 | ), 40 | transition('open <=> closed', animate('200ms')), 41 | ]), 42 | ], 43 | }) 44 | export class AccordionExpansionComponent implements OnInit, AfterContentInit { 45 | @Input() isDisable: boolean = false; 46 | @Input() alwaysOpen: boolean = false; 47 | @Input() className!: string; 48 | showBody!: boolean; 49 | 50 | @ContentChild(AccordionHeaderComponent) 51 | accordionHeader!: AccordionHeaderComponent; 52 | 53 | expanssionClass : string = 'flex flex-col my-1 px-2 py-0 w-full'; 54 | 55 | toggleBody() { 56 | this.showBody = !this.showBody; 57 | this.setIconClass(); 58 | } 59 | 60 | ngOnInit(): void { 61 | this.showBody = this.alwaysOpen; 62 | 63 | this.expanssionClass = twMerge(this.expanssionClass,this.className) 64 | 65 | } 66 | 67 | ngAfterContentInit(): void { 68 | this.setIconClass(); 69 | } 70 | 71 | setIconClass(): void { 72 | this.accordionHeader.IconClass = this.showBody 73 | ? 'rotate-180 h-5 w-5 transition-transform' 74 | : 'h-5 w-5 transition-transform'; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/accordion/accordion-header/accordion-header.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

6 | {{ title }} 7 |

8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | 19 | 20 | 28 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/accordion/accordion-header/accordion-header.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/accordion/accordion-header/accordion-header.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/accordion/accordion-header/accordion-header.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | AfterContentInit, 3 | Component, 4 | ContentChild, 5 | Input, 6 | OnInit, 7 | } from '@angular/core'; 8 | import { DUIIcon } from '../../../shared/components/dui-icon/dui-icon.component'; 9 | import { twMerge } from 'tailwind-merge'; 10 | 11 | @Component({ 12 | selector: 'dui-accordion-header', 13 | templateUrl: './accordion-header.component.html', 14 | styleUrls: ['./accordion-header.component.scss'], 15 | }) 16 | export class AccordionHeaderComponent implements AfterContentInit, OnInit { 17 | @Input({ required: true }) title!: string; 18 | @Input() className!: string; 19 | 20 | @Input() showIcon: boolean = false; 21 | @Input() hideDivider: boolean = false; 22 | 23 | hasCustomIcon: boolean = false; 24 | 25 | @ContentChild(DUIIcon) IconContent!: DUIIcon; 26 | 27 | IconClass: string = ''; 28 | headerClass: string = 29 | 'px-2 py-1 font-bold text-xl text-blue-gray-700 select-none hover:text-blue-gray-900'; 30 | 31 | constructor() {} 32 | 33 | ngOnInit(): void { 34 | this.headerClass = twMerge(this.headerClass, this.className); 35 | } 36 | 37 | ngAfterContentInit() { 38 | if (this.IconContent) { 39 | this.hasCustomIcon = true; 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/accordion/accordion.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
-------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/accordion/accordion.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/accordion/accordion.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/accordion/accordion.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | import { trigger,state,style,transition,animate} from '@angular/animations' 3 | 4 | @Component({ 5 | selector: 'dui-accordion', 6 | templateUrl: './accordion.component.html', 7 | styleUrls: ['./accordion.component.scss'], 8 | 9 | }) 10 | export class AccordionComponent { 11 | 12 | 13 | 14 | } 15 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/accordion/accordion.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { AccordionComponent } from './accordion.component'; 4 | import { AccordionBodyComponent } from './accordion-body/accordion-body.component'; 5 | import { AccordionHeaderComponent } from './accordion-header/accordion-header.component'; 6 | import { AccordionExpansionComponent } from './accordion-expansion/accordion-expansion.component'; 7 | import { DUIIcon } from '../../shared/components/dui-icon/dui-icon.component'; 8 | 9 | 10 | 11 | @NgModule({ 12 | declarations: [ 13 | AccordionComponent, 14 | AccordionHeaderComponent, 15 | AccordionBodyComponent, 16 | AccordionExpansionComponent, 17 | ], 18 | imports: [ 19 | CommonModule, 20 | DUIIcon 21 | ], 22 | exports: [ 23 | AccordionComponent, 24 | AccordionHeaderComponent, 25 | AccordionBodyComponent, 26 | AccordionExpansionComponent, 27 | ] 28 | }) 29 | export class DUIAccordion { } 30 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/alert/alert.component.html: -------------------------------------------------------------------------------- 1 |
5 |
6 |
7 | 8 |
9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | 17 | 18 | 22 | 30 | 31 | 38 | 39 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/alert/alert.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/alert/alert.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/alert/alert.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { AlertComponent } from './alert.component'; 5 | import { DUIIcon } from '../../shared/components/dui-icon/dui-icon.component'; 6 | 7 | @NgModule({ 8 | declarations: [AlertComponent], 9 | imports: [CommonModule,DUIIcon], 10 | exports: [AlertComponent], 11 | }) 12 | export class DUIAlert { 13 | 14 | } 15 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/avatar/avatar.component.html: -------------------------------------------------------------------------------- 1 | avatar -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/avatar/avatar.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/avatar/avatar.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/avatar/avatar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | import { DefaultAvatar, className, color, size, variant } from '../../types/componentTypes/avatar'; 3 | import { DUITheme } from '../../theme/theme-base'; 4 | import { ConvertToClassName, ObjectToStr } from '../../utilities/helpers/string-helper'; 5 | import { AvatarPropsMapper } from '../../theme/components/avatar/avatar-theme'; 6 | import avatarBorderColor from '../../theme/components/avatar/avatar-borders'; 7 | import { twMerge } from 'tailwind-merge'; 8 | 9 | @Component({ 10 | selector: 'dui-avatar', 11 | templateUrl: './avatar.component.html', 12 | styleUrls: ['./avatar.component.scss'] 13 | }) 14 | export class AvatarComponent extends DUITheme implements OnInit { 15 | 16 | @Input({required: true}) src! : string; 17 | @Input() variant!: variant; 18 | @Input() size!: size; 19 | @Input() color!: color; 20 | @Input() className!: className; 21 | @Input() addBorder!: boolean; 22 | 23 | avatarClass:string = ''; 24 | 25 | constructor(){ 26 | super(); 27 | this.variant = this.variant ?? DefaultAvatar.variant; 28 | this.size = this.size ?? DefaultAvatar.size; 29 | this.color = this.color ?? DefaultAvatar.borderColor; 30 | this.className = this.className ?? DefaultAvatar.className; 31 | this.addBorder = this.addBorder ?? DefaultAvatar.addBorder; 32 | } 33 | override getCompiledClassName(): string { 34 | var classes:string = ''; 35 | classes += ConvertToClassName(ObjectToStr(AvatarPropsMapper['initial'])) 36 | // get avatar variant class 37 | classes += ConvertToClassName(ObjectToStr(AvatarPropsMapper[this.variant])) 38 | //get avatar size 39 | classes += ConvertToClassName(ObjectToStr(AvatarPropsMapper[this.size])); 40 | // add border color if enabled 41 | if (this.addBorder) { 42 | classes += ConvertToClassName(ObjectToStr(avatarBorderColor[this.color])) 43 | } 44 | if (this.className) { 45 | classes += ConvertToClassName(this.className); 46 | } 47 | 48 | 49 | return twMerge(ConvertToClassName(classes).split(" ")); 50 | } 51 | 52 | ngOnInit(): void { 53 | this.avatarClass = this.getCompiledClassName(); 54 | } 55 | 56 | 57 | 58 | } 59 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/avatar/avatar.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { AvatarComponent } from './avatar.component'; 4 | 5 | 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AvatarComponent 10 | ], 11 | imports: [ 12 | CommonModule 13 | ], 14 | exports: [ 15 | AvatarComponent 16 | ] 17 | }) 18 | export class DUIAvatar { } 19 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/breadcrumb/breadcrumb-item-directive/breadcrumb-item.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, TemplateRef } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[breadcrumb-Item]' 5 | }) 6 | export class BreadcrumbItemDirective { 7 | 8 | hidden: boolean = false; 9 | constructor(public templateRef: TemplateRef) { } 10 | 11 | } 12 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/breadcrumb/breadcrumb.component.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/breadcrumb/breadcrumb.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/breadcrumb/breadcrumb.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/breadcrumb/breadcrumb.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { BreadcrumbComponent } from './breadcrumb.component'; 4 | import { BreadcrumbItemDirective } from './breadcrumb-item-directive/breadcrumb-item.directive'; 5 | import { FormsModule } from '@angular/forms'; 6 | 7 | 8 | 9 | @NgModule({ 10 | declarations: [ 11 | BreadcrumbComponent, 12 | BreadcrumbItemDirective 13 | ], 14 | imports: [ 15 | CommonModule, 16 | FormsModule, 17 | ], 18 | exports: [ 19 | BreadcrumbComponent, 20 | BreadcrumbItemDirective 21 | ] 22 | }) 23 | export class DUIBreadCrumb { } 24 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/button-group/button-group.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
-------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/button-group/button-group.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/button-group/button-group.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/button-group/button-group.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { ButtonGroupComponent } from './button-group.component'; 4 | 5 | 6 | 7 | @NgModule({ 8 | declarations: [ 9 | ButtonGroupComponent 10 | ], 11 | imports: [ 12 | CommonModule 13 | ], 14 | exports: [ 15 | ButtonGroupComponent 16 | ] 17 | }) 18 | export class DUIButtonGroup { } 19 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/button/button.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/button/button.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/button/button.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/button/button.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { ButtonComponent } from './button.component'; 6 | import { DUIIcon } from '../../shared/components/dui-icon/dui-icon.component'; 7 | import { DuiRipple } from '../../shared/directive/dui-ripple.directive'; 8 | 9 | @NgModule({ 10 | declarations: [ButtonComponent], 11 | imports: [CommonModule,FormsModule,DUIIcon,DuiRipple], 12 | exports: [ButtonComponent], 13 | }) 14 | export class DUIButton {} 15 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/checkbox/checkbox.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 | 28 | 29 |
30 | 31 |
32 | 33 | 34 | 35 | 36 |
37 | {{ label }} 38 | 39 |
40 | 41 | 42 | 43 | 51 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/checkbox/checkbox.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/checkbox/checkbox.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/checkbox/checkbox.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { CheckboxComponent } from './checkbox.component'; 4 | import { FormsModule } from '@angular/forms'; 5 | import { DuiRipple } from '../../shared/directive/dui-ripple.directive'; 6 | 7 | @NgModule({ 8 | declarations: [CheckboxComponent], 9 | imports: [CommonModule, FormsModule,DuiRipple], 10 | exports: [CheckboxComponent], 11 | }) 12 | export class DUICheckbox {} 13 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/chip/chip.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 | 6 | 7 | 8 | 9 |
-------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/chip/chip.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/chip/chip.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/chip/chip.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DUIChipComponent } from './chip.component'; 4 | 5 | describe('DUIChipComponent', () => { 6 | let component: DUIChipComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [DUIChipComponent] 12 | }); 13 | fixture = TestBed.createComponent(DUIChipComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/chip/chip.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { DUIChipComponent } from './chip.component'; 4 | import { FormsModule } from '@angular/forms'; 5 | 6 | 7 | 8 | @NgModule({ 9 | declarations: [ 10 | DUIChipComponent 11 | ], 12 | imports: [ 13 | CommonModule, 14 | FormsModule 15 | ], 16 | exports: [ 17 | DUIChipComponent 18 | ] 19 | }) 20 | export class DUIChip { } 21 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/collapse/collapse.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
7 |
-------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/collapse/collapse.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/collapse/collapse.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/collapse/collapse.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | import { DUITheme } from '../../theme/theme-base'; 3 | import { 4 | DefaultCollapse, 5 | className, 6 | open, 7 | } from '../../types/componentTypes/collapse'; 8 | import { ConvertToClassName, ObjectToStr } from '../../utilities/helpers/string-helper'; 9 | import { CollapseTheme } from '../../theme/components/collapse/collapse-theme'; 10 | import { twMerge } from 'tailwind-merge'; 11 | import { animate, state, style, transition, trigger } from '@angular/animations'; 12 | 13 | @Component({ 14 | selector: 'dui-collapse', 15 | templateUrl: './collapse.component.html', 16 | styleUrls: ['./collapse.component.scss'], 17 | animations: [ 18 | trigger('Collapse', [ 19 | state( 20 | 'closed', 21 | style({ 22 | height: '0', 23 | width: '0', 24 | }) 25 | ), 26 | state( 27 | 'open', 28 | style({ 29 | height: 'auto', 30 | width: 'auto' 31 | }) 32 | ), 33 | transition('open <=> closed', animate('400ms')), 34 | ]), 35 | ], 36 | }) 37 | export class DUICollapseComponent extends DUITheme implements OnInit { 38 | @Input() className!: className; 39 | @Input({ required: true }) open!: open; 40 | 41 | collapseClass : string = ''; 42 | 43 | constructor() { 44 | super(); 45 | this.className = this.className ?? DefaultCollapse.className; 46 | this.open = this.open ?? DefaultCollapse.open; 47 | } 48 | 49 | override getCompiledClassName(): string { 50 | var classes = ''; 51 | classes += ConvertToClassName(ObjectToStr(CollapseTheme['collapse'])); 52 | 53 | if (this.className) { 54 | classes += ConvertToClassName(this.className); 55 | } 56 | 57 | return twMerge(ConvertToClassName(classes).split(' ')); 58 | } 59 | ngOnInit(): void { 60 | this.collapseClass = this.getCompiledClassName(); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/collapse/collapse.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { DUICollapseComponent } from './collapse.component'; 4 | 5 | 6 | 7 | @NgModule({ 8 | declarations: [ 9 | DUICollapseComponent 10 | ], 11 | imports: [ 12 | CommonModule 13 | ], 14 | exports: [ 15 | DUICollapseComponent 16 | ] 17 | }) 18 | export class DUICollapse { } 19 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/dialog/dialog-body/dialog-body.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
-------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/dialog/dialog-body/dialog-body.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/dialog/dialog-body/dialog-body.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/dialog/dialog-body/dialog-body.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | import { DefaultDialogProps, className } from '../../../types/componentTypes/dialog'; 3 | import { twMerge } from 'tailwind-merge'; 4 | import { ConvertToClassName, ObjectToStr } from '../../../utilities/helpers/string-helper'; 5 | import { dialogBodyTheme } from '../../../theme/components/dialog/dialog-body-theme'; 6 | 7 | @Component({ 8 | selector: 'dui-dialog-body', 9 | templateUrl: './dialog-body.component.html', 10 | styleUrls: ['./dialog-body.component.scss'] 11 | }) 12 | export class DialogBodyComponent { 13 | 14 | @Input() className!: className; 15 | @Input() divider!: boolean; 16 | 17 | bodyClass: string = ''; 18 | 19 | constructor(){ 20 | this.divider = this.divider ?? DefaultDialogProps.divider; 21 | 22 | } 23 | 24 | ngOnInit(): void { 25 | var dividerClass = this.divider 26 | ? ConvertToClassName(ObjectToStr(dialogBodyTheme['divider'])) 27 | : ''; 28 | var className = this.className ? ConvertToClassName(this.className) : ''; 29 | this.bodyClass = twMerge( 30 | ConvertToClassName(ObjectToStr(dialogBodyTheme['container'])) + 31 | dividerClass + className 32 | ); 33 | 34 | } 35 | 36 | 37 | } 38 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/dialog/dialog-footer/dialog-footer.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/dialog/dialog-footer/dialog-footer.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/dialog/dialog-footer/dialog-footer.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/dialog/dialog-footer/dialog-footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'dui-dialog-footer', 5 | templateUrl: './dialog-footer.component.html', 6 | styleUrls: ['./dialog-footer.component.scss'] 7 | }) 8 | export class DialogFooterComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/dialog/dialog-header/dialog-header.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
-------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/dialog/dialog-header/dialog-header.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/dialog/dialog-header/dialog-header.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/dialog/dialog-header/dialog-header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'dui-dialog-header', 5 | templateUrl: './dialog-header.component.html', 6 | styleUrls: ['./dialog-header.component.scss'] 7 | }) 8 | export class DialogHeaderComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/dialog/dialog.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 |
6 | 7 |
8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 |
16 |
17 |
18 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/dialog/dialog.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/dialog/dialog.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/dialog/dialog.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { DialogComponent } from './dialog.component'; 4 | import { DialogHeaderComponent } from './dialog-header/dialog-header.component'; 5 | import { DialogFooterComponent } from './dialog-footer/dialog-footer.component'; 6 | import { DialogBodyComponent } from './dialog-body/dialog-body.component'; 7 | 8 | 9 | 10 | @NgModule({ 11 | declarations: [ 12 | DialogComponent, 13 | DialogHeaderComponent, 14 | DialogFooterComponent, 15 | DialogBodyComponent 16 | ], 17 | imports: [ 18 | CommonModule 19 | ], 20 | exports: [ 21 | DialogComponent, 22 | DialogHeaderComponent, 23 | DialogFooterComponent, 24 | DialogBodyComponent 25 | ] 26 | }) 27 | export class DUIDialog { } 28 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/iconbutton/icon-button.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/iconbutton/icon-button.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/iconbutton/icon-button.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/iconbutton/icon-button.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { IconbuttonComponent } from './icon-button.component'; 4 | import { FormsModule } from '@angular/forms'; 5 | import { DuiRipple } from '../../shared/directive/dui-ripple.directive'; 6 | 7 | 8 | 9 | @NgModule({ 10 | declarations: [ 11 | IconbuttonComponent 12 | ], 13 | imports: [ 14 | CommonModule, 15 | FormsModule, 16 | DuiRipple 17 | ], 18 | exports: [ 19 | IconbuttonComponent 20 | ] 21 | }) 22 | export class DUIIconButton { } 23 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/input/input.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 14 | 17 |
18 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/input/input.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/input/input.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/input/input.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { InputComponent } from './input.component'; 4 | 5 | describe('InputComponent', () => { 6 | let component: InputComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [InputComponent] 12 | }); 13 | fixture = TestBed.createComponent(InputComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/input/input.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { InputComponent } from './input.component'; 4 | import { FormsModule } from '@angular/forms'; 5 | 6 | 7 | 8 | @NgModule({ 9 | declarations: [InputComponent], 10 | imports: [CommonModule,FormsModule], 11 | exports: [InputComponent], 12 | }) 13 | export class DUIInput { } 14 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/paginator/paginator.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/paginator/paginator.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/paginator/paginator.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { PaginatorComponent } from './paginator.component'; 4 | import { FormsModule } from '@angular/forms'; 5 | 6 | 7 | 8 | @NgModule({ 9 | declarations: [ 10 | PaginatorComponent 11 | ], 12 | imports: [ 13 | CommonModule, 14 | FormsModule 15 | ], 16 | exports: [ 17 | PaginatorComponent 18 | ] 19 | }) 20 | export class DUIPaginator { } 21 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/radiobutton/radio-button.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 30 | 31 |
32 | 33 |
34 | 35 | 36 | 37 | 38 |
39 | {{ label }} 40 | 41 |
42 | 43 | 44 | 45 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/radiobutton/radio-button.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/radiobutton/radio-button.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/radiobutton/radio-button.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RadiobuttonComponent } from './radio-button.component'; 4 | import { FormsModule } from '@angular/forms'; 5 | import { DuiRipple } from '../../shared/directive/dui-ripple.directive'; 6 | 7 | 8 | 9 | @NgModule({ 10 | declarations: [ 11 | RadiobuttonComponent 12 | ], 13 | imports: [ 14 | CommonModule, 15 | FormsModule, 16 | DuiRipple 17 | ], 18 | exports: [ 19 | RadiobuttonComponent 20 | ] 21 | }) 22 | export class DUIRadio { } 23 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/select/options/options.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/select/options/options.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/select/options/options.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/select/options/options.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | DoCheck, 4 | HostBinding, 5 | HostListener, 6 | Input, 7 | OnInit, 8 | } from '@angular/core'; 9 | import { SelectTheme } from '../../../theme/components/select/select-theme'; 10 | import { IPropsMapper } from '../../../types/generic'; 11 | import { 12 | ConvertToClassName, 13 | ObjectToStr, 14 | } from '../../../utilities/helpers/string-helper'; 15 | import { SelectComponent } from '../select.component'; 16 | import { DuiSelectService } from '../../../services/select/dui-select.service'; 17 | import { twMerge } from 'tailwind-merge'; 18 | 19 | @Component({ 20 | selector: 'dui-options', 21 | templateUrl: './options.component.html', 22 | styleUrls: ['./options.component.scss'], 23 | }) 24 | export class OptionsComponent implements OnInit,DoCheck { 25 | @Input() value!: string; 26 | @Input() key!: string; 27 | @Input() disabled!: boolean; 28 | 29 | private select!: SelectComponent; 30 | constructor(private dropdownService: DuiSelectService) { 31 | this.select = dropdownService.getSelectInstance(); 32 | } 33 | 34 | optionsClass: string = ''; 35 | 36 | ngOnInit(): void { 37 | this.optionsClass = this.getOptionsCompiledClass(); 38 | } 39 | 40 | ngDoCheck(): void { 41 | this.optionsClass = this.getOptionsCompiledClass(); 42 | } 43 | 44 | getOptionsCompiledClass(): string { 45 | var classes = ''; 46 | var optionBase = SelectTheme['option'] as IPropsMapper; 47 | 48 | classes += ConvertToClassName(ObjectToStr(optionBase['initial'])); 49 | if (this.select.selectedValue === this.value) { 50 | classes += ConvertToClassName(ObjectToStr(optionBase['active'])); 51 | } 52 | if (this.disabled) { 53 | classes += ConvertToClassName(ObjectToStr(optionBase['disabled'])); 54 | } 55 | 56 | return twMerge(ConvertToClassName(classes).split(' ')); 57 | } 58 | 59 | @HostListener('click', ['$event']) 60 | public onClick(event: UIEvent) { 61 | event.preventDefault(); 62 | event.stopPropagation(); 63 | 64 | this.select.selectOption(this); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/select/select.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 14 | 15 | 20 | 25 | 26 | 27 | 30 |
31 | 32 | 33 |
34 | 35 |
36 | 37 |
38 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/select/select.component.scss: -------------------------------------------------------------------------------- 1 | .dropdown-options-container { 2 | width: 100%; 3 | border-radius: 3px; 4 | box-shadow: 0 1px 4px 0 rgba(0,0,0,.24); 5 | display: block; 6 | overflow: auto; 7 | z-index: 999; 8 | background-color: white; 9 | margin-top: 2px; 10 | } 11 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/select/select.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { SelectComponent } from './select.component'; 4 | import { OptionsComponent } from './options/options.component'; 5 | import { FormsModule } from '@angular/forms'; 6 | import { OverlayModule } from '@angular/cdk/overlay'; 7 | import { PortalModule } from '@angular/cdk/portal'; 8 | import { CdkDropdownComponent } from '../../shared/components/cdk-dropdown/cdk-dropdown.component'; 9 | import { DropdownForDirective } from '../../shared/directive/dropdown-for.directive'; 10 | 11 | 12 | 13 | 14 | 15 | @NgModule({ 16 | declarations: [ 17 | SelectComponent, 18 | OptionsComponent, 19 | CdkDropdownComponent, 20 | DropdownForDirective 21 | ], 22 | imports: [ 23 | CommonModule, 24 | FormsModule, 25 | PortalModule, 26 | OverlayModule 27 | ], 28 | exports: [ 29 | SelectComponent, 30 | OptionsComponent 31 | ] 32 | }) 33 | export class DUISelect { } 34 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/slider/slider.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 14 |
15 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/slider/slider.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/slider/slider.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/slider/slider.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { DUISliderComponent } from './slider.component'; 4 | import { FormsModule } from '@angular/forms'; 5 | 6 | 7 | 8 | @NgModule({ 9 | declarations: [ 10 | DUISliderComponent 11 | ], 12 | imports: [ 13 | CommonModule, 14 | FormsModule 15 | ], 16 | exports: [ 17 | DUISliderComponent 18 | ] 19 | }) 20 | export class DUISlider { } 21 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/switch/switch.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 | 6 |
7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | {{ label }} 33 | 34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/switch/switch.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/switch/switch.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/switch/switch.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { DUISwitchComponent } from './switch.component'; 4 | import { FormsModule } from '@angular/forms'; 5 | import { DuiRipple } from '../../shared/directive/dui-ripple.directive'; 6 | 7 | 8 | 9 | @NgModule({ 10 | declarations: [ 11 | DUISwitchComponent 12 | ], 13 | imports: [ 14 | CommonModule, 15 | FormsModule, 16 | DuiRipple 17 | ], 18 | exports: [ 19 | DUISwitchComponent 20 | ] 21 | }) 22 | export class DUISwitch { } 23 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/textarea/textarea.component.html: -------------------------------------------------------------------------------- 1 |
2 | 14 | 15 |
16 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/textarea/textarea.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/textarea/textarea.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/textarea/textarea.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { TextareaComponent } from './textarea.component'; 4 | import { FormsModule } from '@angular/forms'; 5 | 6 | 7 | 8 | @NgModule({ 9 | declarations: [ 10 | TextareaComponent 11 | ], 12 | imports: [ 13 | CommonModule, 14 | FormsModule 15 | ], 16 | exports: [ 17 | TextareaComponent 18 | ] 19 | }) 20 | export class DUITextarea { } 21 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/typography/typography.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

4 | 5 |

6 | 7 | 8 |

9 | 10 |

11 | 12 | 13 |

14 | 15 |

16 | 17 | 18 |

19 | 20 |

21 | 22 | 23 |
24 | 25 |
26 | 27 | 28 |
29 | 30 |
31 | 32 | 33 |

34 | 35 |

36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/typography/typography.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/components/typography/typography.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/components/typography/typography.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { TypographyComponent } from './typography.component'; 4 | 5 | 6 | 7 | @NgModule({ 8 | declarations: [ 9 | TypographyComponent 10 | ], 11 | imports: [ 12 | CommonModule 13 | ], 14 | exports: [ 15 | TypographyComponent 16 | ] 17 | }) 18 | export class DUITypography { } 19 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/david-ui-angular.module.ts: -------------------------------------------------------------------------------- 1 | import { ModuleWithProviders, NgModule } from '@angular/core'; 2 | import { DavidUIAngularService } from '../public-api'; 3 | import { CommonModule } from '@angular/common'; 4 | import { FormsModule } from '@angular/forms'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | ], 9 | imports: [CommonModule, FormsModule], 10 | exports: [], 11 | }) 12 | export class DavidUIAngularModule { 13 | static forRoot( 14 | config: string 15 | ): ModuleWithProviders { 16 | return { 17 | ngModule: DavidUIAngularModule, 18 | providers: [ 19 | // { 20 | // provide: TailwindThemeConfig, 21 | // useValue: config, 22 | // }, 23 | DavidUIAngularService, 24 | ], 25 | }; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/services/david-ui-angular.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { DavidUIAngularService } from './david-ui-angular.service'; 4 | 5 | describe('DavidUIAngularService', () => { 6 | let service: DavidUIAngularService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(DavidUIAngularService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/services/david-ui-angular.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class DavidUIAngularService { 7 | 8 | constructor() { } 9 | } 10 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/services/select/dui-select.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { DuiSelectService } from './dui-select.service'; 4 | 5 | describe('DuiSelectService', () => { 6 | let service: DuiSelectService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(DuiSelectService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/services/select/dui-select.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { SelectComponent } from '../../components/select/select.component'; 3 | import { BehaviorSubject, Observable } from 'rxjs'; 4 | 5 | @Injectable() 6 | export class DuiSelectService { 7 | private select!: SelectComponent; 8 | 9 | public afterClosed : BehaviorSubject = new BehaviorSubject(undefined); 10 | 11 | public registerSelectInstance(select: SelectComponent) { 12 | this.select = select; 13 | } 14 | 15 | public getSelectInstance(): SelectComponent { 16 | return this.select; 17 | } 18 | 19 | public shouldClosed(show: boolean) { 20 | this.afterClosed.next(show) 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/shared/components/cdk-dropdown/cdk-dropdown.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/shared/components/cdk-dropdown/cdk-dropdown.component.scss -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/shared/components/dui-icon/dui-icon.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'dui-icon', 5 | standalone: true , 6 | template: ` 7 | 8 | `, 9 | styles: [ 10 | ] 11 | }) 12 | export class DUIIcon { 13 | 14 | } 15 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/shared/directive/dui-ripple.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[dui-ripple]', 5 | standalone: true, 6 | }) 7 | export class DuiRipple { 8 | 9 | @Input({alias: 'ripple-theme'}) theme : 'dark' | 'light' = 'dark'; 10 | 11 | constructor(private el: ElementRef, private renderer: Renderer2) {} 12 | 13 | @HostListener('click', ['$event']) onClick(event: MouseEvent) { 14 | const ripple = this.renderer.createElement('div'); 15 | const rect = this.el.nativeElement.getBoundingClientRect(); 16 | 17 | const size = Math.max(rect.width, rect.height); 18 | const x = event.clientX - rect.left - size / 2; 19 | const y = event.clientY - rect.top - size / 2; 20 | 21 | this.renderer.setStyle(this.el.nativeElement,'position','relative') 22 | this.renderer.setStyle(this.el.nativeElement,'overflow','hidden') 23 | 24 | this.renderer.addClass(ripple, 'ripple'); 25 | 26 | this.renderer.setStyle(ripple, 'width', `${size}px`); 27 | this.renderer.setStyle(ripple, 'height', `${size}px`); 28 | this.renderer.setStyle(ripple, 'top', `${y}px`); 29 | this.renderer.setStyle(ripple, 'left', `${x}px`); 30 | this.renderer.setStyle(ripple, 'position', `absolute`); 31 | this.renderer.setStyle(ripple, 'pointerEvents', `none`); 32 | this.renderer.setStyle(ripple, 'borderRadius', `50%`); 33 | 34 | let bgColor = this.theme === 'dark' ? 'rgba(0,0,0, 0.2)': 'rgba(255,255,255, 0.3)'; 35 | this.renderer.setStyle(ripple, 'backgroundColor', `${bgColor}`); 36 | 37 | 38 | this.renderer.appendChild(this.el.nativeElement, ripple); 39 | 40 | setTimeout(() => { 41 | this.renderer.removeChild(this.el.nativeElement, ripple); 42 | }, 1000); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/shared/models/paginatedRes.ts: -------------------------------------------------------------------------------- 1 | export interface PaginatedResponse { 2 | page: number; 3 | pageSize: number; 4 | } -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/styles/styles.scss: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | // Your custom styles here 5 | 6 | .ripple { 7 | position: absolute; 8 | border-radius: 50%; 9 | background: rgba(255, 255, 255, 0.6); 10 | transform: scale(0); 11 | animation: ripple-animation 1s linear; 12 | pointer-events: none; 13 | } 14 | 15 | @keyframes ripple-animation { 16 | from { 17 | transform: scale(0); 18 | opacity : 1; 19 | } 20 | to { 21 | transform: scale(4); 22 | opacity: 0; 23 | } 24 | } -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/alert/alert-Ghost.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from "../../../types/generic"; 2 | 3 | const alertGhost: IPropsMapper = { 4 | "blue-gray": { 5 | backgroud: "bg-blue-gray-500/20", 6 | color: "text-blue-gray-900", 7 | }, 8 | gray: { 9 | backgroud: "bg-gray-900/10", 10 | color: "text-gray-900", 11 | }, 12 | brown: { 13 | backgroud: "bg-brown-500/20", 14 | color: "text-brown-900", 15 | }, 16 | "deep-orange": { 17 | backgroud: "bg-deep-orange-500/20", 18 | color: "text-deep-orange-900", 19 | }, 20 | orange: { 21 | backgroud: "bg-orange-500/20", 22 | color: "text-orange-900", 23 | }, 24 | amber: { 25 | backgroud: "bg-amber-500/20", 26 | color: "text-amber-900", 27 | }, 28 | yellow: { 29 | backgroud: "bg-yellow-500/20", 30 | color: "text-yellow-900", 31 | }, 32 | lime: { 33 | backgroud: "bg-lime-500/20", 34 | color: "text-lime-900", 35 | }, 36 | "light-green": { 37 | backgroud: "bg-light-green-500/20", 38 | color: "text-light-green-900", 39 | }, 40 | green: { 41 | backgroud: "bg-green-500/20", 42 | color: "text-green-900", 43 | }, 44 | teal: { 45 | backgroud: "bg-teal-500/20", 46 | color: "text-teal-900", 47 | }, 48 | cyan: { 49 | backgroud: "bg-cyan-500/20", 50 | color: "text-cyan-900", 51 | }, 52 | "light-blue": { 53 | backgroud: "bg-light-blue-500/20", 54 | color: "text-light-blue-900", 55 | }, 56 | blue: { 57 | backgroud: "bg-blue-500/20", 58 | color: "text-blue-900", 59 | }, 60 | indigo: { 61 | backgroud: "bg-indigo-500/20", 62 | color: "text-indigo-900", 63 | }, 64 | "deep-purple": { 65 | backgroud: "bg-deep-purple-500/20", 66 | color: "text-deep-purple-900", 67 | }, 68 | purple: { 69 | backgroud: "bg-purple-500/20", 70 | color: "text-purple-900", 71 | }, 72 | pink: { 73 | backgroud: "bg-pink-500/20", 74 | color: "text-pink-900", 75 | }, 76 | red: { 77 | backgroud: "bg-red-500/20", 78 | color: "text-red-900", 79 | }, 80 | }; 81 | 82 | export default alertGhost; -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/alert/alert-filled.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from "../../../types/generic"; 2 | 3 | const alertFilled: IPropsMapper = { 4 | "blue-gray": { 5 | backgroud: "bg-blue-gray-500", 6 | color: "text-white", 7 | }, 8 | gray: { 9 | backgroud: "bg-gray-900", 10 | color: "text-white", 11 | }, 12 | brown: { 13 | backgroud: "bg-brown-500", 14 | color: "text-white", 15 | }, 16 | "deep-orange": { 17 | backgroud: "bg-deep-orange-500", 18 | color: "text-white", 19 | }, 20 | orange: { 21 | backgroud: "bg-orange-500", 22 | color: "text-white", 23 | }, 24 | amber: { 25 | backgroud: "bg-amber-500", 26 | color: "text-black", 27 | }, 28 | yellow: { 29 | backgroud: "bg-yellow-500", 30 | color: "text-black", 31 | }, 32 | lime: { 33 | backgroud: "bg-lime-500", 34 | color: "text-black", 35 | }, 36 | "light-green": { 37 | backgroud: "bg-light-green-500", 38 | color: "text-white", 39 | }, 40 | green: { 41 | backgroud: "bg-green-500", 42 | color: "text-white", 43 | }, 44 | teal: { 45 | backgroud: "bg-teal-500", 46 | color: "text-white", 47 | }, 48 | cyan: { 49 | backgroud: "bg-cyan-500", 50 | color: "text-white", 51 | }, 52 | "light-blue": { 53 | backgroud: "bg-light-blue-500", 54 | color: "text-white", 55 | }, 56 | blue: { 57 | backgroud: "bg-blue-500", 58 | color: "text-white", 59 | }, 60 | indigo: { 61 | backgroud: "bg-indigo-500", 62 | color: "text-white", 63 | }, 64 | "deep-purple": { 65 | backgroud: "bg-deep-purple-500", 66 | color: "text-white", 67 | }, 68 | purple: { 69 | backgroud: "bg-purple-500", 70 | color: "text-white", 71 | }, 72 | pink: { 73 | backgroud: "bg-pink-500", 74 | color: "text-white", 75 | }, 76 | red: { 77 | backgroud: "bg-red-500", 78 | color: "text-white", 79 | }, 80 | }; 81 | 82 | export default alertFilled; -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/alert/alert-theme.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from "../../../types/generic"; 2 | import alertGhost from "./alert-Ghost"; 3 | import alertGradient from "./alert-Gradient"; 4 | import alertOutlined from "./alert-Outlined"; 5 | import alertFilled from "./alert-filled"; 6 | 7 | 8 | export const AlertTheme :IPropsMapper={ 9 | alert: { 10 | position: "relative", 11 | display: "block", 12 | width: "w-full", 13 | fontFamily: "font-sans", 14 | fontSize: "text-base", 15 | fontWeight: "font-regular", 16 | px: "px-4", 17 | py: "py-4", 18 | borderRadius: "rounded-lg", 19 | }, 20 | action: { 21 | position: "!absolute", 22 | top: "top-3", 23 | right: "right-3", 24 | }, 25 | variants: { 26 | filled: alertFilled, 27 | gradient: alertGradient, 28 | outlined: alertOutlined, 29 | ghost: alertGhost, 30 | }, 31 | } -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/avatar/avatar-borders.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from '../../../types/generic'; 2 | 3 | const avatarBorderColor: IPropsMapper = { 4 | white: { 5 | border: 'border-2', 6 | borderColor: 'border-white', 7 | }, 8 | 'blue-gray': { 9 | border: 'border-2', 10 | borderColor: 'border-blue-gray-500', 11 | }, 12 | gray: { 13 | border: 'border-2', 14 | borderColor: 'border-gray-900', 15 | }, 16 | brown: { 17 | border: 'border-2', 18 | borderColor: 'border-brown-500', 19 | }, 20 | 'deep-orange': { 21 | border: 'border-2', 22 | borderColor: 'border-deep-orange-500', 23 | }, 24 | orange: { 25 | border: 'border-2', 26 | borderColor: 'border-orange-500', 27 | }, 28 | amber: { 29 | border: 'border-2', 30 | borderColor: 'border-amber-500', 31 | }, 32 | yellow: { 33 | border: 'border-2', 34 | borderColor: 'border-yellow-500', 35 | }, 36 | lime: { 37 | border: 'border-2', 38 | borderColor: 'border-lime-500', 39 | }, 40 | 'light-green': { 41 | border: 'border-2', 42 | borderColor: 'border-light-green-500', 43 | }, 44 | green: { 45 | border: 'border-2', 46 | borderColor: 'border-green-500', 47 | }, 48 | teal: { 49 | border: 'border-2', 50 | borderColor: 'border-teal-500', 51 | }, 52 | cyan: { 53 | border: 'border-2', 54 | borderColor: 'border-cyan-500', 55 | }, 56 | 'light-blue': { 57 | border: 'border-2', 58 | borderColor: 'border-light-blue-500', 59 | }, 60 | blue: { 61 | border: 'border-2', 62 | borderColor: 'border-blue-500', 63 | }, 64 | indigo: { 65 | border: 'border-2', 66 | borderColor: 'border-indigo-500', 67 | }, 68 | 'deep-purple': { 69 | border: 'border-2', 70 | borderColor: 'border-deep-purple-500', 71 | }, 72 | purple: { 73 | border: 'border-2', 74 | borderColor: 'border-purple-500', 75 | }, 76 | pink: { 77 | border: 'border-2', 78 | borderColor: 'border-pink-500', 79 | }, 80 | red: { 81 | border: 'border-2', 82 | borderColor: 'border-red-500', 83 | }, 84 | }; 85 | 86 | export default avatarBorderColor; 87 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/avatar/avatar-theme.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from '../../../types/generic'; 2 | 3 | export const AvatarPropsMapper: IPropsMapper = { 4 | initial: { 5 | display: 'inline-block', 6 | position: 'relative', 7 | objectFit: 'object-cover', 8 | objectPosition: 'object-center', 9 | }, 10 | circle: { 11 | borderRadius: '!rounded-full', 12 | }, 13 | rounded: { 14 | borderRadius: '!rounded-lg', 15 | }, 16 | square: { 17 | borderRadius: '!rounded-none', 18 | }, 19 | xs: { 20 | width: 'w-6', 21 | height: 'h-6', 22 | borderRadius: 'rounded-md', 23 | }, 24 | sm: { 25 | width: 'w-9', 26 | height: 'h-9', 27 | borderRadius: 'rounded-md', 28 | }, 29 | md: { 30 | width: 'w-12', 31 | height: 'h-12', 32 | borderRadius: 'rounded-lg', 33 | }, 34 | lg: { 35 | width: 'w-[58px]', 36 | height: 'h-[58px]', 37 | borderRadius: 'rounded-lg', 38 | }, 39 | xl: { 40 | width: 'w-[74px]', 41 | height: 'h-[74px]', 42 | borderRadius: 'rounded-xl', 43 | }, 44 | xxl: { 45 | width: 'w-[110px]', 46 | height: 'h-[110px]', 47 | borderRadius: 'rounded-2xl', 48 | }, 49 | }; 50 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/breadcrumb/breadcrumb-theme.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from '../../../types/generic'; 2 | 3 | export const BreadCrumbTheme: IPropsMapper = { 4 | initial: { 5 | width: 'w-max', 6 | }, 7 | fullWidth: { display: 'block', width: 'w-full' }, 8 | list: { 9 | display: 'flex', 10 | flexWrap: 'flex-wrap', 11 | alignItems: 'items-center', 12 | width: 'w-full', 13 | bg: 'bg-blue-gray-50', 14 | bgOpacity: 'bg-opacity-60', 15 | py: 'py-2', 16 | px: 'px-4', 17 | borderRadius: 'rounded-md', 18 | }, 19 | item: { 20 | initial: { 21 | display: 'flex', 22 | alignItems: 'items-center', 23 | color: 'text-blue-gray-900', 24 | fontSmoothing: 'antialiased', 25 | fontFamily: 'font-sans', 26 | fontSize: 'text-sm', 27 | fontWeight: 'font-normal', 28 | lineHeight: 'leading-normal', 29 | cursor: 'cursor-pointer', 30 | transition: 'transition-colors duration-300', 31 | hover: 'hover:text-light-blue-500', 32 | }, 33 | disabled: { 34 | pointerEvents: 'pointer-events-none', 35 | }, 36 | }, 37 | separator: { 38 | color: 'text-blue-gray-500', 39 | fontSize: 'text-sm', 40 | fontSmoothing: 'antialiased', 41 | fontFamily: 'font-sans', 42 | fontWeight: 'font-normal', 43 | lineHeight: 'leading-normal', 44 | px: 'mx-2', 45 | pointerEvents: 'pointer-events-none', 46 | userSelcet: 'select-none', 47 | }, 48 | }; 49 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/button-group/buttonGroupDividerColors.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from "../../../types/generic"; 2 | 3 | const buttonGroupDividerColor: IPropsMapper = { 4 | white: { 5 | divideColor: "divide-blue-gray-50", 6 | }, 7 | "blue-gray": { 8 | divideColor: "divide-blue-gray-600", 9 | }, 10 | gray: { 11 | divideColor: "divide-gray-800", 12 | }, 13 | brown: { 14 | divideColor: "divide-brown-600", 15 | }, 16 | "deep-orange": { 17 | divideColor: "divide-deep-orange-600", 18 | }, 19 | orange: { 20 | divideColor: "divide-orange-600", 21 | }, 22 | amber: { 23 | divideColor: "divide-amber-600", 24 | }, 25 | yellow: { 26 | divideColor: "divide-yellow-600", 27 | }, 28 | lime: { 29 | divideColor: "divide-lime-600", 30 | }, 31 | "light-green": { 32 | divideColor: "divide-light-green-600", 33 | }, 34 | green: { 35 | divideColor: "divide-green-600", 36 | }, 37 | teal: { 38 | divideColor: "divide-teal-600", 39 | }, 40 | cyan: { 41 | divideColor: "divide-cyan-600", 42 | }, 43 | "light-blue": { 44 | divideColor: "divide-light-blue-600", 45 | }, 46 | blue: { 47 | divideColor: "divide-blue-600", 48 | }, 49 | indigo: { 50 | divideColor: "divide-indigo-600", 51 | }, 52 | "deep-purple": { 53 | divideColor: "divide-deep-purple-600", 54 | }, 55 | purple: { 56 | divideColor: "divide-purple-600", 57 | }, 58 | pink: { 59 | divideColor: "divide-pink-600", 60 | }, 61 | red: { 62 | divideColor: "divide-red-600", 63 | }, 64 | }; 65 | 66 | export default buttonGroupDividerColor; -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/button-group/buttonGroupTheme.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from '../../../types/generic'; 2 | 3 | export const ButtonGroupTheme: IPropsMapper = { 4 | initial: { 5 | display: "flex", 6 | flexDirection: "row", 7 | }, 8 | fullWidth: { 9 | width: "w-full", 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/button/button-theme.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from "../../../types/generic"; 2 | 3 | 4 | 5 | export const buttonTheme: IPropsMapper = { 6 | initial: { 7 | verticalAlign: "align-middle", 8 | userSelect: "select-none", 9 | fontFamily: "font-sans", 10 | fontWeight: "font-bold", 11 | textAlign: "text-center", 12 | textTransform: "uppercase", 13 | transition: "transition-all", 14 | disabled: "disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none", 15 | }, 16 | }; 17 | 18 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/checkbox/checkbox-theme.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from '../../../types/generic'; 2 | 3 | export const CheckBoxTheme: IPropsMapper = { 4 | input: { 5 | peer: 'peer', 6 | position: 'relative', 7 | appearance: 'appearance-none', 8 | width: 'w-5', 9 | height: 'h-5', 10 | borderWidth: 'border', 11 | borderRadius: 'rounded-md', 12 | borderColor: 'border-blue-gray-200', 13 | cursor: 'cursor-pointer', 14 | transition: 'transition-all', 15 | before: { 16 | content: "before:content['']", 17 | display: 'before:block', 18 | bg: 'before:bg-blue-gray-500', 19 | width: 'before:w-12', 20 | height: 'before:h-12', 21 | borderRadius: 'before:rounded-full', 22 | position: 'before:absolute', 23 | top: 'before:top-2/4', 24 | left: 'before:left-2/4', 25 | transform: 'before:-translate-y-2/4 before:-translate-x-2/4', 26 | opacity: 'before:opacity-0 hover:before:opacity-10', 27 | transition: 'before:transition-opacity', 28 | }, 29 | }, 30 | container: { 31 | position: 'relative', 32 | display: 'flex', 33 | alignItems: 'items-center', 34 | cursor: 'cursor-pointer', 35 | p: 'p-3', 36 | borderRadius: 'rounded-full', 37 | }, 38 | icon: { 39 | color: 'text-white', 40 | position: 'absolute', 41 | top: 'top-2/4', 42 | left: 'left-2/4', 43 | translate: '-translate-y-2/4 -translate-x-2/4', 44 | pointerEvents: 'pointer-events-none', 45 | opacity: 'opacity-0 peer-checked:opacity-100', 46 | transition: 'transition-opacity', 47 | }, 48 | disabled: { 49 | opacity: 'opacity-50', 50 | pointerEvents: 'pointer-events-none', 51 | cursor : 'cursor-not-allowed' 52 | }, 53 | label: { 54 | color: 'text-gray-700', 55 | fontWeight: 'font-light', 56 | userSelect: 'select-none', 57 | cursor: 'cursor-pointer', 58 | }, 59 | }; 60 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/chip/chip-filled.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from "../../../types/generic"; 2 | 3 | const chipFilled: IPropsMapper = { 4 | "blue-gray": { 5 | backgroud: "bg-blue-gray-500", 6 | color: "text-white", 7 | }, 8 | gray: { 9 | backgroud: "bg-gray-900", 10 | color: "text-white", 11 | }, 12 | brown: { 13 | backgroud: "bg-brown-500", 14 | color: "text-white", 15 | }, 16 | "deep-orange": { 17 | backgroud: "bg-deep-orange-500", 18 | color: "text-white", 19 | }, 20 | orange: { 21 | backgroud: "bg-orange-500", 22 | color: "text-white", 23 | }, 24 | amber: { 25 | backgroud: "bg-amber-500", 26 | color: "text-black", 27 | }, 28 | yellow: { 29 | backgroud: "bg-yellow-500", 30 | color: "text-black", 31 | }, 32 | lime: { 33 | backgroud: "bg-lime-500", 34 | color: "text-black", 35 | }, 36 | "light-green": { 37 | backgroud: "bg-light-green-500", 38 | color: "text-white", 39 | }, 40 | green: { 41 | backgroud: "bg-green-500", 42 | color: "text-white", 43 | }, 44 | teal: { 45 | backgroud: "bg-teal-500", 46 | color: "text-white", 47 | }, 48 | cyan: { 49 | backgroud: "bg-cyan-500", 50 | color: "text-white", 51 | }, 52 | "light-blue": { 53 | backgroud: "bg-light-blue-500", 54 | color: "text-white", 55 | }, 56 | blue: { 57 | backgroud: "bg-blue-500", 58 | color: "text-white", 59 | }, 60 | indigo: { 61 | backgroud: "bg-indigo-500", 62 | color: "text-white", 63 | }, 64 | "deep-purple": { 65 | backgroud: "bg-deep-purple-500", 66 | color: "text-white", 67 | }, 68 | purple: { 69 | backgroud: "bg-purple-500", 70 | color: "text-white", 71 | }, 72 | pink: { 73 | backgroud: "bg-pink-500", 74 | color: "text-white", 75 | }, 76 | red: { 77 | backgroud: "bg-red-500", 78 | color: "text-white", 79 | }, 80 | }; 81 | 82 | export default chipFilled; -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/chip/chip-ghost.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from "../../../types/generic"; 2 | 3 | const chipGhost: IPropsMapper = { 4 | "blue-gray": { 5 | backgroud: "bg-blue-gray-500/20", 6 | color: "text-blue-gray-900", 7 | }, 8 | gray: { 9 | backgroud: "bg-gray-900/10", 10 | color: "text-gray-900", 11 | }, 12 | brown: { 13 | backgroud: "bg-brown-500/20", 14 | color: "text-brown-900", 15 | }, 16 | "deep-orange": { 17 | backgroud: "bg-deep-orange-500/20", 18 | color: "text-deep-orange-900", 19 | }, 20 | orange: { 21 | backgroud: "bg-orange-500/20", 22 | color: "text-orange-900", 23 | }, 24 | amber: { 25 | backgroud: "bg-amber-500/20", 26 | color: "text-amber-900", 27 | }, 28 | yellow: { 29 | backgroud: "bg-yellow-500/20", 30 | color: "text-yellow-900", 31 | }, 32 | lime: { 33 | backgroud: "bg-lime-500/20", 34 | color: "text-lime-900", 35 | }, 36 | "light-green": { 37 | backgroud: "bg-light-green-500/20", 38 | color: "text-light-green-900", 39 | }, 40 | green: { 41 | backgroud: "bg-green-500/20", 42 | color: "text-green-900", 43 | }, 44 | teal: { 45 | backgroud: "bg-teal-500/20", 46 | color: "text-teal-900", 47 | }, 48 | cyan: { 49 | backgroud: "bg-cyan-500/20", 50 | color: "text-cyan-900", 51 | }, 52 | "light-blue": { 53 | backgroud: "bg-light-blue-500/20", 54 | color: "text-light-blue-900", 55 | }, 56 | blue: { 57 | backgroud: "bg-blue-500/20", 58 | color: "text-blue-900", 59 | }, 60 | indigo: { 61 | backgroud: "bg-indigo-500/20", 62 | color: "text-indigo-900", 63 | }, 64 | "deep-purple": { 65 | backgroud: "bg-deep-purple-500/20", 66 | color: "text-deep-purple-900", 67 | }, 68 | purple: { 69 | backgroud: "bg-purple-500/20", 70 | color: "text-purple-900", 71 | }, 72 | pink: { 73 | backgroud: "bg-pink-500/20", 74 | color: "text-pink-900", 75 | }, 76 | red: { 77 | backgroud: "bg-red-500/20", 78 | color: "text-red-900", 79 | }, 80 | }; 81 | 82 | export default chipGhost; -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/chip/chip-theme.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from '../../../types/generic'; 2 | 3 | export const ChipTheme: IPropsMapper = { 4 | chip: { 5 | position: 'relative', 6 | display: 'grid', 7 | placeItems: 'items-center', 8 | fontFamily: 'font-sans', 9 | fontWeight: 'font-bold', 10 | textTransform: 'uppercase', 11 | lineHeight: 'leading-none', 12 | whiteSpace: 'whitespace-nowrap', 13 | userSelect: 'select-none', 14 | }, 15 | action: { 16 | position: '!absolute', 17 | top: 'top-2/4', 18 | right: 'right-1', 19 | translate: '-translate-y-2/4', 20 | mx: 'mx-px', 21 | rounded: 'rounded-md', 22 | }, 23 | icon: { 24 | position: 'absolute', 25 | top: 'top-2/4', 26 | translate: '-translate-y-2/4', 27 | }, 28 | sm: { 29 | chip: { 30 | py: 'py-1', 31 | px: 'px-2', 32 | fontSize: 'text-xs', 33 | borderRadius: 'rounded-md', 34 | }, 35 | action: { 36 | width: 'w-4', 37 | height: 'h-4', 38 | }, 39 | icon: { 40 | width: 'w-4', 41 | height: 'h-4', 42 | left: 'left-1', 43 | }, 44 | }, 45 | md: { 46 | chip: { 47 | py: 'py-1.5', 48 | px: 'px-3', 49 | fontSize: 'text-xs', 50 | borderRadius: 'rounded-lg', 51 | }, 52 | action: { 53 | width: 'w-5', 54 | height: 'h-5', 55 | }, 56 | icon: { 57 | width: 'w-5', 58 | height: 'h-5', 59 | left: 'left-1.5', 60 | }, 61 | }, 62 | lg: { 63 | chip: { 64 | py: 'py-2', 65 | px: 'px-4', 66 | fontSize: 'text-xs', 67 | borderRadius: 'rounded-lg', 68 | }, 69 | action: { 70 | width: 'w-6', 71 | height: 'h-6', 72 | }, 73 | icon: { 74 | width: 'w-6', 75 | height: 'h-6', 76 | left: 'left-1.5', 77 | }, 78 | }, 79 | }; 80 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/collapse/collapse-theme.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from '../../../types/generic'; 2 | 3 | export const CollapseTheme: IPropsMapper = { 4 | collapse: { 5 | display: 'block', 6 | width: 'w-full', 7 | basis: 'basis-full', 8 | overflow: 'overflow-hidden', 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/dialog/dialog-body-theme.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from "../../../types/generic"; 2 | 3 | export const dialogBodyTheme : IPropsMapper ={ 4 | container: { 5 | position: "relative", 6 | p: "p-4", 7 | color: "text-blue-gray-500", 8 | fontSmoothing: "antialiased", 9 | fontFamily: "font-sans", 10 | fontSize: "text-base", 11 | fontWeight: "font-normal", 12 | lineHeight: "leading-relaxed", 13 | }, 14 | divider: { 15 | borderTop: "border-t", 16 | borderTopColor: "border-t-blue-gray-100", 17 | borderBottom: "border-b", 18 | borderBottomColor: "border-b-blue-gray-100", 19 | }, 20 | } -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/dialog/dialog-footer-theme.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from "../../../types/generic"; 2 | 3 | export const dialogFooterTheme : IPropsMapper ={ 4 | container: { 5 | display: "flex", 6 | alignItems: "items-center", 7 | justifyContent: "justify-end", 8 | flexShrink: "shrink-0", 9 | flexWrap: "flex-wrap", 10 | p: "p-4", 11 | color: "text-blue-gray-500", 12 | }, 13 | } -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/dialog/dialog-header-theme.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from "../../../types/generic"; 2 | 3 | export const dialogHeaderTheme : IPropsMapper ={ 4 | container: { 5 | display: "flex", 6 | alignItems: "items-center", 7 | flexShrink: "shrink-0", 8 | p: "p-4", 9 | color: "text-blue-gray-900", 10 | fontSmoothing: "antialiased", 11 | fontFamily: "font-sans", 12 | fontSize: "text-2xl", 13 | fontWeight: "font-semibold", 14 | lineHeight: "leading-snug", 15 | }, 16 | } -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/iconbutton/iconbutton-theme.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from '../../../types/generic'; 2 | 3 | export const IconButtonTheme: IPropsMapper = { 4 | IconButton: { 5 | position: "relative", 6 | verticalAlign: "align-middle", 7 | userSelect: "select-none", 8 | fontFamily: "font-sans", 9 | fontWeight: "font-medium", 10 | textAlign: "text-center", 11 | textTransform: "uppercase", 12 | transition: "transition-all", 13 | disabled: "disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none", 14 | }, 15 | sm: { 16 | width: "w-8", 17 | maxWidth: "max-w-[32px]", 18 | height: "h-8", 19 | maxHeight: "max-h-[32px]", 20 | borderRadius: "rounded-lg", 21 | fontSize: "text-xs", 22 | }, 23 | md: { 24 | width: "w-10", 25 | maxWidth: "max-w-[40px]", 26 | height: "h-10", 27 | maxHeight: "max-h-[40px]", 28 | borderRadius: "rounded-lg", 29 | fontSize: "text-xs", 30 | }, 31 | lg: { 32 | width: "w-12", 33 | maxWidth: "max-w-[48px]", 34 | height: "h-12", 35 | maxHeight: "max-h-[48px]", 36 | borderRadius: "rounded-lg", 37 | fontSize: "text-sm", 38 | }, 39 | }; 40 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/input/input-theme.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from '../../../types/generic'; 2 | 3 | export const InputTheme: IPropsMapper = { 4 | container: { 5 | position: 'relative', 6 | width: 'w-full', 7 | minWidth: 'min-w-[200px]', 8 | }, 9 | input: { 10 | peer: 'peer', 11 | width: 'w-full', 12 | height: 'h-full', 13 | bg: 'bg-transparent', 14 | color: 'text-blue-gray-700', 15 | fontFamily: 'font-sans', 16 | fontWeight: 'font-normal', 17 | outline: 'outline outline-0 focus:outline-0', 18 | disabled: 'disabled:bg-blue-gray-50 disabled:border-0', 19 | transition: 'transition-all', 20 | }, 21 | label: { 22 | display: 'flex', 23 | width: 'w-full', 24 | height: 'h-full', 25 | userSelect: 'select-none', 26 | pointerEvents: 'pointer-events-none', 27 | position: 'absolute', 28 | left: 'left-0', 29 | fontWeight: 'font-normal', 30 | overflow: '!overflow-visible', 31 | textOverflow: 'truncate', 32 | color: 'peer-placeholder-shown:text-blue-gray-500', 33 | lineHeight: 'leading-tight peer-focus:leading-tight', 34 | disabled: 35 | 'peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500', 36 | transition: 'transition-all', 37 | }, 38 | icon: { 39 | display: 'grid', 40 | placeItems: 'place-items-center', 41 | position: 'absolute', 42 | color: 'text-blue-gray-500', 43 | }, 44 | asterisk: { 45 | display: 'inline-block', 46 | color: 'text-red-500', 47 | ml: 'ml-0.5', 48 | }, 49 | }; 50 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/paginator/paginator-theme.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from '../../../types/generic'; 2 | 3 | export const PaginatorTheme: IPropsMapper = { 4 | container: { 5 | position: 'relative', 6 | display: 'flex', 7 | alignItems: 'items-center', 8 | cursor: 'cursor-pointer', 9 | gap:'gap-8' 10 | }, 11 | 12 | }; 13 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/radio/radio-theme.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from '../../../types/generic'; 2 | 3 | export const RadioTheme: IPropsMapper = { 4 | input: { 5 | peer: 'peer', 6 | position: 'relative', 7 | appearance: 'appearance-none', 8 | width: 'w-5', 9 | height: 'h-5', 10 | borderWidth: 'border', 11 | borderRadius: 'rounded-full', 12 | borderColor: 'border-blue-gray-200', 13 | cursor: 'cursor-pointer', 14 | transition: 'transition-all', 15 | before: { 16 | content: "before:content['']", 17 | display: 'before:block', 18 | bg: 'before:bg-blue-gray-500', 19 | width: 'before:w-12', 20 | height: 'before:h-12', 21 | borderRadius: 'before:rounded-full', 22 | position: 'before:absolute', 23 | top: 'before:top-2/4', 24 | left: 'before:left-2/4', 25 | transform: 'before:-translate-y-2/4 before:-translate-x-2/4', 26 | opacity: 'before:opacity-0 hover:before:opacity-10', 27 | transition: 'before:transition-opacity', 28 | }, 29 | }, 30 | container: { 31 | position: 'relative', 32 | display: 'flex', 33 | alignItems: 'items-center', 34 | cursor: 'cursor-pointer', 35 | p: 'p-3', 36 | borderRadius: 'rounded-full', 37 | }, 38 | icon: { 39 | position: 'absolute', 40 | top: 'top-2/4', 41 | left: 'left-2/4', 42 | translate: '-translate-y-2/4 -translate-x-2/4', 43 | pointerEvents: 'pointer-events-none', 44 | opacity: 'opacity-0 peer-checked:opacity-100', 45 | transition: 'transition-opacity', 46 | }, 47 | disabled: { 48 | opacity: 'opacity-50', 49 | pointerEvents: 'pointer-events-none', 50 | cursor: 'cursor-not-allowed', 51 | }, 52 | label: { 53 | color: 'text-gray-700', 54 | fontWeight: 'font-light', 55 | userSelect: 'select-none', 56 | cursor: 'cursor-pointer', 57 | mt: 'mt-px', 58 | }, 59 | }; 60 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/slider/slider-colors.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from "../../../types/generic"; 2 | 3 | const sliderColor: IPropsMapper = { 4 | "blue-gray": { 5 | color: "text-blue-gray-500", 6 | }, 7 | gray: { 8 | color: "text-gray-900", 9 | }, 10 | brown: { 11 | color: "text-brown-500", 12 | }, 13 | "deep-orange": { 14 | color: "text-deep-orange-500", 15 | }, 16 | orange: { 17 | color: "text-orange-500", 18 | }, 19 | amber: { 20 | color: "text-amber-500", 21 | }, 22 | yellow: { 23 | color: "text-yellow-500", 24 | }, 25 | lime: { 26 | color: "text-lime-500", 27 | }, 28 | "light-green": { 29 | color: "text-light-green-500", 30 | }, 31 | green: { 32 | color: "text-green-500", 33 | }, 34 | teal: { 35 | color: "text-teal-500", 36 | }, 37 | cyan: { 38 | color: "text-cyan-500", 39 | }, 40 | "light-blue": { 41 | color: "text-light-blue-500", 42 | }, 43 | blue: { 44 | color: "text-blue-500", 45 | }, 46 | indigo: { 47 | color: "text-indigo-500", 48 | }, 49 | "deep-purple": { 50 | color: "text-deep-purple-500", 51 | }, 52 | purple: { 53 | color: "text-purple-500", 54 | }, 55 | pink: { 56 | color: "text-pink-500", 57 | }, 58 | red: { 59 | color: "text-red-500", 60 | }, 61 | }; 62 | 63 | export default sliderColor; -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/components/textarea/textarea-theme.ts: -------------------------------------------------------------------------------- 1 | import { IPropsMapper } from '../../../types/generic'; 2 | 3 | export const textAreaTheme: IPropsMapper = { 4 | container: { 5 | position: 'relative', 6 | width: 'w-full', 7 | minWidth: 'min-w-[200px]', 8 | }, 9 | textarea: { 10 | peer: 'peer', 11 | width: 'w-full', 12 | height: 'h-full', 13 | minHeight: 'min-h-[100px]', 14 | bg: 'bg-transparent', 15 | color: 'text-blue-gray-700', 16 | fontFamily: 'font-sans', 17 | fontWeight: 'font-normal', 18 | outline: 'outline outline-0 focus:outline-0', 19 | resize: 'resize-y', 20 | disabled: 'disabled:bg-blue-gray-50 disabled:border-0 disabled:resize-none', 21 | transition: 'transition-all', 22 | }, 23 | label: { 24 | display: 'flex', 25 | width: 'w-full', 26 | height: 'h-full', 27 | userSelect: 'select-none', 28 | pointerEvents: 'pointer-events-none', 29 | position: 'absolute', 30 | left: 'left-0', 31 | fontWeight: 'font-normal', 32 | color: 'peer-placeholder-shown:text-blue-gray-500', 33 | lineHeight: 'leading-tight peer-focus:leading-tight', 34 | disabled: 35 | 'peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500', 36 | transition: 'transition-all', 37 | }, 38 | 39 | }; 40 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/theme/theme-base.ts: -------------------------------------------------------------------------------- 1 | export abstract class DUITheme{ 2 | 3 | /** 4 | * Compile the class name for a theme component 5 | */ 6 | abstract getCompiledClassName(): string ; 7 | } -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/types/componentTypes/alert.ts: -------------------------------------------------------------------------------- 1 | import { colors } from '../generic'; 2 | 3 | 4 | export type variant = "filled" | "gradient" | "outlined" | "ghost"; 5 | export type color = colors; 6 | export type open = boolean; 7 | export type className = string; 8 | 9 | 10 | // Interface 11 | export interface Alert { 12 | variant: variant; 13 | color: color; 14 | open: boolean; 15 | isDismissible: boolean; 16 | className: className; 17 | } 18 | 19 | 20 | export const DefaultAlert: Alert = { 21 | variant: 'filled', 22 | color: 'gray', 23 | className: '', 24 | open: true, 25 | isDismissible: false 26 | }; -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/types/componentTypes/avatar.ts: -------------------------------------------------------------------------------- 1 | import { colors } from '../generic'; 2 | 3 | export type variant = 'rounded' | 'circle' | 'square'; 4 | export type color = colors; 5 | export type size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'; 6 | export type className = string; 7 | 8 | 9 | // Interface 10 | export interface Avatar { 11 | variant: variant; 12 | borderColor: color; 13 | size: size; 14 | className: className; 15 | addBorder: boolean; 16 | } 17 | 18 | export const DefaultAvatar: Avatar = { 19 | variant: 'circle', 20 | borderColor: 'gray', 21 | className: '', 22 | size: 'md', 23 | addBorder: false, 24 | }; 25 | 26 | 27 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/types/componentTypes/breadcrumb.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | // typescript types 4 | export type fullWidth = boolean; 5 | export type className = string; 6 | 7 | 8 | // Interface 9 | export interface IBreadCrumb { 10 | fullWidth: fullWidth; 11 | className: className; 12 | } 13 | 14 | export const DefaultBreadCrumb : IBreadCrumb = { 15 | fullWidth: false, 16 | className: "" 17 | } -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/types/componentTypes/button.ts: -------------------------------------------------------------------------------- 1 | import buttonFilled from '../../theme/components/button/button-fillled'; 2 | import buttonGradient from '../../theme/components/button/button-gradient'; 3 | import buttonOutlined from '../../theme/components/button/button-outline'; 4 | import buttonText from '../../theme/components/button/button-text'; 5 | import { IPropsMapper, colors } from '../generic'; 6 | 7 | // typescript types 8 | export type variant = 'filled' | 'outlined' | 'gradient' | 'text'; 9 | export type size = 'sm' | 'md' | 'lg'; 10 | export type color = 'white' | colors; 11 | export type fullWidth = boolean; 12 | export type ripple = boolean; 13 | export type className = string; 14 | 15 | // Interface 16 | export interface Button { 17 | variant: variant; 18 | size: size; 19 | color: color; 20 | fullWidth: fullWidth; 21 | ripple: ripple; 22 | rounded: boolean; 23 | className: className; 24 | } 25 | 26 | 27 | 28 | export const DefaultButton: Button = { 29 | variant: 'filled', 30 | size: 'md', 31 | color: 'gray', 32 | fullWidth: false, 33 | ripple: true, 34 | className: '', 35 | rounded: false 36 | }; 37 | 38 | export const DefaultButtonPropsMapper: IPropsMapper = { 39 | sm: "py-2 px-4 text-xs rounded-lg", 40 | md: "py-3 px-6 text-xs rounded-lg", 41 | lg: "py-3.5 px-7 text-sm rounded-lg", 42 | }; 43 | 44 | /** 45 | * Button Variant Mapper 46 | * Map the variant of the button 47 | */ 48 | export const ButtonVarientMapper : IPropsMapper> = { 49 | filled : buttonFilled, 50 | outlined: buttonOutlined, 51 | gradient : buttonGradient, 52 | text : buttonText 53 | } 54 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/types/componentTypes/checkbox.ts: -------------------------------------------------------------------------------- 1 | import { colors } from "../generic"; 2 | 3 | 4 | 5 | 6 | // typescript types 7 | export type color = colors; 8 | export type label = string; 9 | export type ripple = boolean; 10 | export type className = string; 11 | export type disabled = boolean; 12 | 13 | export interface BaseProps{ 14 | className : className 15 | } 16 | 17 | export type containerProps = BaseProps; 18 | export type circleProps = BaseProps; 19 | 20 | 21 | export interface ICheckBox{ 22 | color: string; 23 | label: string; 24 | useCustomIcon: boolean; 25 | ripple: boolean; 26 | className: string; 27 | disabled: boolean; 28 | } 29 | 30 | export const DefaultCheckBox : ICheckBox ={ 31 | color: "blue", 32 | label: "", 33 | useCustomIcon: false, 34 | ripple: true, 35 | className: "", 36 | disabled: false 37 | } -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/types/componentTypes/chip.ts: -------------------------------------------------------------------------------- 1 | import chipFilled from "../../theme/components/chip/chip-filled"; 2 | import chipGhost from "../../theme/components/chip/chip-ghost"; 3 | import chipGradient from "../../theme/components/chip/chip-gradient"; 4 | import chipOutlined from "../../theme/components/chip/chip-outlined"; 5 | import { IPropsMapper, colors } from "../generic"; 6 | 7 | // typescript types 8 | export type variant = "filled" | "gradient" | "outlined" | "ghost"; 9 | export type size = "sm" | "md" | "lg"; 10 | export type color = colors; 11 | export type open = boolean; 12 | export type onClose = () => void; 13 | export type isDismissible = boolean 14 | export type className = string; 15 | 16 | // export type icon = HTMLElement; // will be catered soon 17 | 18 | // Interface 19 | export interface Chip { 20 | variant: variant; 21 | size: size; 22 | color: color; 23 | className: className; 24 | open: open; 25 | isDismissible : isDismissible 26 | hasIcon : boolean 27 | } 28 | 29 | 30 | 31 | export const DefaultChip: Chip = { 32 | variant: 'filled', 33 | size: 'md', 34 | color: 'gray', 35 | className: '', 36 | open: false, 37 | isDismissible: false, 38 | hasIcon: false 39 | }; 40 | 41 | export const ChipVariantMapper : IPropsMapper> = { 42 | outlined:chipOutlined, 43 | filled:chipFilled, 44 | gradient:chipGradient, 45 | ghost: chipGhost 46 | } -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/types/componentTypes/collapse.ts: -------------------------------------------------------------------------------- 1 | export type className = string; 2 | export type open = boolean; 3 | 4 | export interface ICollapse { 5 | open: open; 6 | className: className; 7 | } 8 | 9 | export const DefaultCollapse: ICollapse = { 10 | open: false, 11 | className: '', 12 | }; 13 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/types/componentTypes/dialog.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | // typescript types 4 | export type open = boolean; 5 | export type size = "xs" | "sm" | "md" | "lg" | "xl" | "xxl"; 6 | export type animate = string; 7 | export type divider = boolean; 8 | export type className = string; 9 | 10 | 11 | export interface IDialog { 12 | open:open; 13 | size: size; 14 | animate: any; 15 | divider: divider; 16 | className: className; 17 | closeOnBackground: boolean 18 | } 19 | 20 | export const DefaultDialogProps : IDialog ={ 21 | open: false, 22 | size: "md", 23 | animate: "", 24 | divider: true, 25 | className: "", 26 | closeOnBackground: false 27 | } -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/types/componentTypes/input.ts: -------------------------------------------------------------------------------- 1 | import { InputOutlinedTheme } from "../../theme/components/input/input-outline-theme/input-outline-theme"; 2 | import { InputStandardTheme } from "../../theme/components/input/input-standard-theme/input-standard-theme"; 3 | import { InputStaticTheme } from "../../theme/components/input/input-static-theme/input-static-theme"; 4 | import { textareaOutlinedTheme } from "../../theme/components/textarea/textarea-outline/textarea-outline-theme"; 5 | import { textareaStandardTheme } from "../../theme/components/textarea/textarea-standard/textarea-standard-theme"; 6 | import { textareaStaticTheme } from "../../theme/components/textarea/textarea-static/textarea-static-theme"; 7 | import { IPropsMapper, colors } from "../generic"; 8 | 9 | export type variant = "standard" | "outlined" | "static"; 10 | export type size = "md" | "lg"; 11 | export type color = colors; 12 | export type label = string; 13 | export type error = boolean; 14 | export type success = boolean; 15 | export type icon = HTMLElement; 16 | export type resizable = boolean; 17 | 18 | 19 | export interface IInputProps{ 20 | variant : variant; 21 | size: size; 22 | color : color; 23 | label : label; 24 | error : error; 25 | success : success; 26 | icon : icon | undefined; 27 | resizable : resizable; 28 | className: string; 29 | type: string; 30 | 31 | } 32 | 33 | export const DefaultInputProps : IInputProps ={ 34 | variant: "outlined", 35 | size: "md", 36 | color: "gray", 37 | label: "Enter your text", 38 | error: false, 39 | success: false, 40 | icon: undefined, 41 | resizable: false, 42 | className: "", 43 | type: "text" 44 | } 45 | 46 | export const TextAreaVarientMapper : IPropsMapper> = { 47 | outlined:textareaOutlinedTheme, 48 | standard:textareaStandardTheme, 49 | static:textareaStaticTheme, 50 | } 51 | 52 | export const InputVarientMapper : IPropsMapper> = { 53 | outlined:InputOutlinedTheme, 54 | standard:InputStandardTheme, 55 | static:InputStaticTheme, 56 | } -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/types/componentTypes/paginator.ts: -------------------------------------------------------------------------------- 1 | import { colors } from '../generic'; 2 | 3 | // typescript types 4 | export type variant = 'simple' | 'standard' | 'circular' | 'grouped'; 5 | export type color = colors; 6 | export type page = number; 7 | export type pageSize = number; 8 | export type length = number; 9 | export type visibleRangeLength = number; 10 | export type pageSizes = number[]; 11 | export type className = string; 12 | 13 | // Interface 14 | export interface IPaginator { 15 | variant: variant; 16 | color: color; 17 | className: className; 18 | page: page; 19 | pageSize: pageSize; 20 | visibleRangeLength: visibleRangeLength; 21 | length: length; 22 | showFirstLastOption: boolean; 23 | previousButtonLabel: string; 24 | nextButtonLabel: string 25 | } 26 | 27 | export const DefaultPaginationProps: IPaginator = { 28 | variant: 'simple', 29 | color: 'blue-gray', 30 | className: '', 31 | page: 1, 32 | pageSize: 5, 33 | visibleRangeLength: 5, 34 | length: 10, 35 | showFirstLastOption: true, 36 | previousButtonLabel: 'PREVIOUS', 37 | nextButtonLabel: 'NEXT' 38 | }; 39 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/types/componentTypes/radio.ts: -------------------------------------------------------------------------------- 1 | import { colors } from '../generic'; 2 | 3 | // typescript types 4 | export type color = colors; 5 | export type label = string; 6 | export type icon = boolean; 7 | export type ripple = boolean; 8 | export type className = string; 9 | export type disabled = boolean; 10 | 11 | export interface IRadio { 12 | color: string; 13 | label: string; 14 | useCustomIcon?: icon; 15 | ripple: boolean; 16 | className: string; 17 | value: string; 18 | name: string; 19 | disabled: boolean; 20 | } 21 | 22 | export const DefaultRadioButton: IRadio = { 23 | color: 'blue', 24 | label: '', 25 | useCustomIcon: false, 26 | ripple: true, 27 | className: '', 28 | disabled: false, 29 | value: 'type', 30 | name: '' 31 | }; 32 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/types/componentTypes/select.ts: -------------------------------------------------------------------------------- 1 | import { SelectOutlinedTheme } from '../../theme/components/select/select-outline-theme/select-outline-theme'; 2 | import { SelectStandardTheme } from '../../theme/components/select/select-standard/select-standard-theme'; 3 | import { SelectStaticTheme } from '../../theme/components/select/select-static/select-static-theme'; 4 | import { IPropsMapper, colors } from '../generic'; 5 | 6 | // typescript types 7 | export type variant = 'standard' | 'outlined' | 'static'; 8 | export type size = 'md' | 'lg'; 9 | export type color = colors; 10 | export type label = string; 11 | export type error = boolean; 12 | export type success = boolean; 13 | export type autoHeight = boolean; 14 | export type lockScroll = boolean; 15 | 16 | export interface ISelectProps { 17 | variant: variant; 18 | size: size; 19 | color: color; 20 | label: label; 21 | error: error; 22 | success: success; 23 | autoHeight: autoHeight; 24 | lockScroll: lockScroll; 25 | } 26 | 27 | export const DefaultSelectProps: ISelectProps = { 28 | variant: 'outlined', 29 | size: 'md', 30 | color: 'gray', 31 | label: 'Select an option', 32 | error: false, 33 | success: false, 34 | autoHeight: false, 35 | lockScroll: false, 36 | }; 37 | 38 | export const SelectVariantMapper: IPropsMapper> = { 39 | outlined: SelectOutlinedTheme, 40 | standard : SelectStandardTheme, 41 | static : SelectStaticTheme 42 | }; 43 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/types/componentTypes/slider.ts: -------------------------------------------------------------------------------- 1 | import { colors } from "../generic"; 2 | 3 | 4 | export type color = colors; 5 | export type size = "sm" | "md" | "lg"; 6 | export type className = string; 7 | export type trackClassName = string; 8 | export type thumbClassName = string; 9 | export type barClassName = string; 10 | export type defaultValue = string | number | readonly string[]; 11 | export type value = string | number | readonly string[]; 12 | export type min = number | string; 13 | export type max = number | string; 14 | export type step = number | string; 15 | // export type inputRef = React.RefObject; 16 | // export type inputProps = React.ComponentProps<"input">; 17 | 18 | export interface ISlider{ 19 | color: color; 20 | size:size; 21 | className : className; 22 | trackClassName: trackClassName; 23 | thumbClassName : thumbClassName; 24 | barClassName: barClassName; 25 | defaultValue: defaultValue; 26 | value: value; 27 | min?:min; 28 | max? : max; 29 | step: step 30 | } 31 | 32 | 33 | export const DefaultSlider : ISlider ={ 34 | color: "gray", 35 | size: "md", 36 | min: undefined, 37 | max: undefined, 38 | step: "any", 39 | className: "", 40 | trackClassName: "", 41 | thumbClassName: "", 42 | barClassName: "", 43 | defaultValue: "50", 44 | value: "" 45 | } -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/types/componentTypes/typography.ts: -------------------------------------------------------------------------------- 1 | import { colors } from "../generic"; 2 | 3 | 4 | 5 | // typescript types 6 | export type variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'lead' | 'paragraph' | 'small'; 7 | export type color = 'inherit' | 'current' | 'black' | 'white' | colors; 8 | export type textGradient = boolean; 9 | export type className = string; 10 | 11 | 12 | export interface Typography{ 13 | variant: variant; 14 | color: color; 15 | className: className; 16 | textGradient: boolean; 17 | } 18 | 19 | export const DefaultTypography: Typography = { 20 | variant: 'paragraph', 21 | className: '', 22 | textGradient: false, 23 | color: 'inherit' 24 | }; 25 | -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/types/generic.ts: -------------------------------------------------------------------------------- 1 | // typescript types 2 | export type colors = 3 | | "blue-gray" 4 | | "gray" 5 | | "brown" 6 | | "deep-orange" 7 | | "orange" 8 | | "amber" 9 | | "yellow" 10 | | "lime" 11 | | "light-green" 12 | | "green" 13 | | "teal" 14 | | "cyan" 15 | | "light-blue" 16 | | "blue" 17 | | "indigo" 18 | | "deep-purple" 19 | | "purple" 20 | | "pink" 21 | | "red"; 22 | 23 | 24 | export interface IPropsMapper { 25 | [key: string]: T; 26 | } -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/types/index.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/david-ui-org/david-ui-angular/4c281950eb47ec8d14e4ca1f90ed4f95cbae20ea/projects/david-ui-angular/src/lib/types/index.ts -------------------------------------------------------------------------------- /projects/david-ui-angular/src/lib/utilities/helpers/string-helper.ts: -------------------------------------------------------------------------------- 1 | 2 | export const ConvertToClassName = (str : string)=>{ 3 | return ' ' + str + ' '; 4 | } 5 | 6 | export const ObjectToStr = (obj : object) =>{ 7 | let result : string[] = []; 8 | 9 | Object.values(obj).forEach((value) => { 10 | if (typeof value === "string") { 11 | result = [...result, value]; 12 | } else if (typeof value === "object" && !Array.isArray(value) && value !== null) { 13 | result = [...result, ObjectToStr(value)]; 14 | } 15 | 16 | return undefined; 17 | }); 18 | 19 | return result.join(" "); 20 | } -------------------------------------------------------------------------------- /projects/david-ui-angular/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": [ 12 | "**/*.spec.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /projects/david-ui-angular/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 | }, 7 | "angularCompilerOptions": { 8 | "compilationMode": "partial" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /projects/david-ui-angular/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": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "include": [ 11 | "**/*.spec.ts", 12 | "**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "forceConsistentCasingInFileNames": true, 8 | "strict": true, 9 | "noImplicitOverride": true, 10 | "noPropertyAccessFromIndexSignature": true, 11 | "noImplicitReturns": true, 12 | "paths": { 13 | "@david-ui-angular": [ 14 | "./dist/david-ui-angular" 15 | ] 16 | }, 17 | "noFallthroughCasesInSwitch": true, 18 | "sourceMap": true, 19 | "declaration": false, 20 | "downlevelIteration": true, 21 | "experimentalDecorators": true, 22 | "moduleResolution": "node", 23 | "importHelpers": true, 24 | "target": "ES2022", 25 | "module": "ES2022", 26 | "useDefineForClassFields": false, 27 | "lib": [ 28 | "ES2022", 29 | "dom" 30 | ] 31 | }, 32 | "angularCompilerOptions": { 33 | "enableI18nLegacyMessageIdFormat": false, 34 | "strictInjectionParameters": true, 35 | "strictInputAccessModifiers": true, 36 | "strictTemplates": true 37 | } 38 | } 39 | --------------------------------------------------------------------------------