open-index/open-npm huggingface dataset:
npm package: @izosa/website-breadcrumbs
Description: <table>     <tr>         <td><img src="https://www.static.izosa.com/website/logo.svg" width="100" height="100"></td>         <td>         <h2>Breadcrumbs</h2>         Website component for breadcrumbs</td>     </tr> </table>
Latest version: 0.6.2

<table>
    <tr>
        <td><img src="https://www.static.izosa.com/website/logo.svg" width="100" height="100"></td>
        <td>
        <h2>Breadcrumbs</h2>
        Website component for breadcrumbs</td>
    </tr>
</table>

## Properties

<table>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Options</th>
        <th>Default</th>
    </tr>
    <tr>
        <td>home</td>
        <td>Breadcrumb</td>
         <td>☑️⚙️</td>
        <td>{ title: 'Начало', url: window.location.origin }</td>
    </tr>
    <tr>
        <td>list</td>
        <td>Breadcrumb[]</td>
        <td>✅</td>
        <td>[]</td>
    </tr>
</table>

<hr>

```
<website-breadcrumbs [list]="breadcrumbs"></website-breadcrumbs>
```

## CSS Properties

<table>
    <tr>
        <th>Name</th>
        <th>Default Value</th>
    </tr>
    <tr>
        <td>--text-color:</td>
        <td>#c4c4c4</td>
    </tr>
    <tr>
        <td>--font-size:</td>
        <td>#0.8rem</td>
    </tr>
    <tr>
        <td>--font-weight:</td>
        <td>700</td>
    </tr>
    <tr>
        <td>--font-familly:</td>
        <td>inherit</td>
    </tr>
    <tr>
        <td>--mb:</td>
        <td>0.75rem</td>
    </tr>
        <tr>
        <td>--arrow-content:</td>
        <td>'» '</td>
    </tr>
        <tr>
        <td>--arrow-color:</td>
        <td>darken($text-color, 5%)</td>
    </tr>
    <tr>
        <td>--arrow-gap:</td>
        <td>0.25rem</td>
    </tr>
</table>

<hr>

```
website-breadcrumbs  {
   --color: #3f3f3f;
   --font-size: 0.8rem;
   --font-weight: 700;
   --font-familly: inherit;
   --mb: 0.75rem;
   --arrow-content: '» ';
   --arrow-color: #3f3f3f;
   --arrow-gap: 0.25rem;
}
```
npm package: @izosa/website-call
Description: <table>     <tr>         <td><img src="https://www.static.izosa.com/website/logo.svg" width="100" height="100"></td>         <td>         <h2> Call</h2>         Website component for call button</td>     </tr> </table>
Latest version: 0.6.1

<table>
    <tr>
        <td><img src="https://www.static.izosa.com/website/logo.svg" width="100" height="100"></td>
        <td>
        <h2> Call</h2>
        Website component for call button</td>
    </tr>
</table>

## Properties

<table>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Options</th>
        <th>Default</th>
    </tr>
    <tr>
        <td>phone</td>
        <td>string</td>
        <td>✅⚙️</td>
        <td>-</td>
    </tr>
    <tr>
        <td>animation</td>
        <td>boolean</td>
        <td>☑️⚙️</td>
        <td>true</td>
    </tr>
    <tr>
        <td>icon</td>
        <td>IconDefinition</td>
        <td>☑️⚙️</td>
        <td>faPhone</td>
    </tr>
</table>

<hr>

```
<website-call [url]="'+3598888888888'"></website-call>
```

## CSS Properties

<table>
    <tr>
        <th>Name</th>
        <th>Default Value</th>
    </tr>
    <tr>
        <td>--size:</td>
        <td>3.75rem</td>
    </tr>
    <tr>
        <td>--margin:</td>
        <td>1.25rem</td>
    </tr>
    <tr>
        <td>--background:</td>
        <td>#3bb91b</td>
    </tr>
    <tr>
        <td>--background-hover:</td>
        <td>#{darken($background, 5%)}</td>
    </tr>
        <tr>
        <td>--background-shadow:</td>
        <td>#{rgba($background, 0.3)}</td>
    </tr>
    <tr>
        <td>--color:</td>
        <td>#ffffff</td>
    </tr>
    <tr>
        <td>--animation-duration:</td>
        <td>2s</td>
    </tr>
        <tr>
        <td>--animation-repeat:</td>
        <td>5</td>
    </tr>
        <tr>
        <td>--animation-delay:</td>
        <td>2s</td>
    </tr>
