@colijnit/transaction 12.1.7 → 12.1.10

package/lib/component/shared/transaction-article-text-overview/style/_layout.scss

@@ -0,0 +1,56 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-article-text-overview-layout') {
+  .co-transaction-article-text-overview {
+    .button-wrapper {
+      display: flex;
+      flex-direction: row;
+      column-gap: $tp-transaction-article-text-overview-buttons-column-gap;
+      justify-content: flex-end;
+    }
+    .dialog-content {
+      min-width: 350px;
+      min-height: 200px;
+    }
+  }
+  .article-text-overview-article-text-wrapper {
+    font-family: $tp-transaction-article-text-overview-font-family;
+    font-size: $tp-transaction-article-text-overview-font-size;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: white;
+    column-gap: $tp-transaction-article-text-overview-column-gap;
+    border: $tp-transaction-article-text-overview-text-border;
+    border-width: $tp-transaction-article-text-overview-text-border-width;
+    box-shadow: $tp-transaction-article-text-overview-text-shadow-box;
+    .index {
+      padding: 10px;
+      background-color: $tp-transaction-article-text-overview-index-background-color;
+      width: 20px;
+    }
+  }
+  .article-text-overview-article-text-wrapper.cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: 4px;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  }
+
+  .article-text-overview-article-text-wrapper.cdk-drag-placeholder {
+    opacity: 0.3;
+  }
+
+  .cdk-drag-animating {
+    //transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  .article-text-drag-drop-list.cdk-drop-list-dragging, .article-text-overview-article-text-wrapper.cdk-drag {
+    //transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  .draggable-item:last-child {
+    border: none;
+  }
+}

package/lib/component/shared/transaction-article-text-overview/style/_material-definition.scss

@@ -0,0 +1,9 @@
+$tp-transaction-article-text-overview-font-family: $tp-font-family !default;
+$tp-transaction-article-text-overview-font-size: $tp-font-size !default;
+$tp-transaction-article-text-overview-column-gap: 5px !default;
+$tp-transaction-article-text-overview-text-border: none !default;
+$tp-transaction-article-text-overview-text-border-width: 1px 1px 1px 1px !default;
+$tp-transaction-article-text-overview-text-border-color: $tp-color-border !default;
+$tp-transaction-article-text-overview-text-shadow-box: inset -1px 0px 1px 0px $tp-color-border !default;
+$tp-transaction-article-text-overview-index-background-color: $tp-color-light-accent !default;
+$tp-transaction-article-text-overview-buttons-column-gap: 5px !default;

package/lib/component/shared/transaction-article-text-overview/style/_theme.scss

@@ -0,0 +1,9 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-article-text-overview-theme') {
+  .co-transaction-article-text-overview {
+  }
+  .article-text-overview-article-text-wrapper {
+    border-color: $tp-transaction-article-text-overview-text-border-color;
+  }
+}

package/lib/component/shared/transaction-article-text-overview/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

package/lib/component/shared/transaction-article-text-overview/transaction-article-text-overview.component.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter } from "@angular/core";
+import { TransactionService } from "../../../service/transaction.service";
+import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { TransactionAddTextLineRequest } from "@colijnit/transactionapi/build/model/transaction-add-text-line-request.bo";
+import { CdkDrag, CdkDragDrop, CdkDropList } from "@angular/cdk/drag-drop";
+import { BusinessObjectFactory } from "../../../factory/business-object-factory";
+export declare class TransactionArticleTextOverviewComponent {
+    service: TransactionService;
+    private _boFactory;
+    header: string;
+    set transactionLine(value: TransactionLineInfo);
+    closeClick: EventEmitter<MouseEvent>;
+    cancelClick: EventEmitter<MouseEvent>;
+    saveClick: EventEmitter<TransactionAddTextLineRequest>;
+    showClass(): boolean;
+    collection: TransactionLineInfo[];
+    showTransactionArticleText: boolean;
+    editTransactionLine: TransactionLineInfo;
+    textToEdit: string;
+    constructor(service: TransactionService, _boFactory: BusinessObjectFactory);
+    onOkClick(event: MouseEvent): void;
+    onCancelClick(event: MouseEvent): void;
+    handleCanDragDrop(drag: CdkDrag, drop: CdkDropList): boolean;
+    handleDrop(event: CdkDragDrop<TransactionLineInfo[]>): void;
+    handleOpenArticleText(transLine: TransactionLineInfo): void;
+    closeTransactionArticleText(event: MouseEvent): void;
+    saveTransactionArticleLineText(transactionAddTextLineRequest: TransactionAddTextLineRequest): void;
+    private _hideArticleTextDialog;
+    private _getArticleTexts;
+}

