c3-components 0.0.1 → 0.0.3

package/lib/c3-file-viewer/models/file-viewer-config.model.d.ts

@@ -0,0 +1,48 @@
+import { HttpClient } from '@angular/common/http';
+export interface C3FileViewerConfig {
+    btnContainerClass?: string;
+    btnClass?: string;
+    btnSubClass?: string;
+    zoomFactor?: number;
+    containerBackgroundColor?: string;
+    wheelZoom?: boolean;
+    allowFullscreen?: boolean;
+    allowKeyboardNavigation?: boolean;
+    customClient?: HttpClient['get'];
+    minHeight?: number | string;
+    minWidth?: number | string;
+    width?: number | string;
+    maxHeight?: number | string;
+    height?: number | string;
+    maxWidth?: number | string;
+    btnShow?: {
+        zoomIn?: boolean;
+        zoomOut?: boolean;
+        rotateClockwise?: boolean;
+        rotateCounterClockwise?: boolean;
+        next?: boolean;
+        prev?: boolean;
+        reset?: boolean;
+    };
+    btnIcons?: {
+        zoomIn?: MultiBtn['btn'];
+        zoomOut?: MultiBtn['btn'];
+        rotateClockwise?: MultiBtn['btn'];
+        rotateCounterClockwise?: MultiBtn['btn'];
+        next?: MultiBtn['btn'];
+        prev?: MultiBtn['btn'];
+        fullscreen?: MultiBtn['btn'];
+        reset?: MultiBtn['btn'];
+    };
+    customBtns?: Array<{
+        name: string;
+        icon: MultiBtn['btn'];
+    }>;
+}
+interface MultiBtn {
+    btn: {
+        classes?: string;
+        text?: string;
+    };
+}
+export {};

package/lib/c3-file-viewer/models/file-viewer.d.ts

@@ -0,0 +1,65 @@
+import { BehaviorSubject, Observable } from 'rxjs';
+import { C3FileViewerConfig } from './file-viewer-config.model';
+import { FileMetadata } from './file-metadata';
+export declare class C3FileViewer {
+    private _config;
+    get config(): C3FileViewerConfig;
+    set config(value: C3FileViewerConfig);
+    config$: BehaviorSubject<C3FileViewerConfig>;
+    fullscreen$: BehaviorSubject<Boolean>;
+    customFile$: BehaviorSubject<any>;
+    index$: BehaviorSubject<number>;
+    loading: boolean;
+    currentIndex: number;
+    get currentFile(): FileMetadata;
+    style: {
+        transform: string;
+        msTransform: string;
+        oTransform: string;
+        webkitTransform: string;
+        minHeight: string;
+        maxHeight: string;
+        height: string;
+        minWidth: string;
+        maxWidth: string;
+        width: string;
+    };
+    styleHeight: string;
+    hovered: boolean;
+    set files(value: FileMetadata[]);
+    get files(): FileMetadata[];
+    private _files;
+    filesObjectUrl: Array<FileMetadata & {
+        objectUrl?: Observable<string>;
+    }>;
+    private scale;
+    private rotation;
+    private translateX;
+    private translateY;
+    private prevX;
+    private prevY;
+    constructor({ config, files, }: {
+        config?: C3FileViewerConfig;
+        files?: FileMetadata[];
+    });
+    createObjectURL(file: FileMetadata): Observable<string>;
+    getFile(location: string): Observable<Blob>;
+    previousImage(event: KeyboardEvent | MouseEvent): void;
+    nextImage(event: KeyboardEvent | MouseEvent): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    scrollZoom(evt: WheelEvent): boolean;
+    rotateClockwise(): void;
+    rotateCounterClockwise(): void;
+    onLoad(file: FileMetadata): void;
+    onLoadStart(file: FileMetadata): void;
+    imageNotFound(file: FileMetadata): void;
+    onDragOver(evt: DragEvent): void;
+    onDragStart(evt: DragEvent): void;
+    toggleFullscreen(): void;
+    reset(): void;
+    private canNavigate;
+    private updateStyle;
+    private valueToCss;
+    private mergeConfig;
+}

package/lib/c3-file-viewer/models/http.client.d.ts

