@theseam/ui-common 0.4.0-beta.0 → 0.4.0-beta.2

package/styles/vendor/ngx-datatable/_themes/dark/_variables.scss

@@ -0,0 +1,166 @@
+// Not implemented
+
+// $datatable-font-size: 16px !default;
+// $datatable-default-border-width: 1px !default;
+
+// $datatable-border-top-width: 0px !default;
+// $datatable-border-right-width: 0px !default;
+// $datatable-border-bottom-width: 0px !default;
+// $datatable-border-left-width: 0px !default;
+// $datatable-border-color: #fff !default;
+// $datatable-color: $body-color !default;
+
+// // common datatable colors
+// $datatable-background: #fff !default;
+// $datatable-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) !default;
+// $datatable-row-even-background: #eee !default;
+
+// // default row and cell background colors
+// $datatable-default-background: $white !default;
+// $datatable-hover-effect: false !default;
+// $datatable-row-group-background-hover: #eee !default;
+// $datatable-row-group-even-background-hover: #eee !default;
+// $datatable-focus-effect: false !default;
+// $datatable-row-group-background-focus: #ddd !default;
+// $datatable-row-group-even-background-focus: #ddd !default;
+
+// // default background colors for cell selection style
+// $datatable-cellselection-background-hover: #eee !default;
+// $datatable-cellselection-background-focus: #ddd !default;
+
+// // background and text colors for selected cell / row
+// $datatable-selected-active-background: #304ffe !default;
+// $datatable-selected-active-color: #fff !default;
+// $datatable-selected-active-background-hover: #193ae4 !default;
+// $datatable-selected-active-color-hover: #fff !default;
+// $datatable-selected-active-background-focus: #2041ef !default;
+// $datatable-selected-active-color-focus: #fff !default;
+
+// // colors for header elements
+// $datatable-header-background: #fff !default;
+// $datatable-header-color: $body-color !default;
+// $datatable-header-border-top-width: 0 !default;
+// $datatable-header-border-right-width: 0 !default;
+// $datatable-header-border-bottom-width: $datatable-default-border-width !default;
+// $datatable-header-border-left-width: 0 !default;
+// $datatable-header-border-color: $light !default;
+
+// $datatable-header-cell-text-align: left !default;
+// $datatable-header-cell-padding: .75rem !default;
+// $datatable-header-cell-font-size: 16px !default;
+// $datatable-header-cell-font-weight: 500 !default;
+// $datatable-header-cell-label-line-height: 24px !default;
+
+// $datatable-header-draggable-background: #eee !default;
+// $datatable-header-resize-handle-color: #eee !default;
+// $datatable-header-resize-handle-border-top-width: 0 !default;
+// $datatable-header-resize-handle-border-right-width: $datatable-default-border-width !default;
+// $datatable-header-resize-handle-border-bottom-width: 0 !default;
+// $datatable-header-resize-handle-border-left-width: 0 !default;
+
+// $datatable-progress-linear-background-color: rgb(170, 209, 249) !default;
+// $datatable-progress-linear-accent-color: rgb(16, 108, 200) !default;
+
+// // colors for table body elements
+// $datatable-row-detail-background: #f8f9fa !default;
+// $datatable-row-detail-padding: 10px !default;
+
+// $datatable-row-border-top-width: 1px !default;
+// $datatable-row-border-right-width: 0px !default;
+// $datatable-row-border-bottom-width: 0px !default;
+// $datatable-row-border-left-width: 0px !default;
+// $datatable-row-border-color: #d1d4d7 !default;
+
+// $datatable-body-margin: -1px 0 0 0 !default;
+
+// $datatable-body-cell-color: rgba(0, 0, 0, 0.87) !default;
+// $datatable-body-cell-font-size: 14px !default;
+// $datatable-body-cell-font-weight: 400 !default;
+// $datatable-body-cell-text-align: left !default;
+// $datatable-body-cell-padding: 0.9rem 1.2rem !default;
+// $datatable-body-cell-border-top-width: 0 !default;
+// $datatable-body-cell-border-right-width: 0 !default;
+// $datatable-body-cell-border-bottom-width: 0 !default;
+// $datatable-body-cell-border-left-width: 0 !default;
+
+// $datatable-body-group-cell-text-align: left !default;
+// $datatable-body-group-cell-padding: 0.9rem 1.2rem !default;
+// $datatable-body-group-cell-border-top-width: $datatable-default-border-width !default;
+// $datatable-body-group-cell-border-right-width: 0 !default;
+// $datatable-body-group-cell-border-bottom-width: 0 !default;
+// $datatable-body-group-cell-border-left-width: 0 !default;
+// $datatable-body-group-cell-color: $datatable-body-cell-color !default;
+// $datatable-body-group-cell-font-size: 14px !default;
+// $datatable-body-group-cell-font-weight: 400 !default;
+
+// $datatable-group-header-background: #f8f9fa !default;
+// $datatable-group-header-border-color: #d9d8d9 !default;
+// $datatable-group-header-border-top-width: $datatable-default-border-width !default;
+// $datatable-group-header-border-right-width: 0 !default;
+// $datatable-group-header-border-bottom-width: $datatable-default-border-width !default;
+// $datatable-group-header-border-left-width: 0 !default;
+
+// $datatable-empty-row-height: 50px !default;
+// $datatable-empty-row-padding: 0.5rem 1.2rem !default;
+// $datatable-empty-row-border-top-width: 0px !default;
+// $datatable-empty-row-border-right-width: 0px !default;
+// $datatable-empty-row-border-bottom-width: 0px !default;
+// $datatable-empty-row-border-left-width: 0px !default;
+// $datatable-empty-row-border-color: #d9d8d9;
+// $datatable-empty-row-margin: 0px !default;
+// $datatable-empty-row-text-align: left !default;
+
+// $datatable-loading-row-border-top-width: 0px !default;
+// $datatable-loading-row-border-right-width: 0px !default;
+// $datatable-loading-row-border-bottom-width: 0px !default;
+// $datatable-loading-row-border-left-width: 0px !default;
+// $datatable-loading-row-border-color: #d9d8d9 !default;
+// $datatable-loading-row-padding: 0.5rem 1.2rem !default;
+// $datatable-loading-row-text-align: left !default;
+
+// // colors for footer elements
+// $datatable-footer-background: $gray-100 !default;
+// $datatable-footer-border-radius: $border-radius !default;
+// $datatable-footer-border-top-width: $datatable-default-border-width !default;
+// $datatable-footer-border-right-width: $datatable-default-border-width !default;
+// $datatable-footer-border-bottom-width: $datatable-default-border-width !default;
+// $datatable-footer-border-left-width: $datatable-default-border-width !default;
+// $datatable-footer-border-color: $gray-300 !default;
+// $datatable-footer-font-size: 16px !default;
+// $datatable-footer-font-weight: 400 !default;
+// $datatable-footer-color: $body-colo !default;
+// $datatable-footer-margin: -1px 0 0 0 !default;
+
+// $datatable-page-count-line-height: 50px !default;
+// $datatable-page-count-height: 50px !default;
+// $datatable-page-count-padding: 0 1.2rem !default;
+
+// $datatable-pager-margin: 0 10px !default;
+
+// $datatable-pager-item-height: 22px !default;
+// $datatable-pager-item-min-width: 24px !default;
+// $datatable-pager-item-line-height: 22px !default;
+// $datatable-pager-item-padding: 0 6px !default;
+// $datatable-pager-item-border-radius: 3px !default;
+// $datatable-pager-item-margin: 6px 3px !default;
+// $datatable-pager-item-text-align: center !default;
+// $datatable-pager-item-color: rgba(0, 0, 0, 0.54) !default;
+
+// $datatable-pager-item-hover-color: rgba(0, 0, 0, 0.75) !default;
+// $datatable-pager-item-hover-background: rgba(158, 158, 158, 0.2) !default;
+
+// $datatable-pager-item-disabled-color: rgba(0, 0, 0, 0.26) !default;
+// $datatable-pager-item-disabled-background: transparent !default;
+
+// $datatable-pager-item-active-background: rgba(158, 158, 158, 0.2) !default;
+// $datatable-pager-item-active-font-weight: bold !default;
+
+// $datatable-pager-icon-font-size: 20px !default;
+// $datatable-pager-icon-line-height: 20px !default;
+// $datatable-pager-icon-padding: 0 3px !default;
+
+// // colors for summary row elements
+// $datatable-summary-row-background: #ddd !default;
+// $datatable-summary-row-background-hover: #ddd !default;
+// $datatable-summary-row-font-weight: bold !default;