package/lib/component/shared/transaction-article-text-overview/transaction-article-text-overview.module.d.ts

@@ -0,0 +1,2 @@
+export declare class TransactionArticleTextOverviewModule {
+}

package/lib/component/shopping-cart/shopping-cart.component.d.ts

@@ -0,0 +1,15 @@
+import { EventEmitter, OnDestroy } from "@angular/core";
+import { DictionaryService } from "../../service/dictionary.service";
+import { TransactionInfoResponse } from "@colijnit/transactionapi/build/model/transaction-info-response.bo";
+import { TransactionService } from "../../service/transaction.service";
+export declare class ShoppingCartComponent implements OnDestroy {
+    service: TransactionService;
+    private _dictionary;
+    closeCart: EventEmitter<void>;
+    checkout: EventEmitter<void>;
+    showClass(): boolean;
+    transaction: TransactionInfoResponse;
+    private _subs;
+    constructor(service: TransactionService, _dictionary: DictionaryService);
+    ngOnDestroy(): void;
+}

package/lib/component/shopping-cart/shopping-cart.module.d.ts

@@ -0,0 +1,2 @@
+export declare class ShoppingCartModule {
+}

package/lib/component/shopping-cart/style/_layout.scss

@@ -0,0 +1,33 @@
+@import "../../../style/mixin";
+
+@include export-module('co-shopping-cart-layout') {
+  .co-shopping-cart {
+    font-family: $tp-shopping-cart-font-family;
+    font-size: $tp-shopping-cart-font-size;
+    padding: $tp-shopping-cart-padding;
+    display: flex;
+    flex-direction: column;
+
+    .cart-header {
+      display: flex;
+      justify-content: space-between;
+
+      .cart-header-label {
+        font-weight: bold;
+      }
+    }
+    .co-transaction-line {
+      padding: 0;
+    }
+    .cart-buttons {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      column-gap: $tp-shopping-cart-buttons-column-gap;
+      margin: $tp-shopping-cart-buttons-margin;
+    }
+    .button-resume {
+      cursor: pointer;
+    }
+  }
+}

package/lib/component/shopping-cart/style/_material-definition.scss

@@ -0,0 +1,10 @@
+$tp-shopping-cart-font-family: $tp-font-family !default;
+$tp-shopping-cart-font-size: $tp-font-size !default;
+$tp-shopping-cart-background-color: white !default;
+$tp-shopping-cart-color: $tp-color-dark !default;
+$tp-shopping-cart-padding: 10px !default;
+
+$tp-shopping-cart-buttons-column-gap: 15px !default;
+$tp-shopping-cart-buttons-margin: 15px 0 !default;
+$tp-shopping-cart-buttons-cart-resume-color: $tp-color-dark !default;
+$tp-shopping-cart-buttons-cart-checkout-background-color: $tp-color-active-light !default;

package/lib/component/shopping-cart/style/_theme.scss

@@ -0,0 +1,14 @@
+@import "../../../style/mixin";
+
+@include export-module('co-shopping-cart-theme') {
+  .co-shopping-cart {
+    background-color: $tp-shopping-cart-background-color;
+    color: $tp-shopping-cart-color;
+    .button-resume {
+      color: $tp-shopping-cart-buttons-cart-resume-color;
+    }
+    .button-checkout {
+      background-color: $tp-shopping-cart-buttons-cart-checkout-background-color;
+    }
+  }
+}