@@ -0,0 +1,14 @@
+import { HttpContext, HttpHeaders, HttpParams } from '@angular/common/http';
+export interface HttpClientOptions {
+    headers?: HttpHeaders | {
+        [header: string]: string | string[];
+    };
+    context?: HttpContext;
+    observe?: 'body';
+    params?: HttpParams | {
+        [param: string]: string | number | boolean | ReadonlyArray<string | number | boolean>;
+    };
+    reportProgress?: boolean;
+    responseType: 'blob';
+    withCredentials?: boolean;
+}

package/lib/c3-file-viewer/styles/_c3-file-viewer.sass

@@ -0,0 +1,116 @@
+=c3-file-viewer($theme)
+  .container
+    position: relative
+    width: 100%
+    display: flex
+    justify-content: center
+    align-items: center
+    overflow: hidden
+
+    .btn-container
+      position: absolute
+      z-index: 98
+      text-align: right
+      bottom: 0
+      right: 0
+      width: 100%
+
+    & img
+      max-width: 100%
+      max-height: 100%
+
+    & a,
+    button
+      z-index: 99
+      position: relative
+
+      &:not(:disabled)
+        cursor: pointer
+
+  button.default,
+  a.default
+    height: 40px
+    width: 40px
+    opacity: 0.7
+    transition: opacity 200ms
+
+  button.default:hover,
+  a.default:hover
+    opacity: 1
+
+  button.default:disabled,
+  a.default:disabled
+    opacity: 0.25
+
+  .nav-button-container > button,
+  .nav-button-container > a
+    position: relative
+    right: 0
+    margin: 0 10px
+
+  .nav-button-container
+    text-align: center
+    position: absolute
+    z-index: 98
+    bottom: 50px
+    left: 0
+    right: 0
+
+  .spinner-container
+    position: absolute
+    left: 0
+    right: 0
+    top: 0
+    bottom: 0
+    width: 60px
+    height: 60px
+    margin: auto
+    padding: 10px
+    background-color: rgba(0, 0, 0, 0.4)
+    border-radius: 25%
+
+  .spinner
+    border-width: 7px
+    border-style: solid
+    border-color: #ccc
+    border-bottom-color: #222
+    border-radius: 50%
+    height: 100%
+    width: 100%
+    box-sizing: border-box
+    -webkit-animation: rotation 2s linear infinite
+    /* Safari 4+ */
+    -moz-animation: rotation 2s linear infinite
+    /* Fx 5+ */
+    -o-animation: rotation 2s linear infinite
+    /* Opera 12+ */
+    animation: rotation 2s linear infinite
+    /* IE 10+, Fx 29+ */
+
+  @keyframes rotation
+    0%
+      -webkit-transform: rotate(0deg)
+    100%
+      -webkit-transform: rotate(359deg)
+
+  @-webkit-keyframes rotation
+    0%
+    -webkit-transform: rotate(0deg)
+    100%
+    -webkit-transform: rotate(359deg)
+
+  @-moz-keyframes rotation
+    0%
+    -webkit-transform: rotate(0deg)
+    100%
+    -webkit-transform: rotate(359deg)
+
+  @-o-keyframes rotation
+    0%
+    -webkit-transform: rotate(0deg)
+    100%
+    -webkit-transform: rotate(359deg)
+
+  .c3-file-viewer-pdf
+    height: 100%
+    width: 100%

package/lib/c3-safe-url/pipes/c3-safe-url.pipe.d.ts

