@duyanhdev/mvp-ifs-ui-kit 21.0.0

package/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.gitmodules

@@ -0,0 +1,3 @@
+[submodule "src/assets"]
+	path = src/assets
+	url = https://github.com/cetincakiroglu/sakai-assets

package/.postcssrc.json

@@ -0,0 +1,5 @@
+{
+    "plugins": {
+      "@tailwindcss/postcss": {}
+    }
+}

package/.prettierignore

@@ -0,0 +1,14 @@
+# Ignore artifacts:
+build
+coverage
+dist
+out
+public
+styles
+node_modules
+.vscode
+.angular
+*.md
+*.yml
+/tsconfig.json
+*.json

package/.prettierrc.json

@@ -0,0 +1,29 @@
+{
+    "useTabs": false,
+    "tabWidth": 4,
+    "trailingComma": "none",
+    "semi": true,
+    "singleQuote": true,
+    "printWidth": 250,
+    "bracketSameLine": false,
+    "overrides": [
+        {
+            "files": ["*.ts", "*.mts", "*.d.ts"],
+            "options": {
+                "parser": "typescript"
+            }
+        },
+        {
+            "files": ["*.html"],
+            "options": {
+                "parser": "html"
+            }
+        },
+        {
+            "files": ["*.component.html"],
+            "options": {
+                "parser": "angular"
+            }
+        }
+    ]
+}

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018-2026 PrimeTek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,59 @@
+# Sakai19
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/angular.json

@@ -0,0 +1,98 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "sakai-ng": {
+            "projectType": "application",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "style": "scss"
+                }
+            },
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:application",
+                    "options": {
+                        "outputPath": "dist/sakai-ng",
+                        "index": "src/index.html",
+                        "browser": "src/main.ts",
+                        "tsConfig": "tsconfig.app.json",
+                        "inlineStyleLanguage": "scss",
+                        "assets": [
+                            {
+                                "glob": "**/*",
+                                "input": "public"
+                                
+                            }
+                        ],
+                        "styles": [
+                            "src/assets/styles.scss",
+                            "src/assets/tailwind.css"
+                        ],
+                        "scripts": []
+                    },
+                    "configurations": {
+                        "production": {
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "1mb",
+                                    "maximumError": "5mb"
+                                },
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "2kb",
+                                    "maximumError": "4kb"
+                                }
+                            ],
+                            "outputHashing": "all"
+                        },
+                        "development": {
+                            "optimization": false,
+                            "extractLicenses": false,
+                            "sourceMap": true
+                        }
+                    },
+                    "defaultConfiguration": "production"
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "configurations": {
+                        "production": {
+                            "buildTarget": "sakai-ng:build:production"
+                        },
+                        "development": {
+                            "buildTarget": "sakai-ng:build:development"
+                        }
+                    },
+                    "defaultConfiguration": "development"
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n"
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "tsConfig": "tsconfig.spec.json",
+                        "inlineStyleLanguage": "scss",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "src/assets/styles.scss"
+                        ],
+                        "scripts": []
+                    }
+                }
+            }
+        }
+    },
+    "cli": {
+        "analytics": false
+    }
+}

package/eslint.config.js