package/lib/component/shopping-cart/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

package/{app/component/shopping-cart → lib/component/shopping-cart-OLD}/shopping-cart-manager/shopping-cart-manager.component.scss

@@ -1,6 +1,7 @@
-@import "src/style/variables";
-@import "src/style/styles";
+//@import "src/style/variables";
+//@import "src/style/styles";
 
+/*
 ::ng-deep #warehouseDialog {
   align-items: center;
   max-height: 100%;
@@ -50,3 +51,4 @@ co-button:not(:last-child) {
 co-input-number-picker co-button {
   max-width: 20px;
 }
+*/

package/lib/component/shopping-cart-preview/shopping-cart-preview.component.d.ts

@@ -0,0 +1,13 @@
+import { EventEmitter } from "@angular/core";
+import { TransactionService } from "../../service/transaction.service";
+import { Icon } from "../../enum/icon.enum";
+export declare class ShoppingCartPreviewComponent {
+    service: TransactionService;
+    readonly icons: typeof Icon;
+    showCheckoutButton: boolean;
+    withoutBorder: boolean;
+    checkout: EventEmitter<void>;
+    editCartClick: EventEmitter<void>;
+    showClass(): boolean;
+    constructor(service: TransactionService);
+}

package/lib/component/shopping-cart-preview/shopping-cart-preview.module.d.ts

@@ -0,0 +1,2 @@
+export declare class ShoppingCartPreviewModule {
+}

package/lib/component/shopping-cart-preview/style/_layout.scss

@@ -0,0 +1,48 @@
+@import "../../../style/mixin";
+
+@include export-module('co-shopping-cart-preview-layout') {
+  .co-shopping-cart-preview {
+    display: block;
+    font-family: $tp-shopping-cart-preview-font-family;
+    font-size: $tp-shopping-cart-preview-font-size;
+    padding: $tp-shopping-cart-preview-padding;
+    border: none;
+    box-shadow: none;
+    &:not(.borderless) {
+      border: $tp-shopping-cart-preview-border;
+      box-shadow: $tp-shopping-cart-preview-box-shadow;
+    }
+    .cart-header {
+      font-family: $tp-shopping-cart-preview-header-font-family;
+      font-size: $tp-shopping-cart-preview-header-font-size;
+      margin: $tp-shopping-cart-preview-header-margin;
+      text-transform: $tp-shopping-cart-preview-header-text-transform;
+      font-weight: $tp-shopping-cart-preview-header-font-weight;
+    }
+    .co-image-display .no-image .no-image-label {
+      font-size: 8px;
+    }
+
+    .co-transaction-line {
+      padding: 0;
+    }
+    .preview-totals-wrapper {
+      display: flex;
+      justify-content: flex-end;
+      margin: $tp-shopping-cart-preview-totals-margin;
+      .co-transaction-totals {
+        width: 250px;
+      }
+    }
+    .cart-buttons {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      column-gap: $tp-shopping-cart-preview-buttons-column-gap;
+      margin: $tp-shopping-cart-preview-buttons-margin;
+    }
+    .button-edit-cart {
+      cursor: pointer;
+    }
+  }
+}

package/lib/component/shopping-cart-preview/style/_material-definition.scss

@@ -0,0 +1,20 @@
+$tp-shopping-cart-preview-font-family: $tp-font-family !default;
+$tp-shopping-cart-preview-font-size: $tp-font-size !default;
+$tp-shopping-cart-preview-background-color: transparent !default;
+$tp-shopping-cart-preview-font-color: $tp-color-dark !default;
+$tp-shopping-cart-preview-padding: 10px !default;
+$tp-shopping-cart-preview-border: none !default;
+$tp-shopping-cart-preview-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2) !default;
+
+$tp-shopping-cart-preview-header-font-family: $tp-font-family !default;
+$tp-shopping-cart-preview-header-font-size: $tp-font-size-big !default;
+$tp-shopping-cart-preview-header-font-color: $tp-color-active-light !default;
+$tp-shopping-cart-preview-header-font-weight: bold !default;
+$tp-shopping-cart-preview-header-text-transform: uppercase !default;
+$tp-shopping-cart-preview-header-margin: 5px !default;
+
+$tp-shopping-cart-preview-totals-margin: 15px 0 !default;
+$tp-shopping-cart-preview-buttons-column-gap: 15px !default;
+$tp-shopping-cart-preview-buttons-margin: 20px 0 !default;
+$tp-shopping-cart-preview-buttons-edit-cart-color: $tp-color-dark !default;
+$tp-shopping-cart-preview-buttons-checkout-background-color: $tp-color-active-light !default;