@@ -0,0 +1,10 @@
+import { PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i0 from "@angular/core";
+export declare class C3SafeUrlPipe implements PipeTransform {
+    private sanitizer;
+    constructor(sanitizer: DomSanitizer);
+    transform(url: string | null): import("@angular/platform-browser").SafeResourceUrl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3SafeUrlPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<C3SafeUrlPipe, "c3SafeUrl", true>;
+}

package/lib/c3-styles/_c3-core.sass

@@ -0,0 +1,8 @@
+@use "./c3-root-variables" as *
+@use "../c3-dropdown/styles/_c3-dropdown" as *
+@use "../c3-file-viewer/styles/_c3-file-viewer" as *
+
+=c3-core($theme)
+  @include c3-root-variables($theme)
+  @include c3-material-dropdown($theme)
+  @include c3-file-viewer($theme)

package/lib/c3-styles/_c3-root-variables.sass

@@ -0,0 +1,107 @@
+@use "sass:map"
+@use "sass:meta"
+@use "./utils" as utils
+@use "@angular/material" as mat
+
+=c3-root-variables($theme)
+  :root
+    $primary-palette: map.get($theme, primary)
+    $accent-palette: map.get($theme, accent)
+    $warn-palette: map.get($theme, warn)
+    $background-palette: map.get($theme, background)
+    $foreground-palette: map.get($theme, foreground)
+
+    $is-dark-theme: map-get($theme, is-dark)
+
+    $primary-color: map.get($primary-palette, 500)
+    $primary-color-light: map.get($primary-palette, 300)
+    $primary-color-dark: map.get($primary-palette, 700)
+
+    $accent-color: map.get($accent-palette, 500)
+    $accent-color-light: map.get($accent-palette, 300)
+    $accent-color-dark: map.get($accent-palette, 700)
+
+    $warn-color: map.get($warn-palette, 500)
+    $warn-color-light: map.get($warn-palette, 300)
+    $warn-color-dark: map.get($warn-palette, 700)
+
+    $background-status-bar: map.get($background-palette, status-bar)
+    $background-app-bar: map.get($background-palette, app-bar)
+    $background-background: map.get($background-palette, background)
+    $background-hover: map.get($background-palette, hover)
+    $background-card: map.get($background-palette, card)
+    $background-dialog: map.get($background-palette, dialog)
+    $background-disabled-button: map.get($background-palette, disabled-button)
+    $background-raised-button: map.get($background-palette, raised-button)
+    $background-focused-button: map.get($background-palette, focused-button)
+    $background-selected-button: map.get($background-palette, selected-button)
+    $background-selected-disabled-button: map.get($background-palette, selected-disabled-button)
+    $background-disabled-button-toggle: map.get($background-palette, disabled-button-toggle)
+    $background-unselected-chip: map.get($background-palette, unselected-chip)
+    $background-disabled-list-option: map.get($background-palette, disabled-list-option)
+    $background-tooltip: map.get($background-palette, tooltip)
+
+    $foreground-base: map.get($foreground-palette, base)
+    $foreground-divider: map.get($foreground-palette, divider)
+    $foreground-dividers: map.get($foreground-palette, dividers)
+    $foreground-disabled: map.get($foreground-palette, disabled)
+    $foreground-disabled-button: map.get($foreground-palette, disabled-button)
+    $foreground-disabled-text: map.get($foreground-palette, disabled-text)
+    $foreground-elevation: map.get($foreground-palette, elevation)
+    $foreground-hint-text: map.get($foreground-palette, hint-text)
+    $foreground-secondary-text: map.get($foreground-palette, secondary-text)
+    $foreground-icon: map.get($foreground-palette, icon)
+    $foreground-icons: map.get($foreground-palette, icons)
+    $foreground-text: map.get($foreground-palette, text)
+    $foreground-slider-min: map.get($foreground-palette, slider-min)
+    $foreground-slider-off: map.get($foreground-palette, slider-off)
+    $foreground-slider-off-active: map.get($foreground-palette, slider-off-active)
+
+    --primary-color: #{$primary-color}
+    --primary-color-light: #{$primary-color-light}
+    --primary-color-dark: #{$primary-color-dark}
+
+    --accent-color: #{$accent-color}
+    --accent-color-light: #{$accent-color-light}
+    --accent-color-dark: #{$accent-color-dark}
+
+    --warn-color: #{$warn-color}
+    --warn-color-light: #{$warn-color-light}
+    --warn-color-dark: #{$warn-color-dark}
+
+    --background-status-bar: #{$background-status-bar}
+    --background-app-bar: #{$background-app-bar}
+    --background-background: #{$background-background}
+    --background-hover: #{$background-hover}
+    --background-card: #{$background-card}
+    --background-dialog: #{$background-dialog}
+    --background-disabled-button: #{$background-disabled-button}
+    --background-raised-button: #{$background-raised-button}
+    --background-focused-button: #{$background-focused-button}
+    --background-selected-button: #{$background-selected-button}
+    --background-selected-disabled-button: #{$background-selected-disabled-button}
+    --background-disabled-button-toggle: #{$background-disabled-button-toggle}
+    --background-unselected-chip: #{$background-unselected-chip}
+    --background-disabled-list-option: #{$background-disabled-list-option}
+    --background-tooltip: #{$background-tooltip}
+
+    @if $is-dark-theme
+      --background-card-table: #{utils.get-color-from-palette($accent-palette)}
+    @else
+      --background-card-table: #{utils.get-color-from-palette($accent-palette, 100)}
+
+    --foreground-base: #{$foreground-base}
+    --foreground-divider: #{$foreground-divider}
+    --foreground-dividers: #{$foreground-dividers}
+    --foreground-disabled: #{$foreground-disabled}
+    --foreground-disabled-button: #{$foreground-disabled-button}
+    --foreground-disabled-text: #{$foreground-disabled-text}
+    --foreground-elevation: #{$foreground-elevation}
+    --foreground-hint-text: #{$foreground-hint-text}
+    --foreground-secondary-text: #{$foreground-secondary-text}
+    --foreground-icon: #{$foreground-icon}
+    --foreground-icons: #{$foreground-icons}
+    --foreground-text: #{$foreground-text}
+    --foreground-slider-min: #{$foreground-slider-min}
+    --foreground-slider-off: #{$foreground-slider-off}
+    --foreground-slider-off-active: #{$foreground-slider-off-active}

package/lib/c3-styles/_utils.sass

@@ -0,0 +1,27 @@
+@use "sass:map"
+@use "sass:meta"
+@use "@angular/material" as mat
+@function get-contrast-color-from-palette($palette, $hue)
+  @return map.get(map.get($palette, contrast), $hue)
+
+@function get-color-from-palette($palette, $hue: default, $opacity: null)
+  // If hueKey is a number between zero and one, then it actually contains an
+  // opacity value, so recall this function with the default hue and that given opacity.
+  @if meta.type-of($hue) ==number and $hue>=0 and $hue <=1
+    @return get-color-from-palette($palette, default, $hue)
+
+  $color: map.get($palette, $hue)
+
+  @if (meta.type-of($color) !=color)
+    // If the $color resolved to something different from a color (e.g. a CSS variable),
+    // we can't apply the opacity anyway so we return the value as is, otherwise Sass can
+    // throw an error or output something invalid.
+    @return $color
+
+  @return rgba($color, if($opacity==null, opacity($color), $opacity))
+
+@function get-color-config($theme, $default: null)
+  @if map.has-key($theme, color)
+    @return map.get($theme, color)
+
+  @return $default

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "c3-components",
-  "version": "0.0.1",
+  "version": "0.0.3",
+  "description": "C3 Components Library",
+  "author": "Kroenen62",
+  "license": "MIT",
+  "homepage": "https://github.com/Kroenen62/c3-components",
   "peerDependencies": {
     "@angular/common": "^15.2.0",
     "@angular/core": "^15.2.0",
@@ -11,9 +15,6 @@
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
-  "files": [
-    "./_index.scss"
-  ],
   "exports": {
     ".": {
       "sass": "./_index.scss",

package/public-api.d.ts

@@ -0,0 +1,30 @@
+export * from './lib/c3-file-viewer/models/http.client';
+/**
+ * Dropdown
+ */
+export * from './lib/c3-dropdown/components/c3-dropdown.component';
+export * from './lib/c3-dropdown/directives/c3-dropdown.trigger';
+export * from './lib/c3-dropdown/c3-dropdown.module';
+/**
+ * Dialog
+ */
+export * from './lib/c3-dialog/components/c3-dialog-confirm.component';
+export * from './lib/c3-dialog/components/c3-dialog-prompt.component';
+export * from './lib/c3-dialog/components/c3-dialog-embed-child.component';
+export * from './lib/c3-dialog/services/c3-dialog.service';
+export * from './lib/c3-dialog/c3-dialog.module';
+/**
+ * File Viewer
+ */
+export * from './lib/c3-file-viewer/components/public/c3-file-viewer/c3-file-viewer.component';
+export * from './lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.component';
+export * from './lib/c3-file-viewer/directives/full-screen.directive';
+export * from './lib/c3-file-viewer/models/custom-file-event.model';
+export * from './lib/c3-file-viewer/models/file-viewer-config.model';
+export * from './lib/c3-file-viewer/models/file-viewer';
+export * from './lib/c3-file-viewer/models/file-metadata';
+export * from './lib/c3-file-viewer/c3-file-viewer.module';
+/**
+ * Safe Url
+ */
+export * from './lib/c3-safe-url/pipes/c3-safe-url.pipe';

package/src/lib/c3-file/c3-input-file/components/c3-input-file/c3-input-file.component.scss

@@ -0,0 +1,3 @@
+input {
+  display: none;
+}