@@ -0,0 +1,89 @@
+export default {
+    root: true,
+    ignorePatterns: ['**/dist/**'],
+    plugins: ['prettier'],
+    extends: ['prettier'],
+    rules: {
+        'padding-line-between-statements': [
+            'error',
+            { blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' },
+            { blankLine: 'any', prev: ['const', 'let', 'var'], next: ['const', 'let', 'var'] },
+            { blankLine: 'any', prev: ['case', 'default'], next: 'break' },
+            { blankLine: 'any', prev: 'case', next: 'case' },
+            { blankLine: 'always', prev: '*', next: 'return' },
+            { blankLine: 'always', prev: 'block', next: '*' },
+            { blankLine: 'always', prev: '*', next: 'block' },
+            { blankLine: 'always', prev: 'block-like', next: '*' },
+            { blankLine: 'always', prev: '*', next: 'block-like' },
+            { blankLine: 'always', prev: ['import'], next: ['const', 'let', 'var'] }
+        ]
+    },
+    overrides: [
+        {
+            files: ['*.ts'],
+            parserOptions: {
+                project: ['tsconfig.json', 'e2e/tsconfig.json'],
+                createDefaultProgram: true
+            },
+            extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:@angular-eslint/recommended', 'plugin:@angular-eslint/template/process-inline-templates', 'prettier'],
+            rules: {
+                '@angular-eslint/component-selector': [
+                    'error',
+                    {
+                        type: 'element',
+                        prefix: 'p',
+                        style: 'kebab-case'
+                    }
+                ],
+                '@angular-eslint/directive-selector': [
+                    'error',
+                    {
+                        type: 'attribute',
+                        prefix: 'p',
+                        style: 'camelCase'
+                    }
+                ],
+                '@angular-eslint/component-class-suffix': [
+                    'error',
+                    {
+                        suffixes: ['']
+                    }
+                ],
+                '@angular-eslint/template/eqeqeq': [
+                    'error',
+                    {
+                        allowNullOrUndefined: true
+                    }
+                ],
+                '@angular-eslint/no-host-metadata-property': 'off',
+                '@angular-eslint/no-output-on-prefix': 'off',
+                '@typescript-eslint/ban-types': 'off',
+                '@typescript-eslint/no-explicit-any': 'off',
+                '@typescript-eslint/no-inferrable-types': 'off',
+                'arrow-body-style': ['error', 'as-needed'],
+                curly: 0,
+                '@typescript-eslint/member-ordering': [
+                    'error',
+                    {
+                        default: ['public-static-field', 'static-field', 'instance-field', 'public-instance-method', 'public-static-field']
+                    }
+                ],
+                'no-console': 0,
+                'prefer-const': 0
+            }
+        },
+        {
+            files: ['*.html'],
+            extends: ['plugin:@angular-eslint/template/recommended', 'prettier'],
+            rules: {}
+        },
+        {
+            files: ['*.js'],
+            rules: {
+                parserOptions: {
+                    allowImportExportEverywhere: true
+                }
+            }
+        }
+    ]
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+    "name": "@duyanhdev/mvp-ifs-ui-kit",
+    "version": "21.0.0",
+    "publishConfig": {
+    "access": "public"
+  },
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build",
+        "watch": "ng build --watch --configuration development",
+        "format": "prettier --write \"**/*.{js,mjs,ts,mts,d.ts,html}\" --cache",
+        "test": "ng test"
+    },
+    "private": false,
+    "dependencies": {
+        "@angular/common": "^21",
+        "@angular/compiler": "^21",
+        "@angular/core": "^21",
+        "@angular/forms": "^21",
+        "@angular/platform-browser": "^21",
+        "@angular/platform-browser-dynamic": "^21",
+        "@angular/router": "^21",
+        "@ngx-translate/core": "^17.0.0",
+        "@ngx-translate/http-loader": "^17.0.0",
+        "@primeuix/themes": "^2.0.0",
+        "@tailwindcss/postcss": "^4.1.11",
+        "chart.js": "4.4.2",
+        "primeclt": "^0.1.5",
+        "primeicons": "^7.0.0",
+        "primeng": "^21.0.2",
+        "quill": "^2.0.3",
+        "rxjs": "~7.8.0",
+        "tailwindcss-primeui": "^0.6.1",
+        "tslib": "^2.8.1"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "^21",
+        "@angular/cli": "^21",
+        "@angular/compiler-cli": "^21",
+        "@types/jasmine": "~5.1.0",
+        "autoprefixer": "^10.4.20",
+        "eslint": "^9.14.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-prefer-arrow": "^1.2.3",
+        "eslint-plugin-prettier": "^4.2.1",
+        "jasmine-core": "~5.4.0",
+        "karma": "~6.4.0",
+        "karma-chrome-launcher": "~3.2.0",
+        "karma-coverage": "~2.2.0",
+        "karma-jasmine": "~5.1.0",
+        "karma-jasmine-html-reporter": "~2.1.0",
+        "postcss": "^8.5.6",
+        "prettier": "^3.0.0",
+        "tailwindcss": "^4.1.11",
+        "typescript": "~5.9.3"
+    }
+}

package/public/demo/images/product/product-placeholder.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="300px" height="200px" viewBox="0 0 300 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Artboard</title>
+    <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill="#F8F9FA" x="0" y="0" width="300" height="200"></rect>
+        <g id="image" transform="translate(110.000000, 70.000000)" fill="#BABABC" fill-rule="nonzero">
+            <path d="M75,0 L5,0 C2.23857625,0 0,2.23857625 0,5 L0,55 C0,57.7614237 2.23857625,60 5,60 L75,60 C77.7614237,60 80,57.7614237 80,55 L80,5 C80,2.23857625 77.7614237,0 75,0 Z M20,10 C25.5228475,10 30,14.4771525 30,20 C30,25.5228475 25.5228475,30 20,30 C14.4771525,30 10,25.5228475 10,20 C10,14.4771525 14.4771525,10 20,10 Z M70,40 L70,50 L10,50 L10,40 L18.55,35.7 C19.4648753,35.2524957 20.5351247,35.2524957 21.45,35.7 L30,40 L53.65,21.1 C54.4866298,20.4991452 55.6133702,20.4991452 56.45,21.1 L70,30 L70,40 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>

package/src/app/layout/component/configurator/app.configurator.html

@@ -0,0 +1,48 @@
+<div class="flex flex-col gap-4">
+    <div>
+        <span class="text-sm text-muted-color font-semibold">Primary</span>
+        <div class="pt-2 flex gap-2 flex-wrap justify-start">
+            @for (primaryColor of primaryColors(); track primaryColor.name) {
+            <button
+                type="button"
+                [title]="primaryColor.name"
+                (click)="updateColors($event, 'primary', primaryColor)"
+                [ngClass]="{
+                                    'outline outline-primary': primaryColor.name === selectedPrimaryColor()
+                                }"
+                class="cursor-pointer w-5 h-5 rounded-full flex shrink-0 items-center justify-center outline-offset-1 shadow"
+                [style]="{
+                                    'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
+                                }"
+            ></button>
+            }
+        </div>
+    </div>
+    <div>
+        <span class="text-sm text-muted-color font-semibold">Surface</span>
+        <div class="pt-2 flex gap-2 flex-wrap justify-start">
+            @for (surface of surfaces; track surface.name) {
+            <button
+                type="button"
+                [title]="surface.name"
+                (click)="updateColors($event, 'surface', surface)"
+                class="cursor-pointer w-5 h-5 rounded-full flex shrink-0 items-center justify-center p-0 outline-offset-1"
+                [ngClass]="{
+                                    'outline outline-primary': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate'
+                                }"
+                [style]="{
+                                    'background-color': surface?.palette?.['500']
+                                }"
+            ></button>
+            }
+        </div>
+    </div>
+    <div class="flex flex-col gap-2">
+        <span class="text-sm text-muted-color font-semibold">Presets</span>
+        <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" size="small" />
+    </div>
+    <div *ngIf="showMenuModeButton()" class="flex flex-col gap-2">
+        <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
+        <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="menuModeOptions" [allowEmpty]="false" size="small" />
+    </div>
+</div>