vynil-ui 0.0.2 → 0.1.0-beta.1

package/README.md

@@ -1,27 +1,24 @@
-# VynilUi
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.3.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+# VynilUi
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project vynil-ui` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project vynil-ui`.
+> Note: Don't forget to add `--project vynil-ui` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build vynil-ui` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build vynil-ui`, go to the dist folder `cd dist/vynil-ui` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test vynil-ui` 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.

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/vynil-ui",
+  "assets": ["./styles/variables.scss"],
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,56 +1,12 @@
 {
   "name": "vynil-ui",
-  "version": "0.0.2",
+  "version": "0.1.0-beta.1",
   "peerDependencies": {
-    "@angular/animations": "^6.0.2",
-    "@angular/cdk": "^6.0.2",
-    "@angular/common": "^6.0.2",
-    "@angular/compiler": "^6.0.2",
-    "@angular/core": "^6.0.2",
-    "@angular/forms": "^6.0.2",
-    "@angular/http": "^6.0.2",
-    "@angular/material": "^6.0.2",
-    "@angular/platform-browser": "^6.0.2",
-    "@angular/platform-browser-dynamic": "^6.0.2",
-    "@angular/router": "^6.0.2",
-    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
-    "ace-builds": "^1.3.3",
-    "angular-font-awesome": "^3.1.2",
-    "core-js": "^2.5.4",
-    "font-awesome": "^4.7.0",
-    "monaco-editor": "^0.13.1",
-    "ng2-ace-editor": "^0.3.7",
-    "ngx-monaco": "^0.8.0",
-    "rxjs": "^6.0.0",
-    "zone.js": "^0.8.26"
+    "@angular/common": "^21.1.4",
+    "@angular/core": "^21.1.4"
   },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.6.3",
-    "@angular/cli": "~6.0.3",
-    "@angular/compiler-cli": "^6.0.2",
-    "@angular/language-service": "^6.0.2",
-    "@types/node": "~8.9.4",
-    "codelyzer": "~4.2.1",
-    "ng-packagr": "^4.4.5",
-    "node-sass": "^4.9.0",
-    "protractor": "~5.3.0",
-    "raw-loader": "^0.5.1",
-    "sass-loader": "^7.0.1",
-    "ts-node": "~5.0.1",
-    "tslint": "~5.9.1",
-    "typescript": "~2.7.2"
-  },
-  "main": "bundles/vynil-ui.umd.js",
-  "module": "fesm5/vynil-ui.js",
-  "es2015": "fesm2015/vynil-ui.js",
-  "esm5": "esm5/vynil-ui.js",
-  "esm2015": "esm2015/vynil-ui.js",
-  "fesm5": "fesm5/vynil-ui.js",
-  "fesm2015": "fesm2015/vynil-ui.js",
-  "typings": "vynil-ui.d.ts",
-  "metadata": "vynil-ui.metadata.json",
-  "sideEffects": false,
   "dependencies": {
-    "tslib": "^1.9.0"
-  }
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
 }

package/src/lib/components/basic/button/button.component.html

@@ -0,0 +1,10 @@
+<div
+    class="button"
+    [ngClass]="{
+        'lean': lean,
+        'disabled': disabled,
+        'centered': centered
+    }"
+    (click)="onClick()">
+    <ng-content></ng-content>
+</div>

package/src/lib/components/basic/button/button.component.scss

@@ -0,0 +1,28 @@
+.button {
+    cursor: pointer;
+    filter: brightness(90%);
+    display: flex;
+    align-items: center;
+    color: var(--vui-color-text);
+    font-size: var(--vui-variable-font-size-m);
+    background-color: var(--vui-color-primary);
+    border-radius: var(--vui-variable-radius-s);
+    padding: var(--vui-variable-padding-s) var(--vui-variable-padding);
+    
+
+    &.lean {
+        padding: var(--vui-variable-padding-xs) var(--vui-variable-padding-s);
+    }
+
+    &.disabled {
+        opacity: 0.5;
+    }
+
+    &.centered {
+        justify-content: center;
+    }
+
+    &:not(.disabled):hover {
+        filter: brightness(105%);
+    }
+}

package/src/lib/components/basic/button/button.component.ts

@@ -0,0 +1,29 @@
+import {
+    Input,
+    Output,
+    Component,
+    EventEmitter,
+} from '@angular/core';
+
+@Component({
+    selector: 'vui-button',
+    templateUrl: './button.component.html',
+    styleUrls: ['./button.component.scss'],
+    standalone: false
+})
+export class ButtonComponent {
+    @Input() lean?: boolean;
+    @Input() centered?: boolean;
+    @Input() disabled?: boolean;
+    @Output() clicked: EventEmitter<void>;
+
+    public constructor() {
+        this.clicked = new EventEmitter<void>();
+    }
+
+    public onClick(): void {
+        if (!this.disabled) {
+            this.clicked.emit();
+        }
+    }
+}

