open-index/open-npm huggingface dataset:
npm package: @southmountaintech/progressive-image
Description: A web component that renders a small image initially, and then the larger image progressively.
Latest version: 1.0.1

# ProgressiveImage

## Description
A web component that renders a small image initially, and then the larger image progressively.

## Installation
```shell script
npm install @southmountaintech/progressive-image
```

## Usage

In order to use this you need 3 thing:
1. An image you would like to display progressively.
2. A smaller, poorer quality version of the image you want to render.  I choose to make it 27x17.
3. The aspect ratio of the real image.  ```(height/width) X 100 = aspect ratio```.

Once you have those things, you have to decide how you would like to add it to you page.

## Example

You can add the ```progressive-image.web-component.js``` file to your html page.  Then use the component as an html tag.

For example, suppose I have an image named ```my-image.jpg``` and I create the small-poorer quality image ```my-image-small.jpg```.
The large images dimensions are ```1920x884``` which makes the aspect ratio ```(884/1920) X 100 = ~46.0```.
After having all these values, the html file would look like this.

```html

<html>
  <head>
    <script src="progressive-image.web-component.js"></script>
  </head>
  <body>
    <progressive-image
      smallimgsrc="my-image-small.jpg"
      largeimgsrc="my-image.jpg"
      alt="My Image"
      aspectratio="46"
    >
    </progressive-image>
  </body>
</html>

```

![DEMO](https://github.com/southmountaintech/webcomponents/blob/master/ProgressiveImage/demo.gif)

## Build
```shell script
npm run build
```

## Run Local
```shell script
cd public
npx http-server
```
npm package: @southsystem/authentication
Description: ```typescript // file: src/app/app.module.ts import { SSTSimpleStrategy, SSTKeycloakStrategy, SSTAuthenticationModule } from '@southsystem/authentication';
Latest version: 0.1.4

# Authentication Module

```typescript
// file: src/app/app.module.ts
import { SSTSimpleStrategy, SSTKeycloakStrategy, SSTAuthenticationModule } from '@southsystem/authentication';

const keycloakConfig = {
  enable: true,
  realm: 'realm',
  url: 'https://keycloak/auth',
  clientId: 'client-id'
};

const simpleConfig = {
  enable: true
}

// ...
  imports: [
    SSTAuthenticationModule.forRoot(SSTSimpleStrategy, simpleConfig),
    // or
    SSTAuthenticationModule.forRoot(SSTKeycloakStrategy, keycloakConfig),
  ],
// ...
```
npm package: @southsystem/dataview
Description: ```typescript // ./app.module.ts
Latest version: 0.4.13

# Dataview Module

```typescript
// ./app.module.ts

@NgModule({
  imports: [
    // ...
    SSTDataviewModule,
  ]
})
export class DataModule { }
```

```typescript
// ./user.component.ts
import { SSTPaginationType, Pagination } from '@southsystem/dataview';

public infinitePagination = SSTPaginationType.infinite;

public headers = [
  { label: 'Name', value: 'name', sortable: true },
  { label: 'Email' }
  { label: 'Category', value: 'name', sortable: true }
];

public sortTypes = [
  { label: 'Alphabetic', sort: 'title', orderBy: 'ASC' },
  { label: 'Name', sort: 'name', orderBy: 'ASC' }
];

mountHttpGet(): (params: HttpParams) => Observable<Pagination<any[]>> {
  return (params: HttpParams) => {
    return this.httpClient.get<Pagination<any[]>>('/api/v1/users', { params });
  }
}
```

```html
<!-- ./user.component.html -->
<sst-dataview-table
  [headers]="headers"
  [getHttpObservable]="mountHttpGet()">
  <ng-template #display let-user>
    <td>{{user.name}}</td>
    <td>{{user.email}}</td>
    <td>{{user.category}}</td>
  </ng-template>
</sst-dataview-table>


<sst-dataview-cards
  [paginationType] = "infinitePagination"
  [cols]="3"
  [sortTypes]="sortTypes"
  [getHttpObservable]="mountHttpGet()">
  <ng-template #display let-user>
    <div class="card-body">
      <h3 class="card-title">{{user.name}}</h3>
      <h6 class="card-subtitle mb-2 text-muted">{{user.email}}</h6>
      <div>
        <span class="badge badge-primary">{{user.category}}</span>
      </div>
    </div>
  </ng-template>
</sst-dataview-cards>

```
npm package: @southsystem/hello
Description: Our first module! It's so nice
Latest version: 0.1.2

# Hello South System
Our first module! It's so nice

```
npm i -S @southsystem/hello
````

```javascript
// src/app.module.ts
import { HelloModule } from '@southsystem/hello';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HelloModule // <-- here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
```


```html
<!-- src/app.component.html -->
<sst-hello></sst-hello>
```