</table>

<hr>

```
website-call{
    $background: #ee9012;
    --background: #{$background};
    --background-hover: #{darken($background, 5%)};
    --background-shadow: #{rgba($background, 0.3)};
    --color: #ffffff;
    --margin: 1.25rem;
    --size: 3.75rem;
    --animation-duration: 2s;
    --animation-repeat: 5;
    --animation-delay: 2s;
}
```
npm package: @izosa/website-contact-form
Description: <table>     <tr>         <td><img src="https://www.static.izosa.com/website/logo.svg" width="100" height="100"></td>         <td>         <h2> Contact Form</h2>         Website component for contact form</td>     </tr> </table>
Latest version: 0.6.2

<table>
    <tr>
        <td><img src="https://www.static.izosa.com/website/logo.svg" width="100" height="100"></td>
        <td>
        <h2> Contact Form</h2>
        Website component for contact form</td>
    </tr>
</table>

## Properties

<table>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Options</th>
        <th>Default</th>
    </tr>
    <tr>
        <td>notification</td>
        <td>Notification</td>
        <td>☑️⚙️</td>
        <td>{
    success: 'Вашето запитване е изпратено. Очаквайте да се свържем с вас.',
    error: 'Изпращането е неуспешно. Свържете се с по телефон.',
    options: {
      duration: 3000,
      theme: 'snackbar',
      position: 'top-center',
    },
  }</td>
    </tr>

</table>

<hr>

```
<website-contact-form></website-contact-form>
```

## CSS Properties

<table>
    <tr>
        <th>Name</th>
        <th>Default Value</th>
    </tr>
    <tr>
        <td>--label-color</td>
        <td>#808080</td>
    </tr>
        <tr>
        <td>--label-font-size:</td>
        <td>1rem</td>
    </tr>
        <tr>
        <td>--label-font-weight:</td>
        <td>500</td>
    </tr>
        <tr>
        <td>--label-text-transform:</td>
        <td>inhirit</td>
    </tr>
    <tr>
        <td>--field-input-mb:</td>
        <td>0.5rem</td>
    </tr>
    <tr>
        <td>--field-input-color:</td>
        <td>#555555</td>
    </tr>
    <tr>
        <td>--field-input-radius:</td>
        <td>0.25rem</td>
    </tr>
    <tr>
        <td>--field-error-color:</td>
        <td>#ff0000</td>
    </tr>
        <tr>
        <td>--field-error-size</td>
        <td>0.75rem</td>
    </tr>
    <tr>
        <td>--button-background:</td>
        <td>#c9851d</td>
    </tr>
        <tr>
        <td>--button-background:</td>
        <td>#{darken($button-background, 3%)}</td>
    </tr>
    <tr>
        <td>--button-color:</td>
        <td>#ffffff</td>
    </tr>
        <tr>
        <td>--button-border:</td>
        <td>none</td>
    </tr>
        <tr>
        <td>--button-radius:</td>
        <td>0.25rem</td>
    </tr>
</table>

<hr>

```
website-contact-form{
    --label-color: #808080;
    --label-font-size: 1rem;
    --label-font-weight: 500;
    --label-text-transform: inhirit;

    --field-input-mb: 0.5rem;
    --field-input-color: #555555;
    --field-input-radius: 0.25rem;

    --field-error-color: #ff0000;
    --field-error-size: 0.75rem;

    $button-background: #c9851d
    --button-background: #{$button-background};
    --button-background-hover: #{darken($button-background, 3%)};
    --button-color: #ffffff;
    --button-border: none;
    --button-radius: 0.25rem;
}
```
npm package: @izosa/website-credits
Description: <table>     <tr>         <td><img src="https://www.static.izosa.com/website/logo.svg" width="100" height="100"></td>         <td>         <h2> Credits</h2>         Website component block for credit the author</td>     </tr> </table>
Latest version: 0.6.2