package/src/lib/components/basic/text/text.component.html

@@ -0,0 +1,11 @@
+<div
+    class="text"
+    [ngClass]="size || ''"
+    [ngStyle]="{
+        'color': color || 'auto',
+        'padding': padding || '0',
+        'text-align': align || 'left',
+        'font-weight': weight || '400'
+    }">
+    <ng-content></ng-content>
+</div>

package/src/lib/components/basic/text/text.component.scss

@@ -0,0 +1,41 @@
+.text {
+    width: auto;
+    color: var(--vui-color-text);
+    font-size: var(--vui-variable-font-size-m);
+    line-height: var(--vui-variable-font-size-m);
+
+    &.xsmall, &.xs {
+        font-size: var(--vui-variable-font-size-xs);
+        line-height: var(--vui-variable-font-size-xs);
+    }
+
+    &.small, &.s {
+        font-size: var(--vui-variable-font-size-s);
+        line-height: var(--vui-variable-font-size-s);
+    }
+
+    &.large, &.l {
+        font-size: var(--vui-variable-font-size-l);
+        line-height: var(--vui-variable-font-size-l);
+    }
+
+    &.xlarge, &.xl {
+        font-size: var(--vui-variable-font-size-xl);
+        line-height: var(--vui-variable-font-size-xl);
+    }
+
+    &.header3, &.h3, &.header, &.h {
+        font-size: var(--vui-variable-font-size-h3);
+        line-height: var(--vui-variable-font-size-h3);
+    }
+
+    &.header2, &.h2 {
+        font-size: var(--vui-variable-font-size-h2);
+        line-height: var(--vui-variable-font-size-h2);
+    }
+
+    &.header1, &.h1 {
+        font-size: var(--vui-variable-font-size-h1);
+        line-height: var(--vui-variable-font-size-h1);
+    }
+}

package/src/lib/components/basic/text/text.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+
+export enum VynilUITextSize {
+    ExtraSmall = 'xsmall',
+    Small = 'small',
+    Medium = 'medium',
+    Large = 'large',
+    Header3 = 'header3',
+    Header2 = 'header2',
+    Header1 = 'header1',
+}
+
+@Component({
+    selector: 'vui-text',
+    templateUrl: './text.component.html',
+    styleUrls: ['./text.component.scss'],
+    standalone: false
+})
+export class TextComponent {
+    @Input() size?: string;
+    @Input() color?: string;
+    @Input() align?: string;
+    @Input() weight?: string;
+    @Input() padding?: string;
+}

package/src/lib/components/images/icon/icon.component.html

@@ -0,0 +1,5 @@
+<div
+    class="icon"
+    [ngClass]="size + ' ' + (actionable ? 'actionable' : '') + ' ' + (disabled ? 'disabled' : '')"
+    [ngStyle]="styleObject">
+</div>

package/src/lib/components/images/icon/icon.component.scss

@@ -0,0 +1,43 @@
+:host {
+    display: flex;
+    align-items: center;
+}
+
+.icon {
+    background-color: var(--vui-color-text);
+    width: var(--vui-variable-icon-size-m);
+    height: var(--vui-variable-icon-size-m);
+
+    &.small, &.s {
+        width: var(--vui-variable-icon-size-s);
+        height: var(--vui-variable-icon-size-s);
+    }
+
+    &.button, &.b {
+        width: var(--vui-variable-icon-size-button);
+        height: var(--vui-variable-icon-size-button);
+    }
+
+    &.large, &.l {
+        width: var(--vui-variable-icon-size-l);
+        height: var(--vui-variable-icon-size-l);
+    }
+
+    &.extra-large, &.xl {
+        width: var(--vui-variable-icon-size-xl);
+        height: var(--vui-variable-icon-size-xl);
+    }
+
+    &.actionable {
+        opacity: 0.85;
+        cursor: pointer;
+
+        &:hover:not(.disabled) {
+            opacity: 1;
+        }
+    }
+
+    &.disabled {
+        opacity: 0.3;
+    }
+}

