open-index/open-npm huggingface dataset:
npm package: @impactdk/barcode-scanner
Description: A barcode scanner module, using a webassembly module built on [ZBar](https://github.com/ZBar/ZBar), which supports a variety of different barcodes.
Author: Søren Bruus Zeppelin
Latest version: 2.0.1

# barcode-scanner
A barcode scanner module, using a webassembly module built on [ZBar](https://github.com/ZBar/ZBar), which supports a variety of different barcodes.

## Installation
```bash
npm install --save @impactdk/barcode-scanner
```

As the default decoder for the scanner is dependant on a wasm module running in a worker, some assets need to be installed from the module and into the public assets of your own. It is advised to do this as part of your build:

```bash
install-wasm-decoder ./path/to/your/assets
```

This path is then later needed in the configuration of the decoder.

## Using the module
```ts
import { WasmDecoder, Scanner, IBarcode } from "@impactdk/barcode-scanner";

const videoElement: HTMLVideoElement = document.getElementById("scanner-video");

const decoder = WasmDecoder.getInstance("/public/path"); // A directory where the installed wasm decoder assets are made publicly available.
const scanner = new Scanner(videoElement, decoder, handleBarcode);

scanner.start();

function handleBarcode(barcode: IBarcode): void {
  // Do something with the barcode...
}

// Scanner and decoder (when using included wasm decoder) must be disposed of properly to stop underlying running processes.
function teardown(): void {
  scanner.stop();
  WasmDecoder.removeInstance();
}
```

## Code splitting
Include the submodule that checks the user's client for support, then lazily import a module using the scanner.

```ts
// lazy.ts
import { isBarcodeScannerSupported } from "@impactdk/barcode-scanner/lazy";

if (isBarcodeScannerSupported) {
  const videoElement: HTMLVideoElement = document.getElementById("scanner-video");

  import("./scanner-module")
    .then(mod => ...);
} else {
  console.log("Barcode scanner is not supported...");
}

// scanner-module.ts
import { WasmDecoder, Scanner, IBarcode } from "@impactdk/barcode-scanner";

...
```
npm package: @impactdk/js-marker-clusterer
Description: A universal version of the js-marker-clusterer
Author: Martin Hobert
Latest version: 0.0.2

# ES2015 version of @agm/js-marker-clusterer package

## Installation

Add `"@agm/js-marker-clusterer": "git+https://github.com/cmddavid/js-marker-clusterer.git"` to your package.json

Run NPM install
npm package: @impactdk/ngx-breakpoints
Description: An Angular wrapper for `@impactdk/breakpoints`
Author: Jacob Overgaard
Latest version: 1.2.0

# ngx-breakpoints

This module gives you some tools to subscribe to viewport changes

## Configuration

The module acts on certain breakpoints that you provide to it. If you don't provide any breakpoints, the module will fall back to some built-in breakpoints. You should configure the module with your own breakpoints by providing a list of the Breakpoint type:

```typescript
export const breakpoints: Breakpoints = [
    Breakpoint.fromWidth('small', { maxWidth: 567 }),
    Breakpoint.fromWidth('medium', { minWidth: 568, maxWidth: 767 }),
    Breakpoint.fromWidth('large', { minWidth: 768, maxWidth: 1024 }),
    Breakpoint.fromWidth('xlarge', { minWidth: 1025 }),
    Breakpoint.fromQuery(
        'small retina',
        'only screen and (min-resolution: 192dpi) and (max-width: 567px)'
    ),
    Breakpoint.fromQuery(
        'medium retina',
        'only screen and (min-resolution: 192dpi) and (min-width: 568px) and (max-width: 767px)'
    ),
    Breakpoint.fromQuery(
        'large retina',
        'only screen and (min-resolution: 192dpi) and (min-width: 768px) and (max-width: 1024px)'
    ),
    Breakpoint.fromQuery(
        'xlarge retina',
        'only screen and (min-resolution: 192dpi) and (min-width: 1025px)'
    ),
];

@NgModule({
    imports: [BreakpointsModule.withConfiguration(breakpoints)],
})
class AppModule {}
```

Additionally you can provide a set of SSR options:

```typescript
{
    defaultSize {
        width: 375;
        height: 667;
    }
}
```

## Usage

Import the `BreakpointService` in a component and subscribe to the breakpoint observable:

`breakpoint$`: Observable that provides you with objects of the type `Breakpoint` that matches the breakpoints you provided in the configuration.

```typescript
class Breakpoint {
    name: string;
    mediaQuery: string;
}
```

Or you can check the viewport size and scrollbar width:

`getScrollbarWidth()`: The width of the scrollbar in pixels

`getSize()`: The size in pixels of the viewport represented as a `ScreenSize` object

```typescript
class ScreenSize {
    width: number;
    height: number;
}
```
npm package: @impactdk/ngx-cms-formbuilder
Description: A module to easily add forms from Umbraco in your Angular application
Author: Christian Hartøft-Nielsen
Latest version: 1.0.0-beta.4

# ngx-cms-formbuilder

This library is used to standardize form data sent from and to a CMS.

## Supported CMS

| CMS            | Support |
| -------------- | ------- |
| Umbraco Forms  | Yes     |
| Sitecore Forms | Coming  |

## Usage

1. Import the module into your AppModule and configure it to point towards your CMS

```ts
imports: [
    CmsFormbuilderModule.forRoot(
        'https://url-to-umbraco/rest/v1/forms', // URL to CMS API
        'umbraco' // Type of CMS
    )
];
```

2. Import the service to fetch the form

```ts
export class AppComponent implements OnInit {
    formData?: CmsForm;

    constructor(private formService: CmsFormService, private cd: ChangeDetectorRef) {}

    ngOnInit() {
        this.formService.getFormById('GUID').subscribe(data => {
            this.formData = data;
            this.cd.markForCheck();
        });
    }
}
```

3. Lastly use the imported component to display the form (or roll your own using the form data)

```html
<div *ngIf="formData"><cms-form-page [formData]="formData" [pageId]="currentPageId"></cms-form-page></div>
```

## Notes for Umbraco

Currently we support almost all fields in Umbraco Forms and most workflows.

| Field                 | Support                                       |
| --------------------- | --------------------------------------------- |
| Short answer          | Yes                                           |
| Long answer           | Yes                                           |
| Date                  | Yes (make sure your template checks for null) |
| Checkbox              | Yes                                           |
| File upload           | No                                            |
| Password              | Yes                                           |
| Multiple choice       | Yes                                           |
| Data Consent          | Yes                                           |
| Dropdown              | Yes                                           |
| Single choice         | Yes                                           |
| Title and description | Yes                                           |
| Hidden                | Yes                                           |
| Recaptcha             | No                                            |
| Recaptcha2            | No                                            |
npm package: @impactdk/react-barcode-scanner
Description: A barcode scanner for react, using a webassembly module built on [ZBar](https://github.com/ZBar/ZBar), which supports a variety of different barcodes. Uses [@impactdk/barcode-scanner](https://www.npmjs.com/package/@impactdk/barcode-scanner) underneath.
Author: Søren Bruus Zeppelin
Latest version: 1.0.2

# @impactdk/react-barcode-scanner
A barcode scanner for react, using a webassembly module built on [ZBar](https://github.com/ZBar/ZBar), which supports a variety of different barcodes. Uses [@impactdk/barcode-scanner](https://www.npmjs.com/package/@impactdk/barcode-scanner) underneath.

## Installation
```bash
npm install --save @impactdk/react-barcode-scanner
```

As the default decoder for the scanner is dependant on a wasm module running in a worker, some assets need to be installed from the module and into the public assets of your own. It is advised to do this as part of your build:

```bash
install-wasm-decoder ./path/to/your/assets
```

A path to a public directory where the installed assets are available is then needed later in the configuration of the default decoder (if used).

## Using the module
```tsx
import { WasmDecoder } from "@impactdk/barcode-scanner";
import { ReactBarcodeScanner } from "@impactdk/react-barcode-scanner";

export const BarcodeScanner = () => {
  const { current: decoder } = useRef(WasmDecoder.getInstance("/public-assets")); // Path to assets installed.

  function handleBarcode(barcode: string): void {
    // Do something...
  }

  return <ReactBarcodeScanner
    decoder={decoder}
    onFindBarcode={handleBarcode} />
}
```

## Code splitting
Include the submodule that checks the user's client for support, then lazily import a module using the scanner.

```tsx
// barcode-scanner.lazy.tsx
import { isBarcodeScannerSupported } from "@impactdk/barcode-scanner/lazy";

interface IBarcodeScannerProps {
  onFindBarcode: (barcode: string) => void;
}

const BarcodeScanner = memo((props: IBarcodeScannerProps) => {
  if (!isBarcodeScannerSupported) {
    return <div>Barcode scanner not supported...</div>;
  }

  const { onFindBarcode } = props;
  const LazyScanner = lazy(() => import("./lazy-compat-scanner.component")); // This enables code splitting.
  const fallback = <div>Scanner loading...</div>;

  return (
    <Suspense fallback={fallback}>
      <LazyScanner onFindBarcode={onFindBarcode} />
    </Suspense>
  );
});

// lazy-compat-scanner.component.tsx
import { WasmDecoder } from "@impactdk/barcode-scanner";
import { ReactBarcodeScanner, IReactBarcodeScannerProps } from "@impactdk/react-barcode-scanner";

type ILazyCompatScannerProps = Omit<IReactBarcodeScannerProps, "decoder">;

const LazyCompatScanner: FC<ILazyCompatScannerProps> = props => {
  const { current: decoder } = useRef(WasmDecoder.getInstance("/public-assets")); // Path to assets installed.

  return <ReactBarcodeScanner
    decoder={decoder}
    {...props} />
}

export default LazyCompatScanner;
```
npm package: @impactdk/react-image
Description: Image component that handles lazy loading via intersection observer (remember to polyfill for IE11). Also features IE11 fallback functionality for `object-fit` + `object-position`.
Author: Søren Bruus Zeppelin
Latest version: 1.0.2

# @impactdk/react-image
Image component that handles lazy loading via intersection observer (remember to polyfill for IE11). Also features IE11 fallback functionality for `object-fit` + `object-position`.

## Installation
```bash
npm install --save @impactdk/react-image
```

## Using the module
```tsx
import Image from "@impactdk/react-image";

export const App = () => (
    <Image src="/path/to/image" objectFit="cover" lazy={true} />
);
```
npm package: @impactdk/react-modal
Description: A simple modal implementation for react. Also features a component for easily spawning react portals if you need to inject something else than a modal outside of the scope of the app.
Author: Søren Bruus Zeppelin
Latest version: 1.0.1

# @impactdk/react-modal
A simple modal implementation for react. Also features a component for easily spawning react portals if you need to inject something else than a modal outside of the scope of the app.

## Installation
```bash
npm install --save @impactdk/react-modal
```

## Using the module
While it is possible to use the included Modal component out of the box, it's advised to make a custom modal component through the factory method (next section).

```tsx
import React, { useRef } from 'react';
import { IModalRef, Modal } from '@impactdk/react-modal';

export const App = () => {
  const modalRef = useRef<IModalRef>();

  function openModal(): void {
    modalRef.current.open();
  }

  return (
    <div className="app">
      <button onClick={openModal}>Open modal</button>
      <Modal ref={modalRef}>
        This is the Modal content!
      </Modal>
    </div>
  );
};
```

## Using the default styling
To use the default (scss) styling, import the file into another scss file. To alter the default styling, either work with the overridable scss variables, or override the styling done to the selectors completely.

### override scss variables
```scss
// Default values for each variable are shown below.
$react-modal-z-index: 10000;
$react-modal-content-padding: 50px;
$react-modal-content-max-width: 600px;
$react-modal-class: modal;

@import "node_modules/react-modal/styles";
```

### override selector styling
```scss
@import "node_modules/react-modal/styles";

.modal {
  // Override styling here...
}
```

## Setup customised Modal component
It's possible to make a custom modal component through the included factory function, allowing you to set relevant default properties so you don't have to every time you use the component.

```ts
// custom-modal.ts
import { modalFactory, IModalProps } from '@impactdk/react-modal';

import { MyCustomCloseButton } from "./buttons/my-custom-close-button";

const defaultProps: IModalProps = {
  ...
};

export const CustomModal = modalFactory("custom-modal", MyCustomCloseButton, "backdrop-animation", defaultProps);
```

And then use it as you would with the included Modal component:

```tsx
import React, { useRef } from 'react';
import { IModalRef } from '@impactdk/react-modal';

import { CustomModal } from "./custom-modal";

export const App = () => {
  const modalRef = useRef<IModalRef>();

  function openModal(): void {
    modalRef.current.open();
  }

  return (
    <div className="app">
      <button onClick={openModal}>Open modal</button>
      <CustomModal ref={modalRef}>
        This is the Modal content!
      </CustomModal>
    </div>
  );
};
```
npm package: @impactdk/svg
Description: Optimize and transform SVGs to inline consts in JavaScript/TypeScript file
Author: Jacob Overgaard
Latest version: 1.0.2

# svg

This package is a compilation of different tools to transform SVGs including a binary to convert a folder into inline SVGs in TypeScript.

# Usage

Example folder structure:

* icons/facebook.svg
* icons/this-is-a-subfolder/youtube.svg

Transform all svgs inside the icons folder with this command:

```bash
transform-svg ./icons ./generated.ts
```

## Configuration

Optional watch flag to watch folder continuously for changes:

```bash
transform-svg ./icons ./generated.ts --watch
```

Optional path to SVGO config

```bash
transform-svg ./icons ./generated.ts --svgo='./svgo-config.json'
```

Config json file follows [SVGO](https://github.com/svg/svgo) config standard:

```json
[
    { "removeXMLNS": true },
    { "removeViewBox": false },
    { "removeDimensions": true }
]
```

## Output

Example contents of the outputted file `generated.ts`:

```typescript
export const facebook =
    '<svg #facebook class="svg-facebook svg-icon" viewBox="0 0 50 50"><circle fill="#FED00F" cx="25" cy="25" r="25"/><path fill="#33363B" d="M29 15h3.5c.3 0 .5-.2.5-.5v-4c0-.3-.2-.5-.5-.5h-4c-3.7 0-6.5 2.8-6.5 6.5V21h-4.5c-.3 0-.5.2-.5.5v4c0 .3.2.5.5.5H22v13.5c0 .3.2.5.5.5h4c.3 0 .5-.2.5-.5V26h4.5c.2 0 .4-.2.5-.4l1-4c0-.1 0-.3-.1-.4-.1-.1-.2-.2-.4-.2H27v-4c0-1.1.9-2 2-2z"/></svg>';
export const thisIsASubfolderYoutube =
    '<svg #thisIsASubfolderYoutube class="svg-this-is-a-subfolder-youtube svg-icon" viewBox="0 0 32 32"><path fill="#444" d="M31.7 9.6s-.3-2.2-1.3-3.2c-1.2-1.3-2.6-1.3-3.2-1.4-4.5-.3-11.2-.3-11.2-.3s-6.7 0-11.2.3c-.6.1-2 .1-3.2 1.4C.6 7.4.3 9.6.3 9.6S0 12.2 0 14.8v2.4c0 2.6.3 5.2.3 5.2s.3 2.2 1.3 3.2c1.2 1.3 2.8 1.2 3.5 1.4 2.6.2 10.9.3 10.9.3s6.7 0 11.2-.3c.6-.1 2-.1 3.2-1.4 1-1 1.3-3.2 1.3-3.2s.3-2.6.3-5.2v-2.4c0-2.6-.3-5.2-.3-5.2zm-19 10.6v-9l8.6 4.5-8.6 4.5z"/></svg>';
```