<table>
    <tr>
        <td><img src="https://www.static.izosa.com/website/logo.svg" width="100" height="100"></td>
        <td>
        <h2> Credits</h2>
        Website component block for credit the author</td>
    </tr>
</table>

## Properties

<table>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Options</th>
        <th>Default</th>
    </tr>
    <tr>
        <td>text</td>
        <td>string</td>
        <td>☑️</td>
        <td>iZoSa Creative Design</td>
    </tr>
    <tr>
        <td>url</td>
        <td>string</td>
        <td>☑️</td>
        <td>https://www.izosa.com</td>
    </tr>
    <tr>
        <td>logo</td>
        <td>string</td>
        <td>☑️</td>
        <td>assets/crdesign.svg</td>
    </tr>
        <tr>
        <td>width</td>
        <td>number</td>
        <td>☑️</td>
        <td>18</td>
    </tr>
    <tr>
        <td>height</td>
        <td>number</td>
        <td>☑️</td>
        <td>18</td>
    </tr>
</table>

<hr>

```
<website-credits class="container mx-auto bg-gray-900"></website-credits>
```

## CSS Properties

<table>
    <tr>
        <th>Name</th>
        <th>Default Value</th>
    </tr>
    <tr>
        <td>--text-color:</td>
        <td>#c4c4c4</td>
    </tr>
    <tr>
        <td>--text-hover:</td>
        <td>#b7b7b7</td>
    </tr>
        <tr>
        <td>--font-size:</td>
        <td>#0.8rem</td>
    </tr>
    <tr>
        <td>--line-height:</td>
        <td>2.5rem</td>
    </tr>
    <tr>
        <td>--font-weight:</td>
        <td>400</td>
    </tr>
</table>

<hr>

```
website-credits  {
    --text-color: #c4c4c4;
    --text-hover: #b7b7b7;
    --font-size: 0.8rem;
    --line-height: 2.5rem;
    --font-weight: 400;
}
```
npm package: @izosa/website-logo
Description: <table>     <tr>         <td><img src="https://www.static.izosa.com/website/logo.svg" width="100" height="100"></td>         <td>         <h2>Logo</h2>         Website component for logo</td>     </tr> </table>
Latest version: 0.6.0

<table>
    <tr>
        <td><img src="https://www.static.izosa.com/website/logo.svg" width="100" height="100"></td>
        <td>
        <h2>Logo</h2>
        Website component for logo</td>
    </tr>
</table>

## Properties

<table>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Options</th>
        <th>Default</th>
    </tr>
    <tr>
        <td>title</td>
        <td>string</td>
        <td>☑️⚙️</td>
        <td></td>
    </tr>
    <tr>
        <td>brand</td>
        <td>string</td>
        <td>☑️⚙️</td>
        <td></td>
    </tr>
    <tr>
        <td>description</td>
        <td>string</td>
        <td>☑️⚙️</td>
        <td></td>
    </tr>
    <tr>
        <td>path</td>
        <td>string</td>
        <td>☑️⚙️</td>
        <td></td>
    </tr>
    <tr>
        <td>url</td>
        <td>string</td>
        <td>☑️⚙️</td>
        <td></td>
    </tr>
    <tr>
        <td>width</td>
        <td>string</td>
        <td>☑️⚙️</td>
        <td></td>
    </tr>
    <tr>
        <td>height</td>
        <td>string</td>
        <td>☑️⚙️</td>
        <td></td>
    </tr>
</table>

<hr>

```
<website-logo></website-logo>
```
npm package: @izosa/website-page
Description: <table>     <tr>         <td><img src="https://www.static.izosa.com/website/logo.svg" width="100" height="100"></td>         <td>         <h2>Page</h2>         Website component for page</td>     </tr> </table>
Latest version: 0.6.31

