@kusena/wui-single 18.0.1

package/lib/components/page/page-overlay.service.d.ts

@@ -0,0 +1,25 @@
+import { Directionality } from "@angular/cdk/bidi";
+import { Overlay, OverlayContainer, OverlayKeyboardDispatcher, OverlayOutsideClickDispatcher, OverlayPositionBuilder, ScrollStrategyOptions } from "@angular/cdk/overlay";
+import { ApplicationRef, ComponentFactoryResolver, Injector, NgZone } from "@angular/core";
+import { Location as Location_2 } from '@angular/common';
+import { Dialog, DialogConfig } from "@angular/cdk/dialog";
+import * as i0 from "@angular/core";
+export declare class WuiPageOverlayContainer extends OverlayContainer {
+    setContainerElement(containerElement: HTMLElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WuiPageOverlayContainer, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WuiPageOverlayContainer>;
+}
+export declare class WuiPageOverlay extends Overlay {
+    private _pageOverlayContainer;
+    constructor(_scrollStrategies: ScrollStrategyOptions, _overlayContainer: WuiPageOverlayContainer, _componentFactoryResolver: ComponentFactoryResolver, _positionBuilder: OverlayPositionBuilder, _keyboardDispatcher: OverlayKeyboardDispatcher, _appRef: ApplicationRef, _injector: Injector, _ngZone: NgZone, _document: any, _directionality: Directionality, _location: Location_2, _outsideClickDispatcher: OverlayOutsideClickDispatcher);
+    setContainerElement(containerElement: HTMLElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WuiPageOverlay, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WuiPageOverlay>;
+}
+export declare class WuiPage extends Dialog {
+    private _customOverlay;
+    constructor(_overlay: WuiPageOverlay, _injector: Injector, _defaultOptions: DialogConfig, _parentDialog: Dialog, _overlayContainer: WuiPageOverlayContainer, _scrollStrategy: any);
+    setContainerElement(containerElement: HTMLElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WuiPage, [null, null, { optional: true; }, null, null, { optional: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WuiPage>;
+}

package/lib/components/page/page.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class PageComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PageComponent, "wui-page", never, {}, {}, never, ["wui-app-bar", ".wui-page-inner", ".wui-page-footer"], true, never>;
+}

package/lib/components/snackbar/snackbar.component.d.ts

@@ -0,0 +1,18 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { MessageService } from '../../services/message.service';
+import * as i0 from "@angular/core";
+export declare class SnackbarComponent implements OnInit, OnDestroy {
+    private messageService;
+    actionItems: any[];
+    label: string;
+    show: boolean;
+    private autocloseTimeoutId;
+    private readonly unsub;
+    constructor(messageService: MessageService);
+    open(label: string, autoclose?: boolean, actionItems?: any[]): void;
+    close(): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SnackbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SnackbarComponent, "wui-snackbar", never, {}, {}, never, never, true, never>;
+}

package/lib/components/toggle/toggle.component.d.ts

@@ -0,0 +1,21 @@
+import { ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class ToggleComponent implements ControlValueAccessor {
+    tabindex: import("@angular/core").InputSignal<number>;
+    change: import("@angular/core").OutputEmitterRef<boolean>;
+    checked: import("@angular/core").ModelSignal<boolean>;
+    disabled: import("@angular/core").WritableSignal<boolean>;
+    private isTouched;
+    private onChange;
+    private onTouched;
+    constructor();
+    onKeyDown(e: KeyboardEvent): void;
+    toggle(): void;
+    writeValue(value: boolean): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    private markAsTouched;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToggleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleComponent, "wui-toggle", never, { "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "change": "change"; "checked": "checkedChange"; }, never, ["*"], true, never>;
+}

package/lib/directives/menu.directive.d.ts

@@ -0,0 +1,17 @@
+import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from "@angular/cdk/menu";
+import * as i0 from "@angular/core";
+export declare class ContextMenuDirective extends CdkMenu {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ContextMenuDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ContextMenuDirective, "[wuiContextMenu]", never, {}, {}, never, never, true, never>;
+}
+export declare class ContextMenuItemDirective extends CdkMenuItem {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ContextMenuItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ContextMenuItemDirective, "[wuiContextMenuItem]", never, {}, {}, never, never, true, never>;
+}
+export declare class ContextMenuTriggerDirective extends CdkMenuTrigger {
+    menuPosBehavior: string;
+    handleDocumentEvent(event: Event): void;
+    open(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ContextMenuTriggerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ContextMenuTriggerDirective, "[wuiContextMenuTrigger]", ["wuiContextMenuTrigger"], { "menuTemplateRef": { "alias": "wuiContextMenuTrigger"; "required": false; }; "menuPosition": { "alias": "wuiContextMenuPosition"; "required": false; }; "menuData": { "alias": "wuiContextMenuTriggerData"; "required": false; }; "menuPosBehavior": { "alias": "wuiContextMenuPosBehavior"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/directives/nav.directive.d.ts

@@ -0,0 +1,30 @@
+import { NavService } from '../services/nav.service';
+import * as i0 from "@angular/core";
+export declare class NavRootDirective {
+    private navService;
+    name: import("@angular/core").InputSignal<string>;
+    params: import("@angular/core").InputSignal<Record<string, unknown>>;
+    navigated: import("@angular/core").OutputEmitterRef<void>;
+    navigateToRoot(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavRootDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NavRootDirective, "[wuiNavRoot]", never, { "name": { "alias": "wuiNavRoot"; "required": true; "isSignal": true; }; "params": { "alias": "wuiNavParams"; "required": false; "isSignal": true; }; }, { "navigated": "navigated"; }, never, never, true, never>;
+}
+export declare class NavPushDirective {
+    private navService;
+    name: import("@angular/core").InputSignal<string>;
+    params: import("@angular/core").InputSignal<Record<string, unknown>>;
+    navigated: import("@angular/core").OutputEmitterRef<void>;
+    constructor(navService: NavService);
+    navigatePush(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavPushDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NavPushDirective, "[wuiNavPush]", never, { "name": { "alias": "wuiNavPush"; "required": true; "isSignal": true; }; "params": { "alias": "wuiNavParams"; "required": false; "isSignal": true; }; }, { "navigated": "navigated"; }, never, never, true, never>;
+}
+export declare class NavPopDirective {
+    private navService;
+    params: import("@angular/core").InputSignal<unknown>;
+    navigated: import("@angular/core").OutputEmitterRef<void>;
+    constructor(navService: NavService);
+    navigatePop(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavPopDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NavPopDirective, "[wuiNavPop]", never, { "params": { "alias": "wuiNavParams"; "required": false; "isSignal": true; }; }, { "navigated": "navigated"; }, never, never, true, never>;
+}

package/lib/directives/num-input.directive.d.ts

@@ -0,0 +1,27 @@
+import { ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class NumInputDirective implements ControlValueAccessor {
+    private decimalPipe;
+    private elementRef;
+    format: import("@angular/core").InputSignal<string>;
+    value: import("@angular/core").ModelSignal<string | null>;
+    isNegative: import("@angular/core").Signal<boolean>;
+    isDecimal: import("@angular/core").Signal<boolean>;
+    numberPart: import("@angular/core").Signal<number | null>;
+    decimalPart: import("@angular/core").Signal<string | null>;
+    numericValue: import("@angular/core").Signal<number>;
+    formattedValue: import("@angular/core").Signal<string>;
+    private allowNumbers;
+    private allowFunctional;
+    private allowDecimals;
+    private allowNegative;
+    constructor();
+    handleKeyDown(event: KeyboardEvent): void;
+    handleFocusOut(): void;
+    private parseNumber;
+    writeValue(obj: number | null): void;
+    registerOnChange(fn: (value: number | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NumInputDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NumInputDirective, "[wuiNumInput]", never, { "format": { "alias": "format"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}

package/lib/directives/page-header.directive.d.ts

@@ -0,0 +1,13 @@
+import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class PageHeaderDirective {
+    private el;
+    contentEl: any;
+    wuiTitle: any;
+    constructor(el: ElementRef);
+    getClosest(elem: any, selector: any): any;
+    onScroll(e: any): void;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PageHeaderDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PageHeaderDirective, "[wuiPageHeader]", never, { "wuiTitle": { "alias": "wuiTitle"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/directives/ripple.directive.d.ts

@@ -0,0 +1,16 @@
+import { ElementRef, OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class RippleDirective implements OnInit {
+    private el;
+    rippleEl: any;
+    interval: any;
+    theme: string;
+    constructor(el: ElementRef);
+    onMouseDown(e: any): void;
+    onTouchStart(e: any): void;
+    start(x: number, y: number): void;
+    animate(size: any, duration: any): void;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RippleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RippleDirective, "[wuiRipple]", never, { "theme": { "alias": "rippleTheme"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/directives/scroll-end.directive.d.ts

@@ -0,0 +1,9 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class ScrollEndDirective {
+    scrollEnd: EventEmitter<any>;
+    onScroll(e: any): void;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScrollEndDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ScrollEndDirective, "[wuiScrollEnd]", never, {}, { "scrollEnd": "scrollEnd"; }, never, never, true, never>;
+}

package/lib/directives/sortable.directive.d.ts

@@ -0,0 +1,19 @@
+import { ElementRef, AfterViewInit, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SortableDirective implements AfterViewInit {
+    private el;
+    change: EventEmitter<any>;
+    xFactor: number;
+    yFactor: number;
+    child: any;
+    childOriginRect: any;
+    placeholder: any;
+    mouseMove(e: any): void;
+    mouseUp(e: any): void;
+    getElementBefore(container: any, y: any): any;
+    constructor(el: ElementRef);
+    init(): void;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SortableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SortableDirective, "[wuiSortable]", never, {}, { "change": "wuiSortableChange"; }, never, never, true, never>;
+}

package/lib/index.d.ts

@@ -0,0 +1,33 @@
+export * from './wui-single.component';
+export * from './wui.providers';
+export * from './services/message.service';
+export * from './services/wui.service';
+export * from './services/nav.service';
+export * from './services/page.service';
+export * from './services/modal.service';
+export * from './services/router.service';
+export * from './directives/ripple.directive';
+export * from './directives/nav.directive';
+export * from './directives/scroll-end.directive';
+export * from './directives/page-header.directive';
+export * from './directives/num-input.directive';
+export * from './directives/sortable.directive';
+export * from './directives/menu.directive';
+export * from './components/modal/modal.component';
+export * from './components/nav/nav.component';
+export * from './components/loading/loading.component';
+export * from './components/app/app.component';
+export * from './components/form-field/wui-form-field.component';
+export * from './components/form-field/wui-input.directive';
+export * from './components/snackbar/snackbar.component';
+export * from './components/page/page.component';
+export * from './components/modal/modal.component';
+export * from './components/drawer/drawer.component';
+export * from './components/drawer/drawer-item.component';
+export * from './components/drawer/drawer.directive';
+export * from './components/app-bar/app-bar.component';
+export * from './components/list/list.component';
+export * from './components/icon/icon.component';
+export * from './components/menu/menu.component';
+export * from './components/dialog/dialog.component';
+export * from './components/toggle/toggle.component';

package/lib/services/message.service.d.ts

@@ -0,0 +1,9 @@
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class MessageService {
+    private handler;
+    set(name: string, payload: any): void;
+    get(name: string): Observable<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MessageService>;
+}

package/lib/services/modal.service.d.ts

@@ -0,0 +1,13 @@
+import { TemplateRef } from '@angular/core';
+import { ComponentType } from '@angular/cdk/portal';
+import { DialogConfig, DialogRef } from '@angular/cdk/dialog';
+import { BasePortalOutlet } from '@angular/cdk/portal';
+import { WuiModal } from '../components/modal/modal-overlay';
+import * as i0 from "@angular/core";
+export declare class ModalService {
+    wuiModal: WuiModal;
+    open<T, D = any, R = any>(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>, config?: DialogConfig<D, DialogRef<R, T>, BasePortalOutlet>): DialogRef<R, T>;
+    closeAll(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ModalService>;
+}

package/lib/services/nav.service.d.ts

@@ -0,0 +1,14 @@
+import { BehaviorSubject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class NavService {
+    lastNavId: number;
+    components: Array<any>;
+    events: BehaviorSubject<any>;
+    constructor();
+    willPop(navId: any): boolean;
+    setRoot(name: string, params?: any, options?: any): number;
+    push(name: string, params?: any, options?: any): number;
+    pop(params?: any, options?: any): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NavService>;
+}

package/lib/services/page.service.d.ts

@@ -0,0 +1,16 @@
+import { TemplateRef } from '@angular/core';
+import { DialogConfig, DialogRef } from '@angular/cdk/dialog';
+import { ComponentType, BasePortalOutlet } from '@angular/cdk/portal';
+import * as i0 from "@angular/core";
+export interface PageConfig<D = any, R = any> extends DialogConfig<D, DialogRef<R>, BasePortalOutlet> {
+}
+export declare class PageService {
+    private wuiPage;
+    isCloseAll: boolean;
+    constructor();
+    open<T, D = any, R = any>(component: ComponentType<T> | TemplateRef<T>, config?: PageConfig<D, R>): DialogRef<R, T>;
+    replace<T, D = any, R = any>(component: ComponentType<T> | TemplateRef<T>, config?: PageConfig<D, R>): DialogRef<R, T>;
+    closeAll(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PageService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PageService>;
+}

package/lib/services/router.service.d.ts

@@ -0,0 +1,16 @@
+import { BehaviorSubject, Subject } from 'rxjs';
+import { NavService } from './nav.service';
+import * as i0 from "@angular/core";
+export declare class RouterService {
+    private navService;
+    private $params;
+    eventTrigger: string;
+    events: BehaviorSubject<any>;
+    navigateUrl: Subject<any>;
+    constructor(navService: NavService);
+    get routeParams(): import("rxjs").Observable<any>;
+    setParams(navId: any, params?: {}): void;
+    navigate(url: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RouterService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<RouterService>;
+}

package/lib/services/wui.service.d.ts

@@ -0,0 +1,16 @@
+import { MessageService } from './message.service';
+import { Dialog } from '@angular/cdk/dialog';
+import * as i0 from "@angular/core";
+export declare class WuiService {
+    messageService: MessageService;
+    rootDialog: Dialog;
+    loadingRef: any;
+    dialog(params: any): Promise<unknown>;
+    snackbar(params: any): void;
+    toggleDrawer(): void;
+    openLoading(): void;
+    closeLoading(): void;
+    actionSheet(params: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WuiService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WuiService>;
+}

package/lib/wui-single.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class WuiSingleComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<WuiSingleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WuiSingleComponent, "lib-wui-single", never, {}, {}, never, never, true, never>;
+}

package/lib/wui.providers.d.ts

@@ -0,0 +1,2 @@
+import { Provider } from "@angular/core";
+export declare function provideWui(): Provider[];

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@kusena/wui-single",
+  "version": "18.0.1",
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/kusena-wui-single.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/kusena-wui-single.mjs",
+      "esm": "./esm2022/kusena-wui-single.mjs",
+      "default": "./fesm2022/kusena-wui-single.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1 @@
+export * from './lib';

package/scss/screen/appbar.scss

@@ -0,0 +1,71 @@
+@import '../variables/colors.scss';
+
+wui-app-bar {
+    position: sticky;
+    top: 0; left: 0;
+    width: 100%;
+    height: 4rem;
+    flex-shrink: 0;
+    flex-grow: 0;
+    display: flex;
+    align-items: center;
+    background-color: white;
+    padding-left: .25rem;
+    padding-right: .25rem;
+    z-index: 99;
+
+    div.wui-app-bar {
+        &-leading {
+            flex: 0 0 auto;
+            padding-right: .5rem;
+        }
+
+        &-title {
+            padding-left: .75rem;
+            padding-right: .75rem;
+            flex: 1 1 auto;
+            font-size: 1.25rem;
+            font-weight: 500;
+
+            input {
+                width: 100%;
+                border: none;
+                display: block;
+                padding: 0;
+            }
+        }
+
+        &-trailing {
+            flex: 0 0 auto;
+            padding-left: .5rem;
+        }
+    }
+
+    &.dark {
+        background-color: var(--theme-dark-bg, $theme-dark-bg);
+        color: var(--theme-dark-text, $theme-dark-text);
+
+        .button {
+            color: var(--theme-dark-button-text, $theme-dark-button-text);
+            background-color: var(--theme-dark-button-bg, $theme-dark-button-bg);
+
+            &:hover {
+                color: var(--theme-dark-button-hover-text, $theme-dark-button-hover-text);
+                background-color: var(--theme-dark-button-hover-bg, $theme-dark-button-hover-bg);
+                border-color: transparent;
+            }
+        }
+
+    }
+
+    &.primary {
+        background-color: var(--theme-primary, $theme-primary);
+    }
+}
+
+@media screen and (min-width: 768px) {
+    wui-app-bar {
+        padding-left: .75rem;
+        padding-right: .75rem;
+    }
+}

package/scss/screen/avatar.scss

@@ -0,0 +1,17 @@
+wui-avatar {
+    min-width: 2rem;
+    min-height: 2rem;
+    border-radius: 50%;
+    background-color: rgba(#000, .08);
+    position: relative;
+    overflow: hidden;
+    display: block;
+
+    img {
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        object-fit: cover;
+    }
+}

package/scss/screen/backdrop.scss

@@ -0,0 +1,15 @@
+.wui-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(#000, .32);
+    transition: opacity ease-in-out .2s;
+    display: none;
+
+    &.show {
+        display: block;
+        opacity: 1;
+    }
+}

package/scss/screen/box.scss

@@ -0,0 +1,67 @@
+@import '../variables/colors.scss';
+
+.wui-box {
+    padding: 1.5rem;
+    box-sizing:border-box;
+    background-color:white;
+    display:block;
+    border-radius:.5rem;
+    transition:box-shadow ease .25s;
+    position:relative;
+    z-index:0;
+    margin-bottom:1.5rem;
+    box-shadow: 0 0 .25rem rgba(0,0,0,.35);
+}
+
+.login-box {
+    width: 100%;
+    padding: 5rem 1.5rem;
+    max-width: 350px;
+    text-align: center;
+    display: block;
+    margin: auto;
+
+    .logo {
+        width: 96px;
+        height: 96px;
+        border-radius: 1rem;
+        display: block;
+        margin: auto;
+        margin-bottom: 2rem;
+
+        img {
+            width: 96px;
+            height: 96px;
+        }
+    }
+
+    h1 {
+        font-size: 2rem;
+        font-family: "Product Sans", "Roboto", "Segoe UI", sans-serif;
+        padding: 0;
+        margin: 0;
+        margin-bottom: .5rem;
+    }
+
+    div.desc {
+        margin-bottom: 2rem;
+    }
+
+    .btn-google {
+        border: none;
+        background-color: white;
+        width: 4rem;
+        height: 4rem;
+        border-radius: 2rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: auto;
+        box-shadow: 0 0 1rem rgba(0,0,0,0.25);
+
+        svg {
+            width: 2.5rem;
+            height: 2.5rem;
+        }
+    }
+}

package/scss/screen/breadcrumb.scss

@@ -0,0 +1,34 @@
+ul.wui-breadcrumb {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+
+    > li {
+        font-size: 0.875rem;
+        margin-bottom: 0;
+        font-weight: 500;
+        display: inline-flex;
+        justify-content: flex-start;
+        align-items: center;
+        color: rgba(0,0,0,.87);
+
+        &:not(:last-child) {
+            position: relative;
+    
+            &:after {
+                content: "\F035F";
+                vertical-align: middle;
+                display: inline-flex;
+                justify-content: center;
+                align-items: center;
+                font-family: 'Material Design Icons';
+                font-size: 1.5rem;
+                line-height: 1.5rem;
+                right: .25rem;
+                top: 0;
+            }
+        }
+    }
+}