package/src/lib/components/images/icon/icon.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input } from '@angular/core';
+
+export enum VynilUIIconSize {
+    Small = 'small',
+    Button = 'button',
+    Medium = 'medium',
+    Large = 'large',
+}
+
+@Component({
+    selector: 'vui-icon',
+    templateUrl: './icon.component.html',
+    styleUrls: ['./icon.component.scss'],
+    standalone: false
+})
+export class IconComponent {
+    @Input() size: string;
+    @Input() icon?: string;
+    @Input() color?: string;
+    @Input() rotation?: number;
+    @Input() disabled?: boolean;
+    @Input() actionable?: boolean;
+    public IconSizeEnum = VynilUIIconSize;
+
+    constructor() {
+        this.size = VynilUIIconSize.Medium;
+    }
+
+    public get styleObject(): { [key: string]: string } {
+        let styleObject: { [key: string]: string } = {};
+        if (this.color) {
+            styleObject['backgroundColor'] = this.color;
+        }
+        if (this.rotation) {
+            styleObject['transform'] = 'rotate(' + this.rotation + 'deg)';
+        }
+        styleObject['mask'] = 'url(./assets/icons/' + (this.icon || 'cog') + '.svg)  no-repeat center',
+        styleObject['-webkit-mask'] = styleObject['mask'];
+        return styleObject;
+    }
+}

package/src/lib/components/images/image/image.component.html

@@ -0,0 +1,19 @@
+<div
+    *ngIf="useBackgroundImage"
+    class="image-wrapper"
+    [ngClass]="{'circle': circle}"
+    [ngStyle]="styles">
+</div>
+<img
+    *ngIf="url && !useBackgroundImage"
+    [src]="sanitizedUrl"
+    class="image-wrapper"
+    [ngClass]="{'circle': circle}"
+    [ngStyle]="styles"
+>
+<div
+    *ngIf="!url && !useBackgroundImage"
+    class="image-wrapper"
+    [ngClass]="{'circle': circle}"
+    [ngStyle]="styles"
+>

package/src/lib/components/images/image/image.component.scss

@@ -0,0 +1,18 @@
+::host {
+    margin: 0;
+    padding: 0;
+}
+
+.image-wrapper {
+    margin: 0;
+    padding: 0;
+    display: block;
+    overflow: hidden;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: var(--vui-color-background-darker);
+
+    &.circle {
+        border-radius: 50%;
+    }
+}

package/src/lib/components/images/image/image.component.ts

@@ -0,0 +1,58 @@
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { Component, Input, SecurityContext } from '@angular/core';
+
+const DEFAULT_DIMENSION = 'auto';
+
+interface IStyleObject {
+    [key: string]: string | null
+}
+
+@Component({
+    selector: 'vui-image',
+    templateUrl: './image.component.html',
+    styleUrls: ['./image.component.scss'],
+    standalone: false
+})
+export class ImageComponent {
+    @Input() url?: string;
+    @Input() width?: string;
+    @Input() height?: string;
+    @Input() circle?: boolean;
+    @Input() border?: string;
+    @Input() borderRadius?: string;
+    @Input() backgroundSize?: string;
+    @Input() useBackgroundImage?: boolean;
+
+    public get sanitizedUrl(): SafeUrl | undefined {
+        return this.url
+            && this.domSanitizer.bypassSecurityTrustUrl(this.url)
+            || undefined;
+    }
+
+    public get styles(): IStyleObject {
+        let styles: IStyleObject = {
+            'width': this.width || DEFAULT_DIMENSION,
+            'height': this.height || DEFAULT_DIMENSION,
+            'min-width': this.width || DEFAULT_DIMENSION,
+            'min-height': this.height || DEFAULT_DIMENSION,
+        };
+        if (this.useBackgroundImage && this.url) {
+            styles = {
+                ...styles,
+                'background-image': this.domSanitizer.sanitize(SecurityContext.STYLE, 'url(' + this.url + ')'),
+                'background-size': this.backgroundSize || 'cover'
+            }
+        }
+        if (this.border !== undefined) {
+            styles['border'] = this.border;
+        }
+        if (this.borderRadius !== undefined) {
+            styles['border-radius'] = this.borderRadius;
+        }
+        return styles;
+    }
+
+    public constructor(
+        private domSanitizer: DomSanitizer,
+    ) {}
+}

package/src/lib/components/inputs/color-input/color-input.component.html

@@ -0,0 +1,11 @@
+<vui-view [relative]="true">
+    <div (click)="toggleSelectorVisible(true)" [ngClass]="{'small': small}" [ngStyle]="{'backgroundColor': colorValue}" class="color"></div>
+    <vui-modal [visible]="colorSelectorVisible">
+        <div class="selector-wrapper">
+            <vui-color-selector
+                [selectedColor]="colorValue"
+                (selected)="onColorSelect($event)">
+            </vui-color-selector>
+        </div>
+    </vui-modal>
+</vui-view>

package/src/lib/components/inputs/color-input/color-input.component.scss

