├── .editorconfig ├── .gitignore ├── DEV.md ├── Dockerfile ├── LICENSE ├── README.md ├── angular.json ├── e2e ├── protractor.conf.js ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.e2e.json ├── etc └── nginx.conf ├── package-lock.json ├── package.json ├── projects ├── schematics │ ├── collection.json │ ├── ng-add │ │ ├── index.ts │ │ ├── schema.json │ │ └── schema.ts │ ├── release.js │ ├── schematize │ │ ├── _template │ │ │ ├── index.ts │ │ │ ├── schema.d.ts │ │ │ └── schema.json │ │ ├── process-module.js │ │ ├── schematize.js │ │ └── update-collection.js │ ├── tsconfig.json │ └── util │ │ ├── config.ts │ │ ├── package.ts │ │ ├── parse-name.ts │ │ └── strings.ts ├── ui-docs │ ├── browserslist │ ├── karma.conf.js │ ├── src │ │ ├── app │ │ │ ├── app.component.html │ │ │ ├── app.component.scss │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── docs-page │ │ │ │ ├── docs-page.component.html │ │ │ │ ├── docs-page.component.scss │ │ │ │ ├── docs-page.component.spec.ts │ │ │ │ └── docs-page.component.ts │ │ │ ├── layout │ │ │ │ ├── header │ │ │ │ │ ├── header.component.html │ │ │ │ │ ├── header.component.scss │ │ │ │ │ └── header.component.ts │ │ │ │ ├── layout.module.ts │ │ │ │ ├── layout │ │ │ │ │ ├── layout.component.html │ │ │ │ │ ├── layout.component.scss │ │ │ │ │ └── layout.component.ts │ │ │ │ └── nav │ │ │ │ │ ├── nav.component.html │ │ │ │ │ ├── nav.component.scss │ │ │ │ │ └── nav.component.ts │ │ │ ├── md │ │ │ │ ├── md.component.html │ │ │ │ ├── md.component.scss │ │ │ │ ├── md.component.spec.ts │ │ │ │ └── md.component.ts │ │ │ ├── module-demo │ │ │ │ ├── module-demo.component.html │ │ │ │ ├── module-demo.component.scss │ │ │ │ ├── module-demo.component.spec.ts │ │ │ │ └── module-demo.component.ts │ │ │ └── module-page │ │ │ │ ├── module-page-class-declar │ │ │ │ ├── module-page-class-declar.component.html │ │ │ │ ├── module-page-class-declar.component.scss │ │ │ │ ├── module-page-class-declar.component.spec.ts │ │ │ │ └── module-page-class-declar.component.ts │ │ │ │ ├── module-page-decorator-field │ │ │ │ ├── module-page-decorator-field.component.html │ │ │ │ ├── module-page-decorator-field.component.scss │ │ │ │ ├── module-page-decorator-field.component.spec.ts │ │ │ │ └── module-page-decorator-field.component.ts │ │ │ │ ├── module-page-function-declar │ │ │ │ ├── module-page-function-declar.component.html │ │ │ │ ├── module-page-function-declar.component.scss │ │ │ │ ├── module-page-function-declar.component.spec.ts │ │ │ │ └── module-page-function-declar.component.ts │ │ │ │ ├── module-page-interface-declar │ │ │ │ ├── module-page-interface-declar.component.html │ │ │ │ ├── module-page-interface-declar.component.scss │ │ │ │ ├── module-page-interface-declar.component.spec.ts │ │ │ │ └── module-page-interface-declar.component.ts │ │ │ │ ├── module-page.component.html │ │ │ │ ├── module-page.component.scss │ │ │ │ ├── module-page.component.spec.ts │ │ │ │ └── module-page.component.ts │ │ ├── assets │ │ │ ├── .gitkeep │ │ │ ├── icons │ │ │ │ ├── ios-close.svg │ │ │ │ ├── ios-mail.svg │ │ │ │ ├── ios-menu.svg │ │ │ │ ├── logo-github.svg │ │ │ │ ├── logo-npm.svg │ │ │ │ └── logo-twitter.svg │ │ │ └── sula-preview.png │ │ ├── content │ │ │ ├── .gitignore │ │ │ └── content.ts │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles │ │ │ ├── hljs-default.scss │ │ │ ├── loader.scss │ │ │ ├── main.scss │ │ │ ├── mq.scss │ │ │ └── theme.scss │ │ ├── test.ts │ │ └── typings.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── tslint.json └── ui │ ├── index.ts │ ├── karma.conf.js │ ├── ng-package.json │ ├── ng-package.prod.json │ ├── package.json │ ├── release.js │ ├── src │ ├── docs │ │ ├── EXTRACTING.md │ │ ├── INTRO.md │ │ └── THEMING.md │ ├── lib │ │ ├── demo.module.ts │ │ ├── ui-accordion │ │ │ ├── demo │ │ │ │ ├── ui-accordion-demo.component.html │ │ │ │ ├── ui-accordion-demo.component.scss │ │ │ │ ├── ui-accordion-demo.component.ts │ │ │ │ └── ui-accordion-demo.module.ts │ │ │ ├── ui-accordion-content │ │ │ │ ├── ui-accordion-content.component.scss │ │ │ │ └── ui-accordion-content.component.ts │ │ │ ├── ui-accordion-panel │ │ │ │ ├── ui-accordion-panel.component.scss │ │ │ │ └── ui-accordion-panel.component.ts │ │ │ ├── ui-accordion-title │ │ │ │ ├── ui-accordion-title.component.scss │ │ │ │ └── ui-accordion-title.component.ts │ │ │ ├── ui-accordion.module.ts │ │ │ ├── ui-accordion.ts │ │ │ └── ui-accordion │ │ │ │ ├── ui-accordion.component.scss │ │ │ │ └── ui-accordion.component.ts │ │ ├── ui-alert │ │ │ ├── demo │ │ │ │ ├── ui-alert-demo.component.html │ │ │ │ ├── ui-alert-demo.component.scss │ │ │ │ ├── ui-alert-demo.component.ts │ │ │ │ └── ui-alert-demo.module.ts │ │ │ ├── ui-alert-title │ │ │ │ └── ui-alert-title.component.ts │ │ │ ├── ui-alert.module.ts │ │ │ ├── ui-alert.ts │ │ │ └── ui-alert │ │ │ │ ├── ui-alert.component.html │ │ │ │ ├── ui-alert.component.scss │ │ │ │ └── ui-alert.component.ts │ │ ├── ui-badge │ │ │ ├── demo │ │ │ │ ├── ui-badge-demo.component.html │ │ │ │ ├── ui-badge-demo.component.scss │ │ │ │ ├── ui-badge-demo.component.ts │ │ │ │ └── ui-badge-demo.module.ts │ │ │ ├── meta.ts │ │ │ ├── ui-badge.module.ts │ │ │ ├── ui-badge.ts │ │ │ └── ui-badge │ │ │ │ ├── ui-badge.component.scss │ │ │ │ └── ui-badge.component.ts │ │ ├── ui-breadcrumbs │ │ │ ├── demo │ │ │ │ ├── ui-breadcrumbs-demo.component.html │ │ │ │ ├── ui-breadcrumbs-demo.component.scss │ │ │ │ ├── ui-breadcrumbs-demo.component.ts │ │ │ │ └── ui-breadcrumbs-demo.module.ts │ │ │ ├── ui-breadcrumbs-item │ │ │ │ ├── ui-breadcrumbs-item.component.html │ │ │ │ ├── ui-breadcrumbs-item.component.scss │ │ │ │ └── ui-breadcrumbs-item.component.ts │ │ │ ├── ui-breadcrumbs.module.ts │ │ │ ├── ui-breadcrumbs.ts │ │ │ └── ui-breadcrumbs │ │ │ │ ├── ui-breadcrumbs.component.html │ │ │ │ ├── ui-breadcrumbs.component.scss │ │ │ │ └── ui-breadcrumbs.component.ts │ │ ├── ui-button │ │ │ ├── demo │ │ │ │ ├── ui-button-demo.component.html │ │ │ │ ├── ui-button-demo.component.scss │ │ │ │ ├── ui-button-demo.component.ts │ │ │ │ └── ui-button-demo.module.ts │ │ │ ├── meta.ts │ │ │ ├── ui-button-group │ │ │ │ ├── ui-button-group.component.scss │ │ │ │ └── ui-button-group.component.ts │ │ │ ├── ui-button.module.ts │ │ │ ├── ui-button.ts │ │ │ └── ui-button │ │ │ │ ├── ui-button.component.html │ │ │ │ ├── ui-button.component.scss │ │ │ │ └── ui-button.component.ts │ │ ├── ui-checkbox │ │ │ ├── demo │ │ │ │ ├── ui-checkbox-demo.component.html │ │ │ │ ├── ui-checkbox-demo.component.scss │ │ │ │ ├── ui-checkbox-demo.component.ts │ │ │ │ └── ui-checkbox-demo.module.ts │ │ │ ├── ui-checkbox.module.ts │ │ │ ├── ui-checkbox.ts │ │ │ └── ui-checkbox │ │ │ │ ├── ui-checkbox.component.html │ │ │ │ ├── ui-checkbox.component.scss │ │ │ │ └── ui-checkbox.component.ts │ │ ├── ui-date-picker │ │ │ ├── demo │ │ │ │ ├── ui-date-picker-demo.component.html │ │ │ │ ├── ui-date-picker-demo.component.ts │ │ │ │ └── ui-date-picker-demo.module.ts │ │ │ ├── ui-date-picker-popup │ │ │ │ ├── ui-date-picker-popup.component.html │ │ │ │ ├── ui-date-picker-popup.component.scss │ │ │ │ └── ui-date-picker-popup.component.ts │ │ │ ├── ui-date-picker.module.ts │ │ │ ├── ui-date-picker.ts │ │ │ └── ui-date-picker │ │ │ │ ├── ui-date-picker.component.html │ │ │ │ ├── ui-date-picker.component.scss │ │ │ │ └── ui-date-picker.component.ts │ │ ├── ui-dialog │ │ │ ├── demo │ │ │ │ ├── ui-dialog-demo.component.html │ │ │ │ ├── ui-dialog-demo.component.scss │ │ │ │ ├── ui-dialog-demo.component.ts │ │ │ │ └── ui-dialog-demo.module.ts │ │ │ ├── meta.ts │ │ │ ├── ui-dialog.module.ts │ │ │ ├── ui-dialog.service.ts │ │ │ ├── ui-dialog.ts │ │ │ └── ui-dialog │ │ │ │ ├── ui-dialog.component.html │ │ │ │ ├── ui-dialog.component.scss │ │ │ │ └── ui-dialog.component.ts │ │ ├── ui-drawer │ │ │ ├── demo │ │ │ │ ├── ui-drawer-demo.component.html │ │ │ │ ├── ui-drawer-demo.component.scss │ │ │ │ ├── ui-drawer-demo.component.ts │ │ │ │ └── ui-drawer-demo.module.ts │ │ │ ├── meta.ts │ │ │ ├── ui-drawer.module.ts │ │ │ ├── ui-drawer.ts │ │ │ └── ui-drawer │ │ │ │ ├── ui-drawer.component.html │ │ │ │ ├── ui-drawer.component.scss │ │ │ │ └── ui-drawer.component.ts │ │ ├── ui-dropdown │ │ │ ├── demo │ │ │ │ ├── ui-dropdown-demo.component.html │ │ │ │ ├── ui-dropdown-demo.component.scss │ │ │ │ ├── ui-dropdown-demo.component.ts │ │ │ │ └── ui-dropdown-demo.module.ts │ │ │ ├── ui-dropdown-item │ │ │ │ ├── ui-dropdown-item.component.scss │ │ │ │ └── ui-dropdown-item.component.ts │ │ │ ├── ui-dropdown.module.ts │ │ │ ├── ui-dropdown.ts │ │ │ └── ui-dropdown │ │ │ │ ├── ui-dropdown.component.html │ │ │ │ ├── ui-dropdown.component.scss │ │ │ │ └── ui-dropdown.component.ts │ │ ├── ui-ext-select │ │ │ ├── demo │ │ │ │ ├── ui-ext-select-demo.component.html │ │ │ │ ├── ui-ext-select-demo.component.ts │ │ │ │ └── ui-ext-select-demo.module.ts │ │ │ ├── icons.ts │ │ │ ├── ui-ext-select.module.ts │ │ │ ├── ui-ext-select.ts │ │ │ └── ui-ext-select │ │ │ │ ├── ui-ext-select.component.html │ │ │ │ ├── ui-ext-select.component.scss │ │ │ │ └── ui-ext-select.component.ts │ │ ├── ui-file │ │ │ ├── demo │ │ │ │ ├── ui-file-demo.component.html │ │ │ │ ├── ui-file-demo.component.ts │ │ │ │ └── ui-file-demo.module.ts │ │ │ ├── meta.ts │ │ │ ├── ui-file-holder │ │ │ │ └── ui-file-holder.directive.ts │ │ │ ├── ui-file.module.ts │ │ │ ├── ui-file.ts │ │ │ └── ui-file │ │ │ │ ├── ui-file.component.scss │ │ │ │ └── ui-file.component.ts │ │ ├── ui-form │ │ │ ├── demo │ │ │ │ ├── ui-form-demo.component.html │ │ │ │ ├── ui-form-demo.component.scss │ │ │ │ ├── ui-form-demo.component.ts │ │ │ │ └── ui-form-demo.module.ts │ │ │ ├── meta.ts │ │ │ ├── ui-form-field │ │ │ │ ├── ui-form-field.component.html │ │ │ │ ├── ui-form-field.component.scss │ │ │ │ └── ui-form-field.component.ts │ │ │ ├── ui-form.module.ts │ │ │ ├── ui-form.ts │ │ │ └── ui-form │ │ │ │ ├── ui-form.component.html │ │ │ │ ├── ui-form.component.scss │ │ │ │ └── ui-form.component.ts │ │ ├── ui-loading-bar │ │ │ ├── demo │ │ │ │ ├── ui-loading-bar-demo.component.html │ │ │ │ ├── ui-loading-bar-demo.component.ts │ │ │ │ └── ui-loading-bar-demo.module.ts │ │ │ ├── ui-loading-bar.module.ts │ │ │ ├── ui-loading-bar.ts │ │ │ └── ui-loading-bar │ │ │ │ ├── ui-loading-bar.component.html │ │ │ │ ├── ui-loading-bar.component.scss │ │ │ │ └── ui-loading-bar.component.ts │ │ ├── ui-modal │ │ │ ├── demo │ │ │ │ ├── ui-modal-demo.component.html │ │ │ │ ├── ui-modal-demo.component.scss │ │ │ │ ├── ui-modal-demo.component.ts │ │ │ │ └── ui-modal-demo.module.ts │ │ │ ├── meta.ts │ │ │ ├── ui-modal-footer │ │ │ │ ├── ui-modal-footer.component.scss │ │ │ │ └── ui-modal-footer.component.ts │ │ │ ├── ui-modal.module.ts │ │ │ ├── ui-modal.ts │ │ │ └── ui-modal │ │ │ │ ├── ui-modal.component.html │ │ │ │ ├── ui-modal.component.scss │ │ │ │ └── ui-modal.component.ts │ │ ├── ui-notification │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── ui-notification-demo.component.html │ │ │ │ ├── ui-notification-demo.component.scss │ │ │ │ ├── ui-notification-demo.component.ts │ │ │ │ └── ui-notification-demo.module.ts │ │ │ ├── meta.ts │ │ │ ├── ui-notification-host │ │ │ │ ├── ui-notification-host.component.html │ │ │ │ ├── ui-notification-host.component.scss │ │ │ │ └── ui-notification-host.component.ts │ │ │ ├── ui-notification.module.ts │ │ │ ├── ui-notification.service.ts │ │ │ └── ui-notification.ts │ │ ├── ui-popup │ │ │ ├── demo │ │ │ │ ├── ui-popup-demo.component.html │ │ │ │ ├── ui-popup-demo.component.scss │ │ │ │ ├── ui-popup-demo.component.ts │ │ │ │ └── ui-popup-demo.module.ts │ │ │ ├── ui-popup.module.ts │ │ │ ├── ui-popup.ts │ │ │ └── ui-popup │ │ │ │ ├── ui-popup.component.html │ │ │ │ ├── ui-popup.component.scss │ │ │ │ └── ui-popup.component.ts │ │ ├── ui-radio │ │ │ ├── demo │ │ │ │ ├── ui-radio-demo.component.html │ │ │ │ ├── ui-radio-demo.component.scss │ │ │ │ ├── ui-radio-demo.component.ts │ │ │ │ └── ui-radio-demo.module.ts │ │ │ ├── ui-radio.module.ts │ │ │ ├── ui-radio.ts │ │ │ └── ui-radio │ │ │ │ ├── ui-radio.component.html │ │ │ │ ├── ui-radio.component.scss │ │ │ │ └── ui-radio.component.ts │ │ ├── ui-rating │ │ │ ├── demo │ │ │ │ ├── ui-rating-demo.component.html │ │ │ │ ├── ui-rating-demo.component.ts │ │ │ │ └── ui-rating-demo.module.ts │ │ │ ├── ui-rating.module.ts │ │ │ ├── ui-rating.ts │ │ │ └── ui-rating │ │ │ │ ├── ui-rating.component.html │ │ │ │ ├── ui-rating.component.scss │ │ │ │ └── ui-rating.component.ts │ │ ├── ui-scroll │ │ │ ├── demo │ │ │ │ ├── ui-scroll-demo.component.html │ │ │ │ ├── ui-scroll-demo.component.scss │ │ │ │ ├── ui-scroll-demo.component.ts │ │ │ │ └── ui-scroll-demo.module.ts │ │ │ ├── ui-scroll.module.ts │ │ │ ├── ui-scroll.ts │ │ │ └── ui-scroll │ │ │ │ ├── ui-scroll.component.html │ │ │ │ ├── ui-scroll.component.scss │ │ │ │ └── ui-scroll.component.ts │ │ ├── ui-select │ │ │ ├── demo │ │ │ │ ├── ui-select-demo.component.html │ │ │ │ ├── ui-select-demo.component.scss │ │ │ │ ├── ui-select-demo.component.ts │ │ │ │ └── ui-select-demo.module.ts │ │ │ ├── ui-select.module.ts │ │ │ ├── ui-select.ts │ │ │ └── ui-select │ │ │ │ ├── ui-select.component.scss │ │ │ │ └── ui-select.component.ts │ │ ├── ui-slider │ │ │ ├── demo │ │ │ │ ├── ui-slider-demo.component.html │ │ │ │ ├── ui-slider-demo.component.scss │ │ │ │ ├── ui-slider-demo.component.ts │ │ │ │ └── ui-slider-demo.module.ts │ │ │ ├── ui-slider.module.ts │ │ │ ├── ui-slider.ts │ │ │ └── ui-slider │ │ │ │ ├── ui-slider.component.html │ │ │ │ ├── ui-slider.component.scss │ │ │ │ └── ui-slider.component.ts │ │ ├── ui-tabs │ │ │ ├── demo │ │ │ │ ├── ui-tabs-demo.component.html │ │ │ │ ├── ui-tabs-demo.component.scss │ │ │ │ ├── ui-tabs-demo.component.ts │ │ │ │ └── ui-tabs-demo.module.ts │ │ │ ├── ui-tabs-content │ │ │ │ ├── ui-tabs-content.component.scss │ │ │ │ └── ui-tabs-content.component.ts │ │ │ ├── ui-tabs-nav │ │ │ │ ├── ui-tabs-nav.component.scss │ │ │ │ └── ui-tabs-nav.component.ts │ │ │ ├── ui-tabs-tab │ │ │ │ ├── ui-tabs-tab.component.scss │ │ │ │ └── ui-tabs-tab.component.ts │ │ │ ├── ui-tabs.module.ts │ │ │ ├── ui-tabs.ts │ │ │ └── ui-tabs │ │ │ │ ├── ui-tabs.component.scss │ │ │ │ └── ui-tabs.component.ts │ │ ├── ui-text │ │ │ ├── demo │ │ │ │ ├── ui-text-demo.component.html │ │ │ │ ├── ui-text-demo.component.scss │ │ │ │ ├── ui-text-demo.component.ts │ │ │ │ └── ui-text-demo.module.ts │ │ │ ├── ui-text.module.ts │ │ │ ├── ui-text.ts │ │ │ └── ui-text │ │ │ │ ├── ui-text.component.scss │ │ │ │ └── ui-text.component.ts │ │ ├── ui-theme │ │ │ ├── ui-theme.service.ts │ │ │ └── ui-theme.ts │ │ ├── ui-toggle │ │ │ ├── demo │ │ │ │ ├── ui-toggle-demo.component.html │ │ │ │ ├── ui-toggle-demo.component.scss │ │ │ │ ├── ui-toggle-demo.component.ts │ │ │ │ └── ui-toggle-demo.module.ts │ │ │ ├── ui-toggle.module.ts │ │ │ ├── ui-toggle.ts │ │ │ └── ui-toggle │ │ │ │ ├── ui-toggle.component.html │ │ │ │ ├── ui-toggle.component.scss │ │ │ │ └── ui-toggle.component.ts │ │ ├── ui-tooltip │ │ │ ├── demo │ │ │ │ ├── ui-tooltip-demo.component.html │ │ │ │ ├── ui-tooltip-demo.component.scss │ │ │ │ ├── ui-tooltip-demo.component.ts │ │ │ │ └── ui-tooltip-demo.module.ts │ │ │ ├── meta.ts │ │ │ ├── ui-tooltip-view │ │ │ │ ├── ui-tooltip-view.component.html │ │ │ │ ├── ui-tooltip-view.component.scss │ │ │ │ └── ui-tooltip-view.component.ts │ │ │ ├── ui-tooltip.module.ts │ │ │ ├── ui-tooltip.ts │ │ │ └── ui-tooltip │ │ │ │ └── ui-tooltip.directive.ts │ │ └── ui-vertical-menu │ │ │ ├── demo │ │ │ ├── ui-vertical-menu-demo.component.html │ │ │ ├── ui-vertical-menu-demo.component.scss │ │ │ ├── ui-vertical-menu-demo.component.ts │ │ │ └── ui-vertical-menu-demo.module.ts │ │ │ ├── ui-vertical-menu-group │ │ │ ├── ui-vertical-menu-group.component.html │ │ │ ├── ui-vertical-menu-group.component.scss │ │ │ └── ui-vertical-menu-group.component.ts │ │ │ ├── ui-vertical-menu-item │ │ │ ├── ui-vertical-menu-item.component.scss │ │ │ └── ui-vertical-menu-item.component.ts │ │ │ ├── ui-vertical-menu-sub │ │ │ ├── ui-vertical-menu-sub.component.scss │ │ │ └── ui-vertical-menu-sub.component.ts │ │ │ ├── ui-vertical-menu.module.ts │ │ │ ├── ui-vertical-menu.ts │ │ │ └── ui-vertical-menu │ │ │ ├── ui-vertical-menu.component.scss │ │ │ └── ui-vertical-menu.component.ts │ ├── public_api.ts │ ├── test.ts │ └── themes │ │ ├── dark.css │ │ └── main.css │ ├── tsconfig.lib.json │ ├── tsconfig.spec.json │ └── tslint.json ├── publish-build.sh ├── tsconfig.json └── tslint.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://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 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.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 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | CHANGELOG.md 37 | 38 | # System Files 39 | .DS_Store 40 | Thumbs.db 41 | -------------------------------------------------------------------------------- /DEV.md: -------------------------------------------------------------------------------- 1 | ## Release 2 | 3 | * `npm run ui:build` 4 | * `npm run ui:publish` 5 | 6 | ## Generate CHANGELOG 7 | 8 | ``` 9 | conventional-changelog -p angular -i CHANGELOG.md -s 10 | ``` 11 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM nginx:latest 2 | 3 | MAINTAINER Oleksa Novyk 4 | 5 | COPY ./etc/nginx.conf /etc/nginx/nginx.conf 6 | 7 | ADD ./dist/ui-docs /var/app/ 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2018 Sasha Novyk. https://ngx-kit.com 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 13 | all 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 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm version](https://badge.fury.io/js/%40ngx-kit%2Fsula.svg)](https://www.npmjs.com/@ngx-kit/sula) 2 | 3 | # Sula 4 | 5 | Angular UI components with [native CSS variables theming](./projects/ui/src/docs/THEMING.md) and [module extracting feature](./projects/ui/src/docs/EXTRACTING.md). 6 | 7 | Browse [live Sula demo & docs](https://sula.ngx-kit.com). 8 | 9 | ![](./projects/ui-docs/src/assets/sula-preview.png) 10 | -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './src/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: require('path').join(__dirname, './tsconfig.e2e.json') 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to app!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /etc/nginx.conf: -------------------------------------------------------------------------------- 1 | user www-data; 2 | worker_processes 4; 3 | pid /run/nginx.pid; 4 | 5 | events { 6 | worker_connections 768; 7 | # multi_accept on; 8 | } 9 | 10 | http { 11 | 12 | # Basic Settings 13 | sendfile off; 14 | tcp_nopush on; 15 | tcp_nodelay on; 16 | keepalive_timeout 65; 17 | types_hash_max_size 2048; 18 | # server_tokens off; 19 | # server_names_hash_bucket_size 64; 20 | # server_name_in_redirect off; 21 | include /etc/nginx/mime.types; 22 | default_type application/octet-stream; 23 | 24 | # Logging Settings 25 | access_log /var/log/nginx/access.log; 26 | error_log /var/log/nginx/error.log; 27 | 28 | server { 29 | listen 80 default_server; 30 | 31 | charset utf-8; 32 | 33 | set $root_path '/var/app'; 34 | root $root_path; 35 | 36 | location ~* ^.*$ { 37 | root $root_path; 38 | try_files $uri $1/index.html =404; 39 | } 40 | } 41 | } -------------------------------------------------------------------------------- /projects/schematics/collection.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-kit-sula", 3 | "version": "0.1", 4 | "schematics": { 5 | "ng-add": { 6 | "description": "add sula", 7 | "factory": "./ng-add", 8 | "schema": "./ng-add/schema.json" 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/schematics/ng-add/schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json-schema.org/schema", 3 | "id": "ngAdd", 4 | "title": "add ngx-kit", 5 | "type": "object", 6 | "properties": { 7 | "skipPackageJson": { 8 | "type": "boolean", 9 | "default": false, 10 | "description": "Do not add ngx-kit dependencies to package.json" 11 | } 12 | }, 13 | "required": [] 14 | } 15 | -------------------------------------------------------------------------------- /projects/schematics/ng-add/schema.ts: -------------------------------------------------------------------------------- 1 | export interface Schema { 2 | skipPackageJson: boolean; 3 | project?: string; 4 | } 5 | -------------------------------------------------------------------------------- /projects/schematics/release.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs-extra'); 3 | 4 | // Copy files 5 | fs.copySync(path.resolve(__dirname, './'), path.resolve(__dirname, '../../dist/ui/schematics'), { 6 | filter: function(src, dest) { 7 | if (src.indexOf('_template') !== -1) { 8 | return false; 9 | } 10 | // const ext = src.split('.').pop(); 11 | // return ext !== 'ts'; 12 | return true; 13 | } 14 | }); 15 | 16 | console.log('release.js finished!'); 17 | -------------------------------------------------------------------------------- /projects/schematics/schematize/_template/schema.d.ts: -------------------------------------------------------------------------------- 1 | export interface Schema { 2 | name: string; 3 | path?: string; 4 | project?: string; 5 | } 6 | -------------------------------------------------------------------------------- /projects/schematics/schematize/_template/schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json-schema.org/schema", 3 | "id": "SchematicsAngularModule", 4 | "title": "Angular Module Options Schema", 5 | "type": "object", 6 | "properties": { 7 | "path": { 8 | "type": "string", 9 | "format": "path", 10 | "description": "The path to create the module.", 11 | "visible": false 12 | }, 13 | "project": { 14 | "type": "string", 15 | "description": "The name of the project.", 16 | "$default": { 17 | "$source": "projectName" 18 | } 19 | }, 20 | "name": { 21 | "type": "string", 22 | "description": "The name of the module.", 23 | "$default": { 24 | "$source": "argv", 25 | "index": 0 26 | } 27 | } 28 | }, 29 | "required": [] 30 | } 31 | -------------------------------------------------------------------------------- /projects/schematics/schematize/schematize.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const walk = require('walk'); 3 | const fs = require('fs-extra'); 4 | const processModule = require('./process-module'); 5 | const updateCollection = require('./update-collection'); 6 | 7 | const config = { 8 | "src": path.resolve(__dirname, '../../ui/src/lib'), 9 | "template": path.resolve(__dirname, './_template'), 10 | "dist": path.resolve(__dirname, '../../../dist/ui/schematics'), 11 | }; 12 | 13 | walk.walkSync(path.resolve(config.src), { 14 | listeners: { 15 | directories: function(root, fileStats, next) { 16 | fileStats.map(f => f.name).forEach(name => { 17 | processModule(path.resolve(root, name), name, config); 18 | updateCollection(name, config); 19 | }); 20 | }, 21 | errors: function(root, nodeStatsArray, next) { 22 | console.log('err', nodeStatsArray); 23 | next(); 24 | }, 25 | } 26 | }); 27 | -------------------------------------------------------------------------------- /projects/schematics/schematize/update-collection.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs-extra'); 3 | 4 | module.exports = function(name, schematicsConfig) { 5 | const file = path.resolve(schematicsConfig.dist, 'collection.json'); 6 | const collection = JSON.parse(fs.readFileSync(file, 'utf-8')); 7 | collection.schematics[name] = { 8 | description: `Extract an @ngx-kit/sula/${name} module.`, 9 | factory: `./${name}`, 10 | schema: `./${name}/schema.json`, 11 | }; 12 | fs.outputFileSync(file, JSON.stringify(collection)); 13 | }; 14 | -------------------------------------------------------------------------------- /projects/schematics/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": true, 4 | "emitDecoratorMetadata": true, 5 | "experimentalDecorators": true, 6 | "module": "commonjs", 7 | "moduleResolution": "node", 8 | "noEmitOnError": true, 9 | "noFallthroughCasesInSwitch": true, 10 | "noImplicitAny": true, 11 | "noImplicitThis": true, 12 | "noUnusedParameters": false, 13 | "noUnusedLocals": true, 14 | "outDir": ".", 15 | "rootDir": ".", 16 | "skipDefaultLibCheck": true, 17 | "skipLibCheck": true, 18 | "inlineSourceMap": true, 19 | "sourceRoot": ".", 20 | // Inline sources are necessary for our tests to show the proper sources, since we are using 21 | // Istanbul (not Constantinople) as well, and applying both source maps to get the original 22 | // source in devtools. 23 | "inlineSources": true, 24 | "strictNullChecks": true, 25 | "target": "es6", 26 | "lib": [ 27 | "es2017" 28 | ], 29 | "baseUrl": "", 30 | "typeRoots": [ 31 | "../../../node_modules/@types" 32 | ], 33 | "types": [ 34 | "jasmine", 35 | "node" 36 | ] 37 | }, 38 | "exclude": [ 39 | "./*/files/**/*", 40 | "./*/other-files/**/*" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /projects/schematics/util/package.ts: -------------------------------------------------------------------------------- 1 | import { Tree } from '@angular-devkit/schematics'; 2 | 3 | /** 4 | * Adds a package to the package.json 5 | */ 6 | export function addPackageToPackageJson( 7 | host: Tree, type: string, pkg: string, version: string): Tree { 8 | if (host.exists('package.json')) { 9 | const sourceText = host.read('package.json')!.toString('utf-8'); 10 | const json = JSON.parse(sourceText); 11 | if (!json[type]) { 12 | json[type] = {}; 13 | } 14 | 15 | if (!json[type][pkg]) { 16 | json[type][pkg] = version; 17 | } 18 | 19 | host.overwrite('package.json', JSON.stringify(json, null, 2)); 20 | } 21 | 22 | return host; 23 | } 24 | -------------------------------------------------------------------------------- /projects/schematics/util/parse-name.ts: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * @license 4 | * Copyright Google Inc. All Rights Reserved. 5 | * 6 | * Use of this source code is governed by an MIT-style license that can be 7 | * found in the LICENSE file at https://angular.io/license 8 | */ 9 | // import { relative, Path } from "../../../angular_devkit/core/src/virtual-fs"; 10 | import { Path, basename, dirname, normalize } from '@angular-devkit/core'; 11 | 12 | export interface Location { 13 | name: string; 14 | path: Path; 15 | } 16 | 17 | export function parseName(path: string, name: string): Location { 18 | const nameWithoutPath = basename(name as Path); 19 | const namePath = dirname((path + '/' + name) as Path); 20 | 21 | return { 22 | name: nameWithoutPath, 23 | path: normalize('/' + namePath), 24 | }; 25 | } 26 | -------------------------------------------------------------------------------- /projects/ui-docs/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed 5 | > 0.5% 6 | last 2 versions 7 | Firefox ESR 8 | not dead 9 | # IE 9-11 -------------------------------------------------------------------------------- /projects/ui-docs/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; -------------------------------------------------------------------------------- /projects/ui-docs/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngx-kit/sula/58a048c9ff8828e2b436f816c41bc04d37334abd/projects/ui-docs/src/app/app.component.scss -------------------------------------------------------------------------------- /projects/ui-docs/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { KitIconsRegistryService } from '@ngx-kit/core'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.scss'], 8 | }) 9 | export class AppComponent { 10 | constructor( 11 | private icons: KitIconsRegistryService, 12 | ) { 13 | this.icons.add([ 14 | {name: 'menu', url: '/assets/icons/ios-menu.svg'}, 15 | {name: 'mail', url: '/assets/icons/ios-mail.svg'}, 16 | {name: 'close', url: '/assets/icons/ios-close.svg'}, 17 | {name: 'logo-github', url: '/assets/icons/logo-github.svg'}, 18 | {name: 'logo-npm', url: '/assets/icons/logo-npm.svg'}, 19 | {name: 'logo-twitter', url: '/assets/icons/logo-twitter.svg'}, 20 | ]); 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/docs-page/docs-page.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/docs-page/docs-page.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngx-kit/sula/58a048c9ff8828e2b436f816c41bc04d37334abd/projects/ui-docs/src/app/docs-page/docs-page.component.scss -------------------------------------------------------------------------------- /projects/ui-docs/src/app/docs-page/docs-page.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DocsPageComponent } from './docs-page.component'; 4 | 5 | describe('DocsPageComponent', () => { 6 | let component: DocsPageComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ DocsPageComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(DocsPageComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/docs-page/docs-page.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; 2 | import { ActivatedRoute } from '@angular/router'; 3 | import { DocGen } from '@ngx-kit/docgen/meta'; 4 | import { ContentService } from '../../content/content'; 5 | 6 | @Component({ 7 | selector: 'app-docs-page', 8 | templateUrl: './docs-page.component.html', 9 | styleUrls: ['./docs-page.component.scss'], 10 | changeDetection: ChangeDetectionStrategy.OnPush, 11 | }) 12 | export class DocsPageComponent implements OnInit { 13 | file?: DocGen.MdFile; 14 | 15 | private pkg: string; 16 | 17 | constructor( 18 | public content: ContentService, 19 | private route: ActivatedRoute, 20 | private cdr: ChangeDetectorRef, 21 | ) { 22 | } 23 | 24 | ngOnInit() { 25 | this.route.params 26 | .subscribe(params => { 27 | const name: string = params['name']; 28 | this.file = this.content.getDocFiles() 29 | .find(d => { 30 | const dName = d.meta && d.meta.title ? d.meta.title : d.name; 31 | return dName.toLowerCase() === name.toLowerCase(); 32 | }); 33 | this.cdr.detectChanges(); 34 | }); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/layout/header/header.component.html: -------------------------------------------------------------------------------- 1 | 6 | 9 |
10 | 17 |
18 |
19 | 23 | 24 | 25 | 29 | 30 | 31 | 35 | 36 | 37 |
38 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/layout/header/header.component.scss: -------------------------------------------------------------------------------- 1 | @import "mq"; 2 | 3 | :host { 4 | align-items: center; 5 | background: var(--headerBgColor); 6 | color: var(--headerTextColor); 7 | display: flex; 8 | flex-shrink: 0; 9 | padding: calc(var(--grid) * 2.5) calc(var(--grid) * 3); 10 | } 11 | 12 | .nav-toggle { 13 | background-color: transparent; 14 | border: 0; 15 | color: #ffffff; 16 | 17 | font-size: 2rem; 18 | margin-right: calc(var(--grid) * 2); 19 | } 20 | 21 | .logo { 22 | box-sizing: border-box; 23 | flex-grow: 1; 24 | font-size: 40px; 25 | font-weight: 600; 26 | line-height: 40px; 27 | } 28 | 29 | .created { 30 | display: none; 31 | } 32 | 33 | .link { 34 | background-color: transparent; 35 | border: 0; 36 | color: #ffffff; 37 | font-size: 1.8rem; 38 | margin-left: calc(var(--grid) * 2); 39 | } 40 | 41 | @include mq($from: tablet) { 42 | .nav-toggle { 43 | display: none; 44 | } 45 | .created { 46 | color: var(--primaryColor); 47 | display: inline; 48 | font-size: 16px; 49 | font-weight: 400; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/layout/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output } from '@angular/core'; 2 | import { UiThemeService } from 'ui'; 3 | 4 | @Component({ 5 | selector: 'app-header', 6 | templateUrl: './header.component.html', 7 | styleUrls: ['./header.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | }) 10 | export class HeaderComponent implements OnInit { 11 | 12 | @Output() navToggle = new EventEmitter(); 13 | 14 | constructor( 15 | private theme: UiThemeService, 16 | ) { 17 | } 18 | 19 | ngOnInit() { 20 | } 21 | 22 | toggleTheme(isDark: boolean) { 23 | this.theme.theme = isDark ? 'dark' : null; 24 | console.log('IS DARK', isDark); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/layout/layout.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { RouterModule } from '@angular/router'; 5 | import { KitIconsModule, KitModalModule, KitMqModule, KitOverlayModule } from '@ngx-kit/core'; 6 | import { UiButtonModule, UiLoadingBarModule, UiScrollModule, UiToggleModule, UiVerticalMenuModule } from 'ui'; 7 | import { HeaderComponent } from './header/header.component'; 8 | import { LayoutComponent } from './layout/layout.component'; 9 | import { NavComponent } from './nav/nav.component'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | RouterModule, 15 | FormsModule, 16 | UiButtonModule, 17 | UiVerticalMenuModule, 18 | UiScrollModule, 19 | UiLoadingBarModule, 20 | UiToggleModule, 21 | KitIconsModule, 22 | KitMqModule, 23 | KitOverlayModule, 24 | KitModalModule, 25 | ], 26 | declarations: [ 27 | HeaderComponent, 28 | LayoutComponent, 29 | NavComponent, 30 | ], 31 | exports: [ 32 | LayoutComponent, 33 | ], 34 | }) 35 | export class LayoutModule { 36 | } 37 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/layout/layout/layout.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 9 | 10 | 11 |
12 | 13 |
14 | 15 |
16 | 17 |
18 | 19 | 20 | 21 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/layout/layout/layout.component.scss: -------------------------------------------------------------------------------- 1 | @import "mq"; 2 | 3 | :host { 4 | display: grid; 5 | grid-template-columns: 1fr; 6 | grid-template-rows: 70px 1fr; 7 | grid-template-areas: "header" "content"; 8 | height: 100%; 9 | position: fixed; 10 | width: 100%; 11 | } 12 | 13 | .header { 14 | grid-area: header; 15 | } 16 | 17 | .side { 18 | grid-area: side; 19 | min-height: 0; 20 | } 21 | 22 | .side-overlay { 23 | background: var(--whiteColor); 24 | position: fixed; 25 | left: 0; 26 | top: 0; 27 | bottom: 0; 28 | width: 90%; 29 | } 30 | 31 | .content { 32 | grid-area: content; 33 | min-height: 0; 34 | overflow: hidden; 35 | .content-wrapper { 36 | margin: 0 auto; 37 | max-width: 900px; 38 | padding: calc(var(--grid) * 2) calc(var(--grid) * 2); 39 | } 40 | } 41 | 42 | @include mq($from: mobile) { 43 | .side { 44 | width: 75%; 45 | } 46 | .content { 47 | .content-wrapper { 48 | padding: calc(var(--grid) * 3); 49 | } 50 | } 51 | } 52 | 53 | @include mq($from: tablet) { 54 | :host { 55 | grid-template-columns: 250px 1fr; 56 | grid-template-rows: 70px 1fr; 57 | grid-template-areas: "header header" "side content"; 58 | } 59 | .side { 60 | width: 100%; 61 | } 62 | .content { 63 | .content-wrapper { 64 | padding: calc(var(--grid) * 3) calc(var(--grid) * 5) calc(var(--grid) * 5) calc(var(--grid) * 5); 65 | } 66 | } 67 | } 68 | 69 | @include mq($from: desktop) { 70 | :host { 71 | grid-template-columns: 300px 1fr; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/layout/layout/layout.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core'; 2 | import { NavigationEnd, Router } from '@angular/router'; 3 | import { UiScrollComponent } from 'ui'; 4 | 5 | @Component({ 6 | selector: 'app-layout', 7 | templateUrl: './layout.component.html', 8 | styleUrls: ['./layout.component.scss'], 9 | changeDetection: ChangeDetectionStrategy.OnPush, 10 | }) 11 | export class LayoutComponent implements OnInit { 12 | displayNav = false; 13 | 14 | @ViewChild('contentScroll') contentScroll: UiScrollComponent; 15 | 16 | constructor( 17 | private router: Router, 18 | ) { 19 | } 20 | 21 | ngOnInit() { 22 | this.router.events.subscribe(e => { 23 | if (e instanceof NavigationEnd) { 24 | this.displayNav = false; 25 | // Scroll content to top 26 | this.contentScroll.scrollTop(); 27 | } 28 | }); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/layout/nav/nav.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 13 | {{ doc }} 14 | 15 | 16 | Modules 17 | 18 | 22 | {{ module }} 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/layout/nav/nav.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | background: var(--navBgColor); 3 | color: var(--navTextColor); 4 | box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.04); 5 | } 6 | 7 | .close { 8 | background: transparent; 9 | border: 0; 10 | color: #ffffff; 11 | font-size: 2rem; 12 | left: 100%; 13 | position: absolute; 14 | } 15 | 16 | ul { 17 | list-style: none; 18 | margin: 0; 19 | padding: 0; 20 | h3 { 21 | margin: var(--grid) 0 0 0; 22 | padding: var(--grid); 23 | font-size: 0.9rem; 24 | color: var(--mainBdColor); 25 | } 26 | a { 27 | display: block; 28 | text-decoration: none; 29 | padding: calc(var(--grid) / 2) var(--grid); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/md/md.component.html: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/md/md.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngx-kit/sula/58a048c9ff8828e2b436f816c41bc04d37334abd/projects/ui-docs/src/app/md/md.component.scss -------------------------------------------------------------------------------- /projects/ui-docs/src/app/md/md.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MdComponent } from './md.component'; 4 | 5 | describe('MdComponent', () => { 6 | let component: MdComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ MdComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MdComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/md/md.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges } from '@angular/core'; 2 | import { MdRenderService } from '@nvxme/ngx-md-render'; 3 | 4 | @Component({ 5 | selector: 'app-md', 6 | templateUrl: './md.component.html', 7 | styleUrls: ['./md.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | }) 10 | export class MdComponent implements OnChanges { 11 | html: string; 12 | 13 | @Input() content: string; 14 | 15 | constructor( 16 | private md: MdRenderService, 17 | ) { 18 | } 19 | 20 | ngOnChanges() { 21 | this.html = this.md.render(this.content); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-demo/module-demo.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Preview 4 | Sources 5 | 6 | 7 | 8 | 9 | 10 |
11 |

{{ source.fileName }}

12 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-demo/module-demo.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | border: 1px solid var(--panelBdColor); 4 | box-shadow: var(--shadow); 5 | } 6 | 7 | ui-tabs-content { 8 | padding: calc(var(--grid) * 4); 9 | } 10 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-demo/module-demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ModuleDemoComponent } from './module-demo.component'; 4 | 5 | describe('ModuleDemoComponent', () => { 6 | let component: ModuleDemoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ModuleDemoComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ModuleDemoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-page/module-page-class-declar/module-page-class-declar.component.scss: -------------------------------------------------------------------------------- 1 | .name { 2 | background: var(--mainBdColor); 3 | padding: var(--grid); 4 | } 5 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-page/module-page-class-declar/module-page-class-declar.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ModulePageClassDeclarComponent } from './module-page-class-declar.component'; 4 | 5 | describe('ModulePageClassDeclarComponent', () => { 6 | let component: ModulePageClassDeclarComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ModulePageClassDeclarComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ModulePageClassDeclarComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-page/module-page-decorator-field/module-page-decorator-field.component.html: -------------------------------------------------------------------------------- 1 |
2 | {{ title }}: 3 | {{ field }} 4 |
5 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-page/module-page-decorator-field/module-page-decorator-field.component.scss: -------------------------------------------------------------------------------- 1 | .name { 2 | background: var(--mainBdColor); 3 | padding: var(--grid); 4 | } 5 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-page/module-page-decorator-field/module-page-decorator-field.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ModulePageDecoratorFieldComponent } from './module-page-decorator-field.component'; 4 | 5 | describe('ModulePageDecoratorFieldComponent', () => { 6 | let component: ModulePageDecoratorFieldComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ModulePageDecoratorFieldComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ModulePageDecoratorFieldComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-page/module-page-decorator-field/module-page-decorator-field.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, ChangeDetectionStrategy, OnChanges, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-module-page-decorator-field', 5 | templateUrl: './module-page-decorator-field.component.html', 6 | styleUrls: ['./module-page-decorator-field.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush 8 | }) 9 | export class ModulePageDecoratorFieldComponent implements OnInit, OnChanges { 10 | @Input() decorator: any; 11 | 12 | @Input() title: string; 13 | 14 | @Input() key: string; 15 | 16 | field: any; 17 | 18 | constructor() { 19 | } 20 | 21 | ngOnInit() { 22 | } 23 | 24 | ngOnChanges() { 25 | this.field = this.decorator[this.key] || undefined; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-page/module-page-function-declar/module-page-function-declar.component.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | [function] 4 | {{ declar.name }} 5 |

6 | 7 |
9 | 11 | 12 |
13 | 14 |
15 |

Signature

16 | {{ declar.signature }} 17 |
18 |
19 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-page/module-page-function-declar/module-page-function-declar.component.scss: -------------------------------------------------------------------------------- 1 | .name { 2 | background: var(--mainBdColor); 3 | padding: var(--grid); 4 | } 5 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-page/module-page-function-declar/module-page-function-declar.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ModulePageFunctionDeclarComponent } from './module-page-function-declar.component'; 4 | 5 | describe('ModulePageFunctionDeclarComponent', () => { 6 | let component: ModulePageFunctionDeclarComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ModulePageFunctionDeclarComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ModulePageFunctionDeclarComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-page/module-page-function-declar/module-page-function-declar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core'; 2 | import { DocGen } from '@ngx-kit/docgen/meta'; 3 | 4 | @Component({ 5 | selector: 'app-module-page-function-declar', 6 | templateUrl: './module-page-function-declar.component.html', 7 | styleUrls: ['./module-page-function-declar.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush 9 | }) 10 | export class ModulePageFunctionDeclarComponent implements OnInit { 11 | @Input() declar: DocGen.FunctionDeclar; 12 | 13 | constructor() { } 14 | 15 | ngOnInit() { 16 | } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-page/module-page-interface-declar/module-page-interface-declar.component.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | [interface] 4 | {{ declar.name }} 5 |

6 | 7 |
9 | 11 | 12 |
13 | 14 |
16 |

Members

17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 29 | 34 | 35 | 36 |
SignatureDescription
27 | {{ member.signature }} 28 | 30 | 32 | 33 |
37 |
38 |
39 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-page/module-page-interface-declar/module-page-interface-declar.component.scss: -------------------------------------------------------------------------------- 1 | .name { 2 | background: var(--mainBdColor); 3 | padding: var(--grid); 4 | } 5 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-page/module-page-interface-declar/module-page-interface-declar.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ModulePageInterfaceDeclarComponent } from './module-page-interface-declar.component'; 4 | 5 | describe('ModulePageInterfaceDeclarComponent', () => { 6 | let component: ModulePageInterfaceDeclarComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ModulePageInterfaceDeclarComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ModulePageInterfaceDeclarComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-page/module-page-interface-declar/module-page-interface-declar.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core'; 2 | import { DocGen } from '@ngx-kit/docgen/meta'; 3 | 4 | @Component({ 5 | selector: 'app-module-page-interface-declar', 6 | templateUrl: './module-page-interface-declar.component.html', 7 | styleUrls: ['./module-page-interface-declar.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | }) 10 | export class ModulePageInterfaceDeclarComponent implements OnInit, OnChanges { 11 | @Input() declar: DocGen.InterfaceDeclar; 12 | 13 | publicMembers: DocGen.Signature[] = []; 14 | 15 | constructor() { 16 | } 17 | 18 | ngOnInit() { 19 | } 20 | 21 | ngOnChanges() { 22 | this.publicMembers = this.declar && this.declar.members 23 | ? this.declar.members 24 | .filter(member => { 25 | // Hide internal 26 | if (member.isInternal) { 27 | return false; 28 | } 29 | return true; 30 | }) 31 | : []; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-page/module-page.component.html: -------------------------------------------------------------------------------- 1 |

{{ name }}

2 | 3 | 4 |

Demo

5 | 7 | 8 | 9 | 10 |
11 |

{{ file.name }}

12 | 13 | 14 |
15 | 16 | 17 |

API

18 | 19 |
21 | 22 | 24 | 25 | 27 | 28 | 30 | 31 | 32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-page/module-page.component.scss: -------------------------------------------------------------------------------- 1 | h1 { 2 | font-size: 3rem; 3 | } 4 | 5 | h2 { 6 | font-size: 2.3rem; 7 | margin-top: calc(var(--grid) * 6); 8 | } 9 | 10 | .declar { 11 | margin-bottom: calc(var(--grid) * 4); 12 | padding-bottom: calc(var(--grid) * 4); 13 | } 14 | -------------------------------------------------------------------------------- /projects/ui-docs/src/app/module-page/module-page.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ModulePageComponent } from './module-page.component'; 4 | 5 | describe('ModulePageComponent', () => { 6 | let component: ModulePageComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ModulePageComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ModulePageComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/ui-docs/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngx-kit/sula/58a048c9ff8828e2b436f816c41bc04d37334abd/projects/ui-docs/src/assets/.gitkeep -------------------------------------------------------------------------------- /projects/ui-docs/src/assets/icons/ios-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/ui-docs/src/assets/icons/ios-mail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/ui-docs/src/assets/icons/ios-menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/ui-docs/src/assets/icons/logo-github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/ui-docs/src/assets/icons/logo-npm.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/ui-docs/src/assets/icons/logo-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/ui-docs/src/assets/sula-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngx-kit/sula/58a048c9ff8828e2b436f816c41bc04d37334abd/projects/ui-docs/src/assets/sula-preview.png -------------------------------------------------------------------------------- /projects/ui-docs/src/content/.gitignore: -------------------------------------------------------------------------------- 1 | /ui.json 2 | -------------------------------------------------------------------------------- /projects/ui-docs/src/content/content.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { DocGen } from '@ngx-kit/docgen/meta'; 3 | import * as rawUiContent from './ui.json'; 4 | 5 | @Injectable({ 6 | providedIn: 'root', 7 | }) 8 | export class ContentService { 9 | content: DocGen.Doc = rawUiContent.default as any; 10 | 11 | getModuleFiles(name: string) { 12 | return this.content.files.filter(file => { 13 | return file.fileName.indexOf(`lib/${name}/`) === 0; 14 | }); 15 | } 16 | 17 | getDocFiles() { 18 | return this.content.files 19 | .filter(file => file.type === 'md') 20 | .filter(file => { 21 | return file.fileName.indexOf(`docs/`) === 0 || file.fileName.indexOf(`/`) === -1; 22 | }) as DocGen.MdFile[]; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /projects/ui-docs/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/ui-docs/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * In development mode, to ignore zone related error stack frames such as 11 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can 12 | * import the following file, but please comment it out in production mode 13 | * because it will have performance impact when throw error 14 | */ 15 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 16 | -------------------------------------------------------------------------------- /projects/ui-docs/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngx-kit/sula/58a048c9ff8828e2b436f816c41bc04d37334abd/projects/ui-docs/src/favicon.ico -------------------------------------------------------------------------------- /projects/ui-docs/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UiDocs 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /projects/ui-docs/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | import { AppModule } from './app/app.module'; 4 | import { environment } from './environments/environment'; 5 | 6 | if (environment.production) { 7 | enableProdMode(); 8 | } 9 | 10 | platformBrowserDynamic().bootstrapModule(AppModule) 11 | .catch(err => console.log(err)); 12 | -------------------------------------------------------------------------------- /projects/ui-docs/src/styles/loader.scss: -------------------------------------------------------------------------------- 1 | .app-loader { 2 | position: absolute; 3 | top: 0; 4 | right: 0; 5 | bottom: 0; 6 | left: 0; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | 12 | .app-loader > .loader { 13 | font-size: 10px; 14 | position: relative; 15 | text-indent: -9999em; 16 | border-top: 1.1em solid var(--primaryLightColor); 17 | border-right: 1.1em solid var(--primaryLightColor); 18 | border-bottom: 1.1em solid var(--primaryLightColor); 19 | border-left: 1.1em solid var(--primaryHoverColor); 20 | -webkit-transform: translateZ(0); 21 | -ms-transform: translateZ(0); 22 | transform: translateZ(0); 23 | -webkit-animation: load8 1.1s infinite linear; 24 | animation: load8 1.1s infinite linear; 25 | } 26 | 27 | .app-loader > .loader, 28 | .app-loader > .loader:after { 29 | border-radius: 50%; 30 | width: 6em; 31 | height: 6em; 32 | } 33 | 34 | @-webkit-keyframes load8 { 35 | 0% { 36 | -webkit-transform: rotate(0deg); 37 | transform: rotate(0deg); 38 | } 39 | 100% { 40 | -webkit-transform: rotate(360deg); 41 | transform: rotate(360deg); 42 | } 43 | } 44 | 45 | @keyframes load8 { 46 | 0% { 47 | -webkit-transform: rotate(0deg); 48 | transform: rotate(0deg); 49 | } 50 | 100% { 51 | -webkit-transform: rotate(360deg); 52 | transform: rotate(360deg); 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /projects/ui-docs/src/styles/mq.scss: -------------------------------------------------------------------------------- 1 | $mq-breakpoints: ( 2 | mobile: 320px, 3 | tablet: 740px, 4 | desktop: 980px, 5 | wide: 1300px, 6 | 7 | // Tweakpoints 8 | desktopAd: 810px, 9 | mobileLandscape: 480px 10 | ); 11 | 12 | @import "~sass-mq/mq"; 13 | -------------------------------------------------------------------------------- /projects/ui-docs/src/styles/theme.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --sansSerif: "Roboto", "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", sans-serif; 3 | --monospace: "Consolas", "Inconsolata", "Monaco", "Courier", monospace; 4 | } 5 | -------------------------------------------------------------------------------- /projects/ui-docs/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /projects/ui-docs/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.json' { 2 | const value: any; 3 | export default value; 4 | } 5 | -------------------------------------------------------------------------------- /projects/ui-docs/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/app", 5 | "module": "es2015", 6 | "types": [] 7 | }, 8 | "exclude": [ 9 | "src/test.ts", 10 | "**/*.spec.ts" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /projects/ui-docs/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "module": "commonjs", 6 | "types": [ 7 | "jasmine", 8 | "node" 9 | ] 10 | }, 11 | "files": [ 12 | "src/test.ts", 13 | "src/polyfills.ts" 14 | ], 15 | "include": [ 16 | "**/*.spec.ts", 17 | "**/*.d.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /projects/ui-docs/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/ui/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/public_api'; 2 | -------------------------------------------------------------------------------- /projects/ui/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; 32 | -------------------------------------------------------------------------------- /projects/ui/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ui", 4 | "deleteDestPath": false, 5 | "lib": { 6 | "entryFile": "src/public_api.ts" 7 | } 8 | } -------------------------------------------------------------------------------- /projects/ui/ng-package.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/lib", 4 | "lib": { 5 | "entryFile": "src/public_api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ngx-kit/sula", 3 | "version": "0.0.0-PLACEHOLDER", 4 | "description": "Sula — Angular UI components", 5 | "author": { 6 | "name": "Oleksa Novyk", 7 | "email": "oleksanovyk@gmail.com", 8 | "url": "https://novyk.org/" 9 | }, 10 | "license": "MIT", 11 | "homepage": "https://sula.ngx-kit.com", 12 | "repository": { 13 | "url": "https://github.com/ngx-kit/sula.git", 14 | "type": "git" 15 | }, 16 | "schematics": "./schematics/collection.json", 17 | "peerDependencies": { 18 | "@angular/core": "^7.0.0", 19 | "@ngx-kit/core": "0.0.0-KIT-PLACEHOLDER" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /projects/ui/release.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs-extra'); 3 | 4 | const pkg = require('../../package.json'); 5 | 6 | // Generate package.json 7 | const distPkgPath = path.resolve(__dirname, '../../dist/ui/package.json'); 8 | const blueprint = fs.readFileSync(distPkgPath, 'utf-8'); 9 | const result = blueprint 10 | .replace(/0\.0\.0\-PLACEHOLDER/g, pkg.version) 11 | .replace(/0\.0\.0\-KIT-PLACEHOLDER/g, pkg.dependencies["@ngx-kit/core"]); 12 | fs.writeFileSync(distPkgPath, result); 13 | // Copy themes 14 | fs.copySync(path.resolve(__dirname, './src/themes'), path.resolve(__dirname, '../../dist/ui/themes')); 15 | // Copy README 16 | fs.copySync(path.resolve(__dirname, '../../README.md'), path.resolve(__dirname, '../../dist/ui/README.md')); 17 | 18 | console.log('release.js finished!'); 19 | -------------------------------------------------------------------------------- /projects/ui/src/docs/EXTRACTING.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Extracting 3 | apiPriority: 3 4 | --- 5 | 6 | # Extracting modules 7 | 8 | Any module sources can be extracted to your project. 9 | 10 | After that you can modify features as you like, but you will lose automatic updates for this particular module. 11 | 12 | Use Angular CLI `generate` command to extract a module: 13 | 14 | ``` 15 | ng g @ngx-kit/sula:ui-button my-awesome-button 16 | ``` 17 | 18 | Pick any name for a generated module, code will be modified in a right way. 19 | 20 | Import a newly generated module: 21 | 22 | ``` 23 | @NgModule({ 24 | ... 25 | imports: [MyAwesomeButtonModule], 26 | ... 27 | }) 28 | export class SomeModule { } 29 | ``` 30 | 31 | And use it: 32 | 33 | ``` 34 | 35 | ``` 36 | -------------------------------------------------------------------------------- /projects/ui/src/docs/INTRO.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction 3 | apiPriority: 1 4 | --- 5 | 6 | # Sula — Angular UI Components 7 | 8 | Angular UI components with native CSS variables theming and module extracting feature. 9 | 10 | Based on [ngx-kit](https://ngx-kit.com). 11 | 12 | ![](/assets/sula-preview.png) 13 | 14 | 15 | ## Installation 16 | 17 | Add Sula to your project via Angular CLI: 18 | 19 | ``` 20 | ng add @ngx-kit/sula 21 | ``` 22 | 23 | 24 | ## Usage 25 | 26 | Import the `NgModule` for each component you want to use. 27 | 28 | `UiButtonModule` for example: 29 | 30 | ``` 31 | import {UiButtonModule} from '@ngx-kit/sula'; 32 | 33 | @NgModule({ 34 | ... 35 | imports: [UiButtonModule], 36 | ... 37 | }) 38 | export class SomeModule { } 39 | ``` 40 | 41 | 42 | ## Links 43 | 44 | * [github](https://github.com/ngx-kit/sula) 45 | * [website](https://sula.ngx-kit.com) 46 | * [ngx-kit twitter](https://twitter.com/ngxkit) 47 | -------------------------------------------------------------------------------- /projects/ui/src/docs/THEMING.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Theming 3 | apiPriority: 2 4 | --- 5 | 6 | # Theming Sula 7 | 8 | Sula uses [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) for customizing. 9 | 10 | By default main set of variables injecting via `angular.json`: 11 | 12 | ``` 13 | ... 14 | "styles": [ 15 | "node_modules/@ngx-kit/sula/themes/main.css", 16 | ... 17 | ], 18 | ``` 19 | 20 | 21 | ## Dark theme 22 | 23 | Sula delivers built-in dark theme, to enable inject it via `angular.json`: 24 | 25 | ``` 26 | ... 27 | "styles": [ 28 | "node_modules/@ngx-kit/sula/themes/main.css", 29 | "node_modules/@ngx-kit/sula/themes/dark.css", 30 | ... 31 | ], 32 | ``` 33 | 34 | And activate it with `UiThemeService`: 35 | 36 | ``` 37 | constructor( 38 | private theme: UiThemeService, 39 | ) { 40 | this.theme.theme = 'dark'; 41 | } 42 | ``` 43 | 44 | 45 | ## Custom theme 46 | 47 | You can create your own theme: 48 | 49 | ``` 50 | .theme-custom { 51 | // Redefine vars here 52 | --mainBgColor: #34363f; 53 | --mainTextColor: #f2f2f2; 54 | ... 55 | } 56 | ``` 57 | 58 | Check out list of variables in [main.css file](https://github.com/ngx-kit/sula/blob/master/projects/ui/src/themes/main.css). 59 | 60 | Add to `angular.json`: 61 | 62 | ``` 63 | ... 64 | "styles": [ 65 | "node_modules/@ngx-kit/sula/themes/main.css", 66 | "path/to/custom.css", 67 | ... 68 | ], 69 | ``` 70 | 71 | And activate with the theme service: 72 | 73 | ``` 74 | constructor( 75 | private theme: UiThemeService, 76 | ) { 77 | this.theme.theme = 'custom'; 78 | } 79 | ``` 80 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-accordion/demo/ui-accordion-demo.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngx-kit/sula/58a048c9ff8828e2b436f816c41bc04d37334abd/projects/ui/src/lib/ui-accordion/demo/ui-accordion-demo.component.scss -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-accordion/demo/ui-accordion-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | templateUrl: './ui-accordion-demo.component.html', 8 | styleUrls: ['./ui-accordion-demo.component.scss'], 9 | }) 10 | export class UiAccordionDemoComponent implements OnInit { 11 | panels = [ 12 | {title: 'Panel 1', content: 'Panel 1 content'}, 13 | {title: 'Panel 2', content: 'Panel 2 content'}, 14 | {title: 'Panel 3', content: 'Panel 3 content'}, 15 | ]; 16 | 17 | constructor() { 18 | } 19 | 20 | ngOnInit() { 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-accordion/demo/ui-accordion-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiAccordionModule } from '../ui-accordion.module'; 4 | import { UiAccordionDemoComponent } from './ui-accordion-demo.component'; 5 | 6 | /** 7 | * @demo 8 | */ 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | UiAccordionModule, 13 | ], 14 | declarations: [ 15 | UiAccordionDemoComponent, 16 | ], 17 | entryComponents: [ 18 | UiAccordionDemoComponent, 19 | ], 20 | }) 21 | export class UiAccordionDemoModule { 22 | } 23 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-accordion/ui-accordion-content/ui-accordion-content.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | overflow: hidden; 4 | color: var(--panelTextColor); 5 | } 6 | 7 | .content { 8 | border-top: 1px solid var(--panelBdColor); 9 | margin: 0 calc(var(--grid) * 3); 10 | padding: calc(var(--grid) * 1.5) 0; 11 | } 12 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-accordion/ui-accordion-content/ui-accordion-content.component.ts: -------------------------------------------------------------------------------- 1 | import { animate, style, transition, trigger } from '@angular/animations'; 2 | import { ChangeDetectionStrategy, Component, HostBinding, } from '@angular/core'; 3 | 4 | /** 5 | * Accordion content holder. 6 | */ 7 | @Component({ 8 | selector: 'ui-accordion-content', 9 | template: ` 10 |
11 | 12 |
13 | `, 14 | styleUrls: ['./ui-accordion-content.component.scss'], 15 | changeDetection: ChangeDetectionStrategy.OnPush, 16 | animations: [ 17 | trigger('collapse', [ 18 | transition(':enter', [ 19 | style({height: 0}), 20 | animate('200ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({height: '*'})), 21 | ]), 22 | transition(':leave', [ 23 | style({height: '*'}), 24 | animate('200ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({height: 0})), 25 | ]), 26 | ]), 27 | ], 28 | }) 29 | export class UiAccordionContentComponent { 30 | @HostBinding('@collapse') collapseTrigger = true; 31 | } 32 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-accordion/ui-accordion-panel/ui-accordion-panel.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | margin: var(--grid) 0; 4 | background: var(--panelBgColor); 5 | border-radius: var(--borderRadius); 6 | border: 1px solid var(--panelBdColor); 7 | color: var(--panelTextColor); 8 | transition: var(--transition); 9 | &:hover { 10 | box-shadow: var(--shadow); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-accordion/ui-accordion-panel/ui-accordion-panel.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, } from '@angular/core'; 2 | import { KitCollapseItemService } from '@ngx-kit/core'; 3 | 4 | /** 5 | * Accordion panel. 6 | */ 7 | @Component({ 8 | selector: 'ui-accordion-panel', 9 | template: '', 10 | styleUrls: ['./ui-accordion-panel.component.scss'], 11 | changeDetection: ChangeDetectionStrategy.OnPush, 12 | providers: [ 13 | KitCollapseItemService, 14 | ], 15 | }) 16 | export class UiAccordionPanelComponent { 17 | } 18 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-accordion/ui-accordion-title/ui-accordion-title.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | background: transparent; 3 | cursor: pointer; 4 | color: var(--mainTextColor); 5 | display: block; 6 | padding: calc(var(--grid) * 1.5) calc(var(--grid) * 3); 7 | transition-duration: .25s; 8 | transition-property: background; 9 | user-select: none; 10 | } 11 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-accordion/ui-accordion-title/ui-accordion-title.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, HostListener, } from '@angular/core'; 2 | import { KitCollapseItemService } from '@ngx-kit/core'; 3 | 4 | /** 5 | * Accordion title. 6 | */ 7 | @Component({ 8 | selector: 'ui-accordion-title', 9 | template: '', 10 | styleUrls: ['./ui-accordion-title.component.scss'], 11 | changeDetection: ChangeDetectionStrategy.OnPush, 12 | }) 13 | export class UiAccordionTitleComponent { 14 | constructor(private item: KitCollapseItemService) { 15 | } 16 | 17 | @HostListener('click') 18 | clickHandler() { 19 | this.item.toggle(); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-accordion/ui-accordion.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { KitCollapseModule } from '@ngx-kit/core'; 4 | import { UiAccordionContentComponent } from './ui-accordion-content/ui-accordion-content.component'; 5 | import { UiAccordionPanelComponent } from './ui-accordion-panel/ui-accordion-panel.component'; 6 | import { UiAccordionTitleComponent } from './ui-accordion-title/ui-accordion-title.component'; 7 | import { UiAccordionComponent } from './ui-accordion/ui-accordion.component'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | KitCollapseModule, 13 | ], 14 | declarations: [ 15 | UiAccordionComponent, 16 | UiAccordionPanelComponent, 17 | UiAccordionTitleComponent, 18 | UiAccordionContentComponent, 19 | ], 20 | exports: [ 21 | KitCollapseModule, 22 | UiAccordionComponent, 23 | UiAccordionPanelComponent, 24 | UiAccordionTitleComponent, 25 | UiAccordionContentComponent, 26 | ], 27 | }) 28 | export class UiAccordionModule { 29 | } 30 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-accordion/ui-accordion.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-accordion/ui-accordion.component'; 2 | export * from './ui-accordion-content/ui-accordion-content.component'; 3 | export * from './ui-accordion-panel/ui-accordion-panel.component'; 4 | export * from './ui-accordion-title/ui-accordion-title.component'; 5 | export * from './ui-accordion.module'; 6 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-accordion/ui-accordion/ui-accordion.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-accordion/ui-accordion/ui-accordion.component.ts: -------------------------------------------------------------------------------- 1 | 2 | import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges, } from '@angular/core'; 3 | import { KitCollapseHostService } from '@ngx-kit/core'; 4 | 5 | /** 6 | * Main accordion component. 7 | */ 8 | @Component({ 9 | selector: 'ui-accordion', 10 | template: '', 11 | styleUrls: ['./ui-accordion.component.scss'], 12 | changeDetection: ChangeDetectionStrategy.OnPush, 13 | providers: [ 14 | KitCollapseHostService, 15 | ], 16 | }) 17 | export class UiAccordionComponent implements OnInit, OnChanges { 18 | /** 19 | * Automatically open first panel. 20 | */ 21 | @Input() activateFirst = false; 22 | 23 | /** 24 | * Allow few panels open at a time. 25 | */ 26 | @Input() multiple = false; 27 | 28 | constructor(private host: KitCollapseHostService) { 29 | } 30 | 31 | ngOnChanges(changes: SimpleChanges) { 32 | if (changes['multiple']) { 33 | this.host.multiple = this.multiple; 34 | } 35 | } 36 | 37 | ngOnInit() { 38 | if (this.activateFirst) { 39 | this.host.activateFirst(); 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-alert/demo/ui-alert-demo.component.scss: -------------------------------------------------------------------------------- 1 | .alert-box{ 2 | } 3 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-alert/demo/ui-alert-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | templateUrl: './ui-alert-demo.component.html', 8 | styleUrls: ['./ui-alert-demo.component.scss'], 9 | }) 10 | export class UiAlertDemoComponent implements OnInit { 11 | isOpen1 = true; 12 | isOpen2 = true; 13 | isOpen3 = true; 14 | isOpen4 = true; 15 | isOpen5 = true; 16 | isOpen6 = true; 17 | 18 | constructor() { 19 | } 20 | 21 | ngOnInit() { 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-alert/demo/ui-alert-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiButtonModule } from 'ui'; 4 | import { UiAlertModule } from '../ui-alert.module'; 5 | import { UiAlertDemoComponent } from './ui-alert-demo.component'; 6 | 7 | /** 8 | * @demo 9 | */ 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | UiAlertModule, 14 | UiButtonModule, 15 | ], 16 | declarations: [UiAlertDemoComponent], 17 | entryComponents: [UiAlertDemoComponent], 18 | }) 19 | export class UiAlertDemoModule { 20 | } 21 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-alert/ui-alert-title/ui-alert-title.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ui-alert-title', 5 | template: ` 6 | 7 | 8 | 9 | `, 10 | changeDetection: ChangeDetectionStrategy.OnPush, 11 | }) 12 | export class UiAlertTitleComponent { 13 | @ViewChild('content') contentRef: TemplateRef; 14 | } 15 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-alert/ui-alert.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { KitClassModule } from '@ngx-kit/core'; 4 | import { UiAlertTitleComponent } from './ui-alert-title/ui-alert-title.component'; 5 | import { UiAlertComponent } from './ui-alert/ui-alert.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | KitClassModule, 11 | ], 12 | declarations: [ 13 | UiAlertComponent, 14 | UiAlertTitleComponent, 15 | ], 16 | exports: [ 17 | UiAlertComponent, 18 | UiAlertTitleComponent, 19 | ], 20 | }) 21 | export class UiAlertModule { 22 | } 23 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-alert/ui-alert.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-alert/ui-alert.component'; 2 | export * from './ui-alert-title/ui-alert-title.component'; 3 | export * from './ui-alert.module'; 4 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-alert/ui-alert/ui-alert.component.html: -------------------------------------------------------------------------------- 1 |
5 | 6 |
7 | 8 |
9 | 10 |
11 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-badge/demo/ui-badge-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 |
6 |

Color

7 |   8 |   9 |   10 |   11 |   12 | 13 |
14 | 15 |
16 |

Size

17 |   18 |   19 | 20 |
21 | 22 |
23 |

Position

24 | 25 |
26 | 27 | 28 | 29 | 30 |
31 |
32 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-badge/demo/ui-badge-demo.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngx-kit/sula/58a048c9ff8828e2b436f816c41bc04d37334abd/projects/ui/src/lib/ui-badge/demo/ui-badge-demo.component.scss -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-badge/demo/ui-badge-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | templateUrl: './ui-badge-demo.component.html', 8 | styleUrls: ['./ui-badge-demo.component.scss'], 9 | }) 10 | export class UiBadgeDemoComponent implements OnInit { 11 | 12 | constructor() { 13 | } 14 | 15 | ngOnInit() { 16 | } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-badge/demo/ui-badge-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiBadgeModule } from '../ui-badge.module'; 4 | import { UiBadgeDemoComponent } from './ui-badge-demo.component'; 5 | 6 | /** 7 | * @demo 8 | */ 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | UiBadgeModule, 13 | ], 14 | declarations: [UiBadgeDemoComponent], 15 | entryComponents: [UiBadgeDemoComponent], 16 | }) 17 | export class UiBadgeDemoModule { 18 | } 19 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-badge/meta.ts: -------------------------------------------------------------------------------- 1 | export type UiBadgeColor = 'default' | 'primary'; 2 | export type UiBadgePosition = 'inline' | 'top-right' | 'bottom-right' | 'bottom-left' | 'top-left'; 3 | export type UiBadgeSize = 's' | 'm' | 'l'; 4 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-badge/ui-badge.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiBadgeComponent } from './ui-badge/ui-badge.component'; 4 | 5 | @NgModule({ 6 | imports: [ 7 | CommonModule, 8 | ], 9 | declarations: [ 10 | UiBadgeComponent, 11 | ], 12 | exports: [ 13 | UiBadgeComponent, 14 | ], 15 | }) 16 | export class UiBadgeModule { 17 | } 18 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-badge/ui-badge.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-badge/ui-badge.component'; 2 | export * from './ui-badge.module'; 3 | export * from './meta'; 4 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-badge/ui-badge/ui-badge.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core'; 2 | import { KitClassService } from '@ngx-kit/core'; 3 | import { UiBadgeColor, UiBadgePosition, UiBadgeSize } from '../meta'; 4 | 5 | /** 6 | * @todo overflowCount - max count 7 | * @todo showZero 8 | */ 9 | @Component({ 10 | selector: 'ui-badge', 11 | template: ` 12 | {{ count }} 13 | `, 14 | styleUrls: ['./ui-badge.component.scss'], 15 | changeDetection: ChangeDetectionStrategy.OnPush, 16 | providers: [KitClassService], 17 | }) 18 | export class UiBadgeComponent implements OnInit, OnChanges { 19 | @Input() color: UiBadgeColor = 'default'; 20 | 21 | /** 22 | * Number displayed on badge. 23 | */ 24 | @Input() count: number; 25 | 26 | /** 27 | * If use corner position, do not forget to set relative position to parent. 28 | */ 29 | @Input() position: UiBadgePosition = 'inline'; 30 | 31 | @Input() size: UiBadgeSize = 'm'; 32 | 33 | constructor(private kitClass: KitClassService) { 34 | } 35 | 36 | ngOnChanges() { 37 | this.kitClass.apply({ 38 | size: this.size, 39 | position: this.position, 40 | color: this.color, 41 | }); 42 | } 43 | 44 | ngOnInit() { 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-breadcrumbs/demo/ui-breadcrumbs-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | Item 1 4 | 5 | Item 3 6 | Item 4 7 | 8 |
9 | 10 |
11 |

With icon

12 | 13 | Item 1 14 | Item 2 15 | Item 3 16 | 17 |
18 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-breadcrumbs/demo/ui-breadcrumbs-demo.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngx-kit/sula/58a048c9ff8828e2b436f816c41bc04d37334abd/projects/ui/src/lib/ui-breadcrumbs/demo/ui-breadcrumbs-demo.component.scss -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-breadcrumbs/demo/ui-breadcrumbs-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | templateUrl: './ui-breadcrumbs-demo.component.html', 8 | styleUrls: ['./ui-breadcrumbs-demo.component.scss'] 9 | }) 10 | export class UiBreadcrumbsDemoComponent implements OnInit { 11 | 12 | constructor() { } 13 | 14 | ngOnInit() { 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-breadcrumbs/demo/ui-breadcrumbs-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiBreadcrumbsModule } from '../ui-breadcrumbs.module'; 4 | import { UiBreadcrumbsDemoComponent } from './ui-breadcrumbs-demo.component'; 5 | 6 | /** 7 | * @demo 8 | */ 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | UiBreadcrumbsModule, 13 | ], 14 | declarations: [UiBreadcrumbsDemoComponent], 15 | entryComponents: [UiBreadcrumbsDemoComponent], 16 | }) 17 | export class UiBreadcrumbsDemoModule { 18 | } 19 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-breadcrumbs/ui-breadcrumbs-item/ui-breadcrumbs-item.component.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-breadcrumbs/ui-breadcrumbs-item/ui-breadcrumbs-item.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | background: transparent; 3 | border: 0; 4 | color: var(--mainTextLightColor); 5 | cursor: pointer; 6 | font-size: 1rem; 7 | padding: 0; 8 | text-decoration: none; 9 | &:hover { 10 | color: var(--mainColorLight2); 11 | } 12 | &:last-child { 13 | color: var(--mainTextColor); 14 | cursor: inherit; 15 | } 16 | } 17 | 18 | .icon { 19 | margin-right: calc(var(--grid) / 2); 20 | } 21 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-breadcrumbs/ui-breadcrumbs-item/ui-breadcrumbs-item.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | /** 4 | * Breadcrumbs item. 5 | */ 6 | @Component({ 7 | selector: 'ui-breadcrumbs-item,[uiBreadcrumbsItem]', 8 | templateUrl: './ui-breadcrumbs-item.component.html', 9 | styleUrls: ['./ui-breadcrumbs-item.component.scss'], 10 | }) 11 | export class UiBreadcrumbsItemComponent { 12 | @Input() icon: string; 13 | } 14 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-breadcrumbs/ui-breadcrumbs.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { KitIconsModule, KitRefModule } from '@ngx-kit/core'; 4 | import { UiBreadcrumbsItemComponent } from './ui-breadcrumbs-item/ui-breadcrumbs-item.component'; 5 | import { UiBreadcrumbsComponent } from './ui-breadcrumbs/ui-breadcrumbs.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | KitIconsModule, 11 | ], 12 | declarations: [ 13 | UiBreadcrumbsComponent, 14 | UiBreadcrumbsItemComponent, 15 | ], 16 | exports: [ 17 | KitRefModule, 18 | UiBreadcrumbsComponent, 19 | UiBreadcrumbsItemComponent, 20 | ], 21 | }) 22 | export class UiBreadcrumbsModule { 23 | } 24 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-breadcrumbs/ui-breadcrumbs.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-breadcrumbs/ui-breadcrumbs.component'; 2 | export * from './ui-breadcrumbs-item/ui-breadcrumbs-item.component'; 3 | export * from './ui-breadcrumbs.module'; 4 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-breadcrumbs/ui-breadcrumbs/ui-breadcrumbs.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | / 5 | 6 | 7 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-breadcrumbs/ui-breadcrumbs/ui-breadcrumbs.component.scss: -------------------------------------------------------------------------------- 1 | .separator { 2 | color: var(--mainTextColor); 3 | padding: 0 var(--grid); 4 | } 5 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-breadcrumbs/ui-breadcrumbs/ui-breadcrumbs.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, ContentChildren, QueryList, } from '@angular/core'; 2 | import { KitRefDirective } from '@ngx-kit/core'; 3 | 4 | /** 5 | * Main breadcrumbs component. 6 | */ 7 | @Component({ 8 | selector: 'ui-breadcrumbs', 9 | templateUrl: './ui-breadcrumbs.component.html', 10 | styleUrls: ['./ui-breadcrumbs.component.scss'], 11 | changeDetection: ChangeDetectionStrategy.OnPush, 12 | }) 13 | export class UiBreadcrumbsComponent { 14 | @ContentChildren(KitRefDirective) items: QueryList; 15 | 16 | constructor() { 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-button/demo/ui-button-demo.component.scss: -------------------------------------------------------------------------------- 1 | div > button { 2 | margin: 0 var(--grid) var(--grid) 0; 3 | } 4 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-button/demo/ui-button-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | templateUrl: './ui-button-demo.component.html', 8 | styleUrls: ['./ui-button-demo.component.scss'], 9 | }) 10 | export class UiButtonDemoComponent { 11 | checkboxButtonModel1 = false; 12 | 13 | checkboxButtonModel2 = false; 14 | 15 | checkboxButtonModel3 = false; 16 | 17 | radioButtonModel = 1; 18 | } 19 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-button/demo/ui-button-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { UiButtonModule } from 'ui'; 5 | import { UiButtonDemoComponent } from './ui-button-demo.component'; 6 | 7 | /** 8 | * @demo 9 | */ 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | FormsModule, 14 | UiButtonModule, 15 | ], 16 | declarations: [ 17 | UiButtonDemoComponent, 18 | ], 19 | entryComponents: [ 20 | UiButtonDemoComponent, 21 | ], 22 | }) 23 | export class UiButtonDemoModule { 24 | } 25 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-button/meta.ts: -------------------------------------------------------------------------------- 1 | export type UiButtonColor = 'default' | 'primary'; 2 | export type UiButtonSize = 's' | 'm' | 'l'; 3 | export type UiButtonGroupDirection = 'row' | 'column'; 4 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-button/ui-button-group/ui-button-group.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | &.direction { 4 | &-row { 5 | flex-direction: row; 6 | } 7 | &-column { 8 | flex-direction: column; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-button/ui-button-group/ui-button-group.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, } from '@angular/core'; 2 | import { KitClassService } from '@ngx-kit/core'; 3 | import { UiButtonGroupDirection } from '../meta'; 4 | 5 | @Component({ 6 | selector: 'ui-button-group', 7 | template: ` 8 | 9 | `, 10 | styleUrls: ['./ui-button-group.component.scss'], 11 | changeDetection: ChangeDetectionStrategy.OnPush, 12 | providers: [ 13 | KitClassService, 14 | ], 15 | }) 16 | export class UiButtonGroupComponent implements OnInit, OnChanges { 17 | @Input() direction: UiButtonGroupDirection = 'row'; 18 | 19 | constructor(private kitClass: KitClassService) { 20 | } 21 | 22 | ngOnChanges() { 23 | this.applyClass(); 24 | } 25 | 26 | ngOnInit() { 27 | this.applyClass(); 28 | } 29 | 30 | private applyClass() { 31 | this.kitClass.apply({ 32 | direction: this.direction, 33 | }); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-button/ui-button.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { KitCheckModule, KitIconsModule } from '@ngx-kit/core'; 4 | import { UiButtonGroupComponent } from './ui-button-group/ui-button-group.component'; 5 | import { UiButtonComponent } from './ui-button/ui-button.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | KitIconsModule, 11 | ], 12 | declarations: [ 13 | UiButtonComponent, 14 | UiButtonGroupComponent, 15 | ], 16 | exports: [ 17 | KitCheckModule, 18 | UiButtonComponent, 19 | UiButtonGroupComponent, 20 | ], 21 | }) 22 | export class UiButtonModule { 23 | } 24 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-button/ui-button.ts: -------------------------------------------------------------------------------- 1 | export * from './meta'; 2 | export * from './ui-button.module'; 3 | export * from './ui-button/ui-button.component'; 4 | export * from './ui-button-group/ui-button-group.component'; 5 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-button/ui-button/ui-button.component.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-button/ui-button/ui-button.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input, OnChanges, Optional, SimpleChanges } from '@angular/core'; 2 | import { KitClassService } from '@ngx-kit/core'; 3 | import { UiButtonColor, UiButtonSize } from '../meta'; 4 | import { UiButtonGroupComponent } from '../ui-button-group/ui-button-group.component'; 5 | 6 | @Component({ 7 | // tslint:disable-next-line 8 | selector: 'button[uiButton],a[uiButton]', 9 | templateUrl: './ui-button.component.html', 10 | styleUrls: ['./ui-button.component.scss'], 11 | providers: [ 12 | KitClassService, 13 | ], 14 | changeDetection: ChangeDetectionStrategy.OnPush, 15 | }) 16 | export class UiButtonComponent implements OnChanges { 17 | @Input() color: UiButtonColor = 'default'; 18 | 19 | @Input() disabled = false; 20 | 21 | @Input() uiButton: void; 22 | 23 | @Input() size: UiButtonSize = 'm'; 24 | 25 | @Input() link = false; 26 | 27 | @Input() icon: string; 28 | 29 | @Input() loading = false; 30 | 31 | constructor( 32 | private kitClass: KitClassService, 33 | @Optional() private group: UiButtonGroupComponent, 34 | ) { 35 | } 36 | 37 | ngOnChanges(changes: SimpleChanges) { 38 | this.applyClass(); 39 | } 40 | 41 | private applyClass() { 42 | this.kitClass.apply({ 43 | disabled: this.disabled, 44 | color: this.color, 45 | size: this.size, 46 | link: this.link, 47 | groupDirection: !!this.group ? this.group.direction : null, 48 | }); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-checkbox/demo/ui-checkbox-demo.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngx-kit/sula/58a048c9ff8828e2b436f816c41bc04d37334abd/projects/ui/src/lib/ui-checkbox/demo/ui-checkbox-demo.component.scss -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-checkbox/demo/ui-checkbox-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | templateUrl: './ui-checkbox-demo.component.html', 8 | styleUrls: ['./ui-checkbox-demo.component.scss'] 9 | }) 10 | export class UiCheckboxDemoComponent { 11 | checkboxModel = false; 12 | checkboxModel2 = true; 13 | checkboxModel3 = false; 14 | checkboxModel4 = false; 15 | checkboxModel5 = false; 16 | checkboxModel6 = false; 17 | checkboxModel7 = false; 18 | checkboxModel8 = true; 19 | checkboxModel9 = true; 20 | checkboxModel10 = true; 21 | checkboxModel11 = true; 22 | checkboxModel12 = true; 23 | 24 | } 25 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-checkbox/demo/ui-checkbox-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { UiCheckboxModule } from '../ui-checkbox.module'; 5 | import { UiCheckboxDemoComponent } from './ui-checkbox-demo.component'; 6 | 7 | /** 8 | * @demo 9 | */ 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | FormsModule, 14 | UiCheckboxModule, 15 | ], 16 | declarations: [ 17 | UiCheckboxDemoComponent, 18 | ], 19 | entryComponents: [ 20 | UiCheckboxDemoComponent, 21 | ], 22 | }) 23 | export class UiCheckboxDemoModule { 24 | } 25 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-checkbox/ui-checkbox.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { UiCheckboxComponent } from './ui-checkbox/ui-checkbox.component'; 5 | import { KitClassModule } from '@ngx-kit/core'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | FormsModule, 11 | KitClassModule, 12 | ], 13 | declarations: [ 14 | UiCheckboxComponent, 15 | ], 16 | exports: [ 17 | UiCheckboxComponent, 18 | ], 19 | }) 20 | export class UiCheckboxModule { 21 | } 22 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-checkbox/ui-checkbox.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-checkbox.module'; 2 | export * from './ui-checkbox/ui-checkbox.component'; 3 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-checkbox/ui-checkbox/ui-checkbox.component.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-date-picker/demo/ui-date-picker-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | templateUrl: './ui-date-picker-demo.component.html', 8 | }) 9 | export class UiDatePickerDemoComponent { 10 | model = '2018-01-02'; 11 | } 12 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-date-picker/demo/ui-date-picker-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { UiButtonModule } from 'ui'; 5 | import { UiTextModule } from '../../ui-text/ui-text.module'; 6 | import { UiDatePickerModule } from '../ui-date-picker.module'; 7 | import { UiDatePickerDemoComponent } from './ui-date-picker-demo.component'; 8 | 9 | /** 10 | * @demo 11 | */ 12 | @NgModule({ 13 | imports: [ 14 | CommonModule, 15 | FormsModule, 16 | UiDatePickerModule, 17 | UiButtonModule, 18 | UiTextModule, 19 | ], 20 | declarations: [ 21 | UiDatePickerDemoComponent, 22 | ], 23 | entryComponents: [ 24 | UiDatePickerDemoComponent, 25 | ], 26 | }) 27 | export class UiDatePickerDemoModule { 28 | } 29 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-date-picker/ui-date-picker-popup/ui-date-picker-popup.component.html: -------------------------------------------------------------------------------- 1 |
4 |
8 | 9 |
10 |
11 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-date-picker/ui-date-picker-popup/ui-date-picker-popup.component.scss: -------------------------------------------------------------------------------- 1 | :host[position="top-left"] { 2 | .popup { 3 | transform-origin: bottom left; 4 | } 5 | } 6 | 7 | .popup { 8 | background: var(--mainBgColor); 9 | border-radius: var(--borderRadius); 10 | box-shadow: var(--shadow); 11 | color: var(--mainTextColor); 12 | padding: calc(var(--grid) * 1.5); 13 | transform-origin: top left; 14 | } 15 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-date-picker/ui-date-picker.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { 4 | KitAnchorModule, 5 | KitClassModule, 6 | KitFocusManagerModule, 7 | KitInputDateModule, 8 | KitOutsideClickModule, 9 | KitOverlayModule, 10 | KitPositionModule, 11 | } from '@ngx-kit/core'; 12 | import { UiDatePickerPopupComponent } from './ui-date-picker-popup/ui-date-picker-popup.component'; 13 | import { UiDatePickerComponent } from './ui-date-picker/ui-date-picker.component'; 14 | 15 | @NgModule({ 16 | imports: [ 17 | CommonModule, 18 | KitFocusManagerModule, 19 | KitClassModule, 20 | KitPositionModule, 21 | KitOutsideClickModule, 22 | ], 23 | declarations: [ 24 | UiDatePickerComponent, 25 | UiDatePickerPopupComponent, 26 | ], 27 | exports: [ 28 | KitAnchorModule, 29 | KitOutsideClickModule, 30 | KitOverlayModule, 31 | KitInputDateModule, 32 | UiDatePickerComponent, 33 | UiDatePickerPopupComponent, 34 | ], 35 | }) 36 | export class UiDatePickerModule { 37 | } 38 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-date-picker/ui-date-picker.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-date-picker.module'; 2 | export * from './ui-date-picker/ui-date-picker.component'; 3 | export * from './ui-date-picker-popup/ui-date-picker-popup.component'; 4 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-date-picker/ui-date-picker/ui-date-picker.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
{{ monthCursor | async | date:'MMMM, y' }}
5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 26 | 27 | 28 |
{{ weekday | date:'EEE' }}
17 |
23 | {{ item.date | date:'d' }} 24 |
25 |
29 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dialog/demo/ui-dialog-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |

Custom template

5 | 6 | 7 | Custom alert body template. 8 | 9 | 10 |

Handle submit

11 | 12 |
13 | 14 |
15 |

Confirm dialog

16 | 17 |
18 | 19 |
20 |

Prompt dialog

21 | 22 | 23 | 27 | 28 |
29 | 30 |
31 |

Color

32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dialog/demo/ui-dialog-demo.component.scss: -------------------------------------------------------------------------------- 1 | button { 2 | margin: 0 var(--grid) var(--grid) 0; 3 | } 4 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dialog/demo/ui-dialog-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { UiButtonModule } from 'ui'; 5 | import { UiTextModule } from '../../ui-text/ui-text.module'; 6 | import { UiDialogModule } from '../ui-dialog.module'; 7 | import { UiDialogDemoComponent } from './ui-dialog-demo.component'; 8 | 9 | /** 10 | * @demo 11 | */ 12 | @NgModule({ 13 | imports: [ 14 | CommonModule, 15 | FormsModule, 16 | UiDialogModule, 17 | UiButtonModule, 18 | UiTextModule, 19 | ], 20 | declarations: [ 21 | UiDialogDemoComponent, 22 | ], 23 | entryComponents: [ 24 | UiDialogDemoComponent, 25 | ], 26 | }) 27 | export class UiDialogDemoModule { 28 | } 29 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dialog/meta.ts: -------------------------------------------------------------------------------- 1 | import { TemplateRef } from '@angular/core'; 2 | 3 | export enum UiDialogType { 4 | Alert = 'alert', 5 | Confirm = 'confirm', 6 | Prompt = 'prompt', 7 | } 8 | 9 | export interface UiDialogOptions { 10 | type: UiDialogType; 11 | header: string; 12 | message: string; 13 | template: TemplateRef; 14 | color: string; 15 | } 16 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dialog/ui-dialog.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { KitClassModule, KitModalModule, KitOverlayModule } from '@ngx-kit/core'; 5 | import { UiButtonModule } from '../ui-button/ui-button.module'; 6 | import { UiDialogComponent } from './ui-dialog/ui-dialog.component'; 7 | 8 | @NgModule({ 9 | imports: [ 10 | CommonModule, 11 | FormsModule, 12 | KitClassModule, 13 | UiButtonModule, 14 | ], 15 | declarations: [ 16 | UiDialogComponent, 17 | ], 18 | exports: [ 19 | KitOverlayModule, 20 | KitModalModule, 21 | ], 22 | entryComponents: [ 23 | UiDialogComponent, 24 | ], 25 | }) 26 | export class UiDialogModule { 27 | } 28 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dialog/ui-dialog.ts: -------------------------------------------------------------------------------- 1 | export * from './meta'; 2 | export * from './ui-dialog.module'; 3 | export * from './ui-dialog.service'; 4 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dialog/ui-dialog/ui-dialog.component.html: -------------------------------------------------------------------------------- 1 |
4 |
5 | {{ options?.header }} 6 |
7 |
8 | 9 | {{ options?.message }} 10 | 11 | 12 | 13 | 14 |
15 |
16 |   21 | 26 |
27 |
28 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-drawer/demo/ui-drawer-demo.component.scss: -------------------------------------------------------------------------------- 1 | .content { 2 | padding: calc(var(--grid) * 3); 3 | width: 350px; 4 | } 5 | 6 | .content-vertical { 7 | padding: calc(var(--grid) * 3); 8 | } 9 | 10 | button { 11 | margin: 0 var(--grid) var(--grid) 0; 12 | } 13 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-drawer/demo/ui-drawer-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | templateUrl: './ui-drawer-demo.component.html', 8 | styleUrls: ['./ui-drawer-demo.component.scss'], 9 | changeDetection: ChangeDetectionStrategy.OnPush, 10 | }) 11 | export class UiDrawerDemoComponent implements OnInit { 12 | display1 = false; 13 | 14 | display2_t = false; 15 | 16 | display2_r = false; 17 | 18 | display2_b = false; 19 | 20 | display2_l = false; 21 | 22 | constructor() { 23 | } 24 | 25 | ngOnInit() { 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-drawer/demo/ui-drawer-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiButtonModule } from 'ui'; 4 | import { UiDrawerModule } from '../ui-drawer.module'; 5 | import { UiDrawerDemoComponent } from './ui-drawer-demo.component'; 6 | 7 | /** 8 | * @demo 9 | */ 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | UiDrawerModule, 14 | UiButtonModule, 15 | ], 16 | declarations: [ 17 | UiDrawerDemoComponent, 18 | ], 19 | entryComponents: [ 20 | UiDrawerDemoComponent, 21 | ], 22 | }) 23 | export class UiDrawerDemoModule { 24 | } 25 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-drawer/meta.ts: -------------------------------------------------------------------------------- 1 | export type UiDrawerPosition = 'top' | 'right' | 'bottom' | 'left'; 2 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-drawer/ui-drawer.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { KitClassModule, KitModalModule, KitOverlayModule } from '@ngx-kit/core'; 4 | import { UiDrawerComponent } from './ui-drawer/ui-drawer.component'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | CommonModule, 9 | KitClassModule, 10 | ], 11 | declarations: [ 12 | UiDrawerComponent, 13 | ], 14 | exports: [ 15 | UiDrawerComponent, 16 | KitOverlayModule, 17 | KitModalModule, 18 | ], 19 | }) 20 | export class UiDrawerModule { 21 | } 22 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-drawer/ui-drawer.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-drawer.module'; 2 | export * from './ui-drawer/ui-drawer.component'; 3 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-drawer/ui-drawer/ui-drawer.component.html: -------------------------------------------------------------------------------- 1 |
4 |
5 | 6 |
7 |
8 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-drawer/ui-drawer/ui-drawer.component.scss: -------------------------------------------------------------------------------- 1 | .drawer { 2 | background: var(--mainBgColor); 3 | box-shadow: var(--shadow); 4 | color: var(--mainTextColor); 5 | position: fixed; 6 | &.position { 7 | &-top { 8 | left: 0; 9 | max-height: 90%; 10 | right: 0; 11 | top: 0; 12 | } 13 | &-right { 14 | bottom: 0; 15 | max-width: 90%; 16 | right: 0; 17 | top: 0; 18 | } 19 | &-bottom { 20 | bottom: 0; 21 | max-height: 90%; 22 | left: 0; 23 | right: 0; 24 | } 25 | &-left { 26 | bottom: 0; 27 | left: 0; 28 | max-width: 90%; 29 | top: 0; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dropdown/demo/ui-dropdown-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 | 7 | 9 | 10 | 11 | 12 | 13 |
14 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dropdown/demo/ui-dropdown-demo.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngx-kit/sula/58a048c9ff8828e2b436f816c41bc04d37334abd/projects/ui/src/lib/ui-dropdown/demo/ui-dropdown-demo.component.scss -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dropdown/demo/ui-dropdown-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | templateUrl: './ui-dropdown-demo.component.html', 8 | styleUrls: ['./ui-dropdown-demo.component.scss'], 9 | }) 10 | export class UiDropdownDemoComponent { 11 | } 12 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dropdown/demo/ui-dropdown-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiButtonModule } from 'ui'; 4 | import { UiDropdownModule } from '../ui-dropdown.module'; 5 | import { UiDropdownDemoComponent } from './ui-dropdown-demo.component'; 6 | 7 | /** 8 | * @demo 9 | */ 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | UiDropdownModule, 14 | UiButtonModule, 15 | ], 16 | declarations: [ 17 | UiDropdownDemoComponent, 18 | ], 19 | entryComponents: [ 20 | UiDropdownDemoComponent, 21 | ], 22 | }) 23 | export class UiDropdownDemoModule { 24 | } 25 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dropdown/ui-dropdown-item/ui-dropdown-item.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | background: var(--mainBgColor); 3 | border: 0; 4 | box-sizing: border-box; 5 | color: var(--mainTextColor); 6 | cursor: pointer; 7 | display: block; 8 | font-size: 1em; 9 | margin: 0; 10 | padding: var(--grid) calc(var(--grid) * 1.5); 11 | outline: none; 12 | text-align: left; 13 | width: 100%; 14 | &:hover { 15 | background: var(--mainHoverBgColor); 16 | color: var(--mainHoverTextColor); 17 | } 18 | &:active{ 19 | color: var(--primaryColor); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dropdown/ui-dropdown-item/ui-dropdown-item.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, HostListener, Input } from '@angular/core'; 2 | import { UiDropdownComponent } from '../ui-dropdown/ui-dropdown.component'; 3 | 4 | @Component({ 5 | selector: 'ui-dropdown-item,button[uiDropdownItem],a[uiDropdownItem]', 6 | template: '', 7 | styleUrls: ['./ui-dropdown-item.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | }) 10 | export class UiDropdownItemComponent { 11 | @Input() uiDropdownItem: void; 12 | 13 | constructor(private dropdown: UiDropdownComponent) { 14 | } 15 | 16 | @HostListener('click') clickHandler() { 17 | this.dropdown.toggle.close(); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dropdown/ui-dropdown.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { KitOutsideClickModule, KitOverlayModule, KitPositionModule } from '@ngx-kit/core'; 4 | import { UiDropdownItemComponent } from './ui-dropdown-item/ui-dropdown-item.component'; 5 | import { UiDropdownComponent } from './ui-dropdown/ui-dropdown.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | KitPositionModule, 11 | KitOutsideClickModule, 12 | ], 13 | declarations: [ 14 | UiDropdownComponent, 15 | UiDropdownItemComponent, 16 | ], 17 | exports: [ 18 | KitOverlayModule, 19 | UiDropdownComponent, 20 | UiDropdownItemComponent, 21 | ], 22 | }) 23 | export class UiDropdownModule { 24 | } 25 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dropdown/ui-dropdown.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-dropdown.module'; 2 | export * from './ui-dropdown/ui-dropdown.component'; 3 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dropdown/ui-dropdown/ui-dropdown.component.html: -------------------------------------------------------------------------------- 1 |
4 |
8 | 9 |
10 |
11 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dropdown/ui-dropdown/ui-dropdown.component.scss: -------------------------------------------------------------------------------- 1 | .dropdown { 2 | background: var(--mainBgColor); 3 | border-radius: var(--borderRadius); 4 | box-shadow: var(--shadow); 5 | box-sizing: border-box; 6 | color: var(--mainTextColor); 7 | margin-top: calc(var(--grid) / 2); 8 | min-width: 120px; 9 | transform-origin: top; 10 | } 11 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-dropdown/ui-dropdown/ui-dropdown.component.ts: -------------------------------------------------------------------------------- 1 | import { animate, animateChild, query, style, transition, trigger } from '@angular/animations'; 2 | import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; 3 | import { KitOverlayToggleDirective, KitPinPosition } from '@ngx-kit/core'; 4 | 5 | @Component({ 6 | selector: 'ui-dropdown', 7 | templateUrl: './ui-dropdown.component.html', 8 | styleUrls: ['./ui-dropdown.component.scss'], 9 | changeDetection: ChangeDetectionStrategy.OnPush, 10 | animations: [ 11 | trigger('host', [ 12 | transition(':enter, :leave', [ 13 | query('@*', animateChild(), {optional: true}), 14 | ]), 15 | ]), 16 | trigger('fade', [ 17 | transition(':enter', [ 18 | style({ 19 | opacity: 0, 20 | transform: 'scaleY(0.5)', 21 | }), 22 | animate('150ms ease-out', style({ 23 | opacity: 1, 24 | transform: 'scaleY(1)', 25 | })), 26 | ]), 27 | transition(':leave', [ 28 | style({opacity: 1}), 29 | animate('150ms ease-in', style({ 30 | opacity: 0, 31 | transform: 'scaleY(0.5)', 32 | })), 33 | ]), 34 | ]), 35 | ], 36 | }) 37 | export class UiDropdownComponent { 38 | @Input() toggle: KitOverlayToggleDirective; 39 | 40 | @Input() position: KitPinPosition = 'bottom-right'; 41 | 42 | @HostBinding('@host') hostTrigger = true; 43 | } 44 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-ext-select/demo/ui-ext-select-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { UiExtSelectDemoComponent } from './ui-ext-select-demo.component'; 5 | import { UiExtSelectModule } from '../ui-ext-select.module'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | FormsModule, 11 | UiExtSelectModule, 12 | ], 13 | declarations: [ 14 | UiExtSelectDemoComponent, 15 | ], 16 | entryComponents: [ 17 | UiExtSelectDemoComponent, 18 | ], 19 | }) 20 | export class UiExtSelectDemoModule { 21 | } 22 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-ext-select/icons.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | export const uiExtSelectIcons = { 3 | chevron: ``, 4 | cross: ``, 5 | }; 6 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-ext-select/ui-ext-select.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { KitAnchorModule, KitFocusListenerModule, KitIconsModule, KitOverlayModule, KitPositionModule } from '@ngx-kit/core'; 5 | import { UiExtSelectComponent } from './ui-ext-select/ui-ext-select.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | FormsModule, 11 | KitOverlayModule, 12 | KitAnchorModule, 13 | KitPositionModule, 14 | KitFocusListenerModule, 15 | KitIconsModule, 16 | ], 17 | declarations: [ 18 | UiExtSelectComponent, 19 | ], 20 | exports: [ 21 | UiExtSelectComponent, 22 | ], 23 | }) 24 | export class UiExtSelectModule { 25 | } 26 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-ext-select/ui-ext-select.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-ext-select.module'; 2 | export * from './ui-ext-select/ui-ext-select.component'; 3 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-file/demo/ui-file-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 | 5 | Pick a file 6 | 9 | 10 | 11 |
12 | Files: 13 |
14 | > {{ file.file.name }} | {{ file.file.size }} | {{ file.file.lastModifiedDate }} | {{ file.data }} 15 |
16 |
17 |
18 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-file/demo/ui-file-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { UiFileSelect } from '../meta'; 3 | 4 | /** 5 | * @demo 6 | */ 7 | @Component({ 8 | templateUrl: './ui-file-demo.component.html', 9 | changeDetection: ChangeDetectionStrategy.OnPush, 10 | }) 11 | export class UiFileDemoComponent { 12 | files: UiFileSelect; 13 | } 14 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-file/demo/ui-file-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiButtonModule } from 'ui'; 4 | import { UiFileModule } from '../ui-file.module'; 5 | import { UiFileDemoComponent } from './ui-file-demo.component'; 6 | 7 | /** 8 | * @demo 9 | */ 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | UiFileModule, 14 | UiButtonModule, 15 | ], 16 | declarations: [ 17 | UiFileDemoComponent, 18 | ], 19 | entryComponents: [ 20 | UiFileDemoComponent, 21 | ], 22 | }) 23 | export class UiFileDemoModule { 24 | } 25 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-file/meta.ts: -------------------------------------------------------------------------------- 1 | export interface UiFileSelect { 2 | file: File; 3 | data: any; 4 | } 5 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-file/ui-file-holder/ui-file-holder.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, HostListener, Input, OnInit } from '@angular/core'; 2 | import { KitStyleService } from '@ngx-kit/core'; 3 | import { UiFileComponent } from '../ui-file/ui-file.component'; 4 | 5 | @Directive({ 6 | selector: '[uiFileHolder]', 7 | providers: [ 8 | KitStyleService, 9 | ], 10 | }) 11 | export class UiFileHolderDirective implements OnInit { 12 | @Input() uiFileWrapper: void; 13 | 14 | file?: UiFileComponent; 15 | 16 | constructor( 17 | private style: KitStyleService, 18 | ) { 19 | } 20 | 21 | ngOnInit() { 22 | this.style.style = { 23 | display: 'inline-block', 24 | overflow: 'hidden', 25 | position: 'relative', 26 | }; 27 | } 28 | 29 | @HostListener('click', ['$event']) clickHandler(event: any) { 30 | if (this.file) { 31 | this.file.emitClick(); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-file/ui-file.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiFileHolderDirective } from './ui-file-holder/ui-file-holder.directive'; 4 | import { UiFileComponent } from './ui-file/ui-file.component'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | CommonModule, 9 | ], 10 | declarations: [ 11 | UiFileComponent, 12 | UiFileHolderDirective, 13 | ], 14 | exports: [ 15 | UiFileComponent, 16 | UiFileHolderDirective, 17 | ], 18 | }) 19 | export class UiFileModule { 20 | } 21 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-file/ui-file.ts: -------------------------------------------------------------------------------- 1 | export * from './meta'; 2 | export * from './ui-file.module'; 3 | export * from './ui-file/ui-file.component'; 4 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-file/ui-file/ui-file.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | left: 100%; 3 | position: absolute; 4 | } 5 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-form/demo/ui-form-demo.component.scss: -------------------------------------------------------------------------------- 1 | .row { 2 | display: flex; 3 | flex-direction: row; 4 | margin: var(--grid) 0 calc(var(--grid) * 2.5) 0; 5 | :first-child { 6 | margin-right: calc(var(--grid) * 2.5); 7 | } 8 | } 9 | 10 | .layout-inline { 11 | justify-content: center; 12 | ui-form-field { 13 | margin-bottom: 10px; 14 | } 15 | } 16 | 17 | //@include mq(var(--from): mobile) { 18 | // .layout-inline { 19 | // justify-content: flex-start; 20 | // } 21 | //} 22 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-form/demo/ui-form-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, ViewChild } from '@angular/core'; 2 | import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms'; 3 | 4 | /** 5 | * @demo 6 | */ 7 | @Component({ 8 | templateUrl: './ui-form-demo.component.html', 9 | styleUrls: ['./ui-form-demo.component.scss'], 10 | }) 11 | export class UiFormDemoComponent implements OnInit { 12 | @ViewChild(NgForm) ngForm: NgForm; 13 | 14 | email: string; 15 | 16 | name: string; 17 | 18 | rememberMe: boolean; 19 | 20 | type: 'customer' | 'merchant'; 21 | 22 | // Reactive demo 23 | form: FormGroup; 24 | 25 | constructor(private builder: FormBuilder) { 26 | this.form = this.builder.group({ 27 | email: ['', [Validators.required, Validators.email]], 28 | name: [''], 29 | }); 30 | } 31 | 32 | ngOnInit() { 33 | } 34 | 35 | submit() { 36 | if (this.ngForm.valid) { 37 | alert('Form valid!'); 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-form/demo/ui-form-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 4 | import { UiButtonModule } from 'ui'; 5 | import { UiCheckboxModule } from '../../ui-checkbox/ui-checkbox.module'; 6 | import { UiRadioModule } from '../../ui-radio/ui-radio.module'; 7 | import { UiTextModule } from '../../ui-text/ui-text.module'; 8 | import { UiFormModule } from '../ui-form.module'; 9 | import { UiFormDemoComponent } from './ui-form-demo.component'; 10 | 11 | /** 12 | * @demo 13 | */ 14 | @NgModule({ 15 | imports: [ 16 | CommonModule, 17 | FormsModule, 18 | ReactiveFormsModule, 19 | UiFormModule, 20 | // Combined demo 21 | UiTextModule, 22 | UiRadioModule, 23 | UiCheckboxModule, 24 | UiButtonModule, 25 | ], 26 | declarations: [UiFormDemoComponent], 27 | entryComponents: [ 28 | UiFormDemoComponent, 29 | ], 30 | }) 31 | export class UiFormDemoModule { 32 | } 33 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-form/meta.ts: -------------------------------------------------------------------------------- 1 | export type UiFormLayout = 'stacked' | 'aligned' | 'inline'; 2 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-form/ui-form-field/ui-form-field.component.html: -------------------------------------------------------------------------------- 1 | 7 |
8 | 9 |
11 | 12 |
15 | 16 |
17 | 18 |
19 |
20 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-form/ui-form-field/ui-form-field.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | margin-bottom: var(--grid); 4 | } 5 | 6 | :host-context([uiForm].layout-aligned,ui-form-field.layout-aligned) { 7 | align-items: baseline; 8 | display: flex; 9 | flex-direction: row; 10 | label { 11 | display: flex; 12 | flex-direction: row-reverse; 13 | width: 150px; 14 | .required { 15 | margin-right: calc(var(--grid) / 2); 16 | } 17 | } 18 | .control { 19 | padding-left: var(--grid); 20 | } 21 | } 22 | 23 | :host-context([uiForm].layout-inline,ui-form-field.layout-inline) { 24 | align-items: baseline; 25 | display: flex; 26 | flex-direction: row; 27 | margin-bottom: 0; 28 | margin-right: calc(var(--grid) * 2); 29 | label { 30 | display: flex; 31 | flex-direction: row-reverse; 32 | .required { 33 | margin-right: calc(var(--grid) / 2); 34 | } 35 | } 36 | .control { 37 | padding-left: var(--grid); 38 | } 39 | } 40 | 41 | label { 42 | .required { 43 | color: var(--errorColor); 44 | } 45 | } 46 | 47 | .errors { 48 | align-items: flex-start; 49 | display: flex; 50 | flex-direction: column; 51 | .error { 52 | color: var(--errorColor); 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-form/ui-form.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { KitFormFieldModule } from '@ngx-kit/core'; 5 | import { UiFormFieldComponent } from './ui-form-field/ui-form-field.component'; 6 | import { UiFormComponent } from './ui-form/ui-form.component'; 7 | 8 | @NgModule({ 9 | imports: [ 10 | CommonModule, 11 | FormsModule, 12 | KitFormFieldModule, 13 | ], 14 | declarations: [ 15 | UiFormComponent, 16 | UiFormFieldComponent, 17 | ], 18 | exports: [ 19 | KitFormFieldModule, 20 | UiFormComponent, 21 | UiFormFieldComponent, 22 | ], 23 | }) 24 | export class UiFormModule { 25 | } 26 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-form/ui-form.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-form.module'; 2 | export * from './ui-form/ui-form.component'; 3 | export * from './ui-form-field/ui-form-field.component'; 4 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-form/ui-form/ui-form.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-form/ui-form/ui-form.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | &.layout { 3 | &-inline { 4 | align-items: baseline; 5 | display: flex; 6 | flex-flow: row wrap; 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-form/ui-form/ui-form.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ui-form,[uiForm]', 5 | templateUrl: './ui-form.component.html', 6 | styleUrls: ['./ui-form.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | }) 9 | export class UiFormComponent { 10 | constructor() { 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-loading-bar/demo/ui-loading-bar-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Global progress

3 |   4 | 5 |
6 | 7 |
8 |

Local progress

9 |
10 | 11 |
12 | 13 |   14 | 15 |
16 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-loading-bar/demo/ui-loading-bar-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { KitLoadingService } from '@ngx-kit/core'; 3 | 4 | /** 5 | * @demo 6 | */ 7 | @Component({ 8 | templateUrl: './ui-loading-bar-demo.component.html', 9 | }) 10 | export class UiLoadingBarDemoComponent { 11 | constructor(private loading: KitLoadingService) { 12 | } 13 | 14 | start() { 15 | this.loading.global.start('demo'); 16 | } 17 | 18 | end() { 19 | this.loading.global.end('demo'); 20 | } 21 | 22 | startLocal() { 23 | this.loading.progress('local').start('demo'); 24 | } 25 | 26 | endLocal() { 27 | this.loading.progress('local').end('demo'); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-loading-bar/demo/ui-loading-bar-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiButtonModule } from 'ui'; 4 | import { UiLoadingBarModule } from '../ui-loading-bar.module'; 5 | import { UiLoadingBarDemoComponent } from './ui-loading-bar-demo.component'; 6 | 7 | /** 8 | * @demo 9 | */ 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | UiLoadingBarModule, 14 | UiButtonModule, 15 | ], 16 | declarations: [ 17 | UiLoadingBarDemoComponent, 18 | ], 19 | entryComponents: [ 20 | UiLoadingBarDemoComponent, 21 | ], 22 | }) 23 | export class UiLoadingBarDemoModule { 24 | } 25 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-loading-bar/ui-loading-bar.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core'; 3 | import { KitOverlayService } from '@ngx-kit/core'; 4 | import { UiLoadingBarComponent } from './ui-loading-bar/ui-loading-bar.component'; 5 | 6 | export function uiLoadingBarInitFactory(overlay: KitOverlayService) { 7 | // Store in const to avoid compilation error: https://github.com/angular/angular/issues/14485 8 | const f = () => { 9 | // Host loading-bar component in the overlay 10 | overlay.hostComponent({component: UiLoadingBarComponent}); 11 | }; 12 | return f; 13 | } 14 | 15 | @NgModule({ 16 | imports: [ 17 | CommonModule, 18 | ], 19 | declarations: [ 20 | UiLoadingBarComponent, 21 | ], 22 | exports: [ 23 | UiLoadingBarComponent, 24 | ], 25 | entryComponents: [ 26 | UiLoadingBarComponent, 27 | ], 28 | }) 29 | export class UiLoadingBarModule { 30 | static forRoot(): ModuleWithProviders { 31 | return { 32 | ngModule: UiLoadingBarModule, 33 | providers: [ 34 | { 35 | provide: APP_INITIALIZER, 36 | useFactory: uiLoadingBarInitFactory, 37 | deps: [KitOverlayService], 38 | multi: true, 39 | }, 40 | ], 41 | }; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-loading-bar/ui-loading-bar.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-loading-bar.module'; 2 | export * from './ui-loading-bar/ui-loading-bar.component'; 3 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-loading-bar/ui-loading-bar/ui-loading-bar.component.html: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-loading-bar/ui-loading-bar/ui-loading-bar.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | left: 0; 3 | position: fixed; 4 | right: 0; 5 | top: 0; 6 | z-index: 1; 7 | } 8 | 9 | .bar { 10 | background: var(--primaryColor); 11 | box-shadow: -7px 2px 11px 0 var(--primaryHoverColor); 12 | height: 3px; 13 | min-height: 1px; 14 | } 15 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-modal/demo/ui-modal-demo.component.scss: -------------------------------------------------------------------------------- 1 | button { 2 | margin: 0 var(--grid) var(--grid) 0; 3 | } 4 | 5 | ui-modal-footer { 6 | button { 7 | margin: 0 0 0 var(--grid); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-modal/demo/ui-modal-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | selector: 'ui-ui-modal-demo', 8 | templateUrl: './ui-modal-demo.component.html', 9 | styleUrls: ['./ui-modal-demo.component.scss'], 10 | }) 11 | export class UiModalDemoComponent implements OnInit { 12 | display1 = false; 13 | 14 | display2 = false; 15 | 16 | display3 = false; 17 | 18 | display4 = false; 19 | 20 | display5 = false; 21 | 22 | display6 = false; 23 | 24 | display7 = false; 25 | 26 | display8 = false; 27 | 28 | // sizes 29 | display9 = false; 30 | 31 | display10 = false; 32 | 33 | display11 = false; 34 | 35 | display12 = false; 36 | 37 | constructor() { 38 | } 39 | 40 | ngOnInit() { 41 | } 42 | 43 | } 44 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-modal/demo/ui-modal-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiButtonModule } from 'ui'; 4 | import { UiModalModule } from '../ui-modal.module'; 5 | import { UiModalDemoComponent } from './ui-modal-demo.component'; 6 | 7 | /** 8 | * @demo 9 | */ 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | UiModalModule, 14 | UiButtonModule, 15 | 16 | ], 17 | declarations: [UiModalDemoComponent], 18 | entryComponents: [ 19 | UiModalDemoComponent, 20 | ], 21 | }) 22 | export class UiModalDemoModule { 23 | } 24 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-modal/meta.ts: -------------------------------------------------------------------------------- 1 | export type UiModalSize = 's' | 'm' | 'l' | 'full'; 2 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-modal/ui-modal-footer/ui-modal-footer.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | border-top: 1px solid var(--mainBdColor); 3 | display: flex; 4 | flex-direction: row; 5 | justify-content: flex-end; 6 | padding: calc(var(--grid) * 2); 7 | } 8 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-modal/ui-modal-footer/ui-modal-footer.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ui-modal-footer', 5 | template: '', 6 | styleUrls: ['./ui-modal-footer.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | }) 9 | export class UiModalFooterComponent { 10 | } 11 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-modal/ui-modal.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { KitClassModule, KitIconsModule, KitModalModule, KitOverlayModule } from '@ngx-kit/core'; 4 | import { UiModalFooterComponent } from './ui-modal-footer/ui-modal-footer.component'; 5 | import { UiModalComponent } from './ui-modal/ui-modal.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | KitClassModule, 11 | KitIconsModule, 12 | ], 13 | declarations: [ 14 | UiModalComponent, 15 | UiModalFooterComponent, 16 | ], 17 | exports: [ 18 | KitModalModule, 19 | KitOverlayModule, 20 | UiModalComponent, 21 | UiModalFooterComponent, 22 | ], 23 | }) 24 | export class UiModalModule { 25 | } 26 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-modal/ui-modal.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-modal.module'; 2 | export * from './ui-modal/ui-modal.component'; 3 | export * from './ui-modal-footer/ui-modal-footer.component'; 4 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-modal/ui-modal/ui-modal.component.html: -------------------------------------------------------------------------------- 1 |
4 |
7 |
{{ header }}
8 |
9 | 14 |
15 |
16 |
17 | 18 |
19 | 20 |
21 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-notification/README.md: -------------------------------------------------------------------------------- 1 | ### Usage 2 | 3 | 1. Import `UiNotificationModule` module into the root. 4 | 5 | ```typescript 6 | ... 7 | imports: [ 8 | ... 9 | UiNotificationModule.forRoot(), 10 | ], 11 | ``` 12 | 13 | 2. Use `UiNotificationService` api to show notifications. 14 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-notification/demo/ui-notification-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 |
6 |

Colors

7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 |

Position

16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 |

Duration

24 | 25 | 26 | 27 |
28 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-notification/demo/ui-notification-demo.component.scss: -------------------------------------------------------------------------------- 1 | button { 2 | margin: 0 var(--grid) var(--grid) 0; 3 | } 4 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-notification/demo/ui-notification-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { UiNotificationPosition } from '../meta'; 3 | import { UiNotificationService } from '../ui-notification.service'; 4 | 5 | /** 6 | * @demo 7 | */ 8 | @Component({ 9 | templateUrl: './ui-notification-demo.component.html', 10 | styleUrls: ['./ui-notification-demo.component.scss'], 11 | }) 12 | export class UiNotificationDemoComponent implements OnInit { 13 | 14 | constructor(private notification: UiNotificationService) { 15 | } 16 | 17 | ngOnInit() { 18 | } 19 | 20 | open(params?: any) { 21 | this.notification.open({title: 'hello', message: 'there', ...params}); 22 | } 23 | 24 | openWithDuration(duration: number) { 25 | this.notification.config({duration}); 26 | this.notification.open({message: 'Just an another message'}); 27 | } 28 | 29 | openWithPosition(position: UiNotificationPosition) { 30 | this.notification.config({position}); 31 | this.notification.open({message: 'Sided message'}); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-notification/demo/ui-notification-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiButtonModule } from 'ui'; 4 | import { UiNotificationModule } from '../ui-notification.module'; 5 | import { UiNotificationDemoComponent } from './ui-notification-demo.component'; 6 | 7 | /** 8 | * @demo 9 | */ 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | UiNotificationModule, 14 | UiButtonModule, 15 | ], 16 | declarations: [UiNotificationDemoComponent], 17 | entryComponents: [ 18 | UiNotificationDemoComponent, 19 | ], 20 | }) 21 | export class UiNotificationDemoModule { 22 | } 23 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-notification/meta.ts: -------------------------------------------------------------------------------- 1 | export type UiNotificationPosition = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'; 2 | 3 | export interface UiNotificationHostConfig { 4 | duration: number; 5 | position: UiNotificationPosition; 6 | } 7 | 8 | export interface UiNotificationItem { 9 | __id: string; 10 | params: any; 11 | } 12 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-notification/ui-notification-host/ui-notification-host.component.html: -------------------------------------------------------------------------------- 1 |
2 |
8 |

{{ item.params.title }}

9 |
{{ item.params.message }}
10 |
11 |
12 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-notification/ui-notification.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core'; 3 | import { KitClassModule, KitOverlayService } from '@ngx-kit/core'; 4 | import { UiNotificationHostComponent } from './ui-notification-host/ui-notification-host.component'; 5 | 6 | export function uiNotificationInitFactory(overlay: KitOverlayService) { 7 | // Store in const to avoid compilation error: https://github.com/angular/angular/issues/14485 8 | const f = () => { 9 | // Host component in the overlay 10 | overlay.hostComponent({component: UiNotificationHostComponent}); 11 | }; 12 | return f; 13 | } 14 | 15 | @NgModule({ 16 | imports: [ 17 | CommonModule, 18 | KitClassModule, 19 | ], 20 | declarations: [ 21 | UiNotificationHostComponent, 22 | ], 23 | entryComponents: [ 24 | UiNotificationHostComponent, 25 | ], 26 | }) 27 | export class UiNotificationModule { 28 | static forRoot(): ModuleWithProviders { 29 | 30 | return { 31 | ngModule: UiNotificationModule, 32 | providers: [ 33 | { 34 | provide: APP_INITIALIZER, 35 | useFactory: uiNotificationInitFactory, 36 | deps: [KitOverlayService], 37 | multi: true, 38 | }, 39 | ], 40 | }; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-notification/ui-notification.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-notification.module'; 2 | export * from './ui-notification.service'; 3 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-popup/demo/ui-popup-demo.component.scss: -------------------------------------------------------------------------------- 1 | button { 2 | margin: 0 var(--grid) var(--grid) 0; 3 | } 4 | 5 | .content { 6 | padding: calc(var(--grid) * 1.5) calc(var(--grid) * 2); 7 | min-width: 160px; 8 | } 9 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-popup/demo/ui-popup-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | templateUrl: './ui-popup-demo.component.html', 8 | styleUrls: ['./ui-popup-demo.component.scss'], 9 | changeDetection: ChangeDetectionStrategy.OnPush, 10 | }) 11 | export class UiPopupDemoComponent implements OnInit { 12 | constructor() { 13 | } 14 | 15 | ngOnInit() { 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-popup/demo/ui-popup-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiButtonModule } from 'ui'; 4 | import { UiPopupModule } from '../ui-popup.module'; 5 | import { UiPopupDemoComponent } from './ui-popup-demo.component'; 6 | 7 | /** 8 | * @demo 9 | */ 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | UiPopupModule, 14 | UiButtonModule, 15 | ], 16 | declarations: [ 17 | UiPopupDemoComponent, 18 | ], 19 | entryComponents: [ 20 | UiPopupDemoComponent, 21 | ], 22 | }) 23 | export class UiPopupDemoModule { 24 | } 25 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-popup/ui-popup.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { KitClassModule, KitOverlayModule, KitPositionModule } from '@ngx-kit/core'; 4 | import { UiPopupComponent } from './ui-popup/ui-popup.component'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | CommonModule, 9 | KitClassModule, 10 | KitPositionModule, 11 | ], 12 | declarations: [ 13 | UiPopupComponent, 14 | ], 15 | exports: [ 16 | KitOverlayModule, 17 | UiPopupComponent, 18 | ], 19 | }) 20 | export class UiPopupModule { 21 | } 22 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-popup/ui-popup.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-popup.module'; 2 | export * from './ui-popup/ui-popup.component'; 3 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-popup/ui-popup/ui-popup.component.html: -------------------------------------------------------------------------------- 1 |
4 |
7 | 8 |
9 |
10 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-radio/demo/ui-radio-demo.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngx-kit/sula/58a048c9ff8828e2b436f816c41bc04d37334abd/projects/ui/src/lib/ui-radio/demo/ui-radio-demo.component.scss -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-radio/demo/ui-radio-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | templateUrl: './ui-radio-demo.component.html', 8 | styleUrls: ['./ui-radio-demo.component.scss'], 9 | }) 10 | export class UiRadioDemoComponent implements OnInit { 11 | 12 | radioModel = 'A'; 13 | radioModel2 = 'A'; 14 | radioModel3 = 'A'; 15 | radioModel4 = 'A'; 16 | radioModel5 = 'A'; 17 | radioModel6 = 'A'; 18 | radioModel7 = 'A'; 19 | radioModel8 = 'A'; 20 | 21 | constructor() { 22 | } 23 | 24 | ngOnInit() { 25 | } 26 | 27 | } 28 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-radio/demo/ui-radio-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { UiRadioModule } from '../ui-radio.module'; 5 | import { UiRadioDemoComponent } from './ui-radio-demo.component'; 6 | 7 | /** 8 | * @demo 9 | */ 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | FormsModule, 14 | UiRadioModule, 15 | ], 16 | declarations: [UiRadioDemoComponent], 17 | entryComponents: [ 18 | UiRadioDemoComponent, 19 | ], 20 | }) 21 | export class UiRadioDemoModule { 22 | } 23 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-radio/ui-radio.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { UiRadioComponent } from './ui-radio/ui-radio.component'; 5 | import { KitClassModule } from '@ngx-kit/core'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | FormsModule, 11 | KitClassModule, 12 | ], 13 | declarations: [ 14 | UiRadioComponent, 15 | ], 16 | exports: [ 17 | UiRadioComponent, 18 | ], 19 | }) 20 | export class UiRadioModule { 21 | } 22 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-radio/ui-radio.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-radio.module'; 2 | export * from './ui-radio/ui-radio.component'; 3 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-radio/ui-radio/ui-radio.component.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-rating/demo/ui-rating-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Star character

3 | 4 |
5 | 6 |
7 |

Star icon

8 | 9 |
10 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-rating/demo/ui-rating-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { KitIconsRegistryService } from '@ngx-kit/core'; 3 | 4 | /** 5 | * @demo 6 | */ 7 | @Component({ 8 | templateUrl: './ui-rating-demo.component.html', 9 | }) 10 | export class UiRatingDemoComponent { 11 | constructor(private icons: KitIconsRegistryService) { 12 | this.icons.add({ 13 | name: 'star', 14 | xml: '', 15 | }); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-rating/demo/ui-rating-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiRatingModule } from '../ui-rating.module'; 4 | import { UiRatingDemoComponent } from './ui-rating-demo.component'; 5 | 6 | /** 7 | * @demo 8 | */ 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | UiRatingModule, 13 | ], 14 | declarations: [ 15 | UiRatingDemoComponent, 16 | ], 17 | entryComponents: [ 18 | UiRatingDemoComponent, 19 | ], 20 | }) 21 | export class UiRatingDemoModule { 22 | } 23 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-rating/ui-rating.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { KitIconsModule, KitRepeatModule } from '@ngx-kit/core'; 4 | import { UiRatingComponent } from './ui-rating/ui-rating.component'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | CommonModule, 9 | KitIconsModule, 10 | KitRepeatModule, 11 | ], 12 | declarations: [ 13 | UiRatingComponent, 14 | ], 15 | exports: [ 16 | UiRatingComponent, 17 | ], 18 | }) 19 | export class UiRatingModule { 20 | } 21 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-rating/ui-rating.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-rating.module'; 2 | export * from './ui-rating/ui-rating.component'; 3 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-rating/ui-rating/ui-rating.component.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-rating/ui-rating/ui-rating.component.scss: -------------------------------------------------------------------------------- 1 | .icon { 2 | color: var(--mainTextLightColor); 3 | height: 20px; 4 | width: 20px; 5 | &.active { 6 | color: #e8ba03; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-rating/ui-rating/ui-rating.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core'; 2 | import { KitClassService } from '@ngx-kit/core'; 3 | 4 | @Component({ 5 | selector: 'ui-rating', 6 | templateUrl: './ui-rating.component.html', 7 | styleUrls: ['./ui-rating.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | providers: [KitClassService], 10 | }) 11 | export class UiRatingComponent implements OnInit, OnChanges { 12 | @Input() icon: string; 13 | 14 | @Input() symbol = '★'; 15 | 16 | @Input() total = 5; 17 | 18 | @Input() value: number; 19 | 20 | constructor(private kitClass: KitClassService) { 21 | } 22 | 23 | ngOnChanges() { 24 | this.kitClass.apply({}); 25 | } 26 | 27 | ngOnInit() { 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-scroll/demo/ui-scroll-demo.component.scss: -------------------------------------------------------------------------------- 1 | .h-scroll { 2 | border: 1px solid #d7d7d9; 3 | height: 200px; 4 | overflow: hidden; 5 | } 6 | 7 | .v-scroll { 8 | border: 1px solid #d7d7d9; 9 | width: 250px; 10 | } 11 | 12 | .box { 13 | padding: 0 calc(var(--grid) * 2); 14 | } 15 | 16 | //@include mq($from: desktop) { 17 | // .v-scroll { 18 | // width: 600px; 19 | // } 20 | //} 21 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-scroll/demo/ui-scroll-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | templateUrl: './ui-scroll-demo.component.html', 8 | styleUrls: ['./ui-scroll-demo.component.scss'], 9 | changeDetection: ChangeDetectionStrategy.OnPush, 10 | }) 11 | export class UiScrollDemoComponent implements OnInit { 12 | constructor() { 13 | } 14 | 15 | ngOnInit() { 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-scroll/demo/ui-scroll-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiScrollModule } from '../ui-scroll.module'; 4 | import { UiScrollDemoComponent } from './ui-scroll-demo.component'; 5 | 6 | /** 7 | * @demo 8 | */ 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | UiScrollModule, 13 | ], 14 | declarations: [ 15 | UiScrollDemoComponent, 16 | ], 17 | entryComponents: [ 18 | UiScrollDemoComponent, 19 | ], 20 | }) 21 | export class UiScrollDemoModule { 22 | } 23 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-scroll/ui-scroll.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiScrollComponent } from './ui-scroll/ui-scroll.component'; 4 | 5 | @NgModule({ 6 | imports: [ 7 | CommonModule, 8 | ], 9 | declarations: [ 10 | UiScrollComponent, 11 | ], 12 | exports: [ 13 | UiScrollComponent, 14 | ], 15 | }) 16 | export class UiScrollModule { 17 | } 18 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-scroll/ui-scroll.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-scroll.module'; 2 | export * from './ui-scroll/ui-scroll.component'; 3 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-scroll/ui-scroll/ui-scroll.component.html: -------------------------------------------------------------------------------- 1 |
4 |
8 |
9 |
10 | 11 |
14 |
18 |
19 |
20 | 21 |
26 |
31 | 32 |
33 |
34 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-select/demo/ui-select-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 | 9 |
10 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-select/demo/ui-select-demo.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngx-kit/sula/58a048c9ff8828e2b436f816c41bc04d37334abd/projects/ui/src/lib/ui-select/demo/ui-select-demo.component.scss -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-select/demo/ui-select-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | templateUrl: './ui-select-demo.component.html', 8 | styleUrls: ['./ui-select-demo.component.scss'], 9 | }) 10 | export class UiSelectDemoComponent implements OnInit { 11 | selectModel = ''; 12 | 13 | constructor() { 14 | } 15 | 16 | ngOnInit() { 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-select/demo/ui-select-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { UiSelectModule } from '../ui-select.module'; 5 | import { UiSelectDemoComponent } from './ui-select-demo.component'; 6 | 7 | /** 8 | * @demo 9 | */ 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | FormsModule, 14 | UiSelectModule, 15 | ], 16 | declarations: [UiSelectDemoComponent], 17 | entryComponents: [ 18 | UiSelectDemoComponent, 19 | ], 20 | }) 21 | export class UiSelectDemoModule { 22 | } 23 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-select/ui-select.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { UiSelectComponent } from './ui-select/ui-select.component'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | CommonModule, 9 | FormsModule, 10 | ], 11 | declarations: [ 12 | UiSelectComponent, 13 | ], 14 | exports: [ 15 | UiSelectComponent, 16 | ], 17 | }) 18 | export class UiSelectModule { 19 | } 20 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-select/ui-select.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-select.module'; 2 | export * from './ui-select/ui-select.component'; 3 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-select/ui-select/ui-select.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | background: var(--inputBgColor); 3 | border: 1px solid var(--inputBdColor); 4 | border-radius: var(--borderRadius); 5 | box-sizing: border-box; 6 | cursor: pointer; 7 | color: var(--inputTextColor); 8 | display: inline-flex; 9 | padding: var(--grid) calc(var(--grid) * 2); 10 | transition: var(--transition); 11 | width: 100%; 12 | &:hover { 13 | box-shadow: var(--shadow); 14 | outline: none; 15 | } 16 | &:focus { 17 | outline: none; 18 | } 19 | &:active{ 20 | border-color: var(--primaryColor); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-select/ui-select/ui-select.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input, } from '@angular/core'; 2 | 3 | @Component({ 4 | // tslint:disable-next-line 5 | selector: 'select[uiSelect]', 6 | template: '', 7 | styleUrls: ['./ui-select.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | }) 10 | export class UiSelectComponent { 11 | @Input() uiSelect: void; 12 | } 13 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-slider/demo/ui-slider-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 |

One value

3 |
4 |

Range: from 0 to 10, step: 1, value: {{ value1 | json }}

5 | 6 |
7 | 8 |
9 |

Range: from -1000 to 1000, step: 2, value: {{ value2 | json }}

10 | 11 |
12 |
13 | 14 |
15 |

Without fill

16 |
17 |

Range: from 50 to 150, step: 5, value: {{ value3 | json }}

18 | 23 | 24 |
25 |
26 | 27 |
28 |

Range

29 |
30 |

Range: from -1000 to 1600, step: 50, value: {{ rangeValue | json }}

31 | 32 |
33 |
34 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-slider/demo/ui-slider-demo.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngx-kit/sula/58a048c9ff8828e2b436f816c41bc04d37334abd/projects/ui/src/lib/ui-slider/demo/ui-slider-demo.component.scss -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-slider/demo/ui-slider-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | selector: 'ui-ui-slider-demo', 8 | templateUrl: './ui-slider-demo.component.html', 9 | styleUrls: ['./ui-slider-demo.component.scss'], 10 | }) 11 | export class UiSliderDemoComponent implements OnInit { 12 | 13 | value1 = 5; 14 | 15 | value2 = 150; 16 | 17 | value3 = 75; 18 | 19 | rangeValue = [-150, 350]; 20 | 21 | constructor() { 22 | } 23 | 24 | ngOnInit() { 25 | } 26 | 27 | } 28 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-slider/demo/ui-slider-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { UiSliderModule } from '../ui-slider.module'; 5 | import { UiSliderDemoComponent } from './ui-slider-demo.component'; 6 | 7 | /** 8 | * @demo 9 | */ 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | FormsModule, 14 | UiSliderModule, 15 | ], 16 | declarations: [UiSliderDemoComponent], 17 | entryComponents: [ 18 | UiSliderDemoComponent, 19 | ], 20 | }) 21 | export class UiSliderDemoModule { 22 | } 23 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-slider/ui-slider.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiSliderComponent } from './ui-slider/ui-slider.component'; 4 | 5 | @NgModule({ 6 | imports: [ 7 | CommonModule, 8 | ], 9 | declarations: [ 10 | UiSliderComponent, 11 | ], 12 | exports: [ 13 | UiSliderComponent, 14 | ], 15 | }) 16 | export class UiSliderModule { 17 | } 18 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-slider/ui-slider.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-slider.module'; 2 | export * from './ui-slider/ui-slider.component'; 3 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-slider/ui-slider/ui-slider.component.html: -------------------------------------------------------------------------------- 1 |
5 |
6 |
9 |
13 |
16 |
17 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-slider/ui-slider/ui-slider.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | --height: 6px; 3 | --pointer: 20px; 4 | --pad: 4px; 5 | } 6 | 7 | .slider { 8 | height: var(--height); 9 | padding: calc(var(--grid) / 2) 0; 10 | position: relative; 11 | } 12 | 13 | .bg { 14 | background: var(--inputBdColor); 15 | border-radius: var(--borderRadius); 16 | height: var(--height); 17 | } 18 | 19 | .fill { 20 | background: var(--primaryColor); 21 | border-radius: var(--borderRadius); 22 | bottom: var(--pad); 23 | height: var(--height); 24 | left: 0; 25 | position: absolute; 26 | top: var(--pad); 27 | } 28 | 29 | .pointer { 30 | background: var(--inputBgColor); 31 | border: 1px solid var(--inputBdColor); 32 | border-radius: var(--borderRadius); 33 | box-sizing: border-box; 34 | cursor: pointer; 35 | height: var(--pointer); 36 | position: absolute; 37 | top: calc((var(--height) - var(--pointer)) / 2 + var(--pad)); 38 | transform: translateX(-50%); 39 | width: calc(var(--pointer) / 2); 40 | &:focus { 41 | box-shadow: var(--shadow); 42 | outline: none; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tabs/demo/ui-tabs-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | Tab 1 5 | Tab 2 6 | Tab 3 7 | 8 | Tab 1 Content 9 | Tab 2 Content 10 | Tab 3 Content 11 | 12 |
13 | 14 |
15 |

Generate tabs from data

16 | 17 | 18 | {{ tab.tab }} 19 | 20 | 21 | {{ tab.content }} 22 | 23 | 24 |
25 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tabs/demo/ui-tabs-demo.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngx-kit/sula/58a048c9ff8828e2b436f816c41bc04d37334abd/projects/ui/src/lib/ui-tabs/demo/ui-tabs-demo.component.scss -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tabs/demo/ui-tabs-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | templateUrl: './ui-tabs-demo.component.html', 8 | styleUrls: ['./ui-tabs-demo.component.scss'], 9 | }) 10 | export class UiTabsDemoComponent implements OnInit { 11 | 12 | tabs = [ 13 | {tab: 'Tab 1', content: 'Tab 1 content'}, 14 | {tab: 'Tab 2', content: 'Tab 2 content'}, 15 | {tab: 'Tab 3', content: 'Tab 3 content'}, 16 | ]; 17 | 18 | constructor() { 19 | } 20 | 21 | ngOnInit() { 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tabs/demo/ui-tabs-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiTabsModule } from '../ui-tabs.module'; 4 | import { UiTabsDemoComponent } from './ui-tabs-demo.component'; 5 | 6 | /** 7 | * @demo 8 | */ 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | UiTabsModule, 13 | ], 14 | declarations: [UiTabsDemoComponent], 15 | entryComponents: [ 16 | UiTabsDemoComponent, 17 | ], 18 | }) 19 | export class UiTabsDemoModule { 20 | } 21 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tabs/ui-tabs-content/ui-tabs-content.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | padding: calc(var(--grid) * 2); 4 | } 5 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tabs/ui-tabs-nav/ui-tabs-nav.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | border-bottom: 1px solid var(--panelBdColor); 3 | color: var(--mainTextColor); 4 | display: flex; 5 | flex-direction: row; 6 | list-style: none; 7 | margin: 0; 8 | padding: 0; 9 | } 10 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tabs/ui-tabs-nav/ui-tabs-nav.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ui-tabs-nav', 5 | template: '', 6 | styleUrls: ['./ui-tabs-nav.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | }) 9 | export class UiTabsNavComponent { 10 | constructor() { 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tabs/ui-tabs-tab/ui-tabs-tab.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | border-bottom: 1px solid transparent; 3 | cursor: pointer; 4 | padding: var(--grid) calc(var(--grid) * 2); 5 | transition-duration: .25s; 6 | transition-property: background, border; 7 | user-select: none; 8 | margin-bottom: -1px; 9 | &:hover { 10 | color: var(--primaryColor); 11 | } 12 | &.active { 13 | border-bottom-color: var(--primaryColor); 14 | color: var(--primaryColor); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tabs/ui-tabs-tab/ui-tabs-tab.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ChangeDetectionStrategy, 3 | Component, 4 | HostBinding, 5 | HostListener, 6 | Input, 7 | OnDestroy, 8 | OnInit, 9 | } from '@angular/core'; 10 | import { isDefined, KitSlideHostService } from '@ngx-kit/core'; 11 | import { Subject } from 'rxjs'; 12 | import { takeUntil } from 'rxjs/operators'; 13 | 14 | @Component({ 15 | selector: 'ui-tabs-tab', 16 | template: '', 17 | styleUrls: ['./ui-tabs-tab.component.scss'], 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | }) 20 | export class UiTabsTabComponent implements OnInit, OnDestroy { 21 | @HostBinding('class.active') classActive = false; 22 | 23 | @Input() id: number; 24 | 25 | private destroy = new Subject(); 26 | 27 | constructor(private host: KitSlideHostService) { 28 | } 29 | 30 | ngOnDestroy() { 31 | this.destroy.next(); 32 | } 33 | 34 | ngOnInit() { 35 | this.host.activeChanges 36 | .pipe(takeUntil(this.destroy)) 37 | .subscribe(id => { 38 | this.classActive = id === this.id; 39 | }); 40 | } 41 | 42 | @HostListener('click') 43 | clickHandler() { 44 | if (isDefined(this.id) && this.id !== null) { 45 | this.host.active = this.id; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tabs/ui-tabs.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { KitSlideModule } from '@ngx-kit/core'; 4 | import { UiTabsContentComponent } from './ui-tabs-content/ui-tabs-content.component'; 5 | import { UiTabsNavComponent } from './ui-tabs-nav/ui-tabs-nav.component'; 6 | import { UiTabsTabComponent } from './ui-tabs-tab/ui-tabs-tab.component'; 7 | import { UiTabsComponent } from './ui-tabs/ui-tabs.component'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | KitSlideModule, 13 | ], 14 | declarations: [ 15 | UiTabsComponent, 16 | UiTabsNavComponent, 17 | UiTabsTabComponent, 18 | UiTabsContentComponent, 19 | ], 20 | exports: [ 21 | KitSlideModule, 22 | UiTabsComponent, 23 | UiTabsNavComponent, 24 | UiTabsTabComponent, 25 | UiTabsContentComponent, 26 | ], 27 | }) 28 | export class UiTabsModule { 29 | } 30 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tabs/ui-tabs.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-tabs.module'; 2 | export * from './ui-tabs/ui-tabs.component'; 3 | export * from './ui-tabs-content/ui-tabs-content.component'; 4 | export * from './ui-tabs-nav/ui-tabs-nav.component'; 5 | export * from './ui-tabs-tab/ui-tabs-tab.component'; 6 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tabs/ui-tabs/ui-tabs.component.scss: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | overflow: hidden; 3 | position: relative; 4 | } 5 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tabs/ui-tabs/ui-tabs.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; 2 | import { KitSlideHostService, KitSlideId } from '@ngx-kit/core'; 3 | 4 | @Component({ 5 | selector: 'ui-tabs', 6 | template: ` 7 | 8 |
9 | 10 |
11 | `, 12 | styleUrls: ['./ui-tabs.component.scss'], 13 | changeDetection: ChangeDetectionStrategy.OnPush, 14 | providers: [ 15 | KitSlideHostService, 16 | ], 17 | }) 18 | export class UiTabsComponent implements OnInit { 19 | /** 20 | * Automatically activate first tab. 21 | */ 22 | @Input() activateFirst = true; 23 | 24 | constructor(private host: KitSlideHostService) { 25 | } 26 | 27 | ngOnInit() { 28 | this.host.activateFirst = this.activateFirst; 29 | } 30 | 31 | set active(active: KitSlideId) { 32 | this.host.active = active; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-text/demo/ui-text-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Input

3 | 4 | {{ inputModel }} 5 |
6 | 7 |
8 |

Textarea

9 | 10 | {{ textareaModel }} 11 | 12 |

With auto-resize

13 | 17 | {{ textareaModel }} 18 |
19 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-text/demo/ui-text-demo.component.scss: -------------------------------------------------------------------------------- 1 | textarea{ 2 | resize: none; 3 | } 4 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-text/demo/ui-text-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | selector: 'ui-ui-text-demo', 8 | templateUrl: './ui-text-demo.component.html', 9 | styleUrls: ['./ui-text-demo.component.scss'], 10 | }) 11 | export class UiTextDemoComponent implements OnInit { 12 | inputModel = ''; 13 | 14 | textareaModel = ''; 15 | 16 | constructor() { 17 | } 18 | 19 | ngOnInit() { 20 | } 21 | 22 | } 23 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-text/demo/ui-text-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { UiTextModule } from '../ui-text.module'; 5 | import { UiTextDemoComponent } from './ui-text-demo.component'; 6 | 7 | /** 8 | * @demo 9 | */ 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | FormsModule, 14 | UiTextModule, 15 | ], 16 | declarations: [UiTextDemoComponent], 17 | entryComponents: [ 18 | UiTextDemoComponent, 19 | ], 20 | }) 21 | export class UiTextDemoModule { 22 | } 23 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-text/ui-text.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { UiTextComponent } from './ui-text/ui-text.component'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | CommonModule, 9 | FormsModule, 10 | ], 11 | declarations: [ 12 | UiTextComponent, 13 | ], 14 | exports: [ 15 | UiTextComponent, 16 | ], 17 | }) 18 | export class UiTextModule { 19 | } 20 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-text/ui-text.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-text.module'; 2 | export * from './ui-text/ui-text.component'; 3 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-text/ui-text/ui-text.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | background: var(--inputBgColor); 3 | border: 1px solid var(--inputBdColor); 4 | border-radius: var(--borderRadius); 5 | box-sizing: border-box; 6 | color: var(--inputTextColor); 7 | padding: var(--grid) calc(var(--grid) * 2); 8 | transition: var(--transition); 9 | width: 100%; 10 | &:hover { 11 | box-shadow: var(--shadow); 12 | outline: none; 13 | } 14 | &:focus { 15 | border-color: var(--primaryColor); 16 | outline: none; 17 | } 18 | &.-has-errors { 19 | border-color: var(--errorColor); 20 | &:hover, &:focus { 21 | border-color: var(--errorColor); 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-theme/ui-theme.service.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Inject, Injectable } from '@angular/core'; 3 | 4 | @Injectable({ 5 | providedIn: 'root', 6 | }) 7 | export class UiThemeService { 8 | private _theme: string | null = null; 9 | 10 | constructor( 11 | @Inject(DOCUMENT) private document: any, 12 | ) { 13 | } 14 | 15 | set theme(theme: string | null) { 16 | if (this.document && this.document.documentElement) { 17 | if (this._theme) { 18 | this.document.documentElement.classList.remove(`theme-${this._theme}`); 19 | } 20 | if (theme) { 21 | this.document.documentElement.classList.add(`theme-${theme}`); 22 | this._theme = theme; 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-theme/ui-theme.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-theme.service'; 2 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-toggle/demo/ui-toggle-demo.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngx-kit/sula/58a048c9ff8828e2b436f816c41bc04d37334abd/projects/ui/src/lib/ui-toggle/demo/ui-toggle-demo.component.scss -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-toggle/demo/ui-toggle-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | templateUrl: './ui-toggle-demo.component.html', 8 | styleUrls: ['./ui-toggle-demo.component.scss'], 9 | }) 10 | export class UiToggleDemoComponent implements OnInit { 11 | 12 | toggleModel = false; 13 | toggleModel2 = true; 14 | toggleModel3 = false; 15 | toggleModel4 = false; 16 | toggleModel5 = false; 17 | toggleModel6 = false; 18 | toggleModel7 = false; 19 | toggleModel8 = true; 20 | 21 | 22 | constructor() { 23 | } 24 | 25 | ngOnInit() { 26 | } 27 | 28 | } 29 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-toggle/demo/ui-toggle-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { UiToggleModule } from '../ui-toggle.module'; 5 | import { UiToggleDemoComponent } from './ui-toggle-demo.component'; 6 | 7 | /** 8 | * @demo 9 | */ 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | FormsModule, 14 | UiToggleModule, 15 | ], 16 | declarations: [UiToggleDemoComponent], 17 | entryComponents: [ 18 | UiToggleDemoComponent, 19 | ], 20 | }) 21 | export class UiToggleDemoModule { 22 | } 23 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-toggle/ui-toggle.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { UiToggleComponent } from './ui-toggle/ui-toggle.component'; 5 | import { KitClassModule } from '@ngx-kit/core'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | FormsModule, 11 | KitClassModule, 12 | ], 13 | declarations: [ 14 | UiToggleComponent, 15 | ], 16 | exports: [ 17 | UiToggleComponent, 18 | ], 19 | }) 20 | export class UiToggleModule { 21 | } 22 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-toggle/ui-toggle.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-toggle.module'; 2 | export * from './ui-toggle/ui-toggle.component'; 3 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-toggle/ui-toggle/ui-toggle.component.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tooltip/demo/ui-tooltip-demo.component.scss: -------------------------------------------------------------------------------- 1 | button { 2 | margin: 0 var(--grid) var(--grid) 0; 3 | } 4 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tooltip/demo/ui-tooltip-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | selector: 'ui-ui-tooltip-demo', 8 | templateUrl: './ui-tooltip-demo.component.html', 9 | styleUrls: ['./ui-tooltip-demo.component.scss'] 10 | }) 11 | export class UiTooltipDemoComponent implements OnInit { 12 | 13 | constructor() { } 14 | 15 | ngOnInit() { 16 | } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tooltip/demo/ui-tooltip-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiButtonModule } from 'ui'; 4 | import { UiTooltipModule } from '../ui-tooltip.module'; 5 | import { UiTooltipDemoComponent } from './ui-tooltip-demo.component'; 6 | 7 | /** 8 | * @demo 9 | */ 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | UiTooltipModule, 14 | UiButtonModule, 15 | ], 16 | declarations: [UiTooltipDemoComponent], 17 | entryComponents: [ 18 | UiTooltipDemoComponent, 19 | ], 20 | }) 21 | export class UiTooltipDemoModule { 22 | } 23 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tooltip/meta.ts: -------------------------------------------------------------------------------- 1 | import { KitPinPosition } from '@ngx-kit/core'; 2 | 3 | export type UiTooltipColors = 'default' | 'primary'; 4 | 5 | export interface UiTooltipOptions { 6 | color?: UiTooltipColors; 7 | position?: KitPinPosition; 8 | } 9 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tooltip/ui-tooltip-view/ui-tooltip-view.component.html: -------------------------------------------------------------------------------- 1 |
5 | 7 | {{ content }} 8 | 9 |
10 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tooltip/ui-tooltip-view/ui-tooltip-view.component.scss: -------------------------------------------------------------------------------- 1 | span { 2 | --offset: 2px; 3 | background: var(--altPanelBgColor); 4 | border-radius: var(--borderRadius); 5 | box-shadow: var(--shadow); 6 | color: var(--altPanelTextColor); 7 | padding: calc(var(--grid) / 2) var(--grid); 8 | &.color { 9 | &-primary { 10 | background: var(--primaryColor); 11 | } 12 | &-error { 13 | background: var(--errorColor); 14 | } 15 | &-success { 16 | background: var(--successColor); 17 | } 18 | &-warning { 19 | background: var(--warningColor); 20 | } 21 | &-info { 22 | background: var(--infoColor); 23 | } 24 | } 25 | &.position { 26 | &-top-center, &-top-left, &-top-right { 27 | margin-bottom: var(--offset); 28 | } 29 | &-right-center, &-right-top, &-right-bottom { 30 | margin-left: var(--offset); 31 | } 32 | &-bottom-center, &-bottom-left, &-bottom-right { 33 | margin-top: var(--offset); 34 | } 35 | &-left-center, &-left-top, &-left-bottom { 36 | margin-right: var(--offset); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tooltip/ui-tooltip-view/ui-tooltip-view.component.ts: -------------------------------------------------------------------------------- 1 | import { animate, animateChild, query, style, transition, trigger } from '@angular/animations'; 2 | import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; 3 | import { KitClassService, KitPinPosition } from '@ngx-kit/core'; 4 | import { UiTooltipColors } from '../meta'; 5 | 6 | @Component({ 7 | selector: 'ui-tooltip-view', 8 | templateUrl: './ui-tooltip-view.component.html', 9 | styleUrls: ['./ui-tooltip-view.component.scss'], 10 | changeDetection: ChangeDetectionStrategy.OnPush, 11 | providers: [ 12 | KitClassService, 13 | ], 14 | animations: [ 15 | trigger('host', [ 16 | transition(':enter, :leave', [ 17 | query('@*', animateChild(), {optional: true}), 18 | ]), 19 | ]), 20 | trigger('fade', [ 21 | transition(':enter', [ 22 | style({opacity: 0}), 23 | animate('150ms ease-out', style({opacity: 1})), 24 | ]), 25 | transition(':leave', [ 26 | style({opacity: 1}), 27 | animate('150ms ease-out', style({opacity: 0})), 28 | ]), 29 | ]), 30 | ], 31 | }) 32 | export class UiTooltipViewComponent { 33 | @Input() anchorEl: any; 34 | 35 | @Input() color: UiTooltipColors = 'default'; 36 | 37 | @Input() content: string; 38 | 39 | @HostBinding('@host') hostTrigger = true; 40 | 41 | @Input() position: KitPinPosition = 'top'; 42 | } 43 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tooltip/ui-tooltip.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { KitClassModule, KitOverlayModule, KitPositionModule } from '@ngx-kit/core'; 4 | import { UiTooltipViewComponent } from './ui-tooltip-view/ui-tooltip-view.component'; 5 | import { UiTooltipDirective } from './ui-tooltip/ui-tooltip.directive'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | KitOverlayModule, 11 | KitClassModule, 12 | KitPositionModule, 13 | ], 14 | declarations: [ 15 | UiTooltipDirective, 16 | UiTooltipViewComponent, 17 | ], 18 | exports: [ 19 | UiTooltipDirective, 20 | ], 21 | entryComponents: [ 22 | UiTooltipViewComponent, 23 | ], 24 | }) 25 | export class UiTooltipModule { 26 | } 27 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-tooltip/ui-tooltip.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-tooltip.module'; 2 | export * from './ui-tooltip/ui-tooltip.directive'; 3 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-vertical-menu/demo/ui-vertical-menu-demo.component.scss: -------------------------------------------------------------------------------- 1 | ui-vertical-menu{ 2 | //max-width: 350px; 3 | } 4 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-vertical-menu/demo/ui-vertical-menu-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | /** 4 | * @demo 5 | */ 6 | @Component({ 7 | templateUrl: './ui-vertical-menu-demo.component.html', 8 | styleUrls: ['./ui-vertical-menu-demo.component.scss'], 9 | }) 10 | export class UiVerticalMenuDemoComponent { 11 | } 12 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-vertical-menu/demo/ui-vertical-menu-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { UiVerticalMenuModule } from 'ui'; 4 | import { UiVerticalMenuDemoComponent } from './ui-vertical-menu-demo.component'; 5 | 6 | /** 7 | * @demo 8 | */ 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | UiVerticalMenuModule, 13 | ], 14 | declarations: [ 15 | UiVerticalMenuDemoComponent, 16 | ], 17 | entryComponents: [ 18 | UiVerticalMenuDemoComponent, 19 | ], 20 | }) 21 | export class UiVerticalMenuDemoModule { 22 | } 23 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-vertical-menu/ui-vertical-menu-group/ui-vertical-menu-group.component.html: -------------------------------------------------------------------------------- 1 |
5 | 6 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-vertical-menu/ui-vertical-menu-group/ui-vertical-menu-group.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | margin: calc(var(--grid) / 2) 0; 4 | } 5 | 6 | .title { 7 | cursor: pointer; 8 | display: flex; 9 | flex-direction: row; 10 | font-weight: 600; 11 | padding: calc(var(--grid) * 2); 12 | .wrapper { 13 | flex-grow: 1; 14 | } 15 | .arrow { 16 | background: transparent; 17 | border: 0; 18 | color: var(--mainTextColor); 19 | cursor: pointer; 20 | outline: none; 21 | } 22 | &.-collapsible { 23 | cursor: default; 24 | &:hover { 25 | background: var(--toTextColor1); 26 | border-radius: var(--borderRadius); 27 | transition: all var(--transitionSlow) linear; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-vertical-menu/ui-vertical-menu-item/ui-vertical-menu-item.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | color: inherit; 3 | font-weight: 600; 4 | cursor: pointer; 5 | display: block; 6 | padding: calc(var(--grid) * 2); 7 | text-decoration: none; 8 | &.-active { 9 | background: var(--primaryColor); 10 | border-radius: var(--borderRadius); 11 | color: var(--whiteColor); 12 | transition: all var(--transitionSlow) linear; 13 | &:hover{ 14 | background: var(--primaryColor); 15 | } 16 | } 17 | &:hover{ 18 | background: var(--toTextColor1); 19 | border-radius: var(--borderRadius); 20 | transition: all var(--transitionSlow) linear; 21 | } 22 | } 23 | 24 | :host-context(ui-vertical-menu-group) { 25 | color: inherit; 26 | font-weight: 400; 27 | margin: calc(var(--grid) / 2) 0; 28 | padding: var(--grid) calc(var(--grid) * 2); 29 | } 30 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-vertical-menu/ui-vertical-menu-item/ui-vertical-menu-item.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input, } from '@angular/core'; 2 | import { KitCollapseItemService } from '@ngx-kit/core'; 3 | 4 | @Component({ 5 | selector: 'ui-vertical-menu-item,a[uiVerticalMenuItem]', 6 | template: '', 7 | styleUrls: ['./ui-vertical-menu-item.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | providers: [ 10 | KitCollapseItemService, 11 | ], 12 | }) 13 | export class UiVerticalMenuItemComponent { 14 | @Input() uiVerticalMenuItem: void; 15 | } 16 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-vertical-menu/ui-vertical-menu-sub/ui-vertical-menu-sub.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | overflow: hidden; 4 | } 5 | 6 | .wrapper { 7 | margin-left: calc(var(--grid) * 3); 8 | } 9 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-vertical-menu/ui-vertical-menu-sub/ui-vertical-menu-sub.component.ts: -------------------------------------------------------------------------------- 1 | import { animate, style, transition, trigger } from '@angular/animations'; 2 | import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'ui-vertical-menu-sub', 6 | template: ` 7 |
8 | 9 |
10 | `, 11 | styleUrls: ['./ui-vertical-menu-sub.component.scss'], 12 | changeDetection: ChangeDetectionStrategy.OnPush, 13 | animations: [ 14 | trigger('collapse', [ 15 | transition(':enter', [ 16 | style({height: 0}), 17 | animate('200ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({height: '*'})), 18 | ]), 19 | transition(':leave', [ 20 | style({height: '*'}), 21 | animate('200ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({height: 0})), 22 | ]), 23 | ]), 24 | ], 25 | }) 26 | export class UiVerticalMenuSubComponent { 27 | @HostBinding('@collapse') collapseTrigger = true; 28 | 29 | @Input() uiVerticalMenuSub: void; 30 | } 31 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-vertical-menu/ui-vertical-menu.ts: -------------------------------------------------------------------------------- 1 | export * from './ui-vertical-menu/ui-vertical-menu.component'; 2 | export * from './ui-vertical-menu-item/ui-vertical-menu-item.component'; 3 | export * from './ui-vertical-menu-group/ui-vertical-menu-group.component'; 4 | export * from './ui-vertical-menu-sub/ui-vertical-menu-sub.component'; 5 | export * from './ui-vertical-menu.module'; 6 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-vertical-menu/ui-vertical-menu/ui-vertical-menu.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | box-sizing: border-box; 3 | display: block; 4 | padding: var(--grid); 5 | width: 100%; 6 | } 7 | -------------------------------------------------------------------------------- /projects/ui/src/lib/ui-vertical-menu/ui-vertical-menu/ui-vertical-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges, } from '@angular/core'; 2 | import { KitCollapseHostService } from '@ngx-kit/core'; 3 | 4 | @Component({ 5 | selector: 'ui-vertical-menu', 6 | template: '', 7 | styleUrls: ['./ui-vertical-menu.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | providers: [ 10 | KitCollapseHostService, 11 | ], 12 | }) 13 | export class UiVerticalMenuComponent implements OnInit, OnChanges { 14 | /** 15 | * Allow few panels open at a time. 16 | */ 17 | @Input() multiple = false; 18 | 19 | constructor(private host: KitCollapseHostService) { 20 | } 21 | 22 | ngOnChanges(changes: SimpleChanges) { 23 | if (changes['multiple']) { 24 | this.host.multiple = this.multiple; 25 | } 26 | } 27 | 28 | ngOnInit() { 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /projects/ui/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/ui-accordion/ui-accordion'; 2 | export * from './lib/ui-alert/ui-alert'; 3 | export * from './lib/ui-badge/ui-badge'; 4 | export * from './lib/ui-breadcrumbs/ui-breadcrumbs'; 5 | export * from './lib/ui-button/ui-button'; 6 | export * from './lib/ui-checkbox/ui-checkbox'; 7 | export * from './lib/ui-date-picker/ui-date-picker'; 8 | export * from './lib/ui-dialog/ui-dialog'; 9 | export * from './lib/ui-drawer/ui-drawer'; 10 | export * from './lib/ui-dropdown/ui-dropdown'; 11 | export * from './lib/ui-ext-select/ui-ext-select'; 12 | export * from './lib/ui-file/ui-file'; 13 | export * from './lib/ui-form/ui-form'; 14 | export * from './lib/ui-loading-bar/ui-loading-bar'; 15 | export * from './lib/ui-modal/ui-modal'; 16 | export * from './lib/ui-notification/ui-notification'; 17 | export * from './lib/ui-popup/ui-popup'; 18 | export * from './lib/ui-radio/ui-radio'; 19 | export * from './lib/ui-rating/ui-rating'; 20 | export * from './lib/ui-scroll/ui-scroll'; 21 | export * from './lib/ui-select/ui-select'; 22 | export * from './lib/ui-slider/ui-slider'; 23 | export * from './lib/ui-tabs/ui-tabs'; 24 | export * from './lib/ui-text/ui-text'; 25 | export * from './lib/ui-theme/ui-theme'; 26 | export * from './lib/ui-toggle/ui-toggle'; 27 | export * from './lib/ui-tooltip/ui-tooltip'; 28 | export * from './lib/ui-vertical-menu/ui-vertical-menu'; 29 | -------------------------------------------------------------------------------- /projects/ui/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'core-js/es7/reflect'; 4 | import 'zone.js/dist/zone'; 5 | import 'zone.js/dist/zone-testing'; 6 | import { getTestBed } from '@angular/core/testing'; 7 | import { 8 | BrowserDynamicTestingModule, 9 | platformBrowserDynamicTesting 10 | } from '@angular/platform-browser-dynamic/testing'; 11 | 12 | declare const require: any; 13 | 14 | // First, initialize the Angular testing environment. 15 | getTestBed().initTestEnvironment( 16 | BrowserDynamicTestingModule, 17 | platformBrowserDynamicTesting() 18 | ); 19 | // Then we find all the tests. 20 | const context = require.context('./', true, /\.spec\.ts$/); 21 | // And load the modules. 22 | context.keys().map(context); 23 | -------------------------------------------------------------------------------- /projects/ui/src/themes/dark.css: -------------------------------------------------------------------------------- 1 | .theme-dark { 2 | /* Shadows */ 3 | --shadow: 0 9px 30px 0 rgba(6, 8, 10, 0.4); 4 | --smallShadow: 0 2px 6px 0 rgba(11, 14, 17, 0.55); 5 | 6 | /* Main colors */ 7 | --whiteColor: #ffffff; 8 | --mainBgColor: #34363f; 9 | --mainBdColor: #4b4e5b; 10 | --mainTextColor: #f2f2f2; 11 | --mainTextLightColor: #a3a3a3; 12 | --mainHoverBgColor: #444652; 13 | --mainHoverTextColor: #f2f2f2; 14 | 15 | /* Trans colors */ 16 | --toBackgroundColor1: rgba(0, 0, 0, .25); 17 | --toBackgroundColor2: rgba(0, 0, 0, .45); 18 | --toTextColor1: rgba(230, 230, 230, .1); 19 | --toTextColor2: rgba(230, 230, 230, .2); 20 | 21 | /* Header colors */ 22 | --headerBgColor: #1e2025; 23 | --headerTextColor: var(--mainTextColor); 24 | 25 | /* Navigation panel colors */ 26 | --navBgColor: #2b2d34; 27 | --navTextColor: var(--mainTextColor); 28 | 29 | /* Panels colors */ 30 | --panelBgColor: #393b45; 31 | --panelBdColor: #24252b; 32 | --panelTextColor: var(--mainTextColor); 33 | 34 | /* Alt panels colors (notif, tooltip..) */ 35 | --altPanelBgColor: #0d0e14; 36 | --altPanelTextColor: #ffffff; 37 | 38 | /* Input elements colors */ 39 | --inputBgColor: #494b54; 40 | --inputBdColor: #515462; 41 | --inputTextColor: var(--mainTextColor); 42 | 43 | /* Scroll colors */ 44 | --scrollBgColor: #34363f; 45 | --scrollBarColor: #5c6274; 46 | } 47 | -------------------------------------------------------------------------------- /projects/ui/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/lib", 5 | "target": "es2015", 6 | "module": "es2015", 7 | "moduleResolution": "node", 8 | "declaration": true, 9 | "sourceMap": true, 10 | "inlineSources": true, 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "importHelpers": true, 14 | "types": [], 15 | "lib": [ 16 | "dom", 17 | "es2015" 18 | ] 19 | }, 20 | "angularCompilerOptions": { 21 | "annotateForClosureCompiler": true, 22 | "skipTemplateCodegen": true, 23 | "strictMetadataEmit": true, 24 | "fullTemplateTypeCheck": true, 25 | "strictInjectionParameters": true, 26 | "flatModuleId": "AUTOGENERATED", 27 | "flatModuleOutFile": "AUTOGENERATED" 28 | }, 29 | "exclude": [ 30 | "src/test.ts", 31 | "**/*.spec.ts" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /projects/ui/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /projects/ui/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "ui", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "ui", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "moduleResolution": "node", 9 | "emitDecoratorMetadata": true, 10 | "experimentalDecorators": true, 11 | "target": "es5", 12 | "typeRoots": [ 13 | "node_modules/@types" 14 | ], 15 | "lib": [ 16 | "es2017", 17 | "dom" 18 | ], 19 | "paths": { 20 | "ui": ["./projects/ui"] 21 | } 22 | } 23 | } 24 | --------------------------------------------------------------------------------