package/styles/vendor/ngx-datatable/_themes/material/_variables.scss

@@ -0,0 +1,165 @@
+$datatable-font-size: 16px !default;
+$datatable-default-border-width: 1px !default;
+
+$datatable-border-top-width: 0px !default;
+$datatable-border-right-width: 0px !default;
+$datatable-border-bottom-width: 0px !default;
+$datatable-border-left-width: 0px !default;
+$datatable-border-color: $white !default;
+$datatable-color: $body-color !default;
+
+// common datatable colors
+$datatable-background: $white !default;
+$datatable-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) !default;
+$datatable-row-even-background: #eee !default;
+
+// default row and cell background colors
+$datatable-default-background: $white !default;
+$datatable-hover-effect: false !default;
+$datatable-row-group-background-hover: #eee !default;
+$datatable-row-group-even-background-hover: #eee !default;
+$datatable-focus-effect: false !default;
+$datatable-row-group-background-focus: #ddd !default;
+$datatable-row-group-even-background-focus: #ddd !default;
+
+// default background colors for cell selection style
+$datatable-cellselection-background-hover: #eee !default;
+$datatable-cellselection-background-focus: #ddd !default;
+
+// background and text colors for selected cell / row
+$datatable-selected-active-background: #304ffe !default;
+$datatable-selected-active-color: $white !default;
+$datatable-selected-active-background-hover: #193ae4 !default;
+$datatable-selected-active-color-hover: $white !default;
+$datatable-selected-active-background-focus: #2041ef !default;
+$datatable-selected-active-color-focus: $white !default;
+
+// colors for header elements
+$datatable-header-background: $white !default;
+$datatable-header-color: rgba(0, 0, 0, 0.54) !default;
+$datatable-header-border-top-width: 0 !default;
+$datatable-header-border-right-width: 0 !default;
+$datatable-header-border-bottom-width: $datatable-default-border-width !default;
+$datatable-header-border-left-width: 0 !default;
+$datatable-header-border-color: rgba(0, 0, 0, 0.12) !default;
+
+$datatable-header-cell-text-align: left !default;
+$datatable-header-cell-padding: 0.9rem 1.2rem !default;
+$datatable-header-cell-font-size: 12px !default;
+$datatable-header-cell-font-weight: 500 !default;
+$datatable-header-cell-label-line-height: 24px !default;
+
+$datatable-header-draggable-background: #e1e3e6 !default;
+$datatable-header-resize-handle-color: #e1e3e6 !default;
+$datatable-header-resize-handle-top: 12px !default;
+$datatable-header-resize-handle-right: 0 !default;
+$datatable-header-resize-handle-bottom: 12px !default;
+$datatable-header-resize-handle-left: 0 !default;
+$datatable-header-resize-handle-width: 02px !default;
+
+$datatable-progress-linear-background-color: rgb(170, 209, 249) !default;
+$datatable-progress-linear-accent-color: rgb(16, 108, 200) !default;
+
+// colors for table body elements
+$datatable-row-detail-background: #f5f5f5 !default;
+$datatable-row-detail-padding: 10px !default;
+
+$datatable-row-border-top-width: 0px !default;
+$datatable-row-border-right-width: 0px !default;
+$datatable-row-border-bottom-width: 0px !default;
+$datatable-row-border-left-width: 0px !default;
+$datatable-row-border-color: #d1d4d7 !default;
+
+$datatable-body-margin: -1px 0 0 0 !default;
+
+$datatable-body-cell-color: rgba(0, 0, 0, 0.87) !default;
+$datatable-body-cell-font-size: 14px !default;
+$datatable-body-cell-font-weight: 400 !default;
+$datatable-body-cell-text-align: left !default;
+$datatable-body-cell-padding: 0.9rem 1.2rem !default;
+$datatable-body-cell-border-top-width: 0 !default;
+$datatable-body-cell-border-right-width: 0 !default;
+$datatable-body-cell-border-bottom-width: 0 !default;
+$datatable-body-cell-border-left-width: 0 !default;
+
+$datatable-body-group-cell-text-align: left !default;
+$datatable-body-group-cell-padding: 0.9rem 1.2rem !default;
+$datatable-body-group-cell-border-top-width: $datatable-default-border-width !default;
+$datatable-body-group-cell-border-right-width: 0 !default;
+$datatable-body-group-cell-border-bottom-width: 0 !default;
+$datatable-body-group-cell-border-left-width: 0 !default;
+$datatable-body-group-cell-color: $datatable-body-cell-color !default;
+$datatable-body-group-cell-font-size: 14px !default;
+$datatable-body-group-cell-font-weight: 400 !default;
+
+$datatable-group-header-background: #f5f5f5 !default;
+$datatable-group-header-border-color: #d9d8d9 !default;
+$datatable-group-header-border-top-width: $datatable-default-border-width !default;
+$datatable-group-header-border-right-width: 0 !default;
+$datatable-group-header-border-bottom-width: $datatable-default-border-width !default;
+$datatable-group-header-border-left-width: 0 !default;
+
+$datatable-empty-row-height: 50px !default;
+$datatable-empty-row-padding: 0.5rem 1.2rem !default;
+$datatable-empty-row-border-top-width: 0px !default;
+$datatable-empty-row-border-right-width: 0px !default;
+$datatable-empty-row-border-bottom-width: 0px !default;
+$datatable-empty-row-border-left-width: 0px !default;
+$datatable-empty-row-border-color: #d9d8d9;
+$datatable-empty-row-margin: 0px !default;
+$datatable-empty-row-text-align: left !default;
+
+$datatable-loading-row-border-top-width: 0px !default;
+$datatable-loading-row-border-right-width: 0px !default;
+$datatable-loading-row-border-bottom-width: 0px !default;
+$datatable-loading-row-border-left-width: 0px !default;
+$datatable-loading-row-border-color: #d9d8d9 !default;
+$datatable-loading-row-padding: 0.5rem 1.2rem !default;
+$datatable-loading-row-text-align: left !default;
+
+// colors for footer elements
+$datatable-footer-background: $white !default;
+$datatable-footer-border-radius: $border-radius !default;
+$datatable-footer-border-top-width: $datatable-default-border-width !default;
+$datatable-footer-border-right-width: 0 !default;
+$datatable-footer-border-bottom-width: 0 !default;
+$datatable-footer-border-left-width: 0 !default;
+$datatable-footer-border-color: rgba(0, 0, 0, 0.12) !default;
+$datatable-footer-font-size: 12px !default;
+$datatable-footer-font-weight: 400 !default;
+$datatable-footer-color: rgba(0, 0, 0, 0.54) !default;
+$datatable-footer-margin: -1px 0 0 0 !default;
+
+$datatable-page-count-line-height: 50px !default;
+$datatable-page-count-height: 50px !default;
+$datatable-page-count-padding: 0 1.2rem !default;
+
+$datatable-pager-margin: 0 10px !default;
+
+$datatable-pager-item-height: 22px !default;
+$datatable-pager-item-min-width: 24px !default;
+$datatable-pager-item-line-height: 22px !default;
+$datatable-pager-item-padding: 0 6px !default;
+$datatable-pager-item-border-radius: 3px !default;
+$datatable-pager-item-margin: 6px 3px !default;
+$datatable-pager-item-text-align: center !default;
+$datatable-pager-item-color: rgba(0, 0, 0, 0.54) !default;
+
+$datatable-pager-item-hover-color: rgba(0, 0, 0, 0.75) !default;
+$datatable-pager-item-hover-background: rgba(158, 158, 158, 0.2) !default;
+
+$datatable-pager-item-disabled-color: rgba(0, 0, 0, 0.26) !default;
+$datatable-pager-item-disabled-background: transparent !default;
+
+$datatable-pager-item-active-background: rgba(158, 158, 158, 0.2) !default;
+$datatable-pager-item-active-font-weight: bold !default;
+
+$datatable-pager-icon-font-size: 20px !default;
+$datatable-pager-icon-line-height: 20px !default;
+$datatable-pager-icon-padding: 0 3px !default;
+
+// colors for summary row elements
+$datatable-summary-row-background: #ddd !default;
+$datatable-summary-row-background-hover: #ddd !default;
+$datatable-summary-row-font-weight: bold !default;