@@ -0,0 +1,30 @@
+:host {
+    ::ng-deep {
+        .view {
+            overflow: visible !important;
+        }
+    }
+}
+
+.color {
+    cursor: pointer;
+    min-width: 30px;
+    min-height: 30px;
+    border-radius: 50%;
+    border: var(--vui-variable-border) solid var(--vui-color-background-lighter);
+
+    &.small {
+        min-width: 18px;
+        min-height: 18px;
+    }
+
+    &:hover {
+        border: var(--vui-variable-border) solid var(--vui-color-primary);
+    }
+}
+
+.selector-wrapper {
+    border-radius: 50px;
+    background-color: var(--vui-color-background);
+    padding: var(--vui-variable-padding-small);
+}

package/src/lib/components/inputs/color-input/color-input.component.ts

@@ -0,0 +1,64 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { Component, Input } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+const DEFAULT_VALUE = '#0096FF';
+
+@Component({
+    selector: 'vui-color-input',
+    templateUrl: './color-input.component.html',
+    styleUrls: ['./color-input.component.scss'],
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: ColorInputComponent,
+            multi: true,
+        },
+    ],
+    standalone: false
+})
+export class ColorInputComponent implements ControlValueAccessor {
+    @Input() small?: boolean;
+
+    public colorValue: string;
+    public colorSelectorVisible: boolean; 
+
+    public onTouch: (value: string) => void;
+    public onChange: (value: string) => void;
+
+    public set value(value: string){
+        if (value !== this.colorValue) {
+            this.colorValue = value;
+        }
+        this.onTouch(value);
+        this.onChange(value);
+    }
+
+    public constructor() {
+        this.colorValue = DEFAULT_VALUE;
+        this.colorSelectorVisible = false;
+        this.onTouch = () => {};
+        this.onChange = () => {};
+    }
+
+    public onColorSelect(value: string): void {
+        this.writeValue(value);
+        this.toggleSelectorVisible(false);
+    }
+
+    public writeValue(value: string): void {
+        this.value = value;
+    }
+
+    public registerOnChange(onChange: (value: string) => void): void {
+        this.onChange = onChange;
+    }
+
+    public registerOnTouched(onTouched: (value: string) => void): void {
+        this.onTouch = onTouched;
+    }
+
+    public toggleSelectorVisible(value: boolean): void {
+        this.colorSelectorVisible = value;
+    }
+}

package/src/lib/components/inputs/icon-input/icon-input.component.html

@@ -0,0 +1,13 @@
+<vui-view
+  class="icon-input"
+  flexDirection="row"
+  width="100%"
+  [relative]="true"
+  justifyContent="stretch">
+  @if (icon) {
+    <vui-view class="icon" alignItems="center" justifyContent="center" height="2rem" width="2rem" padding="0.1rem 0 0 0">
+      <vui-icon size="button" [icon]="icon"></vui-icon>
+    </vui-view>
+  }
+  <vui-input class="input" padding="0.5rem 0.5rem 0.5rem 1.75rem" [formControl]="control" type="text"></vui-input>
+</vui-view>

package/src/lib/components/inputs/icon-input/icon-input.component.scss

@@ -0,0 +1,19 @@
+:host {
+    flex: 1;
+}
+
+.icon-input {
+    .icon {
+        top: 0;
+        left: 0;
+        position: absolute;
+    }
+
+    .input {
+        flex: 1;
+
+        ::ng-deep input {
+            flex: 1;
+        }
+    }
+}

package/src/lib/components/inputs/icon-input/icon-input.component.ts

@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { Component, Input } from '@angular/core';
+import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+    selector: 'vui-icon-input',
+    templateUrl: './icon-input.component.html',
+    styleUrls: ['./icon-input.component.scss'],
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: IconInputComponent,
+            multi: true,
+        },
+    ],
+    standalone: false
+})
+export class IconInputComponent implements ControlValueAccessor {
+    @Input() icon?: string;
+
+    public control: FormControl<string>;
+
+    public onTouch: (value: string) => void;
+    public onChange: (value: string) => void;
+
+    set value(value: string){
+        if (value !== this.control.value) {
+            this.control.setValue(value);    
+        }
+        this.onChange(value);
+        this.onTouch(value);
+    }
+
+    public constructor() {
+        this.control = new FormControl<string>('', { nonNullable: true });
+        this.control.valueChanges.subscribe((value) => {
+            this.writeValue(value);
+        });
+        this.onTouch = () => {};
+        this.onChange = () => {};
+    }
+
+    public writeValue(value: string): void {
+        this.value = value;
+    }
+
+    public registerOnChange(onChange: (value: string) => void): void {
+        this.onChange = onChange;
+    }
+
+    public registerOnTouched(onTouched: (value: string) => void): void {
+        this.onTouch = onTouched;
+    }
+}