diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index ae99b8c..3862bcf 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -2,9 +2,9 @@ Please check if your PR fulfills the following requirements: -- [ ] The commit message follows our guidelines: https://github.com/JsDaddy/ngx-loader-indicator/blob/develop/CONTRIBUTING.md#commit -- [ ] Tests for the changes have been added (for bug fixes / features) -- [ ] Docs have been added / updated (for bug fixes / features) +- [ ] The commit message follows our guidelines: https://github.com/JsDaddy/ngx-loader-indicator/blob/develop/CONTRIBUTING.md#commit +- [ ] Tests for the changes have been added (for bug fixes / features) +- [ ] Docs have been added / updated (for bug fixes / features) ## PR Type @@ -12,14 +12,14 @@ What kind of change does this PR introduce? -- [ ] Bugfix -- [ ] Feature -- [ ] Code style update (formatting, local variables) -- [ ] Refactoring (no functional changes, no api changes) -- [ ] Build related changes -- [ ] CI related changes -- [ ] Documentation content changes -- [ ] Other... Please describe: +- [ ] Bugfix +- [ ] Feature +- [ ] Code style update (formatting, local variables) +- [ ] Refactoring (no functional changes, no api changes) +- [ ] Build related changes +- [ ] CI related changes +- [ ] Documentation content changes +- [ ] Other... Please describe: ## What is the current behavior? @@ -31,8 +31,8 @@ Issue Number: N/A ## Does this PR introduce a breaking change? -- [ ] Yes -- [ ] No +- [ ] Yes +- [ ] No diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index 4125f7b..5ece7d1 100644 --- a/.github/workflows/gh-pages.yml +++ b/.github/workflows/gh-pages.yml @@ -19,7 +19,7 @@ jobs: with: node-version: 20 - - uses: oven-sh/setup-bun@v1 + - uses: oven-sh/setup-bun@v2 with: bun-version: latest @@ -45,7 +45,7 @@ jobs: bun run build - name: Deploy demo - uses: peaceiris/actions-gh-pages@v3 + uses: peaceiris/actions-gh-pages@v4 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist/angular-loader/browser @@ -59,7 +59,7 @@ jobs: steps: - name: Post to a Slack channel id: slack - uses: slackapi/slack-github-action@v1.26.0 + uses: slackapi/slack-github-action@v1.27.0 with: channel-id: 'deployments' payload: | diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 47a0b05..e4e9af7 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -1,4 +1,4 @@ -name: Publish npm +name: Publish bun on: push: @@ -12,7 +12,7 @@ jobs: - uses: actions/checkout@v4 with: submodules: true - - uses: oven-sh/setup-bun@v1 + - uses: oven-sh/setup-bun@v2 with: bun-version: latest - uses: actions/setup-node@v4 diff --git a/.github/workflows/quality-check.yml b/.github/workflows/quality-check.yml index b870bed..4491a06 100644 --- a/.github/workflows/quality-check.yml +++ b/.github/workflows/quality-check.yml @@ -22,7 +22,7 @@ jobs: with: submodules: true ref: ${{ env.REF }} - - uses: oven-sh/setup-bun@v1 + - uses: oven-sh/setup-bun@v2 with: bun-version: latest - uses: actions/setup-node@v4 diff --git a/.lintstagedrc b/.lintstagedrc index d286315..118fbe6 100644 --- a/.lintstagedrc +++ b/.lintstagedrc @@ -1,7 +1,7 @@ { "*.{ts,js,json}": [ "eslint --report-unused-disable-directives --max-warnings 0 --fix", - "prettier --write" + "prettier . --write" ], "*.scss": "stylelint --fix" -} \ No newline at end of file +} diff --git a/.releaserc.yaml b/.releaserc.yaml index f46f35d..be4ca6c 100644 --- a/.releaserc.yaml +++ b/.releaserc.yaml @@ -1,7 +1,7 @@ branches: - - develop + - develop plugins: - - '@semantic-release/commit-analyzer' - - '@semantic-release/github' - - 'semantic-release-export-data' \ No newline at end of file + - '@semantic-release/commit-analyzer' + - '@semantic-release/github' + - 'semantic-release-export-data' diff --git a/.stylelintignore b/.stylelintignore index b6b4e18..5ee26d2 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -3,6 +3,7 @@ /tmp /out-tsc /bazel-out +/src/styles.scss # Node /node_modules diff --git a/.stylelintrc.json b/.stylelintrc.json index d8e7ccd..ef12825 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -3,6 +3,9 @@ "customSyntax": "postcss-scss", "plugins": ["stylelint-prettier"], "rules": { + "no-empty-source": null, + "scss/comment-no-empty": null, + "no-descending-specificity": null, "prettier/prettier": true, "selector-type-no-unknown": [ true, diff --git a/CHANGELOG.md b/CHANGELOG.md index df64037..31ba2db 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,8 +1,17 @@ +# 18.0.4(2024-10-25) + +### Feature + +- add tailwind +- change interface to type, remove prefix "I" +- update dependencies +- add ESLint strict rules + # 17.3.2(2024-03-29) ### Feature -- change decorators to signals +- change decorators to signals @@ -10,41 +19,39 @@ ### Feature -- update ng 17.x +- update ng 17.x - # 16.0.1(2023-10-03) ### Feature -- update dependencies +- update dependencies # 16.0.0(2023-07-07) ### Feature -- update ng 16.x +- update ng 16.x # 15.0.0(2022-26-12) ### Feature -- update to ng15 - +- update to ng15 + -# [6.0.0 base functionality] (2018-05-17) +# [6.0.0 base functionality] (2018-05-17) + # [6.1.0 base functionality] (2018-05-21) - +

Custom styles(background, color, size) for image and wrapper

Custom animations for image rotation

- - diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 120ff15..1d1a756 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -8,16 +8,16 @@ Please format code and markup in your issue using [github markdown](https://help ## Contributing to Source Code (Pull Requests) -- If your PR changes any behavior or fixes an issue, it should have an associated test. -- New features should be general and as simple as possible. -- Breaking changes should be avoided if possible. -- All pull requests require review. No PR will be merged without a comment from a team member stating LGTM (Looks good to me). +- If your PR changes any behavior or fixes an issue, it should have an associated test. +- New features should be general and as simple as possible. +- Breaking changes should be avoided if possible. +- All pull requests require review. No PR will be merged without a comment from a team member stating LGTM (Looks good to me). ## Protractor specific rules -- JavaScript style should generally follow the [Google JS style guide](https://google.github.io/styleguide/javascriptguide.xml). -- Document public methods with jsdoc. -- Be consistent with the code around you! +- JavaScript style should generally follow the [Google JS style guide](https://google.github.io/styleguide/javascriptguide.xml). +- Document public methods with jsdoc. +- Be consistent with the code around you! ## Commit Messages diff --git a/README.md b/README.md index e766efa..a3ae0c9 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,9 @@ You can also try our NGX MASK [check](https://www.npmjs.com/package/ngx-mask) it. You can also try our NGX COPYPASTE [check](https://www.npmjs.com/package/ngx-copypaste) it. -### You can try live [demo](https://jsdaddy.github.io/ngx-loader-indicator/) with examples. + +### You can try live [demo](https://jsdaddy.github.io/ngx-loader-indicator/) with examples. + ## Installing ```bash @@ -39,7 +41,7 @@ bootstrapApplication(AppComponent, { (...) ], }).catch((err) => console.error(err)); -```` +``` or configure for feature with `provideNgxLoaderIndicator` and import standalone directive `NgxLoaderIndicatorDirective` @@ -68,7 +70,7 @@ or configure for feature with `provideNgxLoaderIndicator` and import standalone ], }) export class MyFeatureComponent {} -```` +``` ## Quickstart if ngx-loader-indicator version < 15.0.0 @@ -93,25 +95,26 @@ import {NgxLoaderIndicatorModule} from 'ngx-loader-indicator' ### Usage ```html -
Content
+
Content
``` #### Examples ```html
-

Login

- - - +

Login

+ + +
``` ## Options -You can define your custom options +You can define your custom options ### custom img (string) and colors + ```typescript { img: string, @@ -123,6 +126,7 @@ You can define your custom options ``` ### custom wrapper layout colors + ```typescript { loaderStyles: { @@ -132,6 +136,7 @@ You can define your custom options ``` ### animations options for image rotation + ```typescript rotate: { delay?: number; @@ -146,8 +151,8 @@ You can define your custom options }, ``` - ### Usage + ```typescript import {NgxLoaderIndicatorModule} from 'ngx-loader-indicator' diff --git a/bun.lockb b/bun.lockb index 830817f..66e3f28 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/eslint.config.js b/eslint.config.js index 8847f4a..cf129ef 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -48,12 +48,17 @@ module.exports = tseslint.config( // and treated as if they are HTML files (and therefore have the .html config below applied to them) processor: angular.processInlineTemplates, // Override specific rules for TypeScript files (these will take priority over the extended configs above) + languageOptions: { + parserOptions: { + project: ['./tsconfig.eslint.json'], + }, + }, rules: { '@angular-eslint/directive-selector': [ 'error', { type: 'attribute', - prefix: ['ngxLoaderIndicator','jsdaddy'], + prefix: ['ngxLoaderIndicator', 'jsdaddy'], style: 'camelCase', }, ], @@ -65,6 +70,93 @@ module.exports = tseslint.config( style: 'kebab-case', }, ], + '@typescript-eslint/consistent-type-definitions': ['error', 'type'], + '@typescript-eslint/ban-ts-comment': ['error', { minimumDescriptionLength: 10 }], + '@typescript-eslint/no-array-constructor': 'error', + '@typescript-eslint/no-duplicate-enum-values': 'error', + '@typescript-eslint/no-empty-object-type': 'error', + '@typescript-eslint/no-extra-non-null-assertion': 'error', + '@typescript-eslint/no-misused-new': 'error', + '@typescript-eslint/no-namespace': 'error', + '@typescript-eslint/no-non-null-asserted-nullish-coalescing': 'error', + '@typescript-eslint/no-non-null-asserted-optional-chain': 'error', + '@typescript-eslint/no-non-null-assertion': 'error', + '@typescript-eslint/no-this-alias': 'error', + '@typescript-eslint/no-unnecessary-type-constraint': 'error', + '@typescript-eslint/no-unsafe-declaration-merging': 'error', + '@typescript-eslint/no-unused-expressions': 'error', + '@typescript-eslint/no-useless-constructor': 'error', + '@typescript-eslint/no-wrapper-object-types': 'error', + '@typescript-eslint/prefer-as-const': 'error', + '@typescript-eslint/prefer-namespace-keyword': 'error', + '@typescript-eslint/triple-slash-reference': 'error', + 'no-array-constructor': 'off', + 'no-useless-constructor': 'off', + 'no-return-await': 'error', + 'no-useless-catch': 'error', + 'no-unused-labels': 'error', + 'no-unneeded-ternary': 'error', + 'no-undefined': 'error', + 'no-undef-init': 'error', + 'no-regex-spaces': 'error', + 'no-proto': 'error', + 'no-new-wrappers': 'error', + 'no-unused-private-class-members': 'error', + 'no-invalid-regexp': 'error', + curly: ['error', 'all'], + '@typescript-eslint/restrict-template-expressions': 'error', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/adjacent-overload-signatures': 'error', + 'no-console': ['warn'], + '@typescript-eslint/explicit-member-accessibility': 'error', + '@typescript-eslint/no-inferrable-types': ['error', { ignoreParameters: true }], + 'no-unused-vars': 'off', + 'no-duplicate-imports': 'off', + '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }], + '@typescript-eslint/no-require-imports': 'error', + '@typescript-eslint/no-invalid-void-type': 'error', + '@typescript-eslint/indent': 0, + '@typescript-eslint/member-delimiter-style': 0, + '@typescript-eslint/no-var-requires': 0, + '@typescript-eslint/no-use-before-define': 0, + 'prefer-const': 1, + 'prefer-spread': 1, + 'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }], + '@typescript-eslint/naming-convention': [ + 'error', + { + selector: 'interface', + format: ['PascalCase'], + custom: { + regex: '^I[A-Z]', + match: true, + }, + }, + ], + 'import/no-unresolved': 'off', + 'import/no-extraneous-dependencies': 'off', + 'import/prefer-default-export': 'off', + 'no-underscore-dangle': 'off', + 'class-methods-use-this': 'off', + 'lines-between-class-members': 'off', + 'no-return-assign': 'off', + 'no-param-reassign': [ + 'error', + { + props: false, + }, + ], + '@typescript-eslint/array-type': 'error', + '@typescript-eslint/consistent-type-assertions': [ + 'error', + { + assertionStyle: 'as', + }, + ], + 'no-plusplus': ['off'], + '@typescript-eslint/unbound-method': 'off', + 'import/no-cycle': 'off', + 'import/extensions': 'off', }, }, { diff --git a/package.json b/package.json index a4b3912..4520440 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-loader-indicator", - "version": "18.0.3", + "version": "18.0.4", "description": "The best directive without wrapping your element to additional component", "license": "MIT", "keywords": [ @@ -18,7 +18,7 @@ "build": "ng build angular-loader --base-href /ngx-loader-indicator/ --configuration production", "build:lib": "ng build --configuration production ngx-loader-indicator-lib && bun run copy-libdocs", "copy-libdocs": "cp README.md LICENSE dist/ngx-loader-indicator-lib", - "publish:lib": "cd dist/ngx-loader-indicator-lib && npm publish", + "publish:lib": "cd dist/ngx-loader-indicator-lib && bun publish", "test": "ng test", "test:pre-commit": "ng test --watch=false", "lint": "npx eslint . && bun run lint:scss", @@ -36,61 +36,63 @@ "url": "https://github.com/JsDaddy/ngx-loader-indicator.git" }, "dependencies": { - "@angular/animations": "18.0.6", - "@angular/common": "18.0.6", - "@angular/compiler": "18.0.6", - "@angular/core": "18.0.6", - "@angular/forms": "18.0.6", - "@angular/platform-browser": "18.0.6", - "@angular/platform-browser-dynamic": "18.0.6", - "@angular/router": "^18.0.6", - "core-js": "3.37.1", + "@angular/animations": "18.2.9", + "@angular/common": "18.2.9", + "@angular/compiler": "18.2.9", + "@angular/core": "18.2.9", + "@angular/forms": "18.2.9", + "@angular/platform-browser": "18.2.9", + "@angular/platform-browser-dynamic": "18.2.9", + "@angular/router": "^18.2.9", + "core-js": "3.38.1", "highlight.js": "^11.10.0", "ngx-highlightjs": "^12.0.0", "rxjs": "7.8.1" }, "devDependencies": { - "@angular-devkit/build-angular": "18.0.7", - "@angular-eslint/builder": "18.1.0", - "@angular-eslint/eslint-plugin": "18.1.0", - "@angular-eslint/eslint-plugin-template": "18.1.0", - "@angular-eslint/schematics": "18.1.0", - "@angular-eslint/template-parser": "18.1.0", - "@angular/cli": "18.0.7", - "@angular/compiler-cli": "18.0.6", - "@angular/language-service": "18.0.6", - "@commitlint/cli": "19.3.0", - "@commitlint/config-conventional": "19.2.2", + "@angular-devkit/build-angular": "18.2.10", + "@angular-eslint/builder": "18.4.0", + "@angular-eslint/eslint-plugin": "18.4.0", + "@angular-eslint/eslint-plugin-template": "18.4.0", + "@angular-eslint/schematics": "18.4.0", + "@angular-eslint/template-parser": "18.4.0", + "@angular/cli": "18.2.10", + "@angular/compiler-cli": "18.2.9", + "@angular/language-service": "18.2.9", + "@commitlint/cli": "19.5.0", + "@commitlint/config-conventional": "19.5.0", "@types/jasmine": "5.1.4", "@types/jasminewd2": "2.0.13", - "@types/node": "20.14.10", - "@typescript-eslint/eslint-plugin": "7.15.0", - "@web/test-runner": "^0.18.2", - "angular-eslint": "^18.1.0", - "eslint": "9.6.0", + "@types/node": "22.7.9", + "@typescript-eslint/eslint-plugin": "8.11.0", + "@web/test-runner": "^0.19.0", + "angular-eslint": "^18.4.0", + "eslint": "9.13.0", "eslint-config-prettier": "9.1.0", - "eslint-plugin-import": "2.29.1", - "eslint-plugin-json": "4.0.0", - "eslint-plugin-prettier": "5.1.3", - "jasmine-core": "5.1.2", + "eslint-plugin-import": "2.31.0", + "eslint-plugin-json": "4.0.1", + "eslint-plugin-prettier": "5.2.1", + "jasmine-core": "5.4.0", "jasmine-spec-reporter": "7.0.0", - "lint-staged": "15.2.7", - "ng-packagr": "18.0.0", - "npm-check-updates": "^16.14.20", + "lint-staged": "15.2.10", + "ng-packagr": "18.2.1", + "npm-check-updates": "^17.1.6", "postcss-scss": "4.0.9", - "prettier": "3.3.2", - "puppeteer": "22.12.1", - "semantic-release": "24.0.0", + "prettier": "3.3.3", + "puppeteer": "23.6.0", + "semantic-release": "24.1.3", "semantic-release-export-data": "1.1.0", - "snyk": "^1.1292.1", - "stylelint": "16.6.1", + "snyk": "^1.1294.0", + "stylelint": "16.10.0", "stylelint-config-prettier": "9.0.5", - "stylelint-config-recommended-scss": "14.0.0", - "stylelint-prettier": "5.0.0", + "stylelint-config-recommended-scss": "14.1.0", + "stylelint-prettier": "5.0.2", "ts-node": "10.9.2", - "type-coverage": "^2.29.0", + "type-coverage": "^2.29.7", "typescript": "5.4.5", - "typescript-eslint": "^7.15.0" + "typescript-eslint": "^8.11.0", + "tailwindcss": "^3.4.14", + "bun-types": "^1.1.33" }, "typeCoverage": { "atLeast": 98, diff --git a/projects/ngx-loader-indicator-lib/ng-package.json b/projects/ngx-loader-indicator-lib/ng-package.json index 50da9bd..95cdcb6 100644 --- a/projects/ngx-loader-indicator-lib/ng-package.json +++ b/projects/ngx-loader-indicator-lib/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../dist/ngx-loader-indicator-lib", - "lib": { - "entryFile": "src/public-api.ts" - } -} \ No newline at end of file + "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../dist/ngx-loader-indicator-lib", + "lib": { + "entryFile": "src/public-api.ts" + } +} diff --git a/projects/ngx-loader-indicator-lib/package.json b/projects/ngx-loader-indicator-lib/package.json index 82e4a13..eb5c6a1 100644 --- a/projects/ngx-loader-indicator-lib/package.json +++ b/projects/ngx-loader-indicator-lib/package.json @@ -1,6 +1,6 @@ { "name": "ngx-loader-indicator", - "version": "18.0.3", + "version": "18.0.4", "description": "The best directive without wrapping your element to additional component", "license": "MIT", "keywords": [ diff --git a/projects/ngx-loader-indicator-lib/src/lib/ngx-loader-indicator.config.ts b/projects/ngx-loader-indicator-lib/src/lib/ngx-loader-indicator.config.ts index 4135e23..fb34f3c 100644 --- a/projects/ngx-loader-indicator-lib/src/lib/ngx-loader-indicator.config.ts +++ b/projects/ngx-loader-indicator-lib/src/lib/ngx-loader-indicator.config.ts @@ -1,11 +1,11 @@ import { InjectionToken } from '@angular/core'; -export type IStyles = Record; -export interface IConfig { +export type Styles = Record; +export type Config = { img?: string; - loaderStyles?: IStyles; - imgStyles?: IStyles; - hostStyles?: IStyles; + loaderStyles?: Styles; + imgStyles?: Styles; + hostStyles?: Styles; // TODO AnimationOptions rotate?: { delay?: number; @@ -18,16 +18,16 @@ export interface IConfig { iterationStart?: number; iterations?: number; }; -} +}; -export type optionsConfig = IConfig; +export type optionsConfig = Config; export const NGX_LOADER_INDICATOR_CONFIG = new InjectionToken('config'); export const NEW_CONFIG = new InjectionToken('NEW_CONFIG'); -export const INITIAL_CONFIG = new InjectionToken('INITIAL_CONFIG'); +export const INITIAL_CONFIG = new InjectionToken('INITIAL_CONFIG'); -export const initialConfig: IConfig = { - img: 'data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ibGRzLXNwaW5uZXIiIHdpZHRoPSIzOXB4IiAgaGVpZ2h0PSIzOXB4IiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBzdHlsZT0iYmFja2dyb3VuZDogbm9uZTsiPjxnIHRyYW5zZm9ybT0icm90YXRlKDAgNTAgNTApIj4gIDxyZWN0IHg9IjQ3LjUiIHk9Ii0zLjUiIHJ4PSIwLjk1MDAwMDAwMDAwMDAwMDEiIHJ5PSItMC4wNyIgd2lkdGg9IjUiIGhlaWdodD0iMjciIGZpbGw9IiNGOTc3NTYiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPiAgPC9yZWN0PjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iLTMuNSIgcng9IjAuOTUwMDAwMDAwMDAwMDAwMSIgcnk9Ii0wLjA3IiB3aWR0aD0iNSIgaGVpZ2h0PSIyNyIgZmlsbD0iI0Y5Nzc1NiI+ICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuODMzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSItMy41IiByeD0iMC45NTAwMDAwMDAwMDAwMDAxIiByeT0iLTAuMDciIHdpZHRoPSI1IiBoZWlnaHQ9IjI3IiBmaWxsPSIjRjk3NzU2Ij4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC43NXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDkwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSItMy41IiByeD0iMC45NTAwMDAwMDAwMDAwMDAxIiByeT0iLTAuMDciIHdpZHRoPSI1IiBoZWlnaHQ9IjI3IiBmaWxsPSIjRjk3NzU2Ij4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4gIDwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSItMy41IiByeD0iMC45NTAwMDAwMDAwMDAwMDAxIiByeT0iLTAuMDciIHdpZHRoPSI1IiBoZWlnaHQ9IjI3IiBmaWxsPSIjRjk3NzU2Ij4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC41ODMzMzMzMzMzMzMzMzM0cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4gIDwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSItMy41IiByeD0iMC45NTAwMDAwMDAwMDAwMDAxIiByeT0iLTAuMDciIHdpZHRoPSI1IiBoZWlnaHQ9IjI3IiBmaWxsPSIjRjk3NzU2Ij4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC41cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4gIDwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSItMy41IiByeD0iMC45NTAwMDAwMDAwMDAwMDAxIiByeT0iLTAuMDciIHdpZHRoPSI1IiBoZWlnaHQ9IjI3IiBmaWxsPSIjRjk3NzU2Ij4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4gIDwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjEwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSItMy41IiByeD0iMC45NTAwMDAwMDAwMDAwMDAxIiByeT0iLTAuMDciIHdpZHRoPSI1IiBoZWlnaHQ9IjI3IiBmaWxsPSIjRjk3NzU2Ij4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4zMzMzMzMzMzMzMzMzMzMzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4gIDwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSItMy41IiByeD0iMC45NTAwMDAwMDAwMDAwMDAxIiByeT0iLTAuMDciIHdpZHRoPSI1IiBoZWlnaHQ9IjI3IiBmaWxsPSIjRjk3NzU2Ij4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4yNXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI3MCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iLTMuNSIgcng9IjAuOTUwMDAwMDAwMDAwMDAwMSIgcnk9Ii0wLjA3IiB3aWR0aD0iNSIgaGVpZ2h0PSIyNyIgZmlsbD0iI0Y5Nzc1NiI+ICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPiAgPC9yZWN0PjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMDAgNTAgNTApIj4gIDxyZWN0IHg9IjQ3LjUiIHk9Ii0zLjUiIHJ4PSIwLjk1MDAwMDAwMDAwMDAwMDEiIHJ5PSItMC4wNyIgd2lkdGg9IjUiIGhlaWdodD0iMjciIGZpbGw9IiNGOTc3NTYiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjA4MzMzMzMzMzMzMzMzMzMzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4gIDwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSItMy41IiByeD0iMC45NTAwMDAwMDAwMDAwMDAxIiByeT0iLTAuMDciIHdpZHRoPSI1IiBoZWlnaHQ9IjI3IiBmaWxsPSIjRjk3NzU2Ij4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSIwcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4gIDwvcmVjdD48L2c+PC9zdmc+', +export const initialConfig: Config = { + img: 'data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ibGRzLXNwaW5uZXIiIHdpZHRoPSIzOXB4IiAgaGVpZ2h0PSIzOXB4IiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBzdHlsZT0iYmFja2dyb3VuZDogbm9uZTsiPjxnIHRyYW5zZm9ybT0icm90YXRlKDAgNTAgNTApIj4gIDxyZWN0IHg9IjQ3LjUiIHk9Ii0zLjUiIHJ4PSIwLjk1MDAwMDAwMDAwMDAwMDEiIHJ5PSItMC4wNyIgd2lkdGg9IjUiIGhlaWdodD0iMjciIGZpbGw9IiNGOTc3NTYiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPiAgPC9yZWN0PjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iLTMuNSIgcng9IjAuOTUwMDAwMDAwMDAwMDAwMSIgcnk9Ii0wLjA3IiB3aWR0aD0iNSIgaGVpZ2h0PSIyNyIgZmlsbD0iI0Y5Nzc1NiI+ICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuODMzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSItMy41IiByeD0iMC45NTAwMDAwMDAwMDAwMDAxIiByeT0iLTAuMDciIHdpZHRoPSI1IiBoZWlnaHQ9IjI3IiBmaWxsPSIjRjk3NzU2Ij4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC43NXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDkwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSItMy41IiByeD0iMC45NTAwMDAwMDAwMDAwMDAxIiByeT0iLTAuMDciIHdpZHRoPSI1IiBoZWlnaHQ9IjI3IiBmaWxsPSIjRjk3NzU2Ij4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4gIDwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSItMy41IiByeD0iMC45NTAwMDAwMDAwMDAwMDAxIiByeT0iLTAuMDciIHdpZHRoPSI1IiBoZWlnaHQ9IjI3IiBmaWxsPSIjRjk3NzU2Ij4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC41ODMzMzMzMzMzMzMzMzM0cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4gIDwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSItMy41IiByeD0iMC45NTAwMDAwMDAwMDAwMDAxIiByeT0iLTAuMDciIHdpZHRoPSI1IiBoZWlnaHQ9IjI3IiBmaWxsPSIjRjk3NzU2Ij4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC41cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4gIDwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSItMy41IiByeD0iMC45NTAwMDAwMDAwMDAwMDAxIiByeT0iLTAuMDciIHdpZHRoPSI1IiBoZWlnaHQ9IjI3IiBmaWxsPSIjRjk3NzU2Ij4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4gIDwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjEwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSItMy41IiByeD0iMC45NTAwMDAwMDAwMDAwMDAxIiByeT0iLTAuMDciIHdpZHRoPSI1IiBoZWlnaHQ9IjI3IiBmaWxsPSIjRjk3NzU2Ij4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4zMzMzMzMzMzMzMzMzMzMzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4gIDwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSItMy41IiByeD0iMC45NTAwMDAwMDAwMDAwMDAxIiByeT0iLTAuMDciIHdpZHRoPSI1IiBoZWlnaHQ9IjI3IiBmaWxsPSIjRjk3NzU2Ij4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4yNXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI3MCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iLTMuNSIgcng9IjAuOTUwMDAwMDAwMDAwMDAwMSIgcnk9Ii0wLjA3IiB3aWR0aD0iNSIgaGVpZ2h0PSIyNyIgZmlsbD0iI0Y5Nzc1NiI+ICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPiAgPC9yZWN0PjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMDAgNTAgNTApIj4gIDxyZWN0IHg9IjQ3LjUiIHk9Ii0zLjUiIHJ4PSIwLjk1MDAwMDAwMDAwMDAwMDEiIHJ5PSItMC4wNyIgd2lkdGg9IjUiIGhlaWdodD0iMjciIGZpbGw9IiNGOTc3NTYiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjA4MzMzMzMzMzMzMzMzMzMzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4gIDwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSItMy41IiByeD0iMC45NTAwMDAwMDAwMDAwMDAxIiByeT0iLTAuMDciIHdpZHRoPSI1IiBoZWlnaHQ9IjI3IiBmaWxsPSIjRjk3NzU2Ij4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSIwcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4gIDwvcmVjdD48L2c+PC9zdmc+', loaderStyles: { position: 'absolute', left: '0', diff --git a/projects/ngx-loader-indicator-lib/src/lib/ngx-loader-indicator.directive.ts b/projects/ngx-loader-indicator-lib/src/lib/ngx-loader-indicator.directive.ts index ece5d26..1b43a7f 100644 --- a/projects/ngx-loader-indicator-lib/src/lib/ngx-loader-indicator.directive.ts +++ b/projects/ngx-loader-indicator-lib/src/lib/ngx-loader-indicator.directive.ts @@ -1,12 +1,12 @@ import { Directive, effect, ElementRef, inject, input, Renderer2 } from '@angular/core'; -import { NGX_LOADER_INDICATOR_CONFIG, IConfig } from './ngx-loader-indicator.config'; +import { NGX_LOADER_INDICATOR_CONFIG, Config } from './ngx-loader-indicator.config'; @Directive({ selector: '[ngxLoaderIndicator]', standalone: true, }) export class NgxLoaderIndicatorDirective { - private readonly _config = inject(NGX_LOADER_INDICATOR_CONFIG); + private readonly _config = inject(NGX_LOADER_INDICATOR_CONFIG); private readonly _el = inject(ElementRef); @@ -21,13 +21,15 @@ export class NgxLoaderIndicatorDirective { } private processValue(value: boolean) { if (!value) { - this.loaderEl ? this._setStyles(this.loaderEl, { display: 'none' }) : null; + if (this.loaderEl) { + this._setStyles(this.loaderEl, { display: 'none' }); + } return; } const { rotate, hostStyles, loaderStyles, imgStyles, img } = this._config; this.loaderEl = this._renderer.createElement('div'); - const imgEl = this._renderer.createElement('img'); + const imgEl = this._renderer.createElement('img'); imgEl.animate([{ transform: 'rotate(360deg)' }, { transform: 'rotate(0deg)' }], rotate); diff --git a/projects/ngx-loader-indicator-lib/src/lib/ngx-loader-indicator.providers.ts b/projects/ngx-loader-indicator-lib/src/lib/ngx-loader-indicator.providers.ts index 26b69fa..ae51641 100644 --- a/projects/ngx-loader-indicator-lib/src/lib/ngx-loader-indicator.providers.ts +++ b/projects/ngx-loader-indicator-lib/src/lib/ngx-loader-indicator.providers.ts @@ -1,7 +1,7 @@ import { EnvironmentProviders, makeEnvironmentProviders, Provider } from '@angular/core'; import { NGX_LOADER_INDICATOR_CONFIG, - IConfig, + Config, INITIAL_CONFIG, initialConfig, NEW_CONFIG, @@ -12,11 +12,11 @@ export function _configFactory( initConfig: optionsConfig, configValue: optionsConfig ): optionsConfig { - const loaderStyles: IConfig['loaderStyles'] | null = configValue + const loaderStyles: Config['loaderStyles'] | null = configValue ? configValue.loaderStyles : null; - const imgStyles: IConfig['imgStyles'] | null = configValue ? configValue.imgStyles : null; - const rotate: IConfig['rotate'] | null = configValue ? configValue.rotate : null; + const imgStyles: Config['imgStyles'] | null = configValue ? configValue.imgStyles : null; + const rotate: Config['rotate'] | null = configValue ? configValue.rotate : null; return { ...initConfig, diff --git a/projects/ngx-loader-indicator-lib/tsconfig.lib.json b/projects/ngx-loader-indicator-lib/tsconfig.lib.json index b8954e9..96fc413 100644 --- a/projects/ngx-loader-indicator-lib/tsconfig.lib.json +++ b/projects/ngx-loader-indicator-lib/tsconfig.lib.json @@ -1,13 +1,11 @@ { - "extends": "../../tsconfig.json", - "compilerOptions": { - "outDir": "../../out-tsc/lib", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": [ - "**/*.spec.ts" - ] + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/lib", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["**/*.spec.ts"] } diff --git a/projects/ngx-loader-indicator-lib/tsconfig.spec.json b/projects/ngx-loader-indicator-lib/tsconfig.spec.json index eae9b9a..ca63dfe 100644 --- a/projects/ngx-loader-indicator-lib/tsconfig.spec.json +++ b/projects/ngx-loader-indicator-lib/tsconfig.spec.json @@ -1,13 +1,8 @@ { - "extends": "../../tsconfig.json", - "compilerOptions": { - "outDir": "../../out-tsc/spec", - "types": [ - "jasmine" - ] - }, - "include": [ - "**/*.spec.ts", - "**/*.d.ts" - ] + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/spec", + "types": ["jasmine"] + }, + "include": ["**/*.spec.ts", "**/*.d.ts"] } diff --git a/src/app/app.component.html b/src/app/app.component.html index 22631de..38bed6f 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,10 +1,10 @@ -
+
-
-
+
+
-
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index c8bae85..06ed89a 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,23 +1,3 @@ -@import '../libraries/styles/media-breakpoints'; - -.content-wrapper { - .mask-wrap { - height: calc(100% - 64px); - overflow: auto; - .right-section { - width: 100%; - padding-left: 310px; - } - } -} - -@media screen and (max-width: $desktopWidth) { - .content-wrapper { - .mask-wrap { - .right-section { - padding: 0; - margin-top: 55px; - } - } - } +:host { + @apply block h-full; } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 53f4437..0e4272c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -4,12 +4,12 @@ import { AccordionComponent } from '@open-source/accordion/accordion.component'; import { SubHeaderComponent } from '@open-source//sub-header/sub-header.component'; import { LinkPath } from '@libraries/link/link.path'; import { FooterComponent } from '@open-source/footer/footer.component'; -import { IListItem } from '@open-source/accordion/content.interfaces'; import { lists } from '../assets/content/lists'; -import { ICard } from './cards/cards.interface'; +import { CardItem } from './cards/cards.type'; import { Card } from '../assets/content/card'; import { CardsComponent } from './cards/cards.component'; import { VersionToken } from '@libraries/version/version.token'; +import { ListItem } from '@open-source/accordion/content.types'; declare const VERSION: string; @Component({ @@ -28,8 +28,8 @@ declare const VERSION: string; providers: [{ provide: VersionToken, useValue: VERSION }], }) export class AppComponent { - public readonly card: ICard[] = Card; - public readonly lists: IListItem[] = lists; + public readonly card: CardItem[] = Card; + public readonly lists: ListItem[] = lists; public readonly githubMaskLink = LinkPath.NGX_LOADER; public readonly title = 'Ngx-Loader Indicator'; public readonly subtitle = diff --git a/src/app/cards/cards.component.html b/src/app/cards/cards.component.html index bb2d74f..ef5ddca 100644 --- a/src/app/cards/cards.component.html +++ b/src/app/cards/cards.component.html @@ -1,44 +1,51 @@ -
- @for (card of cardDocs(); track card.id) { -
-
- {{ card.header }} -
-
-
-
- Hand with box - Usage -
- Source code -
- @if (card.customCodeProvider) { - 
-                  
-                  Input vector
-
- } - 
-                
-                Input vector
-
-
+@for (card of cardDocs(); track card.id) { +
+
+ {{ card.header }} +
+
+
+
+ Hand with box + Usage
-
-
- @if (card.cardType) { - - } - @if (!card.cardType) { - - } -
+ Source code +
+ @if (card.customCodeProvider) { + 
+                             
+                             Input vector
+
+ } + 
+                         
+                         Input vector
+
+
+
+
+
+ @if (card.cardType) { + + } + @if (!card.cardType) { + + }
- } -
+
+} diff --git a/src/app/cards/cards.component.scss b/src/app/cards/cards.component.scss index 651e0c8..5c149a1 100644 --- a/src/app/cards/cards.component.scss +++ b/src/app/cards/cards.component.scss @@ -1,112 +1,3 @@ -@import '../../libraries/styles/media-breakpoints'; -@import '../../libraries/styles/general'; - -.content { - gap: 16px; - padding: 16px; - border-top: 1px solid rgba(25, 25, 25, 0.05); - box-sizing: border-box; - .yellow { - &.card { - background: rgba(255, 214, 77, 0.05); - border: 1px solid var(--yellow); - } - } - .card { - padding: 10px; - gap: 10px; - background: rgba(25, 25, 25, 0.02); - border-radius: 15px; - .mr-title { - margin: 10px 0 10px 26px; - } - .cards-block { - scroll-margin-top: 185px; - .light-card { - flex: 55%; - border-radius: 10px; - .light-title { - margin-bottom: 20px; - span { - margin-left: 10px; - font-size: 16px; - color: rgba(25, 25, 25, 0.25); - } - } - .source { - font-size: 10px; - color: rgba(25, 25, 25, 0.45); - margin-bottom: 10px; - } - .white-input { - display: block; - .input-view, - .custom-code { - height: fit-content; - cursor: text; - padding-left: 15px; - border-radius: 10px; - border: none; - width: 100%; - overflow: hidden; - } - .input-img, - .custom-pre { - position: relative; - right: 20px; - } - .input-view { - white-space: pre-line; - } - .custom-code { - white-space: break-spaces; - } - .custom-pre { - top: 10px; - align-self: flex-start; - } - } - } - .dark-card { - flex: 45%; - border-radius: 10px; - margin-left: 30px; - .dark-input { - .h-input { - height: 51px; - padding-left: 10px; - } - } - } - } - } -} -.pd-15 { - padding: 15px; -} -.mrl-50 { - margin-left: 50px; -} - -@media screen and (max-width: $mobileWidth) { - .content { - .card { - .cards-block { - flex-direction: column; - .dark-card { - flex: 100%; - margin: 0 27px 0 13px; - } - .light-card { - flex: 100%; - margin-bottom: 10px; - .white-input { - .custom-code { - overflow: auto; - } - } - } - } - } - } +:host { + @apply flex flex-col gap-4 p-4 bg-full-white box-border border-t border-t-black/10 py-5 pl-[22px] pr-4; } diff --git a/src/app/cards/cards.component.ts b/src/app/cards/cards.component.ts index ed6a59e..21b6408 100644 --- a/src/app/cards/cards.component.ts +++ b/src/app/cards/cards.component.ts @@ -2,7 +2,7 @@ import { Component, effect, ElementRef, inject, input, viewChildren } from '@ang import { NgOptimizedImage } from '@angular/common'; import { HighlightModule } from 'ngx-highlightjs'; import { NgxLoaderIndicatorDirective } from 'ngx-loader-indicator'; -import { ICard } from './cards.interface'; +import { CardItem } from './cards.type'; import { ScrollService } from '@open-source/scroll/scroll.service'; import { ColorPipe } from '@open-source/color/color.pipe'; import { AssetPipe } from '@libraries/asset/asset.pipe'; @@ -30,7 +30,7 @@ import { toSignal } from '@angular/core/rxjs-interop'; styleUrls: ['./cards.component.scss'], }) export class CardsComponent { - public cardDocs = input(); + public cardDocs = input(); public cards = viewChildren>('cards', { read: ElementRef, diff --git a/src/app/cards/cards.interface.ts b/src/app/cards/cards.type.ts similarity index 82% rename from src/app/cards/cards.interface.ts rename to src/app/cards/cards.type.ts index ceaa6fe..a8c0189 100644 --- a/src/app/cards/cards.interface.ts +++ b/src/app/cards/cards.type.ts @@ -1,8 +1,8 @@ -export interface ICard { +export type CardItem = { header: string; code: string; customCodeProvider?: string; cardType: boolean; id: number; anchor: string; -} +}; diff --git a/src/app/custom-loader/custom-loader.component.html b/src/app/custom-loader/custom-loader.component.html index 858ad43..e920ede 100644 --- a/src/app/custom-loader/custom-loader.component.html +++ b/src/app/custom-loader/custom-loader.component.html @@ -1,4 +1,4 @@ -
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. In, vero impedit neque deleniti doloribus sed at est placeat exercitationem. Soluta qui doloribus deleniti velit? Asperiores adipisci impedit ad maxime tempore. Lorem ipsum dolor sit amet consectetur adipisicing elit. In, diff --git a/src/app/shared/form/form.component.html b/src/app/shared/form/form.component.html index b53f9d3..d5ff5fd 100644 --- a/src/app/shared/form/form.component.html +++ b/src/app/shared/form/form.component.html @@ -1,14 +1,20 @@ -
- @for (formItem of formItems; track formItem) { -
+ +
+ @for (formItem of formItems; track formItem) { -
- } -
+
diff --git a/src/app/shared/form/form.component.scss b/src/app/shared/form/form.component.scss index 45df9db..e69de29 100644 --- a/src/app/shared/form/form.component.scss +++ b/src/app/shared/form/form.component.scss @@ -1,12 +0,0 @@ -.auth-btn { - margin-top: 30px; - padding: 5px 23px; - gap: 10px; - width: 84px; - height: 31px; - border-radius: 4px; - &:disabled { - background: var(--full-white); - cursor: no-drop; - } -} diff --git a/src/app/shared/form/form.component.ts b/src/app/shared/form/form.component.ts index e49caf9..ddc33e1 100644 --- a/src/app/shared/form/form.component.ts +++ b/src/app/shared/form/form.component.ts @@ -10,7 +10,7 @@ import { of } from 'rxjs'; import { delay } from 'rxjs/operators'; import { NgxLoaderIndicatorDirective } from 'ngx-loader-indicator'; import { InputComponent } from '@libraries/input/input.component'; -import { IFormItem } from './form.interface'; +import { FormItem } from './form.type'; @Component({ selector: 'jsdaddy-open-source-form', @@ -35,7 +35,7 @@ export class FormComponent { password: [null, this.passwordValidators], }); - public readonly formItems: IFormItem[] = [ + public readonly formItems: FormItem[] = [ { formControlName: 'login', validators: this.loginValidators, diff --git a/src/app/shared/form/form.interface.ts b/src/app/shared/form/form.type.ts similarity index 80% rename from src/app/shared/form/form.interface.ts rename to src/app/shared/form/form.type.ts index 90d0fc2..5d589d3 100644 --- a/src/app/shared/form/form.interface.ts +++ b/src/app/shared/form/form.type.ts @@ -1,7 +1,7 @@ import { ValidatorFn } from '@angular/forms'; -export interface IFormItem { +export type FormItem = { formControlName: string; placeholder: string; validators: ValidatorFn[]; -} +}; diff --git a/src/assets/content/card.ts b/src/assets/content/card.ts index 6dbe4d1..3a30b58 100644 --- a/src/assets/content/card.ts +++ b/src/assets/content/card.ts @@ -1,6 +1,6 @@ -import { ICard } from '../../app/cards/cards.interface'; +import { CardItem } from '../../app/cards/cards.type'; -export const Card: ICard[] = [ +export const Card: CardItem[] = [ { header: 'Authentication process with default configuration', code: `
diff --git a/src/assets/content/lists.ts b/src/assets/content/lists.ts index 3ceda84..9cfe13f 100644 --- a/src/assets/content/lists.ts +++ b/src/assets/content/lists.ts @@ -1,6 +1,6 @@ -import { IListItem } from '@open-source/accordion/content.interfaces'; +import { ListItem } from '@open-source/accordion/content.types'; -export const lists: IListItem[] = [ +export const lists: ListItem[] = [ { header: 'Configuration', id: 1, diff --git a/src/libraries b/src/libraries index bb8749e..8037189 160000 --- a/src/libraries +++ b/src/libraries @@ -1 +1 @@ -Subproject commit bb8749e7465ce43652ddc4d3272b233435a5df7d +Subproject commit 8037189c89d218cb473a7337809be3700c21e757 diff --git a/src/main.ts b/src/main.ts index 38a01fc..d0f1e00 100644 --- a/src/main.ts +++ b/src/main.ts @@ -30,4 +30,5 @@ bootstrapApplication(AppComponent, { }, }, ], + // eslint-disable-next-line no-console }).catch((err) => console.error(err)); diff --git a/src/styles.scss b/src/styles.scss index 777dbfc..b5c61c9 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,3 @@ -@import 'libraries/styles/general'; +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 0000000..1e4f9a7 --- /dev/null +++ b/tailwind.config.ts @@ -0,0 +1,117 @@ +import { type Config } from 'tailwindcss'; + +const tailwindConfig: Config = { + content: ['./src/**/*.{html,scss,ts}'], + theme: { + extend: { + screens: { + mob: { min: '1px', max: '700px' }, + tab: { min: '700px', max: '1279px' }, + desk: { min: '1279px' }, + }, + fontFamily: { + sans: ['Varela', 'system-ui', 'sans-serif'], + }, + colors: { + dark: { + DEFAULT: '#191919', + }, + yellow: { + DEFAULT: '#FFD64D', + }, + green: { + DEFAULT: '#1AB77E', + }, + red: { + DEFAULT: '#e35353', + }, + orange: { + DEFAULT: '#FF710A', + }, + 'full-white': '#FFFFFF', + white: { + DEFAULT: '#F8F8F8', + }, + }, + spacing: { + '5px': '5px', + '15px': '15px', + '25px': '25px', + '30px': '30px', + '35px': '35px', + '50px': '50px', + }, + fontSize: { + label: [ + '12px', + { + lineHeight: '13px', + fontWeight: '300', + }, + ], + title: [ + '10px', + { + lineHeight: '14px', + fontWeight: '400', + }, + ], + 'span-12': [ + '12px', + { + lineHeight: '21px', + fontWeight: '400', + }, + ], + span: [ + '14px', + { + lineHeight: '21px', + fontWeight: '400', + }, + ], + 'span-16': [ + '16px', + { + lineHeight: '21px', + fontWeight: '500', + }, + ], + 'span-18': [ + '18px', + { + lineHeight: '22px', + fontWeight: '500', + }, + ], + h3: [ + '25px', + { + lineHeight: '27px', + fontWeight: '500', + }, + ], + h5: [ + '16px', + { + lineHeight: '24px', + fontWeight: '400', + }, + ], + }, + borderRadius: { + '4px': '4px', + '5px': '5px', + '10px': '10px', + '15px': '15px', + '25px': '25px', + }, + borderWidth: { + '2px': '2px', + }, + }, + }, + plugins: [], +}; + +export default tailwindConfig; diff --git a/tsconfig.app.json b/tsconfig.app.json index 2e11e23..298db18 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -1,12 +1,8 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/app" - }, - "files": [ - "src/main.ts" - ], - "include": [ - "src/**/*.d.ts" - ] -} \ No newline at end of file + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app" + }, + "files": ["src/main.ts"], + "include": ["src/**/*.d.ts"] +} diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json new file mode 100644 index 0000000..05fc043 --- /dev/null +++ b/tsconfig.eslint.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig.json", + "include": ["**/*.ts"] +} diff --git a/tsconfig.json b/tsconfig.json index 8c59b6d..6ca4691 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,10 +12,7 @@ "importHelpers": true, "target": "ES2022", "module": "ES2022", - "lib": [ - "ES2022", - "dom" - ], + "lib": ["ES2022", "dom"], "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, @@ -34,7 +31,8 @@ "@open-source/*": ["./src/libraries/open-source/*"], "@libraries/*": ["./src/libraries/*"] }, - "skipLibCheck": true + "skipLibCheck": true, + "noImplicitAny": true }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/tsconfig.spec.json b/tsconfig.spec.json index c524672..710f88f 100644 --- a/tsconfig.spec.json +++ b/tsconfig.spec.json @@ -1,12 +1,8 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": [ - "jasmine" - ] - }, - "include": [ - "**/*.spec.ts" - ] -} \ No newline at end of file + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/spec", + "types": ["jasmine"] + }, + "include": ["**/*.spec.ts"] +}