package/styles/vendor/ngx-datatable/_variables.scss

@@ -0,0 +1,3 @@
+@import './_themes/bootstrap/variables';
+// @import './_themes/dark/variables';
+// @import './_themes/material/variables';

package/styles/vendor/quill/_quill.scss

@@ -0,0 +1,26 @@
+@import 'node_modules/quill/dist/quill.core';
+@import 'node_modules/quill/dist/quill.bubble';
+@import 'node_modules/quill/dist/quill.snow';
+
+quill-editor {
+  display: block;
+
+  .ql-snow.ql-toolbar {
+    @include border-top-radius($input-border-radius);
+
+  }
+  .ql-snow.ql-container {
+    @include border-bottom-radius($input-border-radius);
+
+  }
+
+  @each $state, $data in $form-validation-states {
+    &.is-#{$state} {
+      .ql-toolbar,
+      .ql-container {
+        border-color: map-get($data, color);
+      }
+    }
+  }
+
+}

package/table/table/table.component.d.ts

@@ -18,7 +18,7 @@ export interface ITableColumn {
     name?: string;
 }
 export declare class TableComponent<T = any> implements OnInit {
-    private _sanitizer;
+    private readonly _sanitizer;
     static ngAcceptInputType_hasHeader: BooleanInput;
     get columns(): (string | ITableColumn)[] | undefined | null;
     set columns(value: (string | ITableColumn)[] | undefined | null);

package/tel-input/README.md

@@ -0,0 +1,27 @@
+# TelInput
+
+## Getting Started
+
+The external assets from `intl-tel-input` are not being bundled into the `@theseam/ui-common` assets now, so the following step is necessary.
+
+### Make sure the flags files, utility scripts and styles are copied to the assets.
+
+In `angular.json` add the following to the styles array for the projects using `@theseam/ui-common/tel-input`.
+
+```json
+{
+  "glob": "**/*.min.css",
+  "input": "node_modules/intl-tel-input/build/css",
+  "output": "assets/vendor/intl-tel-input/css"
+},
+{
+  "glob": "**/*.png",
+  "input": "node_modules/intl-tel-input/build/img",
+  "output": "assets/vendor/intl-tel-input/img"
+},
+{
+  "glob": "**/utils.js",
+  "input": "node_modules/intl-tel-input/build/js",
+  "output": "assets/vendor/intl-tel-input/js"
+}
+```

package/tel-input/tel-input.directive.d.ts

@@ -2,10 +2,6 @@ import { DoCheck, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
 import { AssetLoaderService } from '@theseam/ui-common/services';
 import { NgControl } from '@angular/forms';
 import * as i0 from "@angular/core";
-export declare enum ThingEnum {
-    A = 123,
-    B = 124
-}
 export declare class TheSeamTelInputDirective implements OnInit, OnDestroy, DoCheck {
     private readonly _elementRef;
     private readonly _assetLoader;
@@ -16,7 +12,6 @@ export declare class TheSeamTelInputDirective implements OnInit, OnDestroy, DoCh
     private _instance;
     private _loadedAssetRefs;
     _attrType: string;
-    telInpEnum: ThingEnum;
     set value(v: string | undefined | null);
     get value(): string | undefined | null;
     private _value;
@@ -36,5 +31,5 @@ export declare class TheSeamTelInputDirective implements OnInit, OnDestroy, DoCh
     blur(): void;
     getHostElement(): HTMLInputElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamTelInputDirective, [null, null, null, { optional: true; }, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TheSeamTelInputDirective, "input[seamTelInput]", ["seamTelInput"], { "telInpEnum": "telInpEnum"; "value": "value"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TheSeamTelInputDirective, "input[seamTelInput]", ["seamTelInput"], { "value": "value"; }, {}, never, never, false, never>;
 }

package/widget/_widget-theme.scss

@@ -0,0 +1,15 @@
+@import './styles/utilities';
+
+@import './widget/widget.component';
+
+@import './widget-content-components/widget-content-header/widget-content-header.component';
+@import './widget-content-components/widget-empty-label/widget-empty-label.component';
+@import './widget-content-components/widget-footer-link/widget-footer-link.component';
+@import './widget-content-components/widget-footer-text/widget-footer-text.component';
+@import './widget-content-components/widget-header-badge/widget-header-badge.component';
+@import './widget-content-components/widget-tile/widget-tile.component';
+@import './widget-content-components/widget-tile/widget-tile.component';
+@import './widget-content-components/widget-tile/widget-tile-footer-item/widget-tile-footer-item.component';
+@import './widget-content-components/widget-tile/widget-tile-group/widget-tile-group.component';
+
+@import './widget-footer/widget-footer.component'

package/widget/styles/_utilities.scss

@@ -0,0 +1,3 @@
+@import '../../styles/utilities';
+
+@import './variables';

package/widget/styles/_variables.scss

@@ -0,0 +1,30 @@
+$seam-widget-header-title-font-size: 17px !default;
+
+$seam-widget-header-icon-height: 20px !default;
+$seam-widget-header-icon-width: 20px !default;
+$seam-widget-header-icon-color: currentColor !default;
+$seam-widget-header-background: #F4F4F4 !default;
+
+$seam-widget-body-background: #FFFFFF !default;
+$seam-widget-body-font-size: 15px !default;
+$seam-widget-box-shadow: none !default;
+
+$seam-widget-content-header-padding: 0.5rem 0.5rem 1rem 0.5rem !default;
+
+$seam-widget-footer-font-size: 13px !default;
+$seam-widget-footer-link-margin-top: 0.5rem !default;
+$seam-widget-footer-text-margin-top: 0.5rem !default;
+$seam-widget-footer-margin: 0.25rem !default;
+
+$seam-widget-tile-font-size: 14px !default;
+$seam-widget-tile-line-height: 18px !default;
+$seam-widget-tile-color: $body-color !default;
+$seam-widget-tile-background-color-hover: #f4f4f4 !default;
+$seam-widget-tile-border-color: $border-color !default;
+$seam-widget-tile-border-radius: 10px !default;
+$seam-widget-tile-margin-bottom: 0.5rem !default;
+$seam-widget-tile-padding: 4px !default;
+
+$seam-widget-tile-footer-item-font-size: 12px !default;
+
+$seam-widget-empty-label-padding: 0.5rem !default;

package/widget/widget/widget.component.scss

@@ -0,0 +1,109 @@
+@import '../styles/utilities';
+
+seam-widget {
+  display: block;
+  font-size: $seam-widget-body-font-size;
+
+  .seam-widget {
+    background: $seam-widget-body-background;
+    box-shadow: $seam-widget-box-shadow;
+  }
+
+  .widget-header {
+    display: flex;
+    flex-direction: row;
+    border-bottom: 1px solid $border-color;
+    background: $seam-widget-header-background;
+    font-size: $seam-widget-header-title-font-size;
+
+    .widget-header-content {
+      flex: 1 1 100%;
+    }
+
+    .widget-header-btns-container {
+      display: flex;
+      flex-direction: row;
+
+      > div {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 4px;
+      }
+
+      .widget-header-btn-config {
+
+        .seam-icon--fa {
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          text-align: center;
+          height: 25px;
+          width: 30px;
+
+          .svg-inline--fa {
+            max-width: 100%;
+            height: 100%;
+            width: 100%;
+          }
+        }
+      }
+
+      .widget-header-btn-collapse {
+
+        .seam-icon--fa {
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          text-align: center;
+          height: 15px;
+          width: 30px;
+
+          .svg-inline--fa {
+            max-width: 100%;
+            height: 100%;
+            width: 100%;
+          }
+        }
+      }
+    }
+
+    .widget-header-title {
+      font-size: $seam-widget-header-title-font-size;
+    }
+  }
+
+  .widget-header-icon {
+    display: inline-block;
+    vertical-align: top;
+    max-height: $seam-widget-header-icon-height;
+    max-width: $seam-widget-header-icon-width;
+    height: $seam-widget-header-icon-height;
+    width: $seam-widget-header-icon-width;
+    color: $seam-widget-header-icon-color;
+
+    .widget-header-icon--fa {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      text-align: center;
+
+      max-height: $seam-widget-header-icon-height;
+      max-width: $seam-widget-header-icon-width;
+      height: $seam-widget-header-icon-height;
+      width: $seam-widget-header-icon-width;
+
+      .svg-inline--fa {
+        max-width: 100%;
+        height: 100%;
+        width: 100%;
+      }
+    }
+
+    .widget-header-icon--img {
+      height: 100%;
+      max-height: $seam-widget-header-icon-height;
+      max-width: $seam-widget-header-icon-width;
+    }
+  }
+}

package/widget/widget-content-components/widget-button-group/widget-button-group.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/widget/widget-content-components/widget-content-header/widget-content-header.component.scss

@@ -0,0 +1,6 @@
+@import '../../styles/utilities';
+
+seam-widget-content-header {
+  display: block;
+  padding: $seam-widget-content-header-padding;
+}

package/widget/widget-content-components/widget-empty-label/widget-empty-label.component.scss

@@ -0,0 +1,9 @@
+@import '../../styles/utilities';
+
+seam-widget-empty-label {
+  display: block;
+  width: 100%;
+  text-align: left;
+  font-size: $seam-widget-body-font-size;
+  padding: $seam-widget-empty-label-padding;
+}

package/widget/widget-content-components/widget-footer-link/widget-footer-link.component.scss

@@ -0,0 +1,8 @@
+@import '../../styles/utilities';
+
+a[seam-widget-footer-link] {
+  display: block;
+  text-align: center;
+
+  margin-top: $seam-widget-footer-link-margin-top;
+}

package/widget/widget-content-components/widget-footer-text/widget-footer-text.component.scss

@@ -0,0 +1,7 @@
+@import '../../styles/utilities';
+
+seam-widget-footer-text {
+  display: block;
+  font-size: $seam-widget-footer-font-size;
+  margin-top: $seam-widget-footer-text-margin-top;
+}

package/widget/widget-content-components/widget-header-badge/widget-header-badge.component.scss

@@ -0,0 +1,5 @@
+@import '../../styles/utilities';
+
+seam-widget-header-badge.badge {
+  font-size: $seam-widget-header-title-font-size;
+}

package/widget/widget-content-components/widget-tile/widget-tile-footer-item/widget-tile-footer-item.component.scss

@@ -0,0 +1,5 @@
+@import '../../../styles/utilities';
+
+:host {
+  font-size: $seam-widget-tile-footer-item-font-size;
+}