<table>
    <tr>
        <td><img src="https://www.static.izosa.com/website/logo.svg" width="100" height="100"></td>
        <td>
        <h2>Page</h2>
        Website component for page</td>
    </tr>
</table>

## Properties

<table>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Options</th>
        <th>Default</th>
    </tr>
    <tr>
        <td>page</td>
        <td>Page</td>
        <td>✅</td>
        <td></td>
    </tr>
       <tr>
        <td>download</td>
        <td>boolean</td>
        <td>☑️</td>
        <td>true</td>
    </tr>
    <tr>
        <td>styles</td>
        <td>string</td>
        <td>☑️⚙️</td>
        <td>{
  heading: '',
  breadcrumbs: null,
  content:
    'prose prose-slate prose-img:rounded-md prose-img:my-2 prose-h3:text-white prose-h3:text-lg prose-h3:px-2 max-w-none prose-p:mt-0 prose-p:mb-4 prose-a:no-underline prose-a:text-amber-600 hover:prose-a:text-amber-500 prose-h3:bg-amber-60',
}</td>
    </tr>
    <tr>
        <td>appendStyles</td>
        <td>string</td>
        <td>☑️⚙️</td>
        <td></td>
    </tr>

</table>

<hr>

```
<website-page [page]="new Page('Home', 'home')"></website-page>
```

# Analytics Script

<strong>index.html</strong>

```
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());
    </script>

```

# SEO Config

<strong>enviroments.defaults.ts</strong>

```
  seo: {
    title: 'Website Title',
    brand: 'Website Brand',
    description: 'This is webiste description',
    analytics: 'G-WEB-SITE',
  },
```

# SEO Enable

<strong>app.component</strong>

```
  constructor(private seoService: SeoService) {
    this.seoService.init(environment);
  }

```
npm package: @izosa/website-seo
Description: <table>     <tr>         <td><img src="https://www.static.izosa.com/website/logo.svg" width="100" height="100"></td>         <td>         <h2>SEO</h2>         Website component for SEO</td>     </tr> </table>
Latest version: 0.6.2

<table>
    <tr>
        <td><img src="https://www.static.izosa.com/website/logo.svg" width="100" height="100"></td>
        <td>
        <h2>SEO</h2>
        Website component for SEO</td>
    </tr>
</table>

## Properties

<table>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Options</th>
        <th>Default</th>
    </tr>
    <tr>
        <td>config</td>
        <td>WebsiteSeoConfig</td>
        <td>⚙️</td>
        <td></td>
</table>

<hr>

### app.module.ts

```
WebsiteSeoModule.forRoot(enviroment.seo)
```

### index.html

```
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
        dataLayer.push(arguments);
    }
    gtag('js', new Date());
</script>
```
npm package: @izquel03/mi-libreria
Description: This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Latest version: 0.0.2

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```
npm package: @izquel03/smart-table-lib
Description: This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Latest version: 1.0.0

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```
npm package: @izquiratops/esbuild-postcss
Description: Use PostCSS with ESBuild
Author: Jordi Izquierdo
Latest version: 1.0.0

# ESBuild plugin to get PostCSS working 🥳

### How to use

You can run the build process with node like this:

```
const postCSS = require("@izquiratops/esbuild-postcss");
const autoprefixer = require("autoprefixer");
const cssModules = require("postcss-modules");

build({
	entryPoints: ['src/index.ts'],
	outdir: 'dist',
	bundle: true,
	loader: { ".png": "file" },
	plugins: [
	  postCSS.default({
		plugins: [autoprefixer, cssModules],
	  }),
	],
  })
```
npm package: @izquiratops/my-lib
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.5.
Latest version: 0.0.2

# MyLib

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.5.

## Code scaffolding

Run `ng generate component component-name --project my-lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project my-lib`.
> Note: Don't forget to add `--project my-lib` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build my-lib` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build my-lib`, go to the dist folder `cd dist/my-lib` and run `npm publish`.

## Running unit tests

Run `ng test my-lib` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.