package/lib/component/shopping-cart-preview/style/_theme.scss

@@ -0,0 +1,17 @@
+@import "../../../style/mixin";
+
+@include export-module('co-shopping-cart-preview-theme') {
+  .co-shopping-cart-preview {
+    background-color: $tp-shopping-cart-preview-background-color;
+    color: $tp-shopping-cart-preview-font-color;
+    .cart-header {
+      color: $tp-shopping-cart-preview-header-font-color;
+    }
+    .button-edit-cart {
+      color: $tp-shopping-cart-preview-buttons-edit-cart-color;
+    }
+    .button-checkout {
+      background-color: $tp-shopping-cart-preview-buttons-checkout-background-color;
+    }
+  }
+}

package/lib/component/shopping-cart-preview/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

package/lib/component/stepper/component/stepper-step.component.d.ts

@@ -0,0 +1,12 @@
+import { EventEmitter } from "@angular/core";
+export declare class StepperStepComponent {
+    index: number;
+    label: string;
+    set completed(value: boolean);
+    get completed(): boolean;
+    show: boolean;
+    validateStep: EventEmitter<void>;
+    showClass(): boolean;
+    private _completed;
+    onComplete: (complete: boolean) => void;
+}

package/lib/component/stepper/stepper.component.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from "@angular/core";
+import { StepperStepComponent } from "./component/stepper-step.component";
+import { Icon } from "../../enum/icon.enum";
+export interface steps {
+    index: number;
+    description: string;
+    complete: boolean;
+}
+export declare class StepperComponent {
+    readonly icons: typeof Icon;
+    set content(children: any);
+    set child(child: any);
+    finishButtonLabel: string;
+    finishStep: EventEmitter<void>;
+    showClass(): boolean;
+    set stepChildren(value: StepperStepComponent[]);
+    get stepChildren(): StepperStepComponent[];
+    get canPrevious(): boolean;
+    get canNext(): boolean;
+    get finished(): boolean;
+    set activeStep(value: number);
+    get activeStep(): number;
+    firstStep: number;
+    lastStep: number;
+    truckPosition: number;
+    private _stepChildren;
+    private _activeStep;
+    private _deliveryTruckClientRect;
+    goto(idx: number): void;
+    gotoPrevious(): void;
+    gotoNext(): void;
+    private _validateCurrentStep;
+    private _setActive;
+    private _prepareSteps;
+}

package/lib/component/stepper/stepper.module.d.ts

@@ -0,0 +1,2 @@
+export declare class StepperModule {
+}

package/lib/component/stepper/style/_layout.scss

@@ -0,0 +1,107 @@
+@import "../../../style/mixin";
+
+$index-origin: calc((#{$tp-co-stepper-step-index-size} / 2) + (#{$tp-co-stepper-step-index-border-width} / 2));
+
+@include export-module('co-stepper-layout') {
+  .co-stepper {
+    font-family: $tp-co-stepper-font-family;
+    font-size: $tp-co-stepper-font-size;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    box-sizing: initial;
+    .co-stepper-content {
+      display: flex;
+      flex-direction: row;
+      position: relative;
+    }
+    .stepper-step {
+      position: relative;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &:not(.last):after {
+        content: "";
+        position: absolute;
+        top: calc(100% - (#{$index-origin} + 2px));
+        width: calc(100% - #{$tp-co-stepper-step-index-size} - #{$tp-co-stepper-step-index-border-width});
+        left: calc(50% + #{$index-origin});
+        height: 2px;
+        order: -1;
+      }
+      &:not(.last):before {
+        content: "";
+        position: absolute;
+        top: calc(100% - (#{$index-origin} + 2px));
+        width: 0;
+        max-width: calc(100% - #{$tp-co-stepper-step-index-size} - #{$tp-co-stepper-step-index-border-width});
+        left: calc(50% + #{$index-origin});
+        height: 2px;
+        order: -1;
+        z-index: 1;
+        transition: all .2s;
+      }
+      .index {
+        cursor: pointer;
+        display: flex;
+        font-size: $tp-co-stepper-step-index-font-size;
+        height: $tp-co-stepper-step-index-size;
+        width: $tp-co-stepper-step-index-size;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        border-style: solid;
+        border-width: $tp-co-stepper-step-index-border-width;
+        box-sizing: initial;
+      }
+      .description {
+        margin-bottom: 15px;
+        font-weight: $tp-co-stepper-step-incomplete-description-font-weight;
+      }
+      &.active {
+        &:not(.last):before {
+          width: 50%;
+        }
+        .description {
+          font-weight: $tp-co-stepper-step-description-font-weight;
+        }
+        .delivery-truck {
+          opacity: 1;
+          left: calc(100% - #{$tp-co-stepper-step-delivery-truck-size / 2});
+        }
+      }
+      &.complete {
+        &:not(.last):before {
+          width: 100%;
+        }
+        .description {
+          font-weight: $tp-co-stepper-step-description-font-weight;
+        }
+      }
+    }
+    .delivery-truck {
+      position: absolute;
+      width: $tp-co-stepper-step-delivery-truck-size;
+      height: $tp-co-stepper-step-delivery-truck-size;
+      top: calc(100% - (#{$index-origin} + 2px + #{$tp-co-stepper-step-delivery-truck-size / 2}));
+      //opacity: 0;
+      //left: 50%;
+      transform: translateX(-#{$tp-co-stepper-step-delivery-truck-size / 2});
+      transition: all .2s;
+      z-index: 2;
+    }
+    .co-stepper-step {
+      display: none;
+      &.show {
+        display: flex;
+      }
+    }
+    .stepper-button-wrapper {
+      display: flex;
+      column-gap: 5px;
+      justify-content: flex-end;
+      margin: 15px 0;
+    }
+  }
+}

package/lib/component/stepper/style/_material-definition.scss

@@ -0,0 +1,18 @@
+$tp-co-stepper-font-family: $tp-font-family !default;
+$tp-co-stepper-font-size: $tp-font-size !default;
+$tp-co-stepper-step-index-size: 11px !default;
+$tp-co-stepper-step-index-border-width: 3px !default;
+$tp-co-stepper-step-index-font-size: $tp-font-size-big !default;
+$tp-co-stepper-step-padding: 30px !default;
+$tp-co-stepper-step-complete-color: white !default;
+$tp-co-stepper-step-complete-background-color: $tp-color-action !default;
+$tp-co-stepper-step-incomplete-background-color: $tp-color-action-light !default;
+$tp-co-stepper-step-incomplete-color: $tp-color-dark !default;
+$tp-co-stepper-step-active-background-color: $tp-color-action !default;
+$tp-co-stepper-step-active-color: white !default;
+$tp-co-stepper-step-delivery-truck-size: 45px !default;
+$tp-co-stepper-step-description-font-size: $tp-font-size !default;
+$tp-co-stepper-step-description-color: black !default;
+$tp-co-stepper-step-description-font-weight: bold !default;
+$tp-co-stepper-step-incomplete-description-color: rgba(0, 0, 0, 0.3) !default;
+$tp-co-stepper-step-incomplete-description-font-weight: normal !default;

package/lib/component/stepper/style/_theme.scss

@@ -0,0 +1,43 @@
+@import "../../../style/mixin";
+@import "./material-definition";
+
+@include export-module('co-stepper-theme') {
+  .co-stepper {
+    .stepper-step {
+      &:not(.last):after {
+        background-color: $tp-co-stepper-step-incomplete-background-color;
+      }
+      &:not(.last):before {
+        background-color: $tp-co-stepper-step-complete-background-color;
+      }
+      .index {
+        //background-color: $tp-co-stepper-step-incomplete-background-color;
+        color: $tp-co-stepper-step-incomplete-background-color;
+        border-color: $tp-co-stepper-step-incomplete-background-color;
+      }
+      .description {
+        color: $tp-co-stepper-step-incomplete-description-color;
+      }
+      &.active {
+        .index {
+          background-color: $tp-co-stepper-step-active-background-color;
+          color: $tp-co-stepper-step-active-color;
+          border-color: $tp-co-stepper-step-active-background-color;
+        }
+        .description {
+          color: $tp-co-stepper-step-description-color;
+        }
+      }
+      &.complete {
+        .index {
+          background-color: $tp-co-stepper-step-complete-background-color;
+          color: $tp-co-stepper-step-complete-color;
+          border-color: $tp-co-stepper-step-complete-background-color;
+        }
+        .description {
+          color: $tp-co-stepper-step-description-color;
+        }
+      }
+    }
+  }
+}

package/lib/component/stepper/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

package/lib/component/tile/style/_layout.scss

@@ -0,0 +1,36 @@
+@import "../../../style/mixin";
+
+@include export-module('co-tile-layout') {
+  .co-tile {
+    display: flex;
+    position: relative;
+    .co-tile-wrapper {
+      display: flex;
+      flex-direction: row;
+      position: relative;
+      column-gap: 10px;
+      border: $tp-relation-address-tile-border;
+      border-radius: $tp-relation-address-tile-border-radius;
+      padding: $tp-relation-address-tile-padding;
+      min-width: $tp-tile-min-width;
+      min-height: $tp-tile-min-height;
+    }
+    .co-tile-select-wrapper {
+      position: absolute;
+      .co-radio-button {
+        border: none;
+        height: $tp-relation-address-tile-icon-width;
+        width: $tp-relation-address-tile-icon-width;
+        padding: 0;
+        align-items: baseline;
+      }
+    }
+    .co-tile-content-wrapper {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+}

package/lib/component/tile/style/_material-definition.scss

@@ -0,0 +1,16 @@
+$tp-tile-font-family: $tp-font-family !default;
+$tp-tile-font-size: $tp-font-size !default;
+$tp-tile-row-gap: 3px;
+$tp-tile-padding: 10px !default;
+$tp-tile-border-radius: 5px !default;
+$tp-tile-min-width: 200px !default;
+$tp-tile-min-height: 100px !default;
+$tp-tile-icon-width: 20px !default;
+$tp-tile-background-color: white !default;
+$tp-tile-border: 2px solid !default;
+$tp-tile-border-color: $tp-color-border !default;
+$tp-tile-selected-background-color: #f1fcff !default;
+$tp-tile-selected-border-color: #0084de !default;
+$tp-tile-edit-background-color: $tp-color-border !default;
+$tp-tile-edit-icon-color: $tp-color-action !default;
+$tp-tile-edit-icon-width: 30px !default;

package/lib/component/tile/style/_theme.scss

@@ -0,0 +1,36 @@
+@import "../../../style/mixin";
+
+@include export-module('co-tile-theme') {
+  .co-tile {
+    .co-tile-wrapper {
+      background-color: $tp-tile-background-color;
+      border-color: $tp-tile-border-color;
+    }
+    .co-tile-select-wrapper {
+      .co-radio-button {
+        label:before {
+          border-color: $tp-tile-border-color;
+        }
+      }
+    }
+    &.selected {
+      .co-tile-wrapper {
+        background-color: $tp-tile-selected-background-color;
+        border-color: $tp-tile-selected-border-color;
+        .co-tile-select-wrapper {
+          .co-radio-button {
+            label:before {
+              border-color: $tp-tile-selected-border-color;
+              background-color: $tp-tile-selected-border-color;
+            }
+
+            label:after {
+              color: $tp-tile-selected-border-color;
+              background-color: white;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